Initial commit for new panel

2025-09-09 11:20:26 +03:30
commit 1d4ccb3575
343 changed files with 20031 additions and 0 deletions
@@ -0,0 +1,135 @@
+"use client";
+import Link from "next/link";
+import { CompaniesSkeleton } from "./Skeleton";
+import { useCompanyListPresenter } from "./useCompanyListPresenter";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
+
+interface IProps {}
+
+const CompaniesTable = ({}: IProps) => {
+  const {
+    isPending,
+    pathName,
+    columns,
+    allCompanies,
+    setIsModalOpen,
+    router,
+    isModalOpen,
+    setCurrentCompany,
+    onConfirmDelete,
+    modalConfig,
+  } = useCompanyListPresenter();
+  if (isPending) return <CompaniesSkeleton />;
+  return (
+    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
+      <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
+        <Link href={`${pathName}/create`}>Create Company</Link>
+      </button>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((columns) => (
+              <TableHead
+                colSpan={100}
+                className="text-start font-extrabold"
+                key={columns}
+              >
+                {columns}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {allCompanies.map((company) =>
+            !company ? (
+              <h6>No Data was Found</h6>
+            ) : (
+              <TableRow key={company.id} className="odd:bg-gray-2 dark:odd:bg-gray-7">
+                <TableHead className="text-start" colSpan={100}>
+                  {company.name}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.email}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.phone}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.address.country}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.address.state}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.address.city}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.address.postal_code}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.language}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.currency}
+                </TableHead>
+                <TableHead className="text-start" colSpan={100}>
+                  {company.employee_count}
+                </TableHead>
+                <TableCell className="text-start xl:pr-7.5">
+                  <div className="flex items-center justify-start gap-x-3.5">
+                    <button
+                      className="hover:text-red-500"
+                      onClick={() => {
+                        setCurrentCompany(company);
+                        setIsModalOpen(true);
+                      }}
+                    >
+                      <span className="sr-only">Delete Company </span>
+                      <TrashIcon />
+                    </button>
+                    <button
+                      className="hover:text-primary"
+                      onClick={() =>
+                        router.push(`${pathName}/edit/${company.id}`)
+                      }
+                    >
+                      <span className="sr-only">Edit Company </span>
+                      <PencilSquareIcon />
+                    </button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ),
+          )}
+        </TableBody>
+      </Table>
+      {isModalOpen && (
+        <ConfirmationModal
+          isOpen={isModalOpen}
+          title={modalConfig.title || "Confirm"}
+          message={modalConfig.message || "Are you sure?"}
+          variant={modalConfig.variant || "default"}
+          size={modalConfig.size || "md"}
+          confirmText={modalConfig.confirmText ?? "Confirm"}
+          cancelText={modalConfig.cancelText ?? "Cancel"}
+          onConfirm={() => {
+            onConfirmDelete();
+          }}
+          onCancel={() => setIsModalOpen(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CompaniesTable;