mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-21 13:55:45 +00:00
Merge branch 'development' of gitlab.com:mbugroup/lti-web-client into feat/FE/US-281-439/TASK-440-441-recording-page-and-form-adjustment
This commit is contained in:
rstubryan
@@ -25,9 +25,9 @@ const ClosingGeneralInformationTable = ({
|
||||
<td>{initialValue?.period}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kategori</td>
|
||||
<td>Project Flock</td>
|
||||
<td>:</td>
|
||||
<td>{initialValue?.project_category}</td>
|
||||
<td>{initialValue?.project_flock?.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Populasi</td>
|
||||
|
||||
@@ -126,28 +126,6 @@ const ClosingsTable = () => {
|
||||
accessorKey: 'shed_label',
|
||||
header: 'Jumlah Kandang',
|
||||
},
|
||||
{
|
||||
accessorKey: 'sales_paid_amount',
|
||||
header: 'Jumlah Sudah Bayar',
|
||||
cell: (props) => (
|
||||
<span className='text-success'>
|
||||
{formatCurrency(props.row.original.sales_paid_amount)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'sales_remaining_amount',
|
||||
header: 'Jumlah Sisa Bayar',
|
||||
cell: (props) => (
|
||||
<span className='text-error'>
|
||||
{formatCurrency(props.row.original.sales_remaining_amount)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'sales_payment_status',
|
||||
header: 'Status Pembayaran',
|
||||
},
|
||||
{
|
||||
accessorKey: 'project_status',
|
||||
header: 'Status',
|
||||
|
||||
@@ -0,0 +1,409 @@
|
||||
'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 { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
import Pagination from '@/components/Pagination';
|
||||
|
||||
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 [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
|
||||
const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
|
||||
null
|
||||
);
|
||||
const [selectedProjectFlock, setSelectedProjectFlock] =
|
||||
useState<OptionType | null>(null);
|
||||
const [selectedProjectFlockKandang, setSelectedProjectFlockKandang] =
|
||||
useState<OptionType | null>(null);
|
||||
|
||||
const {
|
||||
setInputValue: setAreaInputValue,
|
||||
options: areaOptions,
|
||||
isLoadingOptions: isLoadingAreaOptions,
|
||||
} = useSelect<BaseKandang>(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,
|
||||
} = useSelect<BaseKandang>(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,
|
||||
} = useSelect<BaseKandang>(
|
||||
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,
|
||||
} = useSelect<BaseKandang>(
|
||||
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);
|
||||
// TODO: Implement export functionality in API service first if needed
|
||||
toast.error('Fitur export belum tersedia');
|
||||
setIsLoadingExportingToExcel(false);
|
||||
};
|
||||
|
||||
const searchHandler = async () => {
|
||||
setProjectFlockKandangs(null);
|
||||
setIsLoadingSearch(true);
|
||||
|
||||
try {
|
||||
if (selectedProjectFlockKandang) {
|
||||
const projectFlockKandangResponse =
|
||||
await ProjectFlockKandangApi.getSingle(
|
||||
selectedProjectFlockKandang?.value as number
|
||||
);
|
||||
|
||||
if (
|
||||
!projectFlockKandangResponse ||
|
||||
isResponseError(projectFlockKandangResponse)
|
||||
) {
|
||||
throw new Error();
|
||||
}
|
||||
|
||||
setProjectFlockKandangs([projectFlockKandangResponse.data]);
|
||||
setProjectFlockKandangMetadata(projectFlockKandangResponse.meta);
|
||||
setIsLoadingSearch(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const projectFlockKandangsResponse = await ProjectFlockKandangApi.getAll({
|
||||
area_id: selectedArea?.value,
|
||||
project_flock_id: selectedProjectFlock?.value,
|
||||
});
|
||||
|
||||
if (
|
||||
!projectFlockKandangsResponse ||
|
||||
isResponseError(projectFlockKandangsResponse)
|
||||
) {
|
||||
throw new Error();
|
||||
}
|
||||
|
||||
setProjectFlockKandangs(projectFlockKandangsResponse.data);
|
||||
setProjectFlockKandangMetadata(projectFlockKandangsResponse.meta);
|
||||
setIsLoadingSearch(false);
|
||||
} catch (error) {
|
||||
toast.error('Gagal mencari data! Coba lagi.');
|
||||
setProjectFlockKandangs(null);
|
||||
setProjectFlockKandangMetadata(undefined);
|
||||
setIsLoadingSearch(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetHandler = () => {
|
||||
setProjectFlockKandangs(null);
|
||||
setSelectedArea(null);
|
||||
setSelectedLocation(null);
|
||||
setSelectedProjectFlock(null);
|
||||
setSelectedProjectFlockKandang(null);
|
||||
// resetFilter();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
<Card
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2 className='text-xl font-bold text-center'>
|
||||
Laporan Hasil Produksi
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className='flex flex-col gap-4 mb-6 mt-4'>
|
||||
<div className='grid grid-cols-12 gap-4'>
|
||||
<SelectInput
|
||||
label='Area'
|
||||
placeholder='Pilih Area'
|
||||
options={areaOptions}
|
||||
isLoading={isLoadingAreaOptions}
|
||||
value={selectedArea}
|
||||
onChange={areaChangeHandler}
|
||||
onInputChange={setAreaInputValue}
|
||||
isClearable
|
||||
className={{
|
||||
wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
|
||||
}}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Lokasi'
|
||||
placeholder={
|
||||
selectedArea ? 'Pilih Lokasi' : 'Pilih Area terlebih dahulu'
|
||||
}
|
||||
options={locationOptions}
|
||||
isLoading={isLoadingLocationOptions}
|
||||
value={selectedLocation}
|
||||
onChange={locationChangeHandler}
|
||||
onInputChange={setLocationInputValue}
|
||||
isClearable
|
||||
isDisabled={!selectedArea}
|
||||
className={{
|
||||
wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
|
||||
}}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Project Flock'
|
||||
placeholder={
|
||||
selectedArea && selectedLocation
|
||||
? 'Pilih Project Flock'
|
||||
: 'Pilih Area dan Lokasi terlebih dahulu'
|
||||
}
|
||||
options={projectFlockOptions}
|
||||
isLoading={isLoadingProjectFlockOptions}
|
||||
value={selectedProjectFlock}
|
||||
onChange={projectFlockChangeHandler}
|
||||
onInputChange={setProjectFlockInputValue}
|
||||
isClearable
|
||||
isDisabled={!selectedArea || !selectedLocation}
|
||||
className={{
|
||||
wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
|
||||
}}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Project Flock Kandang'
|
||||
placeholder={
|
||||
selectedProjectFlock
|
||||
? 'Pilih Project Flock Kandang'
|
||||
: 'Pilih Project Flock terlebih dahulu'
|
||||
}
|
||||
options={projectFlockKandangOptions}
|
||||
isLoading={isLoadingProjectFlockKandangOptions}
|
||||
value={selectedProjectFlockKandang}
|
||||
onChange={projectFlockKandangChangeHandler}
|
||||
onInputChange={setProjectFlockKandangInputValue}
|
||||
isClearable
|
||||
isDisabled={!selectedProjectFlock}
|
||||
className={{
|
||||
wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-12 gap-4'>
|
||||
<div className='col-span-12 flex flex-wrap sm:justify-end items-end gap-2'>
|
||||
<Button
|
||||
onClick={searchHandler}
|
||||
isLoading={isLoadingSearch}
|
||||
disabled={
|
||||
!selectedArea || !selectedLocation || !selectedProjectFlock
|
||||
}
|
||||
className='flex-1 sm:flex-none'
|
||||
>
|
||||
<Icon icon='heroicons-outline:search' width={20} height={20} />
|
||||
Cari
|
||||
</Button>
|
||||
<Button
|
||||
color='warning'
|
||||
onClick={resetHandler}
|
||||
className='flex-1 sm:flex-none'
|
||||
>
|
||||
<Icon icon='heroicons-outline:refresh' width={20} height={20} />
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
<Dropdown
|
||||
align='end'
|
||||
direction='bottom'
|
||||
trigger={
|
||||
<Button>
|
||||
Export{' '}
|
||||
<Icon
|
||||
icon='heroicons-outline:download'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Menu>
|
||||
<MenuItem
|
||||
title='Export to Excel'
|
||||
icon='icon-park-outline:excel'
|
||||
isLoading={isLoadingExportingToExcel}
|
||||
onClick={exportToExcelHandler}
|
||||
className='text-nowrap'
|
||||
/>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className='mt-4'>
|
||||
{isLoadingSearch && (
|
||||
<span className='loading loading-dots loading-xl block mx-auto text-gray-400' />
|
||||
)}
|
||||
|
||||
{!isLoadingSearch && !projectFlockKandangs && (
|
||||
<p className='text-center text-gray-500'>
|
||||
Silakan pilih filter dan klik tombol Cari untuk menampilkan data.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isLoadingSearch && projectFlockKandangs?.length === 0 && (
|
||||
<p className='text-center text-gray-500'>
|
||||
Tidak ada data kandang project flock yang dapat ditampilkan.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isLoadingSearch && projectFlockKandangs && (
|
||||
<Card
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
{projectFlockKandangs.map((projectFlockKandang) => (
|
||||
<ProductionResultProjectFlockKandangTable
|
||||
key={projectFlockKandang.id}
|
||||
projectFlockKandangId={projectFlockKandang.id}
|
||||
kandangName={projectFlockKandang.kandang.name}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className='max-w-sm ml-auto mt-5'>
|
||||
<Pagination
|
||||
totalItems={projectFlockKandangMetadata?.total_results || 0}
|
||||
itemsPerPage={projectFlockKandangMetadata?.limit || 0}
|
||||
currentPage={projectFlockKandangMetadata?.page || 0}
|
||||
onPrevPage={() =>
|
||||
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}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionResultContent;
|
||||
+364
@@ -0,0 +1,364 @@
|
||||
'use client';
|
||||
|
||||
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 { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ProductionResult } from '@/types/api/report/production-result';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { ProductionResultReportApi } from '@/services/api/report/production-result';
|
||||
|
||||
interface ProductionResultProjectFlockKandangTableProps {
|
||||
projectFlockKandangId?: number;
|
||||
kandangName?: string;
|
||||
}
|
||||
|
||||
const ProductionResultProjectFlockKandangTable = ({
|
||||
projectFlockKandangId,
|
||||
kandangName,
|
||||
}: ProductionResultProjectFlockKandangTableProps) => {
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
reset: resetFilter,
|
||||
} = useTableFilter({
|
||||
initial: {
|
||||
filter_by: '',
|
||||
sort_by: '',
|
||||
},
|
||||
paramMap: {
|
||||
pageSize: 'limit',
|
||||
},
|
||||
});
|
||||
|
||||
const { data: productionResults, isLoading: isLoadingProductionResults } =
|
||||
useSWR(
|
||||
projectFlockKandangId
|
||||
? `/reports/production-result/${projectFlockKandangId}${getTableFilterQueryString()}`
|
||||
: null,
|
||||
ProductionResultReportApi.getAllProductionResultFetcher,
|
||||
{
|
||||
keepPreviousData: true,
|
||||
}
|
||||
);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
|
||||
const productionResultColumns: ColumnDef<ProductionResult>[] = [
|
||||
{
|
||||
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),
|
||||
},
|
||||
// Butiran
|
||||
{
|
||||
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),
|
||||
},
|
||||
],
|
||||
},
|
||||
// Kg
|
||||
{
|
||||
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),
|
||||
},
|
||||
],
|
||||
},
|
||||
// Persen
|
||||
{
|
||||
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),
|
||||
},
|
||||
],
|
||||
},
|
||||
// Produksi
|
||||
{
|
||||
header: 'Produksi',
|
||||
columns: [
|
||||
{
|
||||
accessorKey: 'hd',
|
||||
header: 'HD',
|
||||
cell: (props) => formatNumber(props.row.original.hd),
|
||||
},
|
||||
{
|
||||
accessorKey: 'hd_std',
|
||||
header: 'HD STD',
|
||||
cell: (props) => formatNumber(props.row.original.hd_std),
|
||||
},
|
||||
{
|
||||
accessorKey: 'fi',
|
||||
header: 'FI',
|
||||
cell: (props) => formatNumber(props.row.original.fi),
|
||||
},
|
||||
{
|
||||
accessorKey: 'fi_std',
|
||||
header: 'FI STD',
|
||||
cell: (props) => formatNumber(props.row.original.fi_std),
|
||||
},
|
||||
{
|
||||
accessorKey: 'em',
|
||||
header: 'EM',
|
||||
cell: (props) => formatNumber(props.row.original.em),
|
||||
},
|
||||
{
|
||||
accessorKey: 'em_std',
|
||||
header: 'EM STD',
|
||||
cell: (props) => formatNumber(props.row.original.em_std),
|
||||
},
|
||||
{
|
||||
accessorKey: 'ew',
|
||||
header: 'EW',
|
||||
cell: (props) => formatNumber(props.row.original.ew),
|
||||
},
|
||||
{
|
||||
accessorKey: 'ew_std',
|
||||
header: 'EW STD',
|
||||
cell: (props) => formatNumber(props.row.original.ew_std),
|
||||
},
|
||||
{
|
||||
accessorKey: 'fcr',
|
||||
header: 'FCR',
|
||||
cell: (props) => formatNumber(props.row.original.fcr),
|
||||
},
|
||||
{
|
||||
accessorKey: 'fcr_std',
|
||||
header: 'FCR STD',
|
||||
cell: (props) => formatNumber(props.row.original.fcr_std),
|
||||
},
|
||||
{
|
||||
accessorKey: 'hh',
|
||||
header: 'HH',
|
||||
cell: (props) => formatNumber(props.row.original.hh),
|
||||
},
|
||||
{
|
||||
accessorKey: 'hh_std',
|
||||
header: 'HH STD',
|
||||
cell: (props) => formatNumber(props.row.original.hh_std),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (sorting.length === 1) {
|
||||
updateFilter('filter_by', sorting[0].id);
|
||||
updateFilter('sort_by', sorting[0].desc ? 'desc' : 'asc');
|
||||
} else {
|
||||
updateFilter('filter_by', '');
|
||||
updateFilter('sort_by', '');
|
||||
}
|
||||
}, [sorting]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setOpen(
|
||||
isResponseSuccess(productionResults)
|
||||
? productionResults.data.length > 0
|
||||
: false
|
||||
);
|
||||
}
|
||||
}, [productionResults, isResponseSuccess]);
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
body: 'p-4 shadow',
|
||||
}}
|
||||
>
|
||||
<Collapse
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
title={
|
||||
<div className='card-actions p-4 justify-between items-center w-full'>
|
||||
<div className='card-title'>{kandangName}</div>
|
||||
|
||||
<Icon
|
||||
icon='material-symbols:keyboard-arrow-down'
|
||||
width={24}
|
||||
height={24}
|
||||
className={cn('text-primary transition-transform', {
|
||||
'-rotate-180': open,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
className='w-full!'
|
||||
titleClassName='w-full p-0!'
|
||||
>
|
||||
<div className='w-full p-0'>
|
||||
{/* <div className='flex flex-col gap-2 mb-4'>
|
||||
<div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
placeholder='Cari Record'
|
||||
value={tableFilterState.search}
|
||||
onChange={searchChangeHandler}
|
||||
className={{ wrapper: 'sm:max-w-3xs' }}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<Table<ProductionResult>
|
||||
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-base-content/10 text-base-content/50',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Collapse>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionResultProjectFlockKandangTable;
|
||||
Reference in New Issue
Block a user