+
- (formik.values.flags || []).includes(opt.value)
+ value={productFlagMapping?.flags.find(
+ (opt) => opt.value === formik.values.flag
)}
+ onChange={(val) => {
+ const selectedFlag = String((val as OptionType)?.value ?? '');
+ formik.setFieldValue('flag', selectedFlag);
+ formik.setFieldValue('sub_flags', []);
+ }}
+ options={productFlagMapping?.flags ?? []}
+ isLoading={isLoadingConstants && !productFlagMapping}
+ isError={formik.touched.flag && Boolean(formik.errors.flag)}
+ errorMessage={formik.errors.flag as string}
+ isDisabled={type === 'detail'}
+ isClearable
+ />
+
+ {
const arr = Array.isArray(val) ? val : val ? [val] : [];
formik.setFieldValue(
- 'flags',
- arr.map((v) => (v as OptionType).value)
+ 'sub_flags',
+ arr.map((v) => String((v as OptionType).value))
);
}}
- options={PRODUCT_FLAG_OPTIONS}
- isError={formik.touched.flags && Boolean(formik.errors.flags)}
- errorMessage={formik.errors.flags as string}
- isDisabled={type === 'detail'}
+ options={subFlagOptions}
+ isLoading={isLoadingConstants && !productFlagMapping}
+ isError={
+ formik.touched.sub_flags && Boolean(formik.errors.sub_flags)
+ }
+ errorMessage={formik.errors.sub_flags as string}
+ isDisabled={type === 'detail' || !formik.values.flag}
+ closeMenuOnSelect={false}
isClearable
/>
diff --git a/src/components/pages/master-data/product/skeleton/ProductTableSkeleton.tsx b/src/components/pages/master-data/product/skeleton/ProductTableSkeleton.tsx
new file mode 100644
index 00000000..d0393421
--- /dev/null
+++ b/src/components/pages/master-data/product/skeleton/ProductTableSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Product } from '@/types/api/master-data/product';
+import { ColumnDef } from '@tanstack/react-table';
+
+const ProductTableSkeleton = ({
+ columns,
+ icon,
+ title = 'No Data Available',
+ subtitle = 'There is no product data displayed. Enter product data to get started.',
+}: {
+ columns: ColumnDef
[];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default ProductTableSkeleton;
diff --git a/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx b/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx
index a8df6ae8..0ff8b594 100644
--- a/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx
+++ b/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx
@@ -1,92 +1,121 @@
'use client';
-import Button from '@/components/Button';
-import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
-import { ProductionStandard } from '@/types/api/master-data/production-standard';
-import { Icon } from '@iconify/react';
+import { useMemo, useState } from 'react';
import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import RequirePermission from '@/components/helper/RequirePermission';
+import PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
+import ProductionStandardTableSkeleton from '@/components/pages/master-data/production-standard/skeleton/ProductionStandardTableSkeleton';
+
+import { ProductionStandard } from '@/types/api/master-data/production-standard';
import { ProductionStandardApi } from '@/services/api/master-data';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
-import { CellContext } from '@tanstack/react-table';
-import { useModal } from '@/components/Modal';
-import { useState } from 'react';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import toast from 'react-hot-toast';
-import { cn } from '@/lib/helper';
-import RequirePermission from '@/components/helper/RequirePermission';
const RowOptionsMenu = ({
- type = 'dropdown',
+ popoverPosition = 'bottom',
props,
deleteClickHandler,
}: {
- type: 'dropdown' | 'collapse';
+ popoverPosition: 'bottom' | 'top';
props: CellContext;
deleteClickHandler: () => void;
}) => {
+ const popoverId = `production-standard#${props.row.original.id}`;
+ const popoverAnchorName = `--anchor-production-standard#${props.row.original.id}`;
+
+ const closePopover = () => {
+ document.getElementById(popoverId)?.hidePopover();
+ };
+
return (
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {
+ deleteClickHandler();
+ closePopover();
+ }}
+ variant='ghost'
+ color='none'
+ className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
+ >
+
+
+
+
+
([]);
+ const {
+ data: productionStandards,
+ isLoading,
+ mutate: refreshProductionStandards,
+ } = useSWR(
+ `${ProductionStandardApi.basePath}`,
+ ProductionStandardApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
const [selectedProductionStandard, setSelectedProductionStandard] = useState<
ProductionStandard | undefined
>(undefined);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
- const { data: productionStandards, mutate: refreshProductionStandards } =
- useSWR(
- `${ProductionStandardApi.basePath}`,
- ProductionStandardApi.getAllFetcher
- );
-
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -107,112 +136,120 @@ const ProductionStandardTable = () => {
setIsDeleteLoading(false);
};
+ const productionStandardColumns: ColumnDef[] = useMemo(
+ () => [
+ {
+ header: 'No',
+ cell: (props) => props.row.index + 1,
+ },
+ {
+ accessorKey: 'name',
+ header: 'Nama',
+ },
+ {
+ accessorFn: (row) => row.project_category ?? '-',
+ header: 'Kategori',
+ },
+ {
+ header: 'Aksi',
+ cell: (props: CellContext) => {
+ const currentPageSize =
+ props.table.getPaginationRowModel().rows.length;
+ const currentPageRows = props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+ const deleteClickHandler = () => {
+ setSelectedProductionStandard(props.row.original);
+ deleteModal.openModal();
+ };
+
+ return (
+
-
-
-
-
-
+
+ {/* Header Section */}
+
+ {/* Action Buttons */}
+
+
+
+
+
+
-
-
- data={
- isResponseSuccess(productionStandards)
- ? productionStandards.data
- : []
- }
- columns={[
- {
- header: 'No',
- accessorFn: (row, index) => index + 1,
- },
- {
- header: 'Nama',
- accessorKey: 'name',
- },
- {
- header: 'Kategori',
- accessorFn: (row) => row.project_category,
- },
- {
- header: 'Aksi',
- cell: (props) => {
- const currentPageSize =
- props.table.getPaginationRowModel().rows.length;
- const currentPageRows =
- props.table.getPaginationRowModel().flatRows;
- const currentRowRelativeIndex =
- currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
- const isLast2Rows =
- currentRowRelativeIndex > currentPageSize - 2;
-
- const deleteClickHandler = () => {
- setSelectedProductionStandard(props.row.original);
- deleteModal.openModal();
- };
-
- return (
- <>
- {currentPageSize > 2 && (
-
-
- )}
-
- {currentPageSize <= 2 && (
-
-
- )}
-
- );
- },
- },
- ]}
- className={{
- headerColumnClassName: cn(
- TABLE_DEFAULT_STYLING.headerColumnClassName,
- 'last:flex last:flex-row last:justify-end'
- ),
- bodyColumnClassName: cn(
- TABLE_DEFAULT_STYLING.bodyColumnClassName,
- 'last:flex last:flex-row last:justify-end'
- ),
- }}
- />
-
+ {/* Table Section */}
+
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(productionStandards) ||
+ productionStandards.data?.length === 0 ? (
+
+ ) : (
+
+ data={productionStandards.data}
+ columns={productionStandardColumns}
+ isLoading={false}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: 'p-3 mb-0',
+ headerColumnClassName: 'text-nowrap',
+ }}
+ />
+ )}
+
-
-
+
+
);
};
diff --git a/src/components/pages/master-data/production-standard/skeleton/ProductionStandardTableSkeleton.tsx b/src/components/pages/master-data/production-standard/skeleton/ProductionStandardTableSkeleton.tsx
new file mode 100644
index 00000000..590b4479
--- /dev/null
+++ b/src/components/pages/master-data/production-standard/skeleton/ProductionStandardTableSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { ProductionStandard } from '@/types/api/master-data/production-standard';
+import { ColumnDef } from '@tanstack/react-table';
+
+const ProductionStandardTableSkeleton = ({
+ columns,
+ icon,
+ title = 'No Data Available',
+ subtitle = 'There is no production standard data displayed. Enter production standard data to get started.',
+}: {
+ columns: ColumnDef
[];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default ProductionStandardTableSkeleton;
diff --git a/src/components/pages/master-data/supplier/SupplierTable.tsx b/src/components/pages/master-data/supplier/SupplierTable.tsx
index 2620c9e6..2b6cb227 100644
--- a/src/components/pages/master-data/supplier/SupplierTable.tsx
+++ b/src/components/pages/master-data/supplier/SupplierTable.tsx
@@ -1,87 +1,102 @@
'use client';
-import Button from '@/components/Button';
+import { ChangeEventHandler, useMemo, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import Button from '@/components/Button';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import Table from '@/components/Table';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
import RequirePermission from '@/components/helper/RequirePermission';
-import { ROWS_OPTIONS } from '@/config/constant';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
-import { SupplierApi } from '@/services/api/master-data';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { Supplier } from '@/types/api/master-data/supplier';
-import { Icon } from '@iconify/react';
-import { CellContext, ColumnDef } from '@tanstack/react-table';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import useSWR from 'swr';
+import PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
+import SupplierTableSkeleton from '@/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton';
-const RowOptions = ({
- type = 'dropdown',
+import { Supplier } from '@/types/api/master-data/supplier';
+import { SupplierApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+
+const RowOptionsMenu = ({
+ popoverPosition = 'bottom',
props,
deleteClickHandler,
}: {
- type: 'dropdown' | 'collapse';
+ popoverPosition: 'bottom' | 'top';
props: CellContext;
deleteClickHandler: () => void;
}) => {
+ const popoverId = `supplier#${props.row.original.id}`;
+ const popoverAnchorName = `--anchor-supplier#${props.row.original.id}`;
+
+ const closePopover = () => {
+ document.getElementById(popoverId)?.hidePopover();
+ };
+
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ deleteClickHandler();
+ closePopover();
+ }}
+ variant='ghost'
+ color='none'
+ className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
+ >
+
+
+
+
+
([]);
+
const {
data: suppliers,
isLoading,
@@ -111,97 +128,16 @@ const SuppliersTable = () => {
SupplierApi.getAllFetcher
);
- // State
const deleteModal = useModal();
const [selectedSupplier, setSelectedSupplier] = useState<
Supplier | undefined
>(undefined);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
- // Columns Definition
- const suppliersColumns: ColumnDef[] = [
- {
- header: '#',
- cell: (props) =>
- tableFilterState.pageSize * (tableFilterState.page - 1) +
- props.row.index +
- 1,
- },
- {
- accessorKey: 'name',
- header: 'Nama',
- },
- {
- accessorKey: 'alias',
- header: 'Alias',
- },
- {
- accessorKey: 'pic',
- header: 'Nama PIC',
- },
- {
- accessorKey: 'category',
- header: 'Kategori',
- },
- {
- accessorKey: 'type',
- header: 'Tipe',
- },
- {
- accessorKey: 'phone',
- header: 'No. Telp',
- },
- {
- accessorKey: 'email',
- header: 'Email',
- },
- {
- accessorKey: 'address',
- header: 'Alamat',
- },
- {
- header: 'Aksi',
- cell: (props) => {
- const currentPageSize = props.table.getPaginationRowModel().rows.length;
- const currentPageRows = props.table.getPaginationRowModel().flatRows;
- const currentRowRelativeIndex =
- currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+ const searchChangeHandler: ChangeEventHandler = (e) => {
+ updateFilter('search', e.target.value);
+ };
- const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
- const deleteClickHandler = () => {
- setSelectedSupplier(props.row.original);
- deleteModal.openModal();
- };
-
- return (
- <>
- {currentPageSize > 2 && (
-
-
- )}
-
- {currentPageSize <= 2 && (
-
-
- )}
-
- );
- },
- },
- ];
-
- // Handler
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -221,82 +157,161 @@ const SuppliersTable = () => {
toast.success('Successfully delete Supplier!');
setIsDeleteLoading(false);
};
- const searchChangeHandler = (e: React.ChangeEvent) => {
- updateFilter('search', e.target.value);
- };
- const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
- const newVal = val as OptionType;
- setPageSize(newVal.value as number);
- };
+
+ const suppliersColumns: ColumnDef[] = useMemo(
+ () => [
+ {
+ header: 'No',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorKey: 'name',
+ header: 'Nama',
+ },
+ {
+ accessorKey: 'alias',
+ header: 'Alias',
+ },
+ {
+ accessorKey: 'pic',
+ header: 'Nama PIC',
+ },
+ {
+ accessorKey: 'category',
+ header: 'Kategori',
+ },
+ {
+ accessorKey: 'type',
+ header: 'Tipe',
+ },
+ {
+ accessorKey: 'phone',
+ header: 'No. Telp',
+ },
+ {
+ accessorKey: 'email',
+ header: 'Email',
+ },
+ {
+ accessorKey: 'address',
+ header: 'Alamat',
+ },
+ {
+ header: 'Aksi',
+ cell: (props: CellContext) => {
+ const currentPageSize =
+ props.table.getPaginationRowModel().rows.length;
+ const currentPageRows = props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+ const deleteClickHandler = () => {
+ setSelectedSupplier(props.row.original);
+ deleteModal.openModal();
+ };
+
+ return (
+
-
-
-
-
-
-
-
-
+
+ {/* Header Section */}
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+ {/* Search */}
+
-
-
-
-
- data={isResponseSuccess(suppliers) ? suppliers?.data : []}
- columns={suppliersColumns}
- pageSize={tableFilterState.pageSize}
- page={isResponseSuccess(suppliers) ? suppliers?.meta?.page : 0}
- totalItems={
- isResponseSuccess(suppliers) ? suppliers?.meta?.total_results : 0
- }
- onPageChange={setPage}
- isLoading={isLoading}
- className={{
- containerClassName: cn({
- 'mb-20':
- isResponseSuccess(suppliers) && suppliers?.data?.length === 0,
- }),
- tableWrapperClassName: 'overflow-x-auto min-h-full!',
- tableClassName: 'font-inter w-full table-auto min-h-full!',
- headerRowClassName: 'border-b border-b-gray-200',
- headerColumnClassName:
- 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
- bodyRowClassName: 'border-b border-b-gray-200',
- bodyColumnClassName:
- 'px-6 py-3 last:flex last:flex-row last:justify-end',
- }}
- />
+ {/* Table Section */}
+
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(suppliers) || suppliers.data?.length === 0 ? (
+
+
+ ) : (
+
+ data={suppliers?.data}
+ columns={suppliersColumns}
+ pageSize={tableFilterState.pageSize}
+ page={suppliers?.meta?.page ?? 0}
+ totalItems={suppliers?.meta?.total_results ?? 0}
+ onPageChange={setPage}
+ onPageSizeChange={setPageSize}
+ isLoading={false}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: 'p-3 mb-0',
+ headerColumnClassName: 'text-nowrap',
+ }}
+ />
+ )}
+
+
[];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default SupplierTableSkeleton;
diff --git a/src/components/pages/master-data/uom/UomsTable.tsx b/src/components/pages/master-data/uom/UomsTable.tsx
index 51e95661..aeaae276 100644
--- a/src/components/pages/master-data/uom/UomsTable.tsx
+++ b/src/components/pages/master-data/uom/UomsTable.tsx
@@ -1,6 +1,6 @@
'use client';
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useMemo, useState } from 'react';
import useSWR from 'swr';
import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
import toast from 'react-hot-toast';
@@ -11,71 +11,92 @@ 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 } 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 PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
+import UomTableSkeleton from '@/components/pages/master-data/uom/skeleton/UomTableSkeleton';
import { Uom } from '@/types/api/master-data/uom';
import { UomApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { ROWS_OPTIONS } from '@/config/constant';
const RowOptionsMenu = ({
- type = 'dropdown',
+ popoverPosition = 'bottom',
props,
deleteClickHandler,
}: {
- type: 'dropdown' | 'collapse';
+ popoverPosition: 'bottom' | 'top';
props: CellContext;
deleteClickHandler: () => void;
}) => {
+ const popoverId = `uom#${props.row.original.id}`;
+ const popoverAnchorName = `--anchor-uom#${props.row.original.id}`;
+
+ const closePopover = () => {
+ document.getElementById(popoverId)?.hidePopover();
+ };
+
return (
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {
+ deleteClickHandler();
+ closePopover();
+ }}
+ variant='ghost'
+ color='none'
+ className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
+ >
+
+
+
+
+
([]);
+
const {
data: uoms,
isLoading,
@@ -101,65 +129,12 @@ const UomsTable = () => {
);
const deleteModal = useModal();
-
const [selectedUom, setSelectedUom] = useState(undefined);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
- const [sorting, setSorting] = useState([]);
-
- const uomsColumns: ColumnDef[] = [
- {
- header: '#',
- cell: (props) =>
- tableFilterState.pageSize * (tableFilterState.page - 1) +
- props.row.index +
- 1,
- },
- {
- accessorKey: 'name',
- header: 'Nama',
- },
- {
- header: 'Aksi',
- cell: (props) => {
- const currentPageSize = props.table.getPaginationRowModel().rows.length;
- const currentPageRows = props.table.getPaginationRowModel().flatRows;
- const currentRowRelativeIndex =
- currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
- const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
- const deleteClickHandler = () => {
- setSelectedUom(props.row.original);
- deleteModal.openModal();
- };
-
- return (
- <>
- {currentPageSize > 2 && (
-
-
- )}
-
- {currentPageSize <= 2 && (
-
-
- )}
-
- );
- },
- },
- ];
+ const searchChangeHandler: ChangeEventHandler = (e) => {
+ updateFilter('search', e.target.value);
+ };
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -179,93 +154,130 @@ const UomsTable = () => {
setIsDeleteLoading(false);
};
- const searchChangeHandler: ChangeEventHandler = (e) => {
- updateFilter('search', e.target.value);
- };
+ const uomsColumns: ColumnDef[] = useMemo(
+ () => [
+ {
+ header: 'No',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorKey: 'name',
+ header: 'Nama',
+ },
+ {
+ header: 'Aksi',
+ cell: (props: CellContext) => {
+ const currentPageSize =
+ props.table.getPaginationRowModel().rows.length;
+ const currentPageRows = props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
- const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
- const newVal = val as OptionType;
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
- setPageSize(newVal.value as number);
- };
+ const deleteClickHandler = () => {
+ setSelectedUom(props.row.original);
+ deleteModal.openModal();
+ };
- // track sorting
- useEffect(() => {
- const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
-
- if (!isNameSorted) {
- updateFilter('nameSort', '');
- } else {
- updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
- }
- }, [sorting, updateFilter]);
+ return (
+
-
-
-
-
-
-
-
-
+
+ {/* Header Section */}
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+ {/* Search */}
+
-
-
-
-
- data={isResponseSuccess(uoms) ? uoms?.data : []}
- columns={uomsColumns}
- pageSize={tableFilterState.pageSize}
- page={isResponseSuccess(uoms) ? uoms?.meta?.page : 0}
- totalItems={isResponseSuccess(uoms) ? uoms?.meta?.total_results : 0}
- onPageChange={setPage}
- isLoading={isLoading}
- sorting={sorting}
- setSorting={setSorting}
- className={{
- containerClassName: cn({
- 'mb-20': isResponseSuccess(uoms) && uoms?.data?.length === 0,
- }),
- tableWrapperClassName: 'overflow-x-auto min-h-full!',
- tableClassName: 'font-inter w-full table-auto min-h-full!',
- headerRowClassName: 'border-b border-b-gray-200',
- headerColumnClassName:
- 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
- bodyRowClassName: 'border-b border-b-gray-200',
- bodyColumnClassName:
- 'px-6 py-3 last:flex last:flex-row last:justify-end',
- }}
- />
+ {/* Table Section */}
+
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(uoms) || uoms.data?.length === 0 ? (
+
+
+ ) : (
+
+ data={uoms?.data}
+ columns={uomsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={uoms?.meta?.page ?? 0}
+ totalItems={uoms?.meta?.total_results ?? 0}
+ onPageChange={setPage}
+ onPageSizeChange={setPageSize}
+ isLoading={false}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: 'p-3 mb-0',
+ headerColumnClassName: 'text-nowrap',
+ }}
+ />
+ )}
+ [];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default UomTableSkeleton;
diff --git a/src/components/pages/master-data/warehouse/WarehousesTable.tsx b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
index 62c39574..c800e8eb 100644
--- a/src/components/pages/master-data/warehouse/WarehousesTable.tsx
+++ b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
@@ -1,13 +1,8 @@
'use client';
-import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useMemo, useState } from 'react';
import useSWR from 'swr';
-import {
- CellContext,
- ColumnDef,
- ColumnSort,
- SortingState,
-} from '@tanstack/react-table';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
import toast from 'react-hot-toast';
import { Icon } from '@iconify/react';
@@ -16,71 +11,92 @@ 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 } 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 PopoverButton from '@/components/popover/PopoverButton';
+import PopoverContent from '@/components/popover/PopoverContent';
+import WarehouseTableSkeleton from '@/components/pages/master-data/warehouse/skeleton/WarehouseTableSkeleton';
import { Warehouse } from '@/types/api/master-data/warehouse';
import { WarehouseApi } from '@/services/api/master-data';
-import { cn } from '@/lib/helper';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { ROWS_OPTIONS } from '@/config/constant';
const RowOptionsMenu = ({
- type = 'dropdown',
+ popoverPosition = 'bottom',
props,
deleteClickHandler,
}: {
- type: 'dropdown' | 'collapse';
+ popoverPosition: 'bottom' | 'top';
props: CellContext;
deleteClickHandler: () => void;
}) => {
+ const popoverId = `warehouse#${props.row.original.id}`;
+ const popoverAnchorName = `--anchor-warehouse#${props.row.original.id}`;
+
+ const closePopover = () => {
+ document.getElementById(popoverId)?.hidePopover();
+ };
+
return (
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {
+ deleteClickHandler();
+ closePopover();
+ }}
+ variant='ghost'
+ color='none'
+ className='p-3 justify-start text-sm font-semibold w-full text-error hover:text-error'
+ >
+
+
+
+
+
([]);
+
const {
data: warehouses,
isLoading,
@@ -121,101 +129,14 @@ const WarehousesTable = () => {
);
const deleteModal = useModal();
-
const [selectedWarehouse, setSelectedWarehouse] = useState<
Warehouse | undefined
>(undefined);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
- const [sorting, setSorting] = useState([]);
-
- const warehousesColumns: ColumnDef[] = [
- {
- header: '#',
- cell: (props) =>
- tableFilterState.pageSize * (tableFilterState.page - 1) +
- props.row.index +
- 1,
- },
- {
- accessorKey: 'name',
- header: 'Nama',
- },
- {
- accessorKey: 'type',
- header: 'Tipe',
- },
- {
- accessorKey: 'area',
- header: 'Area',
- cell: (props) => props.row.original.area.name,
- },
- {
- accessorKey: 'location',
- header: 'Lokasi',
- cell: (props) => {
- if (
- props.row.original.type === 'LOKASI' ||
- props.row.original.type === 'KANDANG'
- ) {
- return props.row.original.location.name;
- } else {
- return '-';
- }
- },
- },
- {
- accessorKey: 'kandang',
- header: 'Kandang',
- cell: (props) => {
- if (props.row.original.type === 'KANDANG') {
- return props.row.original.kandang.name;
- } else {
- return '-';
- }
- },
- },
- {
- header: 'Aksi',
- cell: (props) => {
- const currentPageSize = props.table.getPaginationRowModel().rows.length;
- const currentPageRows = props.table.getPaginationRowModel().flatRows;
- const currentRowRelativeIndex =
- currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
- const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
- const deleteClickHandler = () => {
- setSelectedWarehouse(props.row.original);
- deleteModal.openModal();
- };
-
- return (
- <>
- {currentPageSize > 2 && (
-
-
- )}
-
- {currentPageSize <= 2 && (
-
-
- )}
-
- );
- },
- },
- ];
+ const searchChangeHandler: ChangeEventHandler = (e) => {
+ updateFilter('search', e.target.value);
+ };
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -237,118 +158,162 @@ const WarehousesTable = () => {
setIsDeleteLoading(false);
};
- const searchChangeHandler: ChangeEventHandler = (e) => {
- updateFilter('search', e.target.value);
- };
+ const warehousesColumns: ColumnDef[] = useMemo(
+ () => [
+ {
+ header: 'No',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorKey: 'name',
+ header: 'Nama',
+ },
+ {
+ accessorKey: 'type',
+ header: 'Tipe',
+ },
+ {
+ accessorFn: (row) => row.area?.name ?? '-',
+ header: 'Area',
+ },
+ {
+ accessorKey: 'location',
+ header: 'Lokasi',
+ cell: (props) => {
+ if (
+ props.row.original.type === 'LOKASI' ||
+ props.row.original.type === 'KANDANG'
+ ) {
+ return props.row.original.location?.name ?? '-';
+ }
+ return '-';
+ },
+ },
+ {
+ accessorKey: 'kandang',
+ header: 'Kandang',
+ cell: (props) => {
+ if (props.row.original.type === 'KANDANG') {
+ return props.row.original.kandang?.name ?? '-';
+ }
+ return '-';
+ },
+ },
+ {
+ header: 'Aksi',
+ cell: (props: CellContext) => {
+ const currentPageSize =
+ props.table.getPaginationRowModel().rows.length;
+ const currentPageRows = props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
- const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
- const newVal = val as OptionType;
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
- setPageSize(newVal.value as number);
- };
+ const deleteClickHandler = () => {
+ setSelectedWarehouse(props.row.original);
+ deleteModal.openModal();
+ };
- const updateSortingFilter = useCallback(
- (
- sortName: Exclude,
- sortFilter: ColumnSort | undefined
- ) => {
- if (!sortFilter) {
- updateFilter(sortName, '');
- } else {
- updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
- }
- },
- [updateFilter]
+ return (
+
-
-
-
-
-
-
-
-
+
+ {/* Header Section */}
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+ {/* Search */}
+
-
-
-
-
- data={isResponseSuccess(warehouses) ? warehouses?.data : []}
- columns={warehousesColumns}
- pageSize={tableFilterState.pageSize}
- page={isResponseSuccess(warehouses) ? warehouses?.meta?.page : 0}
- totalItems={
- isResponseSuccess(warehouses) ? warehouses?.meta?.total_results : 0
- }
- onPageChange={setPage}
- isLoading={isLoading}
- sorting={sorting}
- setSorting={setSorting}
- className={{
- containerClassName: cn({
- 'mb-20':
- isResponseSuccess(warehouses) && warehouses?.data?.length === 0,
- }),
- tableWrapperClassName: 'overflow-x-auto min-h-full!',
- tableClassName: 'font-inter w-full table-auto min-h-full!',
- headerRowClassName: 'border-b border-b-gray-200',
- headerColumnClassName:
- 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
- bodyRowClassName: 'border-b border-b-gray-200',
- bodyColumnClassName:
- 'px-6 py-3 last:flex last:flex-row last:justify-end',
- }}
- />
+ {/* Table Section */}
+
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(warehouses) ||
+ warehouses.data?.length === 0 ? (
+
+
+ ) : (
+
+ data={warehouses?.data}
+ columns={warehousesColumns}
+ pageSize={tableFilterState.pageSize}
+ page={warehouses?.meta?.page ?? 0}
+ totalItems={warehouses?.meta?.total_results ?? 0}
+ onPageChange={setPage}
+ onPageSizeChange={setPageSize}
+ isLoading={false}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: 'p-3 mb-0',
+ headerColumnClassName: 'text-nowrap',
+ }}
+ />
+ )}
+ [];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default WarehouseTableSkeleton;
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 3b134133..14378852 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -32,6 +32,7 @@ import StatusBadge from '@/components/helper/StatusBadge';
import PopoverButton from '@/components/popover/PopoverButton';
import PopoverContent from '@/components/popover/PopoverContent';
import ProjectFlockConfirmationModal from './ProjectFlockConfirmationModal';
+import ProjectFlockTableSkeleton from '@/components/pages/production/project-flock/skeleton/ProjectFlockTableSkeleton';
import { useProjectFlockStore } from '@/stores/production/project-flock/project-flock.store';
import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
import { useChickinStore } from '@/stores/production/chickin/chickin.store';
@@ -997,46 +998,69 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
-
- data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
- columns={columns}
- pageSize={tableFilterState.pageSize}
- page={
- isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
- }
- totalItems={
- isResponseSuccess(projectFlocks)
- ? projectFlocks?.meta?.total_results
- : 0
- }
- onPageChange={(page) => {
- setPage(page);
- }}
- onPageSizeChange={(pageSize) => {
- setPageSize(pageSize);
- }}
- isLoading={isLoading}
- sorting={sorting}
- setSorting={setSorting}
- rowSelection={rowSelection}
- setRowSelection={setRowSelection}
- enableRowSelection={(row) => {
- const projectFlock = row.original;
- return (
- projectFlock.approval?.step_number === 1 &&
- projectFlock.approval?.action !== 'REJECTED'
- );
- }}
- withCheckbox
- className={{
- containerClassName: cn('p-3', {
- 'w-full mb-20':
- isResponseSuccess(projectFlocks) &&
- projectFlocks?.data?.length === 0,
- }),
- headerColumnClassName: 'text-nowrap',
- }}
- />
+
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(projectFlocks) ||
+ projectFlocks.data?.length === 0 ? (
+
+ ) : (
+
+ data={
+ isResponseSuccess(projectFlocks) ? projectFlocks?.data : []
+ }
+ columns={columns}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(projectFlocks)
+ ? projectFlocks?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(projectFlocks)
+ ? projectFlocks?.meta?.total_results
+ : 0
+ }
+ onPageChange={(page) => {
+ setPage(page);
+ }}
+ onPageSizeChange={(pageSize) => {
+ setPageSize(pageSize);
+ }}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ enableRowSelection={(row) => {
+ const projectFlock = row.original;
+ return (
+ projectFlock.approval?.step_number === 1 &&
+ projectFlock.approval?.action !== 'REJECTED'
+ );
+ }}
+ withCheckbox
+ className={{
+ containerClassName: cn('p-3 mb-0'),
+ headerColumnClassName: 'text-nowrap',
+ }}
+ />
+ )}
+
diff --git a/src/components/pages/production/project-flock/skeleton/ProjectFlockTableSkeleton.tsx b/src/components/pages/production/project-flock/skeleton/ProjectFlockTableSkeleton.tsx
new file mode 100644
index 00000000..9fe74cb8
--- /dev/null
+++ b/src/components/pages/production/project-flock/skeleton/ProjectFlockTableSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ColumnDef } from '@tanstack/react-table';
+
+const ProjectFlockTableSkeleton = ({
+ columns,
+ icon,
+ title = 'No Data Available',
+ subtitle = 'There is no project flock data displayed. Enter project flock data to get started.',
+}: {
+ columns: ColumnDef
[];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default ProjectFlockTableSkeleton;
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
index 06852fe1..0b8a299f 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -22,6 +22,7 @@ import Dropdown from '@/components/Dropdown';
import StatusBadge from '@/components/helper/StatusBadge';
import TransferToLayingFilterModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFilterModal';
import TransferToLayingConfirmationModal from '@/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal';
+import TransferToLayingTableSkeleton from '@/components/pages/production/transfer-to-laying/skeleton/TransferToLayingTableSkeleton';
import {
TransferToLaying,
@@ -596,40 +597,61 @@ const TransferToLayingsTable = () => {
- data={
- isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
- }
- columns={transferToLayingsColumns}
- pageSize={tableFilterState.pageSize}
- page={
- isResponseSuccess(transferToLayings)
- ? transferToLayings?.meta?.page
- : 0
- }
- totalItems={
- isResponseSuccess(transferToLayings)
- ? transferToLayings?.meta?.total_results
- : 0
- }
- onPageChange={setPage}
- onPageSizeChange={setPageSize}
- isLoading={isLoading}
- sorting={sorting}
- setSorting={setSorting}
- rowSelection={rowSelection}
- setRowSelection={setRowSelection}
- enableRowSelection={tableEnableRowSelectionHandler}
- withCheckbox
- className={{
- containerClassName: cn('p-3', {
- 'w-full mb-20':
- isResponseSuccess(transferToLayings) &&
- transferToLayings?.data?.length === 0,
- }),
- headerColumnClassName: 'text-nowrap',
- }}
- />
+
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(transferToLayings) ||
+ transferToLayings.data?.length === 0 ? (
+
+
+ ) : (
+
+ data={
+ isResponseSuccess(transferToLayings)
+ ? transferToLayings?.data
+ : []
+ }
+ columns={transferToLayingsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(transferToLayings)
+ ? transferToLayings?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(transferToLayings)
+ ? transferToLayings?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ onPageSizeChange={setPageSize}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ enableRowSelection={tableEnableRowSelectionHandler}
+ withCheckbox
+ className={{
+ containerClassName: cn('p-3 mb-0'),
+ headerColumnClassName: 'text-nowrap',
+ }}
+ />
+ )}
+ [];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default TransferToLayingTableSkeleton;
diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index c420ec6c..9e543902 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -53,7 +53,7 @@ import { useFormik } from 'formik';
import {
UniformityTableFilterSchema,
type UniformityTableFilterValues,
-} from '@/components/pages/production/uniformity/UniformityTableFilter.schema';
+} from '@/components/pages/production/uniformity/filter/UniformityTableFilter';
import AlertErrorList from '@/components/helper/form/FormErrors';
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
@@ -1010,35 +1010,55 @@ const UniformityTable = () => {
-
- data={isResponseSuccess(uniformities) ? uniformities?.data : []}
- columns={uniformityColumns}
- pageSize={tableFilterState.pageSize}
- page={isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0}
- totalItems={
- isResponseSuccess(uniformities)
- ? uniformities?.meta?.total_results
- : 0
- }
- onPageChange={setPage}
- isLoading={isLoading}
- sorting={sorting}
- setSorting={setSorting}
- rowSelection={rowSelection}
- setRowSelection={setRowSelection}
- className={{
- containerClassName: cn('p-3 pt-0', {
- 'mb-20':
- isResponseSuccess(uniformities) &&
- uniformities?.data?.length === 0,
- }),
- headerColumnClassName:
- 'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
- bodyColumnClassName:
- 'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
- }}
- emptyContent={
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(uniformities) ||
+ uniformities.data?.length === 0 ? (
+
+
+ ) : (
+
+ data={isResponseSuccess(uniformities) ? uniformities?.data : []}
+ columns={uniformityColumns}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(uniformities) ? uniformities?.meta?.page : 0
+ }
+ totalItems={
+ isResponseSuccess(uniformities)
+ ? uniformities?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ className={{
+ containerClassName: cn('p-3 pt-0 mb-0'),
+ headerColumnClassName:
+ 'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
+ bodyColumnClassName:
+ 'first:pl-3 first:pr-0 xl:first:pl-3 py-3 text-nowrap',
+ }}
+ />
+ )}
+ {
+const UniformityTableSkeleton = ({
+ columns,
+ icon,
+ title = 'No Data Available',
+ subtitle = 'There is no uniformity data displayed. Enter uniformity check data to get started.',
+}: {
+ columns: ColumnDef[];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
return (
-
- {/* Document icon */}
-
-
+
+
+
+
-
- {/* Empty state text */}
-
- No Data Available
-
-
- There is no uniformity data displayed. Enter uniformity check data to
- get started.
-
);
};
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index 87992ad2..e84d56d3 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -17,6 +17,7 @@ import PopoverContent from '@/components/popover/PopoverContent';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import RequirePermission from '@/components/helper/RequirePermission';
import StatusBadge from '@/components/helper/StatusBadge';
+import PurchaseTableSkeleton from '@/components/pages/purchase/skeleton/PurchaseTableSkeleton';
import { cn, formatDate } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
@@ -441,36 +442,55 @@ const PurchaseTable = () => {
{/* Table Section */}
-
- data={
- isResponseSuccess(purchaseRequests) ? purchaseRequests?.data : []
- }
- columns={purchaseColumns}
- pageSize={tableFilterState.pageSize}
- page={
- isResponseSuccess(purchaseRequests)
- ? purchaseRequests?.meta?.page
- : 0
- }
- totalItems={
- isResponseSuccess(purchaseRequests)
- ? purchaseRequests?.meta?.total_results
- : 0
- }
- onPageChange={setPage}
- onPageSizeChange={setPageSize}
- isLoading={isLoading}
- sorting={sorting}
- setSorting={setSorting}
- className={{
- containerClassName: cn('p-3', {
- 'w-full mb-20':
- isResponseSuccess(purchaseRequests) &&
- purchaseRequests?.data?.length === 0,
- }),
- headerColumnClassName: 'text-nowrap',
- }}
- />
+ {isLoading ? (
+
+
+ ) : !isResponseSuccess(purchaseRequests) ||
+ purchaseRequests.data?.length === 0 ? (
+
+ ) : (
+
+ data={
+ isResponseSuccess(purchaseRequests)
+ ? purchaseRequests?.data
+ : []
+ }
+ columns={purchaseColumns}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(purchaseRequests)
+ ? purchaseRequests?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(purchaseRequests)
+ ? purchaseRequests?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ onPageSizeChange={setPageSize}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn('p-3 mb-0'),
+ headerColumnClassName: 'text-nowrap',
+ }}
+ />
+ )}
diff --git a/src/components/pages/purchase/skeleton/PurchaseTableSkeleton.tsx b/src/components/pages/purchase/skeleton/PurchaseTableSkeleton.tsx
new file mode 100644
index 00000000..16d163a1
--- /dev/null
+++ b/src/components/pages/purchase/skeleton/PurchaseTableSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Purchase } from '@/types/api/purchase/purchase';
+import { ColumnDef } from '@tanstack/react-table';
+
+const PurchaseTableSkeleton = ({
+ columns,
+ icon,
+ title = 'No Data Available',
+ subtitle = 'There is no purchase data displayed. Enter purchase data to get started.',
+}: {
+ columns: ColumnDef
[];
+ icon: React.ReactNode;
+ title?: string;
+ subtitle?: string;
+}) => {
+ return (
+
+ );
+};
+
+export default PurchaseTableSkeleton;
diff --git a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
index 0be358d8..d30e9c25 100644
--- a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+++ b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
@@ -36,7 +36,6 @@ import {
} from '@/components/pages/report/marketing/filter/DailyMarketingFilter';
import SelectInput from '@/components/input/SelectInput';
import Modal, { useModal } from '@/components/Modal';
-import { cn } from '@/lib/helper';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import DailyMarketingReportSkeleton from '@/components/pages/report/marketing/skeleton/DailyMarketingSkeleton';
import { useEffect as useEffectHook } from 'react';
@@ -46,8 +45,8 @@ import {
MARKETING_DATE_FILTER_TYPE_OPTIONS,
MARKETING_TYPE_OPTIONS,
} from '@/config/constant';
-import Badge from '@/components/Badge';
import ButtonFilter from '@/components/helper/ButtonFilter';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
interface DailyMarketingTabProps {
tabId: string;
@@ -733,6 +732,88 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {