diff --git a/src/components/pages/closing/ClosingDetail.tsx b/src/components/pages/closing/ClosingDetail.tsx
new file mode 100644
index 00000000..147b3fbd
--- /dev/null
+++ b/src/components/pages/closing/ClosingDetail.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Tabs from '@/components/Tabs';
+import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+
+import { ClosingGeneralInformation } from '@/types/api/closing';
+import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+
+interface ClosingDetailProps {
+  id: number;
+  initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingDetail: React.FC<ClosingDetailProps> = ({ id, initialValue }) => {
+  const [activeTab, setActiveTab] = useState<string>('sapronak');
+
+  const closingDetailTabs = useMemo(() => {
+    const validTabs = [
+      {
+        id: 'sapronak',
+        label: 'Sapronak',
+        content: <ClosingSapronakTabContent projectFlockId={id} />,
+      },
+      {
+        id: 'perhitunganSapronak',
+        label: 'Perhitungan Sapronak',
+        content: 'Perhitungan Sapronak',
+      },
+      {
+        id: 'penjualan',
+        label: 'Penjualan',
+        content: 'Penjualan',
+      },
+      {
+        id: 'overhead',
+        label: 'Overhead',
+        content: 'Overhead',
+      },
+      {
+        id: 'hppEkspedisi',
+        label: 'HPP Ekspedisi',
+        content: 'HPP Ekspedisi',
+      },
+      {
+        id: 'dataProduksi',
+        label: 'Data Produksi',
+        content: 'Data Produksi',
+      },
+      {
+        id: 'keuangan',
+        label: 'Keuangan',
+        content: 'Keuangan',
+      },
+    ];
+
+    return validTabs;
+  }, [initialValue]);
+
+  return (
+    <>
+      <section className='w-full max-w-7xl pb-16'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/closing'
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>Detail Closing</h1>
+        </header>
+
+        <ClosingGeneralInformationTable initialValue={initialValue} />
+
+        <Tabs
+          activeTabId={activeTab}
+          onTabChange={setActiveTab}
+          tabs={closingDetailTabs}
+          variant='lifted'
+          className={{
+            wrapper: 'w-full mt-4',
+          }}
+        />
+      </section>
+    </>
+  );
+};
+
+export default ClosingDetail;