feat(FE-314-315): API Integration project budgets and refactoring UI

This commit is contained in:
randy-ar
2025-12-03 21:09:12 +07:00
parent 31f758d680
commit f0ec758d7f
10 changed files with 544 additions and 572 deletions
@@ -1,6 +1,7 @@
import Badge from '@/components/Badge';
import Button from '@/components/Button';
import Card from '@/components/Card';
import Tooltip from '@/components/Tooltip';
import {
formatCurrency,
formatDate,
@@ -10,6 +11,7 @@ import {
import { ProjectFlock } from '@/types/api/production/project-flock';
import { Icon } from '@iconify/react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
const ProjectFlockDetail = ({
@@ -17,6 +19,7 @@ const ProjectFlockDetail = ({
}: {
projectFlock: ProjectFlock;
}) => {
const router = useRouter();
const [openBudgets, setOpenBudget] = useState(false);
return (
@@ -32,18 +35,37 @@ const ProjectFlockDetail = ({
<Icon icon='mdi:close' width={24} height={24} />
</Link>
<div className='divider divider-horizontal p-0 m-0'></div>
<div className='text-sm text-secondary'>
<div className='text-sm text-neutral'>
Created On {formatDate(projectFlock.created_at, 'MMM DD, YYYY')}
</div>
</div>
<div className='flex flex-row gap-3 justify-end'>
{projectFlock?.approval?.step_number == 2 && (
<Link
href={`/production/project-flock/chickin/add?projectFlockId=${projectFlock?.id}`}
className='text-success'
>
<Tooltip content='Chick In' position='bottom'>
<Icon
icon='mdi:checkbox-marked-outline'
width={20}
height={20}
data-tip={'Chick In'}
/>
</Tooltip>
</Link>
)}
<Link
href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
>
<Icon icon='mdi:square-edit-outline' width={20} height={20} />
<Tooltip content='Edit' position='bottom'>
<Icon icon='mdi:square-edit-outline' width={20} height={20} />
</Tooltip>
</Link>
<Button variant='link' className='p-0 text-error'>
<Icon icon='mdi:trash-can-outline' width={20} height={20} />
<Tooltip content='Hapus' position='bottom'>
<Icon icon='mdi:trash-can-outline' width={20} height={20} />
</Tooltip>
</Button>
</div>
</div>
@@ -58,7 +80,7 @@ const ProjectFlockDetail = ({
variant='soft'
color={
projectFlock.approval.step_number == 1
? 'secondary'
? 'neutral'
: projectFlock.approval.step_number == 2
? 'success'
: projectFlock.approval.step_number >= 3
@@ -75,7 +97,7 @@ const ProjectFlockDetail = ({
height={12}
color={
projectFlock.approval.step_number == 1
? 'secondary'
? 'neutral'
: projectFlock.approval.step_number == 2
? 'success'
: projectFlock.approval.step_number >= 3
@@ -87,7 +109,7 @@ const ProjectFlockDetail = ({
</Badge>
<div className='divider divider-horizontal p-0 m-0'></div>
<Badge
color='secondary'
color='neutral'
variant='soft'
className={{ badge: 'rounded-lg px-2' }}
>
@@ -103,7 +125,7 @@ const ProjectFlockDetail = ({
<div className='col-span-2'>
<Badge
variant='soft'
color='secondary'
color='neutral'
className={{
badge: 'rounded-lg px-2',
}}
@@ -191,7 +213,7 @@ const ProjectFlockDetail = ({
</Badge>
<div className='divider divider-horizontal p-0 m-0'></div>
<Badge
color='secondary'
color='neutral'
variant='soft'
className={{ badge: 'rounded-lg px-2 cursor-pointer' }}
onClick={() => {