Merge pull request 'feat(notifications): add notification history page and API' (#37) from notification-history into develop
Reviewed-on: https://repo.ravanertebat.com/TM/tm_panel/pulls/37 Reviewed-by: Nima Nakhsotin <n.nakhostin@ravanertebat.com>
This commit is contained in:
Nima Nakhsotin
Generated
+46
@@ -32,6 +32,7 @@
|
||||
"react-paginate": "^8.3.0",
|
||||
"react-switch": "^7.1.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"react-tooltip": "^5.29.1",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"zod": "^4.1.5"
|
||||
},
|
||||
@@ -233,6 +234,31 @@
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
|
||||
"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
|
||||
"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.3",
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||
@@ -2171,6 +2197,12 @@
|
||||
"url": "https://polar.sh/cva"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/client-only": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
|
||||
@@ -5391,6 +5423,20 @@
|
||||
"react-dom": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-tooltip": {
|
||||
"version": "5.29.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-tooltip/-/react-tooltip-5.29.1.tgz",
|
||||
"integrity": "sha512-rmJmEb/p99xWhwmVT7F7riLG08wwKykjHiMGbDPloNJk3tdI73oHsVOwzZ4SRjqMdd5/xwb/4nmz0RcoMfY7Bw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.1",
|
||||
"classnames": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.14.0",
|
||||
"react-dom": ">=16.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
"react-paginate": "^8.3.0",
|
||||
"react-switch": "^7.1.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"react-tooltip": "^5.29.1",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"zod": "^4.1.5"
|
||||
},
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
import Loading from "@/app/loading";
|
||||
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import IsVisible from "@/components/ui/IsVisible";
|
||||
import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";
|
||||
import { BreadcrumbItem } from "@/types/shared";
|
||||
import { unixToDate } from "@/utils/shared";
|
||||
import { use } from "react";
|
||||
|
||||
interface IProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
const NotificationDetailsPage = ({ params }: IProps) => {
|
||||
const { id } = use(params);
|
||||
const { data, isLoading } = useGetNotificationDetails(id);
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{
|
||||
href: "/",
|
||||
name: "Dashboard",
|
||||
},
|
||||
{
|
||||
href: "/notification-history",
|
||||
name: "Notification history",
|
||||
},
|
||||
{
|
||||
href: `/notification-history/${id}`,
|
||||
name: "Notification details",
|
||||
},
|
||||
];
|
||||
if (isLoading) return <Loading />;
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<ShowcaseSection title={`${data?.data.title}`}>
|
||||
<div className="mt-4 grid grid-cols-4 gap-15 pb-4">
|
||||
<IsVisible condition={!!data?.data.message}>
|
||||
<ShowcaseSection title="Message">
|
||||
{data?.data.message}
|
||||
</ShowcaseSection>
|
||||
</IsVisible>
|
||||
<IsVisible condition={!!data?.data.event_type}>
|
||||
<ShowcaseSection title="Event Type">
|
||||
{data?.data.event_type}
|
||||
</ShowcaseSection>
|
||||
</IsVisible>
|
||||
<IsVisible condition={!!data?.data.link}>
|
||||
<ShowcaseSection title="Link">{data?.data.link}</ShowcaseSection>
|
||||
</IsVisible>
|
||||
|
||||
<IsVisible condition={!!data?.data.priority}>
|
||||
<ShowcaseSection title="Priority">
|
||||
{data?.data.priority}
|
||||
</ShowcaseSection>
|
||||
</IsVisible>
|
||||
|
||||
<IsVisible condition={!!data?.data.type}>
|
||||
<ShowcaseSection title="Type">{data?.data.type}</ShowcaseSection>
|
||||
</IsVisible>
|
||||
<IsVisible condition={!!data?.data.seen_at}>
|
||||
<ShowcaseSection title="Seen at">
|
||||
{unixToDate({ unix: data?.data.seen_at ?? 0, hasTime: false })}
|
||||
</ShowcaseSection>
|
||||
</IsVisible>
|
||||
|
||||
<ShowcaseSection title="Is Scheduled">
|
||||
{data?.data.is_scheduled ? "Yes" : "No"}
|
||||
</ShowcaseSection>
|
||||
<ShowcaseSection title="Has seen">
|
||||
{data?.data.seen ? "Yes" : "No"}
|
||||
</ShowcaseSection>
|
||||
</div>
|
||||
</ShowcaseSection>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationDetailsPage;
|
||||
@@ -0,0 +1,24 @@
|
||||
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
|
||||
import NotificationHistoryTable from "@/components/Tables/notification-history";
|
||||
import { BreadcrumbItem } from "@/types/shared";
|
||||
|
||||
const NotificationHistoryPage = () => {
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{
|
||||
href: "/",
|
||||
name: "Dashboard",
|
||||
},
|
||||
{
|
||||
href: "/notification-history",
|
||||
name: "Notification history",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<NotificationHistoryTable />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationHistoryPage;
|
||||
@@ -1,5 +1,6 @@
|
||||
import "@/css/satoshi.css";
|
||||
import "@/css/style.css";
|
||||
import "react-tooltip/dist/react-tooltip.css";
|
||||
|
||||
import { ConditionalLayout } from "@/components/Layouts/conditional-layout";
|
||||
import "flatpickr/dist/flatpickr.min.css";
|
||||
|
||||
@@ -4,20 +4,12 @@ import { LocationIcon } from "@/assets/icons";
|
||||
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useTenderDetailQuery } from "@/hooks/queries";
|
||||
import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries";
|
||||
import { msToDate, unixToDate } from "@/utils/shared";
|
||||
import { msToDate } from "@/utils/shared";
|
||||
import getSymbolFromCurrency from "currency-symbol-map";
|
||||
import { use } from "react";
|
||||
import { TableCell } from "../../../components/ui/table";
|
||||
import Link from "next/link";
|
||||
import { use } from "react";
|
||||
|
||||
interface IProps {
|
||||
params: Promise<{
|
||||
|
||||
@@ -6,16 +6,16 @@ import {
|
||||
DropdownContent,
|
||||
DropdownTrigger,
|
||||
} from "@/components/ui/dropdown";
|
||||
import { useUser } from "@/contexts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";
|
||||
import { useUser } from "@/contexts";
|
||||
|
||||
export function UserInfo() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { logout } = useUser();
|
||||
const { logout, user } = useUser();
|
||||
const USER = {
|
||||
name: "John Smith",
|
||||
email: "johnson@nextadmin.com",
|
||||
@@ -28,16 +28,19 @@ export function UserInfo() {
|
||||
<span className="sr-only">My Account</span>
|
||||
|
||||
<figure className="flex items-center gap-3">
|
||||
<Image
|
||||
<div className="rounded-full bg-gray-3 p-3.5 dark:bg-dark-3">
|
||||
<UserIcon />
|
||||
</div>
|
||||
{/* <Image
|
||||
src={USER.img}
|
||||
className="size-12"
|
||||
alt={`Avatar of ${USER.name}`}
|
||||
role="presentation"
|
||||
width={200}
|
||||
height={200}
|
||||
/>
|
||||
/> */}
|
||||
<figcaption className="flex items-center gap-1 font-medium text-dark dark:text-dark-6 max-[1024px]:sr-only">
|
||||
<span>{USER.name}</span>
|
||||
<span>{user?.full_name}</span>
|
||||
|
||||
<ChevronUpIcon
|
||||
aria-hidden
|
||||
|
||||
@@ -6,7 +6,7 @@ const navSubItemSchema: z.ZodType<any> = z.lazy(() =>
|
||||
title: z.string(),
|
||||
url: z.string(),
|
||||
icon: z.any(),
|
||||
items: z.array(navSubItemSchema).default([]),
|
||||
items: z.array(navSubItemSchema),
|
||||
}),
|
||||
);
|
||||
|
||||
@@ -66,6 +66,12 @@ export const NAV_DATA: NavData = [
|
||||
icon: Icons.Table,
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
url: "/notification-history",
|
||||
icon: Icons.NotificationIcon,
|
||||
items: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -19,6 +19,20 @@ export function ChevronUp(props: PropsType) {
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
export function NotificationIcon(props: PropsType) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function Building(props: PropsType) {
|
||||
return (
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { PencilSquareIcon, TrashIcon, UserSettingIcon } from "@/assets/icons";
|
||||
import ConfirmationModal from "@/components/ui/ConfirmationModal";
|
||||
import Modal from "@/components/ui/modal";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
@@ -15,6 +16,7 @@ import {
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { AdminStatus } from "@/constants/enums";
|
||||
import Link from "next/link";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import ChangeStatusModalContent from "./ChangeStatusModalContent";
|
||||
import { useAdminsPresenter } from "./useAdminsPresenter";
|
||||
|
||||
@@ -82,29 +84,43 @@ const AdminsTable = () => {
|
||||
<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={() => {
|
||||
setCurrentUser(item);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
|
||||
<span className="sr-only">Delete Admin </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="change-status"
|
||||
data-tooltip-content="Change status"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-yellow-dark"
|
||||
onClick={() => {
|
||||
setCurrentUser(item);
|
||||
setIsChangeStatusModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({ id: "change-status" })}
|
||||
/>
|
||||
<span className="sr-only">Change Admin Status</span>
|
||||
<UserSettingIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="edit"
|
||||
data-tooltip-content="Edit"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-primary"
|
||||
onClick={() => router.push(`/admins/edit/${item.id}`)}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
|
||||
<span className="sr-only">Edit Admin </span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
|
||||
@@ -12,8 +12,10 @@ import {
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { unixToDate } from "@/utils/shared";
|
||||
import Link from "next/link";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import { Skeleton } from "../../../ui/skeleton";
|
||||
import useCompanyCategoriesPresenter from "./useCompanyCategoriesPresenter";
|
||||
|
||||
@@ -65,7 +67,7 @@ const CompanyCategoriesTable = () => {
|
||||
<TableCell colSpan={100}>{category.name}</TableCell>
|
||||
<TableCell colSpan={100}>{category.description}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{unixToDate(category.created_at)}
|
||||
{unixToDate({ unix: category.created_at, hasTime: true })}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<IsVisible condition={isToggling}>
|
||||
@@ -87,21 +89,29 @@ const CompanyCategoriesTable = () => {
|
||||
<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={() => {
|
||||
setCurrentCategory(category);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
|
||||
<span className="sr-only">Delete Admin </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="edit"
|
||||
data-tooltip-content="Edit"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${category.id}`)
|
||||
}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
|
||||
<span className="sr-only">Edit Category</span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
import { ExclamationIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
|
||||
import ConfirmationModal from "@/components/ui/ConfirmationModal";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -12,6 +13,7 @@ import {
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { formatPhoneNumber } from "@/utils/shared";
|
||||
import Link from "next/link";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import { useCompanyListPresenter } from "./useCompanyListPresenter";
|
||||
|
||||
interface IProps {}
|
||||
@@ -88,30 +90,42 @@ const CompaniesTable = ({}: IProps) => {
|
||||
<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={() => {
|
||||
setCurrentCompany(company);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
|
||||
<span className="sr-only">Delete Company </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="edit"
|
||||
data-tooltip-content="Edit"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${company.id}`)
|
||||
}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
|
||||
<span className="sr-only">Edit Company </span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="feedback"
|
||||
data-tooltip-content="Feedback"
|
||||
data-tooltip-place="top"
|
||||
className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/feedback/${company.id}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
|
||||
<ExclamationIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import Link from "next/link";
|
||||
import useCustomerListPresenter from "./useCustomerListPresenter";
|
||||
|
||||
@@ -18,6 +19,7 @@ import Status from "@/components/ui/Status";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { unixToDate } from "@/utils/shared";
|
||||
import { toast } from "react-toastify";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
|
||||
|
||||
const CustomersTable = () => {
|
||||
@@ -65,7 +67,7 @@ const CustomersTable = () => {
|
||||
<TableCell colSpan={100}>{customer.full_name}</TableCell>
|
||||
<TableCell colSpan={100}>{customer.email}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{unixToDate(customer.created_at)}
|
||||
{unixToDate({ unix: customer.created_at, hasTime: true })}
|
||||
</TableCell>
|
||||
|
||||
<TableCell colSpan={100} className="uppercase">
|
||||
@@ -89,25 +91,36 @@ const CustomersTable = () => {
|
||||
<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={() => {
|
||||
setCurrentCustomer(customer);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
|
||||
<span className="sr-only">Delete Company </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="edit"
|
||||
data-tooltip-content="Edit"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${customer.id}`)
|
||||
}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
|
||||
<span className="sr-only">Edit Company </span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="assign-company"
|
||||
data-tooltip-content="Assign to company"
|
||||
data-tooltip-place="top"
|
||||
className="hover:text-green-dark"
|
||||
onClick={() => {
|
||||
setCurrentCustomer(customer);
|
||||
@@ -117,15 +130,22 @@ const CustomersTable = () => {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({ id: "assign-company" })}
|
||||
/>
|
||||
<span className="sr-only">Assign To Company </span>
|
||||
<Building />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="feedback"
|
||||
data-tooltip-content="Feedback"
|
||||
data-tooltip-place="top"
|
||||
className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/feedback/${customer.id}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
|
||||
<ExclamationIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -67,11 +67,11 @@ const FeedbackTable = ({ id, paramKey }: IProps) => {
|
||||
{item.feedback_type}
|
||||
</TableCell>
|
||||
<TableCell className="uppercase" colSpan={100}>
|
||||
{unixToDate(item.updated_at)}
|
||||
{unixToDate({ unix: item.updated_at, hasTime: true })}
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="uppercase" colSpan={100}>
|
||||
{unixToDate(item.created_at)}
|
||||
{unixToDate({ unix: item.created_at, hasTime: true })}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={cn(`text flex gap-2 capitalize`)}
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
"use client";
|
||||
import { EyeIcon } from "@/assets/icons";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { isoStringToDate } from "@/utils/shared";
|
||||
import useNotificationHistoryTablePresenter from "./useNotificationHistoryTablePresenter";
|
||||
|
||||
const NotificationHistoryTable = () => {
|
||||
const {
|
||||
columns,
|
||||
isLoading,
|
||||
metadata,
|
||||
notificationHistory,
|
||||
pathName,
|
||||
router,
|
||||
setParams,
|
||||
} = useNotificationHistoryTablePresenter();
|
||||
|
||||
return (
|
||||
<ShowcaseSection>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<TableHead colSpan={100} key={column}>
|
||||
{column}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading && <TableSkeleton column={columns.length} />}
|
||||
<TableBody>
|
||||
{!notificationHistory?.length ? (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<h2>No notifications</h2>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
notificationHistory.map((item, index) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell colSpan={100}>{index + 1}</TableCell>
|
||||
<TableCell colSpan={100}>{item.title}</TableCell>
|
||||
<TableCell colSpan={100}>{item.event_type}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{isoStringToDate({
|
||||
hasTime: true,
|
||||
isoString: item.created_at,
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>{item.message}</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
{item.priority}
|
||||
</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
{item.type}
|
||||
</TableCell>
|
||||
<TableCell className="capitalize" colSpan={100}>
|
||||
{item.seen ? "Seen" : "Unseen"}
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<Status status={item.status}>{item.status}</Status>
|
||||
</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
<button
|
||||
data-tooltip-id="details"
|
||||
data-tooltip-content="Details"
|
||||
data-tooltip-place="top"
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({
|
||||
id: "details",
|
||||
})}
|
||||
/>
|
||||
<EyeIcon />
|
||||
</button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Pagination
|
||||
currentPage={metadata?.page ? metadata?.page - 1 : 1}
|
||||
totalPages={metadata?.pages ?? 1}
|
||||
onPageChange={(e) => {
|
||||
setParams((currentParams) => ({
|
||||
...currentParams,
|
||||
offset: e.selected * (metadata?.limit ?? 10),
|
||||
limit: metadata?.limit ?? 1000,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</ShowcaseSection>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationHistoryTable;
|
||||
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import { useGetNotificationHistoryQuery } from "@/hooks/queries/useNotificationQueries";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
const useNotificationHistoryTablePresenter = () => {
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
...apiDefaultParams,
|
||||
});
|
||||
const { data, isLoading } = useGetNotificationHistoryQuery(params);
|
||||
const columns: string[] = [
|
||||
"row",
|
||||
"title",
|
||||
"channel",
|
||||
"created at",
|
||||
"message",
|
||||
"priority",
|
||||
"type",
|
||||
"seen",
|
||||
"status",
|
||||
"actions",
|
||||
];
|
||||
const pathName = usePathname();
|
||||
const router = useRouter();
|
||||
return {
|
||||
notificationHistory: data?.data.notifications,
|
||||
metadata: data?.meta,
|
||||
isLoading,
|
||||
columns,
|
||||
router,
|
||||
pathName,
|
||||
setParams,
|
||||
};
|
||||
};
|
||||
|
||||
export default useNotificationHistoryTablePresenter;
|
||||
@@ -9,11 +9,13 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import useTenderListPresenter from "./useTenderListPresenter";
|
||||
|
||||
import { ExclamationIcon, EyeIcon } from "@/assets/icons";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import TableSkeleton from "@/components/ui/TableSkeleton";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
const TendersTable = () => {
|
||||
@@ -70,18 +72,30 @@ const TendersTable = () => {
|
||||
colSpan={100}
|
||||
>
|
||||
<button
|
||||
data-tooltip-id="details"
|
||||
data-tooltip-content="Details"
|
||||
data-tooltip-place="top"
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{..._TooltipDefaultParams({
|
||||
id: "details",
|
||||
})}
|
||||
/>
|
||||
<EyeIcon />
|
||||
</button>
|
||||
<button
|
||||
data-tooltip-id="feedback"
|
||||
data-tooltip-content="Feedback"
|
||||
data-tooltip-place="top"
|
||||
className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
|
||||
onClick={() => {
|
||||
router.push(`${pathName}/feedback/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
|
||||
<ExclamationIcon />
|
||||
</button>
|
||||
</TableCell>
|
||||
|
||||
@@ -22,6 +22,7 @@ const Status = ({ status, children }: IProps) => {
|
||||
"success",
|
||||
"verified",
|
||||
"published",
|
||||
"sent"
|
||||
];
|
||||
const blues = ["awarded", "processing", "in-review", "scheduled"];
|
||||
const yellows = ["pending", "warning", "on-hold", "delayed"];
|
||||
|
||||
@@ -70,7 +70,7 @@ export function TableHead({
|
||||
return (
|
||||
<th
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0",
|
||||
"h-12 px-4 text-left align-middle font-medium uppercase text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { CSSProperties } from "react";
|
||||
import { VariantType } from "react-tooltip";
|
||||
|
||||
export const _TooltipDefaultParams = ({
|
||||
id,
|
||||
variant = id === "delete" ? "error" : "info",
|
||||
styles,
|
||||
}: {
|
||||
id: string;
|
||||
variant?: VariantType;
|
||||
styles?: CSSProperties;
|
||||
}) => ({
|
||||
id,
|
||||
delayShow: 500,
|
||||
delayHide: 500,
|
||||
variant,
|
||||
style: { backgroundColor: variant === "error" ? "#F23030" : "", ...styles },
|
||||
});
|
||||
+7
-4
@@ -49,6 +49,9 @@
|
||||
.tableCheckbox:checked ~ div span {
|
||||
@apply opacity-100;
|
||||
}
|
||||
.react-tooltip {
|
||||
@apply !rounded-full !transition-opacity !duration-500;
|
||||
}
|
||||
|
||||
.tableCheckbox:checked ~ div {
|
||||
@apply border-primary bg-primary;
|
||||
@@ -502,17 +505,17 @@ input[type="search"]::-webkit-search-cancel-button {
|
||||
}
|
||||
|
||||
.Toastify__toast--success {
|
||||
background: linear-gradient(to bottom right, #82E6AC, #1A8245) !important;
|
||||
background: linear-gradient(to bottom right, #82e6ac, #1a8245) !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--error {
|
||||
background: linear-gradient(to bottom right, #F89090, #E10E0E) !important;
|
||||
background: linear-gradient(to bottom right, #f89090, #e10e0e) !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--warning {
|
||||
background: linear-gradient(to bottom right, #F59E0B, #D97706) !important;
|
||||
background: linear-gradient(to bottom right, #f59e0b, #d97706) !important;
|
||||
}
|
||||
|
||||
.Toastify__toast--info {
|
||||
background: linear-gradient(to bottom right, #8099EC, #1C3FB7) !important;
|
||||
background: linear-gradient(to bottom right, #8099ec, #1c3fb7) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import { API_ENDPOINTS } from "@/lib/api";
|
||||
import { notificationService } from "@/lib/api/services/notification-service";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export const useGetNotificationHistoryQuery = (
|
||||
params?: Record<string, any>,
|
||||
) => {
|
||||
const queryKey = useMemo(
|
||||
() => [API_ENDPOINTS.NOTIFICATIONS.HISTORY, "READ NOTIFICATIONS HISTORY"],
|
||||
[],
|
||||
);
|
||||
return useQuery({
|
||||
queryKey,
|
||||
queryFn: () => notificationService.getNotifications(params),
|
||||
});
|
||||
};
|
||||
export const useGetNotificationDetails = (id: string) => {
|
||||
const queryKey = useMemo(
|
||||
() => [API_ENDPOINTS.NOTIFICATIONS.DETAILS(id), "NOTIFICATION DETAILS"],
|
||||
[id],
|
||||
);
|
||||
return useQuery({
|
||||
queryKey,
|
||||
queryFn: () => notificationService.getNotificationDetails(id),
|
||||
});
|
||||
};
|
||||
@@ -50,4 +50,8 @@ export const API_ENDPOINTS = {
|
||||
DETAILS: (id: string) => `feedback/${id}`,
|
||||
DELETE: (id: string) => `feedback/${id}`,
|
||||
},
|
||||
NOTIFICATIONS: {
|
||||
HISTORY: "notifications",
|
||||
DETAILS: (id: string) => `notifications/view/${id}`,
|
||||
},
|
||||
} as const;
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import api from "../axios";
|
||||
import { API_ENDPOINTS } from "../endpoints";
|
||||
import {
|
||||
TNotificationDetailsResponse,
|
||||
TNotificationHistoryResponse,
|
||||
} from "../types/NotificationHistory";
|
||||
import { ApiResponse } from "../types/shared";
|
||||
|
||||
export const notificationService = {
|
||||
getNotifications: async (
|
||||
params?: Record<string, any>,
|
||||
): Promise<TNotificationHistoryResponse> => {
|
||||
try {
|
||||
return (await api.get(API_ENDPOINTS.NOTIFICATIONS.HISTORY, { params }))
|
||||
.data;
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"ERROR Caught in notification service => getNotifications",
|
||||
error,
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
getNotificationDetails: async (
|
||||
id: string,
|
||||
): Promise<ApiResponse<TNotificationDetailsResponse>> => {
|
||||
try {
|
||||
return (await api.get(API_ENDPOINTS.NOTIFICATIONS.DETAILS(id))).data;
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"ERROR Caught in notification service => getNotificationDetails",
|
||||
error,
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -31,9 +31,6 @@ const customersSchema = z.object({
|
||||
username: z.string(),
|
||||
});
|
||||
|
||||
export const customersListResponse = z.object({
|
||||
customers: z.array(customersSchema),
|
||||
});
|
||||
const createCustomerCredentials = z.object({
|
||||
address: z
|
||||
.object({
|
||||
@@ -99,6 +96,9 @@ const createCustomerCredentials = z.object({
|
||||
"Username must contain only alphanumeric characters",
|
||||
),
|
||||
});
|
||||
export const customersListResponse = z.object({
|
||||
customers: z.array(customersSchema),
|
||||
});
|
||||
const assignCustomerToCompanySchema = z.object({
|
||||
company_ids: z.array(z.string()),
|
||||
});
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import { z } from "zod";
|
||||
import { createApiResponseSchema } from "./Factory";
|
||||
|
||||
export const notificationSchema = z.object({
|
||||
created_at: z.string(),
|
||||
event_type: z.string(),
|
||||
id: z.string(),
|
||||
image: z.string(),
|
||||
is_scheduled: z.boolean(),
|
||||
link: z.string(),
|
||||
message: z.string(),
|
||||
metadata: z.object({
|
||||
additionalProp1: z.string(),
|
||||
additionalProp2: z.string(),
|
||||
additionalProp3: z.string(),
|
||||
}),
|
||||
method: z.object({
|
||||
additionalProp1: z.string(),
|
||||
additionalProp2: z.string(),
|
||||
additionalProp3: z.string(),
|
||||
}),
|
||||
priority: z.string(),
|
||||
schedule_at: z.number(),
|
||||
scheduled_at: z.number(),
|
||||
seen: z.boolean(),
|
||||
seen_at: z.number(),
|
||||
status: z.string(),
|
||||
title: z.string(),
|
||||
type: z.string(),
|
||||
updated_at: z.string(),
|
||||
user_id: z.string(),
|
||||
});
|
||||
|
||||
const notificationHistoryResponseSchema = createApiResponseSchema(
|
||||
z.object({
|
||||
notifications: z.array(notificationSchema),
|
||||
}),
|
||||
);
|
||||
export type TNotificationHistory = z.infer<typeof notificationSchema>;
|
||||
export type TNotificationDetailsResponse = z.infer<typeof notificationSchema>;
|
||||
export type TNotificationHistoryResponse = z.infer<
|
||||
typeof notificationHistoryResponseSchema
|
||||
>;
|
||||
+20
-2
@@ -1,11 +1,29 @@
|
||||
import * as moment from "moment";
|
||||
export const unixToDate = (unix: number) => {
|
||||
return moment.unix(unix).format("YYYY/MM/DD HH:MM");
|
||||
export const unixToDate = ({
|
||||
hasTime = false,
|
||||
unix,
|
||||
}: {
|
||||
unix: number;
|
||||
hasTime?: boolean;
|
||||
}) => {
|
||||
return moment.unix(unix).format(`YYYY/MM/DD ${hasTime && "HH:MM"}`);
|
||||
};
|
||||
export const msToDate = (ms: number) => {
|
||||
return moment.default(ms).format("YYYY/MM/DD");
|
||||
};
|
||||
|
||||
export const isoStringToDate = ({
|
||||
hasTime = false,
|
||||
isoString,
|
||||
}: {
|
||||
isoString: string;
|
||||
hasTime: boolean;
|
||||
}): string => {
|
||||
return moment
|
||||
.default(isoString)
|
||||
.format(`YYYY/MM/DD ${hasTime ? "HH:MM" : ""}`);
|
||||
};
|
||||
|
||||
export const getStatusColor = <T>(status: T) => {
|
||||
switch (status) {
|
||||
case "active":
|
||||
|
||||
Reference in New Issue
Block a user