complete installation page - create reusable table - install and config react query

src/components/common/combo-box.tsx

@@ -13,9 +13,10 @@ const value = [
 type Props = {
     field?: any
     placeholder?: string
+    className?: string
 }
 
-export const ComboBox: FC<Props> = ({ field, placeholder }) => {
+export const ComboBox: FC<Props> = ({ field, placeholder, className }) => {
     const [query, setQuery] = useState('')
 
     const filteredValue =
@@ -30,7 +31,7 @@ export const ComboBox: FC<Props> = ({ field, placeholder }) => {
             <div className="relative w-full">
                 <ComboboxInput
                     placeholder={placeholder}
-                    className="input-style min-w-full"
+                    className={`input-style min-w-full ${className}`}
                     displayValue={(person: any) => person?.name}
                     onChange={(event) => setQuery(event.target.value)}
                     ref={field && field.ref}

src/components/common/create-col.tsx

@@ -0,0 +1,18 @@
+import { createColumnHelper } from "@tanstack/react-table";
+
+type ColumnConfig = {
+  accessor: any;
+  header: string;
+  enableSorting?: boolean;
+};
+
+export const createColumns = <T,>(columnConfigs: ColumnConfig[]) => {
+  const columnHelper = createColumnHelper<T>();
+  return columnConfigs.map(config =>
+    columnHelper.accessor(config.accessor, {
+      header: () => config.header,
+      cell: (info) => info.getValue(),
+      enableSorting: config.enableSorting ?? true,
+    })
+  );
+};

src/components/common/table.tsx

@@ -0,0 +1,72 @@
+import { flexRender, getCoreRowModel, SortingState, useReactTable } from "@tanstack/react-table"
+import { ArrowDown2, ArrowUp2, SearchNormal1 } from "iconsax-react"
+import { FC } from "react"
+import { Input } from "./input"
+import { ComboBox } from "./combo-box"
+
+type Props = {
+    columns: any
+    data: any
+    sorting: SortingState,
+    setSorting: React.Dispatch<React.SetStateAction<SortingState>>,
+}
+
+export const Table: FC<Props> = ({ columns, data, setSorting, sorting }) => {
+
+    const table = useReactTable({
+        data: data ? data : [],
+        columns: columns ? columns : [],
+        debugTable: true,
+        getCoreRowModel: getCoreRowModel(),
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange',
+        debugHeaders: true,
+        debugColumns: true,
+        state: {
+            sorting
+        },
+        onSortingChange: setSorting,
+    })
+
+    return (
+        <div className="flex flex-col gap-10">
+            <div className="flex flex-col sm:flex-row justify-between items-center gap-2.5 md:gap-10">
+                <div className="sm:max-w-[300px] xl:max-w-[450px] w-full">
+                    <Input placeholder="جستجو" className="bg-auth-form placeholder:text-[#777577]" icon={<SearchNormal1 color="#777577" />} />
+                </div>
+                <div className="w-full sm:max-w-[100px]">
+                    <ComboBox placeholder="100" className="bg-auth-form" />
+                </div>
+            </div>
+            <div className="block max-w-full overflow-x-auto overflow-y-hidden bg-auth-form rounded-[40px] shadow-sm p-4 xl:p-9">
+                <table>
+                    <thead className="border-b border-b-secondary-color">
+                        {table.getHeaderGroups().map((headerGroup: any, index: number) => (
+                            <tr key={index}>
+                                {headerGroup.headers.map((header: any, index: number) => (
+                                    <th key={index}>
+                                        <div {...{ className: header.column.getCanSort() ? "text-secondary-text-color text-base font-normal flex flex-row items-center justify-center gap-1 px-4 py-2" : "", onClick: header.column.getToggleSortingHandler() }}>
+                                            {flexRender(header.column.columnDef.header, header.getContext())}
+                                            {{ asc: <ArrowDown2 color="#777577" className="size-4" />, desc: <ArrowUp2 color="#777577" className="size-4" /> }[header.column.getIsSorted() as string] ?? null}
+                                        </div>
+                                    </th>
+                                ))}
+                            </tr>
+                        ))}
+                    </thead>
+                    <tbody>
+                        {table.getRowModel().rows.map((row: any, index: number) => (
+                            <tr key={index}>
+                                {row.getVisibleCells().map((cell: any, index: number) => (
+                                    <td key={index} className="text-primary-text-color font-normal text-base px-4 py-5 text-center">
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}

src/components/installation-reports/index.tsx

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query"
+import { installationReportsCol } from "../../utility/reports"
+import { Table } from "../common/table"
+import { getReportsList } from "../../services/api"
+import { useState } from "react"
+import { SortingState } from "@tanstack/react-table"
+
+export const InstallationReports = () => {
+    const [sorting, setSorting] = useState<SortingState>([])
+    const { data, isLoading } = useQuery({
+        queryKey: ["installation-reports-list"],
+        queryFn: getReportsList
+    })
+
+    if (isLoading) return <p>LODING .....</p>
+    return (
+        <Table columns={installationReportsCol} data={data?.data} sorting={sorting} setSorting={setSorting} />
+    )
+}

src/index.css

@@ -33,6 +33,10 @@
         @apply text-base font-medium flex w-full justify-center bg-primary-color max-w-[442px] max-h-[55px] rounded-[20px] p-[18px] text-white
     }
 
+    table {
+        @apply w-full border-collapse
+    }
+
     #otp {
         direction: ltr;
     }

src/index.tsx

@@ -4,6 +4,8 @@ import { RouterProvider } from 'react-router-dom';
 import { router } from './router';
 import './index.css'
 import "iranianbanklogos/dist/ibl.css";
+import { RQProvider } from './rq-provider';
+
 
 
 const root = ReactDOM.createRoot(
@@ -12,6 +14,8 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <RQProvider>
+      <RouterProvider router={router} />
+    </RQProvider>
   </React.StrictMode>
 );

src/pages/dashboard/installation-reports.tsx

@@ -0,0 +1,7 @@
+import { InstallationReports } from "../../components/installation-reports"
+
+export const InstallationReportsPage = () => {
+    return (
+        <InstallationReports />
+    )
+}

src/router/index.tsx

@@ -12,6 +12,7 @@ import { DashboardLayout } from "../components/ui/dashboard/layout";
 import { MyAcccount } from "../pages/dashboard/my-account";
 import { Wallet } from "../pages/dashboard/wallet";
 import { ManagementBankAccountPage } from "../pages/dashboard/management-bank-account";
+import { InstallationReportsPage } from "../pages/dashboard/installation-reports";
 
 
 export const router = createBrowserRouter([
@@ -35,6 +36,10 @@ export const router = createBrowserRouter([
                 path: "management-bank-accounts",
                 element: <ManagementBankAccountPage />
             },
+            {
+                path: "installation-reports",
+                element: <InstallationReportsPage />
+            },
         ]
     },
     {

src/rq-provider.tsx

@@ -0,0 +1,23 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
+import { PropsWithChildren, useRef } from "react"
+
+export const RQProvider = ({ children }: PropsWithChildren) => {
+    const rqConfig = useRef(
+        new QueryClient({
+            defaultOptions: {
+                queries: {
+                    refetchOnWindowFocus: false,
+                    retry: 0,
+                    staleTime: 15 * 1000
+                }
+            }
+        })
+    )
+    return (
+        <QueryClientProvider client={rqConfig.current}>
+            {children}
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+    )
+}

src/services/api/index.ts

@@ -0,0 +1,4 @@
+import { installationReportsInterface } from "../../types";
+import { axiosInstance } from "../axios";
+
+export const getReportsList = () => axiosInstance.get<installationReportsInterface>("/reports")

src/services/axios.ts

@@ -0,0 +1,7 @@
+import axios, { AxiosRequestConfig } from "axios";
+
+const axiosParam: AxiosRequestConfig = {
+    baseURL: "http://localhost:4000"
+}
+
+export const axiosInstance = axios.create(axiosParam)

src/types/index.ts

@@ -98,4 +98,14 @@ export interface AddNewCartInterface {
     family: string
     cartNumber: string
     shabaNumber: string
+}
+
+export interface installationReportsInterface {
+    status: boolean
+    dollar: string
+    score: string
+    device_model: string
+    imei_number: string
+    install_date: string
+    install_iemi: string
 }

src/utility/reports.tsx

@@ -0,0 +1,18 @@
+import { createColumns } from "../components/common/create-col";
+
+type colConfig = {
+    accessor: string
+    header: string
+}
+
+const columnConfigs: colConfig[] | [] = [
+    { accessor: "device_model", header: "وضعیت" },
+    { accessor: "dollar", header: "دلار" },
+    { accessor: "score", header: "امتیاز" },
+    { accessor: "device_model", header: "مدل دستگاه" },
+    { accessor: "imei_number", header: "شماره IMEI" },
+    { accessor: "install_date", header: "تاریخ نصب" },
+    { accessor: "install_iemi", header: "تاریخ ثبت IMEI" },
+];
+
+export const installationReportsCol = createColumns<any>(columnConfigs);