list of reviews
This commit is contained in:
@@ -71,4 +71,8 @@ export const Pages = {
|
||||
add: "/coupons/add",
|
||||
update: "/coupons/update/",
|
||||
},
|
||||
reviews: {
|
||||
list: "/reviews/list",
|
||||
detail: "/reviews/detail/",
|
||||
},
|
||||
};
|
||||
|
||||
+14
-22
@@ -1,29 +1,21 @@
|
||||
export const formatDate = (dateString: string): string => {
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
} catch (error) {
|
||||
return dateString;
|
||||
}
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
export const formatDateShort = (dateString: string): string => {
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}).format(date);
|
||||
} catch (error) {
|
||||
return dateString;
|
||||
}
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("fa-IR", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
export const formatOptionalDate = (
|
||||
|
||||
+12
-1
@@ -64,7 +64,8 @@
|
||||
"roles": "سطح دسترسی ها",
|
||||
"payment_methods": "روش های پرداخت",
|
||||
"admins": "مدیران",
|
||||
"shipment_methods": "روش های ارسال"
|
||||
"shipment_methods": "روش های ارسال",
|
||||
"reviews": "نظرات"
|
||||
},
|
||||
"shipment": {
|
||||
"dineIn": "سرو در محل",
|
||||
@@ -853,5 +854,15 @@
|
||||
"readyForDeliveryCar": "آماده برای تحویل با ماشین",
|
||||
"readyForDeliveryCourier": "آماده برای تحویل با پیک",
|
||||
"delivered": "تحویل داده شده"
|
||||
},
|
||||
"reviews": {
|
||||
"reviews": "نظرات",
|
||||
"reviews_list": "لیست نظرات",
|
||||
"add_review": "افزودن نظر",
|
||||
"edit_review": "ویرایش نظر",
|
||||
"review_list": "لیست نظرات",
|
||||
"review_name": "نام نظر",
|
||||
"review_email": "ایمیل نظر",
|
||||
"review_comment": "نظر"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import { type FC } from 'react'
|
||||
import Table from '@/components/Table'
|
||||
import Filters from '@/components/Filters'
|
||||
import { useGetReviews } from './hooks/useReviewData'
|
||||
import { useReviewFilters } from './hooks/useReviewFilters'
|
||||
import { getReviewTableColumns } from './components/ReviewTableColumns'
|
||||
import { useReviewFiltersFields } from './components/ReviewFiltersFields'
|
||||
import type { Review } from './types/Types'
|
||||
import type { RowDataType } from '@/components/types/TableTypes'
|
||||
|
||||
const ReviewsList: FC = () => {
|
||||
const {
|
||||
filters,
|
||||
currentPage,
|
||||
apiParams,
|
||||
handleFiltersChange,
|
||||
handlePageChange,
|
||||
limit,
|
||||
} = useReviewFilters()
|
||||
|
||||
const { data: reviewsData, isLoading } = useGetReviews(apiParams)
|
||||
|
||||
const reviews = reviewsData?.data || []
|
||||
const columns = getReviewTableColumns()
|
||||
const filterFields = useReviewFiltersFields()
|
||||
|
||||
const totalPages = Math.ceil(reviews.length / limit) || 1
|
||||
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h1 className='text-lg font-light'>لیست نظرات</h1>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Filters
|
||||
fields={filterFields}
|
||||
onChange={handleFiltersChange}
|
||||
initialValues={filters}
|
||||
searchField="search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table<Review & RowDataType>
|
||||
columns={columns}
|
||||
data={reviews as (Review & RowDataType)[]}
|
||||
isloading={isLoading}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPageChange: handlePageChange,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReviewsList
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useMemo } from 'react'
|
||||
import type { FieldType } from '@/components/Filters'
|
||||
|
||||
export const useReviewFiltersFields = (): FieldType[] => {
|
||||
return useMemo(() => [
|
||||
{
|
||||
type: 'input',
|
||||
name: 'search',
|
||||
placeholder: 'جستجو (نام کاربر یا غذا)',
|
||||
},
|
||||
], [])
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Eye, Star1 } from 'iconsax-react'
|
||||
import type { ColumnType } from '@/components/types/TableTypes'
|
||||
import type { Review } from '../types/Types'
|
||||
import { formatOptionalDate } from '@/helpers/func'
|
||||
import Status from '@/components/Status'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '@/config/Pages'
|
||||
|
||||
const getStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'info' | 'pending' => {
|
||||
const variantMap: Record<string, 'success' | 'error' | 'warning' | 'info' | 'pending'> = {
|
||||
'pending': 'pending',
|
||||
'approved': 'success',
|
||||
'rejected': 'error',
|
||||
}
|
||||
return variantMap[status] || 'pending'
|
||||
}
|
||||
|
||||
export const getReviewTableColumns = (): ColumnType<Review>[] => {
|
||||
return [
|
||||
{
|
||||
key: 'user',
|
||||
title: 'کاربر',
|
||||
render: (item: Review) => {
|
||||
const name = [item.user.firstName, item.user.lastName].filter(Boolean).join(' ')
|
||||
return name || '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'food',
|
||||
title: 'غذا',
|
||||
render: (item: Review) => {
|
||||
return item.food.title || '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'rating',
|
||||
title: 'امتیاز',
|
||||
render: (item: Review) => {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<Star1
|
||||
size={16}
|
||||
color="black"
|
||||
variant="Bold"
|
||||
/>
|
||||
<div className='mt-1 text-sm'>{item.rating}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'comment',
|
||||
title: 'نظر',
|
||||
render: (item: Review) => {
|
||||
return (
|
||||
<div className="max-w-xs truncate" title={item.comment}>
|
||||
{item.comment || '-'}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'وضعیت',
|
||||
render: (item: Review) => {
|
||||
const statusLabels: Record<string, string> = {
|
||||
'pending': 'در انتظار',
|
||||
'approved': 'تایید شده',
|
||||
'rejected': 'رد شده',
|
||||
}
|
||||
return (
|
||||
<Status
|
||||
variant={getStatusVariant(item.status)}
|
||||
label={statusLabels[item.status] || item.status}
|
||||
/>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
title: 'تاریخ ثبت',
|
||||
render: (item: Review) => {
|
||||
return formatOptionalDate(item.createdAt, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'details',
|
||||
title: '',
|
||||
render: (item: Review) => {
|
||||
return (
|
||||
<Link to={Pages.reviews.detail + item.id}>
|
||||
<Eye size={20} color="#8C90A3" className="cursor-pointer" />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import * as api from "../service/ReviewService";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const useGetReviews = (params?: Record<string, string | number>) => {
|
||||
return useQuery({
|
||||
queryKey: ["reviews", params],
|
||||
queryFn: () => api.getReviews(params),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,50 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import type { FilterValues } from "@/components/Filters";
|
||||
|
||||
const DEFAULT_PAGE = 1;
|
||||
const DEFAULT_LIMIT = 10;
|
||||
|
||||
export const useReviewFilters = () => {
|
||||
const [filters, setFilters] = useState<FilterValues>({});
|
||||
const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
|
||||
const [limit] = useState(DEFAULT_LIMIT);
|
||||
|
||||
const apiParams = useMemo(() => {
|
||||
const params: Record<string, string | number> = {
|
||||
page: currentPage,
|
||||
limit: limit,
|
||||
};
|
||||
|
||||
if (filters.search) {
|
||||
params.search = filters.search as string;
|
||||
}
|
||||
|
||||
if (filters.status) {
|
||||
params.status = filters.status as string;
|
||||
}
|
||||
|
||||
if (filters.rating) {
|
||||
params.rating = filters.rating as string;
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [filters, currentPage, limit]);
|
||||
|
||||
const handleFiltersChange = (newFilters: FilterValues) => {
|
||||
setFilters(newFilters);
|
||||
setCurrentPage(DEFAULT_PAGE);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
return {
|
||||
filters,
|
||||
currentPage,
|
||||
apiParams,
|
||||
handleFiltersChange,
|
||||
handlePageChange,
|
||||
limit,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import axios from "@/config/axios";
|
||||
import type { GetReviewsResponse } from "../types/Types";
|
||||
|
||||
export const getReviews = async (
|
||||
params?: Record<string, string | number>
|
||||
): Promise<GetReviewsResponse> => {
|
||||
const { data } = await axios.get<GetReviewsResponse>("/admin/reviews", {
|
||||
params,
|
||||
});
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { IResponse } from "@/types/response.types";
|
||||
import type { RowDataType } from "@/components/types/TableTypes";
|
||||
|
||||
export interface ReviewFood {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
restaurant: string;
|
||||
category: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
content: string | null;
|
||||
price: number;
|
||||
points: number | null;
|
||||
order: number | null;
|
||||
prepareTime: number | null;
|
||||
sat: boolean;
|
||||
sun: boolean;
|
||||
mon: boolean;
|
||||
breakfast: boolean;
|
||||
noon: boolean;
|
||||
dinner: boolean;
|
||||
stock: number;
|
||||
stockDefault: number;
|
||||
isActive: boolean;
|
||||
images: string[];
|
||||
inPlaceServe: boolean;
|
||||
pickupServe: boolean;
|
||||
rate: number;
|
||||
discount: number;
|
||||
isSpecialOffer: boolean;
|
||||
}
|
||||
|
||||
export interface ReviewUser {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
birthDate: string;
|
||||
marriageDate: string;
|
||||
referrer: string | null;
|
||||
isActive: boolean;
|
||||
gender: boolean;
|
||||
wallet: number;
|
||||
points: number;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
export interface Review extends RowDataType {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
order: string;
|
||||
food: ReviewFood;
|
||||
user: ReviewUser;
|
||||
comment: string;
|
||||
rating: number;
|
||||
positivePoints: string[];
|
||||
negativePoints: string[];
|
||||
status: string;
|
||||
}
|
||||
|
||||
export type GetReviewsResponse = IResponse<Review[]>;
|
||||
@@ -36,6 +36,7 @@ import UpdateShipmentMethod from '@/pages/shipmentMethod/Update'
|
||||
import CouponsList from '@/pages/coupon/List'
|
||||
import CreateCoupon from '@/pages/coupon/Create'
|
||||
import UpdateCoupon from '@/pages/coupon/Update'
|
||||
import ReviewsList from '@/pages/review/List'
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
const { hasSubMenu } = useSharedStore()
|
||||
@@ -87,6 +88,8 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.coupons.list} element={<CouponsList />} />
|
||||
<Route path={Pages.coupons.add} element={<CreateCoupon />} />
|
||||
<Route path={Pages.coupons.update + ':id'} element={<UpdateCoupon />} />
|
||||
|
||||
<Route path={Pages.reviews.list} element={<ReviewsList />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+10
-1
@@ -2,7 +2,7 @@ import { type FC, useEffect } from 'react'
|
||||
import LogoImage from '../assets/images/logo.svg'
|
||||
import LogoSmall from '../assets/images/logo-small.svg'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { DocumentText, Home2, Logout, Message, NotificationStatus, People, Setting2, TicketDiscount, Chart, Calendar, Security, Card, SecurityUser, TruckFast, Element3 } from 'iconsax-react'
|
||||
import { DocumentText, Home2, Logout, Message, NotificationStatus, People, Setting2, TicketDiscount, Chart, Calendar, Security, Card, SecurityUser, TruckFast, Element3, Star1 } from 'iconsax-react'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../config/Pages'
|
||||
@@ -120,6 +120,15 @@ const SideBar: FC = () => {
|
||||
activeName='customers'
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Star1 variant={isActive('reviews') ? 'Bold' : 'Outline'} color={isActive('reviews') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.reviews')}
|
||||
isActive={isActive('reviews')}
|
||||
link={Pages.reviews.list}
|
||||
name='reviews'
|
||||
activeName='reviews'
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<SecurityUser variant={isActive('admins') ? 'Bold' : 'Outline'} color={isActive('admins') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.admins')}
|
||||
|
||||
Reference in New Issue
Block a user