mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE-238-106): change dateinput and create chickin page
This commit is contained in:
randy-ar
Generated
+44
@@ -17,6 +17,7 @@
|
||||
"moment": "^2.30.1",
|
||||
"next": "15.5.3",
|
||||
"react": "19.1.0",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dom": "19.1.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-number-format": "^5.4.4",
|
||||
@@ -195,6 +196,12 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@date-fns/tz": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
|
||||
"integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
|
||||
@@ -2872,6 +2879,22 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns-jalali": {
|
||||
"version": "4.1.0-0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
|
||||
"integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
@@ -5732,6 +5755,27 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-day-picker": {
|
||||
"version": "9.11.1",
|
||||
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.11.1.tgz",
|
||||
"integrity": "sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@date-fns/tz": "^1.4.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"date-fns-jalali": "^4.1.0-0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/gpbl"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"moment": "^2.30.1",
|
||||
"next": "15.5.3",
|
||||
"react": "19.1.0",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dom": "19.1.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-number-format": "^5.4.4",
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -0,0 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
|
||||
export default function AddChickinKandang() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const kandangId = searchParams.get('kandangId');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Tambah Chickin untuk Kandang ID: {kandangId}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,10 +2,12 @@
|
||||
|
||||
import Badge from '@/components/Badge';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
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 PillBadge from '@/components/PillBadge';
|
||||
import Table from '@/components/Table';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
@@ -13,10 +15,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 { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { is } from 'react-day-picker/locale';
|
||||
|
||||
import useSWR from 'swr';
|
||||
|
||||
@@ -113,21 +117,27 @@ const AddChickin = () => {
|
||||
<>
|
||||
<section className='w-full p-4'>
|
||||
<header className='flex flex-col gap-4'>
|
||||
<Button
|
||||
href='/production/project-flock'
|
||||
variant='link'
|
||||
className='w-fit p-0 text-primary'
|
||||
>
|
||||
<Icon icon='uil:arrow-left' width={24} height={24} />
|
||||
Kembali
|
||||
</Button>
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<Button
|
||||
href='/production/project-flock'
|
||||
variant='link'
|
||||
className='w-fit p-0 text-primary'
|
||||
>
|
||||
<Icon icon='uil:arrow-left' width={24} height={24} />
|
||||
Kembali
|
||||
</Button>
|
||||
<h1 className='text-2xl font-semibold text-center'>
|
||||
Daftar Kandang Project Flock
|
||||
</h1>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
label='Project Flock'
|
||||
placeholder='Pilih project flock'
|
||||
label='Ganti Project Flock'
|
||||
placeholder='Pilih Project Flock'
|
||||
options={options}
|
||||
onInputChange={(val) => {
|
||||
setSearchProjectFlock(val);
|
||||
@@ -164,78 +174,203 @@ const AddChickin = () => {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Table<Kandang>
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
{projectFlockId && isResponseError(projectFlock) ? (
|
||||
<span className='text-lg opacity-50'>
|
||||
{projectFlock.message}
|
||||
</span>
|
||||
) : (
|
||||
<span className='text-lg opacity-50'>
|
||||
Pilih project flock terlebih dahulu...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
data={
|
||||
isResponseSuccess(projectFlock) ? projectFlock.data?.kandangs : []
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Nama Kandang',
|
||||
},
|
||||
{
|
||||
header: 'Aksi',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color='success'
|
||||
variant='outline'
|
||||
onClick={() => {
|
||||
handleChickinClick(props.row.original);
|
||||
}}
|
||||
disabled={isLoadingProjectFlockKandang}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:home-import-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Chickin
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
page={undefined}
|
||||
<Card
|
||||
title='Informasi Flock'
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(projectFlock) &&
|
||||
projectFlock.data?.kandangs?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
wrapper: 'w-full bg-white mb-3',
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Table<ProjectFlock>
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
{projectFlockId && isResponseError(projectFlock) ? (
|
||||
<span className='text-lg opacity-50'>
|
||||
{projectFlock.message}
|
||||
</span>
|
||||
) : (
|
||||
<span className='text-lg opacity-50'>
|
||||
Pilih project flock terlebih dahulu...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
data={isResponseSuccess(projectFlock) ? [projectFlock.data] : []}
|
||||
columns={[
|
||||
{
|
||||
header: 'Area',
|
||||
accessorKey: 'area.name',
|
||||
},
|
||||
{
|
||||
header: 'Lokasi',
|
||||
accessorKey: 'location.name',
|
||||
},
|
||||
{
|
||||
header: 'Nama Flock',
|
||||
accessorKey: 'flock.name',
|
||||
},
|
||||
{
|
||||
header: 'Kategori',
|
||||
accessorKey: 'category',
|
||||
},
|
||||
{
|
||||
header: 'Status',
|
||||
accessorKey: 'status',
|
||||
cell: (props) => {
|
||||
return props.row.original.approval.step_name ? (
|
||||
<PillBadge
|
||||
color={(() => {
|
||||
switch (
|
||||
props.row.original.approval.step_name.toUpperCase()
|
||||
) {
|
||||
case 'AKTIF':
|
||||
return 'red';
|
||||
case 'PENGAJUAN':
|
||||
return 'green';
|
||||
default:
|
||||
return 'gray';
|
||||
}
|
||||
})()}
|
||||
content={props.row.original.approval.step_name
|
||||
.toLowerCase()
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase())}
|
||||
/>
|
||||
) : (
|
||||
'-'
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Periode',
|
||||
accessorKey: 'period',
|
||||
},
|
||||
{
|
||||
header: 'FCR Layer',
|
||||
accessorKey: 'fcr.name',
|
||||
},
|
||||
]}
|
||||
page={undefined}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(projectFlock) &&
|
||||
projectFlock.data?.kandangs?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
title='Daftar Chickin'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<Table<Kandang>
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
{projectFlockId && isResponseError(projectFlock) ? (
|
||||
<span className='text-lg opacity-50'>
|
||||
{projectFlock.message}
|
||||
</span>
|
||||
) : (
|
||||
<span className='text-lg opacity-50'>
|
||||
Pilih project flock terlebih dahulu...
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
data={
|
||||
isResponseSuccess(projectFlock)
|
||||
? projectFlock.data?.kandangs
|
||||
: []
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
accessorFn: () =>
|
||||
isResponseSuccess(projectFlock)
|
||||
? projectFlock.data.area.name
|
||||
: '',
|
||||
header: 'Area',
|
||||
},
|
||||
{
|
||||
accessorFn: () =>
|
||||
isResponseSuccess(projectFlock)
|
||||
? projectFlock.data.location.name
|
||||
: '',
|
||||
header: 'Lokasi',
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Kandang',
|
||||
},
|
||||
{
|
||||
accessorKey: 'capacity',
|
||||
header: 'Kapasitas',
|
||||
},
|
||||
{
|
||||
accessorKey: 'pic.name',
|
||||
header: 'Penanggung Jawab',
|
||||
},
|
||||
{
|
||||
header: 'Aksi',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color='success'
|
||||
variant='outline'
|
||||
onClick={() => {
|
||||
handleChickinClick(props.row.original);
|
||||
}}
|
||||
disabled={isLoadingProjectFlockKandang}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:home-import-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
Chickin
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
page={undefined}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(projectFlock) &&
|
||||
projectFlock.data?.kandangs?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</section>
|
||||
<Modal ref={chickinModal.ref}>
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
|
||||
+38
-23
@@ -1,6 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
|
||||
import {
|
||||
ReactNode,
|
||||
RefObject,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export const useModal = () => {
|
||||
@@ -8,31 +15,35 @@ export const useModal = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const openModal = useCallback(() => {
|
||||
if (!ref.current) return;
|
||||
ref.current.showModal();
|
||||
setOpen(true);
|
||||
|
||||
ref.current?.showModal();
|
||||
}, []);
|
||||
|
||||
const closeModal = useCallback(() => {
|
||||
if (!ref.current) return;
|
||||
ref.current.close();
|
||||
setOpen(false);
|
||||
ref.current?.close();
|
||||
}, []);
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
if (open) {
|
||||
closeModal();
|
||||
} else {
|
||||
openModal();
|
||||
}
|
||||
open ? closeModal() : openModal();
|
||||
}, [open, closeModal, openModal]);
|
||||
|
||||
if (ref.current) {
|
||||
ref.current.addEventListener('close', () => {
|
||||
closeModal();
|
||||
});
|
||||
}
|
||||
// Gunakan useEffect agar event listener tidak didaftarkan berulang kali
|
||||
useEffect(() => {
|
||||
const dialog = ref.current;
|
||||
if (!dialog) return;
|
||||
|
||||
return { ref, open, setOpen, openModal, closeModal, toggle } as const;
|
||||
const handleClose = () => setOpen(false);
|
||||
dialog.addEventListener('close', handleClose);
|
||||
|
||||
return () => {
|
||||
dialog.removeEventListener('close', handleClose);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { ref, open, openModal, closeModal, toggle } as const;
|
||||
};
|
||||
|
||||
interface ModalProps {
|
||||
@@ -46,15 +57,19 @@ interface ModalProps {
|
||||
}
|
||||
|
||||
const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
|
||||
return (
|
||||
<dialog ref={ref} className={cn('modal', className?.modal)}>
|
||||
<div className={cn('modal-box', className?.modalBox)}>{children}</div>
|
||||
const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
|
||||
if (closeOnBackdrop && e.target === ref.current) {
|
||||
ref.current?.close();
|
||||
}
|
||||
};
|
||||
|
||||
{closeOnBackdrop && (
|
||||
<form method='dialog' className='modal-backdrop'>
|
||||
<button>close</button>
|
||||
</form>
|
||||
)}
|
||||
return (
|
||||
<dialog
|
||||
ref={ref}
|
||||
className={cn('modal', className?.modal)}
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
<div className={cn('modal-box', className?.modalBox)}>{children}</div>
|
||||
</dialog>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,29 +4,21 @@ import {
|
||||
ChangeEventHandler,
|
||||
FocusEventHandler,
|
||||
ReactNode,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
const formatToISO = (dateStr: string): string | null => {
|
||||
const parts = dateStr.split('/');
|
||||
if (parts.length !== 3) return null;
|
||||
const [day, month, year] = parts;
|
||||
if (!day || !month || !year) return null;
|
||||
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const formatToLocal = (isoDate: string): string => {
|
||||
if (!isoDate) return '';
|
||||
const [year, month, day] = isoDate.split('-');
|
||||
return `${day}/${month}/${year}`;
|
||||
};
|
||||
import { cn, formatDate } from '@/lib/helper';
|
||||
import Modal, { useModal } from '../Modal';
|
||||
import { DateRange, DayPicker, Matcher } from 'react-day-picker';
|
||||
import 'react-day-picker/dist/style.css';
|
||||
import Button from '../Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
export interface DateInputProps {
|
||||
label?: string;
|
||||
bottomLabel?: string;
|
||||
name: string;
|
||||
value?: string;
|
||||
value?: string | { from?: string; to?: string };
|
||||
placeholder?: string;
|
||||
min?: string;
|
||||
max?: string;
|
||||
@@ -42,9 +34,8 @@ export interface DateInputProps {
|
||||
readOnly?: boolean;
|
||||
required?: boolean;
|
||||
isLoading?: boolean;
|
||||
isRange?: boolean;
|
||||
errorMessage?: string;
|
||||
startAdornment?: ReactNode;
|
||||
endAdornment?: ReactNode;
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
onBlur?: FocusEventHandler<HTMLInputElement>;
|
||||
}
|
||||
@@ -54,51 +45,139 @@ const DateInput = ({
|
||||
bottomLabel,
|
||||
name,
|
||||
value,
|
||||
placeholder,
|
||||
placeholder = 'dd/mm/yyyy',
|
||||
min,
|
||||
max,
|
||||
className,
|
||||
isError: externalError,
|
||||
isValid: externalValid,
|
||||
errorMessage: externalErrorMessage,
|
||||
startAdornment,
|
||||
endAdornment,
|
||||
disabled = false,
|
||||
required = false,
|
||||
onChange,
|
||||
onBlur,
|
||||
readOnly = false,
|
||||
isLoading = false,
|
||||
isRange = false,
|
||||
}: DateInputProps) => {
|
||||
const [internalError, setInternalError] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<Date | undefined>();
|
||||
const [selectedRange, setSelectedRange] = useState<{
|
||||
from?: Date;
|
||||
to?: Date;
|
||||
}>({});
|
||||
const [displayValue, setDisplayValue] = useState<string>('');
|
||||
|
||||
const minISO = min ? formatToISO(min) ?? undefined : undefined;
|
||||
const maxISO = max ? formatToISO(max) ?? undefined : undefined;
|
||||
const minDate = min
|
||||
? new Date(min.split('/').reverse().join('-'))
|
||||
: undefined;
|
||||
const maxDate = max
|
||||
? new Date(max.split('/').reverse().join('-'))
|
||||
: undefined;
|
||||
|
||||
const valueISO =
|
||||
value && value.includes('/') ? formatToISO(value) ?? '' : value ?? '';
|
||||
const calendarModal = useModal();
|
||||
|
||||
const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
const selectedDate = e.target.value;
|
||||
const isoMin = minISO;
|
||||
const isoMax = maxISO;
|
||||
|
||||
if (isoMin && selectedDate < isoMin) {
|
||||
setInternalError(`Tanggal tidak boleh sebelum ${min}`);
|
||||
} else if (isoMax && selectedDate > isoMax) {
|
||||
setInternalError(`Tanggal tidak boleh setelah ${max}`);
|
||||
} else {
|
||||
setInternalError(null);
|
||||
// --- Sync value props ---
|
||||
useEffect(() => {
|
||||
if (!value) return;
|
||||
if (isRange && typeof value === 'object') {
|
||||
const from = value.from ? new Date(value.from) : undefined;
|
||||
const to = value.to ? new Date(value.to) : undefined;
|
||||
setSelectedRange({ from, to });
|
||||
setDisplayValue(
|
||||
`${from ? formatDate(from, 'DD/MM/YYYY') : ''} ${
|
||||
to ? '- ' + formatDate(to, 'DD/MM/YYYY') : ''
|
||||
}`
|
||||
);
|
||||
} else if (typeof value === 'string') {
|
||||
const iso = value.includes('/')
|
||||
? value.split('/').reverse().join('-')
|
||||
: value;
|
||||
const date = new Date(iso);
|
||||
setSelected(date);
|
||||
setDisplayValue(formatDate(iso, 'DD/MM/YYYY'));
|
||||
}
|
||||
}, [value, isRange]);
|
||||
|
||||
const event = {
|
||||
...e,
|
||||
target: {
|
||||
...e.target,
|
||||
value: formatToLocal(selectedDate),
|
||||
},
|
||||
};
|
||||
onChange?.(event as React.ChangeEvent<HTMLInputElement>);
|
||||
const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
|
||||
e.preventDefault();
|
||||
if (!disabled && !readOnly) calendarModal.openModal();
|
||||
};
|
||||
|
||||
const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
|
||||
onBlur?.(e);
|
||||
};
|
||||
|
||||
const handleSelectSingle = (selectedDate?: Date) => {
|
||||
if (!selectedDate) return;
|
||||
if (minDate && selectedDate < minDate) {
|
||||
setInternalError(`Tanggal tidak boleh sebelum ${min}`);
|
||||
return;
|
||||
}
|
||||
if (maxDate && selectedDate > maxDate) {
|
||||
setInternalError(`Tanggal tidak boleh setelah ${max}`);
|
||||
return;
|
||||
}
|
||||
setInternalError(null);
|
||||
setSelected(selectedDate);
|
||||
const formattedDisplay = formatDate(selectedDate, 'DD/MM/YYYY');
|
||||
const formattedISO = formatDate(selectedDate, 'YYYY-MM-DD');
|
||||
setDisplayValue(formattedDisplay);
|
||||
|
||||
const syntheticEvent = {
|
||||
target: { name, value: formattedISO },
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>;
|
||||
onChange?.(syntheticEvent);
|
||||
calendarModal.closeModal();
|
||||
};
|
||||
|
||||
const handleSelectRange = (range?: { from?: Date; to?: Date }) => {
|
||||
if (!range) return;
|
||||
setSelectedRange(range);
|
||||
|
||||
const fromStr = range.from ? formatDate(range.from, 'DD/MM/YYYY') : '';
|
||||
const toStr = range.to ? formatDate(range.to, 'DD/MM/YYYY') : '';
|
||||
setDisplayValue(`${fromStr}${toStr ? ' - ' + toStr : ''}`);
|
||||
|
||||
// Jika kedua tanggal sudah terpilih
|
||||
if (range.from && range.to) {
|
||||
if (minDate && range.from < minDate) {
|
||||
setInternalError(`Tanggal mulai tidak boleh sebelum ${min}`);
|
||||
return;
|
||||
}
|
||||
if (maxDate && range.to > maxDate) {
|
||||
setInternalError(`Tanggal akhir tidak boleh setelah ${max}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setInternalError(null);
|
||||
const syntheticEvent = {
|
||||
target: {
|
||||
name,
|
||||
value: {
|
||||
from: formatDate(range.from, 'YYYY-MM-DD'),
|
||||
to: formatDate(range.to, 'YYYY-MM-DD'),
|
||||
},
|
||||
},
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>;
|
||||
onChange?.(syntheticEvent);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetDate = () => {
|
||||
setSelected(undefined);
|
||||
setSelectedRange({});
|
||||
setDisplayValue('');
|
||||
const syntheticEvent = {
|
||||
target: { name, value: isRange ? { from: '', to: '' } : '' },
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>;
|
||||
onChange?.(syntheticEvent);
|
||||
calendarModal.closeModal();
|
||||
};
|
||||
|
||||
const handleSaveDate = () => {
|
||||
if (internalError) return;
|
||||
calendarModal.closeModal();
|
||||
};
|
||||
|
||||
const finalIsError = externalError || !!internalError;
|
||||
@@ -122,49 +201,53 @@ const DateInput = ({
|
||||
>
|
||||
{label}
|
||||
{required && (
|
||||
<>
|
||||
{' '}
|
||||
<span className='tooltip tooltip-error' data-tip='required'>
|
||||
<span className='text-error'>*</span>
|
||||
</span>
|
||||
</>
|
||||
<span className='text-error' title='required'>
|
||||
*
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'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',
|
||||
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
|
||||
{
|
||||
'border-error': finalIsError,
|
||||
'border-success!': externalValid && !finalIsError,
|
||||
'border-success': externalValid && !finalIsError,
|
||||
},
|
||||
className?.inputWrapper
|
||||
)}
|
||||
>
|
||||
{startAdornment && startAdornment}
|
||||
|
||||
<input
|
||||
type='date'
|
||||
type='text'
|
||||
id={name}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
value={valueISO}
|
||||
onChange={handleChange}
|
||||
onBlur={onBlur}
|
||||
min={minISO}
|
||||
max={maxISO}
|
||||
placeholder={isRange ? 'dd/mm/yyyy - dd/mm/yyyy' : placeholder}
|
||||
value={displayValue}
|
||||
onBlur={handleBlur}
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
className={cn('grow bg-transparent cursor-pointer', className?.input)}
|
||||
readOnly={readOnly}
|
||||
readOnly // ✅ tidak bisa diketik manual
|
||||
className={cn(
|
||||
'grow bg-transparent cursor-pointer focus:outline-none',
|
||||
className?.input
|
||||
)}
|
||||
/>
|
||||
|
||||
{(isLoading || endAdornment) && (
|
||||
{isLoading && (
|
||||
<div className='flex flex-row gap-2'>
|
||||
{isLoading && <span className='loading loading-spinner' />}
|
||||
{endAdornment && endAdornment}
|
||||
<span className='loading loading-spinner' />
|
||||
</div>
|
||||
)}
|
||||
<Icon
|
||||
icon='uil:calendar'
|
||||
width={24}
|
||||
height={24}
|
||||
className='cursor-pointer text-dark'
|
||||
onClick={(e) =>
|
||||
handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!finalIsError && bottomLabel && (
|
||||
@@ -173,6 +256,74 @@ const DateInput = ({
|
||||
{finalIsError && finalErrorMessage && (
|
||||
<p className='w-full text-sm text-error'>{finalErrorMessage}</p>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
ref={calendarModal.ref}
|
||||
className={{
|
||||
modal: 'rounded',
|
||||
modalBox: `w-fit min-h-${isRange ? '124' : '110'} flex flex-col`,
|
||||
}}
|
||||
closeOnBackdrop
|
||||
>
|
||||
{isRange ? (
|
||||
<DayPicker
|
||||
required={required}
|
||||
mode='range'
|
||||
captionLayout='dropdown-years'
|
||||
navLayout='around'
|
||||
reverseYears
|
||||
defaultMonth={selectedRange.from ?? new Date()}
|
||||
startMonth={minDate ?? new Date(1999, 1)}
|
||||
endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
|
||||
selected={selectedRange as DateRange}
|
||||
onSelect={handleSelectRange}
|
||||
footer={<div className='text-center mt-3'>{displayValue}</div>}
|
||||
disabled={
|
||||
[
|
||||
minDate ? { before: minDate } : undefined,
|
||||
maxDate ? { after: maxDate } : undefined,
|
||||
].filter(Boolean) as Matcher[]
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<DayPicker
|
||||
required={required}
|
||||
mode='single'
|
||||
captionLayout='dropdown-years'
|
||||
navLayout='around'
|
||||
reverseYears
|
||||
defaultMonth={selected ?? new Date()}
|
||||
startMonth={minDate ?? new Date(1999, 1)}
|
||||
endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)}
|
||||
selected={selected}
|
||||
onSelect={handleSelectSingle}
|
||||
disabled={
|
||||
[
|
||||
minDate ? { before: minDate } : undefined,
|
||||
maxDate ? { after: maxDate } : undefined,
|
||||
].filter(Boolean) as Matcher[]
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div className='mt-auto flex flex-col gap-2'>
|
||||
{isRange && (
|
||||
<small className='text-secondary'>
|
||||
Tekan dua kali untuk memilih tanggal awal
|
||||
</small>
|
||||
)}
|
||||
|
||||
<div className='flex h-full justify-end items-end gap-2'>
|
||||
<Button type='button' color='warning' onClick={handleResetDate}>
|
||||
Reset
|
||||
</Button>
|
||||
{isRange && (
|
||||
<Button type='button' onClick={handleSaveDate}>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -44,54 +44,56 @@ const RowOptionsMenu = ({
|
||||
'dropdown-content': type === 'dropdown',
|
||||
'mt-2': type === 'collapse',
|
||||
},
|
||||
'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
|
||||
'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='primary'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:eye-outline' width={16} height={16} />
|
||||
Detail
|
||||
</Button>
|
||||
{props.row.original.approval.step_name === 'Aktif' && (
|
||||
<div className='flex flex-col gap-1'>
|
||||
<Button
|
||||
href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
|
||||
href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='success'
|
||||
color='primary'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:home-import-outline' width={16} height={16} />
|
||||
Chickin
|
||||
<Icon icon='mdi:eye-outline' width={16} height={16} />
|
||||
Detail
|
||||
</Button>
|
||||
)}
|
||||
{props.row.original.approval.step_name === 'Pengajuan' && (
|
||||
{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
|
||||
href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
|
||||
onClick={deleteClickHandler}
|
||||
variant='ghost'
|
||||
color='warning'
|
||||
className='justify-start text-sm'
|
||||
color='error'
|
||||
className='text-error hover:text-inherit'
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={16} height={16} />
|
||||
Edit
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={16}
|
||||
height={16}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={deleteClickHandler}
|
||||
variant='ghost'
|
||||
color='error'
|
||||
className='text-error hover:text-inherit'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={16}
|
||||
height={16}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user