1 files changed, 81 insertions, 0 deletions
diff --git a/src/modules/result/components/DetailRow.tsx b/src/modules/result/components/DetailRow.tsx
new file mode 100644
index 0000000..99ccb01
--- /dev/null
+++ b/src/modules/result/components/DetailRow.tsx
@@ -0,0 +1,81 @@
+"use client";
+import { useResultStore } from '@/common/stores/useResultStore';
+import { StockOpnameLocationRes } from '@/common/types/stockOpname';
+import { Skeleton } from '@nextui-org/react';
+import { useQuery } from '@tanstack/react-query'
+import styles from './table.module.css'
+import { CornerDownRightIcon } from 'lucide-react';
+import { User } from '@prisma/client';
+import clsxm from '@/common/libs/clsxm';
+
+const DetailRow = ({ productId }: { productId: number }) => {
+  const { filter } = useResultStore()
+
+  const detailLocation = useQuery({
+    queryKey: ['detailLocation', productId, filter.company],
+    queryFn: async () => {
+      const searchParams = new URLSearchParams()
+      if (!filter?.company) return null
+      searchParams.set('companyId', filter.company)
+      searchParams.set('productId', productId.toString())
+      return await fetch(`/api/stock-opname/location?${searchParams}`)
+        .then(res => res.json())
+    }
+  })
+
+  if (detailLocation.isLoading) {
+    return (
+      <tr>
+        <td colSpan={7}>
+          <div className='grid grid-cols-1 gap-y-2 w-full'>
+            <Skeleton className='w-full h-8' />
+            <Skeleton className='w-full h-8' />
+          </div>
+        </td>
+      </tr>
+    )
+  }
+
+  return (
+    <>
+      {detailLocation.data?.map((location: StockOpnameLocationRes) => (
+        <tr key={location.id}>
+          <td />
+          <td className={clsxm(styles.td, 'min-w-[250px]')}>
+            <div className="flex gap-x-2">
+              <CornerDownRightIcon size={16} />
+              {location.name}
+            </div>
+          </td>
+          <td className={styles.td}>
+            <QuantityColumn data={location.COUNT1} />
+          </td>
+          <td className={styles.td}>
+            <QuantityColumn data={location.COUNT2} />
+          </td>
+          <td className={styles.td}>
+            <QuantityColumn data={location.VERIFICATION} />
+          </td>
+          <td className={styles.td} />
+          <td className={styles.td} />
+        </tr>
+      ))}
+    </>
+  )
+}
+
+const QuantityColumn = ({ data }: { data: { quantity?: number | undefined, user?: User } }) => (
+  <div className='grid grid-cols-1'>
+    {typeof data?.quantity !== 'number' && '-'}
+    {data.quantity !== null && (
+      <>
+        <span>{data.quantity}</span>
+        <div className='text-xs'>
+          {data.user?.name}
+        </div>
+      </>
+    )}
+  </div>
+)
+
+export default DetailRow
+\ No newline at end of file