gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 13:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev/randy' into 'feat/FE/US-75/chick-in-doc'

Browse Source 
[FEAT/FE][US#75/TASK#92-93-94-105] Slicing UI detail, create and edit Chickin and integrate with API

See merge request mbugroup/lti-web-client!33
This commit is contained in:
Rivaldi A N S
2025-10-27 03:27:19 +00:00
parent 24ed2cccbe a65d00edc8
commit 459605f133
28 changed files with 1893 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.husky/pre-commit
+2
View File
@@ -0,0 +1,2 @@
npm run lint
npm run build
package-lock.json
Generated
+473 -537
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -1
View File
@@ -6,7 +6,8 @@
"dev": "eslint && next dev --turbopack",
"build": "next build --turbopack",
"start": "next start",
"lint": "eslint"
"lint": "eslint",
"prepare": "husky"
},
"dependencies": {
"@tanstack/match-sorter-utils": "^8.19.4",
@@ -19,6 +20,7 @@
"react": "19.1.0",
"react-dom": "19.1.0",
"react-hot-toast": "^2.6.0",
"react-number-format": "^5.4.4",
"react-select": "^5.10.2",
"swr": "^2.3.6",
"tailwind-merge": "^3.3.1",
@@ -36,6 +38,7 @@
"daisyui": "^5.1.12",
"eslint": "^9",
"eslint-config-next": "15.5.3",
"husky": "^9.1.7",
"tailwindcss": "^4",
"typescript": "^5"
}
src/app/production/chickin/add/page.tsx
+54 -33
View File
@@ -3,6 +3,7 @@
import Button from '@/components/Button';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import Modal, { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
import Table from '@/components/Table';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -14,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { Icon } from '@iconify/react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import useSWR from 'swr';
@@ -33,6 +34,10 @@ const AddChickin = () => {
const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
undefined
);
const [projectFlockKandang, setProjectFlockKandang] =
useState<BaseApiResponse<ProjectFlockKandang>>();
const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
useState(false);
const [searchProjectFlock, setSearchProjectFlock] = useState('');
// Fetch Data
@@ -41,44 +46,26 @@ const AddChickin = () => {
(id: number) => ProjectFlockApi.getSingle(id)
);
const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
search: searchProjectFlock,
}).toString()}`, ProjectFlockApi.getAllFetcher);
useSWR(
`${ProjectFlockApi.basePath}?${new URLSearchParams({
search: searchProjectFlock,
}).toString()}`,
ProjectFlockApi.getAllFetcher
);
const getProjectFlockKandangUrl = `/kandangs/lookup`;
const {
data: projectFlockKandang,
isLoading: isLoadingProjectFlockKandang,
mutate: refreshProjectFlockKandang,
} = useSWR(getProjectFlockKandangUrl, () =>
ProjectFlockApi.customRequest<BaseApiResponse<ProjectFlockKandang>, 'GET'>(
getProjectFlockKandangUrl,
{
method: 'GET',
params: {
project_flock_id: projectFlockId ?? 0,
kandang_id: selectedKandang?.id,
},
}
)
);
// Mapping Options
const options = isResponseSuccess(listProjectFlock)
? listProjectFlock?.data.map((projectFlock) => {
return {
value: projectFlock.id,
label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
};
})
: [];
const chickinModal = useModal();
// Use Effect
useEffect(() => {
refreshProjectFlockKandang();
}, [selectedKandang, refreshProjectFlockKandang]);
const alertModal = useModal();
if (!projectFlockId) {
router.back();
@@ -99,13 +86,33 @@ const AddChickin = () => {
}
// Handle Function
const handleChickinClick = (kandang: Kandang) => {
const handleChickinClick = async (kandang: Kandang) => {
setIsLoadingProjectFlockKandang(true);
setSelectedKandang(kandang);
refreshProjectFlockKandang();
chickinModal.openModal();
const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
BaseApiResponse<ProjectFlockKandang>,
'GET'
>(getProjectFlockKandangUrl, {
method: 'GET',
params: {
project_flock_id: projectFlockId ?? 0,
kandang_id: kandang.id,
},
});
if (isResponseSuccess(ProjectFlockKandangRes)) {
setProjectFlockKandang(ProjectFlockKandangRes);
setIsLoadingProjectFlockKandang(false);
if (
ProjectFlockKandangRes.data.available_quantity &&
ProjectFlockKandangRes.data.available_quantity > 0
) {
chickinModal.openModal();
} else {
alertModal.openModal();
}
}
};
const handleAfterSubmit = () => {
refreshProjectFlockKandang();
chickinModal.closeModal();
router.push('/production/chickin');
};
@@ -126,7 +133,7 @@ const AddChickin = () => {
</Button>
<div className='flex flex-col gap-4 w-full my-4'>
<div className='max-w-1/4'>
<div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
<SelectInput
required
isSearchable
@@ -173,10 +180,10 @@ const AddChickin = () => {
<Button
color='success'
variant='outline'
isLoading={isLoadingProjectFlockKandang}
onClick={() => {
handleChickinClick(props.row.original);
}}
disabled={isLoadingProjectFlockKandang}
>
<Icon
icon='mdi:home-import-outline'
@@ -235,11 +242,25 @@ const AddChickin = () => {
created_user: projectFlock.data.created_user,
created_at: projectFlock.data.created_at,
updated_at: projectFlock.data.updated_at,
approval: projectFlock.data.approval,
}}
afterSubmit={handleAfterSubmit}
/>
)}
</Modal>
<ConfirmationModal
ref={alertModal.ref}
type='info'
text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
secondaryButton={undefined}
primaryButton={{
text: 'Ya',
color: 'info',
onClick: () => {
alertModal.closeModal();
},
}}
/>
</>
)}
</>
src/app/production/chickin/detail/layout.tsx
+11
View File
@@ -0,0 +1,11 @@
import SuspenseHelper from "@/components/helper/SuspenseHelper"
const Layout = ({
children
}: Readonly<{
children: React.ReactNode
}>) => {
return <SuspenseHelper>{children}</SuspenseHelper>
}
export default Layout;
src/app/production/chickin/detail/page.tsx
+345
View File
@@ -0,0 +1,345 @@
'use client';
import Button from '@/components/Button';
import Card from '@/components/Card';
import Modal, { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { ChickinApi } from '@/services/api/production';
import { BaseApiResponse } from '@/types/api/api-general';
import {
Chickin,
ChickinApprovalPayload,
} from '@/types/api/production/chickin';
import { Icon } from '@iconify/react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';
const DetailChickin = () => {
const router = useRouter();
const searchParams = useSearchParams();
const chickinId = searchParams.get('chickinId');
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const confirmModal = useModal();
const deleteModal = useModal();
const chickinModal = useModal();
const {
data: chickin,
isLoading,
mutate: refreshChickin,
} = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
// chickin.data?.approval.step_number == 1 ? false : true
true
);
const [isRejectedDisabled, setIsRejectedDisabled] = useState(
!isApprovedDisabled
);
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
!isApprovedDisabled ? 'APPROVED' : 'REJECTED'
);
if (!chickinId) {
router.back();
return (
<div className='w-full flex flex-row justify-center items-center p-4'>
<span className='loading loading-spinner loading-xl' />
</div>
);
}
if (!isLoading && (!chickin || isResponseError(chickin))) {
router.replace('/404');
return;
}
if (!isResponseSuccess(chickin)) {
return (
<div className='w-full flex flex-row justify-center items-center p-4'>
<span className='loading loading-spinner loading-xl' />
</div>
);
}
const confirmationModalClickHandler = async ({
action = 'APPROVED',
}: {
action: 'APPROVED' | 'REJECTED';
}) => {
if (chickin?.data.id === undefined) return;
setIsApproveLoading(true);
const approveChickinRes = await ChickinApi.customRequest<
BaseApiResponse<Chickin>,
ChickinApprovalPayload
>(`/approvals`, {
method: 'POST',
payload: {
action: action,
approvable_ids: [chickin.data.id],
},
});
if (isResponseSuccess(approveChickinRes)) {
if (refreshChickin) {
await refreshChickin();
}
toast.success(approveChickinRes.message as string);
}
if (isResponseError(approveChickinRes)) {
toast.error(approveChickinRes?.message as string);
}
confirmModal.closeModal();
setIsApproveLoading(false);
};
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
const deleteProjectFlockRes = await ChickinApi.delete(
chickin.data?.id as number
);
if (isResponseSuccess(deleteProjectFlockRes)) {
toast.success(deleteProjectFlockRes?.message as string);
router.push('/production/chickin');
}
if (isResponseError(deleteProjectFlockRes)) {
toast.error(deleteProjectFlockRes?.message as string);
}
setIsDeleteLoading(false);
};
return (
<>
<div className='w-full p-4 flex flex-col justify-center gap-4'>
{isLoading && <span className='loading loading-spinner loading-xl' />}
{!isLoading && isResponseSuccess(chickin) && (
<>
{/* <div className='w-full flex flex-col sm:flex-row gap-2'>
<Button
variant='outline'
color='success'
onClick={(() => {
if (chickin?.data.id) {
setApprovalAction('APPROVED');
confirmModal.openModal();
}
})}
disabled={!chickin?.data.id || isApprovedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
Approve
</Button>
<Button
variant='outline'
color='error'
onClick={() => {
if (chickin?.data.id) {
setApprovalAction('REJECTED');
confirmModal.openModal();
}
}}
disabled={!chickin?.data.id || isRejectedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='mdi:times' width={24} height={24} />
Reject
</Button>
</div> */}
<Card
title='Informasi Umum'
variant='bordered'
className={{
wrapper: 'w-full',
}}
>
<div className='grid grid-cols-2 gap-4 mt-4'>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Flock</div>
<div className='text-sm'>
{
chickin.data.project_flock_kandang?.project_flock.flock
.name
}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Area</div>
<div className='text-sm'>
{
chickin.data.project_flock_kandang?.project_flock.area
.name
}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Kategori</div>
<div className='text-sm'>
{chickin.data.project_flock_kandang?.project_flock.category}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Lokasi</div>
<div className='text-sm'>
{
chickin.data.project_flock_kandang?.project_flock.location
.name
}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Periode</div>
<div className='text-sm'>
{chickin.data.project_flock_kandang?.project_flock.period}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Kandang</div>
<div className='text-sm'>
{chickin.data.project_flock_kandang?.kandang.name}
</div>
</div>
</div>
</Card>
<Card
title='Detail Chickin'
variant='bordered'
className={{
wrapper: 'w-full',
}}
>
<div className='grid grid-cols-2 gap-4 mt-4'>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Flock Kandang</div>
<div className='text-sm'>
{
chickin.data.project_flock_kandang?.project_flock.flock
.name
}{' '}
- {chickin.data.project_flock_kandang?.kandang.name}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Tanggal Chickin</div>
<div className='text-sm'>
{chickin.data.chick_in_date
? new Date(chickin.data.chick_in_date).toLocaleDateString(
'id-ID'
)
: '-'}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Jumlah (Ekor)</div>
<div className='text-sm'>
{chickin.data.quantity?.toLocaleString('id-ID')}
</div>
</div>
<div className='flex flex-col gap-2'>
<div className='font-semibold text-sm'>Catatan</div>
<div className='text-sm'>{chickin.data.note}</div>
</div>
</div>
</Card>
<div className='w-full flex flex-col sm:flex-row gap-2'>
<Button
color='error'
onClick={() => {
deleteModal.openModal();
}}
>
<Icon icon='mdi:times' width={24} height={24} />
Delete
</Button>
<Button color='warning'
onClick={() => {
chickinModal.openModal();
}}
>
<Icon icon='mdi:pencil-outline' width={24} height={24} />
Edit
</Button>
</div>
</>
)}
</div>
<ConfirmationModal
ref={deleteModal.ref}
type='error'
text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
isLoading: isDeleteLoading,
onClick: confirmationModalDeleteClickHandler,
}}
/>
<Modal ref={chickinModal.ref}>
<div className='flex flex-row justify-between items-center'>
<h1 className='text-xl font-semibold text-center mb-6'>
Chickin Kandang -{' '}
{chickin?.data?.project_flock_kandang &&
chickin?.data?.project_flock_kandang.kandang?.name}
</h1>
<Button
color='error'
variant='link'
onClick={chickinModal.closeModal}
>
<Icon
className='text-black'
icon='uil:times'
width={24}
height={24}
/>
</Button>
</div>
<ChickinForm
initialValues={chickin?.data}
formType='edit'
afterSubmit={() => {
refreshChickin();
chickinModal.closeModal();
}}
/>
</Modal>
<ConfirmationModal
ref={confirmModal.ref}
type={approvalAction == 'APPROVED' ? 'success' : 'error'}
text={`Apakah anda yakin ingin ${
approvalAction == 'APPROVED' ? 'approve' : 'reject'
} chickin berikut? (${
chickin?.data.project_flock_kandang?.project_flock.flock.name
} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: approvalAction == 'APPROVED' ? 'success' : 'error',
isLoading: isApproveLoading,
onClick: () => {
confirmationModalClickHandler({
action: approvalAction,
});
},
}}
/>
</>
);
};
export default DetailChickin;
src/app/production/project-flock/detail/page.tsx
+29 -24
View File
@@ -1,46 +1,51 @@
'use client'
'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";
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 projectFlockId = searchParams.get('projectFlockId');
const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
projectFlockId,
(id: number) => ProjectFlockApi.getSingle(id)
);
const {
data: projectFlock,
isLoading: isLoadingProjectFlock,
mutate: refreshProjectFlock,
} = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
if(!projectFlockId){
if (!projectFlockId) {
router.back();
return (
<div className="w-full flex flex-row justify-center items-center p-4">
<span className="loading loading-spinner loading-xl" />
<div className='w-full flex flex-row justify-center items-center p-4'>
<span className='loading loading-spinner loading-xl' />
</div>
);
}
if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
router.replace("/404");
if (
!isLoadingProjectFlock &&
(!projectFlock || isResponseError(projectFlock))
) {
router.replace('/404');
return;
}
return (
<div className="w-full p-4 flex flex-row justify-center">
{isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
{!isLoadingCostumer && isResponseSuccess(projectFlock) && (
<ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
<div className='w-full p-4 flex flex-row justify-center'>
{isLoadingProjectFlock && (
<span className='loading loading-spinner loading-xl' />
)}
{!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
<ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
)}
</div>
)
}
);
};
export default ProjectFlockDetail;
export default ProjectFlockDetail;
src/app/production/project-flock/page.tsx
-1
View File
@@ -1,4 +1,3 @@
import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
const ProjectFlock = () => {
src/components/Card.tsx
+178
View File
@@ -0,0 +1,178 @@
"use client";
import { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/helper";
import Image from "next/image";
export interface CardProps
extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
title?: string;
subtitle?: string;
image?: string;
imageAlt?: string;
imageWidth?: number;
imageHeight?: number;
actions?: ReactNode;
footer?: ReactNode;
className?: {
wrapper?: string;
image?: string;
body?: string;
title?: string;
subtitle?: string;
actions?: string;
footer?: string;
};
variant?: "default" | "compact" | "bordered" | "shadow" | "image-full";
size?: "sm" | "md" | "lg";
}
const Card = ({
title,
subtitle,
image,
imageAlt,
imageWidth,
imageHeight,
actions,
footer,
className,
variant = "default",
size = "md",
children,
...props
}: CardProps) => {
const getCardClasses = () => {
const baseClasses = "card bg-base-100";
const variantClasses = {
default: "",
compact: "card-compact",
bordered: "border border-base-300",
shadow: "shadow-xl",
"image-full": "card-side card-compact shadow-xl",
};
const sizeClasses = {
sm: "w-64",
md: "w-96",
lg: "w-[28rem]",
};
return cn(
baseClasses,
variantClasses[variant],
variant !== "image-full" ? sizeClasses[size] : "",
className?.wrapper,
);
};
const getImageDimensions = () => {
if (variant === "image-full") {
return {
width: imageWidth || 128,
height: imageHeight || 128,
};
}
const cardWidths = {
sm: 256, // w-64
md: 384, // w-96
lg: 448, // w-[28rem]
};
return {
width: imageWidth || cardWidths[size],
height: imageHeight || 192,
};
};
const getImageClasses = () => {
if (variant === "image-full") {
return cn("object-cover", className?.image);
}
return cn("w-full object-cover", className?.image);
};
const getBodyClasses = () => {
const baseClasses = "card-body";
if (variant === "compact" || variant === "image-full") {
return cn(baseClasses, "p-4", className?.body);
}
return cn(baseClasses, "p-6", className?.body);
};
const getTitleClasses = () => {
const sizeClasses = {
sm: "text-lg",
md: "text-xl",
lg: "text-2xl",
};
return cn("card-title font-bold", sizeClasses[size], className?.title);
};
const getSubtitleClasses = () => {
return cn("text-base-content/70 text-sm mt-1", className?.subtitle);
};
const getActionsClasses = () => {
return cn("card-actions justify-end mt-4", className?.actions);
};
const getFooterClasses = () => {
return cn("border-t border-base-300 mt-4 pt-4", className?.footer);
};
if (variant === "image-full" && image) {
const imageDimensions = getImageDimensions();
return (
<div className={getCardClasses()} {...props}>
<figure>
<Image
src={image}
alt={imageAlt || title || "Card image"}
width={imageDimensions.width}
height={imageDimensions.height}
className={getImageClasses()}
/>
</figure>
<div className={getBodyClasses()}>
{title && <h2 className={getTitleClasses()}>{title}</h2>}
{subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
{children}
{actions && <div className={getActionsClasses()}>{actions}</div>}
</div>
{footer && <div className={getFooterClasses()}>{footer}</div>}
</div>
);
}
return (
<div className={getCardClasses()} {...props}>
{image && (
<figure>
<Image
src={image}
alt={imageAlt || title || "Card image"}
width={getImageDimensions().width}
height={getImageDimensions().height}
className={getImageClasses()}
/>
</figure>
)}
<div className={getBodyClasses()}>
{title && <h2 className={getTitleClasses()}>{title}</h2>}
{subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
{children}
{actions && <div className={getActionsClasses()}>{actions}</div>}
</div>
{footer && <div className={getFooterClasses()}>{footer}</div>}
</div>
);
};
export default Card;
src/components/PillBadge.tsx
+31
View File
@@ -0,0 +1,31 @@
import { ReactNode } from 'react';
import { cn } from '@/lib/helper';
interface PillBadgeProps {
content: ReactNode;
color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
className?: string;
}
const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
return (
<div
className={cn(
'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
{
'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
'border-green-200 bg-green-50 text-green-500': color === 'green',
'border-red-200 bg-red-50 text-red-500': color === 'red',
'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
},
className
)}
>
{content}
</div>
);
};
export default PillBadge;
src/components/Table.tsx
+13
View File
@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
sorting?: SortingState;
setSorting?: OnChangeFn<SortingState>;
manualSorting?: boolean;
rowSelection?: Record<string, boolean>;
setRowSelection?: OnChangeFn<Record<string, boolean>>;
}
const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +88,8 @@ const Table = <TData extends object>({
sorting,
setSorting,
manualSorting = false,
rowSelection,
setRowSelection,
}: TableProps<TData>) => {
const isServerSideTable =
totalItems !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
};
}
if (rowSelection && setRowSelection) {
tableOptions.onRowSelectionChange = setRowSelection;
tableOptions.state = {
...tableOptions.state,
rowSelection,
};
tableOptions.getRowId = (row) => (row as { id: string }).id;
}
const table = useReactTable(tableOptions);
const { setPageSize } = table;
src/components/input/CheckboxInput.tsx
+89
View File
@@ -0,0 +1,89 @@
'use client';
import { HTMLProps, useEffect, useRef } from 'react';
import { cn } from '@/lib/helper';
interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
name: string;
label?: string;
indeterminate?: boolean;
classNames?: {
wrapper?: string;
inputWrapper?: string;
checkbox?: string;
label?: string;
};
isError?: boolean;
isValid?: boolean;
errorMessage?: string;
}
const CheckboxInput = ({
indeterminate,
name,
label,
className,
classNames,
isValid,
isError,
errorMessage,
...rest
}: CheckboxInputProps) => {
const ref = useRef<HTMLInputElement>(null!);
useEffect(() => {
if (typeof indeterminate === 'boolean') {
ref.current.indeterminate = !rest.checked && indeterminate;
}
}, [ref, indeterminate]);
return (
<div
className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
>
<div
className={cn(
'flex flex-row justify-center items-center gap-2',
classNames?.inputWrapper
)}
>
<input
type='checkbox'
ref={ref}
id={name}
name={name}
className={cn(
'checkbox cursor-pointer',
{
'border-error': isError,
'border-success': isValid,
},
className,
classNames?.checkbox
)}
{...rest}
/>
{label && (
<label
htmlFor={name}
className={cn(
'text-inherit',
{
'text-error': isError,
'text-success': isValid,
},
classNames?.label
)}
>
{label}
</label>
)}
</div>
{errorMessage && <span className='text-error'>{errorMessage}</span>}
</div>
);
};
export default CheckboxInput;
src/components/input/DateInput.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ const DateInput = ({
<div
className={cn(
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center',
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
{
'border-error': isError,
'border-success!': isValid,
src/components/input/FileInput.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const FileInput = ({
onBlur={onBlur}
disabled={disabled}
className={cn(
'grow file-input w-full h-12 rounded-lg!',
'grow file-input w-full h-12 rounded',
className?.input
)}
readOnly={readOnly}
src/components/input/NumberInput.tsx
+53
View File
@@ -0,0 +1,53 @@
'use client';
import { ChangeEvent } from 'react';
import { NumericFormat, OnValueChange } from 'react-number-format';
import TextInput, { TextInputProps } from '@/components/input/TextInput';
interface NumberInputProps extends Omit<TextInputProps, 'type'> {
thousandSeparator?: string;
decimalSeparator?: string;
decimalScale?: number;
allowNegative?: boolean;
prefix?: string;
suffix?: string;
fixedDecimalScale?: boolean;
}
const NumberInput = ({
thousandSeparator = ',',
decimalSeparator = '.',
decimalScale = 5,
allowNegative = true,
onChange,
...restProps
}: NumberInputProps) => {
const valueChangeHandler: OnValueChange = (
numberFormatValues,
sourceInfo
) => {
const newChangeEvent = sourceInfo.event as
| ChangeEvent<HTMLInputElement>
| undefined;
if (newChangeEvent) {
newChangeEvent.target.value = numberFormatValues.value;
onChange?.(newChangeEvent);
}
};
return (
<NumericFormat
thousandSeparator={thousandSeparator}
decimalSeparator={decimalSeparator}
customInput={TextInput}
onValueChange={valueChangeHandler}
decimalScale={decimalScale}
allowNegative={allowNegative}
{...restProps}
/>
);
};
export default NumberInput;
src/components/input/SelectInput.tsx
+4 -4
View File
@@ -160,7 +160,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
classNames={{
control: ({ isFocused, isDisabled }) =>
cn(
'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
{
'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -176,7 +176,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
input: () => cn('text-gray-900'),
indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
dropdownIndicator: ({ isFocused }) =>
cn('p-1 rounded-md hover:bg-gray-100', {
cn('p-1 rounded hover:bg-gray-100', {
'text-gray-900': isFocused,
'text-gray-500': !isFocused,
'text-error!': isError,
@@ -185,7 +185,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
menuList: () => cn('p-2! max-h-60 overflow-auto'),
option: ({ isFocused, isSelected }) =>
cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
'bg-indigo-600 text-white': isFocused,
'bg-blue-500!': isSelected,
'text-gray-700': !isFocused && !isSelected,
@@ -193,7 +193,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
multiValue: ({ getValue, index }) => {
const selectedValues = getValue() as T[];
return cn(
'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
selectedValues[index]?.className
);
},
src/components/input/TextArea.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ const TextArea = ({
<textarea
className={cn(
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all',
{
'border-error': isError,
'border-success!': isValid,
src/components/input/TextInput.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ const TextInput = ({
<div
className={cn(
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200',
{
'border-error': isError,
'border-success!': isValid,
src/components/pages/production/chickin/ChickinTable.tsx
+11 -11
View File
@@ -11,8 +11,8 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
import { ROWS_OPTIONS } from '@/config/constant';
import { isResponseSuccess } from '@/lib/api-helper';
import { cn } from '@/lib/helper';
import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
import { cn, formatNumber } from '@/lib/helper';
import { ChickinApi } from '@/services/api/production';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { Chickin } from '@/types/api/production/chickin';
import { Icon } from '@iconify/react';
@@ -57,13 +57,6 @@ const ChickinTable = () => {
`${ChickinApi.basePath}${getTableFilterQueryString()}`,
ChickinApi.getAllFetcher
);
const {
data: projectFlocks,
isLoading: isLoadingProjectFlocks,
} = useSWR(
`${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
ProjectFlockApi.getAllFetcher
);
const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
updateFilter('search', event.target.value);
@@ -131,6 +124,13 @@ const ChickinTable = () => {
{
accessorFn: (row) => row.quantity,
header: 'Jumlah Chickin',
cell: (props) => {
if (props.row.original.quantity) {
return formatNumber(props.row.original.quantity);
} else {
return '-';
}
}
},
{
accessorFn: (row) => row.chick_in_date,
@@ -166,7 +166,7 @@ const ChickinTable = () => {
deleteModal.openModal();
};
const editClickHandler = () => {
const editClickHandler = () => {
setSelectedChickin(props.row.original);
chickinModal.openModal();
};
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
)}
>
<Button
href={`/production/chickin/detail?projectFlockId=${props.row.original.id}`}
href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
variant='ghost'
color='primary'
className='justify-start text-sm'
src/components/pages/production/chickin/form/ChickinForm.tsx
+29 -15
View File
@@ -11,7 +11,7 @@ import {
ChickinFormValues,
UpdateChickinFormSchema,
} from '@/components/pages/production/chickin/form/ChickinForm.schema';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { use, useCallback, useEffect, useMemo, useState } from 'react';
import { useFormik } from 'formik';
import { ChickinApi } from '@/services/api/production';
import DateInput from '@/components/input/DateInput';
@@ -20,6 +20,7 @@ import toast from 'react-hot-toast';
import { Icon } from '@iconify/react';
import TextArea from '@/components/input/TextArea';
import TextInput from '@/components/input/TextInput';
import NumberInput from '@/components/input/NumberInput';
interface ChickinFormProps {
formType?: 'add' | 'detail' | 'edit';
@@ -45,8 +46,11 @@ const ChickinForm = ({
const formikInitialValue = useMemo<ChickinFormValues>(() => {
return {
chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
quantity: initialValues?.quantity ?? 1,
note: initialValues?.note ?? '',
quantity:
initialValues?.quantity ??
initialValues?.project_flock_kandang?.available_quantity ??
0,
};
}, [initialValues]);
@@ -71,10 +75,7 @@ const ChickinForm = ({
payload: UpdateChickinPayload,
afterSubmit: (() => void) | undefined
) => {
const res = await ChickinApi.update(
payload.project_flock_kandang_id as number,
payload
);
const res = await ChickinApi.update(payload.id, payload);
if (isResponseError(res)) {
setChickinFormErrorMessage(res.message);
return;
@@ -95,7 +96,10 @@ const ChickinForm = ({
// reset error message
setChickinFormErrorMessage('');
if (initialValues?.project_flock_kandang?.id == undefined) {
if (
initialValues?.project_flock_kandang?.id == undefined ||
(formType == 'edit' && initialValues?.id == undefined)
) {
return;
}
@@ -103,9 +107,13 @@ const ChickinForm = ({
const payload = {
chick_in_date: values.chick_in_date,
project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
note: values.note,
quantity: values.quantity,
id: initialValues.id ?? 0,
};
// cek type form yang disubmit
console.log(formType);
switch (formType) {
case 'add':
handleCreate(payload, afterSubmit);
@@ -144,28 +152,34 @@ const ChickinForm = ({
}
errorMessage={formik.errors.chick_in_date}
/>
<TextInput
<NumberInput
value={formik.values.quantity}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
name='quantity'
label='Jumlah Chickin'
label='Jumlah (Ekor)'
required
isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
errorMessage={formik.errors.quantity}
type='number'
disabled
isError={
(formik.touched.quantity && Boolean(formik.errors.quantity)) ||
formik.values.quantity == 0
}
errorMessage={
formik.values.quantity == 0
? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
: formik.errors.quantity
}
readOnly
/>
<TextArea
required
label='Catatan'
name='note'
placeholder='Masukan catatan chickin'
value={formik.values.note}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={formik.touched.note && Boolean(formik.errors.note)}
errorMessage={formik.errors.note}
/>
{initialValues?.project_flock_kandang?.id == undefined && (
<p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
src/components/pages/production/project-flock/ProjectFlockTable.tsx
+233 -220
View File
@@ -1,6 +1,7 @@
'use client';
import Button from '@/components/Button';
import CheckboxInput from '@/components/input/CheckboxInput';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
@@ -16,13 +17,12 @@ 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';
ProjectFlockApprovalPayload,
ProjectFlock,
} from '@/types/api/production/project-flock';
import { Icon } from '@iconify/react';
import { CellContext, SortingState } from '@tanstack/react-table';
import { ChangeEventHandler, useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';
@@ -56,24 +56,28 @@ const RowOptionsMenu = ({
<Icon icon='mdi:eye-outline' width={16} height={16} />
Detail
</Button>
<Button
href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='success'
className='justify-start text-sm'
>
<Icon icon='mdi:home-import-outline' width={16} height={16} />
Chickin
</Button>
{/* <Button
href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='warning'
className='justify-start text-sm'
>
<Icon icon='mdi:pencil-outline' width={16} height={16} />
Edit
</Button> */}
{props.row.original.approval.step_name === 'Aktif' && (
<Button
href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='success'
className='justify-start text-sm'
>
<Icon icon='mdi:home-import-outline' width={16} height={16} />
Chickin
</Button>
)}
{props.row.original.approval.step_name === 'Pengajuan' && (
<Button
href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
variant='ghost'
color='warning'
className='justify-start text-sm'
>
<Icon icon='mdi:pencil-outline' width={16} height={16} />
Edit
</Button>
)}
<Button
onClick={deleteClickHandler}
variant='ghost'
@@ -117,10 +121,15 @@ const ProjectFlockTable = () => {
periodFilter: 'period',
},
});
// State
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const selectedRowIds = Object.keys(rowSelection)
.filter((id) => rowSelection[id])
.map((id) => parseInt(id));
const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
null
@@ -129,6 +138,13 @@ const ProjectFlockTable = () => {
null
);
const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
const [sorting, setSorting] = useState<SortingState>([]);
const [selectedProjectFlock, setSelectedProjectFlock] =
useState<ProjectFlock>();
const deleteModal = useModal();
const confirmModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
// Fetch Data
const {
@@ -144,20 +160,20 @@ const ProjectFlockTable = () => {
search: areaSelectInputValue,
limit: '100',
}).toString()}`;
const {
data: areas,
isLoading: isLoadingAreas,
} = useSWR(areaUrl, AreaApi.getAllFetcher);
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 { data: locations, isLoading: isLoadingLocations } = useSWR(
locationUrl,
LocationApi.getAllFetcher
);
const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
search: kandangSelectInputValue,
@@ -165,10 +181,10 @@ const ProjectFlockTable = () => {
selectedLocation != null ? selectedLocation.value.toString() : '',
limit: '100',
}).toString()}`;
const {
data: kandangs,
isLoading: isLoadingKandang,
} = useSWR(kandangUrl, KandangApi.getAllFetcher);
const { data: kandangs, isLoading: isLoadingKandang } = useSWR(
kandangUrl,
KandangApi.getAllFetcher
);
// Data to Options Mapping
const optionsArea = isResponseSuccess(areas)
@@ -190,139 +206,6 @@ const ProjectFlockTable = () => {
}))
: [];
// State
const [sorting, setSorting] = useState<SortingState>([]);
const [selectedProjectFlock, setSelectedProjectFlock] =
useState<ProjectFlock>();
const deleteModal = useModal();
const confirmModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [selectedIds, setSelectedIds] = useState<number[]>([]);
const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
const [isApproveLoading, setIsApproveLoading] = useState(false);
// Columns
const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
{
id: 'select',
header: () => {
const allSelected =
isResponseSuccess(projectFlocks) &&
projectFlocks.data.length > 0 &&
selectedIds.length === projectFlocks.data.length;
return (
<input
type='checkbox'
className='checkbox checkbox-sm'
checked={allSelected}
onChange={(e) => handleSelectAll(e.target.checked)}
/>
);
},
cell: (props) => {
const id = props.row.original.id;
const isChecked = selectedIds.includes(id);
return (
<input
type='checkbox'
className='checkbox checkbox-sm'
checked={isChecked}
onChange={(e) => 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 (
<div>
{kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
</div>
);
} 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 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowCollapseOptions>
)}
</>
);
},
},
];
// Handler
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
@@ -341,45 +224,17 @@ const ProjectFlockTable = () => {
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (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<ProjectFlock>,
'POST'
>(`/approve`, {
ProjectFlockApprovalPayload
>(`/approvals`, {
method: 'POST',
payload: 'POST',
params: {
ids: selectedFlocks.map((flock) => flock.id).join(','),
payload: {
action: 'APPROVED',
approvable_ids: selectedRowIds.map((id) => id),
},
});
@@ -391,6 +246,8 @@ const ProjectFlockTable = () => {
toast.error(approveProjectFlockRes?.message as string);
confirmModal.closeModal();
}
setRowSelection({});
refreshProjectFlocks();
setIsApproveLoading(false);
};
@@ -412,11 +269,9 @@ const ProjectFlockTable = () => {
variant='outline'
color='success'
onClick={() => {
if (selectedIds.length > 0) {
confirmModal.openModal();
}
confirmModal.openModal();
}}
disabled={!(selectedIds.length > 0)}
disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
@@ -508,7 +363,162 @@ const ProjectFlockTable = () => {
<Table<ProjectFlock>
data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
columns={projectFlocksColumns}
columns={[
{
id: 'select',
header: ({ table }) => {
const allRows = table.getRowModel().rows;
const selectableRows = allRows.filter(
(row) => row.original?.approval?.step_number == 1
);
const allSelected = selectableRows.every((row) =>
row.getIsSelected()
) && selectableRows.length != 0;
const someSelected =
selectableRows.some((row) => row.getIsSelected()) &&
!allSelected;
const toggleSelectableRows = () => {
const shouldSelect = !allSelected;
selectableRows.forEach((row) =>
row.toggleSelected(shouldSelect)
);
};
return (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={allSelected}
indeterminate={someSelected}
onChange={toggleSelectableRows}
disabled={
isResponseSuccess(projectFlocks) &&
projectFlocks?.data?.filter(
(flock) => flock.approval.step_number == 1
).length == 0
}
/>
</div>
);
},
cell: ({ row }) => {
return (
<CheckboxInput
name='row'
checked={
row.getIsSelected() &&
row.original.approval.step_number == 1
}
disabled={
!row.getCanSelect() ||
row.original.approval.step_number != 1
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
},
},
{
accessorKey: 'flock.name',
header: 'Flock',
},
{
accessorKey: 'area.name',
header: 'Area',
},
{
accessorKey: 'location.name',
header: 'Lokasi',
},
{
accessorKey: 'fcr.name',
header: 'FCR',
},
{
accessorKey: 'category',
header: 'Kategori',
},
{
accessorKey: 'approval.step_name',
header: 'Status',
},
{
header: 'Kandang',
cell: (props) => {
const kandang = props.row.original.kandangs;
if (kandang) {
const kandangNames = kandang.map((k: Kandang) => k.name);
return (
<div>
{kandangNames.length > 0
? kandangNames.join(', ')
: 'Tidak ada'}
</div>
);
} 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 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowCollapseOptions>
)}
</>
);
},
},
]}
pageSize={tableFilterState.pageSize}
page={
isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
@@ -522,6 +532,8 @@ const ProjectFlockTable = () => {
isLoading={isLoading}
sorting={sorting}
setSorting={setSorting}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
className={{
containerClassName: cn({
'mb-20':
@@ -559,18 +571,19 @@ const ProjectFlockTable = () => {
<ConfirmationModal
ref={confirmModal.ref}
type='success'
text={
selectedFlocks.length > 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.'
}
text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
// text={
// selectedFlocks.length > 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',
}}
src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+127 -147
View File
@@ -14,13 +14,14 @@ 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 useSWR, { KeyedMutator } from 'swr';
import {
ProjectFlockFormSchema,
ProjectFlockFormValues,
UpdateProjectFlockFormSchema,
} from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
import {
ProjectFlockApprovalPayload,
CreateProjectFlockPayload,
PeriodFlock,
ProjectFlock,
@@ -34,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general';
import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ProjectFlockKandangTable from './ProjectFlockKandangTable';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
initialValues?: ProjectFlock;
refreshProjectFlocks?: KeyedMutator<
BaseApiResponse<ProjectFlock> | undefined
>;
}
const ProjectFlockForm = ({
formType = 'add',
initialValues,
refreshProjectFlocks,
}: ProjectFlockFormProps) => {
// State
const router = useRouter();
@@ -70,6 +76,34 @@ const ProjectFlockForm = ({
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
initialValues?.approval.step_name == 'Pengajuan' ? false : true
);
const [isRejectedDisabled, setIsRejectedDisabled] = useState(
!isApprovedDisabled
);
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
!isApprovedDisabled ? 'APPROVED' : 'REJECTED'
);
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
() =>
Object.fromEntries(
(initialValues?.kandangs ?? []).map((k: Kandang) => [
k.id.toString(),
true,
])
)
);
useEffect(() => {
if (initialValues?.approval?.step_name) {
const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
setIsApprovedDisabled(approvedDisabled);
setIsRejectedDisabled(!approvedDisabled);
setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
}
}, [initialValues]);
// Fetch Data
const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -109,7 +143,7 @@ const ProjectFlockForm = ({
search: '',
location_id: selectedLocation == '' ? '0' : selectedLocation,
}).toString()}`;
const { data: kandang, isLoading: isLoadingKandang } = useSWR(
const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
kandangUrl,
KandangApi.getAllFetcher
);
@@ -167,6 +201,20 @@ const ProjectFlockForm = ({
}
}
}, [kandang]);
useEffect(() => {
if (initialValues?.kandangs) {
refreshKandang();
setOpenSelectKandangs(true);
const newRowSelection = Object.fromEntries(
initialValues.kandangs.map((k: Kandang) => [
k.id.toString(),
true,
])
);
setRowSelection(newRowSelection);
}
}, [initialValues, refreshKandang]);
// Options Handler
const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -211,38 +259,6 @@ const ProjectFlockForm = ({
formik.setFieldTouched('category', true);
};
const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
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<HTMLInputElement>) => {
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
@@ -375,7 +391,7 @@ const ProjectFlockForm = ({
formik.setFieldValue('period', initialValues?.period);
}
}, [initialValues, setSelectedArea, formType]);
useEffect(() => {
formikSetValues(formikInitialValues);
}, [formikSetValues, formikInitialValues]);
@@ -400,11 +416,21 @@ const ProjectFlockForm = ({
}, [formik.values]);
useEffect(() => {
if(isResponseSuccess(periodFlocks)){
if (isResponseSuccess(periodFlocks)) {
formik.setFieldValue('period', periodFlocks.data.next_period);
}
}, [periodFlocks]);
useEffect(() => {
const selectedRowIds = Object.keys(rowSelection)
.filter((id) => rowSelection[id])
.map((id) => parseInt(id));
formikSetValues({
...formik.values,
kandang_ids: selectedRowIds,
});
}, [rowSelection, formikSetValues]);
// Actions handler
const confirmationModalDeleteClickHandler = async () => {
setIsDeleteLoading(true);
@@ -422,23 +448,42 @@ const ProjectFlockForm = ({
setIsDeleteLoading(false);
};
const confirmationModalApproveClickHandler = async () => {
const confirmationModalClickHandler = async ({
action = 'APPROVED',
}: {
action: 'APPROVED' | 'REJECTED';
}) => {
if (initialValues?.id === undefined) return;
setIsApproveLoading(true);
const approveProjectFlockRes = await ProjectFlockApi.customRequest<
BaseApiResponse<ProjectFlock>,
'POST'
>(`/${initialValues?.id}/approve`, {
ProjectFlockApprovalPayload
>(`/approvals`, {
method: 'POST',
payload: {
action: action,
approvable_ids: [initialValues.id],
},
});
if (isResponseSuccess(approveProjectFlockRes)) {
toast.success('Project Flock berhasil di-approve!');
confirmModal.closeModal();
if (refreshProjectFlocks) {
await refreshProjectFlocks();
}
// if (action == 'APPROVED') {
// setIsApprovedDisabled(true);
// setIsRejectedDisabled(false);
// }
// if (action == 'REJECTED') {
// setIsRejectedDisabled(true);
// setIsApprovedDisabled(false);
// }
toast.success(approveProjectFlockRes.message as string);
}
if (isResponseError(approveProjectFlockRes)) {
toast.error(approveProjectFlockRes?.message as string);
confirmModal.closeModal();
}
confirmModal.closeModal();
setIsApproveLoading(false);
};
@@ -481,21 +526,37 @@ const ProjectFlockForm = ({
</div>
)}
{formType == 'detail' && (
<div className='w-full py-4'>
<div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
<Button
variant='outline'
color='success'
onClick={() => {
if (initialValues?.id) {
setApprovalAction('APPROVED');
confirmModal.openModal();
}
}}
disabled={!initialValues?.id}
disabled={!initialValues?.id || isApprovedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='material-symbols:check' width={24} height={24} />
Approve
</Button>
<Button
variant='outline'
color='error'
onClick={() => {
if (initialValues?.id) {
setApprovalAction('REJECTED');
confirmModal.openModal();
}
}}
disabled={!initialValues?.id || isRejectedDisabled}
className='w-full sm:w-fit'
>
<Icon icon='mdi:times' width={24} height={24} />
Reject
</Button>
</div>
)}
<form
@@ -505,9 +566,7 @@ const ProjectFlockForm = ({
>
<div className='card bg-base-100 shadow w-full mb-6'>
<div className='card-body'>
<div className='card-title mb-4'>
Informasi Umum
</div>
<div className='card-title mb-4'>Informasi Umum</div>
<div className='grid sm:grid-cols-2 gap-4'>
<SelectInput
@@ -614,7 +673,7 @@ const ProjectFlockForm = ({
variant='link'
className={`text-primary rotate-${
openSelectKandangs ? '180' : '0'
} transition-transform hover:text-inherit`}
} transition-transform hover:text-inherit me-3`}
>
<Icon
icon='material-symbols:keyboard-arrow-down'
@@ -631,102 +690,15 @@ const ProjectFlockForm = ({
>
<div className='overflow-x-auto'>
{isLoadingKandang && (
<span className="loading loading-dots loading-xl"></span>
<span className='loading loading-dots loading-xl'></span>
)}
<table className='table'>
{/* head */}
<thead>
<tr>
<th>
<label>
<input
type='checkbox'
checked={
optionsKandang
.filter(
(k) =>
k.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(k.id)
)
.every((k) =>
formik.values.kandang_ids.includes(k.id)
) &&
optionsKandang.filter(
(k) =>
k.status === 'NON_ACTIVE' ||
formik.values.kandang_ids.includes(k.id)
).length > 0
}
className='checkbox transition-none'
disabled={
formType === 'detail' ||
optionsKandang.filter(
(k) => k.status === 'NON_ACTIVE'
).length == 0
}
onChange={
formType === 'detail'
? () => {}
: kandangCheckAll
}
/>
</label>
</th>
<th>Kandang</th>
<th>Status</th>
<th>Penanggung Jawab</th>
</tr>
</thead>
<tbody>
{/* rows */}
{selectedLocation != '' &&
optionsKandang.map((kandang) => (
<tr key={kandang.id}>
<th>
<label>
<input
value={kandang.id}
type='checkbox'
className='checkbox transition-none'
checked={formik.values.kandang_ids.includes(
kandang.id
)}
onChange={
formType === 'detail'
? () => {}
: kandangChangeHandler
}
disabled={
formType === 'detail' ||
kandang.status != 'NON_ACTIVE'
}
/>
</label>
</th>
<td>{kandang.name}</td>
<td>{kandang.status}</td>
<td>{kandang.pic?.name}</td>
</tr>
))}
{selectedLocation == '' && (
<tr>
<td colSpan={3} className='text-center text-muted'>
Data tidak tersedia
</td>
</tr>
)}
</tbody>
{/* foot */}
{selectedLocation != '' && (
<tfoot>
<tr>
<th></th>
<th>Kandang</th>
<th>Penanggung Jawab</th>
</tr>
</tfoot>
)}
</table>
<ProjectFlockKandangTable
listKandang={optionsKandang}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
selectedIds={formik.values.kandang_ids}
formType={formType}
/>
</div>
</Collapse>
</div>
@@ -795,16 +767,24 @@ const ProjectFlockForm = ({
<ConfirmationModal
ref={confirmModal.ref}
type='success'
text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
type={approvalAction == 'APPROVED' ? 'success' : 'error'}
text={`Apakah anda yakin ingin ${
approvalAction == 'APPROVED' ? 'approve' : 'reject'
} Project Flock berikut? (${initialValues?.flock?.name} - ${
initialValues?.area?.name
})?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'success',
color: approvalAction == 'APPROVED' ? 'success' : 'error',
isLoading: isApproveLoading,
onClick: confirmationModalApproveClickHandler,
onClick: () => {
confirmationModalClickHandler({
action: approvalAction,
});
},
}}
/>
</>
src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx
+146
View File
@@ -0,0 +1,146 @@
'use client';
import CheckboxInput from '@/components/input/CheckboxInput';
import PillBadge from '@/components/PillBadge';
import Table from '@/components/Table';
import { cn } from '@/lib/helper';
import { Kandang } from '@/types/api/master-data/kandang';
import { OnChangeFn } from '@tanstack/react-table';
const ProjectFlockKandangTable = ({
listKandang,
rowSelection,
setRowSelection,
selectedIds,
formType = 'add',
}: {
listKandang: Kandang[];
rowSelection: Record<string, boolean>;
setRowSelection: OnChangeFn<Record<string, boolean>>;
selectedIds: (number | undefined)[];
formType: 'add' | 'edit' | 'detail';
}) => {
console.log('selectedIds');
console.log(selectedIds);
return (
<Table<Kandang>
data={listKandang}
columns={[
{
id: 'select',
header: ({ table }) => {
const allRows = table.getRowModel().rows;
const selectableRows = allRows.filter(
(row) =>
row.original.status == 'NON_ACTIVE' ||
row.original.status == 'PENGAJUAN'
);
const allSelected =
selectableRows.every((row) => row.getIsSelected()) &&
selectableRows.length != 0 && formType != 'detail';
const someSelected =
selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
const toggleSelectableRows = () => {
const shouldSelect = !allSelected;
selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
};
return (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={allSelected}
indeterminate={someSelected}
onChange={toggleSelectableRows}
disabled={
listKandang.filter(
(kandang) =>
kandang.status == 'NON_ACTIVE' ||
kandang.status == 'PENGAJUAN'
).length == 0 || formType == 'detail'
}
/>
</div>
);
},
cell: ({ row }) => {
return (
<CheckboxInput
name='row'
checked={
(row.getIsSelected() &&
(row.original.status == 'NON_ACTIVE' ||
row.original.status == 'PENGAJUAN')) ||
selectedIds.includes(row.original.id)
}
disabled={
!row.getCanSelect() ||
(row.original.status != 'NON_ACTIVE' &&
row.original.status != 'PENGAJUAN') ||
formType == 'detail'
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
},
},
{
accessorFn: (row) => row.name,
header: 'Kandang',
},
{
accessorFn: (row) => row.status,
header: 'Status',
cell: (props) => {
return (
<PillBadge
color={(() => {
switch (props.row.original.status) {
case 'ACTIVE':
return 'red';
case 'PENGAJUAN':
return 'green';
case 'NON_ACTIVE':
return 'blue';
default:
return 'gray';
}
})()}
content={props.row.original.status
.toLowerCase()
.replace(/_/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase())}
/>
);
},
},
{
accessorFn: (row) => row.pic?.name,
header: 'Penanggung Jawab',
},
]}
className={{
containerClassName: cn({
'mb-20': listKandang?.length === 0,
}),
tableWrapperClassName: 'overflow-x-auto min-h-full!',
tableClassName: 'font-inter w-full table-auto min-h-full!',
headerRowClassName: 'border-b border-b-gray-200',
headerColumnClassName:
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
bodyRowClassName: 'border-b border-b-gray-200',
bodyColumnClassName:
'px-6 py-3 last:flex last:flex-row last:justify-end',
paginationClassName: 'hidden',
}}
rowSelection={rowSelection}
setRowSelection={setRowSelection}
/>
);
};
export default ProjectFlockKandangTable;
src/lib/helper.ts
+13
View File
@@ -13,6 +13,19 @@ export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs));
};
export const formatNumber = (
value: number | bigint | Intl.StringNumericLiteral,
locale = 'en-US',
minimumFractionDigits = 0,
maximumFractionDigits = 2
) => {
return new Intl.NumberFormat(locale, {
minimumFractionDigits,
maximumFractionDigits,
}).format(value);
};
export const formatCurrency = (
value: number | bigint | Intl.StringNumericLiteral,
currency = 'USD',
src/types/api/api-general.d.ts
Vendored
+9
View File
@@ -104,3 +104,12 @@ export type ApprovalsLine = {
role?: string;
status: 'approved' | 'rejected' | 'waiting';
}[];
export type BaseApproval = {
step_number: number;
step_name: string;
action: string;
notes: string | null;
action_by: CreatedUser;
action_at: string;
};
src/types/api/production/chickin.d.ts
Vendored
+11 -2
View File
@@ -1,4 +1,4 @@
import { BaseMetadata } from "@/types/api/api-general";
import { BaseApproval, BaseMetadata } from "@/types/api/api-general";
import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
export type BaseChickin = {
@@ -7,6 +7,7 @@ export type BaseChickin = {
quantity?: number;
note?: string;
project_flock_kandang?: ProjectFlockKandang;
approval: BaseApproval;
}
export type Chickin = BaseMetadata & BaseChickin;
@@ -14,7 +15,15 @@ export type Chickin = BaseMetadata & BaseChickin;
export type CreateChickinPayload = {
project_flock_kandang_id: number;
chick_in_date: string;
note: string;
quantity?: number;
}
export type UpdateChickinPayload = CreateChickinPayload;
export type UpdateChickinPayload = CreateChickinPayload & {
id: number;
};
export type ChickinApprovalPayload = {
action: 'APPROVED' | 'REJECTED';
approvable_ids: number[];
};
src/types/api/production/project-flock-kandang.d.ts
Vendored
+7 -1
View File
@@ -7,6 +7,12 @@ export type BaseProjectFlockKandang = {
kandang_id: number;
kandang: Kandang;
project_flock: ProjectFlock;
available_quantity?: number;
}
export type ProjectFlockKandang = BaseProjectFlockKandang;
export type ProjectFlockKandang = BaseProjectFlockKandang;
export type LookupProjectFlockKandangPayload = {
project_flock_id: number;
kandang_id: number;
}
src/types/api/production/project-flock.d.ts
Vendored
+17 -12
View File
@@ -1,9 +1,9 @@
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";
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 { BaseApproval, BaseMetadata } from '@/types/api/api-general';
export type BaseProjectFlock = {
id: number;
@@ -21,15 +21,15 @@ export type BaseProjectFlock = {
period: number;
kandang_ids: number[];
kandangs: Kandang[];
}
approval: BaseApproval;
};
export type PeriodFlock = {
flock: Flock;
next_period: number;
}
};
export type ProjectFlock = BaseMetadata & BaseProjectFlock
export type ProjectFlock = BaseMetadata & BaseProjectFlock;
export type CreateProjectFlockPayload = {
flock_id: number;
@@ -39,6 +39,11 @@ export type CreateProjectFlockPayload = {
location_id: number;
period: number;
kandang_ids: number[];
}
};
export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
export type ProjectFlockApprovalPayload = {
action: 'APPROVED' | 'REJECTED';
approvable_ids: number[];
};