mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 07:45:47 +00:00
feat(FE-33): create customers forms
This commit is contained in:
sweetpotet
@@ -0,0 +1,11 @@
|
|||||||
|
import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
|
||||||
|
|
||||||
|
const AddNonstock = () => {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<CustomerForm/>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddNonstock;
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
|
||||||
|
|
||||||
|
const Nonstock = () => {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<CustomersTable />
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Nonstock;
|
||||||
@@ -9,6 +9,145 @@ import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
|
|||||||
import { isResponseSuccess } from '@/lib/api-helper';
|
import { isResponseSuccess } from '@/lib/api-helper';
|
||||||
import { GetMeResponse } from '@/types/api/api-general';
|
import { GetMeResponse } from '@/types/api/api-general';
|
||||||
|
|
||||||
|
// TODO: delete this later, DONT HARDCODE USER DATA
|
||||||
|
const DUMMY_USER = {
|
||||||
|
id: 1,
|
||||||
|
email: 'admin@mbugroup.id',
|
||||||
|
npk: '0001',
|
||||||
|
name: 'Super Admin',
|
||||||
|
image: null,
|
||||||
|
created_at: '2025-09-30T03:24:20.899229Z',
|
||||||
|
updated_at: '2025-09-30T03:24:20.899229Z',
|
||||||
|
roles: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
key: 'mbu.super_admin',
|
||||||
|
name: 'MBU Administrator',
|
||||||
|
client: {
|
||||||
|
id: 1,
|
||||||
|
name: 'PT Mitra Berlian Unggas',
|
||||||
|
alias: 'MBU',
|
||||||
|
},
|
||||||
|
permissions: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'mbu:purchase:read',
|
||||||
|
action: 'read',
|
||||||
|
client: {
|
||||||
|
id: 1,
|
||||||
|
name: 'PT Mitra Berlian Unggas',
|
||||||
|
alias: 'MBU',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'mbu:purchase:create',
|
||||||
|
action: 'create',
|
||||||
|
client: {
|
||||||
|
id: 1,
|
||||||
|
name: 'PT Mitra Berlian Unggas',
|
||||||
|
alias: 'MBU',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'mbu:purchase:approve',
|
||||||
|
action: 'approve',
|
||||||
|
client: {
|
||||||
|
id: 1,
|
||||||
|
name: 'PT Mitra Berlian Unggas',
|
||||||
|
alias: 'MBU',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
key: 'lti.super_admin',
|
||||||
|
name: 'LTI Administrator',
|
||||||
|
client: {
|
||||||
|
id: 2,
|
||||||
|
name: 'PT Lumbung Telur Indonesia',
|
||||||
|
alias: 'LTI',
|
||||||
|
},
|
||||||
|
permissions: [
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'lti:purchase:read',
|
||||||
|
action: 'read',
|
||||||
|
client: {
|
||||||
|
id: 2,
|
||||||
|
name: 'PT Lumbung Telur Indonesia',
|
||||||
|
alias: 'LTI',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'lti:purchase:create',
|
||||||
|
action: 'create',
|
||||||
|
client: {
|
||||||
|
id: 2,
|
||||||
|
name: 'PT Lumbung Telur Indonesia',
|
||||||
|
alias: 'LTI',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: 'lti:purchase:approve',
|
||||||
|
action: 'approve',
|
||||||
|
client: {
|
||||||
|
id: 2,
|
||||||
|
name: 'PT Lumbung Telur Indonesia',
|
||||||
|
alias: 'LTI',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
key: 'manbu.super_admin',
|
||||||
|
name: 'MANBU Administrator',
|
||||||
|
client: {
|
||||||
|
id: 3,
|
||||||
|
name: 'PT Mandiri Berlian Unggas',
|
||||||
|
alias: 'MANBU',
|
||||||
|
},
|
||||||
|
permissions: [
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: 'manbu:purchase:read',
|
||||||
|
action: 'read',
|
||||||
|
client: {
|
||||||
|
id: 3,
|
||||||
|
name: 'PT Mandiri Berlian Unggas',
|
||||||
|
alias: 'MANBU',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: 'manbu:purchase:create',
|
||||||
|
action: 'create',
|
||||||
|
client: {
|
||||||
|
id: 3,
|
||||||
|
name: 'PT Mandiri Berlian Unggas',
|
||||||
|
alias: 'MANBU',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
name: 'manbu:purchase:approve',
|
||||||
|
action: 'approve',
|
||||||
|
client: {
|
||||||
|
id: 3,
|
||||||
|
name: 'PT Mandiri Berlian Unggas',
|
||||||
|
alias: 'MANBU',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
interface RequireAuthProps {
|
interface RequireAuthProps {
|
||||||
children?: ReactNode;
|
children?: ReactNode;
|
||||||
}
|
}
|
||||||
@@ -37,17 +176,20 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
|
|||||||
if (isResponseSuccess(userResponse)) {
|
if (isResponseSuccess(userResponse)) {
|
||||||
setUser(userResponse.data);
|
setUser(userResponse.data);
|
||||||
} else {
|
} else {
|
||||||
router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
|
// router.replace(process.env.NEXT_PUBLIC_SSO_LOGIN_URL as string);
|
||||||
|
// TODO: remove this later, DONT HARDCODE USER DATA
|
||||||
|
setUser(DUMMY_USER);
|
||||||
}
|
}
|
||||||
}, [userResponse, setIsLoadingUser, setUser]);
|
}, [userResponse, setIsLoadingUser, setUser]);
|
||||||
|
|
||||||
if (isLoadingUserResponse && !userResponse) {
|
// TODO: uncomment this later
|
||||||
return (
|
// if (isLoadingUserResponse && !userResponse) {
|
||||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
// return (
|
||||||
<span className='loading loading-spinner loading-xl' />
|
// <div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
</div>
|
// <span className='loading loading-spinner loading-xl' />
|
||||||
);
|
// </div>
|
||||||
}
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
return <>{children}</>;
|
return <>{children}</>;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,124 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ChangeEventHandler,
|
||||||
|
FocusEventHandler,
|
||||||
|
ReactNode,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/helper';
|
||||||
|
|
||||||
|
export interface TextAreaProps {
|
||||||
|
label?: string;
|
||||||
|
bottomLabel?: string;
|
||||||
|
name: string;
|
||||||
|
value?: string | number;
|
||||||
|
placeholder?: string;
|
||||||
|
className?: {
|
||||||
|
wrapper?: string;
|
||||||
|
label?: string;
|
||||||
|
inputWrapper?: string;
|
||||||
|
input?: string;
|
||||||
|
};
|
||||||
|
isError?: boolean;
|
||||||
|
isValid?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
readOnly?: boolean;
|
||||||
|
required?: boolean;
|
||||||
|
isLoading?: boolean;
|
||||||
|
errorMessage?: string;
|
||||||
|
startAdornment?: ReactNode;
|
||||||
|
endAdornment?: ReactNode;
|
||||||
|
onChange?: ChangeEventHandler<HTMLTextAreaElement>;
|
||||||
|
onBlur?: FocusEventHandler<HTMLTextAreaElement>;
|
||||||
|
cols?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TextArea = ({
|
||||||
|
label,
|
||||||
|
bottomLabel,
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
placeholder,
|
||||||
|
className,
|
||||||
|
isError,
|
||||||
|
isValid,
|
||||||
|
errorMessage,
|
||||||
|
startAdornment,
|
||||||
|
endAdornment,
|
||||||
|
disabled = false,
|
||||||
|
required = false,
|
||||||
|
onChange,
|
||||||
|
onBlur,
|
||||||
|
readOnly = false,
|
||||||
|
isLoading = false,
|
||||||
|
cols = 3
|
||||||
|
}: TextAreaProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'w-full flex flex-col gap-2 text-start',
|
||||||
|
className?.wrapper
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{label && (
|
||||||
|
<label
|
||||||
|
htmlFor={name}
|
||||||
|
className={cn(
|
||||||
|
'w-full text-sm font-normal leading-5',
|
||||||
|
{
|
||||||
|
'text-error': isError,
|
||||||
|
},
|
||||||
|
className?.label
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
{required && (
|
||||||
|
<>
|
||||||
|
{' '}
|
||||||
|
<span className='tooltip tooltip-error' data-tip='required'>
|
||||||
|
<span className='text-error'> *</span>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
{startAdornment && startAdornment}
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
className={cn(
|
||||||
|
'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
|
||||||
|
{
|
||||||
|
'border-error': isError,
|
||||||
|
'border-success!': isValid,
|
||||||
|
},
|
||||||
|
className?.inputWrapper
|
||||||
|
)}
|
||||||
|
id={name}
|
||||||
|
name={name}
|
||||||
|
placeholder={placeholder}
|
||||||
|
value={value}
|
||||||
|
cols={cols}
|
||||||
|
onChange={onChange}
|
||||||
|
onBlur={onBlur}
|
||||||
|
disabled={disabled}
|
||||||
|
readOnly={readOnly}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{(isLoading || endAdornment) && (
|
||||||
|
<div className='flex flex-row gap-2'>
|
||||||
|
{isLoading && <span className='loading loading-spinner' />}
|
||||||
|
|
||||||
|
{endAdornment && endAdornment}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isError && bottomLabel && (
|
||||||
|
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
|
||||||
|
)}
|
||||||
|
{isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TextArea;
|
||||||
@@ -0,0 +1,245 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Button from "@/components/Button";
|
||||||
|
import DebouncedTextInput from "@/components/input/DebouncedTextInput";
|
||||||
|
import { useModal } from "@/components/Modal";
|
||||||
|
import ConfirmationModal from "@/components/modal/ConfirmationModal";
|
||||||
|
import Table from "@/components/Table";
|
||||||
|
import RowCollapseOptions from "@/components/table/RowCollapseOptions";
|
||||||
|
import RowDropdownOptions from "@/components/table/RowDropdownOptions";
|
||||||
|
import { isResponseSuccess } from "@/lib/api-helper";
|
||||||
|
import { cn } from "@/lib/helper";
|
||||||
|
import { CustomerApi } from "@/services/api/master-data";
|
||||||
|
import { useTableFilter } from "@/services/hooks/useTableFilter";
|
||||||
|
import { Customer } from "@/types/api/master-data/customer";
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import {
|
||||||
|
CellContext,
|
||||||
|
ColumnDef,
|
||||||
|
ColumnSort,
|
||||||
|
SortingState,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
import { useState } from "react";
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
const RowOptionsMenu = ({
|
||||||
|
type = 'dropdown',
|
||||||
|
props,
|
||||||
|
deleteClickHandler,
|
||||||
|
} : {
|
||||||
|
type: 'dropdown' | 'collapse',
|
||||||
|
props: CellContext<Customer, unknown>;
|
||||||
|
deleteClickHandler: () => void;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<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
|
||||||
|
className='justify-start text-sm'
|
||||||
|
>
|
||||||
|
<Icon icon='mdi:eye-outline' width={16} height={16}/>
|
||||||
|
Detail
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className='justify-start text-sm'
|
||||||
|
>
|
||||||
|
<Icon icon='material-symbols:edit-outline' width={16} height={16} />
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className='text-error hover:text-inherit'
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='material-symbols:delete-outline-rounded'
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
className='justify-start text-sm'
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomersTable = () => {
|
||||||
|
const {
|
||||||
|
state: tableFilterState,
|
||||||
|
updateFilter,
|
||||||
|
setPage,
|
||||||
|
setPageSize,
|
||||||
|
toQueryString: getTableFilterQueryString,
|
||||||
|
} = useTableFilter ({
|
||||||
|
initial: { search: '', nameSort: '', picSort: ''},
|
||||||
|
paramMap: {
|
||||||
|
page: 'page',
|
||||||
|
pageSize: 'limit',
|
||||||
|
nameSort: 'sort_name',
|
||||||
|
picSort: 'sort_pic',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: customers,
|
||||||
|
isLoading,
|
||||||
|
mutate: refreshCustomers
|
||||||
|
} = useSWR(
|
||||||
|
`${CustomerApi.basePath}${getTableFilterQueryString()}`,
|
||||||
|
CustomerApi.getAllFetcher
|
||||||
|
);
|
||||||
|
|
||||||
|
const deleteModal = useModal();
|
||||||
|
|
||||||
|
const [selectedCustomer, setSelectedCustomer] = useState<Customer | undefined>(undefined);
|
||||||
|
|
||||||
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
|
|
||||||
|
const customersColumns: ColumnDef<Customer>[] = [
|
||||||
|
{
|
||||||
|
header: '#',
|
||||||
|
cell: (props) =>
|
||||||
|
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||||
|
props.row.index +
|
||||||
|
1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'name',
|
||||||
|
header: 'Nama',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'pic',
|
||||||
|
header: 'PIC',
|
||||||
|
cell: (props) => props.row.original.pic.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'type',
|
||||||
|
header: 'Type',
|
||||||
|
cell: (props) => props.row.original.type,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'phone',
|
||||||
|
header: 'Phone',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'email',
|
||||||
|
header: 'Email',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Aksi',
|
||||||
|
cell: (props) => {
|
||||||
|
const currentPageSize = props.table.getPaginationRowModel().rows.length;
|
||||||
|
const currentPageRows = props.table.getPaginationRowModel().flatRows;
|
||||||
|
const currentRowRelativeIndex =
|
||||||
|
currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
|
||||||
|
|
||||||
|
const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
|
||||||
|
|
||||||
|
const deleteClickHandler = () => {
|
||||||
|
setSelectedCustomer(props.row.original);
|
||||||
|
deleteModal.openModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{currentPageSize > 2 && (
|
||||||
|
<RowDropdownOptions isLast2Rows={isLast2Rows}>
|
||||||
|
<RowOptionsMenu
|
||||||
|
type='dropdown'
|
||||||
|
props={props}
|
||||||
|
deleteClickHandler={deleteClickHandler}
|
||||||
|
/>
|
||||||
|
</RowDropdownOptions>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentPageSize <= 2 && (
|
||||||
|
<RowCollapseOptions>
|
||||||
|
<RowOptionsMenu
|
||||||
|
type='dropdown'
|
||||||
|
props={props}
|
||||||
|
deleteClickHandler={deleteClickHandler}
|
||||||
|
/>
|
||||||
|
</RowCollapseOptions>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
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='/master-data/customer/add' color='primary'>
|
||||||
|
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||||
|
Tambah Customer
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DebouncedTextInput
|
||||||
|
name='search'
|
||||||
|
placeholder='Cari Kandang'
|
||||||
|
value={tableFilterState.search}
|
||||||
|
className={{ wrapper: 'sm:max-w-3xs' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex flex-row justify-end'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table<Customer>
|
||||||
|
data={isResponseSuccess(customers) ? customers?.data : []}
|
||||||
|
columns={customersColumns}
|
||||||
|
pageSize={tableFilterState.pageSize}
|
||||||
|
page={isResponseSuccess(customers) ? customers?.meta?.page : 0}
|
||||||
|
totalItems={
|
||||||
|
isResponseSuccess(customers) ? customers?.meta?.total_results : 0
|
||||||
|
}
|
||||||
|
onPageChange={setPage}
|
||||||
|
isLoading={isLoading}
|
||||||
|
className={{
|
||||||
|
containerClassName: cn({
|
||||||
|
'mb-20':
|
||||||
|
isResponseSuccess(customers) && customers?.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>
|
||||||
|
|
||||||
|
<ConfirmationModal
|
||||||
|
ref={deleteModal.ref}
|
||||||
|
type='error'
|
||||||
|
text={`Apakah anda yakin ingin menghapus data Kandang ini (${selectedCustomer?.name})?`}
|
||||||
|
secondaryButton={{
|
||||||
|
text: 'Tidak',
|
||||||
|
}}
|
||||||
|
primaryButton={{
|
||||||
|
text: 'Ya',
|
||||||
|
color: 'error',
|
||||||
|
isLoading: isDeleteLoading,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CustomersTable;
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import * as Yup from 'yup';
|
||||||
|
|
||||||
|
export const CustomerFormSchema = Yup.object({
|
||||||
|
name: Yup.string()
|
||||||
|
.required('Nama wajib diisi!'),
|
||||||
|
|
||||||
|
picId: Yup.number()
|
||||||
|
.min(1, 'PIC wajib diisi!')
|
||||||
|
.required('PIC wajib diisi!'),
|
||||||
|
|
||||||
|
pic: Yup.object({
|
||||||
|
value: Yup.number().min(1).required(),
|
||||||
|
label: Yup.string().required(),
|
||||||
|
}).nullable(),
|
||||||
|
|
||||||
|
type: Yup.string()
|
||||||
|
.oneOf(['INDIVIDUAL', 'BISNIS'], 'Tipe harus INDIVIDUAL atau BISNIS')
|
||||||
|
.required('Tipe wajib diisi!'),
|
||||||
|
|
||||||
|
address: Yup.string()
|
||||||
|
.required('Alamat wajib diisi!'),
|
||||||
|
|
||||||
|
phone: Yup.string()
|
||||||
|
.matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')
|
||||||
|
.min(10, 'Nomor telepon minimal 10 digit!')
|
||||||
|
.max(12, 'Nomor telepon maksimal 12 digit!')
|
||||||
|
.required('Nomor telepon wajib diisi!'),
|
||||||
|
|
||||||
|
email: Yup.string()
|
||||||
|
.email('Format email tidak valid!')
|
||||||
|
.required('Email wajib diisi!'),
|
||||||
|
|
||||||
|
account_number: Yup.string()
|
||||||
|
.matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
|
||||||
|
.required('Nomor rekening wajib diisi!'),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const UpdateCustomerFormSchema = CustomerFormSchema;
|
||||||
|
|
||||||
|
export type CustomerFormValues = Yup.InferType<typeof CustomerFormSchema>;
|
||||||
@@ -0,0 +1,377 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useModal } from "@/components/Modal";
|
||||||
|
import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
|
||||||
|
import { CustomerApi } from "@/services/api/master-data";
|
||||||
|
import { CreateCustomerPayload, Customer, UpdateCustomerPayload } from "@/types/api/master-data/customer";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import toast from "react-hot-toast";
|
||||||
|
import { CustomerFormValues } from "./CustomerForm.schema";
|
||||||
|
import { useFormik } from "formik";
|
||||||
|
import Button from "@/components/Button";
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import TextInput from "@/components/input/TextInput";
|
||||||
|
import { cn } from "@/lib/helper";
|
||||||
|
import ConfirmationModal from "@/components/modal/ConfirmationModal";
|
||||||
|
import TextArea from "@/components/input/TextArea";
|
||||||
|
import SelectInput, { OptionType } from "@/components/input/SelectInput";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { UserApi } from "@/services/api/user";
|
||||||
|
import { CUSTOMER_TYPE_OPTIONS } from "@/config/constant";
|
||||||
|
|
||||||
|
interface CustomerFormProps {
|
||||||
|
formType?: 'add' | 'edit' | 'detail';
|
||||||
|
initialValues?: Customer;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) => {
|
||||||
|
// Setup Kebutuhan Form
|
||||||
|
const router = useRouter();
|
||||||
|
const deleteModal = useModal();
|
||||||
|
|
||||||
|
// Setup State
|
||||||
|
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({
|
||||||
|
search: picSelectInputValue ?? '',
|
||||||
|
})}`;
|
||||||
|
|
||||||
|
const { data: pic, isLoading: isLoadingPic } = useSWR(
|
||||||
|
picUrl,
|
||||||
|
UserApi.getAllFetcher
|
||||||
|
);
|
||||||
|
|
||||||
|
// -- Options data mapping
|
||||||
|
const picOptions = isResponseSuccess(pic)
|
||||||
|
? pic?.data.map((area) => ({
|
||||||
|
value: area.id,
|
||||||
|
label: area.name,
|
||||||
|
}))
|
||||||
|
: [];
|
||||||
|
const typeOptions = CUSTOMER_TYPE_OPTIONS;
|
||||||
|
|
||||||
|
|
||||||
|
// Handler Event
|
||||||
|
const createCustomerHandler = useCallback(
|
||||||
|
async (payload : CreateCustomerPayload) => {
|
||||||
|
const createCustomerRes = await CustomerApi.create(payload);
|
||||||
|
|
||||||
|
if(isResponseError(createCustomerRes)){
|
||||||
|
setCustomerFormErrorMessage(createCustomerRes.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(createCustomerRes?.message as string);
|
||||||
|
router.push('/master-data/customer');
|
||||||
|
},
|
||||||
|
[router]
|
||||||
|
);
|
||||||
|
const updateCustomerHandler = useCallback(
|
||||||
|
async (customerId : number, payload : UpdateCustomerPayload) => {
|
||||||
|
const updateCustomerRes = await CustomerApi.update(customerId, payload);
|
||||||
|
|
||||||
|
if(isResponseError(updateCustomerRes)){
|
||||||
|
setCustomerFormErrorMessage(updateCustomerRes.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(updateCustomerRes?.message as string);
|
||||||
|
router.push('/master-data/customer');
|
||||||
|
},
|
||||||
|
[router]
|
||||||
|
);
|
||||||
|
|
||||||
|
const deleteCustomerHandler = () => {
|
||||||
|
deleteModal.openModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmationModalDeleteclickHandler = async () => {
|
||||||
|
setIsDeleteLoading(true);
|
||||||
|
|
||||||
|
await CustomerApi.delete(initialValues?.id as number);
|
||||||
|
|
||||||
|
deleteModal.closeModal();
|
||||||
|
setIsDeleteLoading(false);
|
||||||
|
router.push('/master-data/customer');
|
||||||
|
};
|
||||||
|
|
||||||
|
// -- Option Handler
|
||||||
|
const picChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
formik.setFieldTouched('pic', true);
|
||||||
|
formik.setFieldValue('pic', val);
|
||||||
|
|
||||||
|
formik.setFieldTouched('picId', true);
|
||||||
|
formik.setFieldValue('picId', (val as OptionType)?.value);
|
||||||
|
}
|
||||||
|
const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
formik.setFieldTouched('type', true);
|
||||||
|
formik.setFieldValue('type', val);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Memo untuk simpan input sebelumnya
|
||||||
|
const formikInitialValues = useMemo<CustomerFormValues>(() => {
|
||||||
|
return {
|
||||||
|
name: initialValues?.name as string ?? '',
|
||||||
|
email: initialValues?.email ?? '',
|
||||||
|
phone: initialValues?.phone ?? '',
|
||||||
|
picId: initialValues?.pic?.id ?? 0,
|
||||||
|
pic: initialValues?.pic ? {
|
||||||
|
value: initialValues.pic.id,
|
||||||
|
label: initialValues.pic.name,
|
||||||
|
} : null,
|
||||||
|
type: initialValues?.type ?? 'INDIVIDUAL',
|
||||||
|
address: initialValues?.address ?? '',
|
||||||
|
account_number: initialValues?.account_number ?? '',
|
||||||
|
};
|
||||||
|
}, [initialValues]);
|
||||||
|
|
||||||
|
// Formik
|
||||||
|
const formik = useFormik<CustomerFormValues>({
|
||||||
|
initialValues: formikInitialValues,
|
||||||
|
enableReinitialize: true,
|
||||||
|
onSubmit: async (values) => {
|
||||||
|
// reset error message
|
||||||
|
setCustomerFormErrorMessage('');
|
||||||
|
|
||||||
|
// create payload
|
||||||
|
const payload: CreateCustomerPayload = {
|
||||||
|
name: values.name,
|
||||||
|
email: values.email,
|
||||||
|
phone: values.phone,
|
||||||
|
pic_id: values.picId,
|
||||||
|
type: values.type,
|
||||||
|
address: values.address,
|
||||||
|
account_number: values.account_number,
|
||||||
|
};
|
||||||
|
|
||||||
|
// cek type form yang disubmit
|
||||||
|
switch (formType) {
|
||||||
|
case 'add':
|
||||||
|
await createCustomerHandler(payload);
|
||||||
|
break;
|
||||||
|
case 'edit':
|
||||||
|
await updateCustomerHandler(initialValues?.id as number, payload);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
const {setValues: formikSetValues} = formik;
|
||||||
|
|
||||||
|
// Initialize Formik
|
||||||
|
useEffect(() => {
|
||||||
|
formikSetValues(formikInitialValues);
|
||||||
|
}, [formikSetValues, formikInitialValues]);
|
||||||
|
|
||||||
|
|
||||||
|
// Render
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="mx-auto my-8 max-w-xl">
|
||||||
|
<header className="flex flex-col gap-4">
|
||||||
|
<Button
|
||||||
|
href="/master-data/customer"
|
||||||
|
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">
|
||||||
|
{formType === 'add' && 'Tambah Customer'}
|
||||||
|
{formType === 'edit' && 'Ubah Customer'}
|
||||||
|
{formType === 'detail' && 'Detail Customer'}
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<form
|
||||||
|
onSubmit={formik.handleSubmit}
|
||||||
|
onReset={formik.handleReset}
|
||||||
|
className="w-full mt-8 flex flex-col gap-6"
|
||||||
|
>
|
||||||
|
|
||||||
|
{/* Fields Form */}
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label="Nama"
|
||||||
|
name="name"
|
||||||
|
placeholder="Masukkan nama customer"
|
||||||
|
value={formik.values.name}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.name && Boolean(formik.errors.name)}
|
||||||
|
errorMessage={formik.errors.name}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
/>
|
||||||
|
<SelectInput
|
||||||
|
required
|
||||||
|
placeholder="Pilih PIC"
|
||||||
|
label='PIC'
|
||||||
|
value={formik.values.pic ?? undefined}
|
||||||
|
onChange={picChangeHandler}
|
||||||
|
options={picOptions}
|
||||||
|
onInputChange={setPicSelectInputValue}
|
||||||
|
isLoading={isLoadingPic}
|
||||||
|
isError={formik.touched.picId && Boolean(formik.errors.picId)}
|
||||||
|
errorMessage={formik.errors.picId as string}
|
||||||
|
isDisabled={formType === 'detail'}
|
||||||
|
isClearable
|
||||||
|
isSearchable={true}
|
||||||
|
/>
|
||||||
|
<SelectInput
|
||||||
|
required
|
||||||
|
placeholder="Pilih Tipe"
|
||||||
|
label='Tipe'
|
||||||
|
value={typeOptions.find((item) => item.value === formik.values.type) ?? undefined}
|
||||||
|
onChange={typeChangeHandler}
|
||||||
|
options={typeOptions}
|
||||||
|
onInputChange={setTypeSelectInputValue}
|
||||||
|
isError={formik.touched.type && Boolean(formik.errors.type)}
|
||||||
|
errorMessage={formik.errors.type as string}
|
||||||
|
isDisabled={formType === 'detail'}
|
||||||
|
isClearable
|
||||||
|
isSearchable={true}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label="Email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Masukkan email customer"
|
||||||
|
value={formik.values.email}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.email && Boolean(formik.errors.email)}
|
||||||
|
errorMessage={formik.errors.email}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label="Nomor Telepon"
|
||||||
|
name="phone"
|
||||||
|
placeholder="Masukkan nomor telepon customer"
|
||||||
|
value={formik.values.phone}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.phone && Boolean(formik.errors.phone)}
|
||||||
|
errorMessage={formik.errors.phone}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label="Nomor Rekening"
|
||||||
|
name="account_number"
|
||||||
|
placeholder="Masukkan nomor rekening customer"
|
||||||
|
value={formik.values.account_number}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.account_number && Boolean(formik.errors.account_number)}
|
||||||
|
errorMessage={formik.errors.account_number}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
required
|
||||||
|
label="Alamat"
|
||||||
|
name="address"
|
||||||
|
placeholder="Masukkan alamat customer"
|
||||||
|
value={formik.values.address}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.address && Boolean(formik.errors.address)}
|
||||||
|
errorMessage={formik.errors.address}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
cols={8}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Button */}
|
||||||
|
<div className='flex flex-row justify-between gap-2 flex-wrap'>
|
||||||
|
{formType !== 'add' && (
|
||||||
|
<div className='flex flex-row justify-start gap-2'>
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
color='error'
|
||||||
|
onClick={deleteCustomerHandler}
|
||||||
|
className='px-4'
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='material-symbols:delete-outline-rounded'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
className='justify-start text-sm'
|
||||||
|
/>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{formType !== 'edit' && (
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
color='warning'
|
||||||
|
href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
|
||||||
|
className='px-4'
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='material-symbols:edit-outline'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
className='justify-start text-sm'
|
||||||
|
/>
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{formType !== 'detail' && (
|
||||||
|
<div
|
||||||
|
className={cn('flex flex-row justify-end gap-2', {
|
||||||
|
'w-full': formType === 'add',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Button type='reset' color='warning' className='px-4'>
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type='submit'
|
||||||
|
color='primary'
|
||||||
|
isLoading={formik.isSubmitting}
|
||||||
|
disabled={!formik.isValid || formik.isSubmitting}
|
||||||
|
className='px-4'
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{formType !== 'add' && (
|
||||||
|
<ConfirmationModal
|
||||||
|
ref={deleteModal.ref}
|
||||||
|
type='error'
|
||||||
|
text={`Apakah anda yakin ingin menghapus data Customer ini (${initialValues?.name})?`}
|
||||||
|
secondaryButton={{
|
||||||
|
text: 'Tidak',
|
||||||
|
}}
|
||||||
|
primaryButton={{
|
||||||
|
text: 'Ya',
|
||||||
|
color: 'error',
|
||||||
|
onClick: confirmationModalDeleteclickHandler,
|
||||||
|
isLoading: isDeleteLoading,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CustomerForm;
|
||||||
@@ -107,3 +107,14 @@ export const WAREHOUSE_TYPE_OPTIONS = [
|
|||||||
value: 'KANDANG',
|
value: 'KANDANG',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const CUSTOMER_TYPE_OPTIONS = [
|
||||||
|
{
|
||||||
|
label: 'INDIVIDUAL',
|
||||||
|
value: 'INDIVIDUAL',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'BISNIS',
|
||||||
|
value: 'BISNIS',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|||||||
@@ -24,6 +24,11 @@ import {
|
|||||||
UpdateWarehousePayload,
|
UpdateWarehousePayload,
|
||||||
Warehouse,
|
Warehouse,
|
||||||
} from '@/types/api/master-data/warehouse';
|
} from '@/types/api/master-data/warehouse';
|
||||||
|
import {
|
||||||
|
CreateCustomerPayload,
|
||||||
|
Customer,
|
||||||
|
UpdateCustomerPayload,
|
||||||
|
} from '@/types/api/master-data/customer';
|
||||||
|
|
||||||
export const UomApi = new BaseApiService<
|
export const UomApi = new BaseApiService<
|
||||||
Uom,
|
Uom,
|
||||||
@@ -54,3 +59,9 @@ export const WarehouseApi = new BaseApiService<
|
|||||||
CreateWarehousePayload,
|
CreateWarehousePayload,
|
||||||
UpdateWarehousePayload
|
UpdateWarehousePayload
|
||||||
>('/master-data/warehouses');
|
>('/master-data/warehouses');
|
||||||
|
|
||||||
|
export const CustomerApi = new BaseApiService<
|
||||||
|
Customer,
|
||||||
|
CreateCustomerPayload,
|
||||||
|
UpdateCustomerPayload
|
||||||
|
>('/master-data/customers');
|
||||||
+27
@@ -0,0 +1,27 @@
|
|||||||
|
import { BaseMetadata, CreatedUser } from "@/types/api/api-general";
|
||||||
|
|
||||||
|
export type BaseCustomer = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
pic_id: number;
|
||||||
|
pic: CreatedUser;
|
||||||
|
type: 'INDIVIDUAL' | 'BISNIS';
|
||||||
|
address: string;
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
account_number: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Customer = BaseMetadata & BaseCustomer;
|
||||||
|
|
||||||
|
export type CreateCustomerPayload = {
|
||||||
|
name: string;
|
||||||
|
pic_id: number;
|
||||||
|
type: 'INDIVIDUAL' | 'BISNIS';
|
||||||
|
address: string;
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
account_number: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UpdateCustomerPayload = CreateCustomerPayload;
|
||||||
Reference in New Issue
Block a user