mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
feat(FE-279): Add functionality closing project flock
This commit is contained in:
randy-ar
+291
-10
@@ -10,7 +10,7 @@ import SelectInput, {
|
||||
import PillBadge from '@/components/PillBadge';
|
||||
import Table from '@/components/Table';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { cn, formatDate, formatTitleCase } from '@/lib/helper';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { ProjectFlockKandangApi } from '@/services/api/production';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
@@ -21,6 +21,7 @@ import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import Link from 'next/link';
|
||||
|
||||
const ProjectFlockChickinDetail = ({
|
||||
projectFlockId,
|
||||
@@ -101,11 +102,26 @@ const ProjectFlockChickinDetail = ({
|
||||
}, [projectFlockId, listProjectFlock]);
|
||||
return (
|
||||
<>
|
||||
<FormHeader
|
||||
{/* Header */}
|
||||
<div className='flex flex-row justify-between items-center px-4 py-4'>
|
||||
<div className='flex flex-row items-center h-full gap-2'>
|
||||
<Link
|
||||
href={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
|
||||
className='hover:text-gray-400'
|
||||
>
|
||||
<Icon icon='mdi:arrow-left' width={24} height={24} />
|
||||
</Link>
|
||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||
<div className='text-sm text-neutral'>
|
||||
Chick In {projectFlock?.flock_name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <FormHeader
|
||||
title={`Chick In ${projectFlock?.flock_name ?? 'Project Flock'}`}
|
||||
backUrl='/production/project-flock'
|
||||
/>
|
||||
<div className='flex flex-col gap-4 w-full my-4'>
|
||||
backUrl={`/production/project-flock/detail?projectFlockId=${projectFlock?.id}`}
|
||||
/> */}
|
||||
{/* <div className='flex flex-col gap-4 w-full my-4'>
|
||||
<div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
|
||||
<SelectInput
|
||||
required
|
||||
@@ -145,8 +161,129 @@ const ProjectFlockChickinDetail = ({
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Card
|
||||
</div> */}
|
||||
{/* Informasi Umum */}
|
||||
{projectFlock && (
|
||||
<div className='border-t-1 border-gray-300'>
|
||||
<div className='p-4 flex flex-col gap-4'>
|
||||
<h2 className='text-2xl font-semibold'>Informasi Umum</h2>
|
||||
{/* Badge Row */}
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Badge
|
||||
variant='soft'
|
||||
color={
|
||||
projectFlock.approval.step_number == 1
|
||||
? 'neutral'
|
||||
: projectFlock.approval.step_number == 2
|
||||
? 'success'
|
||||
: projectFlock.approval.step_number >= 3
|
||||
? 'error'
|
||||
: undefined
|
||||
}
|
||||
className={{
|
||||
badge: 'rounded-lg px-2',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:circle'
|
||||
width={12}
|
||||
height={12}
|
||||
color={
|
||||
projectFlock.approval.step_number == 1
|
||||
? 'neutral'
|
||||
: projectFlock.approval.step_number == 2
|
||||
? 'success'
|
||||
: projectFlock.approval.step_number >= 3
|
||||
? 'error'
|
||||
: undefined
|
||||
}
|
||||
/>{' '}
|
||||
{projectFlock.approval.step_name}
|
||||
</Badge>
|
||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||
<Badge
|
||||
color='neutral'
|
||||
variant='soft'
|
||||
className={{ badge: 'rounded-lg px-2' }}
|
||||
>
|
||||
<Icon icon='mdi:bookmark' width={12} height={12} />
|
||||
{` ${formatTitleCase(projectFlock.category)}`}
|
||||
</Badge>
|
||||
</div>
|
||||
{/* Information Grid */}
|
||||
<div className='grid grid-cols-3 gap-4'>
|
||||
<div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
|
||||
<Icon width={14} height={14} icon='mdi:account' /> Submitted
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
<Badge
|
||||
variant='soft'
|
||||
color='neutral'
|
||||
className={{
|
||||
badge: 'rounded-lg px-2',
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:account-circle' width={14} height={14} />{' '}
|
||||
{projectFlock.created_user.name}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
|
||||
<Icon width={14} height={14} icon={'mdi:clock'} /> History
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
<Button variant='outline' className='py-1 text-sm'>
|
||||
See History{' '}
|
||||
<Icon
|
||||
icon='mdi:arrow-top-right-thin'
|
||||
width={11}
|
||||
height={11}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* BARIS 1 */}
|
||||
<div
|
||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
||||
relative
|
||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
||||
>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
|
||||
</div>
|
||||
<div className='col-span-2'>{projectFlock.area.name}</div>
|
||||
|
||||
{/* BARIS 2 */}
|
||||
<div
|
||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
||||
relative
|
||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
||||
>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
|
||||
</div>
|
||||
<div className='col-span-2'>{projectFlock.location.name}</div>
|
||||
|
||||
<div
|
||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
||||
relative
|
||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
||||
>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> FCR
|
||||
</div>
|
||||
<div className='col-span-2'>{projectFlock.fcr.name}</div>
|
||||
|
||||
{/* BARIS 3 (Terakhir - TIDAK PERLU garis di bawahnya) */}
|
||||
<div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' />{' '}
|
||||
Kategori
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
{formatTitleCase(projectFlock.category)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* <Card
|
||||
title='Informasi Flock'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white mb-3',
|
||||
@@ -231,8 +368,152 @@ const ProjectFlockChickinDetail = ({
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
</Card> */}
|
||||
{/* Card Kandangs */}
|
||||
<div className='border-t-1 border-gray-300'>
|
||||
<div className='p-4 flex flex-col gap-4'>
|
||||
<h2 className='text-2xl font-semibold'>Daftar Kandang</h2>
|
||||
{isResponseSuccess(listProjectFlock) ? (
|
||||
<>
|
||||
{/* Badge Row */}
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Badge
|
||||
variant='soft'
|
||||
color={'success'}
|
||||
className={{
|
||||
badge: 'rounded-lg px-2',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:circle'
|
||||
width={12}
|
||||
height={12}
|
||||
color={'success'}
|
||||
/>{' '}
|
||||
Disetujui (
|
||||
{isResponseSuccess(listProjectFlockKandang) &&
|
||||
listProjectFlockKandang.data.filter(
|
||||
(k) => k.approval?.step_number == 1
|
||||
).length}
|
||||
)
|
||||
</Badge>
|
||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||
<Badge
|
||||
variant='soft'
|
||||
color={'neutral'}
|
||||
className={{
|
||||
badge: 'rounded-lg px-2',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:circle'
|
||||
width={12}
|
||||
height={12}
|
||||
color={'neutral'}
|
||||
/>{' '}
|
||||
Pengajuan (
|
||||
{isResponseSuccess(listProjectFlockKandang) &&
|
||||
listProjectFlockKandang.data.filter(
|
||||
(k) => k.approval?.step_number == 2
|
||||
).length}
|
||||
)
|
||||
</Badge>
|
||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||
<Badge
|
||||
color='error'
|
||||
variant='soft'
|
||||
className={{ badge: 'rounded-lg px-2' }}
|
||||
>
|
||||
<Icon
|
||||
icon={`mdi:circle`}
|
||||
width={12}
|
||||
height={12}
|
||||
color='error'
|
||||
/>
|
||||
Belum Chickin (
|
||||
{isResponseSuccess(listProjectFlockKandang) &&
|
||||
listProjectFlockKandang.data.filter(
|
||||
(k) => k.approval == null
|
||||
).length}
|
||||
)
|
||||
</Badge>
|
||||
</div>
|
||||
{/* Card Kandang */}
|
||||
<Card
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
body: 'p-3',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-6'>
|
||||
{isResponseSuccess(listProjectFlockKandang) &&
|
||||
listProjectFlockKandang.data.map((kandang) => (
|
||||
<div
|
||||
key={kandang.id}
|
||||
className='flex flex-row justify-between items-center'
|
||||
>
|
||||
<div className='flex flex-row gap-2 items-center cursor-pointer text-gray-400'>
|
||||
<Badge
|
||||
variant='soft'
|
||||
color={
|
||||
kandang.approval
|
||||
? kandang.approval.step_number == 1
|
||||
? 'success'
|
||||
: 'neutral'
|
||||
: 'error'
|
||||
}
|
||||
className={{
|
||||
badge: 'rounded-lg px-2',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:circle'
|
||||
width={12}
|
||||
height={12}
|
||||
color={
|
||||
kandang.approval
|
||||
? kandang.approval.step_number == 1
|
||||
? 'success'
|
||||
: 'neutral'
|
||||
: 'gray'
|
||||
}
|
||||
/>
|
||||
</Badge>
|
||||
<span className='font-semibold'>
|
||||
{kandang.kandang.name}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant='outline'
|
||||
className='py-1 text-sm'
|
||||
onClick={() => {
|
||||
handleChickinClick(kandang);
|
||||
}}
|
||||
disabled={projectFlock?.approval?.step_number === 1}
|
||||
>
|
||||
Chick In{' '}
|
||||
<Icon
|
||||
icon='mdi:arrow-top-right-thin'
|
||||
width={11}
|
||||
height={11}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Pilih project flock terlebih dahulu...
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* <Card
|
||||
title='Daftar Kandang'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
@@ -351,7 +632,7 @@ const ProjectFlockChickinDetail = ({
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Card> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user