feat(FE): adding export feature on dashboard

src/components/helper/ButtonFilter.tsx

@@ -1,5 +1,6 @@
 import Button, { ButtonProps } from '@/components/Button';
 import { getFilledFormikValuesCount } from '@/lib/formik-helper';
+import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 import { FormikValues } from 'formik';
 
@@ -13,11 +14,12 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
     <Button
       {...props}
       onClick={onClick}
-      className={
+      className={cn(
         getFilledFormikValuesCount(values) > 0
           ? 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
-          : ''
-      }
+          : '',
+        props.className
+      )}
     >
       <Icon
         icon='heroicons:funnel'

src/components/helper/form/FormErrors.tsx

@@ -18,7 +18,7 @@ const AlertErrorList = ({
   if (formErrorList.length === 0) return null;
 
   return (
-    <Alert color='error' className='w-full flex flex-col gap-2 px-4 m-4'>
+    <Alert color='error' className='w-full flex flex-col gap-2 px-4'>
       <div className='flex justify-between items-center gap-2 w-full'>
         <div className='flex items-center gap-2'>
           <Icon icon='material-symbols:error-outline' width={24} height={24} />

src/components/pages/dashboard/DashboardProduction.tsx

@@ -8,7 +8,7 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
@@ -30,6 +30,11 @@ import DashboardStats from '@/components/pages/dashboard/chart/DashboardStats';
 import { isResponseSuccess } from '@/lib/api-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import ButtonFilter from '@/components/helper/ButtonFilter';
+import toast from 'react-hot-toast';
+import Dropdown from '@/components/Dropdown';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -49,6 +54,7 @@ const DashboardProduction = () => {
   );
   const [endpointUrl, setEndpointUrl] = useState('/dashboards');
   const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
+  const [exporting, setExporting] = useState(false);
 
   // ===== FETCH DATA =====
   const {
@@ -143,12 +149,27 @@ const DashboardProduction = () => {
     console.log(endpointUrl);
     filterModal.closeModal();
     refreshDashboardProductionData();
-    formik.resetForm();
   };
 
   // ===== Formik Error List =====
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
+  // ===== Export PDF =====
+  const handleExportPDF = () => {
+    setExporting(true);
+  };
+
+  // Wait for state to render, then trigger print
+  useEffect(() => {
+    if (exporting) {
+      const timer = setTimeout(() => {
+        window.print();
+        setExporting(false);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [exporting]);
+
   if (isLoadingDashboardProductionData) {
     return (
       <div className='w-full min-h-screen flex items-center justify-center'>
@@ -156,71 +177,39 @@ const DashboardProduction = () => {
       </div>
     );
   }
+
   return (
     <>
       <section className='w-full p-4 space-y-6'>
         <div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
           <div></div>
+
           <div className='flex flex-row justify-end gap-2'>
-            <Button
+            <ButtonFilter
+              values={{
+                ...formik.values,
+                analysisMode: undefined,
+              }}
               variant='outline'
-              className={`min-w-28 rounded-lg ${
-                isResponseSuccess(dashboardProductionResponse) &&
-                (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                  .filters
-                  ? 'bg-gradient-to-r from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
-                  : ''
-              }`}
-              onClick={() => filterModal.openModal()}
-            >
-              <Icon
-                icon='heroicons:funnel'
-                width={20}
-                height={20}
-                className={
-                  isResponseSuccess(dashboardProductionResponse) &&
-                  (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                    .filters
-                    ? 'text-blue-600'
-                    : ''
-                }
-              />
-              Filter
-              {isResponseSuccess(dashboardProductionResponse) &&
-                dashboardProductionResponse.meta &&
-                (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                  .filters && (
-                  <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
-                    {(() => {
-                      const meta =
-                        dashboardProductionResponse.meta as unknown as DashboardMeta;
-                      if (!meta.filters) return 0;
-                      const count =
-                        (meta.filters.location_ids.length > 1
-                          ? meta.filters.location_ids.length
-                          : 0) +
-                        (meta.filters.flock_ids.length > 1
-                          ? meta.filters.flock_ids.length
-                          : 0) +
-                        (meta.filters.kandang_ids.length > 1
-                          ? meta.filters.kandang_ids.length
-                          : 0);
-                      return meta.filters.analysis_mode === 'OVERVIEW'
-                        ? 1
-                        : count;
-                    })()}
-                  </span>
-                )}
-            </Button>
-            <Button
-              variant='outline'
-              color='neutral'
               className='min-w-28 rounded-lg'
+              onClick={() => filterModal.openModal()}
+            />
+            <Dropdown
+              trigger={
+                <Button variant='outline' className='min-w-28 rounded-lg z-50'>
+                  <Icon icon='heroicons:arrow-down-tray' />
+                  Export
+                  <Icon icon='heroicons:chevron-down' />
+                </Button>
+              }
+              className={{
+                content: 'w-full',
+              }}
             >
-              <Icon icon='heroicons:arrow-down-tray' width={20} height={20} />
-              Export
-              <Icon icon='heroicons:chevron-down' width={20} height={20} />
-            </Button>
+              <Menu className={exporting ? 'hidden' : ''}>
+                <MenuItem title='PDF' onClick={handleExportPDF} />
+              </Menu>
+            </Dropdown>
           </div>
         </div>
 
@@ -287,7 +276,7 @@ const DashboardProduction = () => {
             {/* Rentang Waktu */}
             <div className='px-4'>
               <label className='flex items-center gap-2 mb-3'>Tanggal</label>
-              <div className='flex items-center gap-2'>
+              <div className='flex items-start gap-2'>
                 <DateInput
                   name='startDate'
                   placeholder='Tanggal Mulai'
@@ -302,7 +291,7 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.startDate)
                   }
                 />
-                <span className='hidden md:block text-center'>—</span>
+                <div className='hidden md:block mt-3 text-center'>—</div>
                 <DateInput
                   name='endDate'
                   placeholder='Tanggal Akhir'
@@ -465,7 +454,9 @@ const DashboardProduction = () => {
               </div>
             )}
 
-            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            <div className='w-full p-4'>
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
 
             {/* Action Buttons */}
             <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>