list of schedules

src/pages/schedule/List.tsx

@@ -0,0 +1,68 @@
+import { type FC } from 'react'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { Add } from 'iconsax-react'
+import Button from '@/components/Button'
+import { useGetSchedules, useDeleteSchedule } from './hooks/useScheduleData'
+import { useScheduleFilters } from './hooks/useScheduleFilters'
+import { getScheduleTableColumns } from './components/ScheduleTableColumns'
+import { useScheduleFiltersFields } from './components/ScheduleFiltersFields'
+
+const ScheduleList: FC = () => {
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    } = useScheduleFilters()
+
+    const { data: schedulesData, isLoading } = useGetSchedules(apiParams)
+    const { mutate: deleteSchedule, isPending: isDeleting } = useDeleteSchedule()
+
+    const schedules = schedulesData?.data || []
+    const columns = getScheduleTableColumns({
+        onDelete: (id: string) => deleteSchedule(id),
+        isDeleting
+    })
+    const filterFields = useScheduleFiltersFields()
+
+    const totalPages = Math.ceil(schedules.length / limit) || 1
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>لیست زمانبندی</h1>
+                <Button className='w-fit px-6'>
+                    <div className='flex gap-2 items-center'>
+                        <Add color='#fff' size={20} />
+                        <span>افزودن زمانبندی</span>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={filterFields}
+                    onChange={handleFiltersChange}
+                    initialValues={filters}
+                    searchField="search"
+                />
+            </div>
+
+            <Table
+                columns={columns}
+                data={schedules}
+                isLoading={isLoading}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
+        </div>
+    )
+}
+
+export default ScheduleList

src/pages/schedule/components/ScheduleFiltersFields.tsx

@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+import type { FieldType } from '@/components/Filters'
+
+export const useScheduleFiltersFields = (): FieldType[] => {
+    return useMemo(() => [
+        {
+            type: 'input',
+            name: 'search',
+            placeholder: 'جستجو',
+        },
+    ], [])
+}
+

src/pages/schedule/components/ScheduleTableColumns.tsx

@@ -0,0 +1,65 @@
+import type { ColumnType } from '@/components/types/TableTypes'
+import type { Schedule } from '../types/Types'
+import Status from '@/components/Status'
+import TrashWithConfrim from '@/components/TrashWithConfrim'
+import { Eye } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
+
+interface GetScheduleTableColumnsParams {
+    onDelete?: (id: string) => void
+    isDeleting?: boolean
+}
+
+export const getScheduleTableColumns = ({ onDelete, isDeleting }: GetScheduleTableColumnsParams = {}): ColumnType<Schedule>[] => {
+    return [
+        {
+            key: 'openTime',
+            title: 'زمان باز',
+        },
+        {
+            key: 'closeTime',
+            title: 'زمان بسته',
+        },
+        {
+            key: 'isActive',
+            title: 'وضعیت',
+            render: (item: Schedule) => {
+                return (
+                    <Status variant={item.isActive ? 'success' : 'error'} label={item.isActive ? 'فعال' : 'غیرفعال'} />
+                )
+            }
+        },
+        {
+            key: 'createdAt',
+            title: 'تاریخ ایجاد',
+            render: (item: Schedule) => {
+                return new Date(item.createdAt).toLocaleDateString('fa-IR')
+            }
+        },
+        {
+            key: 'actions',
+            title: '',
+            render: (item: Schedule) => {
+                return (
+                    <div className='flex gap-2 items-center'>
+                        <Link to={Pages.schedule.update + item.id}>
+                            <Eye
+                                size={20}
+                                color='#8C90A3'
+                                className='cursor-pointer'
+                            />
+                        </Link>
+                        {onDelete && (
+                            <TrashWithConfrim
+                                onDelete={() => onDelete(item.id)}
+                                isLoading={isDeleting}
+                            />
+                        )}
+                    </div>
+                )
+            }
+        },
+    ]
+}
+

src/pages/schedule/hooks/useScheduleData.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/ScheduleService";
+
+export const useGetSchedules = (params?: Record<string, unknown>) => {
+  return useQuery({
+    queryKey: ["schedules", params],
+    queryFn: () => api.getSchedules(params),
+  });
+};
+
+export const useDeleteSchedule = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.deleteSchedule,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["schedules"] });
+    },
+  });
+};

src/pages/schedule/hooks/useScheduleFilters.ts

@@ -0,0 +1,43 @@
+import { useState, useMemo } from 'react'
+import type { FilterValues } from '@/components/Filters'
+
+const DEFAULT_PAGE = 1
+const DEFAULT_LIMIT = 10
+
+export const useScheduleFilters = () => {
+    const [filters, setFilters] = useState<FilterValues>({})
+    const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE)
+    const [limit] = useState(DEFAULT_LIMIT)
+
+    const apiParams = useMemo(() => {
+        const params: Record<string, unknown> = {
+            page: currentPage,
+            limit: limit,
+        }
+
+        if (filters.search) {
+            params.search = filters.search
+        }
+
+        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,
+    }
+}
+

src/pages/schedule/service/ScheduleService.ts

@@ -0,0 +1,16 @@
+import axios from "@/config/axios";
+import type { GetSchedulesResponseType } from "../types/Types";
+
+export const getSchedules = async (
+  params?: Record<string, unknown>
+): Promise<GetSchedulesResponseType> => {
+  const { data } = await axios.get<GetSchedulesResponseType>("/schedules", {
+    params,
+  });
+  return data;
+};
+
+export const deleteSchedule = async (id: string) => {
+  const { data } = await axios.delete(`/schedules/${id}`);
+  return data;
+};

src/pages/schedule/types/Types.ts

@@ -0,0 +1,14 @@
+import type { IResponse } from "@/types/response.types";
+
+export type Schedule = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  openTime: string;
+  closeTime: string;
+  isActive: boolean;
+  restId: string;
+};
+
+export type GetSchedulesResponseType = IResponse<Schedule[]>;