chore: adjust TransferToLayingsTable component styling

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
   CellContext,
@@ -12,30 +12,28 @@ import toast from 'react-hot-toast';
 
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import RequirePermission from '@/components/helper/RequirePermission';
-import DateInput from '@/components/input/DateInput';
 import PopoverButton from '@/components/popover/PopoverButton';
+import Badge from '@/components/Badge';
+import PopoverContent from '@/components/popover/PopoverContent';
+import Dropdown from '@/components/Dropdown';
+import StatusBadge from '@/components/helper/StatusBadge';
+import TransferToLayingFilterModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFilterModal';
 
-import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import {
+  TransferToLaying,
+  TransferToLayingFilter,
+} from '@/types/api/production/transfer-to-laying';
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { Flock } from '@/types/api/master-data/flock';
-import { ProjectFlockApi } from '@/services/api/production';
-import Badge from '@/components/Badge';
 import { Color } from '@/types/theme';
-import PopoverContent from '@/components/popover/PopoverContent';
 
 const RowOptionsMenu = ({
   props,
@@ -56,8 +54,8 @@ const RowOptionsMenu = ({
 
   const showDeleteButton = showEditButton;
 
-  const showApproveButton = showEditButton;
+  // const showApproveButton = showEditButton;
-  const showRejectButton = showEditButton;
+  // const showRejectButton = showEditButton;
 
   const popoverId = `transferToLaying#${props.row.original.id}`;
   const popoverAnchorName = `--anchor-transferToLaying#${props.row.original.id}`;
@@ -78,7 +76,7 @@ const RowOptionsMenu = ({
         id={popoverId}
         anchorName={popoverAnchorName}
         position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
-        className='rounded-xl border border-base-content/5 shadow-sm'
+        className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
       >
         <div className='flex flex-col bg-base-100 rounded-xl'>
           <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
@@ -107,7 +105,7 @@ const RowOptionsMenu = ({
             </RequirePermission>
           )}
 
-          {showApproveButton && (
+          {/* {showApproveButton && (
             <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
               <Button
                 variant='ghost'
@@ -133,7 +131,7 @@ const RowOptionsMenu = ({
                 Reject
               </Button>
             </RequirePermission>
-          )}
+          )} */}
 
           {showDeleteButton && (
             <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
@@ -165,18 +163,22 @@ const TransferToLayingsTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
-      transferDate: '',
+      startDate: '',
+      endDate: '',
       flockSource: '',
       flockDestination: '',
+      status: '',
       filter_by: '',
       sort_by: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      transferDate: 'transfer_date',
+      startDate: 'start_date',
+      endDate: 'end_date',
       flockSource: 'flock_source',
       flockDestination: 'flock_destination',
+      status: 'status',
       filter_by: 'filter_by',
       sort_by: 'sort_by',
     },
@@ -191,34 +193,36 @@ const TransferToLayingsTable = () => {
     TransferToLayingApi.getAllFetcher
   );
 
+  const filterCount = useMemo(() => {
+    let count = 0;
+
+    if (tableFilterState.startDate && tableFilterState.endDate) {
+      count += 1;
+    }
+
+    if (tableFilterState.flockSource.length > 0) {
+      count += 1;
+    }
+
+    if (tableFilterState.flockDestination.length > 0) {
+      count += 1;
+    }
+
+    if (tableFilterState.status.length > 0) {
+      count += 1;
+    }
+
+    return count;
+  }, [tableFilterState]);
+
+  const isFilterActive = filterCount > 0;
+
   // Modal hooks
+  const filterModal = useModal();
   const deleteModal = useModal();
   const approveModal = useModal();
   const rejectModal = useModal();
 
-  // Flocks data
-  const {
-    setInputValue: setFlockSourceInputValue,
-    options: flockSourceOptions,
-    isLoadingOptions: isLoadingFlockSourceOptions,
-    loadMore: loadMoreFlockSource,
-    hasMore: hasMoreFlockSource,
-  } = useSelect<Flock>(ProjectFlockApi.basePath, 'id', 'flock_name');
-
-  const {
-    setInputValue: setFlockDestinationInputValue,
-    options: flockDestinationOptions,
-    isLoadingOptions: isLoadingFlockDestinationOptions,
-    loadMore: loadMoreFlockDestination,
-    hasMore: hasMoreFlockDestination,
-  } = useSelect<Flock>(ProjectFlockApi.basePath, 'id', 'flock_name');
-
-  // Flocks value
-  const [selectedFlockSource, setSelectedFlockSource] =
-    useState<OptionType | null>(null);
-  const [selectedFlockDestination, setSelectedFlockDestination] =
-    useState<OptionType | null>(null);
-
   const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
     TransferToLaying | undefined
   >(undefined);
@@ -315,18 +319,7 @@ const TransferToLayingsTable = () => {
           latestApprovalStepName = 'Ditolak';
         }
 
-        return (
+        return <StatusBadge color={badgeColor} text={latestApprovalStepName} />;
-          <Badge
-            variant='soft'
-            className={{
-              badge: 'rounded-lg px-2 w-full flex flex-row justify-start',
-            }}
-            color={badgeColor}
-          >
-            <Icon icon='mdi:circle' width={12} height={12} color={badgeColor} />
-            {latestApprovalStepName}
-          </Badge>
-        );
       },
     },
     {
@@ -337,7 +330,7 @@ const TransferToLayingsTable = () => {
         const currentRowRelativeIndex =
           currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
 
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
 
         const approveClickHandler = () => {
           setSelectedTransferToLaying(props.row.original);
@@ -472,38 +465,25 @@ const TransferToLayingsTable = () => {
     setIsRejectLoading(false);
   };
 
-  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+  const filterSubmitHandler = (values: TransferToLayingFilter) => {
-    updateFilter('search', e.target.value);
+    updateFilter('startDate', values.startDate);
+    updateFilter('endDate', values.endDate);
+    updateFilter('flockSource', values.flockSource.join(','));
+    updateFilter('flockDestination', values.flockDestination.join(','));
+    updateFilter('status', values.status.join(','));
   };
 
-  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+  const filterResetHandler = () => {
-    const newVal = val as OptionType;
+    updateFilter('startDate', '');
-
+    updateFilter('endDate', '');
-    setPageSize(newVal.value as number);
+    updateFilter('flockSource', '');
+    updateFilter('flockDestination', '');
+    updateFilter('status', '');
   };
 
-  const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+  // TODO: add export to excel functionality
-    e
+  const exportToExcelHandler = () => {
-  ) => {
+    toast.error('Not implemented yet');
-    updateFilter('transferDate', e.target.value);
-  };
-
-  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedFlockSource(val as OptionType);
-    updateFilter(
-      'flockSource',
-      val ? ((val as OptionType).value as string) : ''
-    );
-  };
-
-  const flockDestinationChangeHandler = (
-    val: OptionType | OptionType[] | null
-  ) => {
-    setSelectedFlockDestination(val as OptionType);
-    updateFilter(
-      'flockDestination',
-      val ? ((val as OptionType).value as string) : ''
-    );
   };
 
   useEffect(() => {
@@ -518,111 +498,132 @@ const TransferToLayingsTable = () => {
 
   return (
     <>
-      <div className='w-full p-0'>
+      <div className='@container w-full'>
-        <div className='flex flex-col gap-2 mb-4'>
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
-          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
-            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+            <RequirePermission permissions='lti.production.transfer_to_laying.create'>
-              <RequirePermission permissions='lti.production.transfer_to_laying.create'>
+              <Button
-                <Button
+                href='/production/transfer-to-laying/add'
-                  href='/production/transfer-to-laying/add'
+                color='primary'
-                  variant='outline'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
-                  color='primary'
+              >
-                  className='w-full sm:w-fit'
+                <Icon icon='heroicons:plus' width={20} height={20} />
-                >
+                Add Transfer to Laying
-                  <Icon icon='ic:round-plus' width={24} height={24} />
+              </Button>
-                  Tambah
+            </RequirePermission>
-                </Button>
-              </RequirePermission>
 
-              {selectedRowIds.length > 0 && (
+            {selectedRowIds.length > 0 && (
-                <>
+              <>
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+                <hr className='w-px h-full border-none bg-base-content/10 hidden @sm:block' />
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={bulkApproveClickHandler}
-                      disabled={selectedRowIds.length === 0}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:check'
-                        width={24}
-                        height={24}
-                      />
-                      Approve
-                    </Button>
-                  </RequirePermission>
 
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
+                <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-                    <Button
+                  <Button
-                      variant='outline'
+                    variant='outline'
-                      color='error'
+                    color='none'
-                      onClick={bulkRejectClickHandler}
+                    onClick={bulkRejectClickHandler}
-                      disabled={selectedRowIds.length === 0}
+                    disabled={selectedRowIds.length === 0}
-                      className='w-full sm:w-fit'
+                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                    >
+                  >
-                      <Icon
+                    <Icon
-                        icon='material-symbols:close'
+                      icon='heroicons:x-mark'
-                        width={24}
+                      width={20}
-                        height={24}
+                      height={20}
-                      />
+                      className='text-error'
-                      Reject
+                    />
-                    </Button>
+                    Reject
-                  </RequirePermission>
+                  </Button>
-                </>
+                </RequirePermission>
-              )}
-            </div>
 
-            <DebouncedTextInput
+                <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-              name='search'
+                  <Button
-              placeholder='Cari TransferToLaying'
+                    variant='outline'
-              value={tableFilterState.search}
+                    color='none'
-              onChange={searchChangeHandler}
+                    onClick={bulkApproveClickHandler}
-              className={{
+                    disabled={selectedRowIds.length === 0}
-                wrapper: 'sm:max-w-3xs',
+                    className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-              }}
+                  >
-            />
+                    <Icon
+                      icon='heroicons:check'
+                      width={20}
+                      height={20}
+                      className='text-success'
+                    />
+                    Approve
+                  </Button>
+                </RequirePermission>
+              </>
+            )}
           </div>
 
-          <div className='grid grid-cols-12 justify-end gap-4'>
+          <div className='flex flex-row justify-center items-center gap-3'>
-            <DateInput
+            <Button
-              name='transfer_date'
+              variant='outline'
-              label='Tanggal Transfer'
+              color='none'
-              placeholder='Tanggal Transfer'
+              onClick={filterModal.openModal}
-              value={tableFilterState.transferDate}
+              className={cn(
-              onChange={transferDateChangeHandler}
+                '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 duration-1000',
-              className={{
+                {
-                wrapper: 'col-span-12 sm:col-span-3',
+                  'border-primary-gradient text-primary': isFilterActive,
-              }}
+                }
-            />
+              )}
+            >
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              Filter
+              {isFilterActive && (
+                <Badge
+                  className={{
+                    badge:
+                      'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
+                  }}
+                >
+                  {filterCount}
+                </Badge>
+              )}
+            </Button>
 
-            <SelectInput
+            <Dropdown
-              label='Flock Asal'
+              align='end'
-              options={flockSourceOptions}
+              direction='bottom'
-              isLoading={isLoadingFlockSourceOptions}
-              value={selectedFlockSource}
-              onChange={flockSourceChangeHandler}
-              onInputChange={setFlockSourceInputValue}
-              onMenuScrollToBottom={loadMoreFlockSource}
-              isClearable
               className={{
-                wrapper: 'col-span-12 sm:col-span-3',
+                content:
+                  'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
               }}
-            />
+              trigger={
+                <Button
+                  variant='outline'
+                  color='none'
+                  className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
+                >
+                  <div className='flex flex-row items-center gap-1.5'>
+                    <Icon
+                      icon='heroicons:cloud-arrow-down'
+                      width={20}
+                      height={20}
+                    />
 
-            <SelectInput
+                    <span>Export</span>
-              label='Flock Tujuan'
+
-              options={flockDestinationOptions}
+                    <div className='w-px self-stretch bg-base-content/10' />
-              isLoading={isLoadingFlockDestinationOptions}
+
-              value={selectedFlockDestination}
+                    <Icon
-              onChange={flockDestinationChangeHandler}
+                      icon='heroicons:chevron-down'
-              onInputChange={setFlockDestinationInputValue}
+                      width={14}
-              onMenuScrollToBottom={loadMoreFlockDestination}
+                      height={14}
-              isClearable
+                    />
-              className={{
+                  </div>
-                wrapper: 'col-span-12 sm:col-span-3',
+                </Button>
-              }}
+              }
-            />
+            >
+              <Button
+                variant='ghost'
+                color='none'
+                onClick={exportToExcelHandler}
+                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>
+            </Dropdown>
           </div>
         </div>
 
@@ -652,7 +653,7 @@ const TransferToLayingsTable = () => {
           enableRowSelection={tableEnableRowSelectionHandler}
           withCheckbox
           className={{
-            containerClassName: cn({
+            containerClassName: cn('p-3', {
               'w-full mb-20':
                 isResponseSuccess(transferToLayings) &&
                 transferToLayings?.data?.length === 0,
@@ -662,15 +663,23 @@ const TransferToLayingsTable = () => {
         />
       </div>
 
+      <TransferToLayingFilterModal
+        ref={filterModal.ref}
+        onSubmit={filterSubmitHandler}
+        onReset={filterResetHandler}
+      />
+
       <ConfirmationModal
         ref={deleteModal.ref}
+        iconPosition='left'
         type='error'
-        text={`Apakah anda yakin ingin menghapus data transfer ke laying ini?`}
+        text='Delete This Data?'
+        subtitleText='Are you sure you want to delete this data? '
         secondaryButton={{
-          text: 'Tidak',
+          text: 'Cancel',
         }}
         primaryButton={{
-          text: 'Ya',
+          text: 'Delete',
           color: 'error',
           isLoading: isDeleteLoading,
           onClick: confirmationModalDeleteClickHandler,
@@ -680,12 +689,14 @@ const TransferToLayingsTable = () => {
       <ConfirmationModalWithNotes
         ref={approveModal.ref}
         type='success'
-        text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        iconPosition='left'
+        text='Approve This Submission?'
+        subtitleText='Are you sure you want to approve this submission?'
         secondaryButton={{
-          text: 'Tidak',
+          text: 'Cancel',
         }}
         primaryButton={{
-          text: 'Ya',
+          text: 'Approve',
           color: 'success',
           isLoading: isApproveLoading,
           onClick: confirmationModalApproveClickHandler,
@@ -695,12 +706,14 @@ const TransferToLayingsTable = () => {
       <ConfirmationModalWithNotes
         ref={rejectModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        iconPosition='left'
+        text='Reject This Submission?'
+        subtitleText='Are you sure you want to reject this submission?'
         secondaryButton={{
-          text: 'Tidak',
+          text: 'Cancel',
         }}
         primaryButton={{
-          text: 'Ya',
+          text: 'Reject',
           color: 'error',
           isLoading: isRejectLoading,
           onClick: confirmationModalRejectClickHandler,