From d312da4c6639beb41fb866eea56a9be29988b9f9 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 13 Feb 2026 09:53:33 +0700
Subject: [PATCH] refactor(FE): Refactor dropdown and export button components

---
 .../report/finance/tab/CustomerPaymentTab.tsx | 77 +++++++++++--------
 .../report/finance/tab/DebtSupplierTab.tsx    | 69 ++++++++++-------
 .../tab/PurchasesPerSupplierTab.tsx           | 77 +++++++++++--------
 .../report/marketing/tab/HppPerKandangTab.tsx | 77 +++++++++++--------
 .../tab/ProductionResultTab.tsx               | 77 +++++++++++--------
 5 files changed, 216 insertions(+), 161 deletions(-)

diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index 1443fa0b..1c546058 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -25,8 +25,6 @@ import {
 import { isResponseSuccess } from '@/lib/api-helper';
 import Button from '@/components/Button';
 import Dropdown from '@/components/Dropdown';
-import MenuItem from '@/components/menu/MenuItem';
-import Menu from '@/components/menu/Menu';
 import Modal, { useModal } from '@/components/Modal';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
@@ -387,13 +385,13 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
           color='none'
           onClick={handleFilterModalOpen}
           className={cn(
-            'px-3 py-2.5',
-            'rounded-lg! font-semibold text-sm gap-1.5',
-            'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-            hasFilters && 'border-primary-gradient text-primary'
+            'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+            {
+              'border-primary-gradient text-primary': hasFilters,
+            }
           )}
         >
-          <Icon icon='heroicons:funnel' width={18} height={18} />
+          <Icon icon='heroicons:funnel' width={20} height={20} />
           Filter
           {hasFilters && (
             <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
@@ -403,42 +401,55 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         </Button>
 
         <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
           trigger={
             <Button
               variant='outline'
               color='none'
               isLoading={isAnyExportLoading}
-              className={cn(
-                'px-3 py-2.5',
-                'rounded-lg font-semibold text-sm gap-1.5',
-                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-              )}
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
             >
-              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
-              Export
-              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
-                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              <div className='flex flex-row items-center gap-1.5'>
+                <Icon
+                  icon='heroicons:cloud-arrow-down'
+                  width={20}
+                  height={20}
+                />
+
+                <span>Export</span>
+
+                <div className='w-px self-stretch bg-base-content/10' />
+
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
               </div>
             </Button>
           }
-          align='end'
-          className={{
-            content:
-              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
-          }}
         >
-          <Menu className='p-0 w-full'>
-            <MenuItem
-              className='text-sm p-3'
-              title='Excel'
-              onClick={handleExportExcel}
-            />
-            <MenuItem
-              className='text-sm p-3'
-              title='PDF'
-              onClick={handleExportPdf}
-            />
-          </Menu>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportExcel}
+            isLoading={isExcelExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
+            Export to Excel
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportPdf}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
         </Dropdown>
       </div>
     );
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index 44677313..d0a27b92 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -3,8 +3,6 @@ import Card from '@/components/Card';
 import Dropdown from '@/components/Dropdown';
 import DateInput from '@/components/input/DateInput';
 import { OptionType, useSelect } from '@/components/input/SelectInput';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import Modal, { useModal } from '@/components/Modal';
 import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -277,7 +275,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   useEffect(() => {
     setTabActions(
       tabId,
-      <div className='flex flex-row gap-3 '>
+      <div className='flex flex-row gap-3'>
         <ButtonFilter
           values={formik.values}
           onClick={handleFilterModalOpen}
@@ -286,42 +284,55 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         />
 
         <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
           trigger={
             <Button
               variant='outline'
               color='none'
               isLoading={isAnyExportLoading}
-              className={cn(
-                'px-3 py-2.5',
-                'rounded-lg font-semibold text-sm gap-1.5',
-                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-              )}
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
             >
-              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
-              Export
-              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
-                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              <div className='flex flex-row items-center gap-1.5'>
+                <Icon
+                  icon='heroicons:cloud-arrow-down'
+                  width={20}
+                  height={20}
+                />
+
+                <span>Export</span>
+
+                <div className='w-px self-stretch bg-base-content/10' />
+
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
               </div>
             </Button>
           }
-          align='end'
-          className={{
-            content:
-              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
-          }}
         >
-          <Menu className='p-0 w-full'>
-            <MenuItem
-              className='text-sm p-3'
-              title='Excel'
-              onClick={handleExportExcel}
-            />
-            <MenuItem
-              className='text-sm p-3'
-              title='PDF'
-              onClick={handleExportPdf}
-            />
-          </Menu>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportExcel}
+            isLoading={isExcelExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
+            Export to Excel
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportPdf}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
         </Dropdown>
       </div>
     );
diff --git a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
index 5e2c4e27..36476956 100644
--- a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+++ b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
@@ -3,8 +3,6 @@ import Card from '@/components/Card';
 import Dropdown from '@/components/Dropdown';
 import DateInput from '@/components/input/DateInput';
 import { useSelect } from '@/components/input/SelectInput';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import Modal, { useModal } from '@/components/Modal';
 import Table from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -498,13 +496,13 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
           color='none'
           onClick={handleFilterModalOpen}
           className={cn(
-            'px-3 py-2.5',
-            'rounded-lg! font-semibold text-sm gap-1.5',
-            'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-            hasFilters && 'border-primary-gradient text-primary'
+            'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+            {
+              'border-primary-gradient text-primary': hasFilters,
+            }
           )}
         >
-          <Icon icon='heroicons:funnel' width={18} height={18} />
+          <Icon icon='heroicons:funnel' width={20} height={20} />
           Filter
           {hasFilters && (
             <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
@@ -514,42 +512,55 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
         </Button>
 
         <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
           trigger={
             <Button
               variant='outline'
               color='none'
               isLoading={isAnyExportLoading}
-              className={cn(
-                'px-3 py-2.5',
-                'rounded-lg font-semibold text-sm gap-1.5',
-                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-              )}
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
             >
-              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
-              Export
-              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
-                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              <div className='flex flex-row items-center gap-1.5'>
+                <Icon
+                  icon='heroicons:cloud-arrow-down'
+                  width={20}
+                  height={20}
+                />
+
+                <span>Export</span>
+
+                <div className='w-px self-stretch bg-base-content/10' />
+
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
               </div>
             </Button>
           }
-          align='end'
-          className={{
-            content:
-              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
-          }}
         >
-          <Menu className='p-0 w-full'>
-            <MenuItem
-              className='text-sm p-3'
-              title='Excel'
-              onClick={handleExportExcel}
-            />
-            <MenuItem
-              className='text-sm p-3'
-              title='PDF'
-              onClick={handleExportPdf}
-            />
-          </Menu>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportExcel}
+            isLoading={isExcelExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
+            Export to Excel
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportPdf}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
         </Dropdown>
       </div>
     );
diff --git a/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx b/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
index d3d4bfac..e106dbf4 100644
--- a/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
+++ b/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
@@ -18,8 +18,6 @@ import {
 import { isResponseSuccess } from '@/lib/api-helper';
 import Button from '@/components/Button';
 import Dropdown from '@/components/Dropdown';
-import MenuItem from '@/components/menu/MenuItem';
-import Menu from '@/components/menu/Menu';
 import { generateHppPerKandangPDF } from '@/components/pages/report/marketing/export/HppPerkandangExportPDF';
 import { generateHppPerKandangExcel } from '@/components/pages/report/marketing/export/HppPerkandangExportXLSX';
 import toast from 'react-hot-toast';
@@ -499,13 +497,13 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
           color='none'
           onClick={handleFilterModalOpen}
           className={cn(
-            'px-3 py-2.5',
-            'rounded-lg! font-semibold text-sm gap-1.5',
-            'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-            hasFilters && 'border-primary-gradient text-primary'
+            'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+            {
+              'border-primary-gradient text-primary': hasFilters,
+            }
           )}
         >
-          <Icon icon='heroicons:funnel' width={18} height={18} />
+          <Icon icon='heroicons:funnel' width={20} height={20} />
           Filter
           {hasFilters && (
             <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
@@ -515,42 +513,55 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
         </Button>
 
         <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
           trigger={
             <Button
               variant='outline'
               color='none'
               isLoading={isAnyExportLoading}
-              className={cn(
-                'px-3 py-2.5',
-                'rounded-lg font-semibold text-sm gap-1.5',
-                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-              )}
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
             >
-              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
-              Export
-              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
-                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              <div className='flex flex-row items-center gap-1.5'>
+                <Icon
+                  icon='heroicons:cloud-arrow-down'
+                  width={20}
+                  height={20}
+                />
+
+                <span>Export</span>
+
+                <div className='w-px self-stretch bg-base-content/10' />
+
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
               </div>
             </Button>
           }
-          align='end'
-          className={{
-            content:
-              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
-          }}
         >
-          <Menu className='p-0 w-full'>
-            <MenuItem
-              className='text-sm p-3'
-              title='Excel'
-              onClick={handleExportExcel}
-            />
-            <MenuItem
-              className='text-sm p-3'
-              title='PDF'
-              onClick={handleExportPDF}
-            />
-          </Menu>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportExcel}
+            isLoading={isExcelExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
+            Export to Excel
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={handleExportPDF}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
         </Dropdown>
       </div>
     );
diff --git a/src/components/pages/report/production-result/tab/ProductionResultTab.tsx b/src/components/pages/report/production-result/tab/ProductionResultTab.tsx
index 090ca781..d04c9e20 100644
--- a/src/components/pages/report/production-result/tab/ProductionResultTab.tsx
+++ b/src/components/pages/report/production-result/tab/ProductionResultTab.tsx
@@ -9,8 +9,6 @@ import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import Dropdown from '@/components/dropdown/Dropdown';
 import SelectInput, { useSelect } from '@/components/input/SelectInput';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import ProductionResultProjectFlockKandangTable from '@/components/pages/report/production-result/ProductionResultProjectFlockKandangTable';
 import { useFormik } from 'formik';
 import {
@@ -546,13 +544,13 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
           color='none'
           onClick={() => filterModal.openModal()}
           className={cn(
-            'px-3 py-2.5',
-            'rounded-lg! font-semibold text-sm gap-1.5',
-            'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft',
-            hasFilters && 'border-primary-gradient text-primary'
+            'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+            {
+              'border-primary-gradient text-primary': hasFilters,
+            }
           )}
         >
-          <Icon icon='heroicons:funnel' width={18} height={18} />
+          <Icon icon='heroicons:funnel' width={20} height={20} />
           Filter
           {hasFilters && (
             <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
@@ -562,42 +560,55 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
         </Button>
 
         <Dropdown
+          align='end'
+          direction='bottom'
+          className={{
+            content:
+              'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
+          }}
           trigger={
             <Button
               variant='outline'
               color='none'
               isLoading={isAnyExportLoading}
-              className={cn(
-                'px-3 py-2.5',
-                'rounded-lg font-semibold text-sm gap-1.5',
-                'text-sm text-base-content/50 border border-base-content/10 shadow-button-soft'
-              )}
+              className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
             >
-              <Icon icon='heroicons:cloud-arrow-down' width={20} height={20} />
-              Export
-              <div className='w-6.5 h-5 flex items-center justify-center border-l border-base-content/10'>
-                <Icon width={14} height={14} icon='heroicons:chevron-down' />
+              <div className='flex flex-row items-center gap-1.5'>
+                <Icon
+                  icon='heroicons:cloud-arrow-down'
+                  width={20}
+                  height={20}
+                />
+
+                <span>Export</span>
+
+                <div className='w-px self-stretch bg-base-content/10' />
+
+                <Icon icon='heroicons:chevron-down' width={14} height={14} />
               </div>
             </Button>
           }
-          align='end'
-          className={{
-            content:
-              'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg',
-          }}
         >
-          <Menu className='p-0 w-full'>
-            <MenuItem
-              className='text-sm p-3'
-              title='Excel'
-              onClick={exportToExcelHandler}
-            />
-            <MenuItem
-              className='text-sm p-3'
-              title='PDF'
-              onClick={exportToPdfHandler}
-            />
-          </Menu>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={exportToExcelHandler}
+            isLoading={isExcelExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:table-cells' width={20} height={20} />
+            Export to Excel
+          </Button>
+          <Button
+            variant='ghost'
+            color='none'
+            onClick={exportToPdfHandler}
+            isLoading={isPdfExportLoading}
+            className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
+          >
+            <Icon icon='heroicons:document' width={20} height={20} />
+            Export to PDF
+          </Button>
         </Dropdown>
       </div>
     );