first commit

app/(panel)/tickets/create/page.tsx

@@ -0,0 +1,60 @@
+import { API_URL } from "@/core/constant";
+import TicketForm from "@/ui/form/TicketForm";
+import { cookies } from "next/headers";
+
+async function getDepartmentsData() {
+  const cookieStore = await cookies();
+  const tokenCookie = cookieStore.get("userToken"); // گرفتن کوکی از درخواست کاربر
+
+  const res = await fetch(`${API_URL}/department/all`, {
+    cache: "no-cache",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: `${tokenCookie?.name}=${tokenCookie?.value}`,
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error("خطا در واكشي ديتاي واحد ها");
+  }
+
+  const data = await res.json();
+
+  return data;
+}
+
+async function getUsersData() {
+  const cookieStore = await cookies();
+  const tokenCookie = cookieStore.get("userToken"); // گرفتن کوکی از درخواست کاربر
+  const res = await fetch(`${API_URL}/user/all`, {
+    cache: "no-cache",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: `${tokenCookie?.name}=${tokenCookie?.value}`,
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error("خطا در واكشي ديتاي واحد ها");
+  }
+
+  const data = await res.json();
+
+  return data;
+}
+
+export default async function Page() {
+  const getdepartmentsdata = await getDepartmentsData();
+  const getusersdata = await getUsersData();
+
+  const departments = getdepartmentsdata?.data;
+  const users = getusersdata?.data;
+
+  return (
+    <>
+      <TicketForm departments={departments} users={users} />
+    </>
+  );
+}

app/(panel)/tickets/page.tsx

@@ -0,0 +1,480 @@
+"use client";
+import {
+  API_URL,
+  requestType,
+  ticketPriorities,
+  ticketStatuses,
+} from "@/core/constant";
+import { TicketInterface } from "@/core/types";
+import { exportToExcel, handleAxiosError, handleExport } from "@/core/utils";
+import { useGetAllDepartments } from "@/services/hooks/department.hook";
+import {
+  useGetAllTickets,
+  useGetAllTicketsExport,
+  useRemoveTicket,
+} from "@/services/hooks/ticket.hook";
+import { useGetAllUsers } from "@/services/hooks/users.hook";
+import DateFilters from "@/ui/DateFilter";
+import DeleteConfirmModal from "@/ui/DeleteConfirmModal";
+import TicketDetailModal from "@/ui/TicketDetailModel";
+import { Box, Button, MenuItem, Pagination, TextField } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { PickerValue } from "@mui/x-date-pickers/internals";
+import { useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+interface ticketFilters {
+  departmentId: string;
+  priority: string;
+  status: string;
+  user: string;
+  requestType: string;
+  startDate: PickerValue | string | null;
+  endDate: PickerValue | string | null;
+}
+
+export default function Page() {
+  const [search, setSearch] = useState("");
+  const queryClient = useQueryClient();
+  const [selectedTicket, setSelectedTicket] = useState(null);
+  const [seletectedTicketForDelete, setSelectedTicketForDelete] = useState<
+    string | null
+  >(null);
+  const [open, setOpen] = useState(false);
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const handleOpen = (ticket: any) => {
+    setSelectedTicket(ticket);
+    setOpen(true);
+  };
+  const router = useRouter();
+  const [filters, setFilters] = useState<ticketFilters>({
+    departmentId: "",
+    priority: "",
+    status: "",
+    user: "",
+    requestType: "",
+    startDate: null,
+    endDate: null,
+  });
+
+  const [page, setPage] = useState(1);
+
+  const { mutateAsync } = useRemoveTicket();
+  const { data, isLoading } = useGetAllTickets({ page, ...filters });
+  const { mutateAsync: getAllTicketExportAsync } = useGetAllTicketsExport();
+
+  const { data: users, isLoading: getusersloading } = useGetAllUsers();
+  const { data: departments, isLoading: departmentsLoading } =
+    useGetAllDepartments();
+
+  const handleRemoveTicket = async () => {
+    if (seletectedTicketForDelete) {
+      try {
+        const { message } = await mutateAsync(seletectedTicketForDelete);
+        toast.success(message);
+        await queryClient.invalidateQueries({ queryKey: ["get-all-tickets"] });
+      } catch (error) {
+        toast.error(handleAxiosError(error));
+      }
+    }
+    setOpenDeleteModal(false);
+  };
+
+  const handleDownload = async (type: "excel" | "spss", filename: string) => {
+    const res = await getAllTicketExportAsync({ ...filters });
+    const formattedData = res?.data?.data.map((t: any) => ({
+      "شماره تیکت": t.ticketNumber || t.id,
+      موضوع: t.title,
+      وضعیت: t.status === "open" ? "باز" : "بسته", // ترجمه وضعیت‌ها
+      دپارتمان: t.department?.displayName || "نامشخص",
+      کارشناس: t.assignee?.fullname || "بدون متصدی",
+      "تاریخ ثبت": t.createdAt
+        ? new Date(t.createdAt).toLocaleDateString("fa-IR")
+        : "-",
+      اولویت: t.priority || "عادی",
+      // می‌توانید فیلد جدید اضافه کنید:
+      توضیحات: t.description?.substring(0, 50) + "...", // محدود کردن طول متن
+    }));
+    exportToExcel(type, formattedData, filename);
+  };
+  return (
+    <>
+      <div className="grid grid-cols-12 gap-y-4">
+        <div className="col-span-12 bg-white p-3 rounded-xl flex justify-between items-center gap-x-6">
+          <TextField
+            select
+            fullWidth
+            size="medium"
+            label="واحد / بخش"
+            name="departmentId"
+            value={filters.departmentId}
+            onChange={(e) =>
+              setFilters((prev) => ({ ...prev, departmentId: e.target.value }))
+            }
+          >
+            <MenuItem value="">
+              <em>همه</em>
+            </MenuItem>
+            {departments?.data.map((dep: any) => (
+              <MenuItem key={dep.id} value={dep.id}>
+                {dep.displayName}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            select
+            fullWidth
+            size="medium"
+            label="اولويت"
+            name="priority"
+            value={filters.priority}
+            onChange={(e) =>
+              setFilters((prev) => ({ ...prev, priority: e.target.value }))
+            }
+          >
+            <MenuItem value="">
+              <em>همه</em>
+            </MenuItem>
+            {ticketPriorities?.map((p: any) => (
+              <MenuItem key={p.id} value={p.id}>
+                {p.displayName}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            select
+            fullWidth
+            size="medium"
+            label="وضعيت تيكت"
+            name="status"
+            value={filters.status}
+            onChange={(e) =>
+              setFilters((prev) => ({ ...prev, status: e.target.value }))
+            }
+          >
+            <MenuItem value="">
+              <em>همه</em>
+            </MenuItem>
+            {ticketStatuses?.map((p: any) => (
+              <MenuItem key={p.id} value={p.id}>
+                {p.displayName}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            select
+            fullWidth
+            size="medium"
+            label="نوع درخواست"
+            name="requestType"
+            value={filters.requestType}
+            onChange={(e) =>
+              setFilters((prev) => ({ ...prev, requestType: e.target.value }))
+            }
+          >
+            <MenuItem value="">
+              <em>همه</em>
+            </MenuItem>
+            {requestType?.map((p: any) => (
+              <MenuItem key={p.id} value={p.id}>
+                {p.displayName}
+              </MenuItem>
+            ))}
+          </TextField>
+          <TextField
+            select
+            fullWidth
+            size="medium"
+            label="كارشناس"
+            name="user"
+            value={filters.user}
+            onChange={(e) =>
+              setFilters((prev) => ({ ...prev, user: e.target.value }))
+            }
+          >
+            <MenuItem value="">
+              <em>همه</em>
+            </MenuItem>
+            {users?.data?.map((p: any) => (
+              <MenuItem key={p.id} value={p.id}>
+                {p.fullname}
+              </MenuItem>
+            ))}
+          </TextField>
+          {/* <DateFilters  /> */}
+          <Box>
+            <DatePicker
+              value={filters.startDate ? new Date(filters.startDate) : null}
+              onChange={(value) =>
+                setFilters((prev) => ({
+                  ...prev,
+                  startDate: value?.toISOString() ?? null,
+                }))
+              }
+              label="از تاريخ"
+            />
+          </Box>
+          <Box>
+            <DatePicker
+              value={filters.endDate ? new Date(filters.endDate) : null}
+              onChange={(value) =>
+                setFilters((prev) => ({
+                  ...prev,
+                  endDate: value?.toISOString() ?? null,
+                }))
+              }
+              label="تا تاريخ"
+            />
+          </Box>
+          <button
+            onClick={() => {
+              setFilters({
+                departmentId: "",
+                priority: "",
+                status: "",
+                user: "",
+                requestType: "",
+                startDate: null,
+                endDate: null,
+              });
+              // router.push('/tickets')
+            }}
+            className="rounded-lg px-3 py-1.5 text-xs font-semibold text-red-700 ring-1 ring-inset ring-red-200 hover:bg-red-200 cursor-pointer"
+          >
+            حذف فيلتر ها
+          </button>
+        </div>
+        <div className="col-span-12 flex items-center gap-2 rounded-2xl border border-slate-200 bg-white shadow-sm w-full p-1">
+          <button
+            className="rounded-lg px-3 py-1.5 text-xs font-medium ring-1 ring-inset ring-green-600 text-green-700 bg-green-100 cursor-pointer"
+            onClick={() => handleExport(data?.data?.data, "excel")}
+          >
+            خروجي اكسل جدول فعلي
+          </button>
+          <button
+            className="rounded-lg px-3 py-1.5 text-xs font-medium ring-1 ring-inset ring-green-600 text-green-700 bg-green-100 cursor-pointer"
+            onClick={() => handleExport(data?.data?.data, "spss")}
+          >
+            خروجي برای SPSS (CSV) جدول فعلي
+          </button>
+          |
+          <button
+            className="rounded-lg px-3 py-1.5 text-xs font-medium ring-1 ring-inset ring-blue-600 text-blue-700 bg-blue-100 cursor-pointer"
+            onClick={() => handleDownload("excel", "گزارش كلي")}
+          >
+            خروجي اكسل كلي
+          </button>
+          <button
+            className="rounded-lg px-3 py-1.5 text-xs font-medium ring-1 ring-inset ring-blue-600 text-blue-700 bg-blue-100 cursor-pointer"
+            onClick={() => handleDownload("spss", "گزارش كلي")}
+          >
+            خروجي spss كلي
+          </button>
+        </div>
+        <div className="col-span-12">
+          <div className="w-full">
+            <div className="overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-sm">
+              <table className="min-w-225 w-full text-sm">
+                <thead className="bg-slate-50 text-slate-600">
+                  <tr className="[&>th]:px-4 [&>th]:py-3 [&>th]:text-right [&>th]:font-semibold">
+                    <th>رديف</th>
+
+                    <th>کد</th>
+                    <th>كاربر</th>
+                    <th>واحد</th>
+                    <th>نوع درخواست</th>
+                    <th>وضعیت</th>
+                    <th>اولويت</th>
+                    <th>ارجاع به</th>
+                    <th>تاریخ</th>
+                    <th className="w-28">عملیات</th>
+                  </tr>
+                </thead>
+
+                <tbody className="divide-y divide-slate-200 text-slate-800">
+                  {data?.data?.data.map(
+                    (item: TicketInterface, index: number) => {
+                      const status = ticketStatuses.find(
+                        (p) => p.id === item.status,
+                      );
+                      const priority = ticketPriorities.find(
+                        (p) => p.id === item.priority,
+                      );
+
+                      const shouldBlinkPriority = item.priority === "critical";
+                      const shouldBlinkStatus = item.status === "open";
+                      return (
+                        <tr
+                          key={item.id}
+                          className="hover:bg-blue-50/40 transition-colors"
+                        >
+                          <td className="px-4 py-3 font-medium text-slate-900">
+                            {Number(index + 1).toLocaleString("fa-IR")}
+                          </td>
+                          <td className="px-4 py-3 font-medium text-slate-900">
+                            {item.ticketNumber}
+                          </td>
+                          <td className="px-4 py-3">{item.createdBy}</td>
+                          <td className="px-4 py-3 text-slate-600">
+                            {item.department.displayName}
+                          </td>
+                          <td className="px-4 py-3">
+                            {
+                              requestType.find((p) => p.id === item.requestType)
+                                ?.displayName
+                            }
+                          </td>
+                          <td className="px-4 py-3">
+                            <span
+                              className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset ${status?.bgClass} `}
+                            >
+                              <span
+                                className={`h-1.5 w-1.5 rounded-full ${status?.dotClass} ${shouldBlinkStatus ? "animate-ping" : ""}`}
+                              ></span>
+                              {status?.displayName || "نامشخص"}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3 text-slate-600">
+                            <span
+                              className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ring-1 ring-inset ${priority?.bgClass}`}
+                            >
+                              <span
+                                className={`h-1.5 w-1.5 rounded-full ${priority?.dotClass} ${shouldBlinkPriority ? "animate-ping" : ""}`}
+                              ></span>
+                              {priority?.displayName || "نامشخص"}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3">
+                            {item.assignee.fullname}
+                          </td>
+                          <td className="px-4 py-3">
+                            {new Date(item.createdAt).toLocaleDateString(
+                              "fa-IR",
+                            )}
+                          </td>
+
+                          <td className="px-4 py-3">
+                            <div className="flex items-center gap-2">
+                              <button
+                                onClick={() => handleOpen(item)}
+                                className="rounded-lg px-3 py-1.5 text-xs font-semibold text-blue-700 bg-blue-50 ring-1 ring-inset ring-blue-200 hover:bg-blue-100"
+                              >
+                                مشاهده
+                              </button>
+                              <Link
+                                href={`/tickets/update/${item.ticketNumber}`}
+                                className="rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-700 bg-slate-100 ring-1 ring-inset ring-slate-200 hover:bg-slate-200"
+                              >
+                                ویرایش
+                              </Link>
+                              <button
+                                onClick={() => {
+                                  setSelectedTicketForDelete(item.id);
+                                  setOpenDeleteModal(true);
+                                }}
+                                className="rounded-lg px-3 py-1.5 text-xs font-semibold text-red-700 bg-red-100 ring-1 ring-inset ring-red-200 hover:bg-red-200"
+                              >
+                                حذف
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    },
+                  )}
+                </tbody>
+              </table>
+            </div>
+            <div className="flex justify-center mt-4 bg-white rounded-xl py-2">
+              <Pagination
+                count={data?.data?.totalPages}
+                page={page}
+                onChange={(e, p) => setPage(p)}
+                variant="outlined"
+                shape="rounded"
+                sx={{
+                  "& .MuiPaginationItem-root": {
+                    borderRadius: "28px",
+                    borderColor: "#e2e8f0", // slate-200
+                    color: "#475569", // slate-600
+                    "&:hover": {
+                      backgroundColor: "#eff6ff", // blue-50
+                      borderColor: "#bfdbfe", // blue-200
+                    },
+                    "&.Mui-selected": {
+                      backgroundColor: "#2563eb", // blue-600
+                      color: "#ffffff",
+                      borderColor: "#2563eb",
+                      "&:hover": {
+                        backgroundColor: "#1d4ed8", // blue-700
+                      },
+                    },
+                  },
+                }}
+              />
+            </div>
+            <TicketDetailModal
+              open={open}
+              onClose={() => setOpen(false)}
+              ticket={selectedTicket}
+            />
+
+            <DeleteConfirmModal
+              open={openDeleteModal}
+              onClose={() => setOpenDeleteModal(false)}
+              onConfirm={handleRemoveTicket}
+            />
+            {/* <div className="mt-4 grid gap-3 md:hidden">
+              <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-xs text-slate-500">کد</div>
+                    <div className="font-semibold text-slate-900">#10241</div>
+                  </div>
+                  <span className="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700 ring-1 ring-inset ring-blue-200">
+                    <span className="h-1.5 w-1.5 rounded-full bg-blue-600"></span>
+                    در حال پردازش
+                  </span>
+                </div>
+
+                <div className="mt-3 grid grid-cols-2 gap-3 text-sm">
+                  <div>
+                    <div className="text-xs text-slate-500">مشتری</div>
+                    <div className="text-slate-800">علی رضایی</div>
+                  </div>
+                  <div>
+                    <div className="text-xs text-slate-500">مبلغ</div>
+                    <div className="text-slate-800">1,250,000</div>
+                  </div>
+                  <div className="col-span-2">
+                    <div className="text-xs text-slate-500">ایمیل</div>
+                    <div className="text-slate-600">ali@example.com</div>
+                  </div>
+                  <div className="col-span-2">
+                    <div className="text-xs text-slate-500">تاریخ</div>
+                    <div className="text-slate-600">1403/08/12</div>
+                  </div>
+                </div>
+
+                <div className="mt-4 flex gap-2">
+                  <button className="flex-1 rounded-xl px-3 py-2 text-xs font-semibold text-blue-700 bg-blue-50 ring-1 ring-inset ring-blue-200 hover:bg-blue-100">
+                    مشاهده
+                  </button>
+                  <button className="flex-1 rounded-xl px-3 py-2 text-xs font-semibold text-slate-700 bg-slate-100 ring-1 ring-inset ring-slate-200 hover:bg-slate-200">
+                    ویرایش
+                  </button>
+                  <button className="flex-1 rounded-xl px-3 py-1.5 text-xs font-semibold text-red-700 bg-red-100 ring-1 ring-inset ring-red-200 hover:bg-red-200">
+                    حذف
+                  </button>
+                </div>
+              </div>
+            </div> */}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

app/(panel)/tickets/update/[id]/page.tsx

@@ -0,0 +1,23 @@
+import { API_URL } from "@/core/constant";
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+async function getTicket(id: string) {
+  const res = await fetch(`${API_URL}/ticket/get/${id}`, {
+    cache: "no-store", // برای اینکه همیشه دیتای تازه از سرور بگیرد
+  });
+  if (!res.ok) {
+    throw new Error("Error");
+  }
+
+  const data = await res.json();
+  return data;
+}
+
+export default async function Page({ params }: PageProps) {
+  const { id } = await params;
+  const getdata = await getTicket(id);
+  console.log(getdata)
+  return <div></div>;
+}