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 'development' of gitlab.com:mbugroup/lti-web-client into dev/hotfix/restu

Browse Source
This commit is contained in:
rstubryan
2026-01-25 17:46:05 +07:00
parent 2d6e8480f5 ae206b9426
commit 4768a7d6fd
25 changed files with 2029 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+7 -3
View File
@@ -1,5 +1,6 @@
@import 'tailwindcss';
@plugin "daisyui";
@import '../styles/tailwind.css';
@import '../styles/daisyui.css';
@import '../figma-make/styles/theme.css';
@@ -34,11 +35,11 @@
/* Status/Utility Colors */
--color-info: oklch(67.4% 0.176 238.9);
--color-info-content: oklch(0% 0 0); /* #000000 */
--color-success: oklch(62.3% 0.147 149);
--color-success: #00d390;
--color-success-content: oklch(100% 0 0); /* #ffffff */
--color-warning: oklch(82.2% 0.165 91.9);
--color-warning-content: oklch(0% 0 0); /* #000000 */
--color-error: oklch(61.8% 0.203 27.8);
--color-error: #ff3a3a;
--color-error-content: oklch(100% 0 0); /* #fffffff */
--radius-selector: 0rem;
@@ -52,7 +53,7 @@
}
:root {
--color-primary: #1f74bf;
--color-primary: #0069e0;
}
@theme {
@@ -64,6 +65,9 @@
--container-lg: 64rem;
--container-xl: 80rem;
--container-2xl: 96rem;
--shadow-button-soft:
0 3px 2px -2px var(--color-base-200), 0 4px 3px -2px var(--color-base-200);
}
html {
src/app/production/transfer-to-laying/page.tsx
+4 -1
View File
@@ -1,9 +1,12 @@
import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
const TransferToLaying = () => {
return (
<section className='w-full p-4'>
<section className='w-full'>
<TransferToLayingsTable />
<TransferToLayingFormModal />
</section>
);
};
src/components/Breadcrumb.tsx
+263
View File
@@ -0,0 +1,263 @@
import React, { useId } from 'react';
import Link from 'next/link';
import { Icon } from '@iconify/react';
import { cn, findMenuPath } from '@/lib/helper';
import { Size } from '@/types/theme';
import Button from '@/components/Button';
import { MAIN_DRAWER_LINKS } from '@/config/constant';
interface BreadcrumbItem {
label: string;
href?: string;
icon?: React.ReactNode;
isActive?: boolean;
isDisabled?: boolean;
}
interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
items: BreadcrumbItem[];
size?: Size;
maxVisibleItems?: number;
showEllipsisDropdown?: boolean;
}
export function buildBreadcrumbs(pathname: string): BreadcrumbItem[] {
const menuPath = findMenuPath(MAIN_DRAWER_LINKS, pathname);
if (!menuPath) return [];
return menuPath.map((menu, index) => {
const isLast = index === menuPath.length - 1;
return {
label: menu.text,
href: isLast ? menu.link : undefined,
isActive: isLast,
icon: menu.icon ? (
<Icon icon={menu.icon} width={16} height={16} />
) : undefined,
};
});
}
const EllipsisDropdown = ({
hiddenItems,
}: {
hiddenItems: BreadcrumbItem[];
}) => {
const dropdownId = useId();
const anchorId = useId();
return (
<li>
{/* Ellipsis Button */}
<Button
popoverTarget={dropdownId}
variant='ghost'
color='none'
style={
{
anchorName: `--breadcrumb-ellipsis-anchor-${anchorId}`,
} as React.CSSProperties
}
>
<Icon icon='material-symbols:more-horiz' width={16} height={16} />
</Button>
{/* Dropdown Menu using popover API */}
<ul
className='dropdown menu rounded-box bg-base-100 border border-base-300 shadow-lg z-[9999] [&_a:hover]:no-underline [&_a:focus]:no-underline [&&]:no-underline [&&_a]:no-underline [&&]:hover:no-underline [&&]:flex [&&]:items-start [&&]:justify-start w-max'
popover='auto'
id={dropdownId}
style={
{
positionAnchor: `--breadcrumb-ellipsis-anchor-${anchorId}`,
} as React.CSSProperties
}
>
{hiddenItems.map((item, index) => {
const itemStyles = cn(
'[&]:flex [&]:items-center [&]:justify-start py-1 text-sm',
// Disabled state
item.isDisabled && 'text-base-content/40 opacity-50',
// Active/Last state
(item.isActive || item.isDisabled) && 'text-primary',
// Regular clickable state
!item.isDisabled && 'text-base-content/50'
);
const itemContent = (
<div className={itemStyles}>
{item.icon && (
<span className='inline-flex mr-2'>{item.icon}</span>
)}
{item.label}
</div>
);
return (
<li
key={`ellipsis-${index}`}
className='[&&]:text-left [&&]:block w-full'
>
{item.href && !item.isDisabled ? (
<Link
href={item.href}
className='block !no-underline [&&]:text-left w-full'
onClick={(e) => e.stopPropagation()}
>
{itemContent}
</Link>
) : (
<div className='block !no-underline [&&]:cursor-default [&&]:hover:cursor-default [&&]:hover:bg-base-100 [&&]:text-left'>
{itemContent}
</div>
)}
</li>
);
})}
</ul>
</li>
);
};
const Breadcrumb = ({
items,
size = 'md',
maxVisibleItems = 3,
showEllipsisDropdown = true,
className,
...props
}: BreadcrumbsProps) => {
const sizeClasses = {
xs: 'text-xs',
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
};
const getItemStyles = (
item: BreadcrumbItem,
position: 'first' | 'middle' | 'last' = 'middle'
) => {
const baseClasses = 'inline-flex items-center gap-2';
// Disabled state
if (item.isDisabled) {
return `${baseClasses} text-base-content/40 !cursor-default opacity-50 hover:!no-underline`;
}
// Active/Last state (no underline)
if (item.isActive || position === 'last') {
return `${baseClasses} text-primary !cursor-pointer hover:!no-underline`;
}
// Regular clickable state
return `${baseClasses} text-base-content/60`;
};
const renderItem = (
item: BreadcrumbItem,
position: 'first' | 'middle' | 'last' = 'middle'
) => {
const styles = getItemStyles(item, position);
// Disabled items
if (item.isDisabled) {
return (
<span className={styles}>
{item.icon && item.icon}
{item.label}
</span>
);
}
// Active/Last items
if (item.isActive || position === 'last') {
if (item.href) {
return (
<Link href={item.href} className={styles}>
{item.icon && (
<span className='inline-flex gap-2'>{item.icon}</span>
)}
{item.label}
</Link>
);
}
return (
<span className={styles}>
{item.icon && item.icon}
{item.label}
</span>
);
}
// Regular items
if (item.href) {
return (
<Link href={item.href} className={styles}>
{item.icon && <span className='inline-flex gap-2'>{item.icon}</span>}
{item.label}
</Link>
);
}
return (
<span className={styles}>
{item.icon && item.icon}
{item.label}
</span>
);
};
const renderBreadcrumbList = () => {
// Show all items if within limit
if (items.length <= maxVisibleItems) {
return items.map((item, index) => {
const position =
index === 0
? 'first'
: index === items.length - 1
? 'last'
: 'middle';
return <li key={index}>{renderItem(item, position)}</li>;
});
}
// Collapsed items indexing when exceeding limit
const firstItem = items[0];
const lastItem = items[items.length - 1];
const visibleMiddleItems = items.slice(1, -1).slice(-(maxVisibleItems - 2));
const hiddenItems = items.slice(1, -1).slice(0, -(maxVisibleItems - 2));
const showEllipsis = showEllipsisDropdown && hiddenItems.length > 0;
return (
<>
<li>{renderItem(firstItem, 'first')}</li>
{/* Ellipsis for hidden items with dropdown */}
{showEllipsis && <EllipsisDropdown hiddenItems={hiddenItems} />}
{/* Middle items */}
{visibleMiddleItems.map((item, index) => (
<li key={`middle-${index}`}>{renderItem(item, 'middle')}</li>
))}
<li>{renderItem(lastItem, 'last')}</li>
</>
);
};
return (
<nav
aria-label='Breadcrumb'
className={cn('breadcrumbs', sizeClasses[size], className)}
{...props}
>
<ul className='text-sm'>{renderBreadcrumbList()}</ul>
</nav>
);
};
export default Breadcrumb;
src/components/Button.tsx
+2 -1
View File
@@ -2,11 +2,12 @@ import react from 'react';
import Link from 'next/link';
import { cn } from '@/lib/helper';
import { Color } from '@/types/theme';
import { UrlObject } from 'url';
export interface ButtonProps extends react.ComponentProps<'button'> {
variant?: 'soft' | 'outline' | 'dash' | 'ghost' | 'link' | 'active';
color?: Color;
href?: string;
href?: string | UrlObject;
isLoading?: boolean;
target?: string;
rel?: string;
src/components/MainDrawer.tsx
+1 -35
View File
@@ -78,40 +78,6 @@ const MainDrawer = ({
permissionCheck(permission)
);
const getPageTitle = useCallback(() => {
let title = '';
const activeMenu = MAIN_DRAWER_LINKS.find((item) =>
isPathActive(pathname, item.link)
);
const traverseMenuTitle = (menu: typeof activeMenu) => {
if (!menu) return;
const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
if (!title) {
title += menu?.text;
} else {
title += ' - ' + menu?.text;
}
if (!hasSubmenu || !menu.submenu) return;
const activeSubmenu = menu.submenu?.find((item) =>
isPathActive(pathname, item.link)
);
traverseMenuTitle(activeSubmenu);
};
traverseMenuTitle(activeMenu);
return title;
}, [pathname]);
const pageTitle = getPageTitle();
const toggleSidebar = () => {
setMainDrawerOpen(!mainDrawerOpen);
};
@@ -132,7 +98,7 @@ const MainDrawer = ({
}}
>
<main className='w-full h-full flex flex-col'>
<Navbar title={pageTitle as string} toggleSidebar={toggleSidebar} />
<Navbar toggleSidebar={toggleSidebar} />
{children}
</main>
src/components/Modal.tsx
+22 -2
View File
@@ -53,15 +53,25 @@ interface ModalProps {
ref: RefObject<HTMLDialogElement | null>;
children?: ReactNode;
closeOnBackdrop?: boolean;
onBackdropClick?: () => void;
position?: 'top' | 'middle' | 'bottom' | 'start' | 'end';
className?: {
modal?: string;
modalBox?: string;
};
}
const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
const Modal = ({
ref,
children,
closeOnBackdrop,
onBackdropClick,
position = 'middle',
className,
}: ModalProps) => {
const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
if (closeOnBackdrop && e.target === ref.current) {
onBackdropClick?.();
ref.current?.close();
}
};
@@ -69,7 +79,17 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
return (
<dialog
ref={ref}
className={cn('modal', className?.modal)}
className={cn(
'modal',
{
'modal-top': position === 'top',
'modal-middle': position === 'middle',
'modal-bottom': position === 'bottom',
'modal-start': position === 'start',
'modal-end': position === 'end',
},
className?.modal
)}
onClick={handleBackdropClick}
>
<div className={cn('modal-box', className?.modalBox)}>{children}</div>
src/components/Navbar.tsx
+41 -31
View File
@@ -1,26 +1,26 @@
'use client';
import toast from 'react-hot-toast';
import { useRouter } from 'next/navigation';
import { usePathname, useRouter } from 'next/navigation';
import { Icon } from '@iconify/react';
import Menu from '@/components/menu/Menu';
import MenuItem from '@/components/menu/MenuItem';
import Button from '@/components/Button';
import Dropdown from '@/components/Dropdown';
import Breadcrumb, { buildBreadcrumbs } from '@/components/Breadcrumb';
import PopoverButton from '@/components/popover/PopoverButton';
import PopoverContent from '@/components/popover/PopoverContent';
import { useAuth } from '@/services/hooks/useAuth';
import { AuthApi } from '@/services/api/auth';
import { isResponseError } from '@/lib/api-helper';
interface NavbarProps {
title: string;
toggleSidebar?: () => void;
}
const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
const Navbar = ({ toggleSidebar }: NavbarProps) => {
const { setUser } = useAuth();
const router = useRouter();
const pathname = usePathname();
const logoutClickHandler = async () => {
const logoutRes = await AuthApi.logout();
@@ -35,42 +35,52 @@ const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
};
return (
<div className='navbar px-4 bg-base-100 shadow-sm'>
<div className='navbar p-3 bg-base-100 border-b border-base-content/10'>
<div className='flex-1'>
<div className='flex flex-row items-center gap-4'>
{toggleSidebar && (
<Button onClick={toggleSidebar} className='block lg:hidden'>
<Icon
icon='material-symbols:menu-rounded'
width={24}
height={24}
/>
<Button
variant='ghost'
color='none'
onClick={toggleSidebar}
className='block lg:hidden p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
>
<Icon icon='heroicons:bars-3' width={20} height={20} />
</Button>
)}
<span className='font-bold text-xl text-primary'>{title}</span>
<Breadcrumb items={buildBreadcrumbs(pathname)} />
</div>
</div>
<div className='flex gap-2'>
<Dropdown
align='end'
direction='bottom'
trigger={
<div className='btn btn-ghost btn-circle avatar'>
<div className='w-10 rounded-full border flex justify-center items-center'>
<Icon icon='uil:user' width={40} height={40} />
</div>
</div>
}
className={{
content: 'w-52 mt-3',
}}
<PopoverButton
tabIndex={0}
variant='ghost'
color='none'
popoverTarget='accountNavbar'
anchorName='--account-navbar'
className='p-[9px] text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
>
<Menu>
<MenuItem title='Logout' onClick={logoutClickHandler} />
</Menu>
</Dropdown>
<Icon icon='heroicons:user' width={20} height={20} />
</PopoverButton>
<PopoverContent
id='accountNavbar'
anchorName='--account-navbar'
position='bottom-start'
className='rounded-xl border border-base-content/5 shadow-sm'
>
<Button
onClick={logoutClickHandler}
variant='ghost'
color='error'
className='p-3 justify-start text-sm font-semibold w-full'
>
<Icon icon='heroicons-outline:logout' width={20} height={20} />
Logout
</Button>
</PopoverContent>
</div>
</div>
);
src/components/Table.tsx
+10 -3
View File
@@ -31,6 +31,7 @@ interface TableClassNames {
headerColumnClassName?: string;
tableBodyClassName?: string;
bodyRowClassName?: string;
selectedBodyRowClassName?: string;
bodyColumnClassName?: string;
tableFooterClassName?: string;
footerRowClassName?: string;
@@ -88,9 +89,11 @@ export const TABLE_DEFAULT_STYLING = {
headerColumnClassName:
'px-4 py-3 border-base-content/10 text-base-content/50 text-sm font-medium',
tableBodyClassName: '',
bodyRowClassName: 'border-t border-base-content/10',
bodyRowClassName:
'transition-all duration-200 border-t border-base-content/10 bg-transparent',
selectedBodyRowClassName: 'bg-primary/5',
bodyColumnClassName: 'px-4 py-3 text-base-content',
paginationClassName: '',
paginationClassName: 'px-3',
tableFooterClassName: 'font-semibold border-base-content/10',
footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10',
footerColumnClassName: 'p-4 text-base-content whitespace-nowrap',
@@ -353,7 +356,11 @@ const Table = <TData extends object>({
key={row.id}
className={cn(
TABLE_DEFAULT_STYLING.bodyRowClassName,
tableClassNames.bodyRowClassName
tableClassNames.bodyRowClassName,
{
[tableClassNames.selectedBodyRowClassName]:
row.getIsSelected(),
}
)}
>
{row.getVisibleCells().map((cell) => (
src/components/helper/StatusBadge.tsx
+56
View File
@@ -0,0 +1,56 @@
import Badge from '@/components/Badge';
import { cn } from '@/lib/helper';
import { Color } from '@/types/theme';
interface StatusBadgeProps {
color: Color;
text: string;
className?: {
badge?: string;
status?: string;
};
}
const StatusBadge = ({
color = 'neutral',
text,
className,
}: StatusBadgeProps) => {
return (
<Badge
variant='soft'
className={{
badge: cn(
'px-2 py-1 w-full flex flex-row justify-start gap-1 rounded-lg border border-base-content/10 text-xs font-medium text-base-content',
{
'bg-base-content/5': color === 'neutral',
'bg-success/30': color === 'success',
'bg-error/20': color === 'error',
'bg-primary/20': color === 'info',
},
className?.badge
),
status: cn(className?.status),
}}
color={color}
>
<svg
height='12'
width='12'
xmlns='http://www.w3.org/2000/svg'
className={cn({
'text-base-content/10': color === 'neutral',
'text-success': color === 'success',
'text-error': color === 'error',
'text-primary': color === 'info',
})}
>
<circle r='6' cx='6' cy='6' fill='currentColor' />
</svg>
{text}
</Badge>
);
};
export default StatusBadge;
src/components/input/DateInput.tsx
+9 -14
View File
@@ -204,17 +204,12 @@ const DateInput = ({
const finalErrorMessage = internalError || externalErrorMessage;
return (
<div
className={cn(
'w-full flex flex-col gap-2 text-start',
className?.wrapper
)}
>
<div className={cn('w-full flex flex-col text-start', className?.wrapper)}>
{label && (
<label
htmlFor={name}
className={cn(
'w-full text-sm font-normal leading-5',
'w-full py-2 text-xs font-semibold leading-5',
{ 'text-error': finalIsError },
className?.label
)}
@@ -231,7 +226,7 @@ const DateInput = ({
<div
className={cn(
'input h-12 bg-inherit px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
'input h-12 bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
{
'border-error': finalIsError,
'border-success': externalValid && !finalIsError,
@@ -261,10 +256,10 @@ const DateInput = ({
</div>
)}
<Icon
icon='uil:calendar'
width={24}
height={24}
className='cursor-pointer text-dark'
icon='heroicons:calendar-date-range'
width={14}
height={14}
className='cursor-pointer text-base-content/20'
onClick={(e) =>
handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
}
@@ -272,10 +267,10 @@ const DateInput = ({
</div>
{!finalIsError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
<p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
)}
{finalIsError && finalErrorMessage && (
<p className='w-full text-sm text-error'>{finalErrorMessage}</p>
<p className='w-full mt-1.5 text-xs text-error'>{finalErrorMessage}</p>
)}
<Modal
src/components/input/SelectInput.tsx
+21 -19
View File
@@ -95,7 +95,7 @@ const CustomControl = <
return (
<ReactSelectComponents.Control {...props}>
<div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
<div className='flex-1 p-3! py-1.5 gap-1 flex items-center'>
{shouldShowAdornment && startAdornment}
{children}
</div>
@@ -118,7 +118,7 @@ const CustomMenuList = <
{children}
{options.length > 0 && isLoading && (
<div className='mt-1 px-3 py-2 rounded-md text-center text-gray-400'>
<div className='px-3 py-2 rounded-md text-center text-gray-400'>
<span className='loading loading-spinner loading-md' />
</div>
)}
@@ -204,16 +204,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
};
return (
<div
className={cn(
'w-full flex flex-col gap-2 text-start',
className?.wrapper
)}
>
<div className={cn('w-full flex flex-col text-start', className?.wrapper)}>
{label && (
<span
className={cn(
'w-full text-sm font-normal leading-5',
'w-full py-2 text-xs font-semibold leading-5',
{ 'text-error': isError },
className?.label
)}
@@ -253,33 +248,36 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
...(!startAdornment && {
control: ({ isFocused, isDisabled }) =>
cn(
'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
'w-full min-h-12! rounded-lg! 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,
'border-gray-300': !isError && !isFocused,
'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
}
),
valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
valueContainer: () => cn('flex-1 p-3! py-2! gap-1'),
}),
placeholder: () =>
cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
singleValue: () =>
cn({ 'text-gray-900': !isError, 'text-error!': isError }),
input: () => cn('text-gray-900'),
input: () => cn('text-gray-900 m-0! p-0!'),
indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
dropdownIndicator: ({ isFocused }) =>
cn('p-1 rounded hover:bg-gray-100', {
cn('p-1! rounded hover:bg-gray-100', {
'text-gray-900': isFocused,
'text-gray-500': !isFocused,
'text-error!': isError,
}),
clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'),
menu: () =>
cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
menuList: () => cn('p-2! max-h-60 overflow-auto'),
cn(
'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
),
menuList: () => cn('p-0! max-h-60 overflow-auto'),
option: ({ isFocused, isSelected }) =>
cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
cn('px-3 py-2 rounded-md cursor-pointer!', {
'bg-indigo-600 text-white': isFocused,
'bg-blue-500!': isSelected,
'text-gray-700': !isFocused && !isSelected,
@@ -287,13 +285,17 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
multiValue: ({ getValue, index }) => {
const selectedValues = getValue() as T[];
return cn(
'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
'bg-base-200! rounded-lg! py-[3px] px-2.5 m-0! flex items-center gap-1! w-fit gap-2!',
selectedValues[index]?.className
);
},
multiValueRemove: () => cn('p-0! w-3 h-3'),
multiValueLabel: ({ getValue, index }) => {
const selectedValues = getValue() as T[];
return cn('text-indigo-700', selectedValues[index]?.labelClassName);
return cn(
'p-0! text-base-content! text-xs!',
selectedValues[index]?.labelClassName
);
},
}}
components={{
src/components/input/SelectInputCheckbox.tsx
+11 -4
View File
@@ -25,14 +25,18 @@ const CheckboxOption = <
>(
props: OptionProps<T, IsMulti, Group>
) => {
const { isSelected, label, innerRef, innerProps, className } = props;
const { isSelected, label, innerRef, innerProps, className, isFocused } =
props;
return (
<div
ref={innerRef}
{...innerProps}
className={cn(
'flex items-center gap-2 px-3 py-2 cursor-pointer',
'flex items-center gap-3 p-3 cursor-pointer transition-all hover:bg-primary/5',
{
'bg-primary/5': isFocused,
},
className
)}
>
@@ -40,9 +44,12 @@ const CheckboxOption = <
type='checkbox'
checked={isSelected}
onChange={() => null}
className='checkbox checkbox-sm rounded checkbox-primary pointer-events-none'
className='checkbox checkbox-sm rounded-md checkbox-primary pointer-events-none border-base-content/10'
/>
<label className='cursor-pointer flex-1 select-none'>{label}</label>
<label className='cursor-pointer flex-1 select-none text-sm text-base-content/50 font-medium'>
{label}
</label>
</div>
);
};
src/components/input/SelectInputRadio.tsx
+11 -4
View File
@@ -21,14 +21,18 @@ const RadioOption = <
>(
props: OptionProps<T, IsMulti, Group>
) => {
const { isSelected, label, innerRef, innerProps, className } = props;
const { isSelected, label, innerRef, innerProps, className, isFocused } =
props;
return (
<div
ref={innerRef}
{...innerProps}
className={cn(
'flex items-center gap-2 px-3 py-2 cursor-pointer',
'flex items-center gap-3 p-3 cursor-pointer transition-all hover:bg-primary/5',
{
'bg-primary/5': isFocused,
},
className
)}
>
@@ -36,9 +40,12 @@ const RadioOption = <
type='radio'
checked={isSelected}
onChange={() => null}
className='radio radio-sm radio-primary pointer-events-none'
className='radio radio-md radio-primary pointer-events-none'
/>
<label className='cursor-pointer flex-1 select-none'>{label}</label>
<label className='cursor-pointer flex-1 select-none text-sm text-base-content/50 font-medium'>
{label}
</label>
</div>
);
};
src/components/input/TextArea.tsx
+7 -5
View File
@@ -53,7 +53,7 @@ const TextArea = ({
return (
<div
className={cn(
'w-full flex flex-col gap-2 text-start',
'w-full flex flex-col gap-0 text-start',
className?.wrapper
)}
>
@@ -61,7 +61,7 @@ const TextArea = ({
<label
htmlFor={name}
className={cn(
'w-full text-sm font-normal leading-5',
'w-full py-2 text-xs font-semibold leading-5',
{
'text-error': isError,
},
@@ -83,7 +83,7 @@ const TextArea = ({
<textarea
className={cn(
'textarea h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
'textarea h-auto px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
{
'border-error': isError,
'border-success!': isValid,
@@ -110,9 +110,11 @@ const TextArea = ({
)}
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
<p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
)}
{isError && (
<p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
)}
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
</div>
);
};
src/components/input/TextInput.tsx
+25 -11
View File
@@ -21,6 +21,9 @@ export interface TextInputProps {
label?: string;
inputWrapper?: string;
input?: string;
inputPrefix?: string;
inputSuffix?: string;
inputPrefixSuffixWrapper?: string;
};
isError?: boolean;
isValid?: boolean;
@@ -62,7 +65,7 @@ const TextInput = ({
return (
<div
className={cn(
'w-full flex flex-col gap-2 text-start',
'w-full flex flex-col gap-0 text-start rounded-lg',
className?.wrapper
)}
>
@@ -70,7 +73,7 @@ const TextInput = ({
<label
htmlFor={name}
className={cn(
'w-full text-sm font-normal leading-5',
'w-full py-2 text-xs font-semibold leading-5',
{
'text-error': isError,
},
@@ -90,15 +93,23 @@ const TextInput = ({
)}
{inputPrefix || inputSuffix ? (
<div className='relative flex'>
<div
className={cn(
'relative flex text-sm',
className?.inputPrefixSuffixWrapper
)}
>
{inputPrefix && (
<div
className={cn(
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
'border-error': isError,
'border-success!': isValid,
},
className?.inputPrefix
)}
>
{inputPrefix}
@@ -107,7 +118,7 @@ const TextInput = ({
<div
className={cn(
'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
'input h-12 px-3 py-2.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
{
'border-error': isError,
'border-success!': isValid,
@@ -154,11 +165,14 @@ const TextInput = ({
{inputSuffix && (
<div
className={cn(
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
'inline-flex items-center px-3 py-2.5 border border-l-0 border-base-content/10 rounded-r-lg transition-all duration-200',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
'border-error': isError,
'border-success!': isValid,
},
className?.inputSuffix
)}
>
{inputSuffix}
@@ -168,7 +182,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 bg-white',
'input h-12 px-3 py-2.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
{
'border-error': isError,
'border-success!': isValid,
@@ -202,10 +216,10 @@ const TextInput = ({
)}
{!isError && bottomLabel && (
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
<p className='w-full mt-1.5 text-xs opacity-60'>{bottomLabel}</p>
)}
{isError && errorMessage && (
<p className='w-full text-sm text-error'>{errorMessage}</p>
<p className='w-full mt-1.5 text-xs text-error'>{errorMessage}</p>
)}
</div>
);
src/components/modal/ConfirmationModal.tsx
+45 -41
View File
@@ -35,29 +35,29 @@ const iconConfig = {
info: {
icon: 'material-symbols:info-outline-rounded',
iconClassName: 'text-info-content',
bgClassName: 'bg-info',
outerRingClassName: 'bg-info/20',
borderClassName: 'border-info',
innerRingClassName: 'bg-info',
middleRingClassName: 'bg-info/12',
outerRingClassName: 'border-info/12 bg-info/8',
},
success: {
icon: 'heroicons:check',
iconClassName: 'text-white',
bgClassName: 'bg-[#00D390]',
outerRingClassName: 'bg-[#00D3901F]',
borderClassName: 'border-[#CCF7EB]',
innerRingClassName: 'bg-success',
middleRingClassName: 'bg-success/12',
outerRingClassName: 'border-success/12 bg-success/8',
},
error: {
icon: 'solar:danger-triangle-linear',
icon: 'heroicons:exclamation-triangle',
iconClassName: 'text-error-content',
bgClassName: 'bg-[#f03338]',
outerRingClassName: 'bg-[#f3cdcd]',
borderClassName: 'border-[#fff0ef]',
innerRingClassName: 'bg-error',
middleRingClassName: 'bg-error/12',
outerRingClassName: 'border-error/12 bg-error/8',
},
} as const;
const ConfirmationModalIcon = ({
type,
size = 24,
size = 16,
}: {
type: 'info' | 'success' | 'error';
size?: number;
@@ -65,28 +65,22 @@ const ConfirmationModalIcon = ({
const config = iconConfig[type];
return (
<div className='flex items-center justify-center p-2'>
<div
className={cn(
'rounded-full border-4 p-1',
config.outerRingClassName,
config.borderClassName
)}
>
<div className={cn('rounded-full p-1', config.outerRingClassName)}>
<div
className={cn(
'rounded-full p-3 flex items-center justify-center',
config.bgClassName
)}
>
<Icon
icon={config.icon}
width={size}
height={size}
className={config.iconClassName}
/>
</div>
<div
className={cn('rounded-full border p-[5px]', config.outerRingClassName)}
>
<div className={cn('rounded-full p-2', config.middleRingClassName)}>
<div
className={cn(
'rounded-full p-1 flex items-center justify-center',
config.innerRingClassName
)}
>
<Icon
icon={config.icon}
width={size}
height={size}
className={config.iconClassName}
/>
</div>
</div>
</div>
@@ -103,7 +97,7 @@ const ConfirmationModal = ({
secondaryButton,
className,
children,
iconSize = 32,
iconSize = 16,
iconPosition = 'center',
}: ConfirmationModalProps) => {
const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
@@ -123,7 +117,14 @@ const ConfirmationModal = ({
};
return (
<Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
<Modal
ref={ref}
closeOnBackdrop={closeOnBackdrop}
className={{
...className,
modalBox: cn('rounded-xl p-4', className?.modalBox),
}}
>
<div className='w-full flex flex-col gap-4'>
{iconPosition === 'center' ? (
<>
@@ -143,7 +144,7 @@ const ConfirmationModal = ({
</>
) : (
<div
className={cn('flex flex-row items-center gap-4', {
className={cn('flex flex-row items-center gap-3', {
'flex-row': iconPosition === 'left',
'flex-row-reverse': iconPosition === 'right',
})}
@@ -153,12 +154,12 @@ const ConfirmationModal = ({
</div>
<div className='flex flex-col gap-1'>
<p className='font-medium'>
<p className='text-sm font-semibold'>
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
</p>
{subtitleText && (
<p className='text-sm text-gray-400'>{subtitleText}</p>
<p className='text-xs text-base-content/50'>{subtitleText}</p>
)}
</div>
</div>
@@ -166,7 +167,7 @@ const ConfirmationModal = ({
{children && <div className='w-full'>{children}</div>}
<div className='w-full flex flex-row gap-2'>
<div className='w-full grid grid-cols-2 gap-3'>
{secondaryButton && secondaryButton.text && (
<Button
{...secondaryButton}
@@ -179,7 +180,10 @@ const ConfirmationModal = ({
: isPrimaryButtonLoading
}
onClick={closeModalHandler}
className='grow'
className={cn(
'p-2 rounded-xl text-sm',
secondaryButton?.className
)}
>
{secondaryButton?.text ?? 'Tidak'}
</Button>
@@ -200,7 +204,7 @@ const ConfirmationModal = ({
? primaryButton?.isLoading
: isPrimaryButtonLoading
}
className='grow'
className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
>
{primaryButton?.text ?? 'Ya'}
</Button>
src/components/modal/ConfirmationModalWithNotes.tsx
+2
View File
@@ -32,6 +32,7 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
className,
rows = 3,
placeholder = 'Catatan...',
...props
}) => {
const randomId = useId();
const [notes, setNotes] = useState('');
@@ -55,6 +56,7 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
}}
secondaryButton={secondaryButton}
className={className}
{...props}
>
<TextArea
name={randomId}
src/components/pages/finance/FinanceTable.tsx
+3 -1
View File
@@ -405,7 +405,9 @@ const FinanceTable = () => {
{
header: 'Bank',
accessorFn: (finance: Finance) =>
`${finance.bank?.alias} - ${finance.bank?.account_number} - ${finance.bank?.owner}`,
finance.bank
? `${finance.bank?.alias} - ${finance.bank?.account_number} - ${finance.bank?.owner}`
: '-',
},
{
header: 'Pengeluaran (Rp)',
src/components/pages/production/transfer-to-laying/TransferToLayingFilterModal.tsx
+208
View File
@@ -0,0 +1,208 @@
'use client';
import { RefObject } from 'react';
import { useFormik } from 'formik';
import { Icon } from '@iconify/react';
import Modal from '@/components/Modal';
import Button from '@/components/Button';
import DateInput from '@/components/input/DateInput';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import { OptionType, useSelect } from '@/components/input/SelectInput';
import { ProjectFlockApi } from '@/services/api/production';
import { Flock } from '@/types/api/master-data/flock';
import { TransferToLayingFilter } from '@/types/api/production/transfer-to-laying';
interface TransferToLayingFilterModal {
ref: RefObject<HTMLDialogElement | null>;
onSubmit?: (values: TransferToLayingFilter) => void;
onReset?: () => void;
}
const TransferToLayingFilterModal = ({
ref,
onSubmit,
onReset,
}: TransferToLayingFilterModal) => {
const closeModalHandler = () => {
ref.current?.close();
};
// Flock Source
const {
setInputValue: setFlockSourceInputValue,
options: flockSourceOptions,
isLoadingOptions: isLoadingFlockSourceOptions,
loadMore: loadMoreFlockSource,
} = useSelect<Flock>(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
category: 'GROWING',
});
// Flock Destination
const {
setInputValue: setFlockDestinationInputValue,
options: flockDestinationOptions,
isLoadingOptions: isLoadingFlockDestinationOptions,
loadMore: loadMoreFlockDestination,
} = useSelect<Flock>(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
category: 'LAYING',
});
const formik = useFormik<{
startDate: string;
endDate: string;
flockSource: { value: number; label: string }[];
flockDestination: { value: number; label: string }[];
status: { value: number; label: string }[];
}>({
initialValues: {
startDate: '',
endDate: '',
flockSource: [],
flockDestination: [],
status: [],
},
onSubmit: async (values) => {
const formattedValues = {
...values,
flockSource: values.flockSource.map((item) => item.value),
flockDestination: values.flockDestination.map((item) => item.value),
status: values.status.map((item) => item.value),
};
onSubmit?.(formattedValues);
closeModalHandler();
},
onReset: () => {
onReset?.();
closeModalHandler();
},
});
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldValue('flockSource', val as OptionType[]);
};
const flockDestinationChangeHandler = (
val: OptionType | OptionType[] | null
) => {
formik.setFieldValue('flockDestination', val as OptionType[]);
};
const statusChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldValue('status', val as OptionType[]);
};
return (
<Modal
ref={ref}
className={{
modalBox: 'p-0 rounded-xl',
}}
>
<form
onSubmit={formik.handleSubmit}
onReset={formik.handleReset}
className='w-full flex flex-col'
>
{/* Modal Header */}
<div className='p-4 flex items-center justify-between gap-2 border-b border-gray-300'>
<div className='flex items-center gap-2 text-primary'>
<Icon icon='heroicons:funnel' width={20} height={20} />
<h3 className='text-sm font-medium'>Filter Data</h3>
</div>
<Button
type='button'
variant='ghost'
color='none'
onClick={closeModalHandler}
className='p-0 text-base-content/50 hover:text-base-content'
>
<Icon icon='heroicons:x-mark' width={20} height={20} />
</Button>
</div>
{/* Modal Body */}
<div className='p-4 flex flex-col gap-1.5'>
<div className='flex flex-col'>
<span className='py-2 text-xs font-semibold'>Tanggal</span>
<div className='flex flex-row items-center gap-1.5'>
<DateInput
name='startDate'
placeholder='Tanggal Awal'
value={formik.values.startDate}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<hr className='w-full max-w-3 h-px border-base-content/10' />
<DateInput
name='endDate'
placeholder='Tanggal Akhir'
value={formik.values.endDate}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
</div>
<SelectInputCheckbox
label='Flock Asal'
placeholder='Flock Asal'
value={formik.values.flockSource}
onChange={flockSourceChangeHandler}
options={flockSourceOptions}
isLoading={isLoadingFlockSourceOptions}
onInputChange={setFlockSourceInputValue}
onMenuScrollToBottom={loadMoreFlockSource}
/>
<SelectInputCheckbox
label='Flock Tujuan'
placeholder='Flock Tujuan'
value={formik.values.flockDestination}
onChange={flockDestinationChangeHandler}
options={flockDestinationOptions}
isLoading={isLoadingFlockDestinationOptions}
onInputChange={setFlockDestinationInputValue}
onMenuScrollToBottom={loadMoreFlockDestination}
/>
<SelectInputCheckbox
label='Status'
placeholder='Pilih Status'
options={[
{ value: 'PENDING', label: 'Pengajuan' },
{ value: 'APPROVED', label: 'Disetujui' },
{ value: 'REJECTED', label: 'Ditolak' },
]}
value={formik.values.status}
onChange={statusChangeHandler}
/>
</div>
</div>
{/* Modal Footer */}
<div className='p-4 flex justify-between gap-4 border-t border-gray-300 bg-gray-100'>
<Button
type='reset'
variant='ghost'
color='none'
className='p-3 rounded-lg text-base-content/65'
>
Reset Filter
</Button>
<Button
type='submit'
className='p-3 rounded-lg w-fit sm:w-full max-w-40 text-base-100 text-sm'
>
Apply Filter
</Button>
</div>
</form>
</Modal>
);
};
export default TransferToLayingFilterModal;
src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
+975
View File
@@ -0,0 +1,975 @@
'use client';
import {
FormEventHandler,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import useSWR, { useSWRConfig } from 'swr';
import toast from 'react-hot-toast';
import { Icon } from '@iconify/react';
import Modal, { useModal } from '@/components/Modal';
import Button from '@/components/Button';
import DateInput from '@/components/input/DateInput';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import { OptionType, useSelect } from '@/components/input/SelectInput';
import NumberInput from '@/components/input/NumberInput';
import TextArea from '@/components/input/TextArea';
import AlertErrorList from '@/components/helper/form/FormErrors';
import { useRouter, useSearchParams } from 'next/navigation';
import { ProjectFlockApi } from '@/services/api/production';
import { getIn, useFormik } from 'formik';
import {
getFilledTransferToLayingFormInitialValues,
getTransferToLayingFormInitialValues,
TransferToLayingFormSchema,
TransferToLayingFormValues,
} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import StatusBadge from '@/components/helper/StatusBadge';
import CheckboxInput from '@/components/input/CheckboxInput';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { cn, formatNumber } from '@/lib/helper';
import {
CreateTransferToLayingPayload,
UpdateTransferToLayingPayload,
} from '@/types/api/production/transfer-to-laying';
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
const TransferToLayingFormModal = () => {
const router = useRouter();
const searchParams = useSearchParams();
const modalAction = searchParams.get('action');
const transferToLayingId = searchParams.get('id');
const { mutate } = useSWRConfig();
const refreshTransferToLayings = () => {
mutate(
(key) =>
typeof key === 'string' && key.includes(TransferToLayingApi.basePath)
);
};
const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
useSWR(transferToLayingId ? transferToLayingId : undefined, (id: number) =>
TransferToLayingApi.getSingle(id)
);
/**
* Step 1: General Information
* Step 2: Select source and destination kandang
* Step 3: Enter transfered quantity
* Step 4: Submit
*/
const [step, setStep] = useState(1);
const formModal = useModal();
const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
// Flock Source
const {
setInputValue: setFlockSourceInputValue,
options: flockSourceOptions,
isLoadingOptions: isLoadingFlockSourceOptions,
loadMore: loadMoreFlockSource,
rawData: flockSourceRawData,
} = useSelect<ProjectFlock>(
ProjectFlockApi.basePath,
'id',
'flock_name',
'search',
{
category: 'GROWING',
}
);
// Flock Destination
const {
setInputValue: setFlockDestinationInputValue,
options: flockDestinationOptions,
isLoadingOptions: isLoadingFlockDestinationOptions,
loadMore: loadMoreFlockDestination,
rawData: flockDestinationRawData,
} = useSelect<ProjectFlock>(
ProjectFlockApi.basePath,
'id',
'flock_name',
'search',
{
category: 'LAYING',
}
);
const closeModalHandler = (shouldPushToRoute: boolean = true) => {
if (shouldPushToRoute) {
router.push('/production/transfer-to-laying');
}
formik.resetForm();
setStep(1);
setFormErrorMessage('');
formModal.closeModal();
};
const createTransferToLayingHandler = useCallback(
async (payload: CreateTransferToLayingPayload) => {
const createTransferToLayingRes =
await TransferToLayingApi.create(payload);
if (isResponseError(createTransferToLayingRes)) {
setFormErrorMessage(createTransferToLayingRes.message);
return;
}
refreshTransferToLayings();
toast.success(createTransferToLayingRes?.message as string);
router.push('/production/transfer-to-laying');
closeModalHandler(false);
},
[router]
);
const updateTransferToLayingHandler = useCallback(
async (
transferToLayingId: number,
payload: UpdateTransferToLayingPayload
) => {
const updateKandangRes = await TransferToLayingApi.update(
transferToLayingId,
payload
);
if (updateKandangRes?.status === 'error') {
setFormErrorMessage(updateKandangRes.message);
return;
}
refreshTransferToLayings();
toast.success(updateKandangRes?.message as string);
router.push('/production/transfer-to-laying');
closeModalHandler(false);
},
[router]
);
const [formikInitialValues, setFormikInitialValues] = useState(
getTransferToLayingFormInitialValues()
);
const formik = useFormik<TransferToLayingFormValues>({
initialValues: formikInitialValues,
validationSchema: TransferToLayingFormSchema,
onSubmit: async (values) => {
const transferToLayingPayload: CreateTransferToLayingPayload = {
transfer_date: values.transfer_date as string,
source_project_flock_id: values.flockSource?.value as number,
target_project_flock_id: values.flockDestination?.value as number,
totalQuantity: values.totalQuantity as number,
source_kandangs: values.flockSourceKandangs?.map((kandang) => ({
project_flock_kandang_id: kandang.kandang.value,
quantity: parseFloat(kandang.quantity as string),
})) as CreateTransferToLayingPayload['source_kandangs'],
target_kandangs: values.flockDestinationKandangs?.map((kandang) => ({
project_flock_kandang_id: kandang.kandang.value,
quantity: parseFloat(kandang.quantity as string),
})) as CreateTransferToLayingPayload['target_kandangs'],
reason: values.reason as string,
};
switch (modalAction) {
case 'add':
await createTransferToLayingHandler(transferToLayingPayload);
break;
case 'edit':
await updateTransferToLayingHandler(
Number(transferToLayingId),
transferToLayingPayload
);
break;
}
},
});
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
const [selectedFlockSourceRawData, setSelectedFlockSourceRawData] = useState<
ProjectFlock | undefined
>(undefined);
const selectedFlockDestinationRawData = isResponseSuccess(
flockDestinationRawData
)
? flockDestinationRawData.data.find(
(item) => item.id === formik.values.flockDestination?.value
)
: undefined;
const {
data: flockSourceKandangsAvailability,
isLoading: isLoadingFlockSourceKandangsAvailability,
} = useSWR(
formik.values.flockSource
? [
'transfer-to-laying',
'available-qty',
String(formik.values.flockSource.value),
]
: undefined,
([, , id]: string[]) =>
TransferToLayingApi.getMappedFlockKandangsAvailability(Number(id))
);
const mappedFlockSourceKandangsAvailability: {
kandang_name: string;
available_qty: number;
project_flock_kandang_id: number;
}[] = useMemo(() => {
if (!flockSourceKandangsAvailability || !selectedFlockSourceRawData)
return [];
return selectedFlockSourceRawData
? selectedFlockSourceRawData.kandangs.map((kandang) => {
const availability =
flockSourceKandangsAvailability[kandang.project_flock_kandang_id]
.available_qty;
return {
kandang_name: kandang.name,
available_qty: availability,
project_flock_kandang_id: kandang.project_flock_kandang_id,
};
})
: [];
}, [flockSourceKandangsAvailability, selectedFlockSourceRawData]);
const mappedFlockSourceKandangsAvailabilityInfo: {
available: number;
unavailable: number;
} = useMemo(() => {
if (!mappedFlockSourceKandangsAvailability)
return { available: 0, unavailable: 0 };
let countAvailable = 0;
let countUnavailable = 0;
mappedFlockSourceKandangsAvailability.forEach((item) => {
if (item.available_qty > 0) {
countAvailable += 1;
} else {
countUnavailable += 1;
}
});
return { available: countAvailable, unavailable: countUnavailable };
}, [mappedFlockSourceKandangsAvailability]);
const mappedFlockDestinationKandangsAvailabilityInfo: {
available: number;
unavailable: number;
} = useMemo(() => {
if (!selectedFlockDestinationRawData)
return { available: 0, unavailable: 0 };
let countAvailable = 0;
let countUnavailable = 0;
selectedFlockDestinationRawData?.kandangs.forEach((item) => {
// TODO: change this to real available quota later
if (item.capacity > 0) {
countAvailable += 1;
} else {
countUnavailable += 1;
}
});
return { available: countAvailable, unavailable: countUnavailable };
}, [selectedFlockDestinationRawData]);
const totalEnteredChickenForTransfer =
formik.values.flockSourceKandangs.reduce(
(acc, item) => acc + Number(item.quantity),
0
);
const totalTransferedChicken = formik.values.flockDestinationKandangs.reduce(
(acc, item) => acc + Number(item.quantity),
0
);
const totalAvailableChickenForTransfer =
totalEnteredChickenForTransfer - totalTransferedChicken;
const isNextButtonDisabled = useMemo(() => {
if (step === 1) {
return Boolean(
!formik.values.transfer_date ||
!formik.values.flockSource ||
!formik.values.flockDestination
);
}
if (step === 2) {
return Boolean(
!formik.values.flockSourceKandangs.length ||
!formik.values.flockDestinationKandangs.length
);
}
return true;
}, [step, formik.values]);
const nextButtonHandler = () => {
setStep(step + 1);
};
const deleteEnteredKandangHandler = () => {
formik.setFieldValue('flockSourceKandangs', []);
formik.setFieldValue('flockDestinationKandangs', []);
formik.setFieldValue('totalQuantity', '');
formik.setFieldValue('maxTotalQuantity', '');
formik.setFieldValue('reason', '');
formik.setFieldTouched('reason', false);
setStep(2);
};
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldValue('flockSource', val);
formik.setFieldValue('flockSourceKandangs', []);
};
const flockDestinationChangeHandler = (
val: OptionType | OptionType[] | null
) => {
formik.setFieldValue('flockDestination', val);
formik.setFieldValue('flockDestinationKandangs', []);
};
useEffect(() => {
if (modalAction === 'add' || modalAction === 'edit') {
formModal.openModal();
}
}, [modalAction]);
useEffect(() => {
const getFilledInitialValues = async () => {
if (transferToLayingId && isResponseSuccess(transferToLaying)) {
const filledInitialValues =
await getFilledTransferToLayingFormInitialValues(
transferToLaying.data
);
formik.setValues(filledInitialValues);
setStep(3);
}
};
const getFlockSourceData = async () => {
if (transferToLayingId && isResponseSuccess(transferToLaying)) {
const singleFlockSourceRawData = await ProjectFlockApi.getSingle(
transferToLaying.data.from_project_flock.id
);
if (isResponseSuccess(singleFlockSourceRawData)) {
setSelectedFlockSourceRawData(singleFlockSourceRawData.data);
}
}
};
getFlockSourceData();
getFilledInitialValues();
}, [transferToLayingId, transferToLaying]);
useEffect(() => {
if (isResponseSuccess(flockSourceRawData)) {
const selectedFlockSourceRawData = flockSourceRawData.data.find(
(item) => item.id === formik.values.flockSource?.value
);
setSelectedFlockSourceRawData(selectedFlockSourceRawData);
}
}, [flockSourceRawData]);
useEffect(() => {
formik.setFieldValue('totalQuantity', totalTransferedChicken);
formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
}, [totalTransferedChicken]);
return (
<>
<Modal
ref={formModal.ref}
position='end'
className={{
modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
}}
>
<form
onSubmit={handleFormSubmit}
className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
>
{/* 1st Section */}
<div className='w-full sm:w-[446px]'>
<div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
<Button
type='button'
variant='ghost'
color='none'
onClick={() => closeModalHandler()}
className='p-0 text-black hover:text-base-content'
>
<Icon icon='heroicons:x-mark' width={20} height={20} />
</Button>
<div className='w-px border-none bg-base-content/10' />
<h4 className='text-sm font-medium text-base-content/50'>
Add Transfer to Laying
</h4>
</div>
<div className='w-full p-4 flex flex-col'>
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
Informasi Umum
</h4>
<DateInput
name='transfer_date'
label='Tanggal'
placeholder='Tanggal'
value={formik.values.transfer_date ?? ''}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
formik.touched.transfer_date &&
Boolean(formik.errors.transfer_date)
}
errorMessage={formik.errors.transfer_date}
disabled={step > 2}
/>
<SelectInputRadio
label='Flock Asal'
placeholder='Pilih Flock Asal'
value={formik.values.flockSource}
onChange={flockSourceChangeHandler}
options={flockSourceOptions}
isLoading={isLoadingFlockSourceOptions}
onInputChange={setFlockSourceInputValue}
onMenuScrollToBottom={loadMoreFlockSource}
isDisabled={step > 2}
/>
<SelectInputRadio
label='Flock Tujuan'
placeholder='Pilih Flock Tujuan'
value={formik.values.flockDestination}
onChange={flockDestinationChangeHandler}
options={flockDestinationOptions}
isLoading={isLoadingFlockDestinationOptions}
onInputChange={setFlockDestinationInputValue}
onMenuScrollToBottom={loadMoreFlockDestination}
isDisabled={step > 2}
/>
</div>
{step >= 2 && (
<>
<div className='w-full p-4 flex flex-col gap-3 border-y border-base-content/10'>
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
Pilih Kandang Asal
</h4>
<div className='w-fit flex flex-row items-stretch gap-3'>
<StatusBadge
color='info'
text={`Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.available})`}
className={{ badge: 'text-nowrap' }}
/>
<div className='w-px border-none bg-base-content/10' />
<StatusBadge
color='neutral'
text={`Tidak Tersedia (${mappedFlockSourceKandangsAvailabilityInfo.unavailable})`}
className={{ badge: 'text-nowrap' }}
/>
</div>
<div className='w-full rounded-xl border border-base-content/10'>
{mappedFlockSourceKandangsAvailability.map(
(item, itemIdx) => {
const isAvailable = item.available_qty > 0;
const isChecked =
formik.values.flockSourceKandangs.some(
(k) =>
k.kandang.value === item.project_flock_kandang_id
);
const flockSourceKandangCheckboxChangeHandler: FormEventHandler<
HTMLInputElement
> = (e) => {
const checked = (e.target as HTMLInputElement)
.checked;
if (checked) {
formik.setFieldValue('flockSourceKandangs', [
...formik.values.flockSourceKandangs,
{
kandang: {
value: item.project_flock_kandang_id,
label: item.kandang_name,
},
quantity: '',
maxQuantity: item.available_qty,
},
]);
} else {
formik.setFieldValue(
'flockSourceKandangs',
formik.values.flockSourceKandangs.filter(
(k) =>
k.kandang.value !==
item.project_flock_kandang_id
)
);
}
};
return (
<div
key={itemIdx}
className='w-full p-3 flex flex-row items-center justify-between'
>
<div className='flex flex-row items-center gap-3'>
<CheckboxInput
name={`flockSourceKandang.${itemIdx}.value`}
value={item.project_flock_kandang_id}
checked={isChecked}
onChange={
flockSourceKandangCheckboxChangeHandler
}
size='md'
disabled={!isAvailable}
classNames={{
checkbox: cn({
'bg-base-200 border border-base-content/10 opacity-100':
!isAvailable,
}),
}}
/>
<label
htmlFor={`flockSourceKandang.${itemIdx}.value`}
className={cn('text-sm text-base-content/50', {
'cursor-pointer': isAvailable,
'cursor-not-allowed': !isAvailable,
})}
>
{item.kandang_name}{' '}
<span className='text-base-content/20'>{`(Max: ${item.available_qty})`}</span>
</label>
</div>
<StatusBadge
color={isAvailable ? 'info' : 'neutral'}
text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
className={{ badge: 'w-fit' }}
/>
</div>
);
}
)}
</div>
</div>
<div className='w-full p-4 flex flex-col gap-3'>
<div className='flex flex-row items-center justify-between'>
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
Pilih Kandang Tujuan
</h4>
{formik.touched.flockDestinationKandangs &&
formik.errors.flockDestinationKandangs &&
typeof formik.errors.flockDestinationKandangs ===
'string' && (
<span className='text-xs text-error'>
{formik.errors.flockDestinationKandangs}
</span>
)}
</div>
<div className='w-fit flex flex-row items-stretch gap-3'>
<StatusBadge
color='info'
text={`Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.available})`}
className={{ badge: 'text-nowrap' }}
/>
<div className='w-px border-none bg-base-content/10' />
<StatusBadge
color='neutral'
text={`Tidak Tersedia (${mappedFlockDestinationKandangsAvailabilityInfo.unavailable})`}
className={{ badge: 'text-nowrap' }}
/>
</div>
<div className='w-full rounded-xl border border-base-content/10'>
{selectedFlockDestinationRawData?.kandangs.map(
(item, itemIdx) => {
// TODO: change this to real available quota later
const isAvailable = item.capacity > 0;
const isChecked =
formik.values.flockDestinationKandangs.some(
(k) =>
k.kandang.value === item.project_flock_kandang_id
);
const flockDestinationKandangCheckboxChangeHandler: FormEventHandler<
HTMLInputElement
> = (e) => {
const checked = (e.target as HTMLInputElement)
.checked;
if (checked) {
formik.setFieldValue('flockDestinationKandangs', [
...formik.values.flockDestinationKandangs,
{
kandang: {
value: item.project_flock_kandang_id,
label: item.name,
},
quantity: '',
// TODO: change this to real available quota later
maxQuantity: item.capacity,
},
]);
} else {
formik.setFieldValue(
'flockDestinationKandangs',
formik.values.flockDestinationKandangs.filter(
(k) =>
k.kandang.value !==
item.project_flock_kandang_id
)
);
}
};
return (
<div
key={itemIdx}
className='w-full p-3 flex flex-row items-center justify-between'
>
<div className='flex flex-row items-center gap-3'>
<CheckboxInput
name={`flockDestinationKandang.${itemIdx}.value`}
value={item.project_flock_kandang_id}
checked={isChecked}
onChange={
flockDestinationKandangCheckboxChangeHandler
}
size='md'
disabled={!isAvailable}
classNames={{
checkbox: cn({
'bg-base-200 border border-base-content/10 opacity-100':
!isAvailable,
}),
}}
/>
<label
htmlFor={`flockDestinationKandang.${itemIdx}.value`}
className={cn('text-sm text-base-content/50', {
'cursor-pointer': isAvailable,
'cursor-not-allowed': !isAvailable,
})}
>
{item.name}{' '}
{/* TODO: change this to real available quota later */}
<span className='text-base-content/20'>{`(Max: ${item.capacity})`}</span>
</label>
</div>
<StatusBadge
color={isAvailable ? 'info' : 'neutral'}
text={isAvailable ? 'Tersedia' : 'Tidak Tersedia'}
className={{ badge: 'w-fit' }}
/>
</div>
);
}
)}
</div>
</div>
</>
)}
<div className='w-full p-4 border-t border-base-content/10'>
{step < 3 && (
<Button
type='button'
onClick={nextButtonHandler}
disabled={isNextButtonDisabled}
className='w-full p-3 rounded-lg text-sm text-base-100'
>
Next
</Button>
)}
</div>
</div>
{/* 2nd Section */}
{step === 3 && (
<div className='w-full sm:w-[446px] border-l border-base-content/10'>
<div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
<h4 className='text-sm font-medium text-base-content/50'>
Tambah Kuantitas
</h4>
<Button
type='button'
variant='ghost'
color='none'
onClick={deleteEnteredKandangHandler}
className='p-0 text-error'
>
<Icon icon='heroicons:trash' width={20} height={20} />
</Button>
</div>
<div className='w-full p-4 flex flex-col'>
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
Informasi Kandang
</h4>
{/* Source Kandang */}
<div className='flex flex-col'>
<span className='w-full py-2 text-xs font-semibold'>
Kandang Asal
</span>
{formik.values.flockSourceKandangs.length === 0 && (
<span className='text-sm text-base-content/50 italic'>
Belum ada kandang asal yang dipilih
</span>
)}
{formik.values.flockSourceKandangs.length > 0 && (
<div className='flex flex-col gap-3'>
{formik.values.flockSourceKandangs.map((item, index) => {
const isInvalid =
item.quantity === ''
? false
: Boolean(
getIn(
formik.errors,
`flockSourceKandangs[${index}].quantity`
)
);
const errorMessage = getIn(
formik.errors,
`flockSourceKandangs[${index}].quantity`
);
return (
<NumberInput
key={`flockSourceKandangs-${item.kandang.value}-${index}`}
name={`flockSourceKandangs.${index}.quantity`}
placeholder='Masukkan Kuantitas'
value={item.quantity}
onChange={formik.handleChange}
isError={isInvalid}
errorMessage={errorMessage}
inputPrefix={
<div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
<span
title={item.kandang.label}
className='text-sm text-base-content self-center text-nowrap truncate'
>
{item.kandang.label}
</span>
<div className='w-px bg-base-content/10' />
</div>
}
className={{
inputPrefix:
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
inputPrefixSuffixWrapper: 'grid grid-cols-2',
inputWrapper: 'border-l-0 pl-5',
}}
/>
);
})}
</div>
)}
</div>
{/* Destination Kandang */}
<div className='mt-3 flex flex-col'>
<span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
<span className='text-nowrap'>Kandang Tujuan</span>
<div className='w-px h-5 bg-base-content/10' />
<StatusBadge
color={
totalAvailableChickenForTransfer < 0
? 'error'
: 'neutral'
}
text={`Sisa transfer: ${formatNumber(
totalAvailableChickenForTransfer
)} ekor`}
className={{
badge: 'text-nowrap',
}}
/>
</span>
{formik.values.flockDestinationKandangs.length === 0 && (
<span className='text-sm text-base-content/50 italic'>
Belum ada kandang tujuan yang dipilih
</span>
)}
{formik.values.flockDestinationKandangs.length > 0 && (
<div className='flex flex-col gap-3'>
{formik.values.flockDestinationKandangs.map(
(item, index) => {
const isInvalid =
item.quantity === ''
? false
: Boolean(
getIn(
formik.errors,
`flockDestinationKandangs[${index}].quantity`
)
);
const errorMessage = getIn(
formik.errors,
`flockDestinationKandangs[${index}].quantity`
);
return (
<NumberInput
key={`flockDestinationKandangs-${item.kandang.value}-${index}`}
name={`flockDestinationKandangs.${index}.quantity`}
placeholder='Masukkan Kuantitas'
value={item.quantity}
onChange={formik.handleChange}
isError={isInvalid}
errorMessage={errorMessage}
inputPrefix={
<div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
<span
title={item.kandang.label}
className='text-sm text-base-content self-center text-nowrap truncate'
>
{item.kandang.label}
</span>
<div className='w-px bg-base-content/10' />
</div>
}
className={{
inputPrefix:
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
inputPrefixSuffixWrapper: 'grid grid-cols-2',
inputWrapper: 'border-l-0 pl-5',
}}
/>
);
}
)}
</div>
)}
</div>
</div>
<div className='w-full p-4 flex flex-col border-y border-base-content/10'>
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
Informasi Umum
</h4>
<NumberInput
name='totalQuantity'
label='Jumlah Transfer'
placeholder='Total Kuantitas Transfer'
value={formik.values.totalQuantity}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={totalAvailableChickenForTransfer < 0}
errorMessage={
totalAvailableChickenForTransfer < 0
? 'Jumlah transfer melebihi ketersediaan'
: ''
}
disabled
/>
<TextArea
name='reason'
label='Catatan'
placeholder='Alasan Transfer'
rows={4}
value={formik.values.reason}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
Boolean(formik.touched.reason) &&
Boolean(formik.errors.reason)
}
errorMessage={formik.errors.reason}
/>
</div>
<div className='w-full p-4 self-end flex flex-col gap-3'>
{formErrorMessage && (
<div role='alert' className='alert alert-error w-full'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{formErrorMessage}</span>
</div>
)}
<AlertErrorList formErrorList={formErrorList} onClose={close} />
<Button
type='submit'
disabled={
formik.isSubmitting || totalAvailableChickenForTransfer < 0
}
isLoading={formik.isSubmitting}
className='w-full p-3 rounded-lg text-sm text-base-100'
>
Submit
</Button>
</div>
</div>
)}
</form>
</Modal>
</>
);
};
export default TransferToLayingFormModal;
src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+206 -216
View File
@@ -1,6 +1,6 @@
'use client';
import { ChangeEventHandler, useEffect, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import useSWR from 'swr';
import {
CellContext,
@@ -12,30 +12,28 @@ import toast from 'react-hot-toast';
import { Icon } from '@iconify/react';
import Table from '@/components/Table';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import Button from '@/components/Button';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import SelectInput, {
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import CheckboxInput from '@/components/input/CheckboxInput';
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
import RequirePermission from '@/components/helper/RequirePermission';
import DateInput from '@/components/input/DateInput';
import PopoverButton from '@/components/popover/PopoverButton';
import Badge from '@/components/Badge';
import PopoverContent from '@/components/popover/PopoverContent';
import Dropdown from '@/components/Dropdown';
import StatusBadge from '@/components/helper/StatusBadge';
import TransferToLayingFilterModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFilterModal';
import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
import {
TransferToLaying,
TransferToLayingFilter,
} from '@/types/api/production/transfer-to-laying';
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
import { cn, formatDate } from '@/lib/helper';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { Flock } from '@/types/api/master-data/flock';
import { ProjectFlockApi } from '@/services/api/production';
import Badge from '@/components/Badge';
import { Color } from '@/types/theme';
import PopoverContent from '@/components/popover/PopoverContent';
const RowOptionsMenu = ({
props,
@@ -56,8 +54,8 @@ const RowOptionsMenu = ({
const showDeleteButton = showEditButton;
const showApproveButton = showEditButton;
const showRejectButton = showEditButton;
// const showApproveButton = showEditButton;
// const showRejectButton = showEditButton;
const popoverId = `transferToLaying#${props.row.original.id}`;
const popoverAnchorName = `--anchor-transferToLaying#${props.row.original.id}`;
@@ -78,7 +76,7 @@ const RowOptionsMenu = ({
id={popoverId}
anchorName={popoverAnchorName}
position={popoverPosition === 'bottom' ? 'bottom-start' : 'left'}
className='rounded-xl border border-base-content/5 shadow-sm'
className='w-full max-w-40 rounded-xl border border-base-content/5 shadow-sm'
>
<div className='flex flex-col bg-base-100 rounded-xl'>
<RequirePermission permissions='lti.production.transfer_to_laying.detail'>
@@ -96,7 +94,7 @@ const RowOptionsMenu = ({
{showEditButton && (
<RequirePermission permissions='lti.production.transfer_to_laying.update'>
<Button
href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
href={`/production/transfer-to-laying/?action=edit&id=${props.row.original.id}`}
variant='ghost'
color='none'
className='p-3 justify-start text-sm font-semibold w-full'
@@ -107,34 +105,6 @@ const RowOptionsMenu = ({
</RequirePermission>
)}
{showApproveButton && (
<RequirePermission permissions='lti.production.transfer_to_laying.approve'>
<Button
variant='ghost'
color='success'
onClick={approveClickHandler}
className='p-3 justify-start text-sm font-semibold w-full'
>
<Icon icon='heroicons:check' width={20} height={20} />
Approve
</Button>
</RequirePermission>
)}
{showRejectButton && (
<RequirePermission permissions='lti.production.transfer_to_laying.approve'>
<Button
variant='ghost'
color='error'
onClick={rejectClickHandler}
className='p-3 justify-start text-sm font-semibold w-full'
>
<Icon icon='heroicons:x-mark' width={20} height={20} />
Reject
</Button>
</RequirePermission>
)}
{showDeleteButton && (
<RequirePermission permissions='lti.production.transfer_to_laying.delete'>
<hr className='mx-3 border-base-content/10 h-px' />
@@ -165,18 +135,22 @@ const TransferToLayingsTable = () => {
} = useTableFilter({
initial: {
search: '',
transferDate: '',
startDate: '',
endDate: '',
flockSource: '',
flockDestination: '',
status: '',
filter_by: '',
sort_by: '',
},
paramMap: {
page: 'page',
pageSize: 'limit',
transferDate: 'transfer_date',
startDate: 'start_date',
endDate: 'end_date',
flockSource: 'flock_source',
flockDestination: 'flock_destination',
status: 'status',
filter_by: 'filter_by',
sort_by: 'sort_by',
},
@@ -191,34 +165,36 @@ const TransferToLayingsTable = () => {
TransferToLayingApi.getAllFetcher
);
const filterCount = useMemo(() => {
let count = 0;
if (tableFilterState.startDate && tableFilterState.endDate) {
count += 1;
}
if (tableFilterState.flockSource.length > 0) {
count += 1;
}
if (tableFilterState.flockDestination.length > 0) {
count += 1;
}
if (tableFilterState.status.length > 0) {
count += 1;
}
return count;
}, [tableFilterState]);
const isFilterActive = filterCount > 0;
// Modal hooks
const filterModal = useModal();
const deleteModal = useModal();
const approveModal = useModal();
const rejectModal = useModal();
// Flocks data
const {
setInputValue: setFlockSourceInputValue,
options: flockSourceOptions,
isLoadingOptions: isLoadingFlockSourceOptions,
loadMore: loadMoreFlockSource,
hasMore: hasMoreFlockSource,
} = useSelect<Flock>(ProjectFlockApi.basePath, 'id', 'flock_name');
const {
setInputValue: setFlockDestinationInputValue,
options: flockDestinationOptions,
isLoadingOptions: isLoadingFlockDestinationOptions,
loadMore: loadMoreFlockDestination,
hasMore: hasMoreFlockDestination,
} = useSelect<Flock>(ProjectFlockApi.basePath, 'id', 'flock_name');
// Flocks value
const [selectedFlockSource, setSelectedFlockSource] =
useState<OptionType | null>(null);
const [selectedFlockDestination, setSelectedFlockDestination] =
useState<OptionType | null>(null);
const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
TransferToLaying | undefined
>(undefined);
@@ -315,18 +291,7 @@ const TransferToLayingsTable = () => {
latestApprovalStepName = 'Ditolak';
}
return (
<Badge
variant='soft'
className={{
badge: 'rounded-lg px-2 w-full flex flex-row justify-start',
}}
color={badgeColor}
>
<Icon icon='mdi:circle' width={12} height={12} color={badgeColor} />
{latestApprovalStepName}
</Badge>
);
return <StatusBadge color={badgeColor} text={latestApprovalStepName} />;
},
},
{
@@ -337,7 +302,7 @@ const TransferToLayingsTable = () => {
const currentRowRelativeIndex =
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
const isLast2Rows = currentRowRelativeIndex > currentPageSize - 3;
const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
const approveClickHandler = () => {
setSelectedTransferToLaying(props.row.original);
@@ -472,38 +437,25 @@ const TransferToLayingsTable = () => {
setIsRejectLoading(false);
};
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
updateFilter('search', e.target.value);
const filterSubmitHandler = (values: TransferToLayingFilter) => {
updateFilter('startDate', values.startDate);
updateFilter('endDate', values.endDate);
updateFilter('flockSource', values.flockSource.join(','));
updateFilter('flockDestination', values.flockDestination.join(','));
updateFilter('status', values.status.join(','));
};
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
const newVal = val as OptionType;
setPageSize(newVal.value as number);
const filterResetHandler = () => {
updateFilter('startDate', '');
updateFilter('endDate', '');
updateFilter('flockSource', '');
updateFilter('flockDestination', '');
updateFilter('status', '');
};
const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
e
) => {
updateFilter('transferDate', e.target.value);
};
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedFlockSource(val as OptionType);
updateFilter(
'flockSource',
val ? ((val as OptionType).value as string) : ''
);
};
const flockDestinationChangeHandler = (
val: OptionType | OptionType[] | null
) => {
setSelectedFlockDestination(val as OptionType);
updateFilter(
'flockDestination',
val ? ((val as OptionType).value as string) : ''
);
// TODO: add export to excel functionality
const exportToExcelHandler = () => {
toast.error('Not implemented yet');
};
useEffect(() => {
@@ -518,111 +470,137 @@ const TransferToLayingsTable = () => {
return (
<>
<div className='w-full p-0'>
<div className='flex flex-col gap-2 mb-4'>
<div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
<div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
<RequirePermission permissions='lti.production.transfer_to_laying.create'>
<Button
href='/production/transfer-to-laying/add'
variant='outline'
color='primary'
className='w-full sm:w-fit'
>
<Icon icon='ic:round-plus' width={24} height={24} />
Tambah
</Button>
</RequirePermission>
<div className='@container w-full'>
<div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
<div className='w-fit flex flex-row gap-3 flex-wrap'>
<RequirePermission permissions='lti.production.transfer_to_laying.create'>
<Button
href={{
pathname: '/production/transfer-to-laying',
query: {
action: 'add',
},
}}
color='primary'
className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
>
<Icon icon='heroicons:plus' width={20} height={20} />
Add Transfer to Laying
</Button>
</RequirePermission>
{selectedRowIds.length > 0 && (
<>
<RequirePermission permissions='lti.production.transfer_to_laying.approve'>
<Button
variant='outline'
color='success'
onClick={bulkApproveClickHandler}
disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon
icon='material-symbols:check'
width={24}
height={24}
/>
Approve
</Button>
</RequirePermission>
{selectedRowIds.length > 0 && (
<>
<hr className='w-px h-full border-none bg-base-content/10 hidden @sm:block' />
<RequirePermission permissions='lti.production.transfer_to_laying.approve'>
<Button
variant='outline'
color='error'
onClick={bulkRejectClickHandler}
disabled={selectedRowIds.length === 0}
className='w-full sm:w-fit'
>
<Icon
icon='material-symbols:close'
width={24}
height={24}
/>
Reject
</Button>
</RequirePermission>
</>
)}
</div>
<RequirePermission permissions='lti.production.transfer_to_laying.approve'>
<Button
variant='outline'
color='none'
onClick={bulkRejectClickHandler}
disabled={selectedRowIds.length === 0}
className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
>
<Icon
icon='heroicons:x-mark'
width={20}
height={20}
className='text-error'
/>
Reject
</Button>
</RequirePermission>
<DebouncedTextInput
name='search'
placeholder='Cari TransferToLaying'
value={tableFilterState.search}
onChange={searchChangeHandler}
className={{
wrapper: 'sm:max-w-3xs',
}}
/>
<RequirePermission permissions='lti.production.transfer_to_laying.approve'>
<Button
variant='outline'
color='none'
onClick={bulkApproveClickHandler}
disabled={selectedRowIds.length === 0}
className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
>
<Icon
icon='heroicons:check'
width={20}
height={20}
className='text-success'
/>
Approve
</Button>
</RequirePermission>
</>
)}
</div>
<div className='grid grid-cols-12 justify-end gap-4'>
<DateInput
name='transfer_date'
label='Tanggal Transfer'
placeholder='Tanggal Transfer'
value={tableFilterState.transferDate}
onChange={transferDateChangeHandler}
className={{
wrapper: 'col-span-12 sm:col-span-3',
}}
/>
<div className='flex flex-row justify-center items-center gap-3'>
<Button
variant='outline'
color='none'
onClick={filterModal.openModal}
className={cn(
'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
{
'border-primary-gradient text-primary': isFilterActive,
}
)}
>
<Icon icon='heroicons:funnel' width={20} height={20} />
Filter
{isFilterActive && (
<Badge
className={{
badge:
'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
}}
>
{filterCount}
</Badge>
)}
</Button>
<SelectInput
label='Flock Asal'
options={flockSourceOptions}
isLoading={isLoadingFlockSourceOptions}
value={selectedFlockSource}
onChange={flockSourceChangeHandler}
onInputChange={setFlockSourceInputValue}
onMenuScrollToBottom={loadMoreFlockSource}
isClearable
<Dropdown
align='end'
direction='bottom'
className={{
wrapper: 'col-span-12 sm:col-span-3',
content:
'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
}}
/>
trigger={
<Button
variant='outline'
color='none'
className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
>
<div className='flex flex-row items-center gap-1.5'>
<Icon
icon='heroicons:cloud-arrow-down'
width={20}
height={20}
/>
<SelectInput
label='Flock Tujuan'
options={flockDestinationOptions}
isLoading={isLoadingFlockDestinationOptions}
value={selectedFlockDestination}
onChange={flockDestinationChangeHandler}
onInputChange={setFlockDestinationInputValue}
onMenuScrollToBottom={loadMoreFlockDestination}
isClearable
className={{
wrapper: 'col-span-12 sm:col-span-3',
}}
/>
<span>Export</span>
<div className='w-px self-stretch bg-base-content/10' />
<Icon
icon='heroicons:chevron-down'
width={14}
height={14}
/>
</div>
</Button>
}
>
<Button
variant='ghost'
color='none'
onClick={exportToExcelHandler}
className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
>
<Icon icon='heroicons:table-cells' width={20} height={20} />
Export to Excel
</Button>
</Dropdown>
</div>
</div>
@@ -652,7 +630,7 @@ const TransferToLayingsTable = () => {
enableRowSelection={tableEnableRowSelectionHandler}
withCheckbox
className={{
containerClassName: cn({
containerClassName: cn('p-3', {
'w-full mb-20':
isResponseSuccess(transferToLayings) &&
transferToLayings?.data?.length === 0,
@@ -662,15 +640,23 @@ const TransferToLayingsTable = () => {
/>
</div>
<TransferToLayingFilterModal
ref={filterModal.ref}
onSubmit={filterSubmitHandler}
onReset={filterResetHandler}
/>
<ConfirmationModal
ref={deleteModal.ref}
iconPosition='left'
type='error'
text={`Apakah anda yakin ingin menghapus data transfer ke laying ini?`}
text='Delete This Data?'
subtitleText='Are you sure you want to delete this data? '
secondaryButton={{
text: 'Tidak',
text: 'Cancel',
}}
primaryButton={{
text: 'Ya',
text: 'Delete',
color: 'error',
isLoading: isDeleteLoading,
onClick: confirmationModalDeleteClickHandler,
@@ -680,12 +666,14 @@ const TransferToLayingsTable = () => {
<ConfirmationModalWithNotes
ref={approveModal.ref}
type='success'
text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
iconPosition='left'
text='Approve This Submission?'
subtitleText='Are you sure you want to approve this submission?'
secondaryButton={{
text: 'Tidak',
text: 'Cancel',
}}
primaryButton={{
text: 'Ya',
text: 'Approve',
color: 'success',
isLoading: isApproveLoading,
onClick: confirmationModalApproveClickHandler,
@@ -695,12 +683,14 @@ const TransferToLayingsTable = () => {
<ConfirmationModalWithNotes
ref={rejectModal.ref}
type='error'
text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
iconPosition='left'
text='Reject This Submission?'
subtitleText='Are you sure you want to reject this submission?'
secondaryButton={{
text: 'Tidak',
text: 'Cancel',
}}
primaryButton={{
text: 'Ya',
text: 'Reject',
color: 'error',
isLoading: isRejectLoading,
onClick: confirmationModalRejectClickHandler,
src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
+42 -27
View File
@@ -1,7 +1,10 @@
import * as Yup from 'yup';
import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
import { formatDate } from '@/lib/helper';
import { formatDate, formatNumber } from '@/lib/helper';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { ProjectFlockApi } from '@/services/api/production/project-flock';
import { isResponseSuccess } from '@/lib/api-helper';
type TransferToLayingFormSchemaType = {
transfer_date?: string;
@@ -14,7 +17,7 @@ type TransferToLayingFormSchemaType = {
label: string;
};
totalQuantity?: number;
totalQuantity?: number | string;
maxTotalQuantity?: number; // original cap (hidden), helper
flockSourceKandangs: {
@@ -53,15 +56,15 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
}).required('Flock tujuan wajib diisi!'),
totalQuantity: Yup.number()
.min(1, 'Jumlah transfer minimal 1')
.min(0, 'Jumlah transfer minimal 0')
.max(
Yup.ref('maxTotalQuantity'),
({ max }) => `Kuantitas maksimal ${max}!`
({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
)
.required('Jumlah transfer wajib diisi!'),
maxTotalQuantity: Yup.number()
.min(1, 'Jumlah transfer minimal 1')
.min(0, 'Jumlah transfer minimal 0')
.required('Jumlah transfer wajib diisi!'),
flockSourceKandangs: Yup.array()
@@ -76,7 +79,7 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
.min(0, 'Kuantitas minimal 0!')
.max(
Yup.ref('maxQuantity'),
({ max }) => `Kuantitas maksimal ${max}!`
({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
)
.required('Kuantitas wajib diisi!'),
@@ -98,7 +101,7 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
.min(0, 'Kuantitas minimal 0!')
.max(
Yup.ref('maxQuantity'),
({ max }) => `Kuantitas maksimal ${max}!`
({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
)
.required('Kuantitas wajib diisi!'),
@@ -137,12 +140,12 @@ export const getTransferToLayingFormInitialValues = (
}
: undefined,
totalQuantity:
initialValues?.usage_qty ?? initialValues?.pending_usage_qty ?? undefined,
initialValues?.usage_qty ?? initialValues?.pending_usage_qty ?? '',
flockSourceKandangs: initialValues?.sources
? initialValues.sources.map((sourceKandang) => ({
kandang: {
value: sourceKandang.source_project_flock_kandang.kandang.id,
value: sourceKandang.source_project_flock_kandang.id,
label: sourceKandang.source_project_flock_kandang.kandang.name,
},
quantity: sourceKandang.qty,
@@ -152,7 +155,7 @@ export const getTransferToLayingFormInitialValues = (
flockDestinationKandangs: initialValues?.targets
? initialValues.targets.map((targetKandang) => ({
kandang: {
value: targetKandang.target_project_flock_kandang.kandang.id,
value: targetKandang.target_project_flock_kandang.id,
label: targetKandang.target_project_flock_kandang.kandang.name,
},
quantity: targetKandang.qty,
@@ -174,7 +177,7 @@ export const getFilledTransferToLayingFormInitialValues = async (
const formattedFlockSourceKandangs = initialValues?.sources
? initialValues.sources.map((sourceKandang) => ({
kandang: {
value: sourceKandang.source_project_flock_kandang.kandang.id,
value: sourceKandang.source_project_flock_kandang.id,
label: sourceKandang.source_project_flock_kandang.kandang.name,
},
quantity: sourceKandang.qty,
@@ -189,9 +192,35 @@ export const getFilledTransferToLayingFormInitialValues = async (
let maxTotalQuantity = 0;
formattedFlockSourceKandangs.forEach((item) => {
maxTotalQuantity += item.maxQuantity;
maxTotalQuantity += item.quantity;
});
const flockDestination = await ProjectFlockApi.getSingle(
initialValues?.to_project_flock.id as number
);
const formattedFlockDestinationKandangs = initialValues?.targets
? initialValues.targets.map((targetKandang) => {
const kandang = isResponseSuccess(flockDestination)
? flockDestination?.data?.kandangs.find(
(kandang) =>
String(kandang.project_flock_kandang_id) ===
String(targetKandang.target_project_flock_kandang.id)
)
: undefined;
return {
kandang: {
value: targetKandang.target_project_flock_kandang.id,
label: targetKandang.target_project_flock_kandang.kandang.name,
},
quantity: targetKandang.qty,
maxQuantity: kandang?.capacity ?? 0,
};
})
: [];
return {
transfer_date: initialValues?.transfer_date
? formatDate(initialValues.transfer_date, 'YYYY-MM-DD')
@@ -214,21 +243,7 @@ export const getFilledTransferToLayingFormInitialValues = async (
flockSourceKandangs: formattedFlockSourceKandangs,
flockDestinationKandangs: initialValues?.targets
? initialValues.targets.map((targetKandang) => ({
kandang: {
value: targetKandang.target_project_flock_kandang.kandang.id,
label: targetKandang.target_project_flock_kandang.kandang.name,
},
quantity: targetKandang.qty,
// maxQuantity:
// targetKandang.target_project_flock_kandang.kandang.capacity,
// TODO: integrate this to real API kandang capacity
maxQuantity: Infinity,
}))
: [],
flockDestinationKandangs: formattedFlockDestinationKandangs,
reason: initialValues?.notes ?? undefined,
};
src/lib/helper.ts
+31
View File
@@ -2,6 +2,7 @@ import moment from 'moment';
import 'moment/locale/id';
import { twMerge } from 'tailwind-merge';
import clsx, { ClassValue } from 'clsx';
import { SidebarMenuItem } from '@/components/molecules/SidebarMenu';
// set locale globally
moment.locale('id');
@@ -147,3 +148,33 @@ export const isPathActive = (pathname: string, link?: string) => {
return pathname.startsWith(link) && isActiveLinkValid;
};
export function findMenuPath(
menus: readonly SidebarMenuItem[],
pathname: string,
parents: SidebarMenuItem[] = []
): SidebarMenuItem[] | null {
for (const menu of menus) {
const currentPath = [...parents, menu];
// Exact match
if (menu.link === pathname) {
return currentPath;
}
// Prefix match (useful for pages like /add, /edit, etc.)
if (pathname.startsWith(menu.link + '/')) {
if (!menu.submenu) {
return currentPath;
}
}
// Search children
if (menu.submenu) {
const found = findMenuPath(menu.submenu, pathname, currentPath);
if (found) return found;
}
}
return null;
}
src/styles/tailwind.css
+19
View File
@@ -0,0 +1,19 @@
@layer utilities {
.border-primary-gradient {
border: 1px solid transparent;
border-radius: 12px;
background:
linear-gradient(
180deg,
var(--color-primary) -250%,
var(--color-base-100) 100%
),
linear-gradient(
to bottom,
var(--color-primary),
color-mix(in srgb, var(--color-primary) 40%, transparent)
);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
}
}
src/types/api/production/transfer-to-laying.d.ts
Vendored
+8
View File
@@ -89,3 +89,11 @@ export type CreateTransferToLayingPayload = {
};
export type UpdateTransferToLayingPayload = CreateTransferToLayingPayload;
export type TransferToLayingFilter = {
flockSource: number[];
flockDestination: number[];
status: number[];
startDate: string;
endDate: string;
};