mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
AmirReza Jamali
2025-11-25 12:03:12 +03:30
parent 2389ad1bbf
commit 6d4016af5e
13 changed files with 346 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/inquiries/page.tsx
+24
View File
@@ -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
+6
View File
@@ -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
+61
View File
@@ -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
+2 -13
View File
@@ -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
+116
View File
@@ -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
+42
View File
@@ -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
+33
View File
@@ -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
+4
View File
@@ -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
+3 -2
View File
@@ -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
+24
View File
@@ -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
+26
View File
@@ -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
+4
View File
@@ -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
+1 -1
View File
@@ -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");