{!isSubmitted ? (
-
- Silakan pilih filter dan klik tombol Submit untuk menampilkan data.
-
+
+ }
+ title='No Filters Selected'
+ subtitle='Please choose filters to narrow down your results and make your search easier.'
+ />
) : isLoading ? (
-
-
+
+ }
+ title='Memuat Data Pembelian Per Supplier'
+ subtitle='Silakan tunggu sebentar...'
+ />
) : data.length === 0 ? (
-
- Tidak ada data yang dapat ditampilkan...
-
+
+ }
+ title='Data Not Yet Available'
+ subtitle='Please change your filters to get the data.'
+ />
) : (
data.map((supplierReport) => {
const summary = supplierReport.summary || {
@@ -808,15 +820,17 @@ const PurchasesPerSupplierTab = () => {
title={supplierReport.supplier.name}
subtitle={`Total Pembelian: ${formatCurrency(totalPurchase)}`}
className={{
- wrapper: 'w-full rounded-2xl',
+ wrapper: 'w-full rounded-lg border-none',
body: 'p-0',
title:
- 'py-1.5 px-3 bg-primary text-white text-lg font-normal',
+ 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
subtitle:
- 'px-3 pb-1 bg-primary text-white text-sm font-normal',
+ 'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
+ collapsible: 'rounded-lg',
}}
variant='bordered'
collapsible={true}
+ defaultCollapsed={true}
>
{
renderFooter={supplierReport.rows.length > 0}
className={{
containerClassName: 'w-full mb-0!',
- tableWrapperClassName: 'overflow-x-auto',
+ tableWrapperClassName:
+ 'overflow-x-auto rounded-tr-none rounded-tl-none',
tableClassName: 'w-full table-auto text-sm',
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
headerColumnClassName:
@@ -846,22 +861,190 @@ const PurchasesPerSupplierTab = () => {
);
})
)}
-
- {meta && data.length > 0 && (
-
+
+ {/* Filter Modal */}
+
+ {/* Modal Header */}
+
+
+
Filter Data
+
+
+
+
);
};
diff --git a/src/components/pages/report/marketing/DailyMarketingsTable.tsx b/src/components/pages/report/marketing/DailyMarketingsTable.tsx
deleted file mode 100644
index 4904ef16..00000000
--- a/src/components/pages/report/marketing/DailyMarketingsTable.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-'use client';
-
-import { ChangeEventHandler, useEffect, useState } from 'react';
-import useSWR from 'swr';
-import { ColumnDef, SortingState } from '@tanstack/react-table';
-
-import { Icon } from '@iconify/react';
-import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import Card from '@/components/Card';
-import Collapse from '@/components/Collapse';
-
-import {
- cn,
- formatCurrency,
- formatDate,
- formatNumber,
- formatVechicleNumber,
-} from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
-import { DailyMarketingRow } from '@/types/api/report/marketing';
-import { MarketingReportApi } from '@/services/api/report/marketing-report';
-
-interface DailyMarketingsTableProps {
- dailyMarketingsReportUrl: string;
- onSetPage: (page: number) => void;
- pageSize: number;
- onSetPageSize: (pageSize: number) => void;
- searchValue: string;
- onSearchChange: ChangeEventHandler;
- onFilterByChange: (filterBy: string) => void;
- onSortByChange: (sort: 'asc' | 'desc' | '') => void;
-}
-
-const DailyMarketingsTable = ({
- dailyMarketingsReportUrl,
- onSetPage,
- pageSize,
- onSetPageSize,
- searchValue,
- onSearchChange,
- onFilterByChange,
- onSortByChange,
-}: DailyMarketingsTableProps) => {
- const { data: dailyMarketings, isLoading: isLoadingDailyMarketings } = useSWR(
- dailyMarketingsReportUrl,
- MarketingReportApi.getAllDailyMarketingFetcher,
- {
- keepPreviousData: true,
- }
- );
-
- const [open, setOpen] = useState(true);
-
- const [sorting, setSorting] = useState([]);
-
- const dailyMarketingColumns: ColumnDef[] = [
- {
- header: 'No',
- cell: (props) => props.row.index + 1,
- },
- {
- accessorKey: 'so_date',
- header: 'Tanggal Jual',
- cell: (props) => formatDate(props.row.original.so_date, 'DD-MMM-YYYY'),
- footer: 'Total',
- },
- {
- accessorKey: 'realization_date',
- header: 'Tanggal Realisasi',
- cell: (props) =>
- formatDate(props.row.original.realization_date, 'DD-MMM-YYYY'),
- },
- {
- accessorKey: 'aging_days',
- header: 'Aging',
- cell: (props) => `${props.row.original.aging_days} hari`,
- },
- {
- accessorKey: 'warehouse',
- header: 'Gudang',
- cell: ({ row }) => row.original.warehouse.name,
- },
- {
- accessorKey: 'customer',
- header: 'Pelanggan',
- cell: ({ row }) => row.original.customer.name,
- },
- {
- accessorKey: 'do_number',
- header: 'No. DO',
- enableSorting: false,
- },
- {
- accessorKey: 'sales_person',
- header: 'Sales/Marketing',
- cell: (props) => props.row.original.sales.name,
- },
- {
- accessorKey: 'vehicle_number',
- header: 'No. Polisi',
- cell: (props) => (
-
- {formatVechicleNumber(props.row.original.vehicle_number)}
-
- ),
- },
- {
- accessorKey: 'marketing_type',
- header: 'Marketing Type',
- enableSorting: false,
- },
- {
- accessorKey: 'product',
- header: 'Produk',
- cell: ({ row }) => row.original.product.name,
- },
- {
- accessorKey: 'qty',
- header: 'Kuantitas',
- cell: (props) => formatNumber(props.row.original.qty),
- footer: () => {
- const totalQty = isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.total?.total_qty
- : 0;
-
- return totalQty ? formatNumber(totalQty) : '-';
- },
- },
- {
- accessorKey: 'average_weight',
- header: 'Bobot Rata-Rata (Kg)',
- cell: (props) => formatNumber(props.row.original.average_weight_kg),
- footer: () => {
- const totalAverageWeightKg = isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.total?.average_weight_kg
- : 0;
-
- return totalAverageWeightKg ? formatNumber(totalAverageWeightKg) : '-';
- },
- },
- {
- accessorKey: 'total_weight',
- header: 'Bobot Total (Kg)',
- cell: (props) => formatNumber(props.row.original.total_weight_kg),
- footer: () => {
- const totalWeightKg = isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.total?.total_weight_kg
- : 0;
-
- return totalWeightKg ? formatNumber(totalWeightKg) : '-';
- },
- },
- {
- accessorKey: 'sales_price',
- header: 'Harga Jual (Rp)',
- cell: (props) => formatCurrency(props.row.original.sales_price_per_kg),
- footer: () => {
- const totalSalesPrice = isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.total?.average_sales_price
- : 0;
-
- return totalSalesPrice ? formatNumber(totalSalesPrice) : '-';
- },
- },
- {
- accessorKey: 'hpp_price',
- header: 'HPP (Rp)',
- cell: (props) => formatCurrency(props.row.original.hpp_price_per_kg),
- footer: () => {
- const totalHppPricePerKg = isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.total?.total_hpp_price_per_kg
- : 0;
-
- return totalHppPricePerKg ? formatCurrency(totalHppPricePerKg) : '-';
- },
- },
- {
- accessorKey: 'sales_amount',
- header: 'Total (Rp)',
- cell: (props) => formatCurrency(props.row.original.sales_amount),
- footer: () => {
- const totalSalesAmount = isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.total?.total_sales_amount
- : 0;
-
- return totalSalesAmount ? formatCurrency(totalSalesAmount) : '-';
- },
- },
- ];
-
- useEffect(() => {
- if (sorting.length === 1) {
- onFilterByChange(sorting[0].id);
- onSortByChange(sorting[0].desc ? 'desc' : 'asc');
- } else {
- onFilterByChange('');
- onSortByChange('');
- }
- }, [sorting]);
-
- useEffect(() => {
- if (!open) {
- setOpen(
- isResponseSuccess(dailyMarketings)
- ? dailyMarketings.data.length > 0
- : false
- );
- }
- }, [dailyMarketings, isResponseSuccess]);
-
- return (
-
-
- Penjualan Harian
-
-
-
-
-
- data={
- isResponseSuccess(dailyMarketings) ? dailyMarketings?.data : []
- }
- columns={dailyMarketingColumns}
- pageSize={pageSize}
- onPageSizeChange={onSetPageSize}
- rowOptions={[10, 20, 50, 100]}
- page={
- isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.meta?.page
- : 0
- }
- totalItems={
- isResponseSuccess(dailyMarketings)
- ? dailyMarketings?.meta?.total_results
- : 0
- }
- onPageChange={onSetPage}
- isLoading={isLoadingDailyMarketings}
- sorting={sorting}
- setSorting={setSorting}
- renderFooter={true}
- className={{
- containerClassName: cn({
- 'w-full mb-20':
- isResponseSuccess(dailyMarketings) &&
- dailyMarketings?.data?.length === 0,
- }),
- }}
- />
-
-
- );
-};
-
-export default DailyMarketingsTable;
diff --git a/src/components/pages/report/marketing/MarketingReportContent.tsx b/src/components/pages/report/marketing/MarketingReportContent.tsx
deleted file mode 100644
index e38a39d4..00000000
--- a/src/components/pages/report/marketing/MarketingReportContent.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import { JSX, useState } from 'react';
-
-import Tabs from '@/components/Tabs';
-import DailyMarketingReportContent from '@/components/pages/report/marketing/tab/DailyMarketingReportContent';
-import HppPerKandangTab from '@/components/pages/report/marketing/tab/HppPerKandangTab';
-
-type MarketingReportTabType =
- | 'daily'
- | 'transaction'
- | 'hpp-comparison'
- | 'daily-hpp';
-
-const marketingReportTabs: {
- id: MarketingReportTabType;
- label: string;
- content: JSX.Element;
-}[] = [
- {
- id: 'daily',
- label: 'Penjualan Harian',
- content: ('daily');
-
- return (
-
- );
-};
-
-export default MarketingReportContent;
diff --git a/src/components/pages/report/marketing/MarketingTabs.tsx b/src/components/pages/report/marketing/MarketingTabs.tsx
new file mode 100644
index 00000000..8a02a0c2
--- /dev/null
+++ b/src/components/pages/report/marketing/MarketingTabs.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+import Tabs from '@/components/Tabs';
+import DailyMarketingReportContent from '@/components/pages/report/marketing/tab/DailyMarketingTab';
+import HppPerKandangTab from '@/components/pages/report/marketing/tab/HppPerKandangTab';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
+
+const MarketingReportContent = () => {
+ const [activeTabId, setActiveTabId] = useState('1');
+ const tabActions = useReportTabStore((state) => state.tabActions);
+
+ const tabs = [
+ {
+ id: '1',
+ label: 'Penjualan Harian',
+ content: => {
+ if (!params.data || params.data.length === 0) {
+ return;
+ }
+
+ const workbook = new ExcelJS.Workbook();
+
+ // ===== DAILY MARKETING WORKSHEET =====
+ const columns = [
+ { header: 'No', key: 'no', width: 5 },
+ { header: 'Tanggal Jual', key: 'soDate', width: 15 },
+ { header: 'Tanggal Realisasi', key: 'realizationDate', width: 18 },
+ { header: 'Aging', key: 'aging', width: 10 },
+ { header: 'Gudang', key: 'warehouse', width: 25 },
+ { header: 'Pelanggan', key: 'customer', width: 25 },
+ { header: 'No. DO', key: 'doNumber', width: 15 },
+ { header: 'Sales/Marketing', key: 'sales', width: 20 },
+ { header: 'No. Polisi', key: 'vehicleNumber', width: 15 },
+ { header: 'Marketing Type', key: 'marketingType', width: 15 },
+ { header: 'Produk', key: 'product', width: 20 },
+ { header: 'Kuantitas', key: 'qty', width: 12 },
+ { header: 'Bobot Rata-Rata (Kg)', key: 'averageWeight', width: 20 },
+ { header: 'Bobot Total (Kg)', key: 'totalWeight', width: 18 },
+ { header: 'Harga Jual (Rp)', key: 'salesPrice', width: 18 },
+ { header: 'HPP (Rp)', key: 'hppPrice', width: 15 },
+ { header: 'Total (Rp)', key: 'salesAmount', width: 20 },
+ ];
+
+ const worksheet = workbook.addWorksheet('Laporan Marketing Harian');
+ worksheet.columns = columns;
+
+ // Add data rows
+ params.data.forEach((item: DailyMarketingRow, index: number) => {
+ worksheet.addRow({
+ no: index + 1,
+ soDate: formatDate(item.so_date, 'DD-MMM-YYYY'),
+ realizationDate: formatDate(item.realization_date, 'DD-MMM-YYYY'),
+ aging: `${item.aging_days} hari`,
+ warehouse: item.warehouse?.name || '',
+ customer: item.customer?.name || '',
+ doNumber: item.do_number || '',
+ sales: item.sales?.name || '',
+ vehicleNumber: formatVechicleNumber(item.vehicle_number),
+ marketingType: item.marketing_type || '',
+ product: item.product?.name || '',
+ qty: formatNumber(item.qty || 0),
+ averageWeight: formatNumber(item.average_weight_kg || 0),
+ totalWeight: formatNumber(item.total_weight_kg || 0),
+ salesPrice: formatCurrency(item.sales_price_per_kg || 0),
+ hppPrice: formatCurrency(item.hpp_price_per_kg || 0),
+ salesAmount: formatCurrency(item.sales_amount || 0),
+ });
+ });
+
+ // Add TOTAL row if summary data is available
+ if (params.summaryTotal) {
+ worksheet.addRow({
+ no: 'TOTAL',
+ soDate: 'ALL',
+ realizationDate: '-',
+ aging: '-',
+ warehouse: '-',
+ customer: '-',
+ doNumber: '-',
+ sales: '-',
+ vehicleNumber: '-',
+ marketingType: '-',
+ product: '-',
+ qty: formatNumber(params.summaryTotal.total_qty || 0),
+ averageWeight: formatNumber(params.summaryTotal.average_weight_kg || 0),
+ totalWeight: formatNumber(params.summaryTotal.total_weight_kg || 0),
+ salesPrice: formatNumber(params.summaryTotal.average_sales_price || 0),
+ hppPrice: formatCurrency(params.summaryTotal.total_hpp_price_per_kg || 0),
+ salesAmount: formatCurrency(params.summaryTotal.total_sales_amount || 0),
+ });
+ }
+
+ worksheet.columns.forEach((column) => {
+ if (column.width && column.width < 10) {
+ column.width = 10;
+ }
+ });
+
+ const currentDate = new Date().toISOString().split('T')[0];
+ const filename = params.period
+ ? `laporan-marketing-harian-${params.period}.xlsx`
+ : `laporan-marketing-harian-${currentDate}.xlsx`;
+
+ const buffer = await workbook.xlsx.writeBuffer();
+ const blob = new Blob([buffer], {
+ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ });
+ const url = window.URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = filename;
+ link.click();
+ window.URL.revokeObjectURL(url);
+};
diff --git a/src/components/pages/report/marketing/filter/DailyMarketingFilter.ts b/src/components/pages/report/marketing/filter/DailyMarketingFilter.ts
new file mode 100644
index 00000000..85c765a9
--- /dev/null
+++ b/src/components/pages/report/marketing/filter/DailyMarketingFilter.ts
@@ -0,0 +1,42 @@
+import * as yup from 'yup';
+
+export type DailyMarketingReportFilterType = {
+ search: string | null;
+ area_id: string | null;
+ location_id: string | null;
+ warehouse_id: string | null;
+ customer_id: string | null;
+ start_date: string | null;
+ end_date: string | null;
+ marketing_type: string | null;
+ filter_by: string | null;
+ sort_by: string | null;
+};
+
+export const DailyMarketingReportFilterSchema = yup.object({
+ search: yup.string().nullable(),
+ area_id: yup.string().nullable(),
+ location_id: yup.string().nullable(),
+ warehouse_id: yup.string().nullable(),
+ customer_id: yup.string().nullable(),
+ start_date: yup.string().nullable(),
+ end_date: yup
+ .string()
+ .nullable()
+ .test(
+ 'is-greater-than-start',
+ 'Tanggal akhir tidak boleh masa lampau',
+ function (value) {
+ const { start_date } = this.parent;
+ if (!start_date || !value) return true;
+ return new Date(value) >= new Date(start_date);
+ }
+ ),
+ marketing_type: yup.string().nullable(),
+ filter_by: yup.string().nullable(),
+ sort_by: yup.string().nullable(),
+});
+
+export type DailyMarketingReportFilterValues = yup.InferType<
+ typeof DailyMarketingReportFilterSchema
+>;
diff --git a/src/components/pages/report/marketing/filter/HppPerKandangFilter.ts b/src/components/pages/report/marketing/filter/HppPerKandangFilter.ts
new file mode 100644
index 00000000..57d2dcd2
--- /dev/null
+++ b/src/components/pages/report/marketing/filter/HppPerKandangFilter.ts
@@ -0,0 +1,40 @@
+import * as yup from 'yup';
+
+export type HppPerKandangFilterType = {
+ area_id: string | null;
+ location_id: string | null;
+ kandang_id: string | null;
+ weight_min: string | null;
+ weight_max: string | null;
+ period: string | null;
+ sort_by: string | null;
+ show_unrecorded: boolean | null;
+};
+
+export const HppPerKandangFilterSchema = yup.object({
+ area_id: yup.string().nullable(),
+ location_id: yup.string().nullable(),
+ kandang_id: yup.string().nullable(),
+ weight_min: yup.string().nullable(),
+ weight_max: yup
+ .string()
+ .nullable()
+ .test(
+ 'is-greater-than-min',
+ 'Rentang bobot max tidak boleh lebih kecil dari min',
+ function (value) {
+ const { weight_min } = this.parent;
+ if (!weight_min || !value) return true;
+ const weightMinNum = parseFloat(weight_min) || 0;
+ const weightMaxNum = parseFloat(value) || 0;
+ return weightMaxNum >= weightMinNum;
+ }
+ ),
+ period: yup.string().required('Periode wajib diisi'),
+ sort_by: yup.string().nullable(),
+ show_unrecorded: yup.boolean().nullable(),
+});
+
+export type HppPerKandangFilterValues = yup.InferType<
+ typeof HppPerKandangFilterSchema
+>;
diff --git a/src/components/pages/report/marketing/skeleton/DailyMarketingSkeleton.tsx b/src/components/pages/report/marketing/skeleton/DailyMarketingSkeleton.tsx
new file mode 100644
index 00000000..ad68b8f6
--- /dev/null
+++ b/src/components/pages/report/marketing/skeleton/DailyMarketingSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { DailyMarketingRow } from '@/types/api/report/marketing.d';
+import { ColumnDef } from '@tanstack/react-table';
+
+const DailyMarketingReportSkeleton = ({
+ columns,
+ icon,
+ title,
+ subtitle,
+}: {
+ columns: ColumnDef[];
+ icon: React.ReactNode;
+ title: string;
+ subtitle: string;
+}) => {
+ return (
+
+ );
+};
+
+export default DailyMarketingReportSkeleton;
diff --git a/src/components/pages/report/marketing/skeleton/HppPerKandangSkeleton.tsx b/src/components/pages/report/marketing/skeleton/HppPerKandangSkeleton.tsx
new file mode 100644
index 00000000..42a6cf56
--- /dev/null
+++ b/src/components/pages/report/marketing/skeleton/HppPerKandangSkeleton.tsx
@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { HppPerKandangReport } from '@/types/api/report/hpp-per-kandang';
+import { ColumnDef } from '@tanstack/react-table';
+
+const HppPerKandangSkeleton = ({
+ columns,
+ icon,
+ title,
+ subtitle,
+}: {
+ columns: ColumnDef[];
+ icon: React.ReactNode;
+ title: string;
+ subtitle: string;
+}) => {
+ return (
+
+ );
+};
+
+export default HppPerKandangSkeleton;
diff --git a/src/components/pages/report/marketing/tab/DailyMarketingReportContent.tsx b/src/components/pages/report/marketing/tab/DailyMarketingReportContent.tsx
deleted file mode 100644
index ca5ec12f..00000000
--- a/src/components/pages/report/marketing/tab/DailyMarketingReportContent.tsx
+++ /dev/null
@@ -1,472 +0,0 @@
-'use client';
-
-import { ChangeEventHandler, useEffect, useState } from 'react';
-import { pdf } from '@react-pdf/renderer';
-import toast from 'react-hot-toast';
-
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
-import Dropdown from '@/components/dropdown/Dropdown';
-import DateInput from '@/components/input/DateInput';
-import SelectInput, {
- OptionType,
- useSelect,
-} from '@/components/input/SelectInput';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
-import DailyMarketingsTable from '@/components/pages/report/marketing/DailyMarketingsTable';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
-import DailyMarketingReportPDF from '@/components/pages/report/marketing/export/DailyMarketingReportPDF';
-
-import { Area } from '@/types/api/master-data/area';
-import {
- AreaApi,
- CustomerApi,
- LocationApi,
- WarehouseApi,
-} from '@/services/api/master-data';
-import { Warehouse } from '@/types/api/master-data/warehouse';
-import { Customer } from '@/types/api/master-data/customer';
-import { MarketingReportApi } from '@/services/api/report/marketing-report';
-import {
- MARKETING_DATE_FILTER_TYPE_OPTIONS,
- MARKETING_TYPE_OPTIONS,
-} from '@/config/constant';
-import { httpClient } from '@/services/http/client';
-import { BaseApiResponse } from '@/types/api/api-general';
-import {
- DailyMarketingReport,
- DailyMarketingReportResponse,
-} from '@/types/api/report/marketing';
-import { isResponseError } from '@/lib/api-helper';
-
-const DailyMarketingReportContent = () => {
- const {
- state: tableFilterState,
- updateFilter,
- setPage,
- setPageSize,
- toQueryString: getTableFilterQueryString,
- reset: resetFilter,
- } = useTableFilter({
- initial: {
- search: '',
- area_id: '',
- location_id: '',
- warehouse_id: '',
- customer_id: '',
- start_date: '',
- end_date: '',
- marketing_type: '',
- filter_by: '',
- sort_by: '',
- },
- paramMap: {
- page: 'page',
- pageSize: 'limit',
- area_id: 'area_id',
- location_id: 'location_id',
- warehouse_id: 'warehouse_id',
- customer_id: 'customer_id',
- start_date: 'start_date',
- end_date: 'end_date',
- marketing_type: 'marketing_type',
- filter_by: 'filter_by',
- sort_by: 'sort_by',
- },
- });
-
- const dailyMarketingsReportUrl = `${MarketingReportApi.basePath}${getTableFilterQueryString()}`;
-
- const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
- useState(false);
- const [isLoadingExportingToPdf, setIsLoadingExportingToPdf] = useState(false);
-
- const [selectedArea, setSelectedArea] = useState(null);
- const {
- setInputValue: setAreaInputValue,
- options: areaOptions,
- isLoadingOptions: isLoadingAreaOptions,
- loadMore: loadMoreAreas,
- } = useSelect(
- null
- );
- const {
- setInputValue: setLocationInputValue,
- options: locationOptions,
- isLoadingOptions: isLoadingLocationOptions,
- loadMore: loadMoreLocations,
- } = useSelect(LocationApi.basePath, 'id', 'name');
-
- const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
- setSelectedLocation(val as OptionType);
- updateFilter(
- 'location_id',
- val ? ((val as OptionType).value as string) : ''
- );
- };
-
- const [selectedWarehouse, setSelectedWarehouse] = useState(
- null
- );
- const {
- setInputValue: setWarehouseInputValue,
- options: warehouseOptions,
- isLoadingOptions: isLoadingWarehouseOptions,
- loadMore: loadMoreWarehouses,
- } = useSelect(WarehouseApi.basePath, 'id', 'name');
-
- const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
- setSelectedWarehouse(val as OptionType);
- updateFilter(
- 'warehouse_id',
- val ? ((val as OptionType).value as string) : ''
- );
- };
-
- const [selectedCustomer, setSelectedCustomer] = useState(
- null
- );
- const {
- setInputValue: setCustomerInputValue,
- options: customerOptions,
- isLoadingOptions: isLoadingCustomerOptions,
- loadMore: loadMoreCustomers,
- } = useSelect(CustomerApi.basePath, 'id', 'name');
-
- const customerChangeHandler = (val: OptionType | OptionType[] | null) => {
- setSelectedCustomer(val as OptionType);
- updateFilter(
- 'customer_id',
- val ? ((val as OptionType).value as string) : ''
- );
- };
-
- const startDateChangeHandler = (e: React.ChangeEvent) => {
- updateFilter('start_date', e.target.value ? e.target.value : '');
- };
-
- const endDateChangeHandler = (e: React.ChangeEvent) => {
- updateFilter('end_date', e.target.value ? e.target.value : '');
- };
-
- const [selectedMarketingDateFilterType, setSelectedMarketingDateFilterType] =
- useState(null);
- const marketingDateFilterTypeChangeHandler = (
- val: OptionType | OptionType[] | null
- ) => {
- setSelectedMarketingDateFilterType(val as OptionType);
- updateFilter('filter_by', val ? ((val as OptionType).value as string) : '');
- };
-
- const [selectedMarketingType, setSelectedMarketingType] =
- useState(null);
- const marketingTypeChangeHandler = (
- val: OptionType | OptionType[] | null
- ) => {
- setSelectedMarketingType(val as OptionType);
- updateFilter(
- 'marketing_type',
- val ? ((val as OptionType).value as string) : ''
- );
- };
-
- const searchChangeHandler: ChangeEventHandler = (e) => {
- updateFilter('search', e.target.value);
- };
-
- const filterByChangeHandler = (filterBy: string) => {
- updateFilter('filter_by', filterBy);
- };
-
- const sortByChangeHandler = (sort: 'asc' | 'desc' | '') => {
- updateFilter('sort_by', sort);
- };
-
- const exportToExcelHandler = async () => {
- setIsLoadingExportingToExcel(true);
-
- await MarketingReportApi.exportDailyMarketingToExcel(
- getTableFilterQueryString()
- );
-
- setIsLoadingExportingToExcel(false);
- };
-
- const exportToPdfHandler = async () => {
- setIsLoadingExportingToPdf(true);
-
- const params = new URLSearchParams(getTableFilterQueryString());
-
- params.set('limit', '9999999');
-
- const queryString = `?${params.toString()}`;
-
- try {
- const dailyMarketingsReport =
- await httpClient(
- `${MarketingReportApi.basePath}${queryString}`
- );
-
- if (isResponseError(dailyMarketingsReport)) {
- toast.error('Gagal melakukan export penjualan harian! Coba lagi.');
- return;
- }
-
- const openPdf = async () => {
- const dailyMarketingReportPdfBlob = await pdf(
-
-
-
Penjualan Harian
-
-
- {/* Filters */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Export{' '}
-
-
-
-
-
-
-
-
-
('');
+
+ // ===== FILTER STATE =====
+ const [filterParams, setFilterParams] = useState({});
+
+ const filterModal = useModal();
+
+ // ===== OPTIONS =====
+ const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
+ AreaApi.basePath,
+ 'id',
+ 'name',
+ 'search'
+ );
+
+ const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
+ useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+ const { options: warehouseOptions, isLoadingOptions: isLoadingWarehouses } =
+ useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+
+ const { options: customerOptions, isLoadingOptions: isLoadingCustomers } =
+ useSelect(CustomerApi.basePath, 'id', 'name', 'search');
+
+ const handleFilterModalOpen = () => {
+ filterModal.openModal();
+ formik.validateForm();
+ };
+
+ // ===== FORMIK SETUP =====
+ const formik = useFormik({
+ initialValues: {
+ search: null,
+ area_id: null,
+ location_id: null,
+ warehouse_id: null,
+ customer_id: null,
+ start_date: null,
+ end_date: null,
+ filter_by: null,
+ marketing_type: null,
+ sort_by: null,
+ },
+ validationSchema: DailyMarketingReportFilterSchema,
+ onSubmit: (values, { setSubmitting }) => {
+ setFilterParams({
+ area_id: values.area_id || undefined,
+ location_id: values.location_id || undefined,
+ warehouse_id: values.warehouse_id || undefined,
+ customer_id: values.customer_id || undefined,
+ start_date: values.start_date || undefined,
+ end_date: values.end_date || undefined,
+ filter_by: values.filter_by || undefined,
+ marketing_type: values.marketing_type || undefined,
+ sort_by: values.sort_by || undefined,
+ });
+ filterModal.closeModal();
+ setIsSubmitted(true);
+ setSubmitting(false);
+ },
+ onReset: () => {
+ setFilterParams({});
+ setIsSubmitted(false);
+ },
+ });
+
+ // ===== SEARCH CHANGE HANDLER =====
+ const searchChangeHandler = useCallback(
+ (e: React.ChangeEvent) => {
+ setSearchValue(e.target.value);
+ },
+ []
+ );
+
+ // ===== DERIVED VALUES =====
+ const areaValue = useMemo(() => {
+ if (!formik.values.area_id) return null;
+ return (
+ areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
+ null
+ );
+ }, [formik.values.area_id, areaOptions]);
+
+ const locationValue = 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 warehouseValue = useMemo(() => {
+ if (!formik.values.warehouse_id) return null;
+ return (
+ warehouseOptions.find(
+ (opt) => String(opt.value) === formik.values.warehouse_id
+ ) || null
+ );
+ }, [formik.values.warehouse_id, warehouseOptions]);
+
+ const customerValue = useMemo(() => {
+ if (!formik.values.customer_id) return null;
+ return (
+ customerOptions.find(
+ (opt) => String(opt.value) === formik.values.customer_id
+ ) || null
+ );
+ }, [formik.values.customer_id, customerOptions]);
+
+ const filterByValue = useMemo(() => {
+ if (!formik.values.filter_by) return null;
+ return (
+ MARKETING_DATE_FILTER_TYPE_OPTIONS.find(
+ (opt) => opt.value === formik.values.filter_by
+ ) || null
+ );
+ }, [formik.values.filter_by]);
+
+ const marketingTypeValue = useMemo(() => {
+ if (!formik.values.marketing_type) return null;
+ return (
+ MARKETING_TYPE_OPTIONS.find(
+ (opt) => opt.value === formik.values.marketing_type
+ ) || null
+ );
+ }, [formik.values.marketing_type]);
+
+ // ===== ACTIVE FILTERS COUNT =====
+ const activeFiltersCount = useMemo(() => {
+ let count = 0;
+
+ if (filterParams.area_id) {
+ count += 1;
+ }
+
+ if (filterParams.location_id) {
+ count += 1;
+ }
+
+ if (filterParams.warehouse_id) {
+ count += 1;
+ }
+
+ if (filterParams.customer_id) {
+ count += 1;
+ }
+
+ if (filterParams.start_date || filterParams.end_date) {
+ count += 1;
+ }
+
+ if (filterParams.filter_by) {
+ count += 1;
+ }
+
+ if (filterParams.marketing_type) {
+ count += 1;
+ }
+
+ if (filterParams.sort_by) {
+ count += 1;
+ }
+
+ return count;
+ }, [filterParams]);
+
+ const hasFilters = activeFiltersCount > 0;
+
+ // ===== DATA FETCHING =====
+ const { data: dailyMarketings, isLoading } = useSWR(
+ isSubmitted
+ ? () => {
+ const params = new URLSearchParams();
+
+ if (searchValue) params.set('search', searchValue);
+ if (filterParams.area_id) params.set('area_id', filterParams.area_id);
+ if (filterParams.location_id)
+ params.set('location_id', filterParams.location_id);
+ if (filterParams.warehouse_id)
+ params.set('warehouse_id', filterParams.warehouse_id);
+ if (filterParams.customer_id)
+ params.set('customer_id', filterParams.customer_id);
+ if (filterParams.start_date)
+ params.set('start_date', filterParams.start_date);
+ if (filterParams.end_date)
+ params.set('end_date', filterParams.end_date);
+ if (filterParams.filter_by)
+ params.set('filter_by', filterParams.filter_by);
+ if (filterParams.marketing_type)
+ params.set('marketing_type', filterParams.marketing_type);
+ if (filterParams.sort_by) params.set('sort_by', filterParams.sort_by);
+
+ return ['daily-marketing-report', params.toString()];
+ }
+ : null,
+ ([, params]) =>
+ MarketingReportApi.getAllDailyMarketingFetcher(
+ `${MarketingReportApi.basePath}?${params}`
+ )
+ );
+
+ const data: DailyMarketingRow[] = useMemo(
+ () =>
+ isResponseSuccess(dailyMarketings)
+ ? (dailyMarketings?.data as DailyMarketingRow[]) || []
+ : [],
+ [dailyMarketings]
+ );
+
+ const summaryTotal = useMemo(
+ () =>
+ isResponseSuccess(dailyMarketings) && dailyMarketings?.total
+ ? dailyMarketings.total
+ : undefined,
+ [dailyMarketings]
+ );
+
+ // ===== EXPORT DATA FETCHER =====
+ const dailyMarketingsExport = useCallback(async (): Promise<
+ DailyMarketingRow[] | null
+ > => {
+ const params = new URLSearchParams();
+
+ if (searchValue) params.set('search', searchValue);
+ if (filterParams.area_id) params.set('area_id', filterParams.area_id);
+ if (filterParams.location_id)
+ params.set('location_id', filterParams.location_id);
+ if (filterParams.warehouse_id)
+ params.set('warehouse_id', filterParams.warehouse_id);
+ if (filterParams.customer_id)
+ params.set('customer_id', filterParams.customer_id);
+ if (filterParams.start_date)
+ params.set('start_date', filterParams.start_date);
+ if (filterParams.end_date) params.set('end_date', filterParams.end_date);
+ if (filterParams.filter_by) params.set('filter_by', filterParams.filter_by);
+ if (filterParams.marketing_type)
+ params.set('marketing_type', filterParams.marketing_type);
+ if (filterParams.sort_by) params.set('sort_by', filterParams.sort_by);
+ params.set('limit', '9999999');
+
+ const queryString = `?${params.toString()}`;
+
+ try {
+ const response = await httpClient(
+ `${MarketingReportApi.basePath}${queryString}`
+ );
+
+ if (isResponseError(response)) {
+ return null;
+ }
+
+ return response.data || [];
+ } catch {
+ return null;
+ }
+ }, [filterParams, searchValue]);
+
+ // ===== EXPORT HANDLERS =====
+ const handleExportExcel = useCallback(async () => {
+ setIsExcelExportLoading(true);
+ try {
+ const allDataForExport = await dailyMarketingsExport();
+
+ if (!allDataForExport || allDataForExport.length === 0) {
+ toast.error('Tidak ada data untuk diekspor.');
+ return;
+ }
+
+ const period =
+ filterParams.start_date && filterParams.end_date
+ ? `${formatDate(filterParams.start_date, 'DD-MMM-YYYY')}_to_${formatDate(filterParams.end_date, 'DD-MMM-YYYY')}`
+ : undefined;
+
+ await generateDailyMarketingExcel({
+ data: allDataForExport,
+ summaryTotal: summaryTotal,
+ period: period,
+ });
+
+ toast.success('Excel berhasil dibuat dan diunduh.');
+ } catch {
+ toast.error('Gagal membuat Excel. Silakan coba lagi.');
+ } finally {
+ setIsExcelExportLoading(false);
+ }
+ }, [filterParams, dailyMarketingsExport, summaryTotal]);
+
+ const handleExportPDF = useCallback(async () => {
+ setIsPdfExportLoading(true);
+ try {
+ const allDataForExport = await dailyMarketingsExport();
+
+ if (!allDataForExport || allDataForExport.length === 0) {
+ toast.error('Tidak ada data untuk diekspor.');
+ return;
+ }
+
+ const dailyMarketingReportPdfBlob = await pdf(
+
+
+ }
+ className={{
+ wrapper: 'w-full min-w-48 max-w-3xs',
+ inputWrapper: 'rounded-xl! shadow-button-soft',
+ input: 'placeholder:font-semibold placeholder:text-base-content/50',
+ }}
+ />
+
+
+
+ {activeFiltersCount}
+
+ )}
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
[] => {
+ const tableColumns: ColumnDef[] = [
+ {
+ id: 'no',
+ header: 'No',
+ cell: (props) => props.row.index + 1,
+ footer: () => TOTAL
,
+ },
+ {
+ id: 'so_date',
+ header: 'Tanggal Jual',
+ accessorKey: 'so_date',
+ cell: (props) => formatDate(props.row.original.so_date, 'DD-MMM-YYYY'),
+ footer: () => ALL
,
+ },
+ {
+ id: 'realization_date',
+ header: 'Tanggal Realisasi',
+ accessorKey: 'realization_date',
+ cell: (props) =>
+ formatDate(props.row.original.realization_date, 'DD-MMM-YYYY'),
+ footer: () => -
,
+ },
+ {
+ id: 'aging_days',
+ header: 'Aging',
+ accessorKey: 'aging_days',
+ cell: (props) => `${props.row.original.aging_days} hari`,
+ footer: () => -
,
+ },
+ {
+ id: 'warehouse',
+ header: 'Gudang',
+ accessorKey: 'warehouse',
+ cell: ({ row }) => row.original.warehouse.name,
+ footer: () => -
,
+ },
+ {
+ id: 'customer',
+ header: 'Pelanggan',
+ accessorKey: 'customer',
+ cell: ({ row }) => row.original.customer.name,
+ footer: () => -
,
+ },
+ {
+ id: 'do_number',
+ header: 'No. DO',
+ accessorKey: 'do_number',
+ footer: () => -
,
+ },
+ {
+ id: 'sales_person',
+ header: 'Sales/Marketing',
+ accessorKey: 'sales',
+ cell: (props) => props.row.original.sales.name,
+ footer: () => -
,
+ },
+ {
+ id: 'vehicle_number',
+ header: 'No. Polisi',
+ accessorKey: 'vehicle_number',
+ cell: (props) => (
+
+ {formatVechicleNumber(props.row.original.vehicle_number)}
+
+ ),
+ footer: () => -
,
+ },
+ {
+ id: 'marketing_type',
+ header: 'Marketing Type',
+ accessorKey: 'marketing_type',
+ cell: (props) => (
+
+ {formatTitleCase(props.row.original.marketing_type || '-')}
+
+ ),
+ footer: () => -
,
+ },
+ {
+ id: 'product',
+ header: 'Produk',
+ accessorKey: 'product',
+ cell: ({ row }) => row.original.product.name,
+ footer: () => -
,
+ },
+ {
+ id: 'qty',
+ header: 'Kuantitas',
+ accessorKey: 'qty',
+ cell: (props) => formatNumber(props.row.original.qty),
+ footer: () => (
+
+ {summaryTotal?.total_qty
+ ? formatNumber(summaryTotal.total_qty)
+ : '-'}
+
+ ),
+ },
+ {
+ id: 'average_weight',
+ header: 'Bobot Rata-Rata (Kg)',
+ accessorKey: 'average_weight_kg',
+ cell: (props) => formatNumber(props.row.original.average_weight_kg),
+ footer: () => (
+
+ {summaryTotal?.average_weight_kg
+ ? formatNumber(summaryTotal.average_weight_kg)
+ : '-'}
+
+ ),
+ },
+ {
+ id: 'total_weight',
+ header: 'Bobot Total (Kg)',
+ accessorKey: 'total_weight_kg',
+ cell: (props) => formatNumber(props.row.original.total_weight_kg),
+ footer: () => (
+
+ {summaryTotal?.total_weight_kg
+ ? formatNumber(summaryTotal.total_weight_kg)
+ : '-'}
+
+ ),
+ },
+ {
+ id: 'sales_price',
+ header: 'Harga Jual (Rp)',
+ accessorKey: 'sales_price_per_kg',
+ cell: (props) => formatCurrency(props.row.original.sales_price_per_kg),
+ footer: () => (
+
+ {summaryTotal?.average_sales_price
+ ? formatNumber(summaryTotal.average_sales_price)
+ : '-'}
+
+ ),
+ },
+ {
+ id: 'hpp_price',
+ header: 'HPP (Rp)',
+ accessorKey: 'hpp_price_per_kg',
+ cell: (props) => formatCurrency(props.row.original.hpp_price_per_kg),
+ footer: () => (
+
+ {summaryTotal?.total_hpp_price_per_kg
+ ? formatCurrency(summaryTotal.total_hpp_price_per_kg)
+ : '-'}
+
+ ),
+ },
+ {
+ id: 'sales_amount',
+ header: 'Total (Rp)',
+ accessorKey: 'sales_amount',
+ cell: (props) => formatCurrency(props.row.original.sales_amount),
+ footer: () => (
+
+ {summaryTotal?.total_sales_amount
+ ? formatCurrency(summaryTotal.total_sales_amount)
+ : '-'}
+
+ ),
+ },
+ ];
+ return tableColumns;
+ };
+
+ return (
+ <>
+
+ {!isSubmitted ? (
+
+ }
+ title='No Filters Selected'
+ subtitle='Please choose filters to narrow down your results and make your search easier.'
+ />
+ ) : isLoading ? (
+
+ }
+ title='Memuat Data Penjualan Harian'
+ subtitle='Silakan tunggu sebentar...'
+ />
+ ) : data.length === 0 ? (
+
+ }
+ title='Data Not Yet Available'
+ subtitle='Please change your filters to get the data.'
+ />
+ ) : (
+
0}
+ className={{
+ containerClassName: 'w-full mb-0!',
+ tableWrapperClassName: 'overflow-x-auto',
+ tableClassName: 'w-full table-auto text-sm',
+ headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+ headerColumnClassName:
+ 'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200 text-nowrap',
+ bodyRowClassName:
+ 'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+ bodyColumnClassName:
+ 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+ tableFooterClassName:
+ 'bg-gray-100 font-semibold border border-gray-200',
+ footerRowClassName: 'border-t-2 border-gray-300',
+ footerColumnClassName:
+ 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+ }}
+ />
+ )}
+
+
+ {/* Filter Modal */}
+
+ {/* Modal Header */}
+
+
+
Filter Data
+
+
+
+
+
+ );
+};
+
+export default DailyMarketingTab;
diff --git a/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx b/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
index c0371abf..e106dbf4 100644
--- a/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
+++ b/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
@@ -1,11 +1,6 @@
import { useState, useMemo, useCallback } from 'react';
-import { ChangeEventHandler } from 'react';
import useSWR from 'swr';
-import Card from '@/components/Card';
-import SelectInput, {
- useSelect,
- OptionType,
-} from '@/components/input/SelectInput';
+import { useSelect } from '@/components/input/SelectInput';
import DateInput from '@/components/input/DateInput';
import NumberInput from '@/components/input/NumberInput';
import { AreaApi } from '@/services/api/master-data';
@@ -21,17 +16,41 @@ import {
HppPerKandangPerWeightRange,
} from '@/types/api/report/hpp-per-kandang';
import { isResponseSuccess } from '@/lib/api-helper';
-import { useTableFilter } from '@/services/hooks/useTableFilter';
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';
import { Icon } from '@iconify/react';
+import { useFormik } from 'formik';
+import {
+ HppPerKandangFilterSchema,
+ HppPerKandangFilterType,
+} from '@/components/pages/report/marketing/filter/HppPerKandangFilter';
+import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import Modal, { useModal } from '@/components/Modal';
+import { cn } from '@/lib/helper';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
+import HppPerKandangSkeleton from '@/components/pages/report/marketing/skeleton/HppPerKandangSkeleton';
+import { useEffect as useEffectHook } from 'react';
-const HppPerKandangTab = () => {
+interface HppPerKandangTabProps {
+ tabId: string;
+}
+
+interface FilterParams {
+ area_id?: string;
+ location_id?: string;
+ kandang_id?: string;
+ weight_min?: string;
+ weight_max?: string;
+ period?: string;
+ sort_by?: string;
+ show_unrecorded?: boolean;
+}
+
+const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
// ===== STATE MANAGEMENT =====
const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
@@ -42,190 +61,229 @@ const HppPerKandangTab = () => {
// ===== VALIDATION STATE =====
const [weightMaxError, setWeightMaxError] = useState('');
+ const [dateErrorShown, setDateErrorShown] = useState(false);
- // ===== TABLE FILTER STATE =====
- const { state: tableFilterState, updateFilter } = useTableFilter({
- initial: {
- area_id: [] as string[],
- location_id: [] as string[],
- kandang_id: [] as string[],
- weight_min: '',
- weight_max: '',
- period: '',
- sort_by: '',
- show_unrecorded: false,
- },
- paramMap: {
- page: 'page',
- pageSize: 'limit',
- },
- });
+ // ===== FILTER STATE =====
+ const [filterParams, setFilterParams] = useState({});
- const {
- setInputValue: setAreaInputValue,
- options: areaOptions,
- isLoadingOptions: isLoadingAreas,
- loadMore: loadMoreAreas,
- } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
+ const filterModal = useModal();
- const {
- setInputValue: setLocationInputValue,
- options: locationOptions,
- isLoadingOptions: isLoadingLocations,
- loadMore: loadMoreLocations,
- } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
-
- const {
- setInputValue: setKandangInputValue,
- options: kandangOptions,
- isLoadingOptions: isLoadingKandangs,
- loadMore: loadMoreKandangs,
- } = useSelect(
- ProjectFlockKandangApi.basePath,
+ // ===== OPTIONS =====
+ const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
+ AreaApi.basePath,
'id',
- 'name_with_period',
+ 'name',
'search'
);
- const showUnrecordedOptions: OptionType[] = [
- { value: 'false', label: 'Sembunyikan' },
- { value: 'true', label: 'Tampilkan' },
- ];
+ const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
+ useSelect(LocationApi.basePath, 'id', 'name', 'search');
- const areaChangeHandler = useCallback(
- (val: OptionType | OptionType[] | null) => {
- const arr = Array.isArray(val) ? val : val ? [val] : [];
- updateFilter(
- 'area_id',
- arr.map((v) => String((v as OptionType).value))
- );
- setIsSubmitted(false);
- },
- [updateFilter]
+ const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
+ useSelect(
+ ProjectFlockKandangApi.basePath,
+ 'id',
+ 'name_with_period',
+ 'search'
+ );
+
+ const showUnrecordedOptions = useMemo(
+ () => [
+ { value: 'false', label: 'Sembunyikan' },
+ { value: 'true', label: 'Tampilkan' },
+ ],
+ []
);
- const locationChangeHandler = useCallback(
- (val: OptionType | OptionType[] | null) => {
- const arr = Array.isArray(val) ? val : val ? [val] : [];
- updateFilter(
- 'location_id',
- arr.map((v) => String((v as OptionType).value))
- );
- setIsSubmitted(false);
+ const handleFilterModalOpen = () => {
+ filterModal.openModal();
+ formik.validateForm();
+ };
+
+ // ===== FORMIK SETUP =====
+ const formik = useFormik({
+ initialValues: {
+ area_id: null,
+ location_id: null,
+ kandang_id: null,
+ weight_min: null,
+ weight_max: null,
+ period: null,
+ sort_by: null,
+ show_unrecorded: null,
},
- [updateFilter]
- );
-
- const kandangChangeHandler = useCallback(
- (val: OptionType | OptionType[] | null) => {
- const arr = Array.isArray(val) ? val : val ? [val] : [];
- updateFilter(
- 'kandang_id',
- arr.map((v) => String((v as OptionType).value))
- );
- setIsSubmitted(false);
+ validationSchema: HppPerKandangFilterSchema,
+ onSubmit: (values, { setSubmitting }) => {
+ setFilterParams({
+ area_id: values.area_id || undefined,
+ location_id: values.location_id || undefined,
+ kandang_id: values.kandang_id || undefined,
+ weight_min: values.weight_min || undefined,
+ weight_max: values.weight_max || undefined,
+ period: values.period || undefined,
+ sort_by: values.sort_by || undefined,
+ show_unrecorded:
+ values.show_unrecorded !== null ? values.show_unrecorded : undefined,
+ });
+ filterModal.closeModal();
+ setIsSubmitted(true);
+ setSubmitting(false);
},
- [updateFilter]
- );
-
- const weightMinChangeHandler = useCallback<
- ChangeEventHandler
- >(
- (e) => {
- const val = e.target.value;
- updateFilter('weight_min', val ? String(parseFloat(val) || 0) : '');
+ onReset: () => {
+ setFilterParams({});
setIsSubmitted(false);
+ setWeightMaxError('');
+ if (dateErrorShown) {
+ toast.dismiss();
+ setDateErrorShown(false);
+ }
+ },
+ });
- if (weightMaxError) {
+ // ===== WEIGHT CHANGE HANDLERS =====
+ const handleWeightMinChange = useCallback(
+ (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ formik.setFieldValue('weight_min', value || null);
+
+ if (value && formik.values.weight_max) {
+ const weightMin = parseFloat(value) || 0;
+ const weightMax = parseFloat(formik.values.weight_max) || 0;
+
+ if (weightMax < weightMin) {
+ setWeightMaxError(
+ 'Rentang bobot max tidak boleh lebih kecil dari min'
+ );
+ if (!dateErrorShown) {
+ toast.error('Rentang bobot max tidak boleh lebih kecil dari min', {
+ duration: Infinity,
+ });
+ setDateErrorShown(true);
+ }
+ } else {
+ setWeightMaxError('');
+ if (dateErrorShown) {
+ toast.dismiss();
+ setDateErrorShown(false);
+ }
+ }
+ } else {
setWeightMaxError('');
}
},
- [updateFilter, weightMaxError]
+ [formik, dateErrorShown]
);
- const weightMaxChangeHandler = useCallback<
- ChangeEventHandler
- >(
- (e) => {
- const val = e.target.value;
- const weightMax = val ? parseFloat(val) || 0 : 0;
- const weightMin = tableFilterState.weight_min
- ? parseFloat(tableFilterState.weight_min)
- : 0;
+ const handleWeightMaxChange = useCallback(
+ (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ formik.setFieldValue('weight_max', value || null);
- if (weightMax < weightMin) {
- setWeightMaxError('Rentang bobot max tidak boleh lebih kecil dari min');
- toast.error('Rentang bobot max tidak boleh lebih kecil dari min');
- return;
+ if (value && formik.values.weight_min) {
+ const weightMin = parseFloat(formik.values.weight_min) || 0;
+ const weightMax = parseFloat(value) || 0;
+
+ if (weightMax < weightMin) {
+ setWeightMaxError(
+ 'Rentang bobot max tidak boleh lebih kecil dari min'
+ );
+ if (!dateErrorShown) {
+ toast.error('Rentang bobot max tidak boleh lebih kecil dari min', {
+ duration: Infinity,
+ });
+ setDateErrorShown(true);
+ }
+ return;
+ }
}
setWeightMaxError('');
- updateFilter('weight_max', val ? String(weightMax) : '');
- setIsSubmitted(false);
+ if (dateErrorShown) {
+ toast.dismiss();
+ setDateErrorShown(false);
+ }
},
- [updateFilter, tableFilterState.weight_min]
+ [formik, dateErrorShown]
);
- const periodChangeHandler = useCallback>(
- (e) => {
- const val = e.target.value;
- updateFilter('period', val || '');
- setIsSubmitted(false);
- },
- [updateFilter]
- );
+ // ===== DERIVED VALUES =====
+ const areaIdsValue = useMemo(() => {
+ if (!formik.values.area_id) return [];
+ const ids = formik.values.area_id.split(',');
+ return areaOptions.filter((opt) => ids.includes(String(opt.value)));
+ }, [formik.values.area_id, areaOptions]);
- const showUnrecordedChangeHandler = useCallback(
- (val: OptionType | OptionType[] | null) => {
- const newVal = val as OptionType;
- updateFilter('show_unrecorded', newVal?.value === 'true');
- setIsSubmitted(false);
- },
- [updateFilter]
- );
+ const locationIdsValue = useMemo(() => {
+ if (!formik.values.location_id) return [];
+ const ids = formik.values.location_id.split(',');
+ return locationOptions.filter((opt) => ids.includes(String(opt.value)));
+ }, [formik.values.location_id, locationOptions]);
- const resetFilters = useCallback(() => {
- updateFilter('area_id', []);
- updateFilter('location_id', []);
- updateFilter('kandang_id', []);
- updateFilter('weight_min', '');
- updateFilter('weight_max', '');
- updateFilter('period', '');
- updateFilter('sort_by', '');
- updateFilter('show_unrecorded', false);
- setIsSubmitted(false);
- }, [updateFilter]);
+ const kandangIdsValue = useMemo(() => {
+ if (!formik.values.kandang_id) return [];
+ const ids = formik.values.kandang_id.split(',');
+ return kandangOptions.filter((opt) => ids.includes(String(opt.value)));
+ }, [formik.values.kandang_id, kandangOptions]);
- const handleSubmit = useCallback(() => {
- if (!tableFilterState.period) {
- toast.error('Periode wajib diisi');
- return;
+ const showUnrecordedValue = useMemo(() => {
+ if (formik.values.show_unrecorded === null) return null;
+ return (
+ showUnrecordedOptions.find(
+ (opt) => opt.value === String(formik.values.show_unrecorded)
+ ) || null
+ );
+ }, [formik.values.show_unrecorded, showUnrecordedOptions]);
+
+ // ===== ACTIVE FILTERS COUNT =====
+ const activeFiltersCount = useMemo(() => {
+ let count = 0;
+
+ if (filterParams.period) {
+ count += 1;
}
- setIsSubmitted(true);
- }, [tableFilterState.period]);
+
+ if (filterParams.area_id) {
+ count += 1;
+ }
+
+ if (filterParams.location_id) {
+ count += 1;
+ }
+
+ if (filterParams.kandang_id) {
+ count += 1;
+ }
+
+ if (filterParams.weight_min || filterParams.weight_max) {
+ count += 1;
+ }
+
+ if (filterParams.show_unrecorded !== undefined) {
+ count += 1;
+ }
+
+ if (filterParams.sort_by) {
+ count += 1;
+ }
+
+ return count;
+ }, [filterParams]);
+
+ const hasFilters = activeFiltersCount > 0;
// ===== DATA FETCHING =====
const { data: hppPerKandang, isLoading } = useSWR(
isSubmitted
? () => {
const params = {
- area_id:
- tableFilterState.area_id.length > 0
- ? tableFilterState.area_id.join(',')
- : undefined,
- location_id:
- tableFilterState.location_id.length > 0
- ? tableFilterState.location_id.join(',')
- : undefined,
- kandang_id:
- tableFilterState.kandang_id.length > 0
- ? tableFilterState.kandang_id.join(',')
- : undefined,
- weight_min: tableFilterState.weight_min || undefined,
- weight_max: tableFilterState.weight_max || undefined,
- period: tableFilterState.period || undefined,
- sort_by: tableFilterState.sort_by || undefined,
- show_unrecorded: tableFilterState.show_unrecorded,
+ area_id: filterParams.area_id,
+ location_id: filterParams.location_id,
+ kandang_id: filterParams.kandang_id,
+ weight_min: filterParams.weight_min,
+ weight_max: filterParams.weight_max,
+ period: filterParams.period,
+ sort_by: filterParams.sort_by,
+ show_unrecorded: filterParams.show_unrecorded,
};
return ['hpp-per-kandang-report', params];
@@ -275,23 +333,14 @@ const HppPerKandangTab = () => {
const hppPerKandangExport =
useCallback(async (): Promise => {
const params = {
- area_id:
- tableFilterState.area_id.length > 0
- ? tableFilterState.area_id.join(',')
- : undefined,
- location_id:
- tableFilterState.location_id.length > 0
- ? tableFilterState.location_id.join(',')
- : undefined,
- kandang_id:
- tableFilterState.kandang_id.length > 0
- ? tableFilterState.kandang_id.join(',')
- : undefined,
- weight_min: tableFilterState.weight_min || undefined,
- weight_max: tableFilterState.weight_max || undefined,
- period: tableFilterState.period || undefined,
- sort_by: tableFilterState.sort_by || undefined,
- show_unrecorded: tableFilterState.show_unrecorded,
+ area_id: filterParams.area_id,
+ location_id: filterParams.location_id,
+ kandang_id: filterParams.kandang_id,
+ weight_min: filterParams.weight_min,
+ weight_max: filterParams.weight_max,
+ period: filterParams.period,
+ sort_by: filterParams.sort_by,
+ show_unrecorded: filterParams.show_unrecorded,
limit: 10000,
page: 1,
};
@@ -308,7 +357,7 @@ const HppPerKandangTab = () => {
);
return isResponseSuccess(response) ? response.data : null;
- }, [tableFilterState]);
+ }, [filterParams]);
// ===== TABLE COLUMNS DEFINITION =====
const allFeedSuppliers = useMemo(() => {
@@ -373,38 +422,32 @@ const HppPerKandangTab = () => {
return;
}
- const areaName =
- tableFilterState.area_id.length > 0
- ? tableFilterState.area_id
- .map(
- (id) =>
- areaOptions.find((opt) => opt.value === Number(id))?.label
- )
- .filter(Boolean)
- .join(', ') || 'Semua Area'
- : 'Semua Area';
+ const areaName = filterParams.area_id
+ ? areaOptions
+ .filter((opt) =>
+ filterParams.area_id?.split(',').includes(String(opt.value))
+ )
+ .map((opt) => opt.label)
+ .join(', ') || 'Semua Area'
+ : 'Semua Area';
- const locationName =
- tableFilterState.location_id.length > 0
- ? tableFilterState.location_id
- .map(
- (id) =>
- locationOptions.find((opt) => opt.value === Number(id))?.label
- )
- .filter(Boolean)
- .join(', ') || 'Semua Lokasi'
- : 'Semua Lokasi';
+ const locationName = filterParams.location_id
+ ? locationOptions
+ .filter((opt) =>
+ filterParams.location_id?.split(',').includes(String(opt.value))
+ )
+ .map((opt) => opt.label)
+ .join(', ') || 'Semua Lokasi'
+ : 'Semua Lokasi';
- const kandangName =
- tableFilterState.kandang_id.length > 0
- ? tableFilterState.kandang_id
- .map(
- (id) =>
- kandangOptions.find((opt) => opt.value === Number(id))?.label
- )
- .filter(Boolean)
- .join(', ') || 'Semua Kandang'
- : 'Semua Kandang';
+ const kandangName = filterParams.kandang_id
+ ? kandangOptions
+ .filter((opt) =>
+ filterParams.kandang_id?.split(',').includes(String(opt.value))
+ )
+ .map((opt) => opt.label)
+ .join(', ') || 'Semua Kandang'
+ : 'Semua Kandang';
await generateHppPerKandangPDF(
{
@@ -413,11 +456,12 @@ const HppPerKandangTab = () => {
area_name: areaName,
location_name: locationName,
kandang_name: kandangName,
- period: tableFilterState.period,
- weight_min: tableFilterState.weight_min,
- weight_max: tableFilterState.weight_max,
- show_unrecorded: tableFilterState.show_unrecorded.toString(),
- sort_by: tableFilterState.sort_by,
+ period: filterParams.period,
+ weight_min: filterParams.weight_min,
+ weight_max: filterParams.weight_max,
+ show_unrecorded:
+ filterParams.show_unrecorded?.toString() || 'false',
+ sort_by: filterParams.sort_by,
},
},
allFeedSuppliers,
@@ -432,7 +476,7 @@ const HppPerKandangTab = () => {
}
}, [
hppPerKandangExport,
- tableFilterState,
+ filterParams,
areaOptions,
locationOptions,
kandangOptions,
@@ -440,6 +484,102 @@ const HppPerKandangTab = () => {
allDocSuppliers,
]);
+ // ===== REGISTER TAB ACTIONS TO STORE =====
+ const setTabActions = useReportTabStore((state) => state.setTabActions);
+ const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+
+ useEffectHook(() => {
+ setTabActions(
+ tabId,
+
+
+
+ {activeFiltersCount}
+
+ )}
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
[] => {
const tableColumns: ColumnDef[] = [
{
@@ -682,161 +822,50 @@ const HppPerKandangTab = () => {
);
return (
-
-
HPP Harian Kandang (${period})`
- : 'Laporan > HPP Harian Kandang'
- }
- className={{ wrapper: 'w-full', body: 'p-1!' }}
- >
-
-
- (tableFilterState.area_id || [])
- .map(String)
- .includes(String(opt.value))
- )}
- onChange={areaChangeHandler}
- onInputChange={setAreaInputValue}
- onMenuScrollToBottom={loadMoreAreas}
- isLoading={isLoadingAreas}
- closeMenuOnSelect={false}
- hideSelectedOptions={false}
- isClearable
- />
-
- (tableFilterState.location_id || [])
- .map(String)
- .includes(String(opt.value))
- )}
- onChange={locationChangeHandler}
- onInputChange={setLocationInputValue}
- onMenuScrollToBottom={loadMoreLocations}
- isLoading={isLoadingLocations}
- closeMenuOnSelect={false}
- hideSelectedOptions={false}
- isClearable
- />
-
- (tableFilterState.kandang_id || [])
- .map(String)
- .includes(String(opt.value))
- )}
- onChange={kandangChangeHandler}
- onInputChange={setKandangInputValue}
- onMenuScrollToBottom={loadMoreKandangs}
- isLoading={isLoadingKandangs}
- closeMenuOnSelect={false}
- hideSelectedOptions={false}
- isClearable
- />
-
-
-
-
-
-
-
opt.value === 'true') ||
- null
- : showUnrecordedOptions.find((opt) => opt.value === 'false') ||
- null
- }
- onChange={showUnrecordedChangeHandler}
- />
-
-
-
-
-
-
- Export
-
-
-
-
-
-
-
+ <>
+
{!isSubmitted ? (
-
- Silakan pilih filter dan klik tombol Cari untuk menampilkan data.
-
+
+ }
+ title='No Filters Selected'
+ subtitle='Please choose filters to narrow down your results and make your search easier.'
+ />
) : isLoading ? (
-
-
+
+ }
+ title='Memuat Data HPP Per Kandang'
+ subtitle='Silakan tunggu sebentar...'
+ />
) : data.length === 0 ? (
-
- Tidak ada data yang dapat ditampilkan...
-
+
+ }
+ title='Data Not Yet Available'
+ subtitle='Please change your filters to get the data.'
+ />
) : (
{
renderFooter={data.length > 0}
renderCustomRow={renderCustomRow}
className={{
- containerClassName: 'w-full mt-6',
- tableWrapperClassName: 'overflow-x-auto mt-4',
+ containerClassName: 'w-full mb-0!',
+ tableWrapperClassName: 'overflow-x-auto',
tableClassName: 'w-full table-auto text-sm',
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
headerColumnClassName:
@@ -862,8 +891,175 @@ const HppPerKandangTab = () => {
}}
/>
)}
-
-
+
+
+ {/* Filter Modal */}
+
+ {/* Modal Header */}
+
+
+
Filter Data
+
+
+
+
+
);
};
diff --git a/src/components/pages/report/production-result/ProductionResultContent.tsx b/src/components/pages/report/production-result/ProductionResultContent.tsx
deleted file mode 100644
index d79d4c94..00000000
--- a/src/components/pages/report/production-result/ProductionResultContent.tsx
+++ /dev/null
@@ -1,527 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
-import Dropdown from '@/components/dropdown/Dropdown';
-import SelectInput, {
- OptionType,
- useSelect,
-} from '@/components/input/SelectInput';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
-import Card from '@/components/Card';
-import ProductionResultProjectFlockKandangTable from '@/components/pages/report/production-result/ProductionResultProjectFlockKandangTable';
-
-import { BaseKandang } from '@/types/api/master-data/kandang';
-import { AreaApi, LocationApi } from '@/services/api/master-data';
-import {
- ProjectFlockApi,
- ProjectFlockKandangApi,
-} from '@/services/api/production';
-import {
- BaseProjectFlockKandang,
- ProjectFlockKandang,
-} from '@/types/api/production/project-flock-kandang';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import Pagination from '@/components/Pagination';
-import { ProductionResultReportApi } from '@/services/api/report/production-result';
-import { BaseApiResponse } from '@/types/api/api-general';
-import { httpClient } from '@/services/http/client';
-import { ProductionResult } from '@/types/api/report/production-result';
-import ProductionResultReportPDF from './ProductionResultReportPDF';
-import { pdf } from '@react-pdf/renderer';
-
-const ProductionResultContent = () => {
- const [projectFlockKandangs, setProjectFlockKandangs] = useState<
- ProjectFlockKandang[] | null
- >(null);
- const [projectFlockKandangMetadata, setProjectFlockKandangMetadata] =
- useState<
- | {
- page: number;
- limit: number;
- total_pages: number;
- total_results: number;
- }
- | undefined
- >(undefined);
-
- const [page, setPage] = useState(1);
- const [pageSize, setPageSize] = useState(10);
-
- const [isLoadingSearch, setIsLoadingSearch] = useState(false);
-
- const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
- useState(false);
-
- const [isLoadingExportingToPdf, setIsLoadingExportingToPdf] = useState(false);
-
- const [selectedArea, setSelectedArea] = useState(null);
- const [selectedLocation, setSelectedLocation] = useState(
- null
- );
- const [selectedProjectFlock, setSelectedProjectFlock] =
- useState(null);
- const [selectedProjectFlockKandang, setSelectedProjectFlockKandang] =
- useState(null);
-
- const {
- setInputValue: setAreaInputValue,
- options: areaOptions,
- isLoadingOptions: isLoadingAreaOptions,
- loadMore: loadMoreAreas,
- } = useSelect(AreaApi.basePath, 'id', 'name');
-
- const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
- setSelectedArea(val as OptionType);
-
- setSelectedLocation(null);
-
- setSelectedProjectFlock(null);
-
- setSelectedProjectFlockKandang(null);
- };
-
- const {
- setInputValue: setLocationInputValue,
- options: locationOptions,
- isLoadingOptions: isLoadingLocationOptions,
- loadMore: loadMoreLocations,
- } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
- area_id: selectedArea ? ((selectedArea as OptionType).value as string) : '',
- });
-
- const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
- setSelectedLocation(val as OptionType);
-
- setSelectedProjectFlock(null);
-
- setSelectedProjectFlockKandang(null);
- };
-
- const {
- setInputValue: setProjectFlockInputValue,
- options: projectFlockOptions,
- isLoadingOptions: isLoadingProjectFlockOptions,
- loadMore: loadMoreProjectFlocks,
- } = useSelect(
- ProjectFlockApi.basePath,
- 'id',
- 'flock_name',
- 'search',
- {
- area_id: selectedArea
- ? ((selectedArea as OptionType).value as string)
- : '',
- location_id: selectedLocation
- ? ((selectedLocation as OptionType).value as string)
- : '',
- category: 'LAYING',
- }
- );
-
- const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
- setSelectedProjectFlock(val as OptionType);
-
- setSelectedProjectFlockKandang(null);
- };
-
- const {
- setInputValue: setProjectFlockKandangInputValue,
- options: projectFlockKandangOptions,
- isLoadingOptions: isLoadingProjectFlockKandangOptions,
- loadMore: loadMoreProjectFlockKandangs,
- } = useSelect(
- ProjectFlockKandangApi.basePath,
- 'id',
- 'kandang.name',
- 'search',
- {
- area_id: selectedArea
- ? ((selectedArea as OptionType).value as string)
- : '',
- location_id: selectedLocation
- ? ((selectedLocation as OptionType).value as string)
- : '',
- project_flock_id: selectedProjectFlock
- ? ((selectedProjectFlock as OptionType).value as string)
- : '',
- }
- );
-
- const projectFlockKandangChangeHandler = (
- val: OptionType | OptionType[] | null
- ) => {
- setSelectedProjectFlockKandang(val as OptionType);
- };
-
- const exportToExcelHandler = async () => {
- setIsLoadingExportingToExcel(true);
-
- await ProductionResultReportApi.exportProductionResultToExcel(
- projectFlockKandangs
- );
-
- setIsLoadingExportingToExcel(false);
- };
-
- const exportToPdfHandler = async () => {
- setIsLoadingExportingToPdf(true);
-
- try {
- let projectFlockKandangsData: BaseProjectFlockKandang[] = [];
-
- if (selectedProjectFlockKandang) {
- const projectFlockKandangResponse =
- await ProjectFlockKandangApi.getSingle(
- selectedProjectFlockKandang?.value as number
- );
-
- projectFlockKandangsData = isResponseSuccess(
- projectFlockKandangResponse
- )
- ? [projectFlockKandangResponse.data]
- : [];
- } else {
- const projectFlockKandangsResponse =
- await ProjectFlockKandangApi.getAll({
- area_id: selectedArea?.value,
- project_flock_id: selectedProjectFlock?.value,
- });
-
- projectFlockKandangsData = isResponseSuccess(
- projectFlockKandangsResponse
- )
- ? projectFlockKandangsResponse.data
- : [];
- }
-
- const mappedProductionResults: {
- projectFlockKandang: BaseProjectFlockKandang;
- productionResult: ProductionResult[] | null;
- }[] = await Promise.all(
- projectFlockKandangsData.map(async (projectFlockKandang) => {
- const getProductionResultPath = `${ProductionResultReportApi.basePath}/${projectFlockKandang.id}?page=1&limit=100`;
- const getProductionResultRes = await httpClient<
- BaseApiResponse
- >(getProductionResultPath);
-
- return {
- projectFlockKandang,
- productionResult: isResponseSuccess(getProductionResultRes)
- ? getProductionResultRes.data
- : null,
- };
- })
- );
-
- if (mappedProductionResults.length === 0) {
- toast.error('Tidak ada data untuk diexport.');
- setIsLoadingExportingToPdf(false);
- return;
- }
-
- const openPdf = async () => {
- const productionResultPdfBlob = await pdf(
-
-
-
-
- Laporan Hasil Produksi
-
-
-
- {/* Filters */}
-
-
-
-
-
-
-
-
-
-
-
-
- Export{' '}
-
-
-
-
-
-
-
-
- {isLoadingSearch && (
-
- )}
-
- {!isLoadingSearch && !projectFlockKandangs && (
-
- Silakan pilih filter dan klik tombol Cari untuk menampilkan data.
-
- )}
-
- {!isLoadingSearch && projectFlockKandangs?.length === 0 && (
-
- Tidak ada data kandang project flock yang dapat ditampilkan.
-
- )}
-
- {!isLoadingSearch && projectFlockKandangs && (
-
- {projectFlockKandangs.map((projectFlockKandang) => (
-
-
- setPage((currPage) =>
- currPage > 1 ? currPage - 1 : currPage
- )
- }
- onNextPage={() =>
- setPage((currPage) =>
- projectFlockKandangMetadata?.total_pages &&
- currPage < projectFlockKandangMetadata.total_pages
- ? currPage + 1
- : currPage
- )
- }
- onPageChange={(pageNumber) => setPage(pageNumber)}
- rowOptions={[10, 20, 50, 100]}
- onRowChange={setPageSize}
- />
-
- )}
-
-
('1');
+ const tabActions = useReportTabStore((state) => state.tabActions);
+
+ const tabs = [
+ {
+ id: '1',
+ label: 'Hasil Produksi',
+ content: [] => [
header: 'No',
flex: 0.5,
align: 'center',
- cell: ({ row, index }) => index + 1,
+ cell: ({ index }) => index + 1,
},
{
key: 'woa',
@@ -114,7 +114,7 @@ const getDepTableColumns = (): PdfColumn[] => [
header: 'No',
flex: 0.5,
align: 'center',
- cell: ({ row, index }) => index + 1,
+ cell: ({ index }) => index + 1,
},
{
key: 'dep_kum',
@@ -141,7 +141,7 @@ const getButiranTableColumns = (): PdfColumn[] => [
header: 'No',
flex: 0.5,
align: 'center',
- cell: ({ row, index }) => index + 1,
+ cell: ({ index }) => index + 1,
},
{
key: 'butiran_utuh',
@@ -196,7 +196,7 @@ const getKgTableColumns = (): PdfColumn[] => [
header: 'No',
flex: 0.5,
align: 'center',
- cell: ({ row, index }) => index + 1,
+ cell: ({ index }) => index + 1,
},
{
key: 'kg_utuh',
@@ -251,7 +251,7 @@ const getPersenTableColumns = (): PdfColumn[] => [
header: 'No',
flex: 0.5,
align: 'center',
- cell: ({ row, index }) => index + 1,
+ cell: ({ index }) => index + 1,
},
{
key: 'persen_utuh',
@@ -292,7 +292,7 @@ const getProduksi1TableColumns = (): PdfColumn[] => [
header: 'No',
flex: 0.5,
align: 'center',
- cell: ({ row, index }) => index + 1,
+ cell: ({ index }) => index + 1,
},
{
key: 'hd',
@@ -361,7 +361,7 @@ const getProduksi2TableColumns = (): PdfColumn[] => [
header: 'No',
flex: 0.5,
align: 'center',
- cell: ({ row, index }) => index + 1,
+ cell: ({ index }) => index + 1,
},
{
key: 'fcr',
diff --git a/src/components/pages/report/production-result/export/ProductionResultExportXLSX.tsx b/src/components/pages/report/production-result/export/ProductionResultExportXLSX.tsx
new file mode 100644
index 00000000..af0380c0
--- /dev/null
+++ b/src/components/pages/report/production-result/export/ProductionResultExportXLSX.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import ExcelJS from 'exceljs';
+import { formatNumber } from '@/lib/helper';
+import { ProductionResult } from '@/types/api/report/production-result';
+
+interface ProductionResultExportExcelParams {
+ data: ProductionResult[];
+ period?: string;
+}
+
+export const generateProductionResultExcel = async (
+ params: ProductionResultExportExcelParams
+): Promise => {
+ if (!params.data || params.data.length === 0) {
+ return;
+ }
+
+ const workbook = new ExcelJS.Workbook();
+
+ // ===== PRODUCTION RESULT WORKSHEET =====
+ const columns = [
+ { header: 'No', key: 'no', width: 6 },
+ { header: 'Project Flock', key: 'projectFlockName', width: 25 },
+ {
+ header: 'Category',
+ key: 'projectFlockCategory',
+ width: 18,
+ },
+ { header: 'Kandang', key: 'kandangName', width: 18 },
+ { header: 'Week of Age (WOA)', key: 'woa', width: 20 },
+ { header: 'Body Weight (BW)', key: 'bw', width: 18 },
+ { header: 'Body Weight (Std BW)', key: 'stdBw', width: 22 },
+ { header: 'Uniformity (%)', key: 'uniformity', width: 16 },
+ { header: 'Uniformity Std (%)', key: 'stdUniformity', width: 20 },
+ { header: 'Depletion Cumulative', key: 'depKum', width: 22 },
+ { header: 'Depletion Standard', key: 'depStd', width: 20 },
+ { header: 'Telur Utuh', key: 'butiranUtuh', width: 14 },
+ { header: 'Telur Putih', key: 'butiranPutih', width: 14 },
+ { header: 'Telur Retak', key: 'butiranRetak', width: 14 },
+ { header: 'Telur Pecah', key: 'butiranPecah', width: 14 },
+ { header: 'Jumlah Telur', key: 'butiranJumlah', width: 16 },
+ { header: 'Total Telur', key: 'totalButir', width: 14 },
+ { header: 'Utuh (Kg)', key: 'kgUtuh', width: 12 },
+ { header: 'Putih (Kg)', key: 'kgPutih', width: 12 },
+ { header: 'Retak (Kg)', key: 'kgRetak', width: 12 },
+ { header: 'Pecah (Kg)', key: 'kgPecah', width: 12 },
+ { header: 'Jumlah (Kg)', key: 'kgJumlah', width: 14 },
+ { header: 'Total Weight (Kg)', key: 'totalKg', width: 20 },
+ { header: 'Utuh (%)', key: 'persenUtuh', width: 12 },
+ { header: 'Putih (%)', key: 'persenPutih', width: 12 },
+ { header: 'Retak (%)', key: 'persenRetak', width: 12 },
+ { header: 'Pecah (%)', key: 'persenPecah', width: 12 },
+ { header: 'Hen Day (HD)', key: 'hd', width: 15 },
+ { header: 'Hen Day Std (HD Std)', key: 'hdStd', width: 22 },
+ { header: 'Feed Intake (FI)', key: 'fi', width: 18 },
+ { header: 'Feed Intake Std (FI Std)', key: 'fiStd', width: 25 },
+ { header: 'Egg Mass (EM)', key: 'em', width: 16 },
+ { header: 'Egg Mass Std (EM Std)', key: 'emStd', width: 23 },
+ { header: 'Egg Weight (EW)', key: 'ew', width: 18 },
+ { header: 'Egg Weight Std (EW Std)', key: 'ewStd', width: 25 },
+ { header: 'Feed Conversion Ratio (FCR)', key: 'fcr', width: 30 },
+ {
+ header: 'Feed Conversion Ratio Std (FCR Std)',
+ key: 'fcrStd',
+ width: 35,
+ },
+ { header: 'Hen House (HH)', key: 'hh', width: 18 },
+ { header: 'Hen House Std (HH Std)', key: 'hhStd', width: 25 },
+ ];
+
+ const worksheet = workbook.addWorksheet('Production Result');
+ worksheet.columns = columns;
+
+ // Add data rows
+ params.data.forEach((item: ProductionResult, index: number) => {
+ worksheet.addRow({
+ no: index + 1,
+ projectFlockName: item.project_flock?.name || '',
+ projectFlockCategory: item.project_flock?.category || '',
+ kandangName: item.project_flock?.kandang?.name || '',
+ woa: formatNumber(item.woa || 0),
+ bw: formatNumber(item.bw || 0),
+ stdBw: formatNumber(item.std_bw || 0),
+ uniformity: formatNumber(item.uniformity || 0),
+ stdUniformity: item.std_uniformity || '',
+ depKum: formatNumber(item.dep_kum || 0),
+ depStd: formatNumber(item.dep_std || 0),
+ butiranUtuh: formatNumber(item.butiran_utuh || 0),
+ butiranPutih: formatNumber(item.butiran_putih || 0),
+ butiranRetak: formatNumber(item.butiran_retak || 0),
+ butiranPecah: formatNumber(item.butiran_pecah || 0),
+ butiranJumlah: formatNumber(item.butiran_jumlah || 0),
+ totalButir: formatNumber(item.total_butir || 0),
+ kgUtuh: formatNumber(item.kg_utuh || 0),
+ kgPutih: formatNumber(item.kg_putih || 0),
+ kgRetak: formatNumber(item.kg_retak || 0),
+ kgPecah: formatNumber(item.kg_pecah || 0),
+ kgJumlah: formatNumber(item.kg_jumlah || 0),
+ totalKg: formatNumber(item.total_kg || 0),
+ persenUtuh: formatNumber(item.persen_utuh || 0),
+ persenPutih: formatNumber(item.persen_putih || 0),
+ persenRetak: formatNumber(item.persen_retak || 0),
+ persenPecah: formatNumber(item.persen_pecah || 0),
+ hd: formatNumber(item.hd || 0),
+ hdStd: formatNumber(item.hd_std || 0),
+ fi: formatNumber(item.fi || 0),
+ fiStd: formatNumber(item.fi_std || 0),
+ em: formatNumber(item.em || 0),
+ emStd: formatNumber(item.em_std || 0),
+ ew: formatNumber(item.ew || 0),
+ ewStd: formatNumber(item.ew_std || 0),
+ fcr: formatNumber(item.fcr || 0),
+ fcrStd: formatNumber(item.fcr_std || 0),
+ hh: formatNumber(item.hh || 0),
+ hhStd: formatNumber(item.hh_std || 0),
+ });
+ });
+
+ const currentDate = new Date().toISOString().split('T')[0];
+ const filename = params.period
+ ? `laporan-hasil-produksi-${params.period}.xlsx`
+ : `laporan-hasil-produksi-${currentDate}.xlsx`;
+
+ const buffer = await workbook.xlsx.writeBuffer();
+ const blob = new Blob([buffer], {
+ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ });
+ const url = window.URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = filename;
+ link.click();
+ window.URL.revokeObjectURL(url);
+};
diff --git a/src/components/pages/report/production-result/filter/ProductionResultFilter.ts b/src/components/pages/report/production-result/filter/ProductionResultFilter.ts
new file mode 100644
index 00000000..6df3759e
--- /dev/null
+++ b/src/components/pages/report/production-result/filter/ProductionResultFilter.ts
@@ -0,0 +1,59 @@
+import { OptionType } from '@/components/input/SelectInput';
+import * as yup from 'yup';
+
+export type ProductionResultFilterProps = {
+ area_id: string | null;
+ location_id: string | null;
+ project_flock_id: string | null;
+ kandang_id: string | null;
+};
+
+export type ProductionResultFilterFormType = {
+ area_id: OptionType | null;
+ location_id: OptionType | null;
+ project_flock_id: OptionType | null;
+ kandang_id: OptionType | null;
+};
+
+export const ProductionResultFilterSchema = yup.object({
+ area_id: yup
+ .mixed()
+ .required('Area wajib dipilih')
+ .test('is-not-empty', 'Area wajib dipilih', (value) => {
+ if (Array.isArray(value)) {
+ return value.length > 0;
+ }
+ return !!value;
+ }),
+ location_id: yup
+ .mixed()
+ .required('Lokasi wajib dipilih')
+ .test('is-not-empty', 'Lokasi wajib dipilih', (value) => {
+ if (Array.isArray(value)) {
+ return value.length > 0;
+ }
+ return !!value;
+ }),
+ project_flock_id: yup
+ .mixed()
+ .required('Project Flock wajib dipilih')
+ .test('is-not-empty', 'Project Flock wajib dipilih', (value) => {
+ if (Array.isArray(value)) {
+ return value.length > 0;
+ }
+ return !!value;
+ }),
+ kandang_id: yup
+ .mixed()
+ .required('Kandang wajib dipilih')
+ .test('is-not-empty', 'Kandang wajib dipilih', (value) => {
+ if (Array.isArray(value)) {
+ return value.length > 0;
+ }
+ return !!value;
+ }),
+}) as yup.ObjectSchema;
+
+export type ProductionResultFilterValues = yup.InferType<
+ typeof ProductionResultFilterSchema
+>;
diff --git a/src/components/pages/report/production-result/skeleton/ProductionResultSkeleton.tsx b/src/components/pages/report/production-result/skeleton/ProductionResultSkeleton.tsx
new file mode 100644
index 00000000..07d33233
--- /dev/null
+++ b/src/components/pages/report/production-result/skeleton/ProductionResultSkeleton.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { ProductionResult } from '@/types/api/report/production-result';
+import { ColumnDef } from '@tanstack/react-table';
+
+type ProductionResultColumn =
+ | ColumnDef
+ | {
+ header: string;
+ columns: Array<{
+ header: string;
+ accessorKey?: string;
+ cell?: (props: {
+ row: { original: ProductionResult };
+ }) => React.ReactNode;
+ }>;
+ };
+
+const ProductionResultSkeleton = ({
+ columns,
+ icon,
+ title,
+ subtitle,
+}: {
+ columns: ProductionResultColumn[];
+ icon: React.ReactNode;
+ title: string;
+ subtitle: string;
+}) => {
+ return (
+
+ );
+};
+
+export default ProductionResultSkeleton;
diff --git a/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx b/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx
new file mode 100644
index 00000000..9ac5faf6
--- /dev/null
+++ b/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx
@@ -0,0 +1,842 @@
+'use client';
+
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import useSWR from 'swr';
+import { generateProductionResultExcel } from '../export/ProductionResultExportXLSX';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Dropdown from '@/components/dropdown/Dropdown';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
+import ProductionResultProjectFlockKandangTable from '@/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTable';
+import { useFormik } from 'formik';
+import {
+ ProductionResultFilterSchema,
+ type ProductionResultFilterValues,
+} from '@/components/pages/report/production-result/filter/ProductionResultFilter';
+
+import { BaseKandang } from '@/types/api/master-data/kandang';
+import { AreaApi, LocationApi } from '@/services/api/master-data';
+import {
+ ProjectFlockApi,
+ ProjectFlockKandangApi,
+} from '@/services/api/production';
+import {
+ BaseProjectFlockKandang,
+ ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { ProductionResultReportApi } from '@/services/api/report/production-result';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { httpClient } from '@/services/http/client';
+import { ColumnDef } from '@tanstack/react-table';
+import { ProductionResult } from '@/types/api/report/production-result';
+import ProductionResultReportPDF from '../export/ProductionResultExportPDF';
+import { pdf } from '@react-pdf/renderer';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
+import Modal, { useModal } from '@/components/Modal';
+import { cn, formatNumber } from '@/lib/helper';
+import Pagination from '@/components/Pagination';
+import ProductionResultSkeleton from '@/components/pages/report/production-result/skeleton/ProductionResultSkeleton';
+
+interface ProductionResultTabProps {
+ tabId: string;
+}
+
+interface FilterParams {
+ area_id?: string;
+ location_id?: string;
+ project_flock_id?: string;
+ project_flock_kandang_id?: string;
+}
+
+const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
+ // ===== STATE MANAGEMENT =====
+ const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
+ const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
+ const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
+
+ // ===== SUBMISSION STATE =====
+ const [isSubmitted, setIsSubmitted] = useState(false);
+ const [filterParams, setFilterParams] = useState({});
+
+ // ===== PAGINATION STATE =====
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+
+ const filterModal = useModal();
+
+ // ===== TABLE COLUMNS =====
+ const productionResultColumns: ColumnDef[] = [
+ {
+ header: 'No',
+ cell: (props) => props.row.index + 1,
+ },
+ {
+ accessorKey: 'woa',
+ header: 'WOA',
+ },
+ {
+ accessorKey: 'bw',
+ header: 'BW',
+ cell: (props) => formatNumber(props.row.original.bw),
+ },
+ {
+ accessorKey: 'std_bw',
+ header: 'STD BW',
+ cell: (props) => formatNumber(props.row.original.std_bw),
+ },
+ {
+ accessorKey: 'uniformity',
+ header: 'Uniformity',
+ cell: (props) => formatNumber(props.row.original.uniformity),
+ },
+ {
+ accessorKey: 'std_uniformity',
+ header: 'STD Uniformity',
+ },
+ {
+ accessorKey: 'dep_kum',
+ header: 'Dep Kum',
+ cell: (props) => formatNumber(props.row.original.dep_kum),
+ },
+ {
+ accessorKey: 'dep_std',
+ header: 'Dep STD',
+ cell: (props) => formatNumber(props.row.original.dep_std),
+ },
+ {
+ header: 'Butiran',
+ columns: [
+ {
+ accessorKey: 'butiran_utuh',
+ header: 'Utuh',
+ cell: (props) => formatNumber(props.row.original.butiran_utuh),
+ },
+ {
+ accessorKey: 'butiran_putih',
+ header: 'Putih',
+ cell: (props) => formatNumber(props.row.original.butiran_putih),
+ },
+ {
+ accessorKey: 'butiran_retak',
+ header: 'Retak',
+ cell: (props) => formatNumber(props.row.original.butiran_retak),
+ },
+ {
+ accessorKey: 'butiran_pecah',
+ header: 'Pecah',
+ cell: (props) => formatNumber(props.row.original.butiran_pecah),
+ },
+ {
+ accessorKey: 'butiran_jumlah',
+ header: 'Jumlah (Butir)',
+ cell: (props) => formatNumber(props.row.original.butiran_jumlah),
+ },
+ {
+ accessorKey: 'total_butir',
+ header: 'Total Butir',
+ cell: (props) => formatNumber(props.row.original.total_butir),
+ },
+ ],
+ },
+ {
+ header: 'Kg',
+ columns: [
+ {
+ accessorKey: 'kg_utuh',
+ header: 'Utuh (Kg)',
+ cell: (props) => formatNumber(props.row.original.kg_utuh),
+ },
+ {
+ accessorKey: 'kg_putih',
+ header: 'Putih (Kg)',
+ cell: (props) => formatNumber(props.row.original.kg_putih),
+ },
+ {
+ accessorKey: 'kg_retak',
+ header: 'Retak (Kg)',
+ cell: (props) => formatNumber(props.row.original.kg_retak),
+ },
+ {
+ accessorKey: 'kg_pecah',
+ header: 'Pecah (Kg)',
+ cell: (props) => formatNumber(props.row.original.kg_pecah),
+ },
+ {
+ accessorKey: 'kg_jumlah',
+ header: 'Jumlah (Kg)',
+ cell: (props) => formatNumber(props.row.original.kg_jumlah),
+ },
+ {
+ accessorKey: 'total_kg',
+ header: 'Total Kg',
+ cell: (props) => formatNumber(props.row.original.total_kg),
+ },
+ ],
+ },
+ {
+ header: '%',
+ columns: [
+ {
+ accessorKey: 'persen_utuh',
+ header: 'Utuh',
+ cell: (props) => formatNumber(props.row.original.persen_utuh),
+ },
+ {
+ accessorKey: 'persen_putih',
+ header: 'Putih',
+ cell: (props) => formatNumber(props.row.original.persen_putih),
+ },
+ {
+ accessorKey: 'persen_retak',
+ header: 'Retak',
+ cell: (props) => formatNumber(props.row.original.persen_retak),
+ },
+ {
+ accessorKey: 'persen_pecah',
+ header: 'Pecah',
+ cell: (props) => formatNumber(props.row.original.persen_pecah),
+ },
+ ],
+ },
+ ];
+
+ // ===== FORMIK SETUP =====
+ const formik = useFormik({
+ initialValues: {
+ area_id: null,
+ location_id: null,
+ project_flock_id: null,
+ kandang_id: null,
+ },
+ validationSchema: ProductionResultFilterSchema,
+ validateOnBlur: true,
+ validateOnChange: true,
+ onSubmit: (values) => {
+ setFilterParams({
+ area_id: values.area_id?.value
+ ? String(values.area_id.value)
+ : undefined,
+ location_id: values.location_id?.value
+ ? String(values.location_id.value)
+ : undefined,
+ project_flock_id: values.project_flock_id?.value
+ ? String(values.project_flock_id.value)
+ : undefined,
+ project_flock_kandang_id: values.kandang_id?.value
+ ? String(values.kandang_id.value)
+ : undefined,
+ });
+ filterModal.closeModal();
+ setIsSubmitted(true);
+ setPage(1);
+ },
+ onReset: () => {
+ setFilterParams({});
+ setIsSubmitted(false);
+ setPage(1);
+ },
+ });
+
+ // ===== OPTIONS =====
+ const {
+ setInputValue: setAreaInputValue,
+ options: areaOptions,
+ isLoadingOptions: isLoadingAreas,
+ loadMore: loadMoreAreas,
+ } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
+
+ const {
+ setInputValue: setLocationInputValue,
+ options: locationOptions,
+ isLoadingOptions: isLoadingLocations,
+ loadMore: loadMoreLocations,
+ } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
+ area_id: formik.values.area_id?.value
+ ? String(formik.values.area_id.value)
+ : '',
+ });
+
+ const {
+ setInputValue: setProjectFlockInputValue,
+ options: projectFlockOptions,
+ isLoadingOptions: isLoadingProjectFlocks,
+ loadMore: loadMoreProjectFlocks,
+ } = useSelect(
+ ProjectFlockApi.basePath,
+ 'id',
+ 'flock_name',
+ 'search',
+ {
+ area_id: formik.values.area_id?.value
+ ? String(formik.values.area_id.value)
+ : '',
+ location_id: formik.values.location_id?.value
+ ? String(formik.values.location_id.value)
+ : '',
+ category: 'LAYING',
+ }
+ );
+
+ const {
+ setInputValue: setProjectFlockKandangInputValue,
+ options: projectFlockKandangOptions,
+ isLoadingOptions: isLoadingProjectFlockKandangs,
+ loadMore: loadMoreProjectFlockKandangs,
+ } = useSelect(
+ ProjectFlockKandangApi.basePath,
+ 'id',
+ 'kandang.name',
+ 'search',
+ {
+ area_id: formik.values.area_id?.value
+ ? String(formik.values.area_id.value)
+ : '',
+ location_id: formik.values.location_id?.value
+ ? String(formik.values.location_id.value)
+ : '',
+ project_flock_id: formik.values.project_flock_id?.value
+ ? String(formik.values.project_flock_id.value)
+ : '',
+ }
+ );
+
+ // ===== FILTER HELPERS =====
+ const areaValue = useMemo(
+ () => formik.values.area_id,
+ [formik.values.area_id]
+ );
+
+ const locationValue = useMemo(
+ () => formik.values.location_id,
+ [formik.values.location_id]
+ );
+
+ const projectFlockValue = useMemo(
+ () => formik.values.project_flock_id,
+ [formik.values.project_flock_id]
+ );
+
+ const projectFlockKandangValue = useMemo(
+ () => formik.values.kandang_id,
+ [formik.values.kandang_id]
+ );
+
+ // ===== ACTIVE FILTERS COUNT =====
+ const activeFiltersCount = useMemo(() => {
+ let count = 0;
+
+ if (filterParams.area_id) count += 1;
+ if (filterParams.location_id) count += 1;
+ if (filterParams.project_flock_id) count += 1;
+ if (filterParams.project_flock_kandang_id) count += 1;
+
+ return count;
+ }, [filterParams]);
+
+ const hasFilters = activeFiltersCount > 0;
+
+ // ===== DATA FETCHING =====
+ const { data: projectFlockKandangsData, isLoading } = useSWR<
+ BaseApiResponse
+ >(
+ isSubmitted
+ ? () => {
+ const params = new URLSearchParams();
+ if (filterParams.area_id)
+ params.append('area_id', filterParams.area_id);
+ if (filterParams.project_flock_id)
+ params.append('project_flock_id', filterParams.project_flock_id);
+ params.append('page', String(page));
+ params.append('limit', String(pageSize));
+
+ return [`/production/project-flock-kandangs?${params.toString()}`];
+ }
+ : null,
+ ([url]: string[]) => httpClient>(url)
+ );
+
+ const projectFlockKandangs = useMemo(
+ () =>
+ isResponseSuccess(projectFlockKandangsData)
+ ? projectFlockKandangsData.data
+ : null,
+ [projectFlockKandangsData]
+ );
+
+ const projectFlockKandangMetadata = useMemo(
+ () =>
+ isResponseSuccess(projectFlockKandangsData)
+ ? projectFlockKandangsData.meta
+ : undefined,
+ [projectFlockKandangsData]
+ );
+
+ // ===== EXPORT HANDLERS =====
+ const exportToExcelHandler = useCallback(async () => {
+ setIsExcelExportLoading(true);
+
+ try {
+ let projectFlockKandangsFetch: BaseProjectFlockKandang[] = [];
+
+ if (filterParams.project_flock_kandang_id) {
+ const projectFlockKandangResponse =
+ await ProjectFlockKandangApi.getSingle(
+ Number(filterParams.project_flock_kandang_id)
+ );
+
+ projectFlockKandangsFetch = isResponseSuccess(
+ projectFlockKandangResponse
+ )
+ ? [projectFlockKandangResponse.data]
+ : [];
+ } else {
+ const projectFlockKandangsResponse =
+ await ProjectFlockKandangApi.getAll({
+ area_id: filterParams.area_id,
+ project_flock_id: filterParams.project_flock_id,
+ });
+
+ projectFlockKandangsFetch = isResponseSuccess(
+ projectFlockKandangsResponse
+ )
+ ? projectFlockKandangsResponse.data
+ : [];
+ }
+
+ const productionResultData: ProductionResult[] = [];
+
+ for (const kandang of projectFlockKandangsFetch) {
+ const getProductionResultPath = `${ProductionResultReportApi.basePath}/${kandang.id}?page=1&limit=100`;
+ const getProductionResultRes = await httpClient<
+ BaseApiResponse
+ >(getProductionResultPath);
+
+ if (isResponseSuccess(getProductionResultRes)) {
+ productionResultData.push(
+ ...(getProductionResultRes.data?.map((result) => ({
+ ...result,
+ project_flock: {
+ ...result.project_flock,
+ name:
+ projectFlockValue?.label ||
+ kandang.project_flock?.name ||
+ `Project Flock #${kandang.project_flock_id}`,
+ category: kandang.project_flock?.category || '',
+ kandang: {
+ ...result.project_flock?.kandang,
+ name:
+ kandang.kandang?.name || `Kandang #${kandang.kandang_id}`,
+ },
+ },
+ })) || [])
+ );
+ }
+ }
+
+ if (productionResultData.length === 0) {
+ toast.error('Tidak ada data untuk diexport.');
+ setIsExcelExportLoading(false);
+ return;
+ }
+
+ await generateProductionResultExcel({
+ data: productionResultData,
+ period: '',
+ });
+ } catch {
+ toast.error('Gagal melakukan export laporan hasil produksi! Coba lagi.');
+ } finally {
+ setIsExcelExportLoading(false);
+ }
+ }, [filterParams, projectFlockValue]);
+
+ const exportToPdfHandler = useCallback(async () => {
+ setIsPdfExportLoading(true);
+
+ try {
+ let projectFlockKandangsFetch: BaseProjectFlockKandang[] = [];
+
+ if (filterParams.project_flock_kandang_id) {
+ const projectFlockKandangResponse =
+ await ProjectFlockKandangApi.getSingle(
+ Number(filterParams.project_flock_kandang_id)
+ );
+
+ projectFlockKandangsFetch = isResponseSuccess(
+ projectFlockKandangResponse
+ )
+ ? [projectFlockKandangResponse.data]
+ : [];
+ } else {
+ const projectFlockKandangsResponse =
+ await ProjectFlockKandangApi.getAll({
+ area_id: filterParams.area_id,
+ project_flock_id: filterParams.project_flock_id,
+ });
+
+ projectFlockKandangsFetch = isResponseSuccess(
+ projectFlockKandangsResponse
+ )
+ ? projectFlockKandangsResponse.data
+ : [];
+ }
+
+ const mappedProductionResults: {
+ projectFlockKandang: BaseProjectFlockKandang;
+ productionResult: ProductionResult[] | null;
+ }[] = await Promise.all(
+ projectFlockKandangsFetch.map(async (projectFlockKandang) => {
+ const getProductionResultPath = `${ProductionResultReportApi.basePath}/${projectFlockKandang.id}?page=1&limit=100`;
+ const getProductionResultRes = await httpClient<
+ BaseApiResponse
+ >(getProductionResultPath);
+
+ return {
+ projectFlockKandang,
+ productionResult: isResponseSuccess(getProductionResultRes)
+ ? getProductionResultRes.data
+ : null,
+ };
+ })
+ );
+
+ if (mappedProductionResults.length === 0) {
+ toast.error('Tidak ada data untuk diexport.');
+ setIsPdfExportLoading(false);
+ return;
+ }
+
+ const openPdf = async () => {
+ const productionResultPdfBlob = await pdf(
+
+
filterModal.openModal()}
+ 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,
+ }
+ )}
+ >
+
+ {activeFiltersCount}
+
+ )}
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+ {!isSubmitted ? (
+
+ }
+ title='No Filters Selected'
+ subtitle='Please choose filters to narrow down your results and make your search easier.'
+ />
+ ) : isLoading ? (
+
+
+ ) : !projectFlockKandangs || projectFlockKandangs.length === 0 ? (
+
+ }
+ title='Data Not Yet Available'
+ subtitle='Please change your filters to get the data.'
+ />
+ ) : (
+ <>
+ {projectFlockKandangs.map(
+ (projectFlockKandang: ProjectFlockKandang) => (
+
+ )
+ )}
+
+
+
+ setPage((currPage) =>
+ currPage > 1 ? currPage - 1 : currPage
+ )
+ }
+ onNextPage={() =>
+ setPage((currPage) =>
+ projectFlockKandangMetadata?.total_pages &&
+ currPage < projectFlockKandangMetadata.total_pages
+ ? currPage + 1
+ : currPage
+ )
+ }
+ onPageChange={(pageNumber) => setPage(pageNumber)}
+ rowOptions={[10, 20, 50, 100]}
+ onRowChange={setPageSize}
+ />
+
+
+ )}
+
+ {/* Modal Header */}
+
+
+
Filter Data
+
+
+
+
+
+ );
+};
+
+export default ProductionResultContent;
diff --git a/src/components/pages/report/production-result/ProductionResultProjectFlockKandangTable.tsx b/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTable.tsx
similarity index 73%
rename from src/components/pages/report/production-result/ProductionResultProjectFlockKandangTable.tsx
rename to src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTable.tsx
index e1dfd515..ded97d02 100644
--- a/src/components/pages/report/production-result/ProductionResultProjectFlockKandangTable.tsx
+++ b/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTable.tsx
@@ -4,12 +4,10 @@ import { useEffect, useState } from 'react';
import useSWR from 'swr';
import { ColumnDef, SortingState } from '@tanstack/react-table';
-import { Icon } from '@iconify/react';
import Table from '@/components/Table';
import Card from '@/components/Card';
-import Collapse from '@/components/Collapse';
-import { cn, formatNumber } from '@/lib/helper';
+import { formatNumber } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
import { ProductionResult } from '@/types/api/report/production-result';
import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -52,8 +50,6 @@ const ProductionResultProjectFlockKandangTable = ({
}
);
- const [open, setOpen] = useState(false);
-
const [sorting, setSorting] = useState([]);
const productionResultColumns: ColumnDef[] = [
@@ -270,93 +266,60 @@ const ProductionResultProjectFlockKandangTable = ({
}
}, [sorting]);
- useEffect(() => {
- if (!open) {
- setOpen(
+ return (
+ 0
: false
- );
- }
- }, [productionResults, isResponseSuccess]);
-
- return (
-
-
- {kandangName}
-
-
+ data={
+ isResponseSuccess(productionResults) ? productionResults?.data : []
}
- className='w-full!'
- titleClassName='w-full p-0!'
- >
-
- {/*
*/}
-
-
- data={
- isResponseSuccess(productionResults)
- ? productionResults?.data
- : []
- }
- columns={productionResultColumns}
- pageSize={tableFilterState.pageSize}
- onPageSizeChange={setPageSize}
- rowOptions={[10, 20, 50, 100]}
- page={
- isResponseSuccess(productionResults)
- ? productionResults?.meta?.page
- : 0
- }
- totalItems={
- isResponseSuccess(productionResults)
- ? productionResults?.meta?.total_results
- : 0
- }
- onPageChange={setPage}
- isLoading={isLoadingProductionResults}
- sorting={sorting}
- setSorting={setSorting}
- renderFooter={false}
- className={{
- containerClassName: cn({
- 'w-full mb-20':
- isResponseSuccess(productionResults) &&
- productionResults?.data?.length === 0,
- }),
- headerColumnClassName:
- 'px-4 py-3 border-x border-base-content/10 text-base-content/50',
- }}
- />
-
+ columns={productionResultColumns}
+ pageSize={tableFilterState.pageSize}
+ onPageSizeChange={setPageSize}
+ rowOptions={[10, 20, 50, 100]}
+ page={
+ isResponseSuccess(productionResults)
+ ? productionResults?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(productionResults)
+ ? productionResults?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoadingProductionResults}
+ sorting={sorting}
+ setSorting={setSorting}
+ renderFooter={false}
+ className={{
+ containerClassName: 'w-full mb-0!',
+ tableWrapperClassName:
+ 'overflow-x-auto rounded-tr-none rounded-tl-none',
+ tableClassName: 'w-full table-auto text-sm',
+ headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+ headerColumnClassName:
+ 'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
+ bodyRowClassName:
+ 'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+ bodyColumnClassName:
+ 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+ }}
+ />
);
};
diff --git a/src/stores/finance-tab/finance-tab.store.ts b/src/stores/finance-tab/finance-tab.store.ts
deleted file mode 100644
index 9b5cf096..00000000
--- a/src/stores/finance-tab/finance-tab.store.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-
-import { ReactNode } from 'react';
-import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-
-export type FinanceTabActionsSlice = {
- // State - actions per tab ID
- tabActions: Record;
-
- // Actions
- setTabActions: (tabId: string, actions: ReactNode) => void;
- clearTabActions: (tabId: string) => void;
- clearAllTabActions: () => void;
-};
-
-export const useFinanceTabStore = create()(
- devtools(
- (set) => ({
- tabActions: {},
-
- setTabActions: (tabId, actions) =>
- set(
- (state) => ({
- tabActions: {
- ...state.tabActions,
- [tabId]: actions,
- },
- }),
- false,
- 'setTabActions'
- ),
-
- clearTabActions: (tabId) =>
- set(
- (state) => {
- const { [tabId]: _, ...rest } = state.tabActions;
- return { tabActions: rest };
- },
- false,
- 'clearTabActions'
- ),
-
- clearAllTabActions: () =>
- set({ tabActions: {} }, false, 'clearAllTabActions'),
- }),
- {
- name: 'FinanceTabStore',
- }
- )
-);
diff --git a/src/stores/project-flock/project-flock.store.ts b/src/stores/production/project-flock/project-flock.store.ts
similarity index 79%
rename from src/stores/project-flock/project-flock.store.ts
rename to src/stores/production/project-flock/project-flock.store.ts
index 61efcb97..97402132 100644
--- a/src/stores/project-flock/project-flock.store.ts
+++ b/src/stores/production/project-flock/project-flock.store.ts
@@ -2,7 +2,7 @@
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
-import { createProjectFlockSlice } from '@/stores/project-flock/slices/project-flock.slice';
+import { createProjectFlockSlice } from '@/stores/production/project-flock/slices/project-flock.slice';
import { ProjectFlockSlice } from '@/types/stores';
export type ProjectFlockStore = ProjectFlockSlice;
diff --git a/src/stores/project-flock/slices/project-flock.slice.ts b/src/stores/production/project-flock/slices/project-flock.slice.ts
similarity index 100%
rename from src/stores/project-flock/slices/project-flock.slice.ts
rename to src/stores/production/project-flock/slices/project-flock.slice.ts
diff --git a/src/stores/uniformity/slices/uniformity.slice.ts b/src/stores/production/uniformity/slices/uniformity.slice.ts
similarity index 100%
rename from src/stores/uniformity/slices/uniformity.slice.ts
rename to src/stores/production/uniformity/slices/uniformity.slice.ts
diff --git a/src/stores/uniformity/uniformity.store.ts b/src/stores/production/uniformity/uniformity.store.ts
similarity index 80%
rename from src/stores/uniformity/uniformity.store.ts
rename to src/stores/production/uniformity/uniformity.store.ts
index c8d759d6..740d10b6 100644
--- a/src/stores/uniformity/uniformity.store.ts
+++ b/src/stores/production/uniformity/uniformity.store.ts
@@ -2,7 +2,7 @@
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
-import { createUniformitySlice } from '@/stores/uniformity/slices/uniformity.slice';
+import { createUniformitySlice } from '@/stores/production/uniformity/slices/uniformity.slice';
import { UniformitySlice } from '@/types/stores';
export type UniformityStore = UniformitySlice;
diff --git a/src/stores/report/report-tab.store.ts b/src/stores/report/report-tab.store.ts
new file mode 100644
index 00000000..aad47d17
--- /dev/null
+++ b/src/stores/report/report-tab.store.ts
@@ -0,0 +1,21 @@
+'use client';
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import {
+ createReportTabSlice,
+ ReportTabSlice,
+} from '@/stores/report/slices/report-tab.slice';
+
+export type ReportTabStore = ReportTabSlice;
+
+export const useReportTabStore = create()(
+ devtools(
+ (...args) => ({
+ ...createReportTabSlice(...args),
+ }),
+ {
+ name: 'ReportTabStore',
+ }
+ )
+);
diff --git a/src/stores/report/slices/report-tab.slice.ts b/src/stores/report/slices/report-tab.slice.ts
new file mode 100644
index 00000000..6582eaed
--- /dev/null
+++ b/src/stores/report/slices/report-tab.slice.ts
@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { StateCreator } from 'zustand';
+
+export type ReportTabSlice = {
+ // State - actions per tab ID
+ tabActions: Record;
+
+ // Actions
+ setTabActions: (tabId: string, actions: ReactNode) => void;
+ clearTabActions: (tabId: string) => void;
+ clearAllTabActions: () => void;
+};
+
+export const createReportTabSlice: StateCreator<
+ ReportTabSlice,
+ [],
+ [],
+ ReportTabSlice
+> = (set) => ({
+ tabActions: {},
+
+ setTabActions: (tabId, actions) =>
+ set((state) => ({
+ tabActions: {
+ ...state.tabActions,
+ [tabId]: actions,
+ },
+ })),
+
+ clearTabActions: (tabId) =>
+ set((state) => {
+ const { [tabId]: _, ...rest } = state.tabActions;
+ return { tabActions: rest };
+ }),
+
+ clearAllTabActions: () => set({ tabActions: {} }),
+});
diff --git a/src/types/api/inventory/product.d.ts b/src/types/api/inventory/product.d.ts
index f75e4060..134b982a 100644
--- a/src/types/api/inventory/product.d.ts
+++ b/src/types/api/inventory/product.d.ts
@@ -38,6 +38,7 @@ export type StockLog = {
id: number;
increase: number;
decrease: number;
+ stock: number;
loggable_type: string;
loggable_id: number;
notes: string;