report list

src/pages/report/List.tsx

@@ -0,0 +1,86 @@
+import { type FC, useState } from 'react'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { useGetReports } from './hooks/useReportData'
+import { useReportFilters } from './hooks/useReportFilters'
+import { getReportTableColumns } from './components/ReportTableColumns'
+import { useReportFiltersFields } from './components/ReportFiltersFields'
+import type { Report } from './types/Types'
+import type { RowDataType } from '@/components/types/TableTypes'
+import DefaulModal from '@/components/DefaulModal'
+
+const ReportsList: FC = () => {
+    const [selectedContent, setSelectedContent] = useState<string | null>(null)
+    const [isModalOpen, setIsModalOpen] = useState(false)
+
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    } = useReportFilters()
+
+    const { data: reportsData, isLoading } = useGetReports(apiParams)
+
+    const reports = reportsData?.data || []
+    const filterFields = useReportFiltersFields()
+
+    const handleViewContent = (content: string) => {
+        setSelectedContent(content)
+        setIsModalOpen(true)
+    }
+
+    const handleCloseModal = () => {
+        setIsModalOpen(false)
+        setSelectedContent(null)
+    }
+
+    const columns = getReportTableColumns({ onViewContent: handleViewContent })
+
+    const totalPages = Math.ceil(reports.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<Report & RowDataType>
+                columns={columns}
+                data={reports as (Report & RowDataType)[]}
+                isloading={isLoading}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
+
+            <DefaulModal
+                open={isModalOpen}
+                close={handleCloseModal}
+                isHeader={true}
+                title_header="متن کامل گزارش"
+            >
+                <div className="mt-4">
+                    <p className="text-sm text-foreground whitespace-pre-wrap break-words">
+                        {selectedContent || '-'}
+                    </p>
+                </div>
+            </DefaulModal>
+        </div>
+    )
+}
+
+export default ReportsList

src/pages/report/components/ReportFiltersFields.tsx

@@ -0,0 +1,12 @@
+import { useMemo } from 'react'
+import type { FieldType } from '@/components/Filters'
+
+export const useReportFiltersFields = (): FieldType[] => {
+    return useMemo(() => [
+        {
+            type: 'input',
+            name: 'search',
+            placeholder: 'جستجو (موضوع یا محتوا)',
+        },
+    ], [])
+}

src/pages/report/components/ReportTableColumns.tsx

@@ -0,0 +1,104 @@
+import { Eye } from 'iconsax-react'
+import type { ColumnType } from '@/components/types/TableTypes'
+import type { Report } from '../types/Types'
+import { formatOptionalDate } from '@/helpers/func'
+import Status from '@/components/Status'
+
+interface GetReportTableColumnsProps {
+    onViewContent?: (content: string) => void
+}
+
+const getStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'info' | 'pending' => {
+    const variantMap: Record<string, 'success' | 'error' | 'warning' | 'info' | 'pending'> = {
+        'pending': 'pending',
+        'read': 'info',
+        'resolved': 'success',
+        'rejected': 'error',
+    }
+    return variantMap[status] || 'pending'
+}
+
+export const getReportTableColumns = (props?: GetReportTableColumnsProps): ColumnType<Report>[] => {
+    return [
+        {
+            key: 'subject',
+            title: 'موضوع',
+            render: (item: Report) => {
+                return (
+                    <div className="max-w-xs truncate" title={item.subject}>
+                        {item.subject || '-'}
+                    </div>
+                )
+            }
+        },
+        {
+            key: 'content',
+            title: 'محتوا',
+            render: (item: Report) => {
+                return (
+                    <div className="max-w-xs truncate" title={item.content}>
+                        {item.content || '-'}
+                    </div>
+                )
+            }
+        },
+        {
+            key: 'phone',
+            title: 'شماره تماس',
+            render: (item: Report) => {
+                return item.phone || '-'
+            }
+        },
+        {
+            key: 'status',
+            title: 'وضعیت',
+            render: (item: Report) => {
+                const statusLabels: Record<string, string> = {
+                    'pending': 'در انتظار',
+                    'read': 'خوانده شده',
+                    'resolved': 'حل شده',
+                    'rejected': 'رد شده',
+                }
+                return (
+                    <Status
+                        variant={getStatusVariant(item.status)}
+                        label={statusLabels[item.status] || item.status}
+                    />
+                )
+            }
+        },
+        {
+            key: 'createdAt',
+            title: 'تاریخ ثبت',
+            render: (item: Report) => {
+                return formatOptionalDate(item.createdAt, {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                })
+            }
+        },
+        {
+            key: 'details',
+            title: '',
+            render: (item: Report) => {
+                if (!item.content || !props?.onViewContent) {
+                    return null
+                }
+                return (
+                    <Eye
+                        size={20}
+                        color="#8C90A3"
+                        className="cursor-pointer hover:opacity-70 transition-opacity"
+                        onClick={(e) => {
+                            e.stopPropagation()
+                            props.onViewContent?.(item.content)
+                        }}
+                    />
+                )
+            }
+        },
+    ]
+}

src/pages/report/hooks/useReportData.ts

@@ -0,0 +1,9 @@
+import * as api from "../service/ReportService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetReports = (params?: Record<string, string | number>) => {
+  return useQuery({
+    queryKey: ["reports", params],
+    queryFn: () => api.getReports(params),
+  });
+};

src/pages/report/hooks/useReportFilters.ts

@@ -0,0 +1,46 @@
+import { useState, useMemo } from "react";
+import type { FilterValues } from "@/components/Filters";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const useReportFilters = () => {
+  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;
+    }
+
+    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/report/service/ReportService.ts

@@ -0,0 +1,11 @@
+import axios from "@/config/axios";
+import type { GetReportsResponse } from "../types/Types";
+
+export const getReports = async (
+  params?: Record<string, string | number>
+): Promise<GetReportsResponse> => {
+  const { data } = await axios.get<GetReportsResponse>("/admin/contact", {
+    params,
+  });
+  return data;
+};

src/pages/report/types/Types.ts

@@ -0,0 +1,14 @@
+import type { IResponse } from "@/types/response.types";
+
+export interface Report {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  subject: string;
+  content: string;
+  phone: string | null;
+  status: string;
+}
+
+export type GetReportsResponse = IResponse<Report[]>;