mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'feat/FE/US-81/production-result-report' into 'development'
[FEAT/FE][US#81/TASK-442] Production Result Report See merge request mbugroup/lti-web-client!123
This commit is contained in:
Rivaldi A N S
@@ -0,0 +1,11 @@
|
||||
import ProductionResultContent from '@/components/pages/report/production-result/ProductionResultContent';
|
||||
|
||||
const ProductionResultReportPage = () => {
|
||||
return (
|
||||
<section className='w-full max-w-7xl pb-16'>
|
||||
<ProductionResultContent />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionResultReportPage;
|
||||
@@ -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;
|
||||
@@ -76,6 +76,10 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
|
||||
text: 'Penjualan',
|
||||
link: '/report/marketing',
|
||||
},
|
||||
{
|
||||
text: 'Hasil Produksi',
|
||||
link: '/report/production-result',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -88,6 +88,7 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
|
||||
'/report/logistic-stock/': ['lti.repport.purchasesupplier.list'],
|
||||
'/report/expense/': ['lti.repport.expense.list'],
|
||||
'/report/marketing/': ['lti.repport.delivery.list'],
|
||||
'/report/production-result/': ['lti.repport.production_result.list'],
|
||||
|
||||
// Inventory
|
||||
'/inventory/adjustment/': ['lti.inventory.list'],
|
||||
|
||||
@@ -15,6 +15,22 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
|
||||
return await httpClientFetcher<BaseApiResponse<T[]>>(endpoint);
|
||||
}
|
||||
|
||||
async getAll(query?: Record<string, unknown>) {
|
||||
try {
|
||||
const getAllPath = this.basePath;
|
||||
const getAllRes = await httpClient<BaseApiResponse<T[]>>(getAllPath, {
|
||||
query,
|
||||
});
|
||||
|
||||
return getAllRes;
|
||||
} catch (error) {
|
||||
if (axios.isAxiosError<BaseApiResponse<T[]>>(error)) {
|
||||
return error.response?.data;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async getSingle(id: number) {
|
||||
try {
|
||||
const getSinglePath = `${this.basePath}/${id}`;
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
import { sleep } from '@/lib/helper';
|
||||
import { BaseApiService } from '@/services/api/base';
|
||||
import { httpClientFetcher } from '@/services/http/client';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import { ProductionResult } from '@/types/api/report/production-result';
|
||||
|
||||
// TODO: delete this dummy data
|
||||
const PRODUCTION_RESULT_DUMMY_DATA: BaseApiResponse<ProductionResult[]> = {
|
||||
code: 200,
|
||||
status: 'success',
|
||||
message: 'Get Laporan Hasil Produksi successfully',
|
||||
meta: {
|
||||
page: 1,
|
||||
limit: 1,
|
||||
total_pages: 2,
|
||||
total_results: 2,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 1001,
|
||||
email: 'user@example.com',
|
||||
name: 'John Doe',
|
||||
},
|
||||
project_flock: {
|
||||
id: 1,
|
||||
name: 'PROJECT',
|
||||
category: 'LAYING',
|
||||
kandang: {
|
||||
id: 1,
|
||||
name: 'Cikaum',
|
||||
},
|
||||
},
|
||||
created_at: '2025-01-01T08:00:00Z',
|
||||
updated_at: '2025-01-02T10:30:00Z',
|
||||
|
||||
woa: 25,
|
||||
|
||||
bw: 62.5,
|
||||
std_bw: 60,
|
||||
uniformity: 88,
|
||||
std_uniformity: '90% up',
|
||||
|
||||
dep_kum: 3.2,
|
||||
dep_std: 2.5,
|
||||
|
||||
butiran_utuh: 850,
|
||||
butiran_putih: 50,
|
||||
butiran_retak: 70,
|
||||
butiran_pecah: 30,
|
||||
butiran_jumlah: 1000,
|
||||
total_butir: 1000,
|
||||
|
||||
kg_utuh: 52.3,
|
||||
kg_putih: 3.1,
|
||||
kg_retak: 4.2,
|
||||
kg_pecah: 1.9,
|
||||
kg_jumlah: 61.5,
|
||||
total_kg: 61.5,
|
||||
|
||||
persen_utuh: 85,
|
||||
persen_putih: 5,
|
||||
persen_retak: 7,
|
||||
persen_pecah: 3,
|
||||
|
||||
hd: 92,
|
||||
hd_std: 90,
|
||||
fi: 115,
|
||||
fi_std: 667,
|
||||
em: 85,
|
||||
em_std: 83,
|
||||
ew: 62,
|
||||
ew_std: 60,
|
||||
fcr: 2.1,
|
||||
fcr_std: 2.0,
|
||||
hh: 96,
|
||||
hh_std: 95,
|
||||
},
|
||||
{
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 1001,
|
||||
email: 'user@example.com',
|
||||
name: 'John Doe',
|
||||
},
|
||||
project_flock: {
|
||||
id: 1,
|
||||
name: 'PROJECT',
|
||||
category: 'LAYING',
|
||||
kandang: {
|
||||
id: 1,
|
||||
name: 'Cikaum',
|
||||
},
|
||||
},
|
||||
created_at: '2025-01-01T08:00:00Z',
|
||||
updated_at: '2025-01-02T10:30:00Z',
|
||||
|
||||
woa: 25,
|
||||
|
||||
bw: 62.5,
|
||||
std_bw: 60,
|
||||
uniformity: 88,
|
||||
std_uniformity: '90% up',
|
||||
|
||||
dep_kum: 3.2,
|
||||
dep_std: 2.5,
|
||||
|
||||
butiran_utuh: 850,
|
||||
butiran_putih: 50,
|
||||
butiran_retak: 70,
|
||||
butiran_pecah: 30,
|
||||
butiran_jumlah: 1000,
|
||||
total_butir: 1000,
|
||||
|
||||
kg_utuh: 52.3,
|
||||
kg_putih: 3.1,
|
||||
kg_retak: 4.2,
|
||||
kg_pecah: 1.9,
|
||||
kg_jumlah: 61.5,
|
||||
total_kg: 61.5,
|
||||
|
||||
persen_utuh: 85,
|
||||
persen_putih: 5,
|
||||
persen_retak: 7,
|
||||
persen_pecah: 3,
|
||||
|
||||
hd: 92,
|
||||
hd_std: 90,
|
||||
fi: 115,
|
||||
fi_std: 110,
|
||||
em: 85,
|
||||
em_std: 83,
|
||||
ew: 62,
|
||||
ew_std: 60,
|
||||
fcr: 2.1,
|
||||
fcr_std: 2.0,
|
||||
hh: 96,
|
||||
hh_std: 95,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export class ProductionResultReportApiService extends BaseApiService<
|
||||
ProductionResult,
|
||||
unknown,
|
||||
unknown
|
||||
> {
|
||||
constructor(basePath: string = '/reports/production-result') {
|
||||
super(basePath);
|
||||
}
|
||||
|
||||
async getAllProductionResultFetcher(
|
||||
endpoint: string
|
||||
): Promise<BaseApiResponse<ProductionResult[]>> {
|
||||
// return await httpClientFetcher<BaseApiResponse<ProductionResult[]>>(
|
||||
// endpoint
|
||||
// );
|
||||
|
||||
await sleep(1000);
|
||||
|
||||
return PRODUCTION_RESULT_DUMMY_DATA;
|
||||
}
|
||||
}
|
||||
|
||||
export const ProductionResultReportApi = new ProductionResultReportApiService();
|
||||
Vendored
+6
-7
@@ -6,6 +6,11 @@ import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { Product } from '@type/api/master-data/product';
|
||||
import { Customer } from '@type/api/master-data/customer';
|
||||
import { BaseMetadata } from '@/types/api/api-general';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { Product } from '@type/api/master-data/product';
|
||||
import { Customer } from '@type/api/master-data/customer';
|
||||
import { BaseMetadata } from '@/types/api/api-general';
|
||||
import { ProjectFlock } from '@/types/api/production/project-flock';
|
||||
|
||||
export type BaseSales = {
|
||||
id: number;
|
||||
@@ -29,10 +34,6 @@ export type BaseClosingSales = {
|
||||
period: number;
|
||||
sales: BaseSales[];
|
||||
};
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { Product } from '@type/api/master-data/product';
|
||||
import { Customer } from '@type/api/master-data/customer';
|
||||
import { BaseMetadata } from '@/types/api/api-general';
|
||||
|
||||
export type BaseSales = {
|
||||
id: number;
|
||||
@@ -66,9 +67,6 @@ export type BaseClosing = {
|
||||
closing_date?: string;
|
||||
shed_label: string;
|
||||
shed_count: number;
|
||||
sales_paid_amount: number;
|
||||
sales_remaining_amount: number;
|
||||
sales_payment_status: string;
|
||||
project_status: 'Pengajuan' | 'Aktif' | 'Selesai';
|
||||
};
|
||||
|
||||
@@ -83,6 +81,7 @@ export type BaseClosingGeneralInformation = BaseClosing & {
|
||||
sales_payment_status: string;
|
||||
project_status: 'Pengajuan' | 'Aktif' | 'Selesai';
|
||||
closing_status: string;
|
||||
project_flock: ProjectFlock;
|
||||
};
|
||||
|
||||
export type ClosingGeneralInformation = BaseMetadata &
|
||||
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
import { BaseMetadata } from '@/types/api/api-general';
|
||||
import { ProjectFlock } from '@/types/api/production/project-flock';
|
||||
import { BaseKandang } from '@/types/api/master-data/kandang';
|
||||
|
||||
export type BaseProductionResult = {
|
||||
project_flock: Pick<ProjectFlock, 'id' | 'name' | 'category'> & {
|
||||
kandang: Pick<BaseKandang, 'id' | 'name'>;
|
||||
};
|
||||
|
||||
woa: number;
|
||||
|
||||
// BW
|
||||
bw: number;
|
||||
std_bw: number;
|
||||
uniformity: number;
|
||||
std_uniformity: string; // "90% up" - keeping as string based on "up" suffix potential
|
||||
|
||||
// Dep
|
||||
dep_kum: number;
|
||||
dep_std: number;
|
||||
|
||||
// Butiran
|
||||
butiran_utuh: number;
|
||||
butiran_putih: number;
|
||||
butiran_retak: number;
|
||||
butiran_pecah: number;
|
||||
butiran_jumlah: number;
|
||||
total_butir: number;
|
||||
|
||||
// Kg
|
||||
kg_utuh: number;
|
||||
kg_putih: number;
|
||||
kg_retak: number;
|
||||
kg_pecah: number;
|
||||
kg_jumlah: number;
|
||||
total_kg: number;
|
||||
|
||||
// %
|
||||
persen_utuh: number;
|
||||
persen_putih: number;
|
||||
persen_retak: number;
|
||||
persen_pecah: number;
|
||||
|
||||
// Produksi
|
||||
hd: number;
|
||||
hd_std: number;
|
||||
fi: number;
|
||||
fi_std: number;
|
||||
em: number;
|
||||
em_std: number;
|
||||
ew: number;
|
||||
ew_std: number;
|
||||
fcr: number;
|
||||
fcr_std: number;
|
||||
hh: number;
|
||||
hh_std: number;
|
||||
};
|
||||
|
||||
export type ProductionResult = BaseMetadata & BaseProductionResult;
|
||||
Reference in New Issue
Block a user