feat(inquiries): add sidebar nav item, icon, and API endpoint

- Add "Inquiries" nav item to sidebar data with `/inquiries` URL and BriefcaseTimer icon
- Implement BriefcaseTimer SVG icon component
- Add `INQUIRIES` base endpoint to API_ENDPOINTS
- Cleanup: remove commented details button in CmsTable, reorder imports

src/app/inquiries/page.tsx

@@ -0,0 +1,24 @@
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import InquiriesTable from "@/components/Tables/inquiries";
+import { BreadcrumbItem } from "@/types/shared";
+
+const InquiriesPage = () => {
+  const breadcrumbItems: BreadcrumbItem[] = [
+    {
+      href: "/",
+      name: "Dashboard",
+    },
+    {
+      href: "/inquiries",
+      name: "Inquiries",
+    },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <InquiriesTable />
+    </>
+  );
+};
+
+export default InquiriesPage;

src/components/Layouts/sidebar/data/index.ts

@@ -86,6 +86,12 @@ export const NAV_DATA: NavData = [
         icon: GlobeSearch,
         items: [],
       },
+      {
+        title: "Inquiries",
+        url: "/inquiries",
+        icon: Icons.BriefcaseTimer,
+        items: [],
+      },
     ],
   },
 ];

src/components/Layouts/sidebar/icons.tsx

@@ -240,3 +240,64 @@ export function ArrowLeftIcon(props: PropsType) {
     </svg>
   );
 }
+export function BriefcaseTimer(props: PropsType) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 18.2C14.2091 18.2 16 16.4091 16 14.2C16 11.9908 14.2091 10.2 12 10.2C9.79086 10.2 8 11.9908 8 14.2C8 16.4091 9.79086 18.2 12 18.2Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.25 12.95V13.88C12.25 14.23 12.07 14.56 11.76 14.74L11 15.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.99995 22H15.9999C20.0199 22 20.7399 20.39 20.9499 18.43L21.6999 10.43C21.9699 7.99 21.2699 6 16.9999 6H6.99995C2.72995 6 2.02995 7.99 2.29995 10.43L3.04995 18.43C3.25995 20.39 3.97995 22 7.99995 22Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 6V5.2C8 3.43 8 2 11.2 2H12.8C16 2 16 3.43 16 5.2V6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21.65 11C19.92 12.26 18 13.14 16.01 13.64"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.62 11.27C4.29 12.41 6.11 13.22 8 13.68"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/components/Tables/cms/index.tsx

@@ -3,15 +3,15 @@ import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
 import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import ListHeader from "@/components/ui/ListHeader";
+import Modal from "@/components/ui/modal";
 import { Table, TableBody, TableCell, TableHead } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { unixToDate } from "@/utils/shared";
 import { Tooltip } from "react-tooltip";
 import { TableHeader, TableRow } from "../../ui/table";
-import useCmsTablePresenter from "./useCmsTablePresenter";
 import CmsListFilters from "./CmsListFilters";
-import Modal from "@/components/ui/modal";
+import useCmsTablePresenter from "./useCmsTablePresenter";
 
 const CmsTable = () => {
   const {
@@ -95,17 +95,6 @@ const CmsTable = () => {
                       <span className="sr-only">Edit Marketing </span>
                       <PencilSquareIcon />
                     </button>
-                    {/* <button
-                      data-tooltip-id="details"
-                      data-tooltip-content="Details"
-                      data-tooltip-place="top"
-                      onClick={() => {
-                        router.push(`${pathname}/details/${item.id}`);
-                      }}
-                    >
-                      <Tooltip {..._TooltipDefaultParams({ id: "details" })} />
-                      <EyeIcon />
-                    </button> */}
                   </div>
                 </TableCell>
               </TableRow>

src/components/Tables/inquiries/index.tsx

@@ -0,0 +1,116 @@
+"use client";
+import { TrashIcon } from "@/assets/icons";
+import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import ListHeader from "@/components/ui/ListHeader";
+import Status from "@/components/ui/Status";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TableSkeleton from "@/components/ui/TableSkeleton";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
+import { formatPhoneNumber, unixToDate } from "@/utils/shared";
+import { Tooltip } from "react-tooltip";
+import useInquiriesListPresenter from "./useInquiriesListPresenter";
+
+const InquiriesTable = () => {
+  const {
+    columns,
+    inquiries,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    isPending,
+    currentInquiry,
+    isDeleteModalOpen,
+    setCurrentInquiry,
+    setIsDeleteModalOpen,
+    deleteInquiry,
+  } = useInquiriesListPresenter();
+  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">
+      <ListHeader onFilter={() => setIsFilterModalOpen(true)} />
+      <Table>
+        <TableHeader>
+          <TableRow className="border-none uppercase [&>th]:text-start">
+            {columns.map((column) => (
+              <TableHead key={column} colSpan={100}>
+                {column}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        {isPending && <TableSkeleton column={columns.length} />}
+        <TableBody>
+          <EmptyListWrapper
+            columns={columns}
+            list={inquiries ?? []}
+            emptyMessage="No Inquiries were found"
+          >
+            {inquiries?.map((inquiry, index) => (
+              <TableRow key={inquiry?.id ?? index}>
+                <TableCell className="text-start" colSpan={100}>
+                  {index + 1}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {inquiry?.company_name}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {inquiry?.full_name}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {formatPhoneNumber(inquiry?.phone_number)}
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  <Status>{inquiry.status}</Status>
+                </TableCell>
+                <TableCell className="text-start" colSpan={100}>
+                  {unixToDate({ unix: inquiry.created_at, hasTime: true })}
+                </TableCell>
+                <TableCell className="text-start xl:pr-7.5">
+                  <div className="flex items-center justify-start gap-x-3.5">
+                    <button
+                      data-tooltip-id="delete"
+                      data-tooltip-content="Delete"
+                      data-tooltip-place="top"
+                      className="hover:text-red-500"
+                      onClick={() => {
+                        setCurrentInquiry(inquiry);
+                        setIsDeleteModalOpen(true);
+                      }}
+                    >
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
+                      <span className="sr-only">Delete Contact Us </span>
+                      <TrashIcon />
+                    </button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </EmptyListWrapper>
+        </TableBody>
+      </Table>
+      {isDeleteModalOpen && (
+        <ConfirmationModal
+          isOpen={isDeleteModalOpen}
+          title={`Deleting ${currentInquiry?.full_name}`}
+          message={`Are you sure?`}
+          variant={"default"}
+          size={"lg"}
+          confirmText={"Delete"}
+          cancelText={"Cancel"}
+          onConfirm={() => {
+            deleteInquiry();
+          }}
+          onCancel={() => setIsDeleteModalOpen(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default InquiriesTable;

src/components/Tables/inquiries/useInquiriesListPresenter.ts

@@ -0,0 +1,42 @@
+"use client";
+import {
+  useDeleteInquiry,
+  useGetInquiries,
+} from "@/hooks/queries/useInquiryQueries";
+import { TInquiries } from "@/lib/api";
+import { useState } from "react";
+
+const useInquiriesListPresenter = () => {
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [currentInquiry, setCurrentInquiry] = useState<TInquiries | null>(null);
+  const columns = [
+    "row",
+    "company name",
+    "full name",
+    "phone number",
+    "status",
+    "created at",
+    "actions",
+  ];
+  const { data, isPending } = useGetInquiries();
+  const { mutate } = useDeleteInquiry(() => setIsDeleteModalOpen(false));
+  const deleteInquiry = () => {
+    if (!currentInquiry?.id) return;
+    mutate(currentInquiry.id);
+  };
+  return {
+    columns,
+    inquiries: data?.data.inquiries,
+    isFilterModalOpen,
+    setIsFilterModalOpen,
+    isPending,
+    isDeleteModalOpen,
+    setIsDeleteModalOpen,
+    currentInquiry,
+    setCurrentInquiry,
+    deleteInquiry,
+  };
+};
+
+export default useInquiriesListPresenter;

src/hooks/queries/useInquiryQueries.ts

@@ -0,0 +1,33 @@
+import { API_ENDPOINTS, inquiriesService } from "@/lib/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { toast } from "react-toastify";
+
+export const useGetInquiries = (params?: Record<string, any>) => {
+  const queryKey = useMemo(
+    () => [API_ENDPOINTS.INQUIRIES.BASE(), params],
+    [params],
+  );
+  return useQuery({
+    queryKey,
+    queryFn: () => inquiriesService.getInquiries(params),
+  });
+};
+export const useDeleteInquiry = (successCallback?: () => void) => {
+  const queryClient = useQueryClient();
+  const mutationKey = useMemo(
+    () => [API_ENDPOINTS.INQUIRIES.BASE(), "DELETE INQUIRY"],
+    [],
+  );
+  return useMutation({
+    mutationKey,
+    mutationFn: inquiriesService.deleteInquiry,
+    onSuccess: (response) => {
+      toast.success(response.message);
+      successCallback?.();
+      queryClient.invalidateQueries({
+        queryKey: [API_ENDPOINTS.INQUIRIES.BASE()],
+      });
+    },
+  });
+};

src/lib/api/endpoints.ts

@@ -64,4 +64,8 @@ export const API_ENDPOINTS = {
   CONTACT_US: {
     BASE: (id?: string) => (id ? `contacts/${id}` : "contacts"),
   },
+
+  INQUIRIES: {
+    BASE: (id?: string) => (id ? `inquiries/${id}` : "inquiries"),    
+  }
 } as const;

src/lib/api/services/index.ts

@@ -1,4 +1,5 @@
-export * from "./user-services";
 export * from "./companies-service";
-export * from "./tenders-service";
+export * from "./inquiries-service";
 export * from "./profile-service";
+export * from "./tenders-service";
+export * from "./user-services";

src/lib/api/services/inquiries-service.ts

@@ -0,0 +1,24 @@
+import api from "../axios";
+import { API_ENDPOINTS } from "../endpoints";
+import { TInquiriesResponse } from "../types";
+
+export const inquiriesService = {
+  getInquiries: async (
+    params?: Record<string, any>,
+  ): Promise<TInquiriesResponse> => {
+    try {
+      return (await api.get(API_ENDPOINTS.INQUIRIES.BASE(), { params })).data;
+    } catch (error) {
+      console.error("ERROR caught in inquiries service => getInquiries", error);
+      throw error;
+    }
+  },
+  deleteInquiry: async (id: string) => {
+    try {
+      return (await api.delete(API_ENDPOINTS.INQUIRIES.BASE(id))).data;
+    } catch (error) {
+      console.error("ERROR caught in inquiries service => deleteInquiry", error);
+      throw error;
+    }
+  },
+};

src/lib/api/types/TInquiries.ts

@@ -0,0 +1,26 @@
+import { z } from "zod";
+import { createApiResponseSchema } from "./Factory";
+
+const inquiriesSchema = z.object({
+  company_name: z.string(),
+  created_at: z.number(),
+  full_name: z.string(),
+  id: z.string(),
+  phone_number: z.string(),
+  status: z.string(),
+  status_history: z.array(
+    z.object({
+      changed_at: z.number(),
+      description: z.string(),
+      reason: z.string(),
+      status: z.string(),
+    }),
+  ),
+  updated_at: z.number(),
+  work_email: z.string(),
+});
+export const inquiriesListResponse = createApiResponseSchema(
+  z.object({ inquiries: z.array(inquiriesSchema) }),
+);
+export type TInquiries = z.infer<typeof inquiriesSchema>;
+export type TInquiriesResponse = z.infer<typeof inquiriesListResponse>;

src/lib/api/types/index.ts

@@ -6,3 +6,7 @@ export * from "./Profile";
 export * from "./shared";
 export * from "./TCompany";
 export * from "./User";
+export * from "./TInquiries";
+export * from "./TCms";
+export * from "./Feedback";
+export * from "./Tenders";

src/utils/shared.ts

@@ -8,7 +8,7 @@ export const unixToDate = ({
   unix: number;
   hasTime?: boolean;
 }) => {
-  return moment.unix(unix).format(`YYYY/MM/DD ${hasTime ? "HH:MM" : ""}`);
+  return moment.unix(unix).format(`YYYY/MM/DD - ${hasTime ? "HH:MM" : ""}`);
 };
 export const msToDate = (ms: number) => {
   return moment.default(ms).format("YYYY/MM/DD");