- {isLoadingCostumer && (
+
+ {isLoadingProjectFlock && (
)}
- {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
+ {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
)}
diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx
index 6cf694c0..91d4dfd5 100644
--- a/src/app/production/project-flock/detail/page.tsx
+++ b/src/app/production/project-flock/detail/page.tsx
@@ -2,7 +2,7 @@
import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
import { useRouter, useSearchParams } from 'next/navigation';
import useSWR from 'swr';
@@ -37,11 +37,11 @@ const ProjectFlockDetail = () => {
}
return (
-
+
{isLoadingProjectFlock && (
)}
- {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+ {isResponseSuccess(projectFlock) && (
, 'className'> {
+ tabs: TabItem[];
+ variant?: 'bordered' | 'lifted' | 'boxed';
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+ placement?: 'top' | 'bottom';
+ /** Tab yang aktif secara default (uncontrolled mode) */
+ defaultActiveId?: string;
+ /** Tab yang aktif (controlled mode, dikontrol parent) */
+ activeTabId?: string;
+ className?:
+ | string
+ | {
+ wrapper?: string;
+ tab?: string;
+ content?: string;
+ };
+ onTabChange?: (tabId: string) => void;
+}
+
+const Tabs = ({
+ tabs,
+ variant,
+ size = 'md',
+ placement = 'top',
+ defaultActiveId,
+ activeTabId: controlledActiveId,
+ className,
+ onTabChange,
+ ...props
+}: TabsProps) => {
+ // State internal hanya dipakai kalau `activeTabId` (controlled) tidak diset
+ const [uncontrolledActiveId, setUncontrolledActiveId] = useState(
+ defaultActiveId || tabs[0]?.id || ''
+ );
+
+ const isControlled = controlledActiveId !== undefined;
+ const activeTabId = isControlled ? controlledActiveId : uncontrolledActiveId;
+
+ const handleTabChange = (tabId: string) => {
+ if (tabId === activeTabId) return;
+ if (!isControlled) setUncontrolledActiveId(tabId);
+ onTabChange?.(tabId);
+ };
+
+ const { wrapper: wrapperClassName, tab: tabClassName } =
+ typeof className === 'object'
+ ? className
+ : { wrapper: className, tab: undefined };
+
+ const getTabsClasses = () => {
+ const variantClasses: Record = {
+ bordered: 'tabs-bordered',
+ lifted: 'tabs-lift',
+ boxed: 'tabs-box',
+ };
+
+ const sizeClasses: Record = {
+ xs: 'tabs-xs',
+ sm: 'tabs-sm',
+ md: '',
+ lg: 'tabs-lg',
+ xl: 'tabs-xl',
+ };
+
+ const placementClasses: Record = {
+ top: '',
+ bottom: 'tabs-bottom',
+ };
+
+ return cn(
+ 'tabs',
+ variant && variantClasses[variant],
+ sizeClasses[size],
+ placementClasses[placement],
+ wrapperClassName
+ );
+ };
+
+ const getTabClasses = (isActive: boolean, isDisabled?: boolean) =>
+ cn(
+ 'tab',
+ {
+ 'tab-active': isActive,
+ 'tab-disabled': isDisabled,
+ },
+ tabClassName
+ );
+
+ const activeContent = tabs.find((tab) => tab.id === activeTabId)?.content;
+
+ return (
+
+
+ {tabs.map(({ id, label, disabled }) => (
+
+ ))}
+
+
+ {activeContent &&
{activeContent}
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
(
+
+
+
+ ),
+ cell: ({ row }) => (
+
+
+
+ ),
+ },
+ {
+ accessorKey: 'so_number',
+ header: 'No. Order',
+ },
+ {
+ accessorKey: 'so_date',
+ header: 'Tanggal',
+ },
+ {
+ accessorKey: 'approval.step_name',
+ header: 'Status',
+ },
+ {
+ accessorKey: 'customer.name',
+ header: 'Customer',
+ },
+ {
+ accessorKey: 'grand_total',
+ header: 'Grand Total',
+ },
+ {
+ accessorKey: 'marketing_products.length',
+ header: 'Product Details',
+ cell: (props) => {
+ if (props?.row?.original?.marketing_products?.length) {
+ if (props?.row?.original?.marketing_products?.length > 1) {
+ return (
+
+ );
+ } else {
+ const product = props?.row?.original?.marketing_products[0];
+ return <>{product?.product_warehouse?.product?.name};
+ }
+ }
+ },
+ },
+ {
+ header: 'Aksi',
+ cell: (props) => {
+ const currentPageSize =
+ props.table.getPaginationRowModel().rows.length;
+ const currentPageRows =
+ props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows =
+ currentRowRelativeIndex > currentPageSize - 2;
+
+ const deleteClickHandler = () => {};
+
+ return (
+ <>
+ {currentPageSize > 2 && (
+
+
+
+ )}
+
+ {currentPageSize <= 2 && (
+
+
+
+ )}
+
+ );
+ },
+ },
+ ]}
+ pageSize={pageSize}
+ page={page}
+ onPageChange={setPage}
+ className={{
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
Daftar Produk
+
+
+
+ data={
+ isResponseSuccess(marketing) && selectedItem
+ ? (selectedItem?.marketing_products ?? [])
+ : []
+ }
+ columns={[
+ {
+ header: 'Kandang',
+ accessorFn(row) {
+ return row.product_warehouse.warehouse.name;
+ },
+ },
+ {
+ header: 'Produk',
+ accessorFn(row) {
+ return row.product_warehouse.product.name;
+ },
+ },
+ {
+ header: 'Harga Satuan (Rp)',
+ accessorFn(row) {
+ return formatCurrency(row.unit_price);
+ },
+ },
+ ]}
+ className={{
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ paginationClassName: 'hidden',
+ }}
+ />
+
+
+ );
+};
+export default SalesOrderTable;
diff --git a/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx b/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
new file mode 100644
index 00000000..e67a0644
--- /dev/null
+++ b/src/components/pages/marketing/sales-orders/detail/SalesOrderDetail.tsx
@@ -0,0 +1,308 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import {
+ cn,
+ formatCurrency,
+ formatNumber,
+ formatVechicleNumber,
+} from '@/lib/helper';
+import { MarketingApi } from '@/services/api/marketing/marketing';
+import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const SalesOrderDetail = ({
+ initialValues,
+ refreshValues,
+}: {
+ initialValues?: Marketing;
+ refreshValues?: () => void;
+}) => {
+ const [approvalAction, setApprovalAction] = useState<'approve' | 'reject'>(
+ 'approve'
+ );
+ const [isLoading, setIsLoading] = useState(false);
+
+ const deleteModal = useModal();
+ const confirmationModal = useModal();
+ const deliveryModal = useModal();
+
+ const approveClickHandler = () => {
+ setApprovalAction('approve');
+ confirmationModal.openModal();
+ };
+
+ const rejectClickHandler = () => {
+ setApprovalAction('reject');
+ confirmationModal.openModal();
+ };
+
+ const deliveryClickHandler = () => {
+ deliveryModal.openModal();
+ };
+
+ const deleteClickHandler = () => {
+ deleteModal.openModal();
+ };
+
+ const confirmationModalDeleteClickHandler = async () => {
+ setIsLoading(true);
+ // await MarketingApi.delete(initialValues?.id as number);
+ setIsLoading(false);
+ deleteModal.closeModal();
+ toast.success('Successfully deleted Sales Order!');
+ refreshValues?.();
+ };
+
+ const confirmationModalApproveClickHandler = async () => {
+ setIsLoading(true);
+ // await MarketingApi.singleApproval(
+ // initialValues?.id as number,
+ // approvalAction
+ // );
+ setIsLoading(false);
+ confirmationModal.closeModal();
+ toast.success('Successfully approved Sales Order!');
+ refreshValues?.();
+ };
+
+ const confirmationModalDeliveryClickHandler = async () => {
+ setIsLoading(true);
+ // await MarketingApi.delivery(initialValues?.id as number);
+ setIsLoading(false);
+ deliveryModal.closeModal();
+ toast.success('Successfully delivered Sales Order!');
+ refreshValues?.();
+ };
+
+ return (
+ <>
+
+
+
+ {initialValues?.approval?.step_number != 3 && (
+ <>
+
+
+
+ )}
+ {initialValues?.approval?.step_number == 2 && (
+
+ )}
+
+
+
+
+
+
+ |
+ No. Sales Order
+ |
+ : |
+ {initialValues?.so_number} |
+
+
+ | Nama Pelanggan |
+ : |
+ {initialValues?.customer?.name} |
+
+
+ | Status |
+ : |
+ {initialValues?.approval?.step_name} |
+
+
+ | Tanggal Penjualan |
+ : |
+ {initialValues?.so_date} |
+
+
+ | Total Penjualan |
+ : |
+
+ {formatCurrency(initialValues?.grand_total as number)}
+ |
+
+
+ | Catatan |
+ : |
+ {initialValues?.notes ?? '-'} |
+
+
+
+
+ {initialValues?.marketing_products && (
+
+
+ data={initialValues?.marketing_products}
+ columns={[
+ {
+ header: 'No. Polisi',
+ accessorFn(row) {
+ return formatVechicleNumber(
+ row.marketing_delivery_products?.vehicle_number as string
+ );
+ },
+ },
+ {
+ header: 'Kandang',
+ accessorFn(row) {
+ return row.product_warehouse.warehouse.name;
+ },
+ },
+ {
+ header: 'Produk',
+ accessorFn(row) {
+ return row.product_warehouse.product.name;
+ },
+ },
+ {
+ header: 'Harga Satuan (Rp)',
+ accessorFn(row) {
+ return formatCurrency(row.unit_price);
+ },
+ },
+ {
+ header: 'Total Bobot (Kg)',
+ accessorFn(row) {
+ return formatNumber(row.total_weight);
+ },
+ },
+ {
+ header: 'Kuantitas',
+ accessorFn(row) {
+ return formatNumber(row.qty);
+ },
+ },
+ {
+ header: 'Avg. Bobot (Kg)',
+ accessorFn(row) {
+ return formatNumber(row.avg_weight);
+ },
+ },
+ {
+ header: 'Total Penjualan (Rp)',
+ accessorFn(row) {
+ return formatCurrency(row.total_price);
+ },
+ },
+ ]}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ initialValues?.marketing_products &&
+ initialValues?.marketing_products?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ paginationClassName: 'hidden',
+ }}
+ />
+
+ )}
+
+
+
+
+
+
+
+ ),
+ cell: ({ row }: { row: TanStack.Row }) => (
+
+
+
+ ),
+ },
+ {
+ accessorFn: (row: MarketingProduct) =>
+ row.marketing_delivery_products?.vehicle_number,
+ header: 'No. Polisi',
+ },
+ {
+ accessorFn: (row: MarketingProduct) =>
+ row.product_warehouse.warehouse.name,
+ header: 'Kandang',
+ },
+ {
+ accessorFn: (row: MarketingProduct) =>
+ row.product_warehouse.product.name,
+ header: 'Produk',
+ },
+ {
+ accessorFn: (row: MarketingProduct) => formatCurrency(row.unit_price),
+ header: 'Harga Satuan (Rp)',
+ },
+ {
+ accessorFn: (row: MarketingProduct) => formatNumber(row.total_weight),
+ header: 'Total Bobot (Kg)',
+ },
+ {
+ accessorFn: (row: MarketingProduct) => formatNumber(row.qty),
+ header: 'Kuantitas',
+ },
+ {
+ accessorFn: (row: MarketingProduct) => formatNumber(row.avg_weight),
+ header: 'Avg. Bobot (Kg)',
+ },
+ {
+ accessorFn: (row: MarketingProduct) => formatCurrency(row.total_price),
+ header: 'Total Penjualan (Rp)',
+ },
+ {
+ header: 'Aksi',
+ cell: (props: TanStack.CellContext) => (
+
+
+
+ ),
+ },
+ ],
+ [handleDeleteProduct] // dependensi tunggal
+ );
+
+ return (
+ <>
+
+ {formType == 'edit' && (
+
+
+
+ )}
+
+
+
+
Tambah Produk
+
+
+
+
+
+
-
{
refreshChickins();
chickinModal.closeModal();
}}
- />
+ /> */}
);
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
return (
);
};
-export default ChickinForm;
+export default ChickinFormKandang;
diff --git a/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
new file mode 100644
index 00000000..bb368c67
--- /dev/null
+++ b/src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx
@@ -0,0 +1,172 @@
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production/chickin';
+import {
+ Chickin,
+ ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+const ChickinLogsView = ({
+ initialValues,
+ afterSubmit,
+}: {
+ initialValues: ProjectFlockKandang;
+ afterSubmit?: () => void;
+}) => {
+ const confirmModal = useModal();
+ const [isApproveLoading, setIsApproveLoading] = useState(false);
+ const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+ const handleClickApprove = () => {
+ confirmModal.openModal();
+ };
+
+ const confirmationModalApproveClickHandler = async () => {
+ setChickinErrorMessage('');
+ setIsApproveLoading(true);
+ const approveChickinRes = await ChickinApi.singleApproval(
+ initialValues?.id as number,
+ 'APPROVED'
+ );
+ if (isResponseSuccess(approveChickinRes)) {
+ toast.success(approveChickinRes?.message as string);
+ }
+ if (isResponseError(approveChickinRes)) {
+ toast.error(approveChickinRes?.message as string);
+ setChickinErrorMessage(approveChickinRes?.message as string);
+ }
+ confirmModal.closeModal();
+ setIsApproveLoading(false);
+ afterSubmit && afterSubmit();
+ };
+
+ return (
+ <>
+
+
+ {initialValues?.approval?.step_number == 1 && (
+
+ )}
+
+
+ data={initialValues?.chickins || []}
+ columns={[
+ {
+ header: '#',
+ cell: (props) => props.row.index + 1,
+ },
+ {
+ accessorFn: (row) => row.chick_in_date,
+ header: 'Tanggal Chick In',
+ cell: (props) => {
+ return formatDate(props.getValue() as string, 'DD MMM YYYY');
+ },
+ },
+ {
+ accessorFn: (row) => row.product_warehouse?.warehouse?.name,
+ header: 'Kandang',
+ },
+ {
+ accessorFn: (row) => row.product_warehouse?.product?.name,
+ header: 'Produk',
+ },
+ {
+ accessorFn: (row) => row.usage_qty ?? row.pending_usage_qty,
+ header: 'Jumlah Chick In',
+ cell: (props) => {
+ if (props.row.original.usage_qty != 0) {
+ return formatNumber(props.row.original.usage_qty);
+ } else if (props.row.original.pending_usage_qty != 0) {
+ return formatNumber(props.row.original.pending_usage_qty);
+ } else {
+ return '-';
+ }
+ },
+ },
+ {
+ accessorFn: (row) => row.pending_usage_qty,
+ header: 'Status',
+ cell: (props) => {
+ return (
+
+ );
+ },
+ },
+ ]}
+ className={{
+ containerClassName: cn({
+ 'mb-20': initialValues?.chickins?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ paginationClassName: 'hidden',
+ }}
+ />
+ {chickinErrorMessage && (
+ setChickinErrorMessage('')}>
+
{chickinErrorMessage}
+
+
- )}
- {props.row.original.approval.step_name === 'Pengajuan' && (
+ {props.row.original.approval.step_name === 'Aktif' && (
+
+ )}
+ {props.row.original.approval.step_name === 'Pengajuan' && (
+
+ )}
- )}
-
-
+
+
+
+ {
+ setSearchProjectFlock(val);
+ }}
+ isLoading={isLoadingListProjectFlock}
+ value={
+ projectFlock
+ ? {
+ label: `${projectFlock?.flock?.name}`,
+ value: projectFlock?.id,
+ }
+ : null
+ }
+ onChange={(val) => {
+ handleChangeProjectFlock(val as OptionType | null);
+ }}
+ isSearchable
+ isClearable
+ startAdornment={
+ projectFlock && (
+
+ Periode {projectFlock?.period}
+
+ )
+ }
+ />
+
+
+
+ Pilih project flock terlebih dahulu...
+
+
+ }
+ data={projectFlock ? [projectFlock] : []}
+ columns={[
+ {
+ header: 'ID',
+ accessorKey: 'id',
+ },
+ {
+ header: 'Area',
+ accessorKey: 'area.name',
+ },
+ {
+ header: 'Lokasi',
+ accessorKey: 'location.name',
+ },
+ {
+ header: 'Nama Flock',
+ accessorKey: 'flock.name',
+ },
+ {
+ header: 'Kategori',
+ accessorKey: 'category',
+ },
+ {
+ header: 'Status',
+ accessorKey: 'status',
+ cell: (props) => {
+ return props.row.original.approval?.step_name ? (
+ {
+ switch (
+ props.row.original.approval?.step_name.toUpperCase()
+ ) {
+ case 'AKTIF':
+ return 'red';
+ case 'PENGAJUAN':
+ return 'green';
+ default:
+ return 'gray';
+ }
+ })()}
+ content={props.row.original.approval?.step_name
+ .toLowerCase()
+ .replace(/_/g, ' ')
+ .replace(/\b\w/g, (char) => char.toUpperCase())}
+ />
+ ) : (
+ '-'
+ );
+ },
+ },
+ {
+ header: 'Periode',
+ accessorKey: 'period',
+ },
+ {
+ header: 'FCR Layer',
+ accessorKey: 'fcr.name',
+ },
+ ]}
+ page={undefined}
+ className={{
+ containerClassName: cn({
+ 'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ paginationClassName: 'hidden',
+ }}
+ />
+
+
+
+ emptyContent={
+
+
+ Pilih project flock terlebih dahulu...
+
+
+ }
+ data={
+ projectFlock && isResponseSuccess(listProjectFlockKandang)
+ ? listProjectFlockKandang.data
+ : []
+ }
+ columns={[
+ {
+ header: '#',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorFn: (row) => row?.project_flock?.area?.name,
+ header: 'Area',
+ },
+ {
+ accessorFn: (row) => row?.project_flock?.location?.name,
+ header: 'Lokasi',
+ },
+ {
+ accessorKey: 'kandang.name',
+ header: 'Kandang',
+ },
+ {
+ accessorKey: 'kandang.capacity',
+ header: 'Kapasitas',
+ },
+ {
+ accessorKey: 'approval.step_name',
+ header: 'Status',
+ cell: (props) => {
+ return props.row.original.approval?.step_name ? (
+ {
+ switch (
+ props.row.original.approval?.step_name.toUpperCase()
+ ) {
+ case 'DISETUJUI':
+ return 'green';
+ case 'PENGAJUAN':
+ return 'yellow';
+ default:
+ return 'gray';
+ }
+ })()}
+ content={props.row.original.approval?.step_name
+ .toLowerCase()
+ .replace(/_/g, ' ')
+ .replace(/\b\w/g, (char) => char.toUpperCase())}
+ />
+ ) : projectFlock?.approval?.step_number === 1 ? (
+
+ ) : (
+
+ );
+ },
+ },
+ {
+ header: 'Aksi',
+ cell: (props) => {
+ return (
+ <>
+
+
+ );
+ },
+ },
+ ]}
+ page={undefined}
+ className={{
+ containerClassName: cn({
+ 'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ paginationClassName: 'hidden',
+ }}
+ />
+
+
+ );
+};
+
+export default ProjectFlockChickinDetail;
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
index 8607a7e6..da5deccb 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts
@@ -6,9 +6,7 @@ export const ProjectFlockFormSchema = Yup.object({
value: Yup.number().required('ID Flock wajib diisi!'),
label: Yup.string().required('Nama Flock wajib diisi!'),
}).nullable(),
- flock_id: Yup.number()
- .min(1, 'Flock wajib diisi!')
- .required('Flock wajib diisi!'),
+ flock_name: Yup.string().required('Nama Flock wajib diisi!'),
// Area
area: Yup.object({
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 999fdfcb..ce3c1dce 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -1,7 +1,10 @@
'use client';
import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+ OptionType,
+ useSelect,
+} from '@/components/input/SelectInput';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import {
AreaApi,
@@ -23,19 +26,22 @@ import {
import {
ProjectFlockApprovalPayload,
CreateProjectFlockPayload,
- PeriodFlock,
ProjectFlock,
} from '@/types/api/production/project-flock';
import toast from 'react-hot-toast';
import TextInput from '@/components/input/TextInput';
import { Kandang } from '@/types/api/master-data/kandang';
import Collapse from '@/components/Collapse';
-import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
import { BaseApiResponse } from '@/types/api/api-general';
import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ProjectFlockKandangTable from './ProjectFlockKandangTable';
+import ApprovalSteps, {
+ useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
@@ -52,22 +58,21 @@ const ProjectFlockForm = ({
}: ProjectFlockFormProps) => {
// State
const router = useRouter();
+
const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
useState('');
const [selectedArea, setSelectedArea] = useState('');
-
const [selectedLocation, setSelectedLocation] = useState('');
- const [disabledLocation, setDisabledLocation] = useState(true);
- const [optionsLocation, setOptionsLocation] = useState([]);
-
+ const [disabledLocation, setDisabledLocation] = useState(
+ initialValues?.location?.id ? false : true
+ );
const [openSelectKandangs, setOpenSelectKandangs] = useState(
initialValues?.kandangs && initialValues?.kandangs?.length > 0
);
const [optionsKandang, setOptionsKandang] = useState(
initialValues?.kandangs ?? []
);
-
- const [selectedFlock, setSelectedFlock] = useState(
+ const [selectedFlock, setSelectedFlock] = useState(
initialValues?.flock?.id ?? 0
);
@@ -77,7 +82,7 @@ const ProjectFlockForm = ({
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
- initialValues?.approval.step_name == 'Pengajuan' ? false : true
+ initialValues?.approval?.step_name == 'Pengajuan' ? false : true
);
const [isRejectedDisabled, setIsRejectedDisabled] =
useState(!isApprovedDisabled);
@@ -105,37 +110,27 @@ const ProjectFlockForm = ({
}, [initialValues]);
// Fetch Data
- const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
- search: '',
- }).toString()}`;
- const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
- flockUrl,
- FlockApi.getAllFetcher
+ const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
+ useSelect(FlockApi.basePath, 'id', 'name');
+
+ const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
+ AreaApi.basePath,
+ 'id',
+ 'name'
);
- const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
- search: '',
- }).toString()}`;
- const { data: areas, isLoading: isLoadingAreas } = useSWR(
- areaUrl,
- AreaApi.getAllFetcher
- );
+ const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
+ useSelect(LocationApi.basePath, 'id', 'name', '', {
+ area_id:
+ selectedArea != ''
+ ? selectedArea
+ : ((initialValues?.area?.id ?? '') as string),
+ });
- const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
- search: '',
- area_id: selectedArea,
- }).toString()}`;
- const { data: locations, isLoading: isLoadingLocations } = useSWR(
- locationUrl,
- LocationApi.getAllFetcher
- );
-
- const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
- search: '',
- }).toString()}`;
- const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
- fcrUrl,
- FcrApi.getAllFetcher
+ const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
+ FcrApi.basePath,
+ 'id',
+ 'name'
);
const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
@@ -148,46 +143,22 @@ const ProjectFlockForm = ({
mutate: refreshKandang,
} = useSWR(kandangUrl, KandangApi.getAllFetcher);
- const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
-
const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
- getPeriodFlocksUrl,
- () =>
- ProjectFlockApi.customRequest, 'GET'>(
- getPeriodFlocksUrl,
- { method: 'GET' }
- )
+ `${selectedFlock?.toString()}/periods`,
+ (id: string) => ProjectFlockApi.getNextPeriod(id)
);
- // Map Data to Options
- const optionsArea = isResponseSuccess(areas)
- ? areas?.data.map((area) => ({
- value: area.id,
- label: area.name,
- }))
- : [];
- const optionsFcr = isResponseSuccess(fcrs)
- ? fcrs?.data.map((fcr) => ({
- value: fcr.id,
- label: fcr.name,
- }))
- : [];
- const optionsFlock = isResponseSuccess(flocks)
- ? flocks?.data.map((flock) => ({
- value: flock.id,
- label: flock.name,
- }))
- : [];
-
- useEffect(() => {
- if (isResponseSuccess(locations)) {
- const options = locations.data.map((location) => ({
- value: location.id,
- label: location.name,
- }));
- setOptionsLocation(options);
- }
- }, [locations, setSelectedLocation]);
+ const {
+ approvals,
+ isLoading: approvalsLoading,
+ rawDataApprovals: rawDataApprovals,
+ refresh: refreshApprovals,
+ } = useApprovalSteps({
+ latestApproval: initialValues?.approval,
+ approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
+ moduleName: 'PROJECT_FLOCKS',
+ moduleId: initialValues?.id.toString() ?? '',
+ });
useEffect(() => {
if (isResponseSuccess(kandang)) {
@@ -195,12 +166,24 @@ const ProjectFlockForm = ({
setOptionsKandang(kandang.data);
setOpenSelectKandangs(true);
} else {
+ formik.setFieldValue('kandang_ids', []);
setOptionsKandang([]);
setOpenSelectKandangs(false);
- formik.setFieldValue('kandang_ids', []);
+ const selectedRowIds = Object.keys(rowSelection)
+ .filter((id) => rowSelection[id])
+ .map((id) => parseInt(id));
+ if (
+ JSON.stringify(kandang.data.map((k) => k.id)) !==
+ JSON.stringify(formik.values.kandang_ids)
+ ) {
+ formik.setFieldValue('kandang_ids', []);
+ setRowSelection({});
+ } else {
+ formik.setFieldValue('kandang_ids', selectedRowIds);
+ }
}
}
- }, [kandang]);
+ }, [kandang, selectedLocation]);
useEffect(() => {
if (initialValues?.kandangs) {
refreshKandang();
@@ -211,7 +194,7 @@ const ProjectFlockForm = ({
);
setRowSelection(newRowSelection);
}
- }, [initialValues, refreshKandang]);
+ }, [initialValues, kandang]);
// Options Handler
const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -232,9 +215,13 @@ const ProjectFlockForm = ({
};
const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+ formik.setFieldValue('kandang_ids', []);
setSelectedLocation((val as OptionType)?.value as string);
optionChangeHandler(val, 'location');
- formik.setFieldValue('kandang_ids', []);
+ const selectedRowIds = Object.keys(rowSelection)
+ .filter((id) => rowSelection[id])
+ .map((id) => parseInt(id));
+ formik.setFieldValue('kandang_ids', selectedRowIds);
};
const optionChangeHandler = (
@@ -292,16 +279,17 @@ const ProjectFlockForm = ({
// Formik InitialValue
const formikInitialValues = useMemo(() => {
return {
- name: initialValues?.name ?? '',
+ name: initialValues?.flock_name,
flock: initialValues?.flock
? {
- value: initialValues.flock.id,
- label: initialValues.flock.name,
+ value: initialValues?.flock?.id ?? 0,
+ label:
+ initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
}
: null,
area: initialValues?.area
? {
- value: initialValues.area.id,
+ value: initialValues.area?.id,
label: initialValues.area.name,
}
: null,
@@ -313,24 +301,25 @@ const ProjectFlockForm = ({
: null,
fcr: initialValues?.fcr
? {
- value: initialValues.fcr.id,
+ value: initialValues.fcr?.id,
label: initialValues.fcr.name,
}
: null,
location: initialValues?.location
? {
- value: initialValues.location.id,
+ value: initialValues.location?.id,
label: initialValues.location.name,
}
: null,
flock_id: initialValues?.flock?.id ?? 0,
+ flock_name: initialValues?.flock_name ?? '',
area_id: initialValues?.area?.id ?? 0,
category: initialValues?.category as NonNullable<
'GROWING' | 'LAYING' | undefined
>,
fcr_id: initialValues?.fcr?.id ?? 0,
location_id: initialValues?.location?.id ?? 0,
- period: initialValues?.period ?? 0,
+ period: initialValues?.period ?? 1,
kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
| number
| undefined
@@ -340,7 +329,53 @@ const ProjectFlockForm = ({
// Formik
const formik = useFormik({
- initialValues: formikInitialValues,
+ initialValues: {
+ name: initialValues?.flock_name,
+ flock: initialValues?.flock
+ ? {
+ value: initialValues?.flock?.id ?? 0,
+ label:
+ initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
+ }
+ : null,
+ area: initialValues?.area
+ ? {
+ value: initialValues.area?.id,
+ label: initialValues.area.name,
+ }
+ : null,
+ category_option: initialValues?.category
+ ? {
+ value: initialValues.category,
+ label: initialValues.category,
+ }
+ : null,
+ fcr: initialValues?.fcr
+ ? {
+ value: initialValues.fcr?.id,
+ label: initialValues.fcr.name,
+ }
+ : null,
+ location: initialValues?.location
+ ? {
+ value: initialValues.location?.id,
+ label: initialValues.location.name,
+ }
+ : null,
+ flock_id: initialValues?.flock?.id ?? 0,
+ flock_name: initialValues?.flock_name ?? '',
+ area_id: initialValues?.area?.id ?? 0,
+ category: initialValues?.category as NonNullable<
+ 'GROWING' | 'LAYING' | undefined
+ >,
+ fcr_id: initialValues?.fcr?.id ?? 0,
+ location_id: initialValues?.location?.id ?? 0,
+ period: initialValues?.period ?? 1,
+ kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+ | number
+ | undefined
+ )[],
+ } as ProjectFlockFormValues,
enableReinitialize: true,
validationSchema:
formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
@@ -350,7 +385,7 @@ const ProjectFlockForm = ({
onSubmit: async (values) => {
setProjectFlockFormErrorMessage('');
const payload: CreateProjectFlockPayload = {
- flock_id: values.flock_id as number,
+ flock_name: values.flock?.label as string,
area_id: values.area_id as number,
category: values.category as string,
fcr_id: values.fcr_id as number,
@@ -377,8 +412,8 @@ const ProjectFlockForm = ({
useEffect(() => {
if (formType == 'detail') {
formik.setFieldValue('area', {
- value: initialValues?.area.id,
- label: initialValues?.area.name,
+ value: initialValues?.area?.id,
+ label: initialValues?.area?.name,
});
formik.setFieldValue('area_id', initialValues?.area_id);
if (initialValues?.area_id) {
@@ -391,7 +426,7 @@ const ProjectFlockForm = ({
useEffect(() => {
formikSetValues(formikInitialValues);
- }, [formikSetValues, formikInitialValues]);
+ }, [formikSetValues]);
// Aktifkan lokasi jika formType = 'detail'
useEffect(() => {
@@ -402,9 +437,11 @@ const ProjectFlockForm = ({
// Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
useEffect(() => {
- if (formType != 'add' && initialValues?.location?.id) {
- setSelectedLocation(initialValues.location?.id.toString());
- setDisabledLocation(false); // biar dropdown lokasi aktif juga
+ if (formType != 'add') {
+ if (initialValues?.location?.id) {
+ setSelectedLocation(initialValues.location?.id.toString());
+ setDisabledLocation(false); // biar dropdown lokasi aktif juga
+ }
}
}, [formType, initialValues]);
@@ -416,6 +453,9 @@ const ProjectFlockForm = ({
if (isResponseSuccess(periodFlocks)) {
formik.setFieldValue('period', periodFlocks.data.next_period);
}
+ if (isResponseError(periodFlocks)) {
+ console.log(periodFlocks?.message as string);
+ }
}, [periodFlocks]);
useEffect(() => {
@@ -459,7 +499,7 @@ const ProjectFlockForm = ({
method: 'POST',
payload: {
action: action,
- approvable_ids: [initialValues.id],
+ approvable_ids: [initialValues?.id],
},
});
@@ -467,19 +507,12 @@ const ProjectFlockForm = ({
if (refreshProjectFlocks) {
await refreshProjectFlocks();
}
- // if (action == 'APPROVED') {
- // setIsApprovedDisabled(true);
- // setIsRejectedDisabled(false);
- // }
- // if (action == 'REJECTED') {
- // setIsRejectedDisabled(true);
- // setIsApprovedDisabled(false);
- // }
toast.success(approveProjectFlockRes.message as string);
}
if (isResponseError(approveProjectFlockRes)) {
toast.error(approveProjectFlockRes?.message as string);
}
+ refreshApprovals();
confirmModal.closeModal();
setIsApproveLoading(false);
};
@@ -522,6 +555,9 @@ const ProjectFlockForm = ({
)}
+ {approvals && !approvalsLoading && (
+
+ )}
{formType == 'detail' && (
Reject
+ {initialValues?.approval?.step_number == 2 && (
+
+ )}
)}
{formType != 'add' && (
-
+
+ {formType != 'edit' && (
+
+ )}