refactor(FE-438): Add uniformity details preview drawer

src/components/pages/uniformity/detail/UniformityDetail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
@@ -8,10 +8,13 @@ import Button from '@/components/Button';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import Table from '@/components/Table';
 import Badge from '@/components/Badge';
+import Tooltip from '@/components/Tooltip';
 import { type OptionType } from '@/components/input/SelectInput';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { UniformityDetail as UniformityDetailType } from '@/types/api/uniformity/uniformity';
 import { formatDate } from '@/lib/helper';
+import { useUiStore } from '@/stores/ui/ui.store';
+import UniformityDetailsPreview from './UniformityDetailsPreview';
 
 const statusColorMap: Record<string, string> = {
   APPROVED: 'bg-[#00D39033]',
@@ -43,7 +46,7 @@ const getStatusText = (status: string): string => {
   return statusTextMap[status] || status;
 };
 
-type DetailOptionType = OptionType & {
+export type DetailOptionType = OptionType & {
   id: string;
 };
 
@@ -55,6 +58,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
   initialValues,
 }) => {
   const router = useRouter();
+  const setExpandedDrawerOpen = useUiStore((s) => s.setExpandedDrawerOpen);
+  const setExpandedDrawerContent = useUiStore(
+    (s) => s.setExpandedDrawerContent
+  );
 
   const handleApprove = () => {
     router.push(`/uniformity?action=approve&id=${initialValues.id}`);
@@ -64,6 +71,28 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     router.push(`/uniformity?action=reject&id=${initialValues.id}`);
   };
 
+  const handleViewUniformityDetails = () => {
+    setExpandedDrawerContent(
+      <UniformityDetailsPreview
+        info_umum={initialValues.info_umum}
+        uniformityDetails={initialValues.uniformity_details}
+        sampling={initialValues.sampling}
+        result={initialValues.result}
+      />
+    );
+
+    setTimeout(() => {
+      setExpandedDrawerOpen(true);
+    }, 0);
+  };
+
+  useEffect(() => {
+    return () => {
+      setExpandedDrawerOpen(false);
+      setExpandedDrawerContent(null);
+    };
+  }, []);
+
   const infoUmumTableData: DetailOptionType[] = useMemo(() => {
     if (!initialValues) return [];
 
@@ -147,6 +176,22 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             return <span>-</span>;
           }
 
+          if (id === 'file-name') {
+            return (
+              <div className='flex items-center gap-2'>
+                <span>{valueMap[id]}</span>
+                <Tooltip content='Lihat Detail'>
+                  <button
+                    className='p-1 hover:bg-gray-100 rounded'
+                    onClick={handleViewUniformityDetails}
+                  >
+                    <Icon icon='mdi:eye-outline' width={18} height={18} />
+                  </button>
+                </Tooltip>
+              </div>
+            );
+          }
+
           return <span>{valueMap[id] || '-'}</span>;
         },
       },