From dfe502ee9cd0b04d3b3cc73652df5e216442a233 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 5 Dec 2023 09:45:50 +0700
Subject: UI: Fix result page

---
 src/app/(desktop-screen)/result/page.tsx       |  2 +-
 src/modules/result/components/DetailRow.tsx    |  2 +-
 src/modules/result/components/ProductModal.tsx |  2 +-
 src/modules/result/components/Table.tsx        | 19 +++++++++++--------
 src/modules/result/components/table.module.css |  6 +++++-
 src/modules/result/index.tsx                   |  4 ++--
 6 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/app/(desktop-screen)/result/page.tsx b/src/app/(desktop-screen)/result/page.tsx
index 8c96272..8819eb5 100644
--- a/src/app/(desktop-screen)/result/page.tsx
+++ b/src/app/(desktop-screen)/result/page.tsx
@@ -4,7 +4,7 @@ import Result from "@/modules/result"
 const ResultPage = () => {
   return (
     <Authenticated>
-      <main className="px-4 pt-6 bg-white">
+      <main className="p-4 bg-white flex flex-col max-h-screen">
         <Result />
       </main>
     </Authenticated>
diff --git a/src/modules/result/components/DetailRow.tsx b/src/modules/result/components/DetailRow.tsx
index bb5b1ef..143bae9 100644
--- a/src/modules/result/components/DetailRow.tsx
+++ b/src/modules/result/components/DetailRow.tsx
@@ -42,7 +42,7 @@ const DetailRow = ({ productId }: { productId: number }) => {
       {detailLocation.data?.map((location: StockOpnameLocationRes) => (
         <tr key={location.id}>
           <td />
-          <td className={clsxm(styles.td, 'min-w-[250px]')}>
+          <td className={clsxm(styles.td, 'min-w-[250px]')} aria-label='name'>
             <div className="flex gap-x-2">
               <CornerDownRightIcon size={16} />
               {location.name}
diff --git a/src/modules/result/components/ProductModal.tsx b/src/modules/result/components/ProductModal.tsx
index 0d7a7fc..cfd7382 100644
--- a/src/modules/result/components/ProductModal.tsx
+++ b/src/modules/result/components/ProductModal.tsx
@@ -82,7 +82,7 @@ const ProductModal = ({ modal }: Props) => {
           )}
 
           {!!data && (
-            <Table className='max-h-[600px]' isHeaderSticky>
+            <Table className='max-h-[50vh]' isHeaderSticky>
               <TableHeader>
                 <TableColumn>NAME</TableColumn>
                 <TableColumn>ITEM CODE</TableColumn>
diff --git a/src/modules/result/components/Table.tsx b/src/modules/result/components/Table.tsx
index 7478e1b..20cc2d6 100644
--- a/src/modules/result/components/Table.tsx
+++ b/src/modules/result/components/Table.tsx
@@ -88,7 +88,7 @@ const Table = () => {
         </Button>
       </div>
 
-      <div className="w-full overflow-auto pb-4">
+      <div className="w-full flex-1 overflow-auto pb-4">
         <table className="w-full">
           <thead className={styles.thead}>
             <th className={styles.th}>STATUS</th>
@@ -117,7 +117,7 @@ const Table = () => {
                       {stockOpname.isDifferent ? 'Selisih' : 'Aman'}
                     </div>
                   </td>
-                  <td className={clsxm(styles.td, '!text-left flex min-w-[250px]')}>
+                  <td className={clsxm(styles.td, '!text-left flex min-w-[250px]')} aria-label="name">
                     {stockOpname.itemCode ? `[${stockOpname.itemCode}] ` : ''}
                     {stockOpname.name}
                     {stockOpname.barcode ? ` [${stockOpname.barcode}]` : ''}
@@ -182,13 +182,16 @@ const Table = () => {
           </tbody>
         </table>
 
-        <Spacer y={4} />
-        <Pagination
-          page={stockOpnames.data?.page || 1}
-          total={stockOpnames.data?.totalPage || 1}
-          onChange={(page) => updateFilter('page', page)}
-        />
       </div>
+
+      <Spacer y={4} />
+
+      <Pagination
+        page={stockOpnames.data?.page || 1}
+        total={stockOpnames.data?.totalPage || 1}
+        onChange={(page) => updateFilter('page', page)}
+        className="min-h-[36px] m-0 p-0"
+      />
     </>
   )
 }
diff --git a/src/modules/result/components/table.module.css b/src/modules/result/components/table.module.css
index 997e9c2..2681ae6 100644
--- a/src/modules/result/components/table.module.css
+++ b/src/modules/result/components/table.module.css
@@ -1,5 +1,5 @@
 .thead {
-  @apply text-xs;
+  @apply text-xs sticky top-0 z-20;
 }
 
 .tbody {
@@ -12,6 +12,10 @@
   @apply py-2 px-2 text-center;
 }
 
+.td[aria-label="name"] {
+  @apply sticky left-0 z-10 bg-gray-50;
+}
+
 .th {
   @apply whitespace-nowrap font-medium py-3 bg-neutral-100 
     first:rounded-md 
diff --git a/src/modules/result/index.tsx b/src/modules/result/index.tsx
index d69d53f..cbb2173 100644
--- a/src/modules/result/index.tsx
+++ b/src/modules/result/index.tsx
@@ -11,9 +11,9 @@ const Result = () => {
         <div className={styles.title}>Stock Opname Result</div>
         <MoreMenu />
       </div>
-      <Spacer y={6} />
+      <Spacer y={4} />
       <Filter />
-      <Spacer y={8} />
+      <Spacer y={4} />
       <Table />
     </>
   )
-- 
cgit v1.2.3