feat(feedback): Add feedback view for companies and customers

This commit introduces the ability to view feedback associated with specific companies and customers directly from their respective tables.

To support this, the `TenderFeedbackTable` has been refactored into a more generic `FeedbackTable` component. This new component accepts a `paramKey` prop (e.g., "tender_id", "company_id") to filter feedback for different entities.

A new feedback icon has been added to the actions column in both the Companies and Customers tables, providing a direct link to the feedback page for each entry.

src/app/(companies)/companies/feedback/[id]/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import FeedbackTable from "@/components/Tables/feedback-table";
+
+import { BreadcrumbItem } from "@/types/shared";
+import { use } from "react";
+interface IProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+const TenderFeedbackPage = ({ params }: IProps) => {
+  const { id } = use(params);
+
+  const breadcrumbItems: BreadcrumbItem[] = [
+    { href: "/", name: "Dashboard" },
+    { href: "/companies", name: "Companies" },
+    { href: `/companies/feedback/${id}`, name: "Companies feedback" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <FeedbackTable paramKey="company_id" id={id} />
+    </>
+  );
+};
+
+export default TenderFeedbackPage;

src/app/customers/feedback/[id]/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import FeedbackTable from "@/components/Tables/feedback-table";
+
+import { BreadcrumbItem } from "@/types/shared";
+import { use } from "react";
+interface IProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+const TenderFeedbackPage = ({ params }: IProps) => {
+  const { id } = use(params);
+
+  const breadcrumbItems: BreadcrumbItem[] = [
+    { href: "/", name: "Dashboard" },
+    { href: "/customers", name: "Customers" },
+    { href: `/customers/feedback/${id}`, name: "Customers feedback" },
+  ];
+  return (
+    <>
+      <Breadcrumb items={breadcrumbItems} />
+      <FeedbackTable paramKey="customer_id" id={id} />
+    </>
+  );
+};
+
+export default TenderFeedbackPage;

src/app/tenders/feedback/[id]/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
-import TenderFeedbackTable from "@/components/Tables/tenders/feedback";
+import FeedbackTable from "@/components/Tables/feedback-table";
+
 import { BreadcrumbItem } from "@/types/shared";
 import { use } from "react";
 interface IProps {
@@ -20,7 +21,7 @@ const TenderFeedbackPage = ({ params }: IProps) => {
   return (
     <>
       <Breadcrumb items={breadcrumbItems} />
-      <TenderFeedbackTable id={id} />
+      <FeedbackTable id={id} paramKey="tender_id" />
     </>
   );
 };

src/components/Tables/companies/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import { FeedbackIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
@@ -112,6 +112,13 @@ const CompaniesTable = ({}: IProps) => {
                       <span className="sr-only">Edit Company </span>
                       <PencilSquareIcon />
                     </button>
+                    <button
+                      onClick={() => {
+                        router.push(`${pathName}/feedback/${company.id}`);
+                      }}
+                    >
+                      <FeedbackIcon />
+                    </button>
                   </div>
                 </TableCell>
               </TableRow>

src/components/Tables/customers/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import { FeedbackIcon, PencilSquareIcon, TrashIcon } from "@/assets/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
@@ -117,6 +117,13 @@ const CustomersTable = () => {
                     <span className="sr-only">Assign To Company </span>
                     <Building />
                   </button>
+                  <button
+                    onClick={() => {
+                      router.push(`${pathName}/feedback/${customer.id}`);
+                    }}
+                  >
+                    <FeedbackIcon />
+                  </button>
                 </div>
               </TableCell>
             </TableRow>

src/components/Tables/feedback-table/index.tsx

@@ -1,31 +1,39 @@
-"use client";
-
 import { ExclamationIcon } from "@/assets/icons";
-import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
+  TableRow,
 } from "@/components/ui/table";
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { cn } from "@/lib/utils";
-import { unixToDate } from "@/utils/shared";
+import { capitalize, unixToDate } from "@/utils/shared";
-import { TableRow } from "../../../ui/table";
-import useTenderFeedbackPresenter from "./useTenderFeedbackPresenter";
 
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import useFeedbackTablePresenter from "./useFeedbackTablePresenter";
 interface IProps {
   id: string;
+  paramKey: "tender_id" | "company_id" | "customer_id";
 }
+const FeedbackTable = ({ id, paramKey }: IProps) => {
+  const {
+    columns,
+    feedback,
+    isLoading,
+    pathName,
+    router,
+    getShowcaseSectionTitle,
+  } = useFeedbackTablePresenter({ id, paramKey });
 
-const TenderFeedbackTable = ({ id }: IProps) => {
-  const { feedback, isLoading, columns, pathName, router } =
-    useTenderFeedbackPresenter({ id });
   return (
     <ShowcaseSection
-      title={!isLoading && `Tender: ${feedback?.[0].tender?.title}`}
+      title={
-      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"
+        !isLoading &&
+        `${capitalize(paramKey.slice(0, -3))}${getShowcaseSectionTitle()}`
+      }
+      className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 capitalize shadow-1 dark:bg-gray-dark dark:shadow-card"
     >
       <Table>
         <TableHeader>
@@ -38,11 +46,16 @@ const TenderFeedbackTable = ({ id }: IProps) => {
           </TableRow>
         </TableHeader>
         {isLoading && <TableSkeleton column={columns.length} />}
+
         <TableBody>
-          {feedback?.map((item, index) =>
+          {!feedback?.length ? (
-            !item ? (
+            <TableRow className="w-full">
-              <h6 key={index}>No feedback is submitted for this tender</h6>
+              <TableCell colSpan={500} className="text-center">
-            ) : (
+                <h2>No feedback</h2>
+              </TableCell>
+            </TableRow>
+          ) : (
+            feedback?.map((item, index) => (
               <TableRow
                 key={item.id}
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
@@ -74,7 +87,7 @@ const TenderFeedbackTable = ({ id }: IProps) => {
                   </button>
                 </TableCell>
               </TableRow>
-            ),
+            ))
           )}
         </TableBody>
       </Table>
@@ -82,4 +95,4 @@ const TenderFeedbackTable = ({ id }: IProps) => {
   );
 };
 
-export default TenderFeedbackTable;
+export default FeedbackTable;

src/components/Tables/feedback-table/useFeedbackTablePresenter.ts

@@ -0,0 +1,36 @@
+import { useGetFeedback } from "@/hooks/queries";
+import { usePathname, useRouter } from "next/navigation";
+
+interface IProps {
+  id: string;
+  paramKey: "tender_id" | "company_id" | "customer_id";
+}
+const useFeedbackTablePresenter = ({ id, paramKey }: IProps) => {
+  const { data, isLoading } = useGetFeedback({ [paramKey]: id });
+  const router = useRouter();
+  const pathName = usePathname();
+  const columns = [
+    "row",
+    "feedback type",
+    "updated at",
+    "created at",
+    "actions",
+  ];
+  const getShowcaseSectionTitle = () => {
+    if (paramKey === "tender_id") {
+      return `: ${data?.data?.[0]?.tender?.title}`;
+    } else {
+      return "";
+    }
+  };
+  return {
+    isLoading,
+    feedback: data?.data,
+    columns,
+    pathName,
+    router,
+    getShowcaseSectionTitle,
+  };
+};
+
+export default useFeedbackTablePresenter;

src/components/Tables/tenders/feedback/useTenderFeedbackPresenter.ts

@@ -1,20 +0,0 @@
-"use client";
-import { useGetFeedback } from "@/hooks/queries";
-import { usePathname, useRouter } from "next/navigation";
-
-const useTenderFeedbackPresenter = ({ id }: { id: string }) => {
-  const { data, isLoading } = useGetFeedback({ tender_id: id });
-  const router = useRouter();
-  const pathName = usePathname();
-  const columns = [
-    "row",
-    "feedback type",
-    "updated at",
-
-    "created at",
-    "actions",
-  ];
-  return { feedback: data?.data, isLoading, columns, pathName, router };
-};
-
-export default useTenderFeedbackPresenter;