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.
2025-09-23 15:08:37 +03:30
parent 8cf8e4f5b2
commit 14f36827ab
8 changed files with 143 additions and 41 deletions
@@ -0,0 +1,98 @@
+import { ExclamationIcon } from "@/assets/icons";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TableSkeleton from "@/components/ui/TableSkeleton";
+import { cn } from "@/lib/utils";
+import { capitalize, unixToDate } from "@/utils/shared";
+
+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 });
+
+  return (
+    <ShowcaseSection
+      title={
+        !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>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead className="capitalize" key={column} colSpan={100}>
+                {column}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        {isLoading && <TableSkeleton column={columns.length} />}
+
+        <TableBody>
+          {!feedback?.length ? (
+            <TableRow className="w-full">
+              <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"
+              >
+                <TableCell className="text-start" colSpan={100}>
+                  {index + 1}
+                </TableCell>
+                <TableCell className="uppercase" colSpan={100}>
+                  {item.feedback_type}
+                </TableCell>
+                <TableCell className="uppercase" colSpan={100}>
+                  {unixToDate(item.updated_at)}
+                </TableCell>
+
+                <TableCell className="uppercase" colSpan={100}>
+                  {unixToDate(item.created_at)}
+                </TableCell>
+                <TableCell
+                  className={cn(`text flex gap-2 capitalize`)}
+                  colSpan={100}
+                >
+                  <button
+                    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}/${item.id}`);
+                    }}
+                  >
+                    <ExclamationIcon />
+                  </button>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </ShowcaseSection>
+  );
+};
+
+export default FeedbackTable;