diff --git a/src/app/globals.css b/src/app/globals.css index 386e7620..97be6978 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,43 @@ @import 'tailwindcss'; @plugin "daisyui"; +@import '../styles/daisyui.css'; + +@plugin "daisyui/theme" { + name: "lti"; + default: false; + prefersdark: false; + color-scheme: "light"; + --color-base-100: oklch(98% 0.001 106.423); + --color-base-200: oklch(97% 0.001 106.424); + --color-base-300: oklch(92% 0.003 48.717); + --color-base-content: oklch(22.389% 0.031 278.072); + --color-primary: oklch(60% 0.126 221.723); + --color-primary-content: oklch(100% 0 0); + --color-secondary: oklch(52% 0.105 223.128); + --color-secondary-content: oklch(100% 0 0); + --color-accent: oklch(45% 0.085 224.283); + --color-accent-content: oklch(100% 0 0); + --color-neutral: oklch(39% 0.07 227.392); + --color-neutral-content: oklch(100% 0 0); + --color-info: oklch(58% 0.158 241.966); + --color-info-content: oklch(100% 0 0); + --color-success: oklch(62% 0.194 149.214); + --color-success-content: oklch(100% 0 0); + --color-warning: oklch(85% 0.199 91.936); + --color-warning-content: oklch(0% 0 0); + --color-error: oklch(57% 0.245 27.325); + --color-error-content: oklch(100% 0 0); + --radius-selector: 0rem; + --radius-field: 0.25rem; + --radius-box: 0.25rem; + --size-selector: 0.21875rem; + --size-field: 0.1875rem; + --border: 1px; + --depth: 0; + --noise: 0; +} + + :root { --color-primary: #1f74bf; diff --git a/src/app/inventory/adjustment/detail/layout.tsx b/src/app/inventory/adjustment/detail/layout.tsx new file mode 100644 index 00000000..b41c70f9 --- /dev/null +++ b/src/app/inventory/adjustment/detail/layout.tsx @@ -0,0 +1,11 @@ +import SuspenseHelper from "@/components/helper/SuspenseHelper" + +const Layout = ({ + children +}: Readonly<{ + children: React.ReactNode +}>) => { + return {children} +} + +export default Layout; \ No newline at end of file diff --git a/src/app/inventory/movement/add/page.tsx b/src/app/inventory/movement/add/page.tsx new file mode 100644 index 00000000..f883de95 --- /dev/null +++ b/src/app/inventory/movement/add/page.tsx @@ -0,0 +1,11 @@ +import MovementForm from '@/components/pages/inventory/movement/form/MovementForm'; + +const AddMovement = () => { + return ( +
+ +
+ ); +}; + +export default AddMovement; diff --git a/src/app/inventory/movement/detail/edit/page.tsx b/src/app/inventory/movement/detail/edit/page.tsx new file mode 100644 index 00000000..bde4ece1 --- /dev/null +++ b/src/app/inventory/movement/detail/edit/page.tsx @@ -0,0 +1,48 @@ +'use client'; + +import { useRouter, useSearchParams } from 'next/navigation'; +import useSWR from 'swr'; + +import MovementForm from '@/components/pages/inventory/movement/form/MovementForm'; +import { MovementApi } from '@/services/api/inventory'; +import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; + +const MovementEdit = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + const movementId = searchParams.get('movementId'); + + const { data: movement, isLoading: isLoadingMovement } = useSWR( + movementId, + (id: number) => MovementApi.getSingle(id) + ); + + if (!movementId) { + router.back(); + + return ( +
+ +
+ ); + } + + if (!isLoadingMovement && (!movement || isResponseError(movement))) { + router.replace('/404'); + return; + } + + return ( +
+ {isLoadingMovement && ( + + )} + {!isLoadingMovement && isResponseSuccess(movement) && ( + + )} +
+ ); +}; + +export default MovementEdit; diff --git a/src/app/inventory/movement/detail/layout.tsx b/src/app/inventory/movement/detail/layout.tsx new file mode 100644 index 00000000..7220dfa1 --- /dev/null +++ b/src/app/inventory/movement/detail/layout.tsx @@ -0,0 +1,11 @@ +import SuspenseHelper from '@/components/helper/SuspenseHelper'; + +const Layout = ({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) => { + return {children}; +}; + +export default Layout; diff --git a/src/app/inventory/movement/detail/page.tsx b/src/app/inventory/movement/detail/page.tsx new file mode 100644 index 00000000..5947cd1b --- /dev/null +++ b/src/app/inventory/movement/detail/page.tsx @@ -0,0 +1,48 @@ +'use client'; + +import { useRouter, useSearchParams } from 'next/navigation'; +import useSWR from 'swr'; + +import MovementForm from '@/components/pages/inventory/movement/form/MovementForm'; +import { MovementApi } from '@/services/api/inventory'; +import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; + +const MovementDetail = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + const movementId = searchParams.get('movementId'); + + const { data: movement, isLoading: isLoadingMovement } = useSWR( + movementId, + (id: number) => MovementApi.getSingle(id) + ); + + if (!movementId) { + router.back(); + + return ( +
+ +
+ ); + } + + if (!isLoadingMovement && (!movement || isResponseError(movement))) { + router.replace('/404'); + return; + } + + return ( +
+ {isLoadingMovement && ( + + )} + {!isLoadingMovement && isResponseSuccess(movement) && ( + + )} +
+ ); +}; + +export default MovementDetail; diff --git a/src/app/inventory/movement/page.tsx b/src/app/inventory/movement/page.tsx new file mode 100644 index 00000000..a2c25612 --- /dev/null +++ b/src/app/inventory/movement/page.tsx @@ -0,0 +1,11 @@ +import MovementTable from '@/components/pages/inventory/movement/MovementTable'; + +const Movement = () => { + return ( +
+ +
+ ); +}; + +export default Movement; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ef28da38..c19b8a77 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -28,7 +28,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {children} diff --git a/src/app/master-data/customer/detail/layout.tsx b/src/app/master-data/customer/detail/layout.tsx new file mode 100644 index 00000000..7220dfa1 --- /dev/null +++ b/src/app/master-data/customer/detail/layout.tsx @@ -0,0 +1,11 @@ +import SuspenseHelper from '@/components/helper/SuspenseHelper'; + +const Layout = ({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) => { + return {children}; +}; + +export default Layout; diff --git a/src/app/master-data/flock/add/page.tsx b/src/app/master-data/flock/add/page.tsx new file mode 100644 index 00000000..5ee3958e --- /dev/null +++ b/src/app/master-data/flock/add/page.tsx @@ -0,0 +1,11 @@ +import FlockForm from "@/components/pages/master-data/flock/form/FlockForm"; + +const AddFlock = () => { + return ( +
+ +
+ ); +} + +export default AddFlock; diff --git a/src/app/master-data/flock/detail/edit/page.tsx b/src/app/master-data/flock/detail/edit/page.tsx new file mode 100644 index 00000000..c9651727 --- /dev/null +++ b/src/app/master-data/flock/detail/edit/page.tsx @@ -0,0 +1,49 @@ +'use client' + +import FlockForm from "@/components/pages/master-data/flock/form/FlockForm"; +import { isResponseError, isResponseSuccess } from "@/lib/api-helper"; +import { FlockApi } from "@/services/api/master-data"; +import { useRouter, useSearchParams } from "next/navigation"; +import useSWR from "swr"; + +const FlockEdit = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + // Get Query Params + const flockId = searchParams.get('flockId'); + + // Fetch Data + const { data: flock, isLoading: isLoadingFlock } = useSWR( + flockId, + (id: number) => FlockApi.getSingle(id) + ); + + if (!flockId) { + router.back(); + + return ( +
+ +
+ ); + } + + if (!isLoadingFlock && (!flock || isResponseError(flock))) { + router.replace('/404'); + return; + } + + return ( +
+ {isLoadingFlock && ( + + )} + {!isLoadingFlock && isResponseSuccess(flock) && ( + + )} +
+ ); +} + +export default FlockEdit; \ No newline at end of file diff --git a/src/app/master-data/flock/detail/layout.tsx b/src/app/master-data/flock/detail/layout.tsx new file mode 100644 index 00000000..b41c70f9 --- /dev/null +++ b/src/app/master-data/flock/detail/layout.tsx @@ -0,0 +1,11 @@ +import SuspenseHelper from "@/components/helper/SuspenseHelper" + +const Layout = ({ + children +}: Readonly<{ + children: React.ReactNode +}>) => { + return {children} +} + +export default Layout; \ No newline at end of file diff --git a/src/app/master-data/flock/detail/page.tsx b/src/app/master-data/flock/detail/page.tsx new file mode 100644 index 00000000..8a805911 --- /dev/null +++ b/src/app/master-data/flock/detail/page.tsx @@ -0,0 +1,46 @@ +'use client' + +import FlockForm from "@/components/pages/master-data/flock/form/FlockForm"; +import { isResponseError, isResponseSuccess } from "@/lib/api-helper"; +import { FlockApi } from "@/services/api/master-data"; +import { useRouter, useSearchParams } from "next/navigation"; +import useSWR from "swr"; + +const FlockDetail = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + // Get Query Params + const flockId = searchParams.get('flockId'); + + // Fetch Data + const { data: flock, isLoading: isLoadingFlock } = useSWR(flockId, (id: number) => FlockApi.getSingle(id)); + + if(!flockId){ + router.back(); + + return ( +
+ +
+ ); + } + + if(!isLoadingFlock && (!flock || isResponseError(flock))){ + router.replace('/404'); + return; + } + + return ( +
+ {isLoadingFlock && ( + + )} + {!isLoadingFlock && isResponseSuccess(flock) && ( + + )} +
+ ); +} + +export default FlockDetail; \ No newline at end of file diff --git a/src/app/master-data/flock/page.tsx b/src/app/master-data/flock/page.tsx new file mode 100644 index 00000000..b317091a --- /dev/null +++ b/src/app/master-data/flock/page.tsx @@ -0,0 +1,11 @@ +import FlockTable from "@/components/pages/master-data/flock/FlocksTable"; + +const Flock = () => { + return ( +
+ +
+ ); +} + +export default Flock; diff --git a/src/app/master-data/supplier/detail/layout.tsx b/src/app/master-data/supplier/detail/layout.tsx new file mode 100644 index 00000000..7220dfa1 --- /dev/null +++ b/src/app/master-data/supplier/detail/layout.tsx @@ -0,0 +1,11 @@ +import SuspenseHelper from '@/components/helper/SuspenseHelper'; + +const Layout = ({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) => { + return {children}; +}; + +export default Layout; diff --git a/src/app/production/project-flock/add/page.tsx b/src/app/production/project-flock/add/page.tsx new file mode 100644 index 00000000..60141d80 --- /dev/null +++ b/src/app/production/project-flock/add/page.tsx @@ -0,0 +1,13 @@ +'use client' + +import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"; + +const AddProjectFlock = () => { + return ( +
+ +
+ ); +} + +export default AddProjectFlock; \ No newline at end of file diff --git a/src/app/production/project-flock/detail/edit/page.tsx b/src/app/production/project-flock/detail/edit/page.tsx new file mode 100644 index 00000000..858d0ca8 --- /dev/null +++ b/src/app/production/project-flock/detail/edit/page.tsx @@ -0,0 +1,46 @@ +'use client' + + +import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"; +import { isResponseError, isResponseSuccess } from "@/lib/api-helper"; +import { ProjectFlockApi } from "@/services/api/production"; +import { useRouter, useSearchParams } from "next/navigation"; +import useSWR from "swr"; + +const ProjectFlockEdit = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + const projectFlockId = searchParams.get("projectFlockId"); + + const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR( + projectFlockId, + (id: number) => ProjectFlockApi.getSingle(id) + ); + + if(!projectFlockId){ + router.back(); + + return ( +
+ +
+ ); + } + + if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){ + router.replace("/404"); + return; + } + + return ( +
+ {isLoadingCostumer && } + {!isLoadingCostumer && isResponseSuccess(projectFlock) && ( + + )} +
+ ) +} + +export default ProjectFlockEdit; \ No newline at end of file diff --git a/src/app/production/project-flock/detail/layout.tsx b/src/app/production/project-flock/detail/layout.tsx new file mode 100644 index 00000000..b41c70f9 --- /dev/null +++ b/src/app/production/project-flock/detail/layout.tsx @@ -0,0 +1,11 @@ +import SuspenseHelper from "@/components/helper/SuspenseHelper" + +const Layout = ({ + children +}: Readonly<{ + children: React.ReactNode +}>) => { + return {children} +} + +export default Layout; \ No newline at end of file diff --git a/src/app/production/project-flock/detail/page.tsx b/src/app/production/project-flock/detail/page.tsx new file mode 100644 index 00000000..5efe83d8 --- /dev/null +++ b/src/app/production/project-flock/detail/page.tsx @@ -0,0 +1,46 @@ +'use client' + + +import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"; +import { isResponseError, isResponseSuccess } from "@/lib/api-helper"; +import { ProjectFlockApi } from "@/services/api/production"; +import { useRouter, useSearchParams } from "next/navigation"; +import useSWR from "swr"; + +const ProjectFlockDetail = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + + const projectFlockId = searchParams.get("projectFlockId"); + + const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR( + projectFlockId, + (id: number) => ProjectFlockApi.getSingle(id) + ); + + if(!projectFlockId){ + router.back(); + + return ( +
+ +
+ ); + } + + if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){ + router.replace("/404"); + return; + } + + return ( +
+ {isLoadingCostumer && } + {!isLoadingCostumer && isResponseSuccess(projectFlock) && ( + + )} +
+ ) +} + +export default ProjectFlockDetail; \ No newline at end of file diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx new file mode 100644 index 00000000..fdb8775d --- /dev/null +++ b/src/app/production/project-flock/page.tsx @@ -0,0 +1,12 @@ +import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm" +import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable"; + +const ProjectFlock = () => { + return ( +
+ +
+ ); +} + +export default ProjectFlock; diff --git a/src/components/Button.tsx b/src/components/Button.tsx index c67a29c2..7cad5b58 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,7 +1,5 @@ import react from 'react'; - import Link from 'next/link'; - import { cn } from '@/lib/helper'; import { Color } from '@/types/theme'; @@ -10,6 +8,8 @@ interface ButtonProps extends react.ComponentProps<'button'> { color?: Color; href?: string; isLoading?: boolean; + target?: string; + rel?: string; } const Button = ({ @@ -22,6 +22,8 @@ const Button = ({ className, disabled, onClick, + target, + rel, ...props }: ButtonProps) => { const btnBaseClassName = cn( @@ -43,7 +45,7 @@ const Button = ({ 'btn-warning': color === 'warning', 'btn-error': color === 'error', }, - 'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all' + 'h-fit justify-center items-center gap-2 rounded p-2 text-base transition-all' ); return ( @@ -68,6 +70,8 @@ const Button = ({ {href && ( { + const tooltipBaseClassName = cn('tooltip', { + 'tooltip-open': typeof open === 'boolean' && open, + + 'tooltip-top': position === 'top', + 'tooltip-bottom': position === 'bottom', + 'tooltip-left': position === 'left', + 'tooltip-right': position === 'right', + + 'tooltip-primary': color === 'primary', + 'tooltip-secondary': color === 'secondary', + 'tooltip-accent': color === 'accent', + 'tooltip-neutral': color === 'neutral', + 'tooltip-info': color === 'info', + 'tooltip-success': color === 'success', + 'tooltip-warning': color === 'warning', + 'tooltip-error': color === 'error', + }); + return ( +
+
+ {content} +
+ + {children} +
+ ); +}; + +export default Tooltip; diff --git a/src/components/helper/form/FormActions.tsx b/src/components/helper/form/FormActions.tsx new file mode 100644 index 00000000..92c2a92c --- /dev/null +++ b/src/components/helper/form/FormActions.tsx @@ -0,0 +1,87 @@ +import { Icon } from '@iconify/react'; +import { FormikContextType } from 'formik'; +import Button from '@/components/Button'; +import { cn } from '@/lib/helper'; + +interface FormActionsProps { + type: 'add' | 'edit' | 'detail'; + formik: FormikContextType; + editUrl?: string; + onDelete?: () => void; + disableSubmit?: boolean; +} + +export const FormActions = ({ + type, + formik, + editUrl, + onDelete, + disableSubmit = false, +}: FormActionsProps) => { + return ( +
+ {type !== 'add' && onDelete && ( +
+ + {type !== 'edit' && editUrl && ( + + )} +
+ )} + {type !== 'detail' && ( +
+ + +
+ )} +
+ ); +}; diff --git a/src/components/helper/form/FormHeader.tsx b/src/components/helper/form/FormHeader.tsx new file mode 100644 index 00000000..ebc1d7ae --- /dev/null +++ b/src/components/helper/form/FormHeader.tsx @@ -0,0 +1,24 @@ +import Button from '@/components/Button'; +import { Icon } from '@iconify/react'; + +interface FormHeaderProps { + type: 'add' | 'edit' | 'detail'; + title: string; + backUrl: string; +} + +export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => { + return ( +
+ +

+ {type === 'add' && `Tambah ${title}`} + {type === 'edit' && `Edit ${title}`} + {type === 'detail' && `Detail ${title}`} +

+
+ ); +}; diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx index 43a3f622..b35ad7dd 100644 --- a/src/components/input/SelectInput.tsx +++ b/src/components/input/SelectInput.tsx @@ -1,12 +1,6 @@ 'use client'; -import { - ComponentType, - ReactNode, - useEffect, - useMemo, - useState, -} from 'react'; +import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react'; import Select, { OptionProps, GroupBase, @@ -98,10 +92,7 @@ const SelectInput = (props: SelectInputProps) => { return { ...base, IndicatorSeparator: () => null }; }, [isAnimated]); - const internalInputChangeHandler = ( - val: string, - meta: InputActionMeta - ) => { + const internalInputChangeHandler = (val: string, meta: InputActionMeta) => { if (meta.action === 'input-change') setInternalInputValue(val); if (meta.action === 'menu-close') setInternalInputValue(''); }; @@ -113,9 +104,7 @@ const SelectInput = (props: SelectInputProps) => { const SelectComponent = createables ? CreatableSelect : Select; /** 🎯 handleChange tanpa any */ - const handleChange = ( - val: MultiValue | SingleValue - ): void => { + const handleChange = (val: MultiValue | SingleValue | null): void => { if (!val) { onChange?.(null); return; @@ -145,15 +134,15 @@ const SelectInput = (props: SelectInputProps) => { > {label} {required && ( - - * + + * )} )} > - instanceId="select" + instanceId='select' value={value ?? (isMulti ? [] : null)} onChange={handleChange} options={options} @@ -225,9 +214,9 @@ const SelectInput = (props: SelectInputProps) => { }} /> - {isError &&

{errorMessage}

} + {isError &&

{errorMessage}

} {!isError && bottomLabel && ( -

{bottomLabel}

+

{bottomLabel}

)} ); diff --git a/src/components/pages/ApprovalSteps.tsx b/src/components/pages/ApprovalSteps.tsx new file mode 100644 index 00000000..4022e254 --- /dev/null +++ b/src/components/pages/ApprovalSteps.tsx @@ -0,0 +1,64 @@ +import { Icon } from '@iconify/react'; +import Steps from '@/components/steps/Steps'; +import StepItem from '@/components/steps/StepItem'; +import Tooltip from '@/components/Tooltip'; + +import { formatDate } from '@/lib/helper'; +import { ApprovalsLine } from '@/types/api/api-general'; + +interface ApprovalStepsProps { + approvals: ApprovalsLine; +} + +const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => { + return ( + + {approvals.map((approval, idx) => { + const stepItemColor = + approval.status === 'approved' + ? 'success' + : approval.status === 'rejected' + ? 'error' + : undefined; + + const stepItemIcon = + approval.status === 'approved' + ? 'material-symbols:check-rounded' + : approval.status === 'rejected' + ? 'material-symbols:close-rounded' + : 'bxs:hourglass'; + + return ( + + {formatDate(approval.date, 'YYYY-MM-DD')} + Oleh: {approval.action_by} + Catatan: {approval.notes} + + } + > + + + ) + } + > + {approval.role} + + ); + })} + + ); +}; + +export default ApprovalSteps; diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx index 1bb1692d..9a19ced1 100644 --- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx +++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx @@ -13,7 +13,7 @@ import toast from 'react-hot-toast'; import { InventoryAdjustmentFormSchema, InventoryAdjustmentFormValues, -} from './InventoryAdjustmentForm.schema'; +} from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema'; import useSWR from 'swr'; import { ProductApi, diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx new file mode 100644 index 00000000..61be40f8 --- /dev/null +++ b/src/components/pages/inventory/movement/MovementTable.tsx @@ -0,0 +1,227 @@ +'use client'; + +import { useState } from 'react'; +import useSWR from 'swr'; +import { SortingState } from '@tanstack/react-table'; + +import Table from '@/components/Table'; +import { useModal } from '@/components/Modal'; +import ConfirmationModal from '@/components/modal/ConfirmationModal'; +import { Movement } from '@/types/api/inventory/movement'; +import { MovementApi } from '@/services/api/inventory'; +import { cn } from '@/lib/helper'; +import { isResponseSuccess } from '@/lib/api-helper'; +import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { ROWS_OPTIONS } from '@/config/constant'; +import { TableToolbar } from '@/components/table/TableToolbar'; +import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector'; +import { OptionType } from '@/components/input/SelectInput'; +import RowDropdownOptions from '@/components/table/RowDropdownOptions'; +import RowCollapseOptions from '@/components/table/RowCollapseOptions'; +import { TableRowOptions } from '@/components/table/TableRowOptions'; + +const MovementTable = () => { + const { + state: tableFilterState, + updateFilter, + setPage, + setPageSize, + toQueryString: getTableFilterQueryString, + } = useTableFilter({ + initial: { search: '' }, + paramMap: { page: 'page', pageSize: 'limit' }, + }); + + const [sorting, setSorting] = useState([]); + const [selectedMovement, setSelectedMovement] = useState< + Movement | undefined + >(undefined); + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + + const deleteModal = useModal(); + + const { + data: movements, + isLoading, + mutate: refreshMovements, + } = useSWR( + `${MovementApi.basePath}${getTableFilterQueryString()}`, + MovementApi.getAllFetcher + ); + + const searchChangeHandler = (e: React.ChangeEvent) => { + updateFilter('search', e.target.value); + setPage(1); + }; + + const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => { + const newVal = val as OptionType; + setPageSize(newVal.value as number); + setPage(1); + }; + + const confirmationModalDeleteClickHandler = async () => { + setIsDeleteLoading(true); + try { + await MovementApi.delete(selectedMovement?.id as number); + refreshMovements(); + deleteModal.closeModal(); + } finally { + setIsDeleteLoading(false); + } + }; + + return ( +
+
+ + +
+ + + data={isResponseSuccess(movements) ? movements?.data : []} + columns={[ + { + header: '#', + cell: (props) => + tableFilterState.pageSize * (tableFilterState.page - 1) + + props.row.index + + 1, + }, + { + accessorFn: (row) => row.source_warehouse?.name, + header: 'Gudang Asal', + }, + { + accessorFn: (row) => row.destination_warehouse?.name, + header: 'Gudang Tujuan', + }, + { + accessorKey: 'transfer_reason', + header: 'Catatan', + }, + { + accessorKey: 'transfer_date', + header: 'Tanggal', + cell: (props) => + new Date(props.row.original.transfer_date).toLocaleDateString( + 'id-ID' + ), + }, + { + accessorFn: (row) => { + const totalCost = row.deliveries?.reduce( + (sum, d) => sum + (d.shipping_cost_total || 0), + 0 + ); + return totalCost?.toLocaleString('id-ID'); + }, + header: 'Biaya Pengiriman', + }, + { + 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 = () => { + setSelectedMovement(props.row.original); + deleteModal.openModal(); + }; + + return ( + <> + {currentPageSize > 2 && ( + + + + )} + + {currentPageSize <= 2 && ( + + + + )} + + ); + }, + }, + ]} + pageSize={tableFilterState.pageSize} + page={isResponseSuccess(movements) ? movements?.meta?.page : 0} + totalItems={ + isResponseSuccess(movements) ? movements?.meta?.total_results : 0 + } + onPageChange={setPage} + isLoading={isLoading} + sorting={sorting} + setSorting={setSorting} + className={{ + containerClassName: cn({ + 'mb-20': + isResponseSuccess(movements) && movements?.data?.length === 0, + }), + tableWrapperClassName: 'overflow-x-auto min-h-full!', + tableClassName: 'font-inter w-full table-auto min-h-full!', + headerRowClassName: 'border-b border-b-gray-200', + headerColumnClassName: + 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end', + bodyRowClassName: 'border-b border-b-gray-200', + bodyColumnClassName: + 'px-6 py-3 last:flex last:flex-row last:justify-end', + }} + /> + + +
+ ); +}; + +export default MovementTable; diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts new file mode 100644 index 00000000..5df66930 --- /dev/null +++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts @@ -0,0 +1,218 @@ +import * as Yup from 'yup'; +import { Movement } from '@/types/api/inventory/movement'; + +export type ProductSchema = { + product: { + value: number; + label: string; + } | null; + product_id: number; + product_qty: number; +}; + +export type DeliverySchema = { + delivery_cost?: number | undefined; + delivery_cost_per_item?: number | undefined; + document?: File | string | null; + document_path?: string | null; + driver_name: string; + vehicle_plate: string; + supplier: { + value: number; + label: string; + } | null; + supplier_id: number; + products: { + product: { + value: number; + label: string; + } | null; + product_id: number; + product_qty: number; + }[]; +}; + +const ProductObjectSchema: Yup.ObjectSchema = Yup.object({ + product: Yup.object({ + value: Yup.number().min(1).required(), + label: Yup.string().required(), + }).nullable(), + product_id: Yup.number().required('Produk wajib diisi!'), + product_qty: Yup.number() + .required('Qty wajib diisi!') + .min(1, 'Qty minimal 1!') + .typeError('Qty harus berupa angka!'), +}); + +const DeliveryProductObjectSchema = Yup.object({ + product: Yup.object({ + value: Yup.number().min(1).required(), + label: Yup.string().required(), + }).nullable(), + product_id: Yup.number().required('Produk wajib diisi!'), + product_qty: Yup.number() + .required('Qty wajib diisi!') + .min(1, 'Qty minimal 1!') + .typeError('Qty harus berupa angka!'), +}); + +const DeliveryObjectSchema: Yup.ObjectSchema = Yup.object({ + delivery_cost: Yup.number() + .transform((value) => (isNaN(value) || value === 0 ? undefined : value)) + .min(1, 'Biaya minimal 1!') + .typeError('Biaya harus berupa angka!') + .test( + 'one-of-cost-fields', + 'Biaya pengiriman atau biaya per item wajib diisi!', + function (value) { + const { delivery_cost_per_item } = this.parent; + return ( + (value !== undefined && value > 0) || + (delivery_cost_per_item !== undefined && delivery_cost_per_item > 0) + ); + } + ), + delivery_cost_per_item: Yup.number() + .transform((value) => (isNaN(value) || value === 0 ? undefined : value)) + .min(1, 'Biaya per item minimal 1!') + .typeError('Biaya per item harus berupa angka!') + .test( + 'one-of-cost-fields', + 'Biaya pengiriman atau biaya per item wajib diisi!', + function (value) { + const { delivery_cost } = this.parent; + return ( + (value !== undefined && value > 0) || + (delivery_cost !== undefined && delivery_cost > 0) + ); + } + ), + document_path: Yup.string().optional(), + document_index: Yup.number().optional(), + document: Yup.mixed() + .nullable() + .test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => { + if (!value) return true; + if (typeof value === 'string') return true; + if (value instanceof File) return value.size <= 2 * 1024 * 1024; + return false; + }), + driver_name: Yup.string().required('Nama sopir wajib diisi!'), + vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'), + supplier: Yup.object({ + value: Yup.number().min(1).required(), + label: Yup.string().required(), + }).nullable(), + supplier_id: Yup.number().required('Supplier wajib diisi!'), + products: Yup.array() + .of(DeliveryProductObjectSchema) + .min(1, 'Minimal harus ada 1 produk!') + .required('Produk wajib diisi!'), +}); + +export const MovementFormSchema = Yup.object({ + transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'), + transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'), + source_warehouse: Yup.object({ + value: Yup.number().min(1).required(), + label: Yup.string().required(), + area: Yup.string().optional(), + location: Yup.string().optional(), + }).nullable(), + source_warehouse_id: Yup.number() + .required('Gudang asal wajib diisi!') + .typeError('Gudang asal wajib diisi!'), + destination_warehouse: Yup.object({ + value: Yup.number().min(1).required(), + label: Yup.string().required(), + area: Yup.string().optional(), + location: Yup.string().optional(), + }).nullable(), + destination_warehouse_id: Yup.number() + .required('Gudang tujuan wajib diisi!') + .typeError('Gudang tujuan wajib diisi!'), + products: Yup.array() + .of(ProductObjectSchema) + .min(1, 'Minimal harus ada 1 produk!') + .required('Produk wajib diisi!'), + deliveries: Yup.array() + .of(DeliveryObjectSchema) + .min(1, 'Minimal harus ada 1 pengiriman!') + .required('Pengiriman wajib diisi!'), +}); + +export const UpdateMovementFormSchema = MovementFormSchema; + +export type MovementFormValues = Yup.InferType; + +export const getMovementFormInitialValues = ( + initialValues?: Movement +): MovementFormValues => { + const detailIdToProductId = new Map(); + initialValues?.details?.forEach((detail) => { + detailIdToProductId.set(detail.id, { + id: detail.product.id, + name: detail.product.name, + }); + }); + + return { + transfer_reason: initialValues?.transfer_reason ?? '', + transfer_date: initialValues?.transfer_date ?? '', + source_warehouse: initialValues?.source_warehouse + ? { + value: initialValues.source_warehouse.id, + label: initialValues.source_warehouse.name, + area: initialValues.source_warehouse.area?.name ?? undefined, + location: initialValues.source_warehouse.location?.name ?? undefined, + } + : null, + source_warehouse_id: initialValues?.source_warehouse?.id ?? 0, + destination_warehouse: initialValues?.destination_warehouse + ? { + value: initialValues.destination_warehouse.id, + label: initialValues.destination_warehouse.name, + area: initialValues.destination_warehouse.area?.name ?? undefined, + location: + initialValues.destination_warehouse.location?.name ?? undefined, + } + : null, + destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0, + products: + initialValues?.details?.map((detail) => ({ + product: { + value: detail.product.id, + label: detail.product.name, + }, + product_id: detail.product.id, + product_qty: detail.quantity, + })) ?? [], + deliveries: + initialValues?.deliveries?.map((d) => ({ + delivery_cost: d.shipping_cost_total ?? undefined, + delivery_cost_per_item: d.shipping_cost_item ?? undefined, + document_number: d.document_number ?? '', + document: d.document_path ?? null, + document_path: d.document_path ?? null, + driver_name: d.driver_name ?? '', + vehicle_plate: d.vehicle_plate ?? '', + supplier: d.supplier + ? { value: d.supplier.id, label: d.supplier.name } + : null, + supplier_id: d.supplier?.id ?? 0, + products: + d.items?.map((item) => { + const productData = detailIdToProductId.get( + item.stock_transfer_detail_id + ); + return { + product: productData + ? { value: productData.id, label: productData.name } + : null, + product_id: productData?.id ?? 0, + product_qty: item.quantity, + }; + }) ?? [], + })) ?? [], + }; +}; diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx new file mode 100644 index 00000000..34027209 --- /dev/null +++ b/src/components/pages/inventory/movement/form/MovementForm.tsx @@ -0,0 +1,1355 @@ +'use client'; + +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useFormik } from 'formik'; +import useSWR from 'swr'; + +import { Icon } from '@iconify/react'; +import Button from '@/components/Button'; +import TextInput from '@/components/input/TextInput'; +import SelectInput, { OptionType } from '@/components/input/SelectInput'; +import ConfirmationModal from '@/components/modal/ConfirmationModal'; +import { FormHeader } from '@/components/helper/form/FormHeader'; +import { FormActions } from '@/components/helper/form/FormActions'; +import { + CreateMovementPayload, + Movement, +} from '@/types/api/inventory/movement'; +import { isResponseSuccess } from '@/lib/api-helper'; +import { + MovementFormSchema, + MovementFormValues, + UpdateMovementFormSchema, + getMovementFormInitialValues, + ProductSchema, + DeliverySchema, +} from '@/components/pages/inventory/movement/form/MovementForm.schema'; +import { useMovementFormHandlers } from './useMovementFormHandlers'; +import { SupplierApi, WarehouseApi } from '@/services/api/master-data'; +import { ProductWarehouseApi } from '@/services/api/inventory'; +import { toast } from 'react-hot-toast'; +import FileInput from '@/components/input/FileInput'; + +interface MovementFormProps { + type?: 'add' | 'edit' | 'detail'; + initialValues?: Movement; +} + +const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => { + const [, setMovementFormErrorMessage] = useState(''); + const [ + productWarehouseSelectInputValue, + setProductWarehouseSelectInputValue, + ] = useState(''); + const [selectedProducts, setSelectedProducts] = useState([]); + const [selectedDeliveries, setSelectedDeliveries] = useState([]); + + const { + deleteModal, + movementFormErrorMessage, + isDeleteLoading, + createMovementHandler, + updateMovementHandler, + deleteMovementClickHandler, + confirmationModalDeleteClickHandler, + } = useMovementFormHandlers(initialValues?.id); + + const formikInitialValues = useMemo( + () => getMovementFormInitialValues(initialValues), + [initialValues] + ); + + const formik = useFormik({ + initialValues: formikInitialValues, + validationSchema: + type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema, + validateOnChange: true, + validateOnBlur: true, + validateOnMount: false, + enableReinitialize: true, + onSubmit: async (values) => { + setMovementFormErrorMessage(''); + const documents: File[] = []; + const deliveriesPayload = values.deliveries.map((d, idx) => { + let documentIndex = 0; + + if (d.document && d.document instanceof File) { + documents.push(d.document); + documentIndex = documents.length - 1; + } else { + } + + return { + delivery_cost: d.delivery_cost ?? 0, + delivery_cost_per_item: d.delivery_cost_per_item ?? 0, + document_index: documentIndex, + document_path: d.document_path, + driver_name: d.driver_name, + vehicle_plate: d.vehicle_plate, + supplier_id: d.supplier_id, + products: d.products.map((p) => ({ + product_id: p.product_id, + product_qty: p.product_qty, + })), + }; + }); + + const payload: CreateMovementPayload = { + transfer_reason: values.transfer_reason, + transfer_date: values.transfer_date, + source_warehouse_id: values.source_warehouse_id, + destination_warehouse_id: values.destination_warehouse_id, + products: values.products.map((p) => ({ + product_id: p.product_id, + product_qty: p.product_qty, + })), + deliveries: deliveriesPayload, + }; + + switch (type) { + case 'add': + await createMovementHandler(payload, documents); + break; + case 'edit': + await updateMovementHandler( + initialValues?.id as number, + payload, + documents + ); + break; + } + }, + }); + + const addProduct = () => { + const newProducts = [ + ...(formik.values.products || []), + { + product: null, + product_id: 0, + product_qty: 0, + }, + ]; + formik.setFieldValue('products', newProducts); + }; + + const removeProduct = useCallback( + (i: number) => { + const updatedProducts = + formik.values.products?.reduce((acc: ProductSchema[], item, index) => { + if (index !== i) { + acc.push(item); + } + return acc; + }, []) ?? []; + + formik.setFieldValue('products', updatedProducts); + }, + [formik] + ); + + const bulkRemoveProduct = useCallback(() => { + const updatedProducts = + formik.values.products?.filter( + (_, idx) => !selectedProducts.includes(idx) + ) ?? []; + formik.setFieldValue('products', updatedProducts); + setSelectedProducts([]); + }, [formik, selectedProducts]); + + const addDelivery = () => { + formik.setFieldValue('deliveries', [ + ...(formik.values.deliveries || []), + { + delivery_cost: undefined, + delivery_cost_per_item: undefined, + document: null, + driver_name: '', + vehicle_plate: '', + supplier: null, + supplier_id: 0, + products: [ + { + product: null, + product_id: 0, + product_qty: 0, + }, + ], + }, + ]); + }; + + const removeDelivery = useCallback( + (i: number) => { + const updatedDeliveries = + formik.values.deliveries?.reduce( + (acc: DeliverySchema[], item, index) => { + if (index !== i) { + acc.push(item); + } + return acc; + }, + [] + ) ?? []; + + formik.setFieldValue('deliveries', updatedDeliveries); + }, + [formik] + ); + + const bulkRemoveDelivery = useCallback(() => { + const updatedDeliveries = + formik.values.deliveries?.filter( + (_, idx) => !selectedDeliveries.includes(idx) + ) ?? []; + formik.setFieldValue('deliveries', updatedDeliveries); + setSelectedDeliveries([]); + }, [formik, selectedDeliveries]); + + const isRepeaterInputError = ( + arrayName: T, + column: T extends 'products' ? keyof ProductSchema : keyof DeliverySchema, + idx: number + ) => { + if ( + !formik.touched[arrayName] || + !Array.isArray(formik.touched[arrayName]) + ) { + return { + isError: false, + errorMessage: undefined, + }; + } + + const touchedField = formik.touched[arrayName]?.[idx]?.[column as string]; + const errorField = formik.errors[arrayName]?.[idx] as Record< + string, + string + >; + + return { + isError: touchedField && Boolean(errorField?.[column as string]), + errorMessage: touchedField ? errorField?.[column as string] : undefined, + }; + }; + + const isDeliveryProductInputError = ( + deliveryIdx: number, + productIdx: number, + column: keyof DeliverySchema['products'][number] + ) => { + const touchedDelivery = formik.touched.deliveries?.[deliveryIdx]; + const errorDelivery = formik.errors.deliveries?.[deliveryIdx] as + | { products: Array> } + | undefined; + + if (!touchedDelivery?.products || !errorDelivery?.products) { + return { + isError: false, + errorMessage: undefined, + }; + } + + const touchedField = touchedDelivery.products[productIdx]?.[column]; + const errorField = errorDelivery.products[productIdx]?.[column]; + + return { + isError: Boolean(touchedField && errorField), + errorMessage: touchedField ? errorField : undefined, + }; + }; + + interface WarehouseOptionType extends OptionType { + area?: string; + location?: string; + } + + interface ProductWarehouseOptionType extends OptionType { + product_id: number; + warehouse_id: number; + warehouse_name: string; + quantity: number; + } + + const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`; + const { data: allProductWarehouses } = useSWR( + allProductWarehousesUrl, + ProductWarehouseApi.getAllFetcher + ); + + const warehouseStockMap = useMemo(() => { + if (!isResponseSuccess(allProductWarehouses)) return new Map(); + + const stockMap = new Map< + number, + { totalQty: number; productCount: number } + >(); + + allProductWarehouses.data.forEach((pw) => { + const warehouseId = pw.warehouse.id; + const existing = stockMap.get(warehouseId) || { + totalQty: 0, + productCount: 0, + }; + + stockMap.set(warehouseId, { + totalQty: existing.totalQty + pw.quantity, + productCount: existing.productCount + 1, + }); + }); + + return stockMap; + }, [allProductWarehouses]); + + // Warehouse selection + const [warehouseSelectInputValue, setWarehouseSelectInputValue] = + useState(''); + const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`; + const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR( + warehousesUrl, + WarehouseApi.getAllFetcher + ); + const warehouseOptions = isResponseSuccess(warehouses) + ? warehouses?.data.map((w) => { + const stockInfo = warehouseStockMap.get(w.id); + const stockLabel = stockInfo + ? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)` + : ' (Kosong)'; + + return { + value: w.id, + label: `${w.name}${stockLabel}`, + area: w.area?.name, + location: + 'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG') + ? w.location?.name + : undefined, + }; + }) + : []; + + // Product Warehouse selection - Filter by source warehouse + const productWarehouseParams = new URLSearchParams({ + search: productWarehouseSelectInputValue, + }); + if (formik.values.source_warehouse_id) { + productWarehouseParams.append( + 'warehouse_id', + formik.values.source_warehouse_id.toString() + ); + } + const productWarehousesUrl = `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`; + const { data: productWarehouses, isLoading: isLoadingProductWarehouses } = + useSWR( + formik.values.source_warehouse_id ? productWarehousesUrl : null, + ProductWarehouseApi.getAllFetcher + ); + const productWarehouseOptions = isResponseSuccess(productWarehouses) + ? productWarehouses?.data.map((pw) => ({ + value: pw.product.id, + label: `${pw.product.name} - ${pw.warehouse.name} (Stock: ${pw.quantity.toLocaleString('id-ID')})`, + product_id: pw.product.id, + warehouse_id: pw.warehouse.id, + warehouse_name: pw.warehouse.name, + quantity: pw.quantity, + })) + : []; + + // Supplier selection + const [supplierSelectInputValue, setSupplierSelectInputValue] = useState(''); + const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`; + const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR( + suppliersUrl, + SupplierApi.getAllFetcher + ); + const supplierOptions = isResponseSuccess(suppliers) + ? suppliers?.data.map((s) => ({ value: s.id, label: s.name })) + : []; + + // Handle cost calculation when delivery_cost changes + const handleDeliveryCostChange = useCallback( + (idx: number, value: string) => { + const numValue = parseFloat(value) || 0; + formik.setFieldValue(`deliveries.${idx}.delivery_cost`, numValue); + + const delivery = formik.values.deliveries?.[idx]; + if (delivery) { + const productQty = delivery.products.reduce( + (sum, p) => sum + p.product_qty, + 0 + ); + if (productQty > 0 && numValue > 0) { + const perItem = numValue / productQty; + formik.setFieldValue( + `deliveries.${idx}.delivery_cost_per_item`, + perItem + ); + } else if (numValue === 0) { + formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0); + } + } + }, + [formik] + ); + + // Handle cost calculation when delivery_cost_per_item changes + const handleDeliveryCostPerItemChange = useCallback( + (idx: number, value: string) => { + const numValue = parseFloat(value) || 0; + formik.setFieldValue( + `deliveries.${idx}.delivery_cost_per_item`, + numValue + ); + + const delivery = formik.values.deliveries?.[idx]; + if (delivery) { + const productQty = delivery.products.reduce( + (sum, p) => sum + p.product_qty, + 0 + ); + if (productQty > 0 && numValue > 0) { + const totalCost = numValue * productQty; + formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost); + } else if (numValue === 0) { + formik.setFieldValue(`deliveries.${idx}.delivery_cost`, 0); + } + } + }, + [formik] + ); + + // Auto-recalculate when product quantity changes + useEffect(() => { + formik.values.deliveries?.forEach((delivery, idx) => { + const productQty = delivery.products.reduce( + (sum, p) => sum + p.product_qty, + 0 + ); + + // If delivery_cost is set, recalculate delivery_cost_per_item + if ( + delivery.delivery_cost && + delivery.delivery_cost > 0 && + productQty > 0 + ) { + const perItem = delivery.delivery_cost / productQty; + if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) { + formik.setFieldValue( + `deliveries.${idx}.delivery_cost_per_item`, + perItem + ); + } + } + // If delivery_cost_per_item is set, recalculate delivery_cost + else if ( + delivery.delivery_cost_per_item && + delivery.delivery_cost_per_item > 0 && + productQty > 0 + ) { + const totalCost = delivery.delivery_cost_per_item * productQty; + if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) { + formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost); + } + } + }); + }, [ + formik.values.deliveries + ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0)) + .join(','), + ]); + + useEffect(() => { + if ( + formik.values.source_warehouse_id && + type !== 'edit' && + type !== 'detail' + ) { + formik.setFieldValue('products', []); + formik.setFieldValue('deliveries', []); + } + }, [formik.values.source_warehouse_id]); + + const getFilteredProductWarehouseOptions = useCallback(() => { + return ( + formik.values.products + ?.filter((p) => p.product) + .map((p) => ({ + value: p.product_id, + label: (p.product as OptionType)?.label, + })) ?? [] + ); + }, [formik.values.products]); + + const getAvailableStock = useCallback( + (productId: number) => { + if (type === 'detail') return 0; + const productWarehouse = productWarehouseOptions.find( + (pw) => pw.product_id === productId + ); + return productWarehouse?.quantity ?? 0; + }, + [productWarehouseOptions, type] + ); + + const getProductQtyAdornment = useCallback( + (productIdx: number) => { + if (type === 'detail') return null; + const product = formik.values.products?.[productIdx]; + if (!product || !product.product_id) return null; + + const availableStock = getAvailableStock(product.product_id); + const requestedQty = Number(product.product_qty) || 0; + const remainingStock = availableStock - requestedQty; + + if (requestedQty > 0) { + return ( + + (sisa: {remainingStock.toLocaleString('id-ID')}) + + ); + } + + return ( + + (tersedia: {availableStock.toLocaleString('id-ID')}) + + ); + }, + [formik.values.products, getAvailableStock, type] + ); + + const getProductQtyError = useCallback( + (productIdx: number) => { + if (type === 'detail') return null; + const product = formik.values.products?.[productIdx]; + if (!product || !product.product_id) return null; + + const availableStock = getAvailableStock(product.product_id); + const requestedQty = Number(product.product_qty) || 0; + + if (requestedQty > availableStock) { + return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`; + } + + return null; + }, + [formik.values.products, getAvailableStock, type] + ); + + const validateDeliveryQty = useCallback( + (deliveryIdx: number, deliveryProductIdx: number, qty: number) => { + if (type === 'detail') return true; + const delivery = formik.values.deliveries?.[deliveryIdx]; + if (!delivery) return true; + + const deliveryProduct = delivery.products[deliveryProductIdx]; + if (!deliveryProduct) return true; + + const productId = deliveryProduct.product_id; + if (!productId) return true; + + const relatedProduct = formik.values.products?.find( + (p) => p.product_id === productId + ); + if (!relatedProduct) return true; + + const totalQtyUsed = + formik.values.deliveries?.reduce((total, d, dIdx) => { + const productQty = d.products.reduce((sum, p, pIdx) => { + if ( + p.product_id === productId && + !(dIdx === deliveryIdx && pIdx === deliveryProductIdx) + ) { + return sum + (Number(p.product_qty) || 0); + } + return sum; + }, 0); + return total + productQty; + }, 0) || 0; + + return totalQtyUsed + qty <= Number(relatedProduct.product_qty); + }, + [formik.values.deliveries, formik.values.products, type] + ); + + const getDeliveryQtyError = useCallback( + (deliveryIdx: number, deliveryProductIdx: number) => { + if (type === 'detail') return null; + const delivery = formik.values.deliveries?.[deliveryIdx]; + if (!delivery) return null; + + const deliveryProduct = delivery.products[deliveryProductIdx]; + if (!deliveryProduct || !deliveryProduct.product_id) return null; + + const qty = Number(deliveryProduct.product_qty) || 0; + const productId = deliveryProduct.product_id; + + const relatedProduct = formik.values.products?.find( + (p) => p.product_id === productId + ); + if (!relatedProduct) return null; + + const totalQtyUsed = + formik.values.deliveries?.reduce((total, d, dIdx) => { + const productQty = d.products.reduce((sum, p, pIdx) => { + if ( + p.product_id === productId && + !(dIdx === deliveryIdx && pIdx === deliveryProductIdx) + ) { + return sum + (Number(p.product_qty) || 0); + } + return sum; + }, 0); + return total + productQty; + }, 0) || 0; + + const availableQty = Number(relatedProduct.product_qty) - totalQtyUsed; + + if (totalQtyUsed + qty > Number(relatedProduct.product_qty)) { + return `Qty melebihi stok produk! Tersedia: ${availableQty}, Total digunakan: ${totalQtyUsed + qty}`; + } + + return null; + }, + [formik.values.deliveries, formik.values.products, type] + ); + + const invalidQtyRows = useMemo( + () => + type === 'detail' + ? [] + : (formik.values.deliveries?.flatMap((delivery, deliveryIdx) => + delivery.products.map((product, productIdx) => { + const qty = Number(product.product_qty) || 0; + return !validateDeliveryQty(deliveryIdx, productIdx, qty); + }) + ) ?? []), + [ + formik.values.deliveries, + formik.values.products, + validateDeliveryQty, + type, + ] + ); + + const hasInvalidQty = useMemo( + () => (type === 'detail' ? false : invalidQtyRows.some(Boolean)), + [invalidQtyRows, type] + ); + + const hasExceededStock = useMemo(() => { + if (type === 'detail') return false; + return ( + formik.values.products?.some((product, idx) => { + return getProductQtyError(idx) !== null; + }) ?? false + ); + }, [formik.values.products, getProductQtyError, type]); + + return ( + <> +
+ +
+ {/* Top card - Movement details */} +
+
+
+ + +
+
+
+ + {/* Warehouse cards */} +
+
+
+

Gudang Asal

+ { + formik.setFieldValue('source_warehouse', val); + formik.setFieldValue( + 'source_warehouse_id', + (val as WarehouseOptionType)?.value + ); + }} + options={warehouseOptions} + onInputChange={setWarehouseSelectInputValue} + isLoading={isLoadingWarehouses} + isError={ + formik.touched.source_warehouse_id && + Boolean(formik.errors.source_warehouse_id) + } + errorMessage={formik.errors.source_warehouse_id as string} + isDisabled={type === 'detail'} + isClearable + /> + + {/* Area and Location Info */} +
+ + +
+
+
+ +
+
+

Gudang Tujuan

+ { + formik.setFieldValue('destination_warehouse', val); + formik.setFieldValue( + 'destination_warehouse_id', + (val as WarehouseOptionType)?.value + ); + }} + options={warehouseOptions} + onInputChange={setWarehouseSelectInputValue} + isLoading={isLoadingWarehouses} + isError={ + formik.touched.destination_warehouse_id && + Boolean(formik.errors.destination_warehouse_id) + } + errorMessage={ + formik.errors.destination_warehouse_id as string + } + isDisabled={type === 'detail'} + isClearable + /> + + {/* Area and Location Info */} +
+ + +
+
+
+
+ + {/* Products table */} +
+
+

Produk

+
+ + + + {type !== 'detail' && ( + + )} + + + {type !== 'detail' && } + + + + {formik.values.products?.map((product, idx) => ( + + {type !== 'detail' && ( + + )} + + + {type !== 'detail' && ( + + )} + + ))} + +
+ 0 + } + onChange={(e) => { + if (e.target.checked) { + setSelectedProducts( + formik.values.products?.map( + (_, idx) => idx + ) ?? [] + ); + } else { + setSelectedProducts([]); + } + }} + /> + ProdukQtyAksi
+ { + if (e.target.checked) { + setSelectedProducts([ + ...selectedProducts, + idx, + ]); + } else { + setSelectedProducts( + selectedProducts.filter((i) => i !== idx) + ); + } + }} + /> + + { + formik.setFieldValue( + `products.${idx}.product`, + val + ); + formik.setFieldValue( + `products.${idx}.product_id`, + (val as ProductWarehouseOptionType)?.value + ); + }} + options={productWarehouseOptions} + onInputChange={setProductWarehouseSelectInputValue} + isLoading={isLoadingProductWarehouses} + isDisabled={ + type === 'detail' || + !formik.values.source_warehouse_id + } + placeholder={ + !formik.values.source_warehouse_id + ? 'Pilih gudang asal terlebih dahulu' + : 'Pilih produk' + } + isClearable + {...isRepeaterInputError( + 'products', + 'product', + idx + )} + className={{ + wrapper: + 'w-full min-w-52 md:min-w-72 lg:min-w-80', + }} + /> + + + + +
+
+ {type !== 'detail' && ( +
+ {selectedProducts.length > 0 && ( + + )} + +
+ )} +
+
+ + {/* Deliveries table */} +
+
+

Pengiriman

+
+ + + + {type !== 'detail' && ( + + )} + + + + + + + + + {type !== 'detail' && } + + + + {formik.values.deliveries?.map((delivery, idx) => ( + + {type !== 'detail' && ( + + )} + + + + + + + + + {type !== 'detail' && ( + + )} + + ))} + +
+ 0 + } + onChange={(e) => { + if (e.target.checked) { + setSelectedDeliveries( + formik.values.deliveries?.map( + (_, idx) => idx + ) ?? [] + ); + } else { + setSelectedDeliveries([]); + } + }} + /> + ProdukQtySupplierPlat NomorDokumenBiaya Pengiriman (Rp.)Biaya Per Item (Rp.)Nama SopirAksi
+ { + if (e.target.checked) { + setSelectedDeliveries([ + ...selectedDeliveries, + idx, + ]); + } else { + setSelectedDeliveries( + selectedDeliveries.filter((i) => i !== idx) + ); + } + }} + /> + + { + formik.setFieldValue( + `deliveries.${idx}.products.0.product`, + val + ); + formik.setFieldValue( + `deliveries.${idx}.products.0.product_id`, + (val as OptionType)?.value + ); + }} + options={getFilteredProductWarehouseOptions()} + isDisabled={type === 'detail'} + isClearable + className={{ + wrapper: + 'w-full min-w-52 md:min-w-72 lg:min-w-80', + }} + /> + + + + { + formik.setFieldValue( + `deliveries.${idx}.supplier`, + val + ); + formik.setFieldValue( + `deliveries.${idx}.supplier_id`, + (val as OptionType)?.value + ); + }} + options={supplierOptions} + onInputChange={setSupplierSelectInputValue} + isLoading={isLoadingSuppliers} + isDisabled={type === 'detail'} + isClearable + className={{ + wrapper: + 'w-full min-w-52 md:min-w-72 lg:min-w-80', + }} + /> + + + + {type === 'detail' ? ( + + ) : ( + { + const file = e.target.files?.[0]; + if (file) { + if (file.size > 2 * 1024 * 1024) { + toast.error( + 'Ukuran dokumen maksimal 2 MB!' + ); + return; + } + formik.setFieldValue( + `deliveries.${idx}.document`, + file + ); + } + }} + {...isRepeaterInputError( + 'deliveries', + 'document', + idx + )} + className={{ + wrapper: + 'w-full min-w-72 md:w-min-80 lg:w-min-96', + }} + /> + )} + + + handleDeliveryCostChange(idx, e.target.value) + } + onBlur={formik.handleBlur} + {...isRepeaterInputError( + 'deliveries', + 'delivery_cost', + idx + )} + readOnly={type === 'detail'} + className={{ + wrapper: 'w-full min-w-48', + }} + /> + + + handleDeliveryCostPerItemChange( + idx, + e.target.value + ) + } + onBlur={formik.handleBlur} + {...isRepeaterInputError( + 'deliveries', + 'delivery_cost_per_item', + idx + )} + readOnly={type === 'detail'} + className={{ + wrapper: 'w-full min-w-48', + }} + /> + + + + +
+
+ {type !== 'detail' && ( +
+ {selectedDeliveries.length > 0 && ( + + )} + +
+ )} +
+
+ + {/* Action buttons */} + + type={type} + formik={formik} + disableSubmit={hasInvalidQty || hasExceededStock} + /> + + {movementFormErrorMessage && ( +
+ + {movementFormErrorMessage} +
+ )} + +
+ + ); +}; + +export default MovementForm; diff --git a/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts new file mode 100644 index 00000000..0ad31e38 --- /dev/null +++ b/src/components/pages/inventory/movement/form/useMovementFormHandlers.ts @@ -0,0 +1,95 @@ +import { useCallback, useState } from 'react'; +import { useRouter } from 'next/navigation'; +import { toast } from 'react-hot-toast'; +import { useModal } from '@/components/Modal'; +import { MovementApi } from '@/services/api/inventory'; +import { + CreateMovementPayload, + UpdateMovementPayload, +} from '@/types/api/inventory/movement'; +import { isResponseError } from '@/lib/api-helper'; + +export const useMovementFormHandlers = (initialValuesId?: number) => { + const router = useRouter(); + const deleteModal = useModal(); + const [movementFormErrorMessage, setMovementFormErrorMessage] = useState(''); + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + + const createMovementHandler = useCallback( + async (payload: CreateMovementPayload, documents: File[] = []) => { + const formData = new FormData(); + formData.append('data', JSON.stringify(payload)); + documents.forEach((file, index) => { + formData.append(`documents[${index}]`, file); + }); + + const res = await MovementApi.create( + formData as unknown as CreateMovementPayload + ); + if (isResponseError(res)) { + setMovementFormErrorMessage(res.message); + return; + } + toast.success(res?.message as string); + router.push('/inventory/movement'); + }, + [router] + ); + + const updateMovementHandler = useCallback( + async ( + movementId: number, + payload: UpdateMovementPayload, + documents: File[] = [] + ) => { + let finalPayload: UpdateMovementPayload | FormData; + + if (documents.length > 0) { + const formData = new FormData(); + formData.append('data', JSON.stringify(payload)); + documents.forEach((file, index) => { + formData.append(`documents[${index}]`, file); + }); + + finalPayload = formData as unknown as UpdateMovementPayload; + } else { + finalPayload = payload; + } + + const res = await MovementApi.update(movementId, finalPayload); + if (res?.status === 'error') { + setMovementFormErrorMessage(res.message); + return; + } + toast.success(res?.message as string); + router.refresh(); + router.push('/inventory/movement'); + }, + [router] + ); + + const deleteMovementClickHandler = useCallback(() => { + deleteModal.openModal(); + }, [deleteModal]); + + const confirmationModalDeleteClickHandler = useCallback(async () => { + if (!initialValuesId) return; + + setIsDeleteLoading(true); + await MovementApi.delete(initialValuesId); + deleteModal.closeModal(); + toast.success('Successfully delete Movement!'); + setIsDeleteLoading(false); + router.push('/inventory/movement'); + }, [deleteModal, initialValuesId, router]); + + return { + deleteModal, + movementFormErrorMessage, + isDeleteLoading, + createMovementHandler, + updateMovementHandler, + deleteMovementClickHandler, + confirmationModalDeleteClickHandler, + }; +}; diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx index 533e0c38..ac848834 100644 --- a/src/components/pages/master-data/customer/form/CustomerForm.tsx +++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx @@ -11,7 +11,7 @@ import { import { useRouter } from 'next/navigation'; import { useCallback, useEffect, useMemo, useState } from 'react'; import toast from 'react-hot-toast'; -import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from './CustomerForm.schema'; +import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from '@/components/pages/master-data/customer/form/CustomerForm.schema'; import { useFormik } from 'formik'; import Button from '@/components/Button'; import { Icon } from '@iconify/react'; diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx new file mode 100644 index 00000000..b0684a1a --- /dev/null +++ b/src/components/pages/master-data/flock/FlocksTable.tsx @@ -0,0 +1,278 @@ +'use client'; + +import { CellContext, ColumnDef } from '@tanstack/react-table'; +import { Flock } from '@/types/api/master-data/flock'; +import { cn } from '@/lib/helper'; +import Button from '@/components/Button'; +import { Icon } from '@iconify/react'; +import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { useState } from 'react'; +import useSWR from 'swr'; +import { FlockApi } from '@/services/api/master-data'; +import { useModal } from '@/components/Modal'; +import RowDropdownOptions from '@/components/table/RowDropdownOptions'; +import RowCollapseOptions from '@/components/table/RowCollapseOptions'; +import toast from 'react-hot-toast'; +import DebouncedTextInput from '@/components/input/DebouncedTextInput'; +import SelectInput, { OptionType } from '@/components/input/SelectInput'; +import { ROWS_OPTIONS } from '@/config/constant'; +import Table from '@/components/Table'; +import { isResponseSuccess } from '@/lib/api-helper'; +import ConfirmationModal from '@/components/modal/ConfirmationModal'; + +const RowsOptions = ({ + type = 'dropdown', + props, + deleteClickHandler, +}: { + type: 'dropdown' | 'collapse'; + props: CellContext; + deleteClickHandler: () => void; +}) => { + return ( +
+ + + +
+ ); +}; + +const FlockTable = () => { + const { + state: tableFilterState, + updateFilter, + setPage, + setPageSize, + toQueryString: getTableFilterQueryString, + } = useTableFilter({ + initial: { search: '', nameSort: '' }, + paramMap: { + page: 'page', + pageSize: 'limit', + nameSort: 'sort_name', + }, + }); + + // Fetch Data + const { + data: flocks, + isLoading, + mutate: refreshFlocks, + } = useSWR( + `${FlockApi.basePath}${getTableFilterQueryString()}`, + FlockApi.getAllFetcher + ); + + // State + const deleteModal = useModal(); + const [selectedFlock, setSelectedFlock] = useState( + undefined + ); + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + + // Columns Definition + const flocksColumns: ColumnDef[] = [ + { + header: '#', + cell: (props) => + tableFilterState.pageSize * (tableFilterState.page - 1) + + props.row.index + + 1, + }, + { + accessorKey: 'name', + header: 'Nama', + }, + { + accessorKey: 'created_at', + header: 'Dibuat pada', + cell: (props) => + new Date(props.row.original.created_at).toLocaleDateString(), + }, + { + 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 = () => { + setSelectedFlock(props.row.original); + deleteModal.openModal(); + }; + + return ( + <> + {currentPageSize > 2 && ( + + + + )} + {currentPageSize <= 2 && ( + + + + )} + + ); + }, + }, + ]; + + // Handler + const confirmationModalDeleteClickHandler = async () => { + setIsDeleteLoading(true); + + await FlockApi.delete(selectedFlock?.id as number); + refreshFlocks(); + + deleteModal.closeModal(); + toast.success('Successfully delete Flock!'); + setIsDeleteLoading(false); + }; + const searchChangeHandler = (e: React.ChangeEvent) => { + updateFilter('search', e.target.value); + }; + const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => { + const newVal = val as OptionType; + setPageSize(newVal.value as number); + }; + + return ( + <> +
+
+
+
+ +
+ + +
+ +
+ +
+
+ + + data={isResponseSuccess(flocks) ? flocks?.data : []} + columns={flocksColumns} + pageSize={tableFilterState.pageSize} + page={isResponseSuccess(flocks) ? flocks?.meta?.page : 0} + totalItems={ + isResponseSuccess(flocks) ? flocks?.meta?.total_results : 0 + } + onPageChange={setPage} + isLoading={isLoading} + className={{ + containerClassName: cn({ + 'mb-20': isResponseSuccess(flocks) && flocks?.data?.length === 0, + }), + tableWrapperClassName: 'overflow-x-auto min-h-full!', + tableClassName: 'font-inter w-full table-auto min-h-full!', + headerRowClassName: 'border-b border-b-gray-200', + headerColumnClassName: + 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end', + bodyRowClassName: 'border-b border-b-gray-200', + bodyColumnClassName: + 'px-6 py-3 last:flex last:flex-row last:justify-end', + }} + /> +
+ + + ); +}; + +export default FlockTable; \ No newline at end of file diff --git a/src/components/pages/master-data/flock/form/FlockForm.schema.ts b/src/components/pages/master-data/flock/form/FlockForm.schema.ts new file mode 100644 index 00000000..76445610 --- /dev/null +++ b/src/components/pages/master-data/flock/form/FlockForm.schema.ts @@ -0,0 +1,14 @@ +import * as Yup from 'yup'; + +export const FlockFormSchema = Yup.object({ + name: Yup.string() + .required('Nama wajib diisi!') + .matches( + /^[\p{L}\p{N}\s]+$/u, + 'Nama tidak boleh mengandung simbol' + ), +}); + +export const UpdateFlockFormSchema = FlockFormSchema; + +export type FlockFormValues = Yup.InferType; diff --git a/src/components/pages/master-data/flock/form/FlockForm.tsx b/src/components/pages/master-data/flock/form/FlockForm.tsx new file mode 100644 index 00000000..cc227fa6 --- /dev/null +++ b/src/components/pages/master-data/flock/form/FlockForm.tsx @@ -0,0 +1,217 @@ +'use client' + +import { useModal } from '@/components/Modal'; +import { FlockApi } from '@/services/api/master-data'; +import { Flock } from '@/types/api/master-data/flock'; +import { useRouter } from 'next/navigation'; +import { useEffect, useMemo, useState } from 'react'; +import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from '@/components/pages/master-data/flock/form/FlockForm.schema'; +import { useFormik } from 'formik'; +import Button from '@/components/Button'; +import { Icon } from '@iconify/react'; +import TextInput from '@/components/input/TextInput'; +import { cn } from '@/lib/helper'; +import ConfirmationModal from '@/components/modal/ConfirmationModal'; + +interface FlockCustomProps { + formType?: 'add' | 'edit' | 'detail'; + initialValues?: Flock; +} + +const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => { + const router = useRouter(); + const deleteModal = useModal(); + + // State + const [flockFormErrorMessage, setFlockFormErrorMessage] = useState(''); + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + + // Handler + const confirmationModalDeleteClickHandler = async () => { + setIsDeleteLoading(true); + + await FlockApi.delete(initialValues?.id as number); + + deleteModal.closeModal(); + setIsDeleteLoading(false); + router.push('/master-data/flock'); + }; + + // Initital Value + const formikInitialValue = useMemo(() => { + return { + name: initialValues?.name ?? '', + }; + }, [initialValues]); + + // Formik + const formik = useFormik({ + initialValues: formikInitialValue, + enableReinitialize: true, + validationSchema: formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema, + onSubmit: async (values) => { + // reset error message + setFlockFormErrorMessage(''); + + // create payload + const payload = { + name: values.name, + }; + + // cek type form yang disubmit + switch (formType) { + case 'add': + await FlockApi.create(payload); + break; + case 'edit': + await FlockApi.update(initialValues?.id as number, payload); + break; + default: + break; + } + + router.push('/master-data/flock'); + }, + }); + + // Initialize Formik + const { setValues: formikSetValues } = formik; + useEffect(() => { + formikSetValues(formikInitialValue); + }, [formikSetValues, formikInitialValue]); + + // Render + return ( + <> +
+
+ + +

+ {formType === 'add' && 'Tambah Flock'} + {formType === 'edit' && 'Ubah Flock'} + {formType === 'detail' && 'Detail Flock'} +

+
+
+ {/* Fields Form */} +
+ +
+ + {/* Action Button */} +
+ {formType !== 'add' && ( +
+ + {formType !== 'edit' && ( + + )} +
+ )} + + {formType !== 'detail' && ( +
+ + + +
+ )} +
+ + {flockFormErrorMessage && ( +
+ + {flockFormErrorMessage} +
+ )} +
+
+ + {formType !== 'add' && ( + + )} + + ); +}; + +export default FlockForm; diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.tsx b/src/components/pages/master-data/supplier/form/SupplierForm.tsx index 74c4da27..e400ead2 100644 --- a/src/components/pages/master-data/supplier/form/SupplierForm.tsx +++ b/src/components/pages/master-data/supplier/form/SupplierForm.tsx @@ -15,7 +15,7 @@ import { SupplierFormSchema, SupplierFormValues, UpdateSupplierFormSchema, -} from './SupplierForm.schema'; +} from '@/components/pages/master-data/supplier/form/SupplierForm.schema'; import { useFormik } from 'formik'; import SelectInput, { OptionType } from '@/components/input/SelectInput'; import { Icon } from '@iconify/react'; diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx new file mode 100644 index 00000000..af057fb8 --- /dev/null +++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx @@ -0,0 +1,579 @@ +'use client'; + +import Button from '@/components/Button'; +import DebouncedTextInput from '@/components/input/DebouncedTextInput'; +import SelectInput, { OptionType } from '@/components/input/SelectInput'; +import { useModal } from '@/components/Modal'; +import ConfirmationModal from '@/components/modal/ConfirmationModal'; +import Table from '@/components/Table'; +import RowCollapseOptions from '@/components/table/RowCollapseOptions'; +import RowDropdownOptions from '@/components/table/RowDropdownOptions'; +import { ROWS_OPTIONS } from '@/config/constant'; +import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; +import { cn } from '@/lib/helper'; +import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data'; +import { ProjectFlockApi } from '@/services/api/production'; +import { useTableFilter } from '@/services/hooks/useTableFilter'; +import { BaseApiResponse } from '@/types/api/api-general'; +import { Kandang } from '@/types/api/master-data/kandang'; +import { ProjectFlock } from '@/types/api/production/project-flock'; +import { Icon } from '@iconify/react'; +import { + CellContext, + ColumnDef, + SortingState, +} from '@tanstack/react-table'; +import { ChangeEventHandler, useState } from 'react'; +import toast from 'react-hot-toast'; +import useSWR from 'swr'; + +const RowOptionsMenu = ({ + type = 'dropdown', + props, + deleteClickHandler, +}: { + type: 'dropdown' | 'collapse'; + props: CellContext; + deleteClickHandler: () => void; +}) => { + return ( +
+ + {/* */} + +
+ ); +}; + +const ProjectFlockTable = () => { + const { + state: tableFilterState, + updateFilter, + setPage, + setPageSize, + toQueryString: getTableFilterQueryString, + } = useTableFilter({ + initial: { + search: '', + areaFilter: '', + locationFilter: '', + kandangFilter: '', + periodFilter: '', + }, + paramMap: { + page: 'page', + pageSize: 'limit', + search: 'search', + areaFilter: 'area_id', + locationFilter: 'location_id', + kandangFilter: 'kandang_id', + periodFilter: 'period', + }, + }); + const [locationSelectInputValue, setLocationSelectInputValue] = useState(''); + const [areaSelectInputValue, setAreaSelectInputValue] = useState(''); + const [kandangSelectInputValue, setKandangSelectInputValue] = useState(''); + + const [selectedArea, setSelectedArea] = useState(null); + const [selectedLocation, setSelectedLocation] = useState( + null + ); + const [selectedKandang, setSelectedKandang] = useState( + null + ); + const [periodInputValue, setPeriodInputValue] = useState(null); + + // Fetch Data + const { + data: projectFlocks, + isLoading, + mutate: refreshProjectFlocks, + } = useSWR( + `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`, + ProjectFlockApi.getAllFetcher + ); + + const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({ + search: areaSelectInputValue, + limit: '100', + }).toString()}`; + const { + data: areas, + isLoading: isLoadingAreas, + } = useSWR(areaUrl, AreaApi.getAllFetcher); + + const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({ + search: locationSelectInputValue, + area_id: selectedArea != null ? selectedArea.value.toString() : '', + limit: '100', + }).toString()}`; + const { + data: locations, + isLoading: isLoadingLocations, + } = useSWR(locationUrl, LocationApi.getAllFetcher); + + const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({ + search: kandangSelectInputValue, + location_id: + selectedLocation != null ? selectedLocation.value.toString() : '', + limit: '100', + }).toString()}`; + const { + data: kandangs, + isLoading: isLoadingKandang, + } = useSWR(kandangUrl, KandangApi.getAllFetcher); + + // Data to Options Mapping + const optionsArea = isResponseSuccess(areas) + ? areas?.data.map((area) => ({ + value: area.id, + label: area.name, + })) + : []; + const optionsKandang = isResponseSuccess(kandangs) + ? kandangs?.data.map((kandang) => ({ + value: kandang.id, + label: kandang.name, + })) + : []; + const optionsLocation = isResponseSuccess(locations) + ? locations?.data.map((location) => ({ + value: location.id, + label: location.name, + })) + : []; + + // State + const [sorting, setSorting] = useState([]); + const [selectedProjectFlock, setSelectedProjectFlock] = + useState(); + const deleteModal = useModal(); + const confirmModal = useModal(); + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + const [selectedIds, setSelectedIds] = useState([]); + const [selectedFlocks, setSelectedFlocks] = useState([]); + const [isApproveLoading, setIsApproveLoading] = useState(false); + + // Columns + const projectFlocksColumns: ColumnDef[] = [ + { + id: 'select', + header: () => { + const allSelected = + isResponseSuccess(projectFlocks) && + projectFlocks.data.length > 0 && + selectedIds.length === projectFlocks.data.length; + + return ( + handleSelectAll(e.target.checked)} + /> + ); + }, + cell: (props) => { + const id = props.row.original.id; + const isChecked = selectedIds.includes(id); + + return ( + handleSelectRow(id, e.target.checked)} + /> + ); + }, + }, + + { + accessorKey: 'flock.name', + header: 'Flock', + }, + { + accessorKey: 'area.name', + header: 'Area', + }, + { + accessorKey: 'location.name', + header: 'Lokasi', + }, + { + accessorKey: 'fcr.name', + header: 'FCR', + }, + { + accessorKey: 'category', + header: 'Kategori', + }, + { + header: 'Kandang', + cell: (props) => { + const kandang = props.row.original.kandangs; + if (kandang) { + const kandangNames = kandang.map((k: Kandang) => k.name); + return ( +
+ {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'} +
+ ); + } else { + return '-'; + } + }, + }, + { + accessorKey: 'period', + header: 'Periode', + }, + { + accessorKey: 'created_at', + header: 'Dibuat pada', + cell: (props) => + new Date(props.row.original.created_at).toLocaleDateString(), + }, + { + 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 = () => { + setSelectedProjectFlock(props.row.original); + deleteModal.openModal(); + }; + + return ( + <> + {currentPageSize > 2 && ( + + + + )} + + {currentPageSize <= 2 && ( + + + + )} + + ); + }, + }, + ]; + + // Handler + const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => { + const newVal = val as OptionType; + setPageSize(newVal.value as number); + }; + const confirmationModalDeleteClickHandler = async () => { + setIsDeleteLoading(true); + + await ProjectFlockApi.delete(selectedProjectFlock?.id as number); + refreshProjectFlocks(); + + deleteModal.closeModal(); + toast.success('Successfully delete Project Flock!'); + setIsDeleteLoading(false); + }; + const searchChangeHandler: ChangeEventHandler = (e) => { + updateFilter('search', e.target.value); + }; + const handleSelectAll = (checked: boolean) => { + if (checked && isResponseSuccess(projectFlocks)) { + const allIds = projectFlocks.data.map((item) => item.id); + setSelectedIds(allIds); + setSelectedFlocks(projectFlocks.data); + } else { + setSelectedIds([]); + setSelectedFlocks([]); + } + }; + + const handleSelectRow = (id: number, checked: boolean) => { + if (!isResponseSuccess(projectFlocks)) return; + + const targetFlock = projectFlocks.data.find((item) => item.id === id); + + if (!targetFlock) return; + + if (checked) { + setSelectedIds((prev) => [...prev, id]); + setSelectedFlocks((prev) => [...(prev || []), targetFlock]); + } else { + setSelectedIds((prev) => prev.filter((val) => val !== id)); + setSelectedFlocks((prev) => + (prev || []).filter((flock) => flock.id !== id) + ); + } + }; + + const confirmationModalApproveClickHandler = async () => { + setIsApproveLoading(true); + const approveProjectFlockRes = await ProjectFlockApi.customRequest< + BaseApiResponse, + 'POST' + >(`/approve`, { + method: 'POST', + payload: 'POST', + params: { + ids: selectedFlocks.map((flock) => flock.id).join(','), + }, + }); + + if (isResponseSuccess(approveProjectFlockRes)) { + toast.success('Project Flock berhasil di-approve!'); + confirmModal.closeModal(); + } + if (isResponseError(approveProjectFlockRes)) { + toast.error(approveProjectFlockRes?.message as string); + confirmModal.closeModal(); + } + setIsApproveLoading(false); + }; + + return ( + <> +
+
+
+
+ + +
+ +
+
+
+ { + setSelectedArea(val as OptionType); + updateFilter( + 'areaFilter', + (val as OptionType)?.value.toString() + ); + }} + onInputChange={setAreaSelectInputValue} + isClearable + /> + { + setSelectedLocation(val as OptionType); + updateFilter( + 'locationFilter', + (val as OptionType)?.value.toString() + ); + }} + onInputChange={setLocationSelectInputValue} + isClearable + /> + { + setSelectedKandang(val as OptionType); + updateFilter( + 'kandangFilter', + (val as OptionType)?.value.toString() + ); + }} + onInputChange={setKandangSelectInputValue} + isClearable + /> + { + setPeriodInputValue(parseInt(e.target.value)); + updateFilter('periodFilter', e.target.value); + }} + /> + +
+
+ + + data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []} + columns={projectFlocksColumns} + pageSize={tableFilterState.pageSize} + page={ + isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0 + } + totalItems={ + isResponseSuccess(projectFlocks) + ? projectFlocks?.meta?.total_results + : 0 + } + onPageChange={setPage} + isLoading={isLoading} + sorting={sorting} + setSorting={setSorting} + className={{ + containerClassName: cn({ + 'mb-20': + isResponseSuccess(projectFlocks) && + projectFlocks?.data?.length === 0, + }), + tableWrapperClassName: 'overflow-x-auto min-h-full!', + tableClassName: 'font-inter w-full table-auto min-h-full!', + headerRowClassName: 'border-b border-b-gray-200', + headerColumnClassName: + 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end', + bodyRowClassName: 'border-b border-b-gray-200', + bodyColumnClassName: + 'px-6 py-3 last:flex last:flex-row last:justify-end', + }} + /> +
+
+ + + + 0 + ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks + .map( + (flock) => + `${flock.flock?.name ?? '(Tanpa nama)'} - ${ + flock.area?.name ?? '-' + }` + ) + .join(', ')})` + : 'Tidak ada Project Flock yang dipilih.' + } + secondaryButton={{ + text: 'Tidak', + }} + primaryButton={{ + text: 'Ya', + color: 'success', + onClick: confirmationModalApproveClickHandler, + isLoading: isApproveLoading, + }} + /> + + ); +}; + +export default ProjectFlockTable; diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts new file mode 100644 index 00000000..162282fb --- /dev/null +++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts @@ -0,0 +1,61 @@ +import * as Yup from 'yup'; + +export const ProjectFlockFormSchema = Yup.object({ + // Flock + flock: 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!'), + + // Area + area: Yup.object({ + value: Yup.number().required('ID Area wajib diisi!'), + label: Yup.string().required('Nama Area wajib diisi!'), + }).nullable(), + area_id: Yup.number() + .min(1, 'Area wajib diisi!') + .required('Area wajib diisi!'), + + // Kategori + category_option: Yup.object({ + value: Yup.string().required('Nilai Kategori wajib diisi!'), + label: Yup.string().required('Label Kategori wajib diisi!'), + }).nullable(), + category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!') + .required('Kategori wajib diisi!'), + + // FCR + fcr: Yup.object({ + value: Yup.number().required('ID FCR wajib diisi!'), + label: Yup.string().required('Nama FCR wajib diisi!'), + }).nullable(), + fcr_id: Yup.number().min(1, 'FCR wajib diisi!').required('FCR wajib diisi!'), + + // Location + location: Yup.object({ + value: Yup.number().required('ID Lokasi wajib diisi!'), + label: Yup.string().required('Nama Lokasi wajib diisi!'), + }).nullable(), + location_id: Yup.number() + .min(1, 'Lokasi wajib diisi!') + .required('Lokasi wajib diisi!'), + + period: Yup.number() + .required('Periode wajib diisi!') + .typeError('Periode harus berupa angka') + .min(1, 'Minimal periode adalah 1'), + + kandang_ids: Yup.array() + .of(Yup.number().typeError('Kandang tidak valid!')) + .min(1, 'Minimal harus ada 1 kandang!') + .required('Kandang wajib diisi!'), +}); + +export type ProjectFlockFormValues = Yup.InferType< + typeof ProjectFlockFormSchema +>; + +export const UpdateProjectFlockFormSchema = ProjectFlockFormSchema; diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx new file mode 100644 index 00000000..ccc3fadc --- /dev/null +++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx @@ -0,0 +1,814 @@ +'use client'; + +import Button from '@/components/Button'; +import SelectInput, { OptionType } from '@/components/input/SelectInput'; +import { isResponseError, isResponseSuccess } from '@/lib/api-helper'; +import { + AreaApi, + FcrApi, + FlockApi, + KandangApi, + LocationApi, +} from '@/services/api/master-data'; +import { Icon } from '@iconify/react'; +import { useFormik } from 'formik'; +import { useRouter } from 'next/navigation'; +import { useEffect, useMemo, useState } from 'react'; +import useSWR from 'swr'; +import { + ProjectFlockFormSchema, + ProjectFlockFormValues, + UpdateProjectFlockFormSchema, +} from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema'; +import { + 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 { BaseApiResponse } from '@/types/api/api-general'; +import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant'; +import { useModal } from '@/components/Modal'; +import ConfirmationModal from '@/components/modal/ConfirmationModal'; + +interface ProjectFlockFormProps { + formType?: 'add' | 'edit' | 'detail'; + initialValues?: ProjectFlock; +} + +const ProjectFlockForm = ({ + formType = 'add', + initialValues, +}: 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 [openSelectKandangs, setOpenSelectKandangs] = useState( + initialValues?.kandangs && initialValues?.kandangs?.length > 0 + ); + const [optionsKandang, setOptionsKandang] = useState( + initialValues?.kandangs ?? [] + ); + + const [selectedFlock, setSelectedFlock] = useState( + initialValues?.flock?.id ?? 0 + ); + + const deleteModal = useModal(); + const confirmModal = useModal(); + + const [isDeleteLoading, setIsDeleteLoading] = useState(false); + const [isApproveLoading, setIsApproveLoading] = useState(false); + + // Fetch Data + const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({ + search: '', + }).toString()}`; + const { data: flocks, isLoading: isLoadingFlocks } = useSWR( + flockUrl, + FlockApi.getAllFetcher + ); + + const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({ + search: '', + }).toString()}`; + const { data: areas, isLoading: isLoadingAreas } = useSWR( + areaUrl, + AreaApi.getAllFetcher + ); + + 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 kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({ + search: '', + location_id: selectedLocation == '' ? '0' : selectedLocation, + }).toString()}`; + const { data: kandang, isLoading: isLoadingKandang } = useSWR( + kandangUrl, + KandangApi.getAllFetcher + ); + + const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`; + + const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR( + getPeriodFlocksUrl, + () => + ProjectFlockApi.customRequest, 'GET'>( + getPeriodFlocksUrl, + { method: 'GET' } + ) + ); + + // 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]); + + useEffect(() => { + if (isResponseSuccess(kandang)) { + if (selectedLocation) { + setOptionsKandang(kandang.data); + setOpenSelectKandangs(true); + } else { + setOptionsKandang([]); + setOpenSelectKandangs(false); + formik.setFieldValue('kandang_ids', []); + } + } + }, [kandang]); + + // Options Handler + const areaChangeHandler = (val: OptionType | OptionType[] | null) => { + formik.setFieldValue('area_id', (val as OptionType)?.value); + formik.setFieldValue('area', val); + + formik.setFieldTouched('area_id', true); + + setSelectedArea((val as OptionType)?.value as string); + setSelectedLocation(''); + const disabled = (val as OptionType)?.value == null; + setDisabledLocation(disabled); + + formik.setFieldValue('location', null); + formik.setFieldValue('location_id', 0); + formik.setFieldTouched('location', false); + formik.setFieldTouched('location_id', false); + }; + + const locationChangeHandler = (val: OptionType | OptionType[] | null) => { + setSelectedLocation((val as OptionType)?.value as string); + optionChangeHandler(val, 'location'); + formik.setFieldValue('kandang_ids', []); + }; + + const optionChangeHandler = ( + val: OptionType | OptionType[] | null, + inputName: string + ) => { + formik.setFieldValue(inputName, val); + formik.setFieldValue( + `${inputName}_id`, + val ? (val as OptionType)?.value : 0 + ); + + formik.setFieldTouched(`${inputName}_id`, true); + }; + + const categoryChangeHandler = (val: OptionType | OptionType[] | null) => { + formik.setFieldValue('category', (val as OptionType)?.value); + formik.setFieldValue('category_option', val); + formik.setFieldTouched('category', true); + }; + + const kandangChangeHandler = (event: React.ChangeEvent) => { + const { value, checked } = event.target; + if (checked) { + formik.setFieldValue( + 'kandang_ids', + formik.values.kandang_ids.concat(parseInt(value)) + ); + } else { + formik.setFieldValue( + 'kandang_ids', + formik.values.kandang_ids.filter((id) => id !== parseInt(value)) + ); + } + }; + const kandangCheckAll = (event: React.ChangeEvent) => { + const { checked } = event.target; + if (checked) { + formik.setFieldValue( + 'kandang_ids', + optionsKandang + .filter( + (kandang) => + kandang.status === 'NON_ACTIVE' || + formik.values.kandang_ids.includes(kandang.id) + ) + .map((kandang) => kandang.id) + ); + } else { + formik.setFieldValue('kandang_ids', []); + } + }; + + // Submit Handler + const createProjectFlockHandler = async ( + payload: CreateProjectFlockPayload + ) => { + const createProjectFlockRes = await ProjectFlockApi.create(payload); + + if (isResponseSuccess(createProjectFlockRes)) { + toast.success(createProjectFlockRes?.message as string); + router.push('/production/project-flock'); + } + if (isResponseError(createProjectFlockRes)) { + setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string); + toast.error(createProjectFlockRes?.message as string); + } + }; + const updateProjectFlockHandler = async ( + payload: CreateProjectFlockPayload + ) => { + const updateProjectFlockRes = await ProjectFlockApi.update( + initialValues?.id as number, + payload + ); + + if (isResponseSuccess(updateProjectFlockRes)) { + toast.success(updateProjectFlockRes?.message as string); + router.push('/production/project-flock'); + } + if (isResponseError(updateProjectFlockRes)) { + setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string); + toast.error(updateProjectFlockRes?.message as string); + } + }; + + // Formik InitialValue + const formikInitialValues = useMemo(() => { + return { + name: initialValues?.name ?? '', + flock: initialValues?.flock + ? { + value: initialValues.flock.id, + label: 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, + 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, + kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as ( + | number + | undefined + )[], + }; + }, [initialValues]); + + // Formik + const formik = useFormik({ + initialValues: formikInitialValues, + enableReinitialize: true, + validationSchema: + formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema, + validateOnBlur: true, + validateOnChange: true, + validateOnMount: true, + onSubmit: async (values) => { + setProjectFlockFormErrorMessage(''); + const payload: CreateProjectFlockPayload = { + flock_id: values.flock_id as number, + area_id: values.area_id as number, + category: values.category as string, + fcr_id: values.fcr_id as number, + location_id: values.location_id as number, + period: values.period as number, + kandang_ids: values.kandang_ids as number[], + }; + + switch (formType) { + case 'add': + await createProjectFlockHandler(payload); + break; + case 'edit': + await updateProjectFlockHandler(payload); + break; + default: + break; + } + }, + }); + + const { setValues: formikSetValues } = formik; + // Effect Initial + useEffect(() => { + if (formType == 'detail') { + formik.setFieldValue('area', { + value: initialValues?.area.id, + label: initialValues?.area.name, + }); + formik.setFieldValue('area_id', initialValues?.area_id); + if (initialValues?.area_id) { + setSelectedArea(initialValues?.area_id.toString() as string); + } + + formik.setFieldValue('period', initialValues?.period); + } + }, [initialValues, setSelectedArea, formType]); + + useEffect(() => { + formikSetValues(formikInitialValues); + }, [formikSetValues, formikInitialValues]); + + // Aktifkan lokasi jika formType = 'detail' + useEffect(() => { + if (formType === 'detail') { + setDisabledLocation(false); + } + }, [formType]); + + // 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 + } + }, [formType, initialValues]); + + useEffect(() => { + formik.validateForm(); + }, [formik.values]); + + useEffect(() => { + if(isResponseSuccess(periodFlocks)){ + formik.setFieldValue('period', periodFlocks.data.next_period); + } + }, [periodFlocks]); + + // Actions handler + const confirmationModalDeleteClickHandler = async () => { + setIsDeleteLoading(true); + const deleteProjectFlockRes = await ProjectFlockApi.delete( + initialValues?.id as number + ); + + if (isResponseSuccess(deleteProjectFlockRes)) { + toast.success(deleteProjectFlockRes?.message as string); + router.push('/production/project-flock'); + } + if (isResponseError(deleteProjectFlockRes)) { + toast.error(deleteProjectFlockRes?.message as string); + } + setIsDeleteLoading(false); + }; + + const confirmationModalApproveClickHandler = async () => { + setIsApproveLoading(true); + const approveProjectFlockRes = await ProjectFlockApi.customRequest< + BaseApiResponse, + 'POST' + >(`/${initialValues?.id}/approve`, { + method: 'POST', + }); + + if (isResponseSuccess(approveProjectFlockRes)) { + toast.success('Project Flock berhasil di-approve!'); + confirmModal.closeModal(); + } + if (isResponseError(approveProjectFlockRes)) { + toast.error(approveProjectFlockRes?.message as string); + confirmModal.closeModal(); + } + setIsApproveLoading(false); + }; + + return ( + <> +
+
+ + +

+ {formType === 'add' && 'Tambah Project Flock'} + {formType === 'detail' && 'Detail Project Flock'} +

+
+ {projectFlockFormErrorMessage && ( +
+
+ + {projectFlockFormErrorMessage} + +
+
+ )} + {formType == 'detail' && ( +
+ +
+ )} +
+
+
+
+ Informasi Umum +
+ +
+ + { + optionChangeHandler(val, 'flock'); + setSelectedFlock((val as OptionType)?.value as number); + }} + options={optionsFlock} + isLoading={isLoadingFlocks} + isError={ + formik.touched.flock_id && Boolean(formik.errors.flock_id) + } + errorMessage={formik.errors.flock_id as string} + isClearable + isDisabled={formType === 'detail'} + /> + + { + optionChangeHandler(val, 'fcr'); + }} + options={optionsFcr} + isLoading={isLoadingFcrs} + isError={ + formik.touched.fcr_id && Boolean(formik.errors.fcr_id) + } + errorMessage={formik.errors.fcr_id as string} + isClearable + isDisabled={formType === 'detail'} + /> + + +
+
+
+
+
+ +
Pilih Kandang
+ +
+ } + className='sm:w-full' + titleClassName='w-full p-0!' + onOpenChange={setOpenSelectKandangs} + open={openSelectKandangs} + > +
+ {isLoadingKandang && ( + + )} + + {/* head */} + + + + + + + + + + {/* rows */} + {selectedLocation != '' && + optionsKandang.map((kandang) => ( + + + + + + + ))} + {selectedLocation == '' && ( + + + + )} + + {/* foot */} + {selectedLocation != '' && ( + + + + + + + + )} +
+ + KandangStatusPenanggung Jawab
+ + {kandang.name}{kandang.status}{kandang.pic?.name}
+ Data tidak tersedia +
KandangPenanggung Jawab
+
+ +
+ + +
+ {formType !== 'detail' && ( +
+ + +
+ )} +
+
+ {formType != 'add' && ( +
+ +
+ )} +
+ + + + + + ); +}; + +export default ProjectFlockForm; diff --git a/src/components/steps/StepItem.tsx b/src/components/steps/StepItem.tsx new file mode 100644 index 00000000..85ec4f3e --- /dev/null +++ b/src/components/steps/StepItem.tsx @@ -0,0 +1,34 @@ +import { ReactNode } from 'react'; + +import { cn } from '@/lib/helper'; +import { Color } from '@/types/theme'; + +interface StepItemProps { + children?: ReactNode; + icon?: ReactNode; + className?: string; + color?: Color; +} + +const StepItem = ({ children, icon, className, color }: StepItemProps) => { + const stepItemBaseClassName = cn('step', { + 'step-primary': color === 'primary', + 'step-secondary': color === 'secondary', + 'step-accent': color === 'accent', + 'step-neutral': color === 'neutral', + 'step-info': color === 'info', + 'step-success': color === 'success', + 'step-warning': color === 'warning', + 'step-error': color === 'error', + }); + + return ( +
  • + {icon} + +
    {children}
    +
    • + ); +}; + +export default StepItem; diff --git a/src/components/steps/Steps.tsx b/src/components/steps/Steps.tsx new file mode 100644 index 00000000..29d307e1 --- /dev/null +++ b/src/components/steps/Steps.tsx @@ -0,0 +1,23 @@ +import { ReactNode } from 'react'; +import { cn } from '@/lib/helper'; + +interface StepsProps { + children?: ReactNode; + className?: string; + direction?: 'horizontal' | 'vertical'; +} + +const Steps = ({ children, className, direction }: StepsProps) => { + const stepsBaseClassName = cn('steps gap-2', { + 'steps-horizontal': direction === 'horizontal', + 'steps-vertical': direction === 'vertical', + }); + + return ( +
      + {children} +
    + ); +}; + +export default Steps; diff --git a/src/components/table/TableRowOptions.tsx b/src/components/table/TableRowOptions.tsx new file mode 100644 index 00000000..4e2e2c93 --- /dev/null +++ b/src/components/table/TableRowOptions.tsx @@ -0,0 +1,71 @@ +import { Icon } from '@iconify/react'; +import Button from '../Button'; +import { cn } from '@/lib/helper'; + +interface TableRowOptionsProps { + type?: 'dropdown' | 'collapse'; + recordId: string | number; + basePath: string; + onDelete?: () => void; + queryParam?: string; + showEdit?: boolean; + showDelete?: boolean; +} + +export const TableRowOptions = ({ + type = 'dropdown', + recordId, + basePath, + onDelete, + queryParam = 'id', + showEdit = true, + showDelete = true, +}: TableRowOptionsProps) => ( +
    + + {showEdit && ( + + )} + {showDelete && onDelete && ( + + )} +
    +); diff --git a/src/components/table/TableRowSizeSelector.tsx b/src/components/table/TableRowSizeSelector.tsx new file mode 100644 index 00000000..a6fd039d --- /dev/null +++ b/src/components/table/TableRowSizeSelector.tsx @@ -0,0 +1,33 @@ +import SelectInput from '../input/SelectInput'; + +export interface OptionType { + label: string; + value: string | number; +} + +interface TableRowSizeSelectorProps { + value: number; + onChange: (val: OptionType | OptionType[] | null) => void; + options: OptionType[]; +} + +export const TableRowSizeSelector = ({ + value, + onChange, + options, +}: TableRowSizeSelectorProps) => { + return ( +
    + +
    + ); +}; diff --git a/src/components/table/TableToolbar.tsx b/src/components/table/TableToolbar.tsx new file mode 100644 index 00000000..e3b385b1 --- /dev/null +++ b/src/components/table/TableToolbar.tsx @@ -0,0 +1,37 @@ +import { Icon } from '@iconify/react'; +import Button from '../Button'; +import DebouncedTextInput from '../input/DebouncedTextInput'; + +interface TableToolbarProps { + addButton?: { + href: string; + label: string; + }; + search: { + value: string; + onChange: (e: React.ChangeEvent) => void; + placeholder?: string; + }; +} + +export const TableToolbar = ({ addButton, search }: TableToolbarProps) => { + return ( +
    + {addButton && ( +
    + +
    + )} + +
    + ); +}; diff --git a/src/config/constant.ts b/src/config/constant.ts index ed68adb5..053a50cc 100644 --- a/src/config/constant.ts +++ b/src/config/constant.ts @@ -12,6 +12,52 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [ icon: 'gg:chart', }, + { + title: 'Production', + link: '/production', + icon: 'material-symbols:conveyor-belt-outline-rounded', + submenu: [ + { + title: 'List Flock', + link: '/production/project-flock', + icon: 'material-symbols:list-alt-add-outline-rounded', + }, + { + title: 'Chick In', + link: '/production/chick-in', + icon: 'mdi:home-import-outline', + }, + { + title: 'Recording', + link: '/production/recording', + icon: 'mdi:clipboard-text', + }, + ], + }, + + { + title: 'Persediaan', + link: '/inventory', + icon: 'mdi:warehouse', + submenu: [ + { + title: 'Product', + link: '/inventory/product', + icon: 'mdi:package-variant-closed', + }, + { + title: 'Penyesuaian Stok', + link: '/inventory/adjustment', + icon: 'mdi:database-edit', + }, + { + title: 'Transfer Stok', + link: '/inventory/movement', + icon: 'mdi:swap-horizontal', + }, + ], + }, + { title: 'Master Data', link: '/master-data', @@ -77,22 +123,16 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [ link: '/master-data/supplier', icon: 'material-symbols:add-business-outline-rounded', }, + { + title: 'Flock', + link: '/master-data/flock', + icon: 'material-symbols:raven-outline-rounded' + }, ], }, - { - title: 'Persediaan', - link: '/inventory', - icon: 'material-symbols:box-outline-rounded', - submenu: [ - { - title: 'Penyesuaian Persediaan', - link: '/inventory/adjustment', - icon: 'material-symbols:box-edit-outline-rounded', - } - ] - }, ] as const; + export const ROWS_OPTIONS = [ { label: '10', @@ -149,6 +189,17 @@ export const CATEGORY_OPTIONS = [ }, ]; +export const FLOCK_CATEGORY_OPTIONS = [ + { + label: 'GROWING', + value: 'GROWING', + }, + { + label: 'LAYING', + value: 'LAYING', + }, +]; + export const PRODUCT_FLAG_OPTIONS = [ { label: 'DOC', value: 'DOC' }, { label: 'PAKAN', value: 'PAKAN' }, diff --git a/src/lib/form-data.ts b/src/lib/form-data.ts new file mode 100644 index 00000000..d94e0724 --- /dev/null +++ b/src/lib/form-data.ts @@ -0,0 +1,45 @@ +export function toFormData( + value: unknown, + form = new FormData(), + parentKey?: string +) { + if (value === undefined || value === null) { + if (parentKey) form.append(parentKey, ''); + return form; + } + + if (value instanceof File) { + if (!parentKey) throw new Error('File must have a key'); + form.append(parentKey, value); + return form; + } + + if (Array.isArray(value)) { + value.forEach((v, i) => { + const key = parentKey ? `${parentKey}[${i}]` : `${i}`; + toFormData(v, form, key); + }); + return form; + } + + if (typeof value === 'object') { + Object.entries(value as Record).forEach(([k, v]) => { + const key = parentKey ? `${parentKey}[${k}]` : k; + toFormData(v, form, key); + }); + return form; + } + + if (parentKey) form.append(parentKey, String(value)); + return form; +} + +export function containsFile(obj: unknown): boolean { + if (!obj) return false; + if (obj instanceof File) return true; + if (Array.isArray(obj)) return obj.some(containsFile); + if (typeof obj === 'object') { + return Object.values(obj as Record).some(containsFile); + } + return false; +} diff --git a/src/services/api/base.ts b/src/services/api/base.ts index d1ac4729..5ccabdd7 100644 --- a/src/services/api/base.ts +++ b/src/services/api/base.ts @@ -4,9 +4,11 @@ import { BaseApiResponse } from '@/types/api/api-general'; export class BaseApiService { basePath: string; + header?: Record; - constructor(basePath: string) { + constructor(basePath: string, header?: Record) { this.basePath = basePath; + this.header = header; } async getAllFetcher(endpoint: string): Promise> { @@ -23,42 +25,52 @@ export class BaseApiService { if (axios.isAxiosError>(error)) { return error.response?.data; } - return undefined; } } async create(payload: CreatePayloadGeneric) { + const isFormData = + typeof FormData !== 'undefined' && payload instanceof FormData; try { + const headers = isFormData + ? { ...(this.header ?? {}) } + : { 'Content-Type': 'application/json', ...(this.header ?? {}) }; + const createRes = await httpClient>(this.basePath, { method: 'POST', body: payload, + headers, }); - return createRes; } catch (error: unknown) { if (axios.isAxiosError>(error)) { return error.response?.data; } - return undefined; } } async update(id: number, payload: UpdatePayloadGeneric) { + const isFormData = + typeof FormData !== 'undefined' && payload instanceof FormData; try { const updatePath = `${this.basePath}/${id}`; + + const headers = isFormData + ? { ...(this.header ?? {}) } + : { 'Content-Type': 'application/json', ...(this.header ?? {}) }; + const updateRes = await httpClient>(updatePath, { method: 'PATCH', body: payload, + headers, }); - return updateRes; } catch (error: unknown) { if (axios.isAxiosError>(error)) { return error.response?.data; } - return undefined; } } @@ -69,13 +81,47 @@ export class BaseApiService { const deleteRes = await httpClient(deletePath, { method: 'DELETE', }); - return deleteRes; } catch (error) { if (axios.isAxiosError(error)) { return error.response?.data; } + return undefined; + } + } + async customRequest( + endpoint: string, + options?: { + method?: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE'; + payload?: PayloadType; + params?: Record; + } + ): Promise { + try { + const urlBase = endpoint.startsWith('http') + ? endpoint + : `${this.basePath.replace(/\/$/, '')}/${endpoint.replace(/^\//, '')}`; + + const url = options?.params + ? `${urlBase}?${new URLSearchParams( + Object.entries(options.params).reduce((acc, [key, value]) => { + if (value !== undefined) acc[key] = String(value); + return acc; + }, {} as Record) + )}` + : urlBase; + + const res = await httpClient(url, { + method: options?.method || 'GET', + body: options?.payload, + }); + + return res; + } catch (error: unknown) { + if (axios.isAxiosError(error)) { + return error.response?.data; + } return undefined; } } diff --git a/src/services/api/inventory.ts b/src/services/api/inventory.ts index 230bb60a..ec58f6f2 100644 --- a/src/services/api/inventory.ts +++ b/src/services/api/inventory.ts @@ -1,11 +1,33 @@ +import { BaseApiService } from '@/services/api/base'; import { - InventoryAdjustment, - CreateInventoryAdjustmentPayload, + CreateProductWarehousePayload, + ProductWarehouse, + UpdateProductWarehousePayload, +} from '@/types/api/inventory/product-warehouse'; +import { + CreateMovementPayload, + Movement, + UpdateMovementPayload, +} from '@/types/api/inventory/movement'; +import { + CreateInventoryAdjustmentPayload, + InventoryAdjustment, } from '@/types/api/inventory/adjustment'; -import { BaseApiService } from './base'; + +export const ProductWarehouseApi = new BaseApiService< + ProductWarehouse, + CreateProductWarehousePayload, + UpdateProductWarehousePayload +>('/inventory/product-warehouses'); + +export const MovementApi = new BaseApiService< + Movement, + CreateMovementPayload, + UpdateMovementPayload +>('/inventory/transfers'); export const inventoryAdjustmentApi = new BaseApiService< - InventoryAdjustment, - CreateInventoryAdjustmentPayload, - unknown ->('/inventory/adjustments'); \ No newline at end of file + InventoryAdjustment, + CreateInventoryAdjustmentPayload, + unknown +>('/inventory/adjustments'); diff --git a/src/services/api/master-data.ts b/src/services/api/master-data.ts index dce528e7..854bb8f3 100644 --- a/src/services/api/master-data.ts +++ b/src/services/api/master-data.ts @@ -59,6 +59,11 @@ import { Fcr, UpdateFcrPayload, } from '@/types/api/master-data/fcr'; +import { + CreateFlockPayload, + Flock, + UpdateFlockPayload, +} from '@/types/api/master-data/flock'; export const UomApi = new BaseApiService< Uom, @@ -130,3 +135,9 @@ export const FcrApi = new BaseApiService< CreateFcrPayload, UpdateFcrPayload >('/master-data/fcrs'); + +export const FlockApi = new BaseApiService< + Flock, + CreateFlockPayload, + UpdateFlockPayload +>('/master-data/flocks'); \ No newline at end of file diff --git a/src/services/api/production.ts b/src/services/api/production.ts new file mode 100644 index 00000000..06e51c2c --- /dev/null +++ b/src/services/api/production.ts @@ -0,0 +1,11 @@ +import { + ProjectFlock, + CreateProjectFlockPayload, +} from '@/types/api/production/project-flock'; +import { BaseApiService } from '@/services/api/base'; + +export const ProjectFlockApi = new BaseApiService< + ProjectFlock, + CreateProjectFlockPayload, + unknown +>('/production/project_flocks'); \ No newline at end of file diff --git a/src/services/hooks/useAuth.tsx b/src/services/hooks/useAuth.tsx index 86bf43ed..79fa8981 100644 --- a/src/services/hooks/useAuth.tsx +++ b/src/services/hooks/useAuth.tsx @@ -6,22 +6,43 @@ type AuthStore = { isLoadingUser?: boolean; setUser: (newUserData?: UserWithRoles) => void; setIsLoadingUser: (isLoading?: boolean) => void; + permissionCheck: (permissionName: string) => boolean; }; -const useAuthStore = create()((set) => ({ +const useAuthStore = create()((set, get) => ({ user: undefined, isLoadingUser: false, setUser: (newUserData) => set({ user: newUserData }), setIsLoadingUser: (isLoading) => set({ isLoadingUser: Boolean(isLoading) }), + + permissionCheck: (name) => { + const { user, isLoadingUser } = get(); + + if (!isLoadingUser && user) { + const isAllowed = user.roles.some((role) => { + const isPermissionNameAllowed = role.permissions.some( + (permission) => permission.name === name + ); + + return isPermissionNameAllowed; + }); + + return isAllowed; + } + + return false; + }, })); export const useAuth = () => { - const { user, setUser, isLoadingUser, setIsLoadingUser } = useAuthStore(); + const { user, setUser, isLoadingUser, setIsLoadingUser, permissionCheck } = + useAuthStore(); return { user, setUser, isLoadingUser, setIsLoadingUser, + permissionCheck, }; }; diff --git a/src/services/http/client.ts b/src/services/http/client.ts index adba75e9..9dd382ca 100644 --- a/src/services/http/client.ts +++ b/src/services/http/client.ts @@ -14,6 +14,9 @@ export async function httpClient( (!opts.auth && opts.auth !== 'none' && opts.auth !== 'bearer'); const isBearerAuth = opts.auth === 'bearer' && !!opts.token; + const isFormData = + typeof FormData !== 'undefined' && opts.body instanceof FormData; + const config: AxiosRequestConfig = { url: path, method: opts.method ?? 'GET', @@ -22,7 +25,7 @@ export async function httpClient( timeout: opts.timeoutMs ?? 10_000, withCredentials: isCookieAuth && !isBearerAuth, headers: { - 'Content-Type': 'application/json', + ...(isFormData ? {} : { 'Content-Type': 'application/json' }), ...(opts.headers ?? {}), ...(isBearerAuth && !isCookieAuth ? { Authorization: `Bearer ${opts.token}` } diff --git a/src/stores/ui/ui.store.ts b/src/stores/ui/ui.store.ts index 2e64dcc1..49554bc9 100644 --- a/src/stores/ui/ui.store.ts +++ b/src/stores/ui/ui.store.ts @@ -4,7 +4,7 @@ import { create } from 'zustand'; import { devtools } from 'zustand/middleware'; import { UIStore } from '@/types/stores'; -import { createMainUiSlice } from './slices/main.slice'; +import { createMainUiSlice } from '@/stores/ui/slices/main.slice'; export const useUiStore = create()( devtools( diff --git a/src/styles/daisyui.css b/src/styles/daisyui.css new file mode 100644 index 00000000..9a148fb4 --- /dev/null +++ b/src/styles/daisyui.css @@ -0,0 +1,11 @@ +@layer utilities { + .step.step-success::before { + --step-bg: var(--color-success); + --step-fg: var(--color-success-content); + } + + .step.step-error::before { + --step-bg: var(--color-error); + --step-fg: var(--color-error-content); + } +} diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts index 6a3fc6be..c118b5a4 100644 --- a/src/types/api/api-general.d.ts +++ b/src/types/api/api-general.d.ts @@ -24,6 +24,36 @@ export type LogoutResponse = BaseApiResponse; export type GetMeResponse = BaseApiResponse; +export type Client = { + id: number; + name: stirng; + alias: string; + created_at: string; + updated_at: string; +}; + +export type Permission = { + id: number; + name: string; + action: string; + client: Omit; + created_at: string; + updated_at: string; +}; + +export type Role = { + id: number; + key: string; + name: string; + client: Omit; + created_at: string; + updated_at: string; +}; + +export type RoleWithPermissions = Omit & { + permissions: Omit[]; +}; + export type User = { id: number; email: string; @@ -66,3 +96,11 @@ export type flags = | 'STARTER' | 'FINISHER' | 'OVK'; + +export type ApprovalsLine = { + action_by?: string; + date?: string; + notes?: string; + role?: string; + status: 'approved' | 'rejected' | 'waiting'; +}[]; diff --git a/src/types/api/inventory/adjustment.d.ts b/src/types/api/inventory/adjustment.d.ts index 9d995919..852389fe 100644 --- a/src/types/api/inventory/adjustment.d.ts +++ b/src/types/api/inventory/adjustment.d.ts @@ -1,5 +1,5 @@ import { Product } from '@/types/api/master-data/product'; -import { Warehouse } from '../master-data/warehouse'; +import { Warehouse } from '@/types/api/master-data/warehouse'; export type BaseInventoryAdjustment = { id: number; diff --git a/src/types/api/inventory/movement.d.ts b/src/types/api/inventory/movement.d.ts new file mode 100644 index 00000000..87a03f95 --- /dev/null +++ b/src/types/api/inventory/movement.d.ts @@ -0,0 +1,75 @@ +import { BaseMetadata } from '@/types/api/api-general'; +import { Supplier } from '@/types/api/master-data/supplier'; + +type MovementWarehouse = { + id: number; + name: string; + location: { + id: number; + name: string; + } | null; + area: { + id: number; + name: string; + }; +}; + +export type BaseMovement = { + id: number; + transfer_reason: string; + transfer_date: string; + source_warehouse: MovementWarehouse; + destination_warehouse: MovementWarehouse; + details: { + id: number; + product: { + id: number; + name: string; + }; + quantity: number; + before_quantity: number; + after_quantity: number; + }[]; + deliveries: { + id: number; + supplier: Supplier; + vehicle_plate: string; + driver_name: string; + document_number: string; + document_path: string; + shipping_cost_item: number; + shipping_cost_total: number; + items: { + id: number; + stock_transfer_detail_id: number; + quantity: number; + }[]; + }[]; +}; + +export type Movement = BaseMetadata & BaseMovement; + +export type CreateMovementPayload = { + transfer_reason: string; + transfer_date: string; + source_warehouse_id: number; + destination_warehouse_id: number; + products: { + product_id: number; + product_qty: number; + }[]; + deliveries: { + delivery_cost: number; + delivery_cost_per_item: number; + document_index?: number; + driver_name: string; + vehicle_plate: string; + supplier_id: number; + products: { + product_id: number; + product_qty: number; + }[]; + }[]; +}; + +export type UpdateMovementPayload = CreateMovementPayload; diff --git a/src/types/api/inventory/product-warehouse.d.ts b/src/types/api/inventory/product-warehouse.d.ts new file mode 100644 index 00000000..eda8d1b8 --- /dev/null +++ b/src/types/api/inventory/product-warehouse.d.ts @@ -0,0 +1,22 @@ +import { BaseMetadata } from '@/types/api/api-general'; +import { Warehouse } from '@/types/api/master-data/warehouse'; +import { Product } from '@/types/api/master-data/product'; + +export type BaseProductWarehouse = { + id: number; + product_id: number; + warehouse_id: number; + quantity: number; + product: Product; + warehouse: Warehouse; +}; + +export type ProductWarehouse = BaseMetadata & BaseProductWarehouse; + +export type CreateProductWarehousePayload = { + product_id: number; + warehouse_id: number; + quantity: number; +}; + +export type UpdateProductWarehousePayload = CreateProductWarehousePayload; diff --git a/src/types/api/master-data/flock.d.ts b/src/types/api/master-data/flock.d.ts new file mode 100644 index 00000000..3ac5d390 --- /dev/null +++ b/src/types/api/master-data/flock.d.ts @@ -0,0 +1,14 @@ +import { BaseMetadata } from "@/types/api/api-general"; + +export type BaseFlock = { + id: number; + name: string; +} + +export type Flock = BaseMetadata & BaseFlock; + +export type CreateFlockPayload = { + name: string; +} + +export type UpdateFlockPayload = CreateFlockPayload; \ No newline at end of file diff --git a/src/types/api/master-data/kandang.d.ts b/src/types/api/master-data/kandang.d.ts index e05006d1..17cbbee7 100644 --- a/src/types/api/master-data/kandang.d.ts +++ b/src/types/api/master-data/kandang.d.ts @@ -5,6 +5,7 @@ import { BaseUser } from '@/types/api/user'; export type BaseKandang = { id: number; name: string; + status: string; location: BaseLocation; pic: BaseUser; }; diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts new file mode 100644 index 00000000..306c32f1 --- /dev/null +++ b/src/types/api/production/project-flock.d.ts @@ -0,0 +1,44 @@ +import { Area } from "@/types/api/master-data/area"; +import { Fcr } from "@/types/api/master-data/fcr"; +import { Flock } from "@/types/api/master-data/flock"; +import { Kandang } from "@/types/api/master-data/kandang"; +import { Location } from "@/types/api/master-data/location"; +import { BaseMetadata } from "@/types/api/api-general"; + +export type BaseProjectFlock = { + id: number; + name: string; + status: string; + flock: Flock; + flock_id: number; + area: Area; + area_id: number; + category: string; + fcr: Fcr; + fcr_id: number; + location: Location; + location_id: number; + period: number; + kandang_ids: number[]; + kandangs: Kandang[]; +} + +export type PeriodFlock = { + flock: Flock; + next_period: number; +} + + +export type ProjectFlock = BaseMetadata & BaseProjectFlock + +export type CreateProjectFlockPayload = { + flock_id: number; + area_id: number; + category: string; + fcr_id: number; + location_id: number; + period: number; + kandang_ids: number[]; +} + +export type UpdateProjectFlockPayload = CreateProjectFlockPayload; \ No newline at end of file