refactor(FE): Add tab state management and skeleton for

PurchasesPerSupplierTab

src/components/pages/report/logistic-stock/LogisticStockTabs.tsx

@@ -1,14 +1,19 @@
 'use client';
 
+import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 import PurchasesPerSupplierTab from '@/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab';
+import { useLogisticStockTabStore } from '@/stores/logistic-stock-tab/logistic-stock-tab.store';
 
 const LogisticStockTabs = () => {
+  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const tabActions = useLogisticStockTabStore((state) => state.tabActions);
+
   const tabs = [
     {
       id: '1',
       label: 'Rekapitulasi Pembelian Per Supplier',
-      content: <PurchasesPerSupplierTab />,
+      content: <PurchasesPerSupplierTab tabId='1' />,
     },
     // {
     //   id: '2',
@@ -23,8 +28,20 @@ const LogisticStockTabs = () => {
   ];
 
   return (
-    <section className='w-full p-4'>
-      <Tabs tabs={tabs} variant='lifted' />
+    <section className='w-full'>
+      <Tabs
+        tabs={tabs}
+        variant='lifted'
+        activeTabId={activeTabId}
+        onTabChange={setActiveTabId}
+        className={{
+          tabHeaderWrapper:
+            'justify-between items-center p-3 border-b border-base-content/10',
+          tab: 'w-fit',
+          content: 'p-0 m-0',
+        }}
+        sideContent={tabActions[activeTabId] || null}
+      />
     </section>
   );
 };