feat(FE): Add filter modal and skeleton components for ClosingsTable

2026-05-20 13:32:00 +00:00 · 2026-02-19 14:18:22 +07:00
parent 40b3d779bc
commit 4f018eb2b1
3 changed files with 296 additions and 100 deletions
@@ -1,6 +1,6 @@
 'use client';

-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState, useMemo } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';

@@ -8,14 +8,14 @@ import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Button from '@/components/Button';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
+import Modal, { useModal } from '@/components/Modal';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { useFormik } from 'formik';

 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -24,17 +24,11 @@ import { LocationApi } from '@/services/api/master-data';
 import { Location } from '@/types/api/master-data/location';
 import { ClosingApi } from '@/services/api/closing';
 import { Closing } from '@/types/api/closing';
-
-const PROJECT_STATUS_OPTIONS = [
-  {
-    value: 1,
-    label: 'Pengajuan',
-  },
-  {
-    value: 2,
-    label: 'Aktif',
-  },
-];
+import {
+  ClosingFilterSchema,
+  ClosingFilterType,
+} from '@/components/pages/closing/filter/ClosingFilter';
+import ClosingTableSkeleton from '@/components/pages/closing/skeleton/ClosingTableSkeleton';

 const RowOptionsMenu = ({
  type = 'dropdown',
@@ -63,6 +57,9 @@ const RowOptionsMenu = ({
 };

 const ClosingsTable = () => {
+  // ===== FILTER MODAL STATE =====
+  const filterModal = useModal();
+
  const {
    state: tableFilterState,
    updateFilter,
@@ -72,33 +69,64 @@ const ClosingsTable = () => {
  } = useTableFilter({
    initial: {
      search: '',
-      nameSort: '',
-      transactionDate: '',
-      realizationDate: '',
-      locationId: '',
-      projectStatus: '',
-      userId: '',
+      // nameSort: '',
+      // transactionDate: '',
+      // realizationDate: '',
+      location_id: '',
+      project_status: '',
+      // userId: '',
    },
    paramMap: {
      page: 'page',
      pageSize: 'limit',
-      nameSort: 'sort_name',
-      transactionDate: 'transaction_date',
-      realizationDate: 'realization_date',
-      locationId: 'location_id',
-      projectStatus: 'project_status',
-      userId: 'user_id',
+      // nameSort: 'sort_name',
+      // transactionDate: 'transaction_date',
+      // realizationDate: 'realization_date',
+      // locationId: 'location_id',
+      // projectStatus: 'project_status',
+      // userId: 'user_id',
+      search: 'search',
+      location_id: 'location_id',
+      project_status: 'project_status',
    },
  });

+  // ===== FORMIK SETUP =====
+  const formik = useFormik<ClosingFilterType>({
+    initialValues: {
+      location_id: null,
+      project_status: null,
+    },
+    validationSchema: ClosingFilterSchema,
+    onSubmit: (values, { setSubmitting }) => {
+      updateFilter('location_id', values.location_id || '');
+      updateFilter('project_status', values.project_status || '');
+      filterModal.closeModal();
+      setSubmitting(false);
+    },
+    onReset: () => {
+      updateFilter('location_id', '');
+      updateFilter('project_status', '');
+    },
+  });
+
+  // ===== DATA FETCHING =====
  const { data: closings, isLoading: isLoadingClosings } = useSWR(
    `${ClosingApi.basePath}${getTableFilterQueryString()}`,
    ClosingApi.getAllFetcher
  );

+  const data = useMemo(
+    () =>
+      isResponseSuccess(closings) ? (closings?.data as Closing[]) || [] : [],
+    [closings]
+  );
+
+  // ===== PAGINATION & STATE =====
  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});

+  // ===== TABLE COLUMNS =====
  const closingsColumns: ColumnDef<Closing>[] = [
    {
      header: 'No',
@@ -163,6 +191,7 @@ const ClosingsTable = () => {
    },
  ];

+  // ===== LOCATION OPTIONS =====
  const {
    setInputValue: setLocationInputValue,
    options: locationOptions,
@@ -170,45 +199,72 @@ const ClosingsTable = () => {
    loadMore: loadMoreLocations,
  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');

-  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
-    null
+  // ===== PROJECT STATUS OPTIONS =====
+  const projectStatusOptions = useMemo(
+    () => [
+      { value: '1', label: 'Pengajuan' },
+      { value: '2', label: 'Aktif' },
+    ],
+    []
  );

-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedLocation(val as OptionType);
-    updateFilter(
-      'locationId',
-      val ? ((val as OptionType).value as string) : ''
+  // ===== FILTER HELPERS =====
+  const locationIdValue = useMemo(() => {
+    if (!formik.values.location_id) return null;
+    return (
+      locationOptions.find(
+        (opt) => String(opt.value) === formik.values.location_id
+      ) || null
    );
-  };
+  }, [formik.values.location_id, locationOptions]);

-  const [selectedProjectStatus, setSelectedProjectStatus] =
-    useState<OptionType | null>(null);
-
-  const projectStatusChangeHandler = (
-    val: OptionType | OptionType[] | null
-  ) => {
-    setSelectedProjectStatus(val as OptionType);
-    updateFilter(
-      'projectStatus',
-      val ? ((val as OptionType).value as string) : ''
+  const projectStatusValue = useMemo(() => {
+    if (!formik.values.project_status) return null;
+    return (
+      projectStatusOptions.find(
+        (opt) => opt.value === formik.values.project_status
+      ) || null
    );
-  };
+  }, [formik.values.project_status, projectStatusOptions]);

+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+
+    if (tableFilterState.location_id) {
+      count += 1;
+    }
+
+    if (tableFilterState.project_status) {
+      count += 1;
+    }
+
+    return count;
+  }, [tableFilterState.location_id, tableFilterState.project_status]);
+
+  const hasFilters = activeFiltersCount > 0;
+
+  // ===== SEARCH CHANGE HANDLER =====
  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
    updateFilter('search', e.target.value);
  };

+  // ===== HANDLE FILTER MODAL OPEN =====
+  const handleFilterModalOpen = () => {
+    filterModal.openModal();
+    formik.validateForm();
+  };
+
  // track sorting
  useEffect(() => {
    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');

    if (!isNameSorted) {
-      updateFilter('nameSort', '');
+      // updateFilter('nameSort', '');
    } else {
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+      // updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
    }
-  }, [sorting, updateFilter]);
+  }, [sorting]);

  return (
    <>
@@ -223,62 +279,152 @@ const ClosingsTable = () => {
                onChange={searchChangeHandler}
                className={{ wrapper: 'sm:max-w-3xs' }}
              />
-            </div>

-            <div className='grid grid-cols-12 justify-end gap-2'>
-              <SelectInput
-                label='Lokasi'
-                options={locationOptions}
-                isLoading={isLoadingLocationOptions}
-                value={selectedLocation}
-                onChange={locationChangeHandler}
-                onInputChange={setLocationInputValue}
-                onMenuScrollToBottom={loadMoreLocations}
-                isClearable
-                className={{
-                  wrapper: 'col-span-12 sm:col-span-6',
-                }}
-              />
-
-              <SelectInput
-                label='Status Project'
-                placeholder='Pilih Status'
-                options={PROJECT_STATUS_OPTIONS}
-                value={selectedProjectStatus}
-                onChange={projectStatusChangeHandler}
-                isClearable
-                className={{
-                  wrapper: 'col-span-12 sm:col-span-6',
-                }}
-              />
+              <Button
+                variant='outline'
+                color='none'
+                onClick={handleFilterModalOpen}
+                className={cn(
+                  '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={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'>
+                    {activeFiltersCount}
+                  </span>
+                )}
+              </Button>
            </div>
          </div>
        </div>

-        <Table<Closing>
-          data={isResponseSuccess(closings) ? closings?.data : []}
-          columns={closingsColumns}
-          pageSize={tableFilterState.pageSize}
-          onPageSizeChange={setPageSize}
-          rowOptions={[10, 20, 50, 100]}
-          page={isResponseSuccess(closings) ? closings?.meta?.page : 0}
-          totalItems={
-            isResponseSuccess(closings) ? closings?.meta?.total_results : 0
-          }
-          onPageChange={setPage}
-          isLoading={isLoadingClosings}
-          sorting={sorting}
-          setSorting={setSorting}
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
-          className={{
-            containerClassName: cn({
-              'w-full mb-0':
-                isResponseSuccess(closings) && closings?.data?.length === 0,
-            }),
-          }}
-        />
+        {isLoadingClosings ? (
+          <div className='w-full flex flex-row justify-center items-center p-4'>
+            <span className='loading loading-spinner loading-xl' />
+          </div>
+        ) : data.length === 0 ? (
+          <ClosingTableSkeleton
+            columns={closingsColumns}
+            icon={
+              <Icon
+                icon='heroicons:chart-bar'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='Data Closing Belum Tersedia'
+            subtitle='Tidak ada data closing untuk saat ini.'
+          />
+        ) : (
+          <Table<Closing>
+            data={data}
+            columns={closingsColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={tableFilterState.page}
+            totalItems={
+              isResponseSuccess(closings) ? closings?.meta?.total_results : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingClosings}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-0': data.length === 0,
+              }),
+            }}
+          />
+        )}
      </div>
+
+      {/* Filter Modal */}
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        {/* Modal Header */}
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
+          <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
+          </div>
+          <Button
+            variant='link'
+            onClick={filterModal.closeModal}
+            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
+        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+          <div className='p-4 flex flex-col gap-1.5'>
+            <SelectInput
+              label='Lokasi'
+              placeholder='Pilih Lokasi'
+              options={locationOptions}
+              value={locationIdValue}
+              onChange={(val) => {
+                if (!Array.isArray(val)) {
+                  formik.setFieldValue(
+                    'location_id',
+                    val?.value ? String(val.value) : null
+                  );
+                }
+              }}
+              onInputChange={setLocationInputValue}
+              isLoading={isLoadingLocationOptions}
+              isClearable
+              onMenuScrollToBottom={loadMoreLocations}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInputRadio
+              label='Status Project'
+              placeholder='Pilih Status'
+              options={projectStatusOptions}
+              value={projectStatusValue}
+              onChange={(val) => {
+                if (!Array.isArray(val)) {
+                  formik.setFieldValue('project_status', val?.value || null);
+                }
+              }}
+              className={{ wrapper: 'w-full' }}
+              isClearable={true}
+            />
+          </div>
+
+          {/* Modal Footer */}
+          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
+            <Button
+              type='reset'
+              variant='soft'
+              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
+            >
+              Reset Filter
+            </Button>
+            <Button
+              type='submit'
+              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+              disabled={!formik.isValid || formik.isSubmitting}
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </form>
+      </Modal>
    </>
  );
 };
@@ -0,0 +1,13 @@
+import * as yup from 'yup';
+
+export type ClosingFilterType = {
+  location_id: string | null;
+  project_status: string | null;
+};
+
+export const ClosingFilterSchema = yup.object({
+  location_id: yup.string().nullable(),
+  project_status: yup.string().nullable(),
+});
+
+export type ClosingFilterValues = yup.InferType<typeof ClosingFilterSchema>;
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Closing } from '@/types/api/closing';
+import { ColumnDef } from '@tanstack/react-table';
+
+const ClosingTableSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ColumnDef<Closing>[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default ClosingTableSkeleton;