list of requests

src/pages/designer/List.tsx

@@ -0,0 +1,94 @@
+import Button from "@/components/Button";
+import Table from "@/components/Table";
+import type { ColumnType } from "@/components/types/TableTypes";
+import { Paths } from "@/config/Paths";
+import { formatDateShort, formatPrice } from "@/helpers/func";
+import { usePageTitle } from "@/hooks/usePageTitle";
+import { getTotalPrice } from "@/pages/designer/designerRequestForm";
+import { useGetDesignRequests } from "@/pages/designer/hooks/useDesignerData";
+import type { RequestDesignItemType } from "@/pages/designer/types/Types";
+import { type FC, useMemo } from "react";
+import { Link } from "react-router-dom";
+
+const getInvoiceUrl = (invoiceId: string) => `${import.meta.env.VITE_INVOICE_URL}${invoiceId}`;
+
+const RequestDesignList: FC = () => {
+  usePageTitle("لیست درخواست‌های طراحی");
+  const { data, isPending } = useGetDesignRequests();
+  const requests = data?.data ?? [];
+
+  const columns = useMemo<ColumnType<RequestDesignItemType>[]>(
+    () => [
+      { title: "عنوان", key: "title", className: "font-medium text-black" },
+      { title: "تاریخ ثبت", key: "createdAt", render: (item) => formatDateShort(item.createdAt) },
+      { title: "زمان تحویل", key: "expectedDate", render: (item) => formatDateShort(item.expectedDate) },
+      { title: "تعداد صفحات", key: "count", render: (item) => item.count.toLocaleString("fa-IR") },
+      {
+        title: "مبلغ",
+        key: "totalPrice",
+        render: (item) => `${formatPrice(getTotalPrice(item.count))} تومان`,
+      },
+      {
+        title: "وضعیت",
+        key: "paidAt",
+        render: (item) => {
+          const isPaid = Boolean(item.paidAt);
+          return (
+            <span className={`inline-flex rounded-full px-3 py-1 text-xs ${isPaid ? "bg-[#E8F5E9] text-[#2E7D32]" : "bg-[#FFF3E0] text-[#E65100]"}`}>{isPaid ? "پرداخت شده" : "در انتظار پرداخت"}</span>
+          );
+        },
+      },
+      {
+        title: "عملیات",
+        key: "actions",
+        render: (item) => {
+          if (item.paidAt) {
+            return <span className="text-[#999999]">—</span>;
+          }
+
+          return (
+            <Button
+              type="button"
+              className="w-fit px-4 py-1.5 text-xs"
+              onClick={(event) => {
+                event.stopPropagation();
+                window.open(getInvoiceUrl(item.invoiceId), "_blank");
+              }}
+            >
+              پرداخت
+            </Button>
+          );
+        },
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="mt-4 w-full">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <h1> درخواست‌های طراحی</h1>
+        <Link to={Paths.designer.request}>
+          <Button className="w-fit px-6">درخواست جدید</Button>
+        </Link>
+      </div>
+
+      <Table
+        columns={columns}
+        data={requests}
+        isLoading={isPending}
+        className="mt-6"
+        noDataMessage={
+          <div className="flex flex-col items-center gap-5 py-2">
+            <span>هنوز درخواست طراحی ثبت نشده است.</span>
+            <Link to={Paths.designer.request}>
+              <Button className="w-fit px-6">ثبت درخواست طراحی</Button>
+            </Link>
+          </div>
+        }
+      />
+    </div>
+  );
+};
+
+export default RequestDesignList;

src/pages/designer/hooks/useDesignerData.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/DesignerService";
 
 export const useInitiateDesignRequest = () => {
@@ -6,3 +6,10 @@ export const useInitiateDesignRequest = () => {
     mutationFn: api.initiateDesignRequest,
   });
 };
+
+export const useGetDesignRequests = () => {
+  return useQuery({
+    queryKey: ["design-requests"],
+    queryFn: api.getDesignRequests,
+  });
+};

src/pages/designer/service/DesignerService.ts

@@ -1,15 +1,12 @@
 import axios from "@/config/axios";
-import type {
-  DesignRequestInitiateParams,
-  RequestDesignResponse,
-} from "../types/Types";
+import type { DesignRequestInitiateParams, DesignRequestsResponse, RequestDesignResponse } from "../types/Types";
 
-export const initiateDesignRequest = async (
-  params: DesignRequestInitiateParams,
-): Promise<RequestDesignResponse> => {
-  const { data } = await axios.post(
-    "/admin/design-request/initiate",
-    params,
-  );
+export const initiateDesignRequest = async (params: DesignRequestInitiateParams): Promise<RequestDesignResponse> => {
+  const { data } = await axios.post("/admin/design-request/initiate", params);
+  return data;
+};
+
+export const getDesignRequests = async (): Promise<DesignRequestsResponse> => {
+  const { data } = await axios.get("/admin/design-request");
   return data;
 };

src/pages/designer/types/Types.ts

@@ -47,3 +47,20 @@ export type DesignRequestType = {
 };
 
 export type RequestDesignResponse = BaseResponse<DesignRequestType>;
+
+export type RequestDesignItemType = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  title: string;
+  count: number;
+  desc: string;
+  expectedDate: string;
+  attachments: string[];
+  invoiceId: string;
+  paidAt: string | null;
+  business: string;
+};
+
+export type DesignRequestsResponse = BaseResponse<RequestDesignItemType[]>;

src/pages/editor/components/canvas/ObjectRenderer.tsx

@@ -15,7 +15,7 @@ import {
     VideoShape,
     AudioShape,
 } from "../tools";
-import Table from "@/components/Table";
+import EditorTable from "@/components/EditorTable";
 
 type ObjectRendererProps = {
     obj: EditorObject;
@@ -234,7 +234,7 @@ const ObjectRenderer = ({
             break;
         case "grid":
             shapeElement = (
-                <Table
+                <EditorTable
                     key={obj.id}
                     obj={obj}
                     selectedCellId={selectedCellId || null}