From 5341d638c730929bcf46ae7e7b0f8fc23252bb54 Mon Sep 17 00:00:00 2001
From: Armin Talaie <talaiearmin78@gmail.com>
Date: Sat, 28 Dec 2024 01:14:18 -0800
Subject: [PATCH] updated admin dashboard

---
 src/app/portal/admin/forms/[id]/layout.tsx    |   4 +
 .../forms/[id]/submissions/AnalyticsPage.tsx  |   2 +-
 .../admin/forms/[id]/submissions/columns.tsx  |   5 +-
 .../forms/[id]/submissions/data-table.tsx     | 104 ++++++++++++------
 .../[id]/submissions/dataTableWrapper.tsx     |   6 +-
 .../forms/[id]/submissions/formDataChart.tsx  |   2 +-
 .../admin/forms/[id]/submissions/page.tsx     |  10 +-
 .../forms/[id]/{user => support}/page.tsx     |  87 +++++++++------
 src/app/portal/loading.tsx                    |   2 +-
 src/components/layouts/formTabView.tsx        |  10 +-
 src/components/primitives/table.tsx           |  14 +--
 11 files changed, 151 insertions(+), 95 deletions(-)
 rename src/app/portal/admin/forms/[id]/{user => support}/page.tsx (56%)

diff --git a/src/app/portal/admin/forms/[id]/layout.tsx b/src/app/portal/admin/forms/[id]/layout.tsx
index 9a32bd6f..5dee4b14 100644
--- a/src/app/portal/admin/forms/[id]/layout.tsx
+++ b/src/app/portal/admin/forms/[id]/layout.tsx
@@ -17,6 +17,10 @@ export default async function Layout({
       label: "Submissions",
       route: `/portal/admin/forms/${params.id}/submissions`,
     },
+    {
+      label: "Support",
+      route: `/portal/admin/forms/${params.id}/support`,
+    },
   ];
 
   return (
diff --git a/src/app/portal/admin/forms/[id]/submissions/AnalyticsPage.tsx b/src/app/portal/admin/forms/[id]/submissions/AnalyticsPage.tsx
index fe5495e6..01a8d0dd 100644
--- a/src/app/portal/admin/forms/[id]/submissions/AnalyticsPage.tsx
+++ b/src/app/portal/admin/forms/[id]/submissions/AnalyticsPage.tsx
@@ -21,7 +21,7 @@ export default function AnalyticsPage({
   });
 
   return (
-    <div className="overflow-hidden flex flex-col max-w-screen pb-32 ">
+    <div className="overflow-scroll flex flex-col max-w-screen pb-32 ">
       <section className="grid grid-cols-1  md:grid-cols-2 lg:grid-cols-2  gap-4 ">
         {data.analyticsData.map((chartData, index) => (
           <FormChart
diff --git a/src/app/portal/admin/forms/[id]/submissions/columns.tsx b/src/app/portal/admin/forms/[id]/submissions/columns.tsx
index 59993022..294675af 100644
--- a/src/app/portal/admin/forms/[id]/submissions/columns.tsx
+++ b/src/app/portal/admin/forms/[id]/submissions/columns.tsx
@@ -255,13 +255,13 @@ export function createColumns<TData>(
   return [
     {
       accessorKey: "popover",
-      header: "Actions",
+      header: "",
       enableColumnFilter: false,
       size: 300,
       maxSize: 300,
       cell: ({ row }) => {
         return (
-          <div className="flex gap-2 flex-1  justify-start items-center  rounded-lg  ">
+          <div className="flex gap-2 flex-1  justify-center h-full items-center  rounded-lg  ">
             <button
               onClick={() => {
                 setAndOpen({ applicant: row });
@@ -271,7 +271,6 @@ export function createColumns<TData>(
               }
             >
               <Maximize2Icon className=" h-3 w-3" />
-              View
             </button>
             <NotifyButtonForEmail row={row} />
           </div>
diff --git a/src/app/portal/admin/forms/[id]/submissions/data-table.tsx b/src/app/portal/admin/forms/[id]/submissions/data-table.tsx
index 2161df7e..51c2d65f 100644
--- a/src/app/portal/admin/forms/[id]/submissions/data-table.tsx
+++ b/src/app/portal/admin/forms/[id]/submissions/data-table.tsx
@@ -31,7 +31,31 @@ import {
 } from "@/app/portal/admin/forms/[id]/submissions/columns";
 import MultiSelect from "@/components/general/multiSelect";
 
-const getCommonPinningStyles = (column: Column<any>): CSSProperties => {
+// const getCommonPinningStyles = (column: Column<any>): CSSProperties => {
+//   const isPinned = column.getIsPinned();
+//   const isLastLeftPinnedColumn =
+//     isPinned === "left" && column.getIsLastColumn("left");
+//   const isFirstRightPinnedColumn =
+//     isPinned === "right" && column.getIsFirstColumn("right");
+
+//   return {
+//     ...(isLastLeftPinnedColumn
+//       ? { borderRight: `1px solid var(--background-500)` }
+//       : {}),
+//     ...(isFirstRightPinnedColumn
+//       ? { borderLeft: `1px solid var(--background-500)` }
+//       : {}),
+//     left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+//     right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+//     opacity: isPinned ? 0.95 : 1,
+//     position: isPinned ? "sticky" : "relative",
+//     width: column.getSize() ? column.getSize() : "500px",
+//     zIndex: isPinned ? 1 : 0,
+//     maxWidth: column.getSize() ? column.getSize() : "500px",
+//   };
+// };
+
+const getCommonPinningStyles = (column: Column<Person>): CSSProperties => {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn =
     isPinned === "left" && column.getIsLastColumn("left");
@@ -39,19 +63,13 @@ const getCommonPinningStyles = (column: Column<any>): CSSProperties => {
     isPinned === "right" && column.getIsFirstColumn("right");
 
   return {
-    ...(isLastLeftPinnedColumn
-      ? { borderRight: `1px solid var(--background-500)` }
-      : {}),
-    ...(isFirstRightPinnedColumn
-      ? { borderLeft: `1px solid var(--background-500)` }
-      : {}),
+    boxShadow: undefined,
     left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
     opacity: isPinned ? 0.95 : 1,
     position: isPinned ? "sticky" : "relative",
-    width: column.getSize() ? column.getSize() : "500px",
-    // zIndex: isPinned ? 1 : 0,
-    maxWidth: column.getSize() ? column.getSize() : "500px",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0,
   };
 };
 
@@ -81,6 +99,9 @@ export function DataTable<TData, TValue>({
     debugColumns: false,
     enableColumnFilters: true,
     state: {
+      // columnPinning: {
+      //   left: ["popover"],
+      // },
       columnFilters,
       columnVisibility,
       sorting,
@@ -89,34 +110,25 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className={"overflow-hidden flex flex-col px-10  py-1"}>
+    <div className={"flex flex-col px-10 overflow-hidden  pb-4"}>
       <div className="flex items-center w-full gap-2 py-4  flex-wrap">
         <div className="flex items-center flex-1 p-2 gap-2">
           <span className="text-lg font-bold">
             {table.getFilteredRowModel().rows.length} {"Results"}
           </span>
         </div>
-        {config.view?.showFilter && (
-          <TableFilter
-            refMap={refMap}
-            columns={
-              table.getAllColumns() as unknown as Column<unknown, unknown>[]
-            }
-            columnFilters={columnFilters}
-            setColumnFilters={setColumnFilters}
-          />
-        )}
 
         <div
           className={
-            "flex relative items-center bg-background-600 rounded-lg border-background-500 border gap-2"
+            "flex relative items-center bg-background-600 rounded-lg border-background-500 border-none h-10 p-1  gap-2"
           }
         >
           <Button
             onClick={() => {
               setTabView("table");
             }}
-            className={`bg-background-600 w-24  gap-2 border-background-500 ${tabView === "table" ? "bg-lp-400" : ""}`}
+            size={"fit"}
+            className={`bg-background-600 w-24 h-full min-h-none gap-2 border-none ${tabView === "table" ? "bg-background-500" : ""}`}
           >
             <TableIcon className={"h-4 w-4"} />
             Table
@@ -126,13 +138,24 @@ export function DataTable<TData, TValue>({
               onClick={() => {
                 setTabView("chart");
               }}
-              className={`bg-background-600  w-24 border-background-500 gap-2 ${tabView === "chart" ? "bg-lp-400" : ""}`}
+              size={"fit"}
+              className={`bg-background-600  w-24 h-full   border-none border-background-500 gap-2 ${tabView === "chart" ? "bg-background-500" : ""}`}
             >
               <ChartArea className={"h-4 w-4"} />
               Chart
             </Button>
           )}
         </div>
+        {config.view?.showFilter && (
+          <TableFilter
+            refMap={refMap}
+            columns={
+              table.getAllColumns() as unknown as Column<unknown, unknown>[]
+            }
+            columnFilters={columnFilters}
+            setColumnFilters={setColumnFilters}
+          />
+        )}
         <DownloadCSV data={data} fileName="data" />
       </div>
       {table.getFilteredRowModel().rows.length > 0 && tabView === "chart" && (
@@ -144,19 +167,21 @@ export function DataTable<TData, TValue>({
             .rows.map((row) => row.original)}
         />
       )}
-
       {tabView === "table" && (
-        <div className="rounded-md border shadow-sm  border-background-500 overflow-hidden  ">
-          <Table>
-            <thead>
+        <div className="rounded-md border shadow-sm overflow-auto min-h-0 border-background-500">
+          <Table className="w-full h-[1px] relative ">
+            <thead className={" left-0 top-0 z-20 sticky"}>
               {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id} className={"border-background-500"}>
+                <tr
+                  key={headerGroup.id}
+                  className={"border-background-500 w-full flex-shrink-0"}
+                >
                   {headerGroup.headers.map((header) => {
                     return (
                       <td
                         key={header.id}
                         className={
-                          " flex bg-background-600 text-xs flex-col   border-background-500  font-semibold  justify-center  overflow-hidden line-clamp-2  text-ellipsis"
+                          " flex bg-background-600 text-xs flex-col   w-fit flex-shrink-0  border-background-500  font-semibold  justify-center  overflow-hidden line-clamp-2  text-ellipsis"
                         }
                         style={{ ...getCommonPinningStyles(header.column) }}
                       >
@@ -172,12 +197,12 @@ export function DataTable<TData, TValue>({
                 </tr>
               ))}
             </thead>
-            <tbody className={"relative"}>
+            <tbody className={"relative overflow-auto "}>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
                   <tr
                     className={
-                      "border-background-500 p-0   bg-background-600 odd:bg-background-700"
+                      "border-background-500 p-0 flex-shrink-0 w-full  bg-background-600 odd:bg-background-700"
                     }
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
@@ -185,7 +210,7 @@ export function DataTable<TData, TValue>({
                     {row.getVisibleCells().map((cell) => (
                       <td
                         key={cell.id}
-                        className={"  h-full text-xs    overflow-hidden "}
+                        className={"  h-full text-xs  flex-shrink-0   w-fit  "}
                         style={{ ...getCommonPinningStyles(cell.column) }}
                       >
                         {flexRender(
@@ -232,7 +257,8 @@ function TableFilter({
       <Button
         onClick={() => setShowFilters(true)}
         variant="outline"
-        className="bg-background-600 border border-background-500 gap-2"
+        size={"fit"}
+        className="bg-background-600 w-24 h-10 min-h-none gap-2 border-none"
       >
         <ListFilterIcon size={16} />
         {columnFilters.length === 0
@@ -401,5 +427,13 @@ const DownloadCSV = ({ data, fileName }) => {
     document.body.removeChild(link);
   };
 
-  return <Button onClick={downloadCSV}>Download CSV</Button>;
+  return (
+    <Button
+      variant={"dark"}
+      className="bg-background-600"
+      onClick={downloadCSV}
+    >
+      Download CSV
+    </Button>
+  );
 };
diff --git a/src/app/portal/admin/forms/[id]/submissions/dataTableWrapper.tsx b/src/app/portal/admin/forms/[id]/submissions/dataTableWrapper.tsx
index e994b996..2b8dac6e 100644
--- a/src/app/portal/admin/forms/[id]/submissions/dataTableWrapper.tsx
+++ b/src/app/portal/admin/forms/[id]/submissions/dataTableWrapper.tsx
@@ -9,7 +9,7 @@ import {
   ReferenceMap,
 } from "@/app/portal/admin/forms/[id]/submissions/columns";
 import useApplicantPopover from "@/components/forms/applications/applicantPopover";
-import { useContext } from "react";
+import { Fragment, useContext } from "react";
 import { formContext } from "@/components/layouts/formTabView";
 
 export type DataTableProps<TData, TValue> = {
@@ -76,7 +76,7 @@ export default function DataTableWrapper<TData>({
   };
 
   return (
-    <div>
+    <Fragment>
       {applicantPopover}
       <DataTable
         columns={columns}
@@ -84,6 +84,6 @@ export default function DataTableWrapper<TData>({
         refMap={refMap}
         config={config}
       />
-    </div>
+    </Fragment>
   );
 }
diff --git a/src/app/portal/admin/forms/[id]/submissions/formDataChart.tsx b/src/app/portal/admin/forms/[id]/submissions/formDataChart.tsx
index 947bf275..9ccef9ca 100644
--- a/src/app/portal/admin/forms/[id]/submissions/formDataChart.tsx
+++ b/src/app/portal/admin/forms/[id]/submissions/formDataChart.tsx
@@ -32,7 +32,7 @@ export function FormChart({
   });
 
   return (
-    <Card className={"max-w-2xl flex-1 w-full "}>
+    <Card className={" flex-1 w-full "}>
       <CardHeader>
         <CardTitle>{chartInfo.title}</CardTitle>
       </CardHeader>
diff --git a/src/app/portal/admin/forms/[id]/submissions/page.tsx b/src/app/portal/admin/forms/[id]/submissions/page.tsx
index 21c51957..7f777105 100644
--- a/src/app/portal/admin/forms/[id]/submissions/page.tsx
+++ b/src/app/portal/admin/forms/[id]/submissions/page.tsx
@@ -5,13 +5,5 @@ import { formContext } from "@/components/layouts/formTabView";
 
 export default function FormSubmissionsPage() {
   const { formFields, submissions } = useContext(formContext);
-  return (
-    <div className="overflow-hidden flex flex-col max-w-screen pb-32 py-1">
-      <div
-        className={"flex p-2 px-10 justify-between items-center gap-2"}
-      ></div>
-
-      <DataTableWrapper data={submissions} formFields={formFields} />
-    </div>
-  );
+  return <DataTableWrapper data={submissions} formFields={formFields} />;
 }
diff --git a/src/app/portal/admin/forms/[id]/user/page.tsx b/src/app/portal/admin/forms/[id]/support/page.tsx
similarity index 56%
rename from src/app/portal/admin/forms/[id]/user/page.tsx
rename to src/app/portal/admin/forms/[id]/support/page.tsx
index 67af7e7d..4e81ee67 100644
--- a/src/app/portal/admin/forms/[id]/user/page.tsx
+++ b/src/app/portal/admin/forms/[id]/support/page.tsx
@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 import { Application } from "@/lib/types/questions";
 import ApplicationForm from "@/components/forms/applications/applicationForm";
 import { Button } from "@/components/primitives/button";
+import { XIcon } from "lucide-react";
 
 export default function SubmissionAsUser() {
   const [form, setForm] = useState<Form | null>(null);
@@ -20,6 +21,10 @@ export default function SubmissionAsUser() {
     init();
   }, []);
 
+  if (!params || !params.id) {
+    return null;
+  }
+
   async function init() {
     const form = await getForm(Number(params.id));
     const submissions = await getSubmissions(Number(params.id), false);
@@ -36,41 +41,59 @@ export default function SubmissionAsUser() {
 
   return (
     <div className="flex flex-col">
-      <nav className="flex flex-row gap-10 border-b py-2 px-4 border-b-background-500">
-        <section className="flex flex-shrink-0 flex-1 gap-2 flex-col">
-          <div className="flex gap-2">
-            <Input
-              className="p-2"
-              list="emails"
-              placeholder="Search for email"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-            />
-            <datalist id="emails" className="p-2">
-              {submissions.map((submission) => (
-                <option key={submission.id}>{submission.email}</option>
-              ))}
-            </datalist>
+      {!app && (
+        <nav className="flex flex-row gap-10 border-b py-2 px-4 border-b-background-500">
+          <section className="flex flex-shrink-0 flex-1 gap-2 flex-col">
+            <div className="flex gap-2">
+              <Input
+                disabled={!submissions || submissions.length === 0}
+                className="p-2"
+                list="emails"
+                placeholder={
+                  submissions?.length === 0
+                    ? "Loading submission"
+                    : "Search by email"
+                }
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+              <datalist id="emails" className="p-2">
+                {submissions.map((submission) => (
+                  <option key={submission.id}>{submission.email}</option>
+                ))}
+              </datalist>
+              <Button
+                disabled={!search || search.length < 3}
+                onClick={async () => {
+                  setApp(
+                    submissions.find(
+                      (s) => s.email === search,
+                    ) as unknown as Application,
+                  );
+                }}
+                className="p-2 flex-shrink-0 min-w-[200px]"
+              >
+                Open application
+              </Button>
+            </div>
+          </section>
+        </nav>
+      )}
+
+      {app && form && (
+        <div className="flex  gap-4 flex-col">
+          <div className="flex p-2 px-4 w-full items-center flex-row gap-2">
             <Button
-              disabled={!search || search.length < 3}
-              onClick={async () => {
-                setApp(
-                  submissions.find(
-                    (s) => s.email === search,
-                  ) as unknown as Application,
-                );
+              variant={"outline"}
+              size={"icon"}
+              className="bg-background-700 border-none"
+              onClick={() => {
+                setApp(null);
+                setSearch("");
               }}
-              className="p-2 flex-shrink-0 min-w-[200px]"
             >
-              Find
+              <XIcon />
             </Button>
-          </div>
-        </section>
-      </nav>
-
-      {app && form && (
-        <div className="flex pt-4 gap-4 flex-col">
-          <div className="flex p-2 px-4 w-full items-center flex-row gap-2">
             <h2 className="text-xl  font-heading font-bold">
               {`${app.details.firstName || "User"}'s application`}
             </h2>
@@ -87,7 +110,7 @@ export default function SubmissionAsUser() {
                 : "User has already submitted"}
             </Button>
           </div>
-          <div className="flex rounded-lg border border-background-600 flex-col p-2 px-4 w-full">
+          <div className="flex border border-background-600 flex-col p-2 px-4 w-full">
             <ApplicationForm
               application={app as unknown as Application}
               applicationForm={form as unknown as Form}
diff --git a/src/app/portal/loading.tsx b/src/app/portal/loading.tsx
index 656bc010..1d8bbc69 100644
--- a/src/app/portal/loading.tsx
+++ b/src/app/portal/loading.tsx
@@ -14,7 +14,7 @@ export default function Loading({
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
+    <div className="flex flex-col items-center justify-center h-screen bg-background-900">
       <div
         className={`${sizeClasses[size]} border-t-transparent border-${color} rounded-full animate-spin`}
       ></div>
diff --git a/src/components/layouts/formTabView.tsx b/src/components/layouts/formTabView.tsx
index 58f5798b..be06ed88 100644
--- a/src/components/layouts/formTabView.tsx
+++ b/src/components/layouts/formTabView.tsx
@@ -61,7 +61,11 @@ export default function FormTabView({
         mergeNewData,
       }}
     >
-      <div className={"flex flex-col gap-4 flex-1 w-full min-h-screen  "}>
+      <div
+        className={
+          "flex flex-col gap-4 flex-1 w-full max-h-dvh h-dvh overflow-hidden "
+        }
+      >
         <div className="flex justify-between items-center gap-2 border-background-500 border-b">
           <div className="flex flex-row p-2 items-center px-4 gap-2">
             <Link
@@ -84,7 +88,7 @@ export default function FormTabView({
                   shallow={true}
                   href={tab.route}
                   key={index}
-                  className={` border-t border-x p-4 py-2 border-background-500 rounded-t-xl ${
+                  className={` border-t border-x p-4 py-2 border-background-500 rounded-t-md ${
                     isActive(tab.route, pathname)
                       ? "bg-lp-400"
                       : "bg-background-500 hover:bg-background-400"
@@ -96,7 +100,7 @@ export default function FormTabView({
             })}
           </div>
         </div>
-        <section className={"flex flex-col gap-4 flex-1  py-1"}>
+        <section className="flex flex-col gap-4 flex-1 py-1 min-h-0 overflow-auto">
           {children}
         </section>
       </div>
diff --git a/src/components/primitives/table.tsx b/src/components/primitives/table.tsx
index 1e3120a8..cace4351 100644
--- a/src/components/primitives/table.tsx
+++ b/src/components/primitives/table.tsx
@@ -6,13 +6,13 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
+  // <div className="relative w-full overflow-auto">
+  <table
+    ref={ref}
+    className={cn("w-full caption-bottom text-sm", className)}
+    {...props}
+  />
+  // </div>
 ));
 Table.displayName = "Table";