mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 05:22:02 +00:00
Merge branch 'dev/restu' into 'feat/FE/US-35/stock-transfer'
[FEAT/FE][US#35/TASK#61-62-63-64-65] Create Feature Transfer Stock See merge request mbugroup/lti-web-client!14
This commit is contained in:
Rivaldi A N S
+15
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"jsxSingleQuote": true,
|
||||
"endOfLine": "lf",
|
||||
"arrowParens": "always",
|
||||
"bracketSpacing": true,
|
||||
"embeddedLanguageFormatting": "auto",
|
||||
"htmlWhitespaceSensitivity": "css",
|
||||
"printWidth": 80,
|
||||
"proseWrap": "preserve",
|
||||
"quoteProps": "as-needed",
|
||||
"semi": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
@import 'tailwindcss';
|
||||
@plugin "daisyui";
|
||||
@import '../styles/daisyui.css';
|
||||
|
||||
:root {
|
||||
--color-primary: #1f74bf;
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import InventoryAdjustmentForm from "@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm";
|
||||
|
||||
const CreateInventoryAdjustment = () => {
|
||||
return (
|
||||
<section className="w-full p-4 flex flex-row justify-center">
|
||||
<InventoryAdjustmentForm/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateInventoryAdjustment;
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import InventoryAdjustmentForm from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm';
|
||||
import type { InventoryAdjustment } from '@/types/api/inventory/adjustment';
|
||||
|
||||
const DetailInventoryAdjustment = () => {
|
||||
const router = useRouter();
|
||||
const [inventoryAdjustment, setInventoryAdjustment] = useState<InventoryAdjustment | null>(null);
|
||||
|
||||
// Ambil data dari router state
|
||||
useEffect(() => {
|
||||
console.log("Router State");
|
||||
console.log(window.history.state);
|
||||
const state = window.history.state?.usr as
|
||||
| { inventoryAdjustment?: InventoryAdjustment }
|
||||
| undefined;
|
||||
|
||||
if (state?.inventoryAdjustment) {
|
||||
// jika object dikirim via router.push(state)
|
||||
setInventoryAdjustment(state.inventoryAdjustment);
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const finalData = inventoryAdjustment;
|
||||
|
||||
console.log("Final Data");
|
||||
console.log(finalData);
|
||||
|
||||
if (!finalData) {
|
||||
return (
|
||||
<div className="w-full flex flex-row justify-center items-center p-4">
|
||||
<span className="loading loading-spinner loading-xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="w-full p-4 flex flex-row justify-center">
|
||||
<InventoryAdjustmentForm initialValues={finalData} />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailInventoryAdjustment;
|
||||
@@ -0,0 +1,11 @@
|
||||
import InventoryAdjustmentTable from '@/components/pages/inventory/adjustment/InventoryAdjustmentTable';
|
||||
|
||||
const InventoryAdjustment = () => {
|
||||
return (
|
||||
<section className='w-full p-4'>
|
||||
<InventoryAdjustmentTable />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryAdjustment;
|
||||
@@ -1,7 +1,5 @@
|
||||
import react from 'react';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
@@ -10,6 +8,8 @@ interface ButtonProps extends react.ComponentProps<'button'> {
|
||||
color?: Color;
|
||||
href?: string;
|
||||
isLoading?: boolean;
|
||||
target?: string;
|
||||
rel?: string;
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
@@ -22,6 +22,8 @@ const Button = ({
|
||||
className,
|
||||
disabled,
|
||||
onClick,
|
||||
target,
|
||||
rel,
|
||||
...props
|
||||
}: ButtonProps) => {
|
||||
const btnBaseClassName = cn(
|
||||
@@ -68,6 +70,8 @@ const Button = ({
|
||||
{href && (
|
||||
<Link
|
||||
href={disabled ? '#' : href}
|
||||
target={target}
|
||||
rel={rel}
|
||||
aria-disabled={disabled}
|
||||
className={cn(
|
||||
btnBaseClassName,
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
interface TooltipProps {
|
||||
children?: ReactNode;
|
||||
content?: ReactNode;
|
||||
className?: {
|
||||
wrapper?: string;
|
||||
content?: string;
|
||||
};
|
||||
open?: boolean;
|
||||
color?: Color;
|
||||
position?: 'top' | 'bottom' | 'left' | 'right';
|
||||
}
|
||||
|
||||
const Tooltip = ({
|
||||
children,
|
||||
content,
|
||||
className,
|
||||
open,
|
||||
color,
|
||||
position,
|
||||
}: TooltipProps) => {
|
||||
const tooltipBaseClassName = cn('tooltip', {
|
||||
'tooltip-open': typeof open === 'boolean' && open,
|
||||
|
||||
'tooltip-top': position === 'top',
|
||||
'tooltip-bottom': position === 'bottom',
|
||||
'tooltip-left': position === 'left',
|
||||
'tooltip-right': position === 'right',
|
||||
|
||||
'tooltip-primary': color === 'primary',
|
||||
'tooltip-secondary': color === 'secondary',
|
||||
'tooltip-accent': color === 'accent',
|
||||
'tooltip-neutral': color === 'neutral',
|
||||
'tooltip-info': color === 'info',
|
||||
'tooltip-success': color === 'success',
|
||||
'tooltip-warning': color === 'warning',
|
||||
'tooltip-error': color === 'error',
|
||||
});
|
||||
return (
|
||||
<div className={cn(tooltipBaseClassName, className?.wrapper)}>
|
||||
<div
|
||||
className={cn(
|
||||
'tooltip-content',
|
||||
'max-w-60 sm:max-w-xs',
|
||||
className?.content
|
||||
)}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
@@ -8,6 +8,7 @@ interface FormActionsProps<T> {
|
||||
formik: FormikContextType<T>;
|
||||
editUrl?: string;
|
||||
onDelete?: () => void;
|
||||
disableSubmit?: boolean;
|
||||
}
|
||||
|
||||
export const FormActions = <T,>({
|
||||
@@ -15,6 +16,7 @@ export const FormActions = <T,>({
|
||||
formik,
|
||||
editUrl,
|
||||
onDelete,
|
||||
disableSubmit = false,
|
||||
}: FormActionsProps<T>) => {
|
||||
return (
|
||||
<div className='flex flex-row justify-between gap-2 flex-wrap'>
|
||||
@@ -62,7 +64,10 @@ export const FormActions = <T,>({
|
||||
type='reset'
|
||||
color='warning'
|
||||
className='px-4'
|
||||
onClick={formik.handleReset}
|
||||
onClick={() => {
|
||||
formik.handleReset();
|
||||
formik.validateForm();
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
@@ -71,7 +76,7 @@ export const FormActions = <T,>({
|
||||
color='primary'
|
||||
className='px-4'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
disabled={disableSubmit || !formik.isValid || formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEventHandler, ReactNode } from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export interface RadioOption {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface RadioInputProps {
|
||||
label?: string;
|
||||
bottomLabel?: string;
|
||||
name: string;
|
||||
value?: string;
|
||||
options: RadioOption[];
|
||||
variant?: string;
|
||||
className?: {
|
||||
wrapper?: string;
|
||||
label?: string;
|
||||
radioWrapper?: string;
|
||||
radio?: string;
|
||||
};
|
||||
isError?: boolean;
|
||||
isValid?: boolean;
|
||||
errorMessage?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
startAdornment?: ReactNode;
|
||||
endAdornment?: ReactNode;
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
const RadioInput = ({
|
||||
label,
|
||||
bottomLabel,
|
||||
name,
|
||||
value,
|
||||
options,
|
||||
variant = 'radio-primary',
|
||||
className,
|
||||
isError,
|
||||
errorMessage,
|
||||
required = false,
|
||||
disabled = false,
|
||||
onChange,
|
||||
onBlur,
|
||||
}: RadioInputProps) => {
|
||||
return (
|
||||
<div className={cn('w-full flex flex-col gap-2', className?.wrapper)}>
|
||||
{/* Label atas */}
|
||||
{label && (
|
||||
<label
|
||||
className={cn(
|
||||
'w-full text-sm font-normal leading-5',
|
||||
{ 'text-error': isError },
|
||||
className?.label
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
{required && (
|
||||
<span className='text-error ml-1' title='required'>
|
||||
*
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
)}
|
||||
|
||||
{/* Daftar opsi radio */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-row flex-wrap gap-4 items-center',
|
||||
className?.radioWrapper
|
||||
)}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<label
|
||||
key={option.value}
|
||||
className={cn(
|
||||
'flex flex-row items-center gap-2 cursor-pointer',
|
||||
disabled && 'opacity-60 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type='radio'
|
||||
name={name}
|
||||
value={option.value}
|
||||
checked={value === option.value}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
disabled={disabled}
|
||||
className={cn('radio', variant, className?.radio)}
|
||||
/>
|
||||
<span className='text-sm'>{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Label bawah */}
|
||||
{!isError && bottomLabel && (
|
||||
<p className='text-sm opacity-60'>{bottomLabel}</p>
|
||||
)}
|
||||
|
||||
{/* Pesan error */}
|
||||
{isError && errorMessage && (
|
||||
<p className='text-sm text-error'>{errorMessage}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RadioInput;
|
||||
@@ -1,28 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
|
||||
import Select, { OptionProps, GroupBase, InputActionMeta } from 'react-select';
|
||||
import {
|
||||
ComponentType,
|
||||
ReactNode,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import Select, {
|
||||
OptionProps,
|
||||
GroupBase,
|
||||
InputActionMeta,
|
||||
MultiValue,
|
||||
SingleValue,
|
||||
} from 'react-select';
|
||||
import CreatableSelect from 'react-select/creatable';
|
||||
import makeAnimated from 'react-select/animated';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
export interface OptionType {
|
||||
value: string | number;
|
||||
label: string;
|
||||
className?: string; // for multi select
|
||||
labelClassName?: string; // for multi select
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
}
|
||||
|
||||
export type OptionComponent<T = OptionType> = ComponentType<
|
||||
OptionProps<T, boolean, GroupBase<T>>
|
||||
>;
|
||||
|
||||
interface SelectInputProps<T = OptionType> {
|
||||
interface SelectInputBaseProps<T = OptionType> {
|
||||
label?: ReactNode;
|
||||
bottomLabel?: ReactNode;
|
||||
value?: T | T[];
|
||||
onChange?: (val: T | T[] | null) => void;
|
||||
options: T[];
|
||||
optionComponent?: OptionComponent<T>;
|
||||
isDisabled?: boolean;
|
||||
@@ -46,9 +56,16 @@ interface SelectInputProps<T = OptionType> {
|
||||
onInputChange?: (search: string) => void;
|
||||
}
|
||||
|
||||
interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
|
||||
createables?: boolean;
|
||||
value?: T | T[] | null;
|
||||
onChange?: (val: T | T[] | null) => void;
|
||||
}
|
||||
|
||||
const animatedComponents = makeAnimated();
|
||||
|
||||
const SelectInput = <T extends OptionType>({
|
||||
const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
|
||||
const {
|
||||
label,
|
||||
bottomLabel,
|
||||
value,
|
||||
@@ -69,29 +86,48 @@ const SelectInput = <T extends OptionType>({
|
||||
isAnimated = true,
|
||||
openMenu,
|
||||
delay = 300,
|
||||
createables = false,
|
||||
onInputChange,
|
||||
}: SelectInputProps) => {
|
||||
const [internalInputValue, setInternalInputValue] = useState('');
|
||||
} = props;
|
||||
|
||||
const [debouncedInputValue] = useDebounce(internalInputValue, delay ?? 300);
|
||||
const [internalInputValue, setInternalInputValue] = useState('');
|
||||
const [debouncedInputValue] = useDebounce(internalInputValue, delay);
|
||||
|
||||
const components = useMemo(() => {
|
||||
const base = isAnimated ? animatedComponents : {};
|
||||
|
||||
return {
|
||||
...base,
|
||||
IndicatorSeparator: () => null,
|
||||
};
|
||||
return { ...base, IndicatorSeparator: () => null };
|
||||
}, [isAnimated]);
|
||||
|
||||
const internalInputChangeHandler = (value: string, meta: InputActionMeta) => {
|
||||
if (meta.action === 'input-change') setInternalInputValue(value);
|
||||
const internalInputChangeHandler = (
|
||||
val: string,
|
||||
meta: InputActionMeta
|
||||
) => {
|
||||
if (meta.action === 'input-change') setInternalInputValue(val);
|
||||
if (meta.action === 'menu-close') setInternalInputValue('');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
onInputChange?.(debouncedInputValue);
|
||||
}, [debouncedInputValue]);
|
||||
}, [onInputChange, debouncedInputValue]);
|
||||
|
||||
const SelectComponent = createables ? CreatableSelect : Select;
|
||||
|
||||
/** 🎯 handleChange tanpa any */
|
||||
const handleChange = (
|
||||
val: MultiValue<T> | SingleValue<T>
|
||||
): void => {
|
||||
if (!val) {
|
||||
onChange?.(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isMulti) {
|
||||
onChange?.(val as T[]);
|
||||
} else {
|
||||
onChange?.(val as T);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -103,28 +139,23 @@ const SelectInput = <T extends OptionType>({
|
||||
<span
|
||||
className={cn(
|
||||
'w-full text-sm font-normal leading-5',
|
||||
{
|
||||
'text-error': isError,
|
||||
},
|
||||
{ 'text-error': isError },
|
||||
className?.label
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
{required && (
|
||||
<>
|
||||
{' '}
|
||||
<span className='tooltip tooltip-error' data-tip='required'>
|
||||
<span className='text-error'> *</span>
|
||||
<span className="tooltip tooltip-error" data-tip="required">
|
||||
<span className="text-error"> *</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<Select
|
||||
instanceId='select'
|
||||
value={value}
|
||||
onChange={(val) => onChange?.(val as T)}
|
||||
<SelectComponent<T, boolean, GroupBase<T>>
|
||||
instanceId="select"
|
||||
value={value ?? (isMulti ? [] : null)}
|
||||
onChange={handleChange}
|
||||
options={options}
|
||||
menuIsOpen={openMenu}
|
||||
inputValue={internalInputValue}
|
||||
@@ -136,14 +167,13 @@ const SelectInput = <T extends OptionType>({
|
||||
isRtl={isRtl}
|
||||
isSearchable={isSearchable}
|
||||
placeholder={placeholder}
|
||||
className={cn('w-full', className)}
|
||||
className={cn('w-full', className?.select)}
|
||||
classNames={{
|
||||
control: ({ isFocused, isDisabled }) =>
|
||||
cn(
|
||||
'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
|
||||
{
|
||||
'border-red-500! focus-within:border-red-500 focus-within:ring-2 focus-within:ring-red-200':
|
||||
isError,
|
||||
'border-red-500! ring-2 ring-red-200': isError,
|
||||
'border-indigo-500 ring-2 ring-indigo-200': isFocused,
|
||||
'border-gray-300': !isError && !isFocused,
|
||||
'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
|
||||
@@ -156,8 +186,6 @@ const SelectInput = <T extends OptionType>({
|
||||
cn({ 'text-gray-900': !isError, 'text-error!': isError }),
|
||||
input: () => cn('text-gray-900'),
|
||||
indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
|
||||
indicatorSeparator: () => cn('mx-1 h-4 w-px bg-gray-200'),
|
||||
clearIndicator: () => cn('p-1 rounded-md hover:bg-gray-100'),
|
||||
dropdownIndicator: ({ isFocused }) =>
|
||||
cn('p-1 rounded-md hover:bg-gray-100', {
|
||||
'text-gray-900': isFocused,
|
||||
@@ -165,55 +193,41 @@ const SelectInput = <T extends OptionType>({
|
||||
'text-error!': isError,
|
||||
}),
|
||||
menu: () =>
|
||||
cn(
|
||||
'border border-gray-200 rounded-lg bg-white shadow-lg rounded-lg!'
|
||||
),
|
||||
cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
|
||||
menuList: () => cn('p-2! max-h-60 overflow-auto'),
|
||||
groupHeading: () =>
|
||||
cn('ml-2 mt-2 mb-1 text-xs font-medium text-gray-500'),
|
||||
option: ({ isFocused, isSelected, isDisabled }) =>
|
||||
cn('mt-1 px-3 py-2 rounded-md cursor-pointer! select-none', {
|
||||
'text-gray-300': isDisabled,
|
||||
option: ({ isFocused, isSelected }) =>
|
||||
cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
|
||||
'bg-indigo-600 text-white': isFocused,
|
||||
'text-gray-700': !isDisabled && !isFocused,
|
||||
'active:bg-indigo-50': !isDisabled,
|
||||
'bg-blue-500!': isSelected,
|
||||
'text-gray-700': !isFocused && !isSelected,
|
||||
}),
|
||||
noOptionsMessage: () => cn('px-3 py-2 text-gray-500'),
|
||||
loadingMessage: () => cn('px-3 py-2 text-gray-500'),
|
||||
multiValue: ({ getValue, index }) => {
|
||||
const selectedValues = getValue();
|
||||
|
||||
const selectedValues = getValue() as T[];
|
||||
return cn(
|
||||
'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1 rounded-md!',
|
||||
'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
|
||||
selectedValues[index]?.className
|
||||
);
|
||||
},
|
||||
multiValueLabel: ({ getValue, index }) => {
|
||||
const selectedValues = getValue();
|
||||
|
||||
const selectedValues = getValue() as T[];
|
||||
return cn('text-indigo-700', selectedValues[index]?.labelClassName);
|
||||
},
|
||||
multiValueRemove: () =>
|
||||
cn('p-1 rounded-sm! hover:bg-indigo-100 hover:text-indigo-800'),
|
||||
}}
|
||||
components={{
|
||||
...components,
|
||||
...(optionComponent ? { Option: optionComponent } : {}),
|
||||
}}
|
||||
// make the menu float above modals/etc.
|
||||
menuPortalTarget={
|
||||
typeof document !== 'undefined' ? document.body : undefined
|
||||
}
|
||||
styles={{
|
||||
// Tailwind can't set inline z-index on a portal; use styles here:
|
||||
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
||||
}}
|
||||
/>
|
||||
|
||||
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
|
||||
{isError && <p className="w-full text-sm text-error">{errorMessage}</p>}
|
||||
{!isError && bottomLabel && (
|
||||
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
|
||||
<p className="w-full text-sm opacity-60">{bottomLabel}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -31,7 +31,7 @@ export interface TextAreaProps {
|
||||
endAdornment?: ReactNode;
|
||||
onChange?: ChangeEventHandler<HTMLTextAreaElement>;
|
||||
onBlur?: FocusEventHandler<HTMLTextAreaElement>;
|
||||
cols?: number;
|
||||
rows?: number;
|
||||
}
|
||||
|
||||
const TextArea = ({
|
||||
@@ -52,7 +52,7 @@ const TextArea = ({
|
||||
onBlur,
|
||||
readOnly = false,
|
||||
isLoading = false,
|
||||
cols = 3
|
||||
rows = 3
|
||||
}: TextAreaProps) => {
|
||||
return (
|
||||
<div
|
||||
@@ -87,7 +87,7 @@ const TextArea = ({
|
||||
|
||||
<textarea
|
||||
className={cn(
|
||||
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
|
||||
'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
|
||||
{
|
||||
'border-error': isError,
|
||||
'border-success!': isValid,
|
||||
@@ -98,7 +98,7 @@ const TextArea = ({
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
cols={cols}
|
||||
rows={rows}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
disabled={disabled}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Icon } from '@iconify/react';
|
||||
import Steps from '@/components/steps/Steps';
|
||||
import StepItem from '@/components/steps/StepItem';
|
||||
import Tooltip from '@/components/Tooltip';
|
||||
|
||||
import { formatDate } from '@/lib/helper';
|
||||
import { ApprovalsLine } from '@/types/api/api-general';
|
||||
|
||||
interface ApprovalStepsProps {
|
||||
approvals: ApprovalsLine;
|
||||
}
|
||||
|
||||
const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
|
||||
return (
|
||||
<Steps direction='vertical' className='w-full md:steps-horizontal'>
|
||||
{approvals.map((approval, idx) => {
|
||||
const stepItemColor =
|
||||
approval.status === 'approved'
|
||||
? 'success'
|
||||
: approval.status === 'rejected'
|
||||
? 'error'
|
||||
: undefined;
|
||||
|
||||
const stepItemIcon =
|
||||
approval.status === 'approved'
|
||||
? 'material-symbols:check-rounded'
|
||||
: approval.status === 'rejected'
|
||||
? 'material-symbols:close-rounded'
|
||||
: 'bxs:hourglass';
|
||||
|
||||
return (
|
||||
<StepItem
|
||||
key={idx}
|
||||
color={stepItemColor}
|
||||
icon={
|
||||
approval.status !== 'waiting' && (
|
||||
<Tooltip
|
||||
color={stepItemColor}
|
||||
position='right'
|
||||
className={{
|
||||
wrapper: 'md:tooltip-bottom',
|
||||
}}
|
||||
content={
|
||||
<div className='flex flex-col text-base'>
|
||||
<span>{formatDate(approval.date, 'YYYY-MM-DD')}</span>
|
||||
<span>Oleh: {approval.action_by}</span>
|
||||
<span>Catatan: {approval.notes}</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon icon={stepItemIcon} width={24} height={24} />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
>
|
||||
{approval.role}
|
||||
</StepItem>
|
||||
);
|
||||
})}
|
||||
</Steps>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApprovalSteps;
|
||||
@@ -0,0 +1,263 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import Table from '@/components/Table';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { inventoryAdjustmentApi } from '@/services/api/inventory';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
|
||||
import { Icon } from '@iconify/react';
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnSort,
|
||||
SortingState,
|
||||
} from '@tanstack/react-table';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const InventoryAdjustmentTable = () => {
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
} = useTableFilter({
|
||||
initial: {
|
||||
search: '',
|
||||
productCategorySort: '',
|
||||
productSort: '',
|
||||
warehouseSort: '',
|
||||
stockSort: '',
|
||||
},
|
||||
paramMap: {
|
||||
page: 'page',
|
||||
pageSize: 'limit',
|
||||
productCategorySort: 'sort_product_category',
|
||||
productSort: 'sort_product',
|
||||
warehouseSort: 'sort_warehouse',
|
||||
stockSort: 'sort_stock',
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch Data
|
||||
const {
|
||||
data: inventoryAdjustments,
|
||||
isLoading,
|
||||
} = useSWR(
|
||||
`${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
|
||||
inventoryAdjustmentApi.getAllFetcher
|
||||
);
|
||||
|
||||
// State
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
|
||||
// Columns
|
||||
const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = [
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
id: 'product_name',
|
||||
header: 'Nama Produk',
|
||||
accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
|
||||
},
|
||||
{
|
||||
id: 'warehouse_name',
|
||||
header: 'Gudang',
|
||||
accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
|
||||
},
|
||||
{
|
||||
id: 'created_at',
|
||||
header: 'Tanggal',
|
||||
accessorFn: (row) =>
|
||||
new Date(row.created_at).toLocaleDateString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'before_quantity',
|
||||
header: 'Stok Sebelum',
|
||||
accessorFn: (row) => formatNumber(String(row.before_quantity)),
|
||||
},
|
||||
{
|
||||
id: 'after_quantity',
|
||||
header: 'Stok Sesudah',
|
||||
accessorFn: (row) => formatNumber(String(row.after_quantity)),
|
||||
},
|
||||
{
|
||||
id: 'quantity',
|
||||
header: 'Kuantitas',
|
||||
accessorFn: (row) => formatNumber(String(row.quantity)),
|
||||
},
|
||||
{
|
||||
id: 'transaction_type',
|
||||
header: 'Tipe Transaksi',
|
||||
accessorFn: (row) => {
|
||||
if (row.transaction_type === 'INCREASE') return 'Peningkatan';
|
||||
if (row.transaction_type === 'DECREASE') return 'Penurunan';
|
||||
return '-';
|
||||
},
|
||||
cell: (props) => {
|
||||
const type = props.row.original.transaction_type;
|
||||
const label =
|
||||
type === 'INCREASE'
|
||||
? 'Peningkatan'
|
||||
: type === 'DECREASE'
|
||||
? 'Penurunan'
|
||||
: '-';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`small mx-auto badge badge-soft ${
|
||||
type === 'INCREASE' ? 'badge-success' : 'badge-error'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'created_by',
|
||||
header: 'Oleh',
|
||||
accessorFn: (row) => row.created_user?.name ?? '-',
|
||||
},
|
||||
];
|
||||
|
||||
// Handler
|
||||
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const newVal = val as OptionType;
|
||||
setPageSize(newVal.value as number);
|
||||
};
|
||||
|
||||
const updateSortingFilter = useCallback(
|
||||
(
|
||||
sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
|
||||
sortFilter: ColumnSort | undefined
|
||||
) => {
|
||||
if (!sortFilter) {
|
||||
updateFilter(sortName, '');
|
||||
} else {
|
||||
updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
|
||||
}
|
||||
},
|
||||
[updateFilter]
|
||||
);
|
||||
|
||||
// Effect
|
||||
useEffect(() => {
|
||||
const productCategorySortFilter = sorting.find(
|
||||
(sortItem) => sortItem.id === 'productCategory'
|
||||
);
|
||||
const productSortFilter = sorting.find(
|
||||
(sortItem) => sortItem.id === 'product'
|
||||
);
|
||||
const warehouseSortFilter = sorting.find(
|
||||
(sortItem) => sortItem.id === 'warehouse'
|
||||
);
|
||||
const stockSortFilter = sorting.find((sortItem) => sortItem.id === 'stock');
|
||||
|
||||
updateSortingFilter('productCategorySort', productCategorySortFilter);
|
||||
updateSortingFilter('productSort', productSortFilter);
|
||||
updateSortingFilter('warehouseSort', warehouseSortFilter);
|
||||
updateSortingFilter('stockSort', stockSortFilter);
|
||||
}, [sorting, updateSortingFilter]);
|
||||
|
||||
// Utils Function
|
||||
const formatNumber = (value: string) => {
|
||||
const numericValue = value.replace(/[^0-9.]/g, '');
|
||||
const [integer, decimal] = numericValue.split('.');
|
||||
const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
|
||||
};
|
||||
|
||||
// Render
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-4'>
|
||||
<div className='flex flex-col gap-2 mb-4'>
|
||||
<div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
|
||||
<div className='flex flex-row'>
|
||||
<Button href='/inventory/adjustment/add' color='primary'>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah
|
||||
</Button>
|
||||
|
||||
{/* <DebouncedTextInput
|
||||
name='search'
|
||||
placeholder='Cari Stock Adjustment'
|
||||
value={tableFilterState.search}
|
||||
onChange={searchChangeHandler}
|
||||
className={{ wrapper: 'sm:max-w-3xs' }}
|
||||
/> */}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row justify-end'>
|
||||
<SelectInput
|
||||
label='Baris'
|
||||
options={ROWS_OPTIONS}
|
||||
value={{
|
||||
label: String(tableFilterState.pageSize),
|
||||
value: tableFilterState.pageSize,
|
||||
}}
|
||||
onChange={pageSizeChangeHandler}
|
||||
className={{ wrapper: 'max-w-28' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table<InventoryAdjustment>
|
||||
data={
|
||||
isResponseSuccess(inventoryAdjustments)
|
||||
? inventoryAdjustments?.data
|
||||
: []
|
||||
}
|
||||
columns={inventoryAdjustmentsColumns}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
page={
|
||||
isResponseSuccess(inventoryAdjustments)
|
||||
? inventoryAdjustments?.meta?.page
|
||||
: 0
|
||||
}
|
||||
totalItems={
|
||||
isResponseSuccess(inventoryAdjustments)
|
||||
? inventoryAdjustments?.meta?.total_results
|
||||
: 0
|
||||
}
|
||||
onPageChange={setPage}
|
||||
isLoading={isLoading}
|
||||
sorting={sorting}
|
||||
setSorting={setSorting}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(inventoryAdjustments) &&
|
||||
inventoryAdjustments?.data?.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',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryAdjustmentTable;
|
||||
@@ -0,0 +1,43 @@
|
||||
import * as Yup from 'yup';
|
||||
|
||||
export const InventoryAdjustmentFormSchema = Yup.object({
|
||||
product_category: Yup.object({
|
||||
value: Yup.number().required('ID Kategori Produk wajib diisi!'),
|
||||
label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
|
||||
})
|
||||
.nullable(),
|
||||
|
||||
product_category_id: Yup.number().nullable(),
|
||||
|
||||
product: Yup.object({
|
||||
value: Yup.number().required('ID Produk wajib diisi!'),
|
||||
label: Yup.string().required('Nama Produk wajib diisi!'),
|
||||
})
|
||||
.nullable(),
|
||||
|
||||
product_id: Yup.number().nullable(),
|
||||
|
||||
warehouse: Yup.object({
|
||||
value: Yup.number().required('ID Gudang wajib diisi!'),
|
||||
label: Yup.string().required('Nama Gudang wajib diisi!'),
|
||||
})
|
||||
.nullable(),
|
||||
|
||||
warehouse_id: Yup.number().nullable(),
|
||||
|
||||
transaction_type: Yup.string()
|
||||
.oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
|
||||
.nullable()
|
||||
.required('Tipe transaksi wajib diisi'),
|
||||
|
||||
quantity: Yup.number()
|
||||
.typeError('Kuantitas harus berupa angka')
|
||||
.min(1, 'Minimal kuantitas adalah 1')
|
||||
.required('Kuantitas wajib diisi'),
|
||||
|
||||
note: Yup.string().required('Catatan wajib diisi!'),
|
||||
});
|
||||
|
||||
export type InventoryAdjustmentFormValues = Yup.InferType<
|
||||
typeof InventoryAdjustmentFormSchema
|
||||
>;
|
||||
@@ -0,0 +1,447 @@
|
||||
'use client';
|
||||
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { inventoryAdjustmentApi } from '@/services/api/inventory';
|
||||
import {
|
||||
CreateInventoryAdjustmentPayload,
|
||||
InventoryAdjustment,
|
||||
} from '@/types/api/inventory/adjustment';
|
||||
import { useFormik } from 'formik';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import {
|
||||
InventoryAdjustmentFormSchema,
|
||||
InventoryAdjustmentFormValues,
|
||||
} from './InventoryAdjustmentForm.schema';
|
||||
import useSWR from 'swr';
|
||||
import {
|
||||
ProductApi,
|
||||
ProductCategoryApi,
|
||||
WarehouseApi,
|
||||
} from '@/services/api/master-data';
|
||||
import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import RadioInput from '@/components/input/RadioInput';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
|
||||
interface InventoryAdjustmentFormProps {
|
||||
type?: 'add' | 'edit' | 'detail';
|
||||
initialValues?: InventoryAdjustment;
|
||||
}
|
||||
|
||||
const InventoryAdjustmentForm = ({
|
||||
type = 'add',
|
||||
initialValues,
|
||||
}: InventoryAdjustmentFormProps) => {
|
||||
// State
|
||||
const router = useRouter();
|
||||
const [
|
||||
InventoryAdjustmentFormErrorMessage,
|
||||
setInventoryAdjustmentFormErrorMessage,
|
||||
] = useState('');
|
||||
const [selectedProductCategories, setSelectedProductCategories] =
|
||||
useState('');
|
||||
const [disabledProduct, setDisabledProduct] = useState(true);
|
||||
const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
|
||||
const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
|
||||
|
||||
// Submit Handler
|
||||
const createInventoryAdjustmentHandler = useCallback(
|
||||
async (payload: CreateInventoryAdjustmentPayload) => {
|
||||
const createInventoryAdjustmentRes = await inventoryAdjustmentApi.create(
|
||||
payload
|
||||
);
|
||||
|
||||
if (isResponseError(createInventoryAdjustmentRes)) {
|
||||
setInventoryAdjustmentFormErrorMessage(
|
||||
createInventoryAdjustmentRes.message
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(createInventoryAdjustmentRes?.message as string);
|
||||
router.push('/inventory/adjustment');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
|
||||
return {
|
||||
product_category_id: initialValues?.product_category?.id ?? 0,
|
||||
product_id: initialValues?.product?.id ?? 0,
|
||||
warehouse_id: initialValues?.warehouse?.id ?? 0,
|
||||
product_category: undefined,
|
||||
product: undefined,
|
||||
warehouse: undefined,
|
||||
quantity: initialValues?.quantity ?? 0,
|
||||
transaction_type: undefined,
|
||||
note: initialValues?.note ?? '',
|
||||
};
|
||||
}, [initialValues]);
|
||||
|
||||
// Formik
|
||||
const formik = useFormik<InventoryAdjustmentFormValues>({
|
||||
enableReinitialize: true,
|
||||
initialValues: formikInitialValues as InventoryAdjustmentFormValues,
|
||||
validationSchema: InventoryAdjustmentFormSchema,
|
||||
onSubmit: async (values) => {
|
||||
setInventoryAdjustmentFormErrorMessage('');
|
||||
const payload: CreateInventoryAdjustmentPayload = {
|
||||
product_id: values.product_id as number,
|
||||
warehouse_id: values.warehouse_id as number,
|
||||
quantity: values.quantity as number,
|
||||
transaction_type: values.transaction_type as string,
|
||||
note: values.note,
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case 'add':
|
||||
await createInventoryAdjustmentHandler(payload);
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch Data
|
||||
const productCategoriesUrl = `${
|
||||
ProductCategoryApi.basePath
|
||||
}?${new URLSearchParams({
|
||||
search: '',
|
||||
}).toString()}`;
|
||||
const { data: productCategories, isLoading: isLoadingProductCategories } =
|
||||
useSWR(productCategoriesUrl, ProductCategoryApi.getAllFetcher);
|
||||
|
||||
const productUrl = `${ProductApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
product_category_id: selectedProductCategories,
|
||||
}).toString()}`;
|
||||
const { data: products, isLoading: isLoadingProducts } = useSWR(
|
||||
productUrl,
|
||||
ProductApi.getAllFetcher
|
||||
);
|
||||
|
||||
const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
}).toString()}`;
|
||||
const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
|
||||
warehouseUrl,
|
||||
WarehouseApi.getAllFetcher
|
||||
);
|
||||
|
||||
// Map Data to Options
|
||||
const optionsProductCategory = isResponseSuccess(productCategories)
|
||||
? productCategories?.data.map((productCategory) => ({
|
||||
value: productCategory.id,
|
||||
label: productCategory.name,
|
||||
}))
|
||||
: [];
|
||||
const optionsWarehouse = isResponseSuccess(warehouses)
|
||||
? warehouses?.data.map((warehouse) => ({
|
||||
value: warehouse.id,
|
||||
label: warehouse.name,
|
||||
}))
|
||||
: [];
|
||||
|
||||
// Options Handler
|
||||
const productCategoryChangeHandler = (
|
||||
val: OptionType | OptionType[] | null
|
||||
) => {
|
||||
formik.setFieldTouched('product_category_id', true);
|
||||
formik.setFieldValue('product_category_id', (val as OptionType)?.value);
|
||||
|
||||
formik.setFieldValue('product_category', val);
|
||||
|
||||
setSelectedProductCategories((val as OptionType)?.value as string);
|
||||
const disabled = (val as OptionType)?.value == null;
|
||||
setDisabledProduct(disabled);
|
||||
formik.setFieldValue('product_id', 0);
|
||||
formik.setFieldValue('product', null);
|
||||
formik.setFieldTouched('product', false);
|
||||
formik.setFieldTouched('product_id', false);
|
||||
};
|
||||
|
||||
const productChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('product', val);
|
||||
|
||||
formik.setFieldTouched('product_id', true);
|
||||
formik.setFieldValue('product_id', (val as OptionType)?.value);
|
||||
};
|
||||
|
||||
const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('warehouse', val);
|
||||
|
||||
formik.setFieldTouched('warehouse_id', true);
|
||||
formik.setFieldValue('warehouse_id', (val as OptionType)?.value);
|
||||
};
|
||||
|
||||
const resetHandler = () => {
|
||||
formik.resetForm();
|
||||
setQuantityLabel('Tambah Stok');
|
||||
productCategoryChangeHandler(null);
|
||||
productChangeHandler(null);
|
||||
warehouseChangeHandler(null);
|
||||
};
|
||||
|
||||
|
||||
const { setValues: formikSetValues } = formik;
|
||||
|
||||
// Effect
|
||||
useEffect(() => {
|
||||
if (initialValues?.product_warehouse?.product?.id) {
|
||||
setSelectedProductCategories(
|
||||
String(initialValues.product_warehouse.product.id)
|
||||
);
|
||||
setDisabledProduct(false);
|
||||
formik.setFieldValue(
|
||||
'product_id',
|
||||
initialValues.product_warehouse.product.id
|
||||
);
|
||||
formik.setFieldValue('product', {
|
||||
value: initialValues.product_warehouse.product.id,
|
||||
label: initialValues.product_warehouse.product.name,
|
||||
});
|
||||
formik.setFieldValue(
|
||||
'warehouse_id',
|
||||
initialValues.product_warehouse.warehouse.id
|
||||
);
|
||||
formik.setFieldValue('warehouse', {
|
||||
value: initialValues.product_warehouse.warehouse.id,
|
||||
label: initialValues.product_warehouse.warehouse.name,
|
||||
});
|
||||
formik.setFieldValue(
|
||||
'quantity',
|
||||
initialValues.product_warehouse.quantity
|
||||
);
|
||||
formik.setFieldValue(
|
||||
'transaction_type',
|
||||
initialValues.transaction_type.toLowerCase()
|
||||
);
|
||||
formik.setFieldValue('note', initialValues.note);
|
||||
}
|
||||
if (initialValues?.transaction_type) {
|
||||
const type = initialValues.transaction_type.toLowerCase();
|
||||
setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
|
||||
}
|
||||
}, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
|
||||
useEffect(() => {
|
||||
formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
|
||||
}, [formikSetValues, formikInitialValues]);
|
||||
useEffect(() => {
|
||||
if (isResponseSuccess(products)) {
|
||||
const options = products.data.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
}));
|
||||
setOptionsProduct(options);
|
||||
}
|
||||
}, [products]);
|
||||
|
||||
// Utils Function
|
||||
const formatNumber = (value: string) => {
|
||||
const numericValue = value.replace(/[^0-9.]/g, '');
|
||||
const [integer, decimal] = numericValue.split('.');
|
||||
const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
|
||||
};
|
||||
|
||||
// Render
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-xl'>
|
||||
<header className='flex flex-col gap-4'>
|
||||
<Button
|
||||
href='/inventory/adjustment'
|
||||
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-bold text-center'>
|
||||
{type === 'add' && 'Tambah Penyesuaian Persediaan'}
|
||||
{type === 'detail' && 'Detail Penyesuaian Persediaan'}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
onReset={formik.handleReset}
|
||||
className='w-full mt-8 flex flex-col gap-6'
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
{/* Text Input Before Quantity */}
|
||||
{type === 'detail' && initialValues && (
|
||||
<>
|
||||
<TextInput
|
||||
label='Stok Sebelum'
|
||||
name='before_quantity'
|
||||
type='text'
|
||||
value={formatNumber(String(initialValues.before_quantity))}
|
||||
readOnly={true}
|
||||
/>
|
||||
<TextInput
|
||||
label='Stok Setelah'
|
||||
name='after_quantity'
|
||||
type='text'
|
||||
readOnly={true}
|
||||
value={formatNumber(String(initialValues.after_quantity))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Select Input Product Category */}
|
||||
<SelectInput
|
||||
required
|
||||
label='Kategori Produk'
|
||||
value={formik.values.product_category as OptionType}
|
||||
onChange={productCategoryChangeHandler}
|
||||
onInputChange={setSelectedProductCategories}
|
||||
options={optionsProductCategory}
|
||||
isLoading={isLoadingProductCategories}
|
||||
isError={
|
||||
formik.touched.product_category &&
|
||||
Boolean(formik.errors.product_category)
|
||||
}
|
||||
errorMessage={formik.errors.product_category as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
|
||||
{/* Select Input Product */}
|
||||
<SelectInput
|
||||
required
|
||||
label='Produk'
|
||||
value={formik.values.product as OptionType}
|
||||
onChange={productChangeHandler}
|
||||
options={optionsProduct}
|
||||
isLoading={isLoadingProducts}
|
||||
isError={formik.touched.product && Boolean(formik.errors.product)}
|
||||
errorMessage={formik.errors.product as string}
|
||||
isDisabled={type === 'detail' || disabledProduct}
|
||||
isClearable
|
||||
/>
|
||||
|
||||
{/* Select Input Warehouse */}
|
||||
<SelectInput
|
||||
required
|
||||
label='Warehouse'
|
||||
value={formik.values.warehouse as OptionType}
|
||||
onChange={warehouseChangeHandler}
|
||||
options={optionsWarehouse}
|
||||
isLoading={isLoadingWarehouses}
|
||||
isError={
|
||||
formik.touched.warehouse && Boolean(formik.errors.warehouse)
|
||||
}
|
||||
errorMessage={formik.errors.warehouse as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
|
||||
{/* Radio Button Flag Stock */}
|
||||
<RadioInput
|
||||
name='transaction_type'
|
||||
label='Tipe Transaksi'
|
||||
options={[
|
||||
{ label: 'Tambah', value: 'increase' },
|
||||
{ label: 'Kurang', value: 'decrease' },
|
||||
]}
|
||||
value={formik.values.transaction_type}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setQuantityLabel(
|
||||
e.target.value === 'increase' ? 'Tambah Stok' : 'Kurangi Stok'
|
||||
);
|
||||
}}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.transaction_type &&
|
||||
Boolean(formik.errors.transaction_type)
|
||||
}
|
||||
errorMessage={formik.errors.transaction_type as string}
|
||||
variant='radio-primary'
|
||||
required
|
||||
bottomLabel={formik.values.transaction_type == undefined ? 'Pilih salah satu tipe transaksi' : undefined}
|
||||
disabled={type === 'detail'}
|
||||
/>
|
||||
|
||||
{/* Number Input Stock */}
|
||||
<TextInput
|
||||
className={{
|
||||
wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
|
||||
}}
|
||||
required
|
||||
label={quantityLabel}
|
||||
name='quantity'
|
||||
type='text'
|
||||
value={formatNumber(String(formik.values.quantity))}
|
||||
onChange={(e) => {
|
||||
const rawValue = e.target.value.replace(/,/g, '');
|
||||
const numericValue = parseFloat(rawValue);
|
||||
if (!isNaN(numericValue)) {
|
||||
formik.setFieldValue('quantity', numericValue);
|
||||
} else {
|
||||
formik.setFieldValue('quantity', 0);
|
||||
}
|
||||
}}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.quantity && Boolean(formik.errors.quantity)
|
||||
}
|
||||
errorMessage={formik.errors.quantity as string}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
{/* Text Area Input Reason */}
|
||||
<TextArea
|
||||
required
|
||||
label='Alasan'
|
||||
name='note'
|
||||
value={formik.values.note as string}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.note && Boolean(formik.errors.note)}
|
||||
errorMessage={formik.errors.note as string}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row justify-between gap-2 flex-wrap'>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex flex-row justify-end gap-2'>
|
||||
<Button type='button' color='warning' className='px-4' onClick={resetHandler}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
color='primary'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
|
||||
className='px-4'
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{InventoryAdjustmentFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{InventoryAdjustmentFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryAdjustmentForm;
|
||||
@@ -1,449 +1,144 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { SortingState } from '@tanstack/react-table';
|
||||
|
||||
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 } from '@/components/input/SelectInput';
|
||||
import { Movement } from '@/types/api/inventory/movement';
|
||||
import { MovementApi } from '@/services/api/inventory';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
import { TableToolbar } from '@/components/table/TableToolbar';
|
||||
import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
|
||||
import { OptionType } from '@/components/input/SelectInput';
|
||||
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
|
||||
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
import { Movement } from '@/types/api/inventory/movement';
|
||||
import { BaseMetadata } from '@/types/api/api-general';
|
||||
|
||||
// Dummy data
|
||||
const baseMetadata: BaseMetadata = {
|
||||
created_user: {
|
||||
id: 1,
|
||||
id_user: 1,
|
||||
email: 'user@example.com',
|
||||
name: 'User',
|
||||
},
|
||||
created_at: '2024-06-01T00:00:00Z',
|
||||
updated_at: '2024-06-01T00:00:00Z',
|
||||
};
|
||||
|
||||
const dummyMovements: Movement[] = [
|
||||
{
|
||||
...baseMetadata,
|
||||
id: 1,
|
||||
alasan_transfer: 'Restock',
|
||||
tanggal_transfer: '2024-06-01',
|
||||
warehouse_asal: {
|
||||
...baseMetadata,
|
||||
id: 1,
|
||||
name: 'Warehouse A',
|
||||
type: 'AREA',
|
||||
area: { id: 1, name: 'Area 1' },
|
||||
},
|
||||
warehouse_tujuan: {
|
||||
...baseMetadata,
|
||||
id: 2,
|
||||
name: 'Warehouse B',
|
||||
type: 'AREA',
|
||||
area: { id: 2, name: 'Area 2' },
|
||||
},
|
||||
product: [
|
||||
{
|
||||
product: {
|
||||
...baseMetadata,
|
||||
id: 1,
|
||||
name: 'Product X',
|
||||
brand: 'Brand X',
|
||||
sku: 'SKU-X',
|
||||
product_price: 10000,
|
||||
selling_price: 12000,
|
||||
tax: 10,
|
||||
expiry_period: 365,
|
||||
uom: {
|
||||
...baseMetadata,
|
||||
id: 1,
|
||||
name: 'PCS',
|
||||
},
|
||||
product_category: {
|
||||
...baseMetadata,
|
||||
id: 1,
|
||||
code: 'CAT-1',
|
||||
name: 'Category 1',
|
||||
},
|
||||
suppliers: [],
|
||||
flags: [],
|
||||
},
|
||||
qty_product: 10,
|
||||
},
|
||||
],
|
||||
ekspedisi: [
|
||||
{
|
||||
product_id: 1,
|
||||
qty: 10,
|
||||
supplier: {
|
||||
...baseMetadata,
|
||||
id: 1,
|
||||
name: 'Supplier 1',
|
||||
alias: 'S1',
|
||||
category: 'General',
|
||||
pic: 'PIC 1',
|
||||
type: 'Type 1',
|
||||
hatchery: 'Hatchery 1',
|
||||
phone: '08123456789',
|
||||
email: 'supplier1@example.com',
|
||||
address: 'Address 1',
|
||||
npwp: '1234567890123456',
|
||||
account_number: '1234567890',
|
||||
balance: 0,
|
||||
due_date: 30,
|
||||
},
|
||||
plat_nomor: 'B 1234 CD',
|
||||
no_surat_jalan: 'SJ-001',
|
||||
dokumen: 'doc1.pdf',
|
||||
biaya_ekspedisi: 50000,
|
||||
nama_sopir: 'Andi',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
...baseMetadata,
|
||||
id: 2,
|
||||
alasan_transfer: 'Mutasi Stok',
|
||||
tanggal_transfer: '2024-06-02',
|
||||
warehouse_asal: {
|
||||
...baseMetadata,
|
||||
id: 2,
|
||||
name: 'Warehouse B',
|
||||
type: 'AREA',
|
||||
area: { id: 2, name: 'Area 2' },
|
||||
},
|
||||
warehouse_tujuan: {
|
||||
...baseMetadata,
|
||||
id: 3,
|
||||
name: 'Warehouse C',
|
||||
type: 'AREA',
|
||||
area: { id: 3, name: 'Area 3' },
|
||||
},
|
||||
product: [
|
||||
{
|
||||
product: {
|
||||
...baseMetadata,
|
||||
id: 2,
|
||||
name: 'Product Y',
|
||||
brand: 'Brand Y',
|
||||
sku: 'SKU-Y',
|
||||
product_price: 20000,
|
||||
selling_price: 25000,
|
||||
tax: 5,
|
||||
expiry_period: 180,
|
||||
uom: {
|
||||
...baseMetadata,
|
||||
id: 2,
|
||||
name: 'BOX',
|
||||
},
|
||||
product_category: {
|
||||
...baseMetadata,
|
||||
id: 2,
|
||||
code: 'CAT-2',
|
||||
name: 'Category 2',
|
||||
},
|
||||
suppliers: [],
|
||||
flags: [],
|
||||
},
|
||||
qty_product: 5,
|
||||
},
|
||||
],
|
||||
ekspedisi: [
|
||||
{
|
||||
product_id: 2,
|
||||
qty: 5,
|
||||
supplier: {
|
||||
...baseMetadata,
|
||||
id: 2,
|
||||
name: 'Supplier 2',
|
||||
alias: 'S2',
|
||||
category: 'Special',
|
||||
pic: 'PIC 2',
|
||||
type: 'Type 2',
|
||||
hatchery: 'Hatchery 2',
|
||||
phone: '08123456780',
|
||||
email: 'supplier2@example.com',
|
||||
address: 'Address 2',
|
||||
npwp: '1234567890123457',
|
||||
account_number: '1234567891',
|
||||
balance: 1000,
|
||||
due_date: 15,
|
||||
},
|
||||
plat_nomor: 'D 5678 EF',
|
||||
no_surat_jalan: 'SJ-002',
|
||||
dokumen: 'doc2.pdf',
|
||||
biaya_ekspedisi: 60000,
|
||||
nama_sopir: 'Budi',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
...baseMetadata,
|
||||
id: 3,
|
||||
alasan_transfer: 'Pengembalian',
|
||||
tanggal_transfer: '2024-06-03',
|
||||
warehouse_asal: {
|
||||
...baseMetadata,
|
||||
id: 3,
|
||||
name: 'Warehouse C',
|
||||
type: 'AREA',
|
||||
area: { id: 3, name: 'Area 3' },
|
||||
},
|
||||
warehouse_tujuan: {
|
||||
...baseMetadata,
|
||||
id: 1,
|
||||
name: 'Warehouse A',
|
||||
type: 'AREA',
|
||||
area: { id: 1, name: 'Area 1' },
|
||||
},
|
||||
product: [
|
||||
{
|
||||
product: {
|
||||
...baseMetadata,
|
||||
id: 3,
|
||||
name: 'Product Z',
|
||||
brand: 'Brand Z',
|
||||
sku: 'SKU-Z',
|
||||
product_price: 15000,
|
||||
selling_price: 18000,
|
||||
tax: 8,
|
||||
expiry_period: 90,
|
||||
uom: {
|
||||
...baseMetadata,
|
||||
id: 3,
|
||||
name: 'KG',
|
||||
},
|
||||
product_category: {
|
||||
...baseMetadata,
|
||||
id: 3,
|
||||
code: 'CAT-3',
|
||||
name: 'Category 3',
|
||||
},
|
||||
suppliers: [],
|
||||
flags: [],
|
||||
},
|
||||
qty_product: 8,
|
||||
},
|
||||
],
|
||||
ekspedisi: [
|
||||
{
|
||||
product_id: 3,
|
||||
qty: 8,
|
||||
supplier: {
|
||||
...baseMetadata,
|
||||
id: 3,
|
||||
name: 'Supplier 3',
|
||||
alias: 'S3',
|
||||
category: 'Return',
|
||||
pic: 'PIC 3',
|
||||
type: 'Type 3',
|
||||
hatchery: 'Hatchery 3',
|
||||
phone: '08123456781',
|
||||
email: 'supplier3@example.com',
|
||||
address: 'Address 3',
|
||||
npwp: '1234567890123458',
|
||||
account_number: '1234567892',
|
||||
balance: 500,
|
||||
due_date: 10,
|
||||
},
|
||||
plat_nomor: 'F 9101 GH',
|
||||
no_surat_jalan: 'SJ-003',
|
||||
dokumen: 'doc3.pdf',
|
||||
biaya_ekspedisi: 40000,
|
||||
nama_sopir: 'Cici',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
...baseMetadata,
|
||||
id: 4,
|
||||
alasan_transfer: 'Transfer Internal',
|
||||
tanggal_transfer: '2024-06-04',
|
||||
warehouse_asal: {
|
||||
...baseMetadata,
|
||||
id: 4,
|
||||
name: 'Warehouse D',
|
||||
type: 'AREA',
|
||||
area: { id: 4, name: 'Area 4' },
|
||||
},
|
||||
warehouse_tujuan: {
|
||||
...baseMetadata,
|
||||
id: 5,
|
||||
name: 'Warehouse E',
|
||||
type: 'AREA',
|
||||
area: { id: 5, name: 'Area 5' },
|
||||
},
|
||||
product: [
|
||||
{
|
||||
product: {
|
||||
...baseMetadata,
|
||||
id: 4,
|
||||
name: 'Product A',
|
||||
brand: 'Brand A',
|
||||
sku: 'SKU-A',
|
||||
product_price: 5000,
|
||||
selling_price: 7000,
|
||||
tax: 0,
|
||||
expiry_period: 60,
|
||||
uom: {
|
||||
...baseMetadata,
|
||||
id: 4,
|
||||
name: 'LITER',
|
||||
},
|
||||
product_category: {
|
||||
...baseMetadata,
|
||||
id: 4,
|
||||
code: 'CAT-4',
|
||||
name: 'Category 4',
|
||||
},
|
||||
suppliers: [],
|
||||
flags: [],
|
||||
},
|
||||
qty_product: 20,
|
||||
},
|
||||
],
|
||||
ekspedisi: [
|
||||
{
|
||||
product_id: 4,
|
||||
qty: 20,
|
||||
supplier: {
|
||||
...baseMetadata,
|
||||
id: 4,
|
||||
name: 'Supplier 4',
|
||||
alias: 'S4',
|
||||
category: 'Internal',
|
||||
pic: 'PIC 4',
|
||||
type: 'Type 4',
|
||||
hatchery: 'Hatchery 4',
|
||||
phone: '08123456782',
|
||||
email: 'supplier4@example.com',
|
||||
address: 'Address 4',
|
||||
npwp: '1234567890123459',
|
||||
account_number: '1234567893',
|
||||
balance: 200,
|
||||
due_date: 20,
|
||||
},
|
||||
plat_nomor: 'H 2345 IJ',
|
||||
no_surat_jalan: 'SJ-004',
|
||||
dokumen: 'doc4.pdf',
|
||||
biaya_ekspedisi: 30000,
|
||||
nama_sopir: 'Dedi',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const RowOptionsMenu = ({
|
||||
type = 'dropdown',
|
||||
props,
|
||||
deleteClickHandler,
|
||||
}: {
|
||||
type: 'dropdown' | 'collapse';
|
||||
props: CellContext<Movement, unknown>;
|
||||
deleteClickHandler: () => void;
|
||||
}) => (
|
||||
<div
|
||||
tabIndex={type === 'dropdown' ? 0 : undefined}
|
||||
className={cn(
|
||||
{
|
||||
'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'
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
href={`/inventory/movement/detail/?movementId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='primary'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:eye-outline' width={16} height={16} />
|
||||
Detail
|
||||
</Button>
|
||||
<Button
|
||||
href={`/inventory/movement/detail/edit/?movementId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='warning'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='material-symbols:edit-outline' width={16} height={16} />
|
||||
Edit
|
||||
</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>
|
||||
);
|
||||
import { TableRowOptions } from '@/components/table/TableRowOptions';
|
||||
|
||||
const MovementTable = () => {
|
||||
const [search, setSearch] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
} = useTableFilter({
|
||||
initial: { search: '' },
|
||||
paramMap: { page: 'page', pageSize: 'limit' },
|
||||
});
|
||||
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [selectedMovement, setSelectedMovement] = useState<
|
||||
Movement | undefined
|
||||
>(undefined);
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const paginatedData = useMemo(() => {
|
||||
const start = (page - 1) * pageSize;
|
||||
return dummyMovements.slice(start, start + pageSize);
|
||||
}, [page, pageSize]);
|
||||
const deleteModal = useModal();
|
||||
|
||||
const movementsColumns: ColumnDef<Movement>[] = [
|
||||
const {
|
||||
data: movements,
|
||||
isLoading,
|
||||
mutate: refreshMovements,
|
||||
} = useSWR(
|
||||
`${MovementApi.basePath}${getTableFilterQueryString()}`,
|
||||
MovementApi.getAllFetcher
|
||||
);
|
||||
|
||||
const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
updateFilter('search', e.target.value);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const newVal = val as OptionType;
|
||||
setPageSize(newVal.value as number);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const confirmationModalDeleteClickHandler = async () => {
|
||||
setIsDeleteLoading(true);
|
||||
try {
|
||||
await MovementApi.delete(selectedMovement?.id as number);
|
||||
refreshMovements();
|
||||
deleteModal.closeModal();
|
||||
} finally {
|
||||
setIsDeleteLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-col gap-2 mb-4'>
|
||||
<TableToolbar
|
||||
addButton={{
|
||||
href: '/inventory/movement/add',
|
||||
label: 'Tambah Movement',
|
||||
}}
|
||||
search={{
|
||||
value: tableFilterState.search,
|
||||
onChange: searchChangeHandler,
|
||||
placeholder: 'Cari Movement',
|
||||
}}
|
||||
/>
|
||||
<TableRowSizeSelector
|
||||
value={tableFilterState.pageSize}
|
||||
onChange={pageSizeChangeHandler}
|
||||
options={ROWS_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table<Movement>
|
||||
data={isResponseSuccess(movements) ? movements?.data : []}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) => pageSize * (page - 1) + props.row.index + 1,
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
accessorKey: 'warehouse_asal',
|
||||
accessorFn: (row) => row.source_warehouse?.name,
|
||||
header: 'Gudang Asal',
|
||||
cell: (props) => props.row.original.warehouse_asal.name,
|
||||
},
|
||||
{
|
||||
accessorKey: 'warehouse_tujuan',
|
||||
accessorFn: (row) => row.destination_warehouse?.name,
|
||||
header: 'Gudang Tujuan',
|
||||
cell: (props) => props.row.original.warehouse_tujuan.name,
|
||||
},
|
||||
{
|
||||
accessorKey: 'product',
|
||||
header: 'Nama Produk',
|
||||
cell: (props) => props.row.original.product.map((p) => p.product.name),
|
||||
},
|
||||
{
|
||||
accessorKey: 'alasan_transfer',
|
||||
accessorKey: 'transfer_reason',
|
||||
header: 'Catatan',
|
||||
},
|
||||
{
|
||||
accessorKey: 'biaya_ekspedisi',
|
||||
header: 'Biaya Ekspedisi',
|
||||
accessorKey: 'transfer_date',
|
||||
header: 'Tanggal',
|
||||
cell: (props) =>
|
||||
props.row.original.ekspedisi.map((e) => e.biaya_ekspedisi),
|
||||
new Date(props.row.original.transfer_date).toLocaleDateString(
|
||||
'id-ID'
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => {
|
||||
const totalCost = row.deliveries?.reduce(
|
||||
(sum, d) => sum + (d.shipping_cost_total || 0),
|
||||
0
|
||||
);
|
||||
return totalCost?.toLocaleString('id-ID');
|
||||
},
|
||||
header: 'Biaya Pengiriman',
|
||||
},
|
||||
{
|
||||
header: 'Aksi',
|
||||
cell: (props) => {
|
||||
const currentPageSize = props.table.getPaginationRowModel().rows.length;
|
||||
const currentPageRows = props.table.getPaginationRowModel().flatRows;
|
||||
const currentPageSize =
|
||||
props.table.getPaginationRowModel().rows.length;
|
||||
const currentPageRows =
|
||||
props.table.getPaginationRowModel().flatRows;
|
||||
const currentRowRelativeIndex =
|
||||
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
|
||||
|
||||
@@ -458,19 +153,26 @@ const MovementTable = () => {
|
||||
<>
|
||||
{currentPageSize > 2 && (
|
||||
<RowDropdownOptions isLast2Rows={isLast2Rows}>
|
||||
<RowOptionsMenu
|
||||
<TableRowOptions
|
||||
type='dropdown'
|
||||
props={props}
|
||||
deleteClickHandler={deleteClickHandler}
|
||||
recordId={props.row.original.id}
|
||||
basePath='/inventory/movement'
|
||||
queryParam='movementId'
|
||||
showEdit={false}
|
||||
showDelete={false}
|
||||
/>
|
||||
</RowDropdownOptions>
|
||||
)}
|
||||
|
||||
{currentPageSize <= 2 && (
|
||||
<RowCollapseOptions>
|
||||
<RowOptionsMenu
|
||||
type='dropdown'
|
||||
props={props}
|
||||
deleteClickHandler={deleteClickHandler}
|
||||
<TableRowOptions
|
||||
type='collapse'
|
||||
recordId={props.row.original.id}
|
||||
basePath='/inventory/movement'
|
||||
queryParam='movementId'
|
||||
showEdit={false}
|
||||
showDelete={false}
|
||||
/>
|
||||
</RowCollapseOptions>
|
||||
)}
|
||||
@@ -478,75 +180,20 @@ const MovementTable = () => {
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const deleteModal = useModal();
|
||||
const confirmationModalDeleteClickHandler = async () => {
|
||||
setIsDeleteLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsDeleteLoading(false);
|
||||
deleteModal.closeModal();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const searchChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (
|
||||
e
|
||||
) => {
|
||||
setSearch(e.target.value);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const newVal = val as OptionType;
|
||||
setPageSize(newVal.value as number);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-4'>
|
||||
<div className='flex flex-col gap-2 mb-4'>
|
||||
<div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
|
||||
<div className='flex flex-row'>
|
||||
<Button href='/inventory/movement/add' color='primary'>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Movement
|
||||
</Button>
|
||||
</div>
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
placeholder='Cari Movement'
|
||||
value={search}
|
||||
onChange={searchChangeHandler}
|
||||
className={{ wrapper: 'sm:max-w-3xs' }}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row justify-end'>
|
||||
<SelectInput
|
||||
label='Baris'
|
||||
options={ROWS_OPTIONS}
|
||||
value={{
|
||||
label: String(pageSize),
|
||||
value: pageSize,
|
||||
}}
|
||||
onChange={pageSizeChangeHandler}
|
||||
className={{ wrapper: 'max-w-28' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Table<Movement>
|
||||
data={paginatedData}
|
||||
columns={movementsColumns}
|
||||
pageSize={pageSize}
|
||||
page={page}
|
||||
totalItems={dummyMovements.length}
|
||||
]}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
|
||||
totalItems={
|
||||
isResponseSuccess(movements) ? movements?.meta?.total_results : 0
|
||||
}
|
||||
onPageChange={setPage}
|
||||
isLoading={false}
|
||||
isLoading={isLoading}
|
||||
sorting={sorting}
|
||||
setSorting={setSorting}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': paginatedData.length === 0,
|
||||
'mb-20':
|
||||
isResponseSuccess(movements) && movements?.data?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
@@ -558,11 +205,11 @@ const MovementTable = () => {
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data Movement ini (ID: ${selectedMovement?.id})?`}
|
||||
text={`Apakah anda yakin ingin menghapus data Movement ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
@@ -573,7 +220,7 @@ const MovementTable = () => {
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -7,27 +7,29 @@ export type ProductSchema = {
|
||||
label: string;
|
||||
} | null;
|
||||
product_id: number;
|
||||
qty_product: number;
|
||||
product_qty: number;
|
||||
};
|
||||
|
||||
export type EkspedisiSchema = {
|
||||
product: {
|
||||
value: number;
|
||||
label: string;
|
||||
} | null;
|
||||
product_id: number;
|
||||
qty: number;
|
||||
export type DeliverySchema = {
|
||||
delivery_cost?: number | undefined;
|
||||
delivery_cost_per_item?: number | undefined;
|
||||
document?: File | string | null;
|
||||
document_path?: string | null;
|
||||
driver_name: string;
|
||||
vehicle_plate: string;
|
||||
supplier: {
|
||||
value: number;
|
||||
label: string;
|
||||
} | null;
|
||||
supplier_id: number;
|
||||
plat_nomor: string;
|
||||
no_surat_jalan: string;
|
||||
dokumen: string | File;
|
||||
biaya_ekspedisi: number;
|
||||
biaya_ekspedisi_per_item?: number | undefined;
|
||||
nama_sopir: string;
|
||||
products: {
|
||||
product: {
|
||||
value: number;
|
||||
label: string;
|
||||
} | null;
|
||||
product_id: number;
|
||||
product_qty: number;
|
||||
}[];
|
||||
};
|
||||
|
||||
const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
|
||||
@@ -36,64 +38,107 @@ const ProductObjectSchema: Yup.ObjectSchema<ProductSchema> = Yup.object({
|
||||
label: Yup.string().required(),
|
||||
}).nullable(),
|
||||
product_id: Yup.number().required('Produk wajib diisi!'),
|
||||
qty_product: Yup.number()
|
||||
product_qty: Yup.number()
|
||||
.required('Qty wajib diisi!')
|
||||
.min(1, 'Qty minimal 1!')
|
||||
.typeError('Qty harus berupa angka!'),
|
||||
});
|
||||
|
||||
const EkspedisiObjectSchema: Yup.ObjectSchema<EkspedisiSchema> = Yup.object({
|
||||
const DeliveryProductObjectSchema = Yup.object({
|
||||
product: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
}).nullable(),
|
||||
product_id: Yup.number().required('Produk wajib diisi!'),
|
||||
qty: Yup.number()
|
||||
product_qty: Yup.number()
|
||||
.required('Qty wajib diisi!')
|
||||
.min(1, 'Qty minimal 1!')
|
||||
.typeError('Qty harus berupa angka!'),
|
||||
});
|
||||
|
||||
const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
|
||||
delivery_cost: Yup.number()
|
||||
.transform((value) => (isNaN(value) || value === 0 ? undefined : value))
|
||||
.min(1, 'Biaya minimal 1!')
|
||||
.typeError('Biaya harus berupa angka!')
|
||||
.test(
|
||||
'one-of-cost-fields',
|
||||
'Biaya pengiriman atau biaya per item wajib diisi!',
|
||||
function (value) {
|
||||
const { delivery_cost_per_item } = this.parent;
|
||||
return (
|
||||
(value !== undefined && value > 0) ||
|
||||
(delivery_cost_per_item !== undefined && delivery_cost_per_item > 0)
|
||||
);
|
||||
}
|
||||
),
|
||||
delivery_cost_per_item: Yup.number()
|
||||
.transform((value) => (isNaN(value) || value === 0 ? undefined : value))
|
||||
.min(1, 'Biaya per item minimal 1!')
|
||||
.typeError('Biaya per item harus berupa angka!')
|
||||
.test(
|
||||
'one-of-cost-fields',
|
||||
'Biaya pengiriman atau biaya per item wajib diisi!',
|
||||
function (value) {
|
||||
const { delivery_cost } = this.parent;
|
||||
return (
|
||||
(value !== undefined && value > 0) ||
|
||||
(delivery_cost !== undefined && delivery_cost > 0)
|
||||
);
|
||||
}
|
||||
),
|
||||
document_path: Yup.string().optional(),
|
||||
document_index: Yup.number().optional(),
|
||||
document: Yup.mixed<File | string>()
|
||||
.nullable()
|
||||
.test('fileSize', 'Ukuran dokumen maksimal 2 MB', (value) => {
|
||||
if (!value) return true;
|
||||
if (typeof value === 'string') return true;
|
||||
if (value instanceof File) return value.size <= 2 * 1024 * 1024;
|
||||
return false;
|
||||
}),
|
||||
driver_name: Yup.string().required('Nama sopir wajib diisi!'),
|
||||
vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
|
||||
supplier: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
}).nullable(),
|
||||
supplier_id: Yup.number().required('Supplier wajib diisi!'),
|
||||
plat_nomor: Yup.string().required('Plat nomor wajib diisi!'),
|
||||
no_surat_jalan: Yup.string().required('No surat jalan wajib diisi!'),
|
||||
dokumen: Yup.mixed<string | File>().required('Dokumen wajib diisi!'),
|
||||
biaya_ekspedisi: Yup.number()
|
||||
.required('Biaya ekspedisi wajib diisi!')
|
||||
.min(0, 'Biaya minimal 0!')
|
||||
.typeError('Biaya harus berupa angka!'),
|
||||
biaya_ekspedisi_per_item: Yup.number()
|
||||
.transform((value) => (isNaN(value) ? undefined : value))
|
||||
.min(0, 'Biaya per item minimal 0!')
|
||||
.typeError('Biaya per item harus berupa angka!')
|
||||
.optional()
|
||||
.default(undefined),
|
||||
nama_sopir: Yup.string().required('Nama sopir wajib diisi!'),
|
||||
products: Yup.array()
|
||||
.of(DeliveryProductObjectSchema)
|
||||
.min(1, 'Minimal harus ada 1 produk!')
|
||||
.required('Produk wajib diisi!'),
|
||||
});
|
||||
|
||||
export const MovementFormSchema = Yup.object({
|
||||
alasan_transfer: Yup.string().required('Alasan transfer wajib diisi!'),
|
||||
tanggal_transfer: Yup.string().required('Tanggal transfer wajib diisi!'),
|
||||
warehouse_asal: Yup.object({
|
||||
transfer_reason: Yup.string().required('Alasan transfer wajib diisi!'),
|
||||
transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
|
||||
source_warehouse: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
area: Yup.string().optional(),
|
||||
location: Yup.string().optional(),
|
||||
}).nullable(),
|
||||
warehouse_asal_id: Yup.number()
|
||||
source_warehouse_id: Yup.number()
|
||||
.required('Gudang asal wajib diisi!')
|
||||
.typeError('Gudang asal wajib diisi!'),
|
||||
warehouse_tujuan: Yup.object({
|
||||
destination_warehouse: Yup.object({
|
||||
value: Yup.number().min(1).required(),
|
||||
label: Yup.string().required(),
|
||||
area: Yup.string().optional(),
|
||||
location: Yup.string().optional(),
|
||||
}).nullable(),
|
||||
warehouse_tujuan_id: Yup.number()
|
||||
destination_warehouse_id: Yup.number()
|
||||
.required('Gudang tujuan wajib diisi!')
|
||||
.typeError('Gudang tujuan wajib diisi!'),
|
||||
product: Yup.array()
|
||||
products: Yup.array()
|
||||
.of(ProductObjectSchema)
|
||||
.min(1, 'Minimal harus ada 1 produk!'),
|
||||
ekspedisi: Yup.array().of(EkspedisiObjectSchema).optional().default([]),
|
||||
.min(1, 'Minimal harus ada 1 produk!')
|
||||
.required('Produk wajib diisi!'),
|
||||
deliveries: Yup.array()
|
||||
.of(DeliveryObjectSchema)
|
||||
.min(1, 'Minimal harus ada 1 pengiriman!')
|
||||
.required('Pengiriman wajib diisi!'),
|
||||
});
|
||||
|
||||
export const UpdateMovementFormSchema = MovementFormSchema;
|
||||
@@ -102,41 +147,72 @@ export type MovementFormValues = Yup.InferType<typeof MovementFormSchema>;
|
||||
|
||||
export const getMovementFormInitialValues = (
|
||||
initialValues?: Movement
|
||||
): MovementFormValues => ({
|
||||
alasan_transfer: initialValues?.alasan_transfer ?? '',
|
||||
tanggal_transfer: initialValues?.tanggal_transfer ?? '',
|
||||
warehouse_asal: initialValues?.warehouse_asal
|
||||
? {
|
||||
value: initialValues.warehouse_asal.id,
|
||||
label: initialValues.warehouse_asal.name,
|
||||
}
|
||||
: null,
|
||||
warehouse_asal_id: initialValues?.warehouse_asal?.id ?? 0,
|
||||
warehouse_tujuan: initialValues?.warehouse_tujuan
|
||||
? {
|
||||
value: initialValues.warehouse_tujuan.id,
|
||||
label: initialValues.warehouse_tujuan.name,
|
||||
}
|
||||
: null,
|
||||
warehouse_tujuan_id: initialValues?.warehouse_tujuan?.id ?? 0,
|
||||
product:
|
||||
initialValues?.product?.map((p) => ({
|
||||
product: { value: p.product.id, label: p.product.name },
|
||||
product_id: p.product.id,
|
||||
qty_product: p.qty_product,
|
||||
})) ?? [],
|
||||
ekspedisi:
|
||||
initialValues?.ekspedisi?.map((e) => ({
|
||||
product: { value: e.product_id, label: '' },
|
||||
product_id: e.product_id,
|
||||
qty: e.qty,
|
||||
supplier: { value: e.supplier.id, label: e.supplier.name },
|
||||
supplier_id: e.supplier.id,
|
||||
plat_nomor: e.plat_nomor,
|
||||
no_surat_jalan: e.no_surat_jalan,
|
||||
dokumen: e.dokumen,
|
||||
biaya_ekspedisi: e.biaya_ekspedisi,
|
||||
biaya_ekspedisi_per_item: e.biaya_ekspedisi,
|
||||
nama_sopir: e.nama_sopir,
|
||||
})) ?? [],
|
||||
): MovementFormValues => {
|
||||
const detailIdToProductId = new Map<number, { id: number; name: string }>();
|
||||
initialValues?.details?.forEach((detail) => {
|
||||
detailIdToProductId.set(detail.id, {
|
||||
id: detail.product.id,
|
||||
name: detail.product.name,
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
transfer_reason: initialValues?.transfer_reason ?? '',
|
||||
transfer_date: initialValues?.transfer_date ?? '',
|
||||
source_warehouse: initialValues?.source_warehouse
|
||||
? {
|
||||
value: initialValues.source_warehouse.id,
|
||||
label: initialValues.source_warehouse.name,
|
||||
area: initialValues.source_warehouse.area?.name ?? undefined,
|
||||
location: initialValues.source_warehouse.location?.name ?? undefined,
|
||||
}
|
||||
: null,
|
||||
source_warehouse_id: initialValues?.source_warehouse?.id ?? 0,
|
||||
destination_warehouse: initialValues?.destination_warehouse
|
||||
? {
|
||||
value: initialValues.destination_warehouse.id,
|
||||
label: initialValues.destination_warehouse.name,
|
||||
area: initialValues.destination_warehouse.area?.name ?? undefined,
|
||||
location:
|
||||
initialValues.destination_warehouse.location?.name ?? undefined,
|
||||
}
|
||||
: null,
|
||||
destination_warehouse_id: initialValues?.destination_warehouse?.id ?? 0,
|
||||
products:
|
||||
initialValues?.details?.map((detail) => ({
|
||||
product: {
|
||||
value: detail.product.id,
|
||||
label: detail.product.name,
|
||||
},
|
||||
product_id: detail.product.id,
|
||||
product_qty: detail.quantity,
|
||||
})) ?? [],
|
||||
deliveries:
|
||||
initialValues?.deliveries?.map((d) => ({
|
||||
delivery_cost: d.shipping_cost_total ?? undefined,
|
||||
delivery_cost_per_item: d.shipping_cost_item ?? undefined,
|
||||
document_number: d.document_number ?? '',
|
||||
document: d.document_path ?? null,
|
||||
document_path: d.document_path ?? null,
|
||||
driver_name: d.driver_name ?? '',
|
||||
vehicle_plate: d.vehicle_plate ?? '',
|
||||
supplier: d.supplier
|
||||
? { value: d.supplier.id, label: d.supplier.name }
|
||||
: null,
|
||||
supplier_id: d.supplier?.id ?? 0,
|
||||
products:
|
||||
d.items?.map((item) => {
|
||||
const productData = detailIdToProductId.get(
|
||||
item.stock_transfer_detail_id
|
||||
);
|
||||
return {
|
||||
product: productData
|
||||
? { value: productData.id, label: productData.name }
|
||||
: null,
|
||||
product_id: productData?.id ?? 0,
|
||||
product_qty: item.quantity,
|
||||
};
|
||||
}) ?? [],
|
||||
})) ?? [],
|
||||
};
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -16,8 +16,16 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const createMovementHandler = useCallback(
|
||||
async (payload: CreateMovementPayload) => {
|
||||
const res = await MovementApi.create(payload);
|
||||
async (payload: CreateMovementPayload, documents: File[] = []) => {
|
||||
const formData = new FormData();
|
||||
formData.append('data', JSON.stringify(payload));
|
||||
documents.forEach((file, index) => {
|
||||
formData.append(`documents[${index}]`, file);
|
||||
});
|
||||
|
||||
const res = await MovementApi.create(
|
||||
formData as unknown as CreateMovementPayload
|
||||
);
|
||||
if (isResponseError(res)) {
|
||||
setMovementFormErrorMessage(res.message);
|
||||
return;
|
||||
@@ -29,8 +37,26 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
|
||||
);
|
||||
|
||||
const updateMovementHandler = useCallback(
|
||||
async (movementId: number, payload: UpdateMovementPayload) => {
|
||||
const res = await MovementApi.update(movementId, payload);
|
||||
async (
|
||||
movementId: number,
|
||||
payload: UpdateMovementPayload,
|
||||
documents: File[] = []
|
||||
) => {
|
||||
let finalPayload: UpdateMovementPayload | FormData;
|
||||
|
||||
if (documents.length > 0) {
|
||||
const formData = new FormData();
|
||||
formData.append('data', JSON.stringify(payload));
|
||||
documents.forEach((file, index) => {
|
||||
formData.append(`documents[${index}]`, file);
|
||||
});
|
||||
|
||||
finalPayload = formData as unknown as UpdateMovementPayload;
|
||||
} else {
|
||||
finalPayload = payload;
|
||||
}
|
||||
|
||||
const res = await MovementApi.update(movementId, finalPayload);
|
||||
if (res?.status === 'error') {
|
||||
setMovementFormErrorMessage(res.message);
|
||||
return;
|
||||
|
||||
@@ -41,7 +41,6 @@ const CustomerForm = ({
|
||||
const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [picSelectInputValue, setPicSelectInputValue] = useState('');
|
||||
const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
|
||||
|
||||
// Fetch Data
|
||||
const picUrl = `${UserApi.basePath}?${new URLSearchParams({
|
||||
@@ -252,7 +251,6 @@ const CustomerForm = ({
|
||||
}
|
||||
onChange={typeChangeHandler}
|
||||
options={typeOptions}
|
||||
onInputChange={setTypeSelectInputValue}
|
||||
isError={formik.touched.type && Boolean(formik.errors.type)}
|
||||
errorMessage={formik.errors.type as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
@@ -309,7 +307,6 @@ const CustomerForm = ({
|
||||
isError={formik.touched.address && Boolean(formik.errors.address)}
|
||||
errorMessage={formik.errors.address}
|
||||
readOnly={formType === 'detail'}
|
||||
cols={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,7 +2,10 @@ import * as Yup from 'yup';
|
||||
|
||||
export const SupplierFormSchema = Yup.object({
|
||||
name: Yup.string().required('Nama wajib diisi!'),
|
||||
alias: Yup.string().required('Alias wajib diisi!'),
|
||||
alias: Yup.string()
|
||||
.matches(/^[A-Za-z0-9]+$/, 'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!')
|
||||
.max(5, 'Alias maksimal 5 karakter!')
|
||||
.required('Alias wajib diisi!'),
|
||||
pic: Yup.string().required('PIC wajib diisi!'),
|
||||
type: Yup.object({
|
||||
value: Yup.string().required(),
|
||||
|
||||
@@ -21,7 +21,6 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '@/components/Button';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import TagInput from '@/components/input/TagInput';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
import { cn } from '@/lib/helper';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
@@ -42,9 +41,7 @@ const SupplierForm = ({
|
||||
// Setup State
|
||||
const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
|
||||
const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
|
||||
const [hatcheryTagInputValue, setHatcheryTagInputValue] = useState('');
|
||||
const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<OptionType[]>([]);
|
||||
|
||||
// -- Options data mapping
|
||||
const typeOptions = TYPE_OPTIONS;
|
||||
@@ -108,8 +105,6 @@ const SupplierForm = ({
|
||||
};
|
||||
|
||||
// Memo
|
||||
console.log('Memo');
|
||||
console.log(initialValues);
|
||||
const formikInitialValues = useMemo<SupplierFormValues>(() => {
|
||||
return {
|
||||
name: initialValues?.name ?? '',
|
||||
@@ -125,7 +120,7 @@ const SupplierForm = ({
|
||||
account_number: initialValues?.account_number ?? '',
|
||||
due_date: initialValues?.due_date ?? 1,
|
||||
};
|
||||
}, [initialValues]);
|
||||
}, [initialValues, typeOptions, categoryOptions]);
|
||||
|
||||
// Formik
|
||||
const formik = useFormik<SupplierFormValues>({
|
||||
@@ -172,8 +167,22 @@ const SupplierForm = ({
|
||||
// Initialize Formik
|
||||
useEffect(() => {
|
||||
formikSetValues(formikInitialValues);
|
||||
setHatcheryTagInputValue(formikInitialValues.hatchery);
|
||||
}, [formikSetValues, formikInitialValues, hatcheryTagInputValue]);
|
||||
if(formType != 'add'){
|
||||
const hatcheryArrays = formikInitialValues.hatchery.split(',');
|
||||
const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
|
||||
value: item,
|
||||
label: item,
|
||||
}));
|
||||
setHatcheryOptionValues(hatcheryCreatedOptions);
|
||||
}
|
||||
}, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
|
||||
useEffect(() => {
|
||||
const commaSeparatedValues = hatcheryOptionsValues.map((item) => item.value).join(',');
|
||||
formikSetValues({
|
||||
...formik.values,
|
||||
hatchery: commaSeparatedValues,
|
||||
})
|
||||
}, [hatcheryOptionsValues, formikSetValues]);
|
||||
|
||||
// Option Handler
|
||||
const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
@@ -260,7 +269,6 @@ const SupplierForm = ({
|
||||
}
|
||||
onChange={typeChangeHandler}
|
||||
options={typeOptions}
|
||||
onInputChange={setTypeSelectInputValue}
|
||||
isError={formik.touched.type && Boolean(formik.errors.type)}
|
||||
errorMessage={formik.errors.type as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
@@ -278,7 +286,6 @@ const SupplierForm = ({
|
||||
}
|
||||
onChange={categoryChangeHandler}
|
||||
options={categoryOptions}
|
||||
onInputChange={setCategorySelectInputValue}
|
||||
isError={
|
||||
formik.touched.category && Boolean(formik.errors.category)
|
||||
}
|
||||
@@ -287,17 +294,25 @@ const SupplierForm = ({
|
||||
isClearable
|
||||
isSearchable={true}
|
||||
/>
|
||||
<TagInput
|
||||
name='hatchery'
|
||||
<SelectInput
|
||||
isMulti
|
||||
createables
|
||||
required
|
||||
placeholder='Pilih Hatchery'
|
||||
label='Hatchery'
|
||||
value={hatcheryTagInputValue}
|
||||
onChange={(value) => formik.setFieldValue('hatchery', value)}
|
||||
isError={
|
||||
formik.touched.hatchery && Boolean(formik.errors.hatchery)
|
||||
}
|
||||
errorMessage={formik.errors.hatchery}
|
||||
readOnly={formType === 'detail'}
|
||||
value={hatcheryOptionsValues}
|
||||
onChange={(val) => {
|
||||
console.log(val); // pastikan val = array of { value, label }
|
||||
setHatcheryOptionValues(val as OptionType[]);
|
||||
}}
|
||||
isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
|
||||
errorMessage={formik.errors.hatchery as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
isClearable
|
||||
isSearchable={true}
|
||||
options={[]}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
required
|
||||
label='Nomor Telepon'
|
||||
@@ -333,7 +348,6 @@ const SupplierForm = ({
|
||||
isError={formik.touched.address && Boolean(formik.errors.address)}
|
||||
errorMessage={formik.errors.address}
|
||||
readOnly={formType === 'detail'}
|
||||
cols={8}
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
interface StepItemProps {
|
||||
children?: ReactNode;
|
||||
icon?: ReactNode;
|
||||
className?: string;
|
||||
color?: Color;
|
||||
}
|
||||
|
||||
const StepItem = ({ children, icon, className, color }: StepItemProps) => {
|
||||
const stepItemBaseClassName = cn('step', {
|
||||
'step-primary': color === 'primary',
|
||||
'step-secondary': color === 'secondary',
|
||||
'step-accent': color === 'accent',
|
||||
'step-neutral': color === 'neutral',
|
||||
'step-info': color === 'info',
|
||||
'step-success': color === 'success',
|
||||
'step-warning': color === 'warning',
|
||||
'step-error': color === 'error',
|
||||
});
|
||||
|
||||
return (
|
||||
<li className={cn(stepItemBaseClassName, className)}>
|
||||
<span className='step-icon'>{icon}</span>
|
||||
|
||||
<div>{children}</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepItem;
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
interface StepsProps {
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
}
|
||||
|
||||
const Steps = ({ children, className, direction }: StepsProps) => {
|
||||
const stepsBaseClassName = cn('steps gap-2', {
|
||||
'steps-horizontal': direction === 'horizontal',
|
||||
'steps-vertical': direction === 'vertical',
|
||||
});
|
||||
|
||||
return (
|
||||
<ul className={cn(stepsBaseClassName, 'overflow-visible!', className)}>
|
||||
{children}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default Steps;
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '../Button';
|
||||
import { cn } from '@/lib/helper';
|
||||
|
||||
interface TableRowOptionsProps {
|
||||
type?: 'dropdown' | 'collapse';
|
||||
recordId: string | number;
|
||||
basePath: string;
|
||||
onDelete?: () => void;
|
||||
queryParam?: string;
|
||||
showEdit?: boolean;
|
||||
showDelete?: boolean;
|
||||
}
|
||||
|
||||
export const TableRowOptions = ({
|
||||
type = 'dropdown',
|
||||
recordId,
|
||||
basePath,
|
||||
onDelete,
|
||||
queryParam = 'id',
|
||||
showEdit = true,
|
||||
showDelete = true,
|
||||
}: TableRowOptionsProps) => (
|
||||
<div
|
||||
tabIndex={type === 'dropdown' ? 0 : undefined}
|
||||
className={cn(
|
||||
{
|
||||
'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'
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
href={`${basePath}/detail/?${queryParam}=${recordId}`}
|
||||
variant='ghost'
|
||||
color='primary'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:eye-outline' width={16} height={16} />
|
||||
Detail
|
||||
</Button>
|
||||
{showEdit && (
|
||||
<Button
|
||||
href={`${basePath}/detail/edit/?${queryParam}=${recordId}`}
|
||||
variant='ghost'
|
||||
color='warning'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={16} height={16} />
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
{showDelete && onDelete && (
|
||||
<Button
|
||||
onClick={onDelete}
|
||||
variant='ghost'
|
||||
color='error'
|
||||
className='text-error hover:text-inherit justify-start text-sm'
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:delete-outline'
|
||||
width={16}
|
||||
height={16}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,33 @@
|
||||
import SelectInput from '../input/SelectInput';
|
||||
|
||||
export interface OptionType {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
interface TableRowSizeSelectorProps {
|
||||
value: number;
|
||||
onChange: (val: OptionType | OptionType[] | null) => void;
|
||||
options: OptionType[];
|
||||
}
|
||||
|
||||
export const TableRowSizeSelector = ({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
}: TableRowSizeSelectorProps) => {
|
||||
return (
|
||||
<div className='flex flex-row justify-end'>
|
||||
<SelectInput
|
||||
label='Baris'
|
||||
options={options}
|
||||
value={{
|
||||
label: String(value),
|
||||
value: value,
|
||||
}}
|
||||
onChange={onChange}
|
||||
className={{ wrapper: 'max-w-28' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '../Button';
|
||||
import DebouncedTextInput from '../input/DebouncedTextInput';
|
||||
|
||||
interface TableToolbarProps {
|
||||
addButton?: {
|
||||
href: string;
|
||||
label: string;
|
||||
};
|
||||
search: {
|
||||
value: string;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
placeholder?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
|
||||
return (
|
||||
<div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
|
||||
{addButton && (
|
||||
<div className='flex flex-row'>
|
||||
<Button href={addButton.href} color='primary'>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
{addButton.label}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
placeholder={search.placeholder || 'Cari...'}
|
||||
value={search.value}
|
||||
onChange={search.onChange}
|
||||
className={{ wrapper: 'sm:max-w-3xs' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
export function toFormData(
|
||||
value: unknown,
|
||||
form = new FormData(),
|
||||
parentKey?: string
|
||||
) {
|
||||
if (value === undefined || value === null) {
|
||||
if (parentKey) form.append(parentKey, '');
|
||||
return form;
|
||||
}
|
||||
|
||||
if (value instanceof File) {
|
||||
if (!parentKey) throw new Error('File must have a key');
|
||||
form.append(parentKey, value);
|
||||
return form;
|
||||
}
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((v, i) => {
|
||||
const key = parentKey ? `${parentKey}[${i}]` : `${i}`;
|
||||
toFormData(v, form, key);
|
||||
});
|
||||
return form;
|
||||
}
|
||||
|
||||
if (typeof value === 'object') {
|
||||
Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
|
||||
const key = parentKey ? `${parentKey}[${k}]` : k;
|
||||
toFormData(v, form, key);
|
||||
});
|
||||
return form;
|
||||
}
|
||||
|
||||
if (parentKey) form.append(parentKey, String(value));
|
||||
return form;
|
||||
}
|
||||
|
||||
export function containsFile(obj: unknown): boolean {
|
||||
if (!obj) return false;
|
||||
if (obj instanceof File) return true;
|
||||
if (Array.isArray(obj)) return obj.some(containsFile);
|
||||
if (typeof obj === 'object') {
|
||||
return Object.values(obj as Record<string, unknown>).some(containsFile);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -4,9 +4,11 @@ import { BaseApiResponse } from '@/types/api/api-general';
|
||||
|
||||
export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
|
||||
basePath: string;
|
||||
header?: Record<string, string>;
|
||||
|
||||
constructor(basePath: string) {
|
||||
constructor(basePath: string, header?: Record<string, string>) {
|
||||
this.basePath = basePath;
|
||||
this.header = header;
|
||||
}
|
||||
|
||||
async getAllFetcher(endpoint: string): Promise<BaseApiResponse<T[]>> {
|
||||
@@ -23,42 +25,52 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
|
||||
if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
|
||||
return error.response?.data;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async create(payload: CreatePayloadGeneric) {
|
||||
const isFormData =
|
||||
typeof FormData !== 'undefined' && payload instanceof FormData;
|
||||
try {
|
||||
const headers = isFormData
|
||||
? { ...(this.header ?? {}) }
|
||||
: { 'Content-Type': 'application/json', ...(this.header ?? {}) };
|
||||
|
||||
const createRes = await httpClient<BaseApiResponse<T>>(this.basePath, {
|
||||
method: 'POST',
|
||||
body: payload,
|
||||
headers,
|
||||
});
|
||||
|
||||
return createRes;
|
||||
} catch (error: unknown) {
|
||||
if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
|
||||
return error.response?.data;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async update(id: number, payload: UpdatePayloadGeneric) {
|
||||
const isFormData =
|
||||
typeof FormData !== 'undefined' && payload instanceof FormData;
|
||||
try {
|
||||
const updatePath = `${this.basePath}/${id}`;
|
||||
|
||||
const headers = isFormData
|
||||
? { ...(this.header ?? {}) }
|
||||
: { 'Content-Type': 'application/json', ...(this.header ?? {}) };
|
||||
|
||||
const updateRes = await httpClient<BaseApiResponse<T>>(updatePath, {
|
||||
method: 'PATCH',
|
||||
body: payload,
|
||||
headers,
|
||||
});
|
||||
|
||||
return updateRes;
|
||||
} catch (error: unknown) {
|
||||
if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
|
||||
return error.response?.data;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@@ -69,13 +81,11 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
|
||||
const deleteRes = await httpClient<BaseApiResponse>(deletePath, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
return deleteRes;
|
||||
} catch (error) {
|
||||
if (axios.isAxiosError<BaseApiResponse>(error)) {
|
||||
return error.response?.data;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,33 @@
|
||||
import { BaseApiService } from '@/services/api/base';
|
||||
import {
|
||||
CreateProductWarehousePayload,
|
||||
ProductWarehouse,
|
||||
UpdateProductWarehousePayload,
|
||||
} from '@/types/api/inventory/product-warehouse';
|
||||
import {
|
||||
CreateMovementPayload,
|
||||
Movement,
|
||||
UpdateMovementPayload,
|
||||
} from "@/types/api/inventory/movement";
|
||||
import {BaseApiService} from "@/services/api/base";
|
||||
} from '@/types/api/inventory/movement';
|
||||
import {
|
||||
CreateInventoryAdjustmentPayload,
|
||||
InventoryAdjustment,
|
||||
} from '@/types/api/inventory/adjustment';
|
||||
|
||||
export const ProductWarehouseApi = new BaseApiService<
|
||||
ProductWarehouse,
|
||||
CreateProductWarehousePayload,
|
||||
UpdateProductWarehousePayload
|
||||
>('/inventory/product-warehouses');
|
||||
|
||||
export const MovementApi = new BaseApiService<
|
||||
Movement,
|
||||
CreateMovementPayload,
|
||||
UpdateMovementPayload
|
||||
>('/inventory/movements');
|
||||
>('/inventory/transfers');
|
||||
|
||||
export const inventoryAdjustmentApi = new BaseApiService<
|
||||
InventoryAdjustment,
|
||||
CreateInventoryAdjustmentPayload,
|
||||
unknown
|
||||
>('/inventory/adjustments');
|
||||
|
||||
@@ -6,22 +6,43 @@ type AuthStore = {
|
||||
isLoadingUser?: boolean;
|
||||
setUser: (newUserData?: UserWithRoles) => void;
|
||||
setIsLoadingUser: (isLoading?: boolean) => void;
|
||||
permissionCheck: (permissionName: string) => boolean;
|
||||
};
|
||||
|
||||
const useAuthStore = create<AuthStore>()((set) => ({
|
||||
const useAuthStore = create<AuthStore>()((set, get) => ({
|
||||
user: undefined,
|
||||
isLoadingUser: false,
|
||||
setUser: (newUserData) => set({ user: newUserData }),
|
||||
setIsLoadingUser: (isLoading) => set({ isLoadingUser: Boolean(isLoading) }),
|
||||
|
||||
permissionCheck: (name) => {
|
||||
const { user, isLoadingUser } = get();
|
||||
|
||||
if (!isLoadingUser && user) {
|
||||
const isAllowed = user.roles.some((role) => {
|
||||
const isPermissionNameAllowed = role.permissions.some(
|
||||
(permission) => permission.name === name
|
||||
);
|
||||
|
||||
return isPermissionNameAllowed;
|
||||
});
|
||||
|
||||
return isAllowed;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
}));
|
||||
|
||||
export const useAuth = () => {
|
||||
const { user, setUser, isLoadingUser, setIsLoadingUser } = useAuthStore();
|
||||
const { user, setUser, isLoadingUser, setIsLoadingUser, permissionCheck } =
|
||||
useAuthStore();
|
||||
|
||||
return {
|
||||
user,
|
||||
setUser,
|
||||
isLoadingUser,
|
||||
setIsLoadingUser,
|
||||
permissionCheck,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -14,6 +14,9 @@ export async function httpClient<T, B = unknown>(
|
||||
(!opts.auth && opts.auth !== 'none' && opts.auth !== 'bearer');
|
||||
const isBearerAuth = opts.auth === 'bearer' && !!opts.token;
|
||||
|
||||
const isFormData =
|
||||
typeof FormData !== 'undefined' && opts.body instanceof FormData;
|
||||
|
||||
const config: AxiosRequestConfig = {
|
||||
url: path,
|
||||
method: opts.method ?? 'GET',
|
||||
@@ -22,7 +25,7 @@ export async function httpClient<T, B = unknown>(
|
||||
timeout: opts.timeoutMs ?? 10_000,
|
||||
withCredentials: isCookieAuth && !isBearerAuth,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(isFormData ? {} : { 'Content-Type': 'application/json' }),
|
||||
...(opts.headers ?? {}),
|
||||
...(isBearerAuth && !isCookieAuth
|
||||
? { Authorization: `Bearer ${opts.token}` }
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
@layer utilities {
|
||||
.step.step-success::before {
|
||||
--step-bg: var(--color-success);
|
||||
--step-fg: var(--color-success-content);
|
||||
}
|
||||
|
||||
.step.step-error::before {
|
||||
--step-bg: var(--color-error);
|
||||
--step-fg: var(--color-error-content);
|
||||
}
|
||||
}
|
||||
Vendored
+38
@@ -24,6 +24,36 @@ export type LogoutResponse = BaseApiResponse;
|
||||
|
||||
export type GetMeResponse = BaseApiResponse<UserWithRoles>;
|
||||
|
||||
export type Client = {
|
||||
id: number;
|
||||
name: stirng;
|
||||
alias: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type Permission = {
|
||||
id: number;
|
||||
name: string;
|
||||
action: string;
|
||||
client: Omit<Client, 'created_at' | 'updated_at'>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type Role = {
|
||||
id: number;
|
||||
key: string;
|
||||
name: string;
|
||||
client: Omit<Client, 'created_at' | 'updated_at'>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type RoleWithPermissions = Omit<Role, 'created_at' | 'updated_at'> & {
|
||||
permissions: Omit<Permission, 'created_at' | 'updated_at'>[];
|
||||
};
|
||||
|
||||
export type User = {
|
||||
id: number;
|
||||
email: string;
|
||||
@@ -66,3 +96,11 @@ export type flags =
|
||||
| 'STARTER'
|
||||
| 'FINISHER'
|
||||
| 'OVK';
|
||||
|
||||
export type ApprovalsLine = {
|
||||
action_by?: string;
|
||||
date?: string;
|
||||
notes?: string;
|
||||
role?: string;
|
||||
status: 'approved' | 'rejected' | 'waiting';
|
||||
}[];
|
||||
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import { Product } from '@/types/api/master-data/product';
|
||||
import { Warehouse } from '../master-data/warehouse';
|
||||
|
||||
export type BaseInventoryAdjustment = {
|
||||
id: number;
|
||||
transaction_type: string;
|
||||
quantity: number;
|
||||
before_quantity: number;
|
||||
after_quantity: number;
|
||||
note: string;
|
||||
product_warehouse_id: number;
|
||||
product_warehouse: {
|
||||
id: number;
|
||||
quantity: number;
|
||||
product_id: number;
|
||||
warehouse_id: number;
|
||||
product: Product;
|
||||
warehouse: Warehouse;
|
||||
};
|
||||
};
|
||||
|
||||
export type InventoryAdjustment = BaseMetadata & BaseInventoryAdjustment;
|
||||
|
||||
export type CreateInventoryAdjustmentPayload = {
|
||||
product_id: number;
|
||||
warehouse_id: number;
|
||||
transaction_type: string;
|
||||
quantity: number;
|
||||
note: string;
|
||||
};
|
||||
+54
-31
@@ -1,51 +1,74 @@
|
||||
import { BaseMetadata } from '@/types/api/api-general';
|
||||
import { Product } from '@/types/api/master-data/product';
|
||||
import { Supplier } from '@/types/api/master-data/supplier';
|
||||
import { Warehouse } from '@/types/api/master-data/warehouse';
|
||||
|
||||
type MovementWarehouse = {
|
||||
id: number;
|
||||
name: string;
|
||||
location: {
|
||||
id: number;
|
||||
name: string;
|
||||
} | null;
|
||||
area: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type BaseMovement = {
|
||||
id: number;
|
||||
alasan_transfer: string;
|
||||
tanggal_transfer: string;
|
||||
warehouse_asal: Warehouse;
|
||||
warehouse_tujuan: Warehouse;
|
||||
transfer_reason: string;
|
||||
transfer_date: string;
|
||||
source_warehouse: MovementWarehouse;
|
||||
destination_warehouse: MovementWarehouse;
|
||||
details: {
|
||||
id: number;
|
||||
product: {
|
||||
product: Product;
|
||||
qty_product: number;
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
quantity: number;
|
||||
before_quantity: number;
|
||||
after_quantity: number;
|
||||
}[];
|
||||
ekspedisi: {
|
||||
product_id: number;
|
||||
qty: number;
|
||||
deliveries: {
|
||||
id: number;
|
||||
supplier: Supplier;
|
||||
plat_nomor: string;
|
||||
no_surat_jalan: string;
|
||||
dokumen: string;
|
||||
biaya_ekspedisi: number;
|
||||
nama_sopir: string;
|
||||
vehicle_plate: string;
|
||||
driver_name: string;
|
||||
document_number: string;
|
||||
document_path: string;
|
||||
shipping_cost_item: number;
|
||||
shipping_cost_total: number;
|
||||
items: {
|
||||
id: number;
|
||||
stock_transfer_detail_id: number;
|
||||
quantity: number;
|
||||
}[];
|
||||
}[];
|
||||
};
|
||||
|
||||
export type Movement = BaseMetadata & BaseMovement;
|
||||
|
||||
export type CreateMovementPayload = {
|
||||
alasan_transfer: string;
|
||||
tanggal_transfer: string;
|
||||
warehouse_asal_id: number;
|
||||
warehouse_tujuan_id: number;
|
||||
product: {
|
||||
transfer_reason: string;
|
||||
transfer_date: string;
|
||||
source_warehouse_id: number;
|
||||
destination_warehouse_id: number;
|
||||
products: {
|
||||
product_id: number;
|
||||
qty_product: number;
|
||||
product_qty: number;
|
||||
}[];
|
||||
ekspedisi: {
|
||||
product_id: number;
|
||||
qty: number;
|
||||
deliveries: {
|
||||
delivery_cost: number;
|
||||
delivery_cost_per_item: number;
|
||||
document_index?: number;
|
||||
driver_name: string;
|
||||
vehicle_plate: string;
|
||||
supplier_id: number;
|
||||
plat_nomor: string;
|
||||
no_surat_jalan: string;
|
||||
dokumen: string | File;
|
||||
biaya_ekspedisi: number;
|
||||
biaya_ekspedisi_per_item?: number;
|
||||
nama_sopir: string;
|
||||
products: {
|
||||
product_id: number;
|
||||
product_qty: number;
|
||||
}[];
|
||||
}[];
|
||||
};
|
||||
|
||||
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import { BaseMetadata } from '@/types/api/api-general';
|
||||
import { Warehouse } from '@/types/api/master-data/warehouse';
|
||||
import { Product } from '@/types/api/master-data/product';
|
||||
|
||||
export type BaseProductWarehouse = {
|
||||
id: number;
|
||||
product_id: number;
|
||||
warehouse_id: number;
|
||||
quantity: number;
|
||||
product: Product;
|
||||
warehouse: Warehouse;
|
||||
};
|
||||
|
||||
export type ProductWarehouse = BaseMetadata & BaseProductWarehouse;
|
||||
|
||||
export type CreateProductWarehousePayload = {
|
||||
product_id: number;
|
||||
warehouse_id: number;
|
||||
quantity: number;
|
||||
};
|
||||
|
||||
export type UpdateProductWarehousePayload = CreateProductWarehousePayload;
|
||||
Reference in New Issue
Block a user