mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'feat/FE/US-33/TASK-40-slicing-ui-for-master-data-customers-and-suppliers-forms' into 'feat/FE/US-33/TASK-40-slicing-ui-for-master-data-forms'
[FEAT/FE/US#33/TASK#40] Slicing UI for Costumer and Suppliers Forms in Master Data See merge request mbugroup/lti-web-client!7
This commit is contained in:
Rivaldi A N S
@@ -40,5 +40,8 @@ yarn-error.log*
|
|||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
|
||||||
|
# prettier
|
||||||
|
.prettierrc
|
||||||
|
|
||||||
# idea
|
# idea
|
||||||
.idea
|
.idea
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
|
||||||
|
|
||||||
|
const AddCustomer = () => {
|
||||||
|
return (
|
||||||
|
<section className="w-full p-4 flex flex-row justify-center">
|
||||||
|
<CustomerForm/>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddCustomer;
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
import { CustomerApi } from '@/services/api/master-data';
|
||||||
|
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
|
||||||
|
|
||||||
|
const CustomerEdit = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const costumerId = searchParams.get('customerId');
|
||||||
|
|
||||||
|
const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
|
||||||
|
costumerId,
|
||||||
|
(id: number) => CustomerApi.getSingle(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!costumerId) {
|
||||||
|
router.back();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
|
||||||
|
router.replace('/404');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full p-4 flex flex-row justify-center'>
|
||||||
|
{isLoadingCostumer && (
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
)}
|
||||||
|
{!isLoadingCostumer && isResponseSuccess(costumer) && (
|
||||||
|
<CustomerForm formType='edit' initialValues={costumer.data} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomerEdit;
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { CustomerApi } from '@/services/api/master-data';
|
||||||
|
import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
|
||||||
|
import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
|
||||||
|
|
||||||
|
const CustomerDetail = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const costumerId = searchParams.get("customerId");
|
||||||
|
|
||||||
|
const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
|
||||||
|
costumerId,
|
||||||
|
(id: number) => CustomerApi.getSingle(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
if(!costumerId){
|
||||||
|
router.back();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full flex flex-row justify-center items-center p-4">
|
||||||
|
<span className="loading loading-spinner loading-xl" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
|
||||||
|
router.replace("/404");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full p-4 flex flex-row justify-center">
|
||||||
|
{isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
|
||||||
|
{!isLoadingCostumer && isResponseSuccess(costumer) && (
|
||||||
|
<CustomerForm formType="detail" initialValues={costumer.data} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomerDetail;
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
|
||||||
|
|
||||||
|
const Customer = () => {
|
||||||
|
return (
|
||||||
|
<section className="w-full p-4">
|
||||||
|
<CustomersTable />
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Customer;
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
|
||||||
|
|
||||||
|
const AddSupplier = () => {
|
||||||
|
return (
|
||||||
|
<section className='w-full p-4 flex flex-row justify-center'>
|
||||||
|
<SupplierForm />
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddSupplier;
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
|
||||||
|
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import { SupplierApi } from '@/services/api/master-data';
|
||||||
|
import { useSearchParams, useRouter } from 'next/navigation';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
|
||||||
|
const SupplierEdit = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
// Get Query Params
|
||||||
|
const supplierId = searchParams.get('supplierId');
|
||||||
|
|
||||||
|
// Fetch Data
|
||||||
|
const { data: supplier, isLoading: isLoadingSupplier } = useSWR(
|
||||||
|
supplierId,
|
||||||
|
(id: number) => SupplierApi.getSingle(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!supplierId) {
|
||||||
|
router.back();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
|
||||||
|
router.replace('/404');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full p-4 flex flex-row justify-center'>
|
||||||
|
{isLoadingSupplier && (
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
)}
|
||||||
|
{!isLoadingSupplier && isResponseSuccess(supplier) && (
|
||||||
|
<SupplierForm formType='edit' initialValues={supplier.data} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SupplierEdit;
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import SupplierForm from '@/components/pages/master-data/supplier/form/SupplierForm';
|
||||||
|
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import { SupplierApi } from '@/services/api/master-data';
|
||||||
|
import { useSearchParams, useRouter } from 'next/navigation';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
|
||||||
|
const SupplierDetail = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
// Get Query Params
|
||||||
|
const supplierId = searchParams.get('supplierId');
|
||||||
|
|
||||||
|
// Fetch Data
|
||||||
|
const { data: supplier, isLoading: isLoadingSupplier } = useSWR(
|
||||||
|
supplierId,
|
||||||
|
(id: number) => SupplierApi.getSingle(id)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!supplierId) {
|
||||||
|
router.back();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
|
||||||
|
router.replace('/404');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='w-full p-4 flex flex-row justify-center'>
|
||||||
|
{isLoadingSupplier && (
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
)}
|
||||||
|
{!isLoadingSupplier && isResponseSuccess(supplier) && (
|
||||||
|
<SupplierForm formType='detail' initialValues={supplier.data} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SupplierDetail;
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
|
||||||
|
|
||||||
|
const Supplier = () => {
|
||||||
|
return (
|
||||||
|
<section className='w-full p-4'>
|
||||||
|
<SuppliersTable />
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Supplier;
|
||||||
@@ -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,169 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
|
||||||
|
import { cn } from '@/lib/helper';
|
||||||
|
|
||||||
|
export interface TagInputProps {
|
||||||
|
label?: string;
|
||||||
|
bottomLabel?: string;
|
||||||
|
name: string;
|
||||||
|
value?: string;
|
||||||
|
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;
|
||||||
|
onChange?: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TagInput: React.FC<TagInputProps> = ({
|
||||||
|
label,
|
||||||
|
bottomLabel,
|
||||||
|
name,
|
||||||
|
value = '',
|
||||||
|
placeholder,
|
||||||
|
className,
|
||||||
|
isError,
|
||||||
|
isValid,
|
||||||
|
errorMessage,
|
||||||
|
disabled = false,
|
||||||
|
readOnly = false,
|
||||||
|
required = false,
|
||||||
|
onChange,
|
||||||
|
}) => {
|
||||||
|
const [tags, setTags] = useState<string[]>(value ? value.split(',') : []);
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (value !== undefined && value !== tags.join(',')) {
|
||||||
|
setTags(value ? value.split(',') : []);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ',') {
|
||||||
|
e.preventDefault();
|
||||||
|
const newTag = inputValue.trim();
|
||||||
|
if (newTag && !tags.includes(newTag)) {
|
||||||
|
const updatedTags = [...tags, newTag];
|
||||||
|
setTags(updatedTags);
|
||||||
|
onChange?.(updatedTags.join(','));
|
||||||
|
}
|
||||||
|
setInputValue('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveTag = (tagToRemove: string) => {
|
||||||
|
const updatedTags = tags.filter((t) => t !== tagToRemove);
|
||||||
|
setTags(updatedTags);
|
||||||
|
onChange?.(updatedTags.join(','));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setInputValue(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'w-full flex flex-col gap-2 text-start',
|
||||||
|
className?.wrapper
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* Label */}
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Input wrapper */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-wrap items-start gap-2 border border-gray-400 rounded-md p-2 focus-within:ring-2 focus-within:ring-blue-500 min-h-[42px] transition-all',
|
||||||
|
{
|
||||||
|
'border-error': isError,
|
||||||
|
'border-success!': isValid,
|
||||||
|
'opacity-70 cursor-not-allowed': disabled,
|
||||||
|
},
|
||||||
|
className?.inputWrapper
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
// Fokuskan input saat area diklik
|
||||||
|
const inputEl = document.getElementById(name);
|
||||||
|
inputEl?.focus();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tags.map((tag) => (
|
||||||
|
<div
|
||||||
|
key={tag}
|
||||||
|
className={cn(
|
||||||
|
'badge badge-primary gap-1 px-3 py-3 text-white flex items-center'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span>{tag}</span>
|
||||||
|
{!readOnly && (
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
onClick={() => handleRemoveTag(tag)}
|
||||||
|
className='ml-1 text-white hover:text-red-200 focus:outline-none'
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{!readOnly && (
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
id={name}
|
||||||
|
name={name}
|
||||||
|
value={inputValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
placeholder={placeholder}
|
||||||
|
disabled={disabled}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 min-w-[120px] border-none outline-none p-1 size-min',
|
||||||
|
className?.input
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom label or error message */}
|
||||||
|
{!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 TagInput;
|
||||||
@@ -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,288 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
|
||||||
|
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||||
|
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 { ROWS_OPTIONS } from '@/config/constant';
|
||||||
|
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,
|
||||||
|
} from '@tanstack/react-table';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
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
|
||||||
|
href={`/master-data/customer/detail/?customerId=${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
|
||||||
|
className='justify-start text-sm'
|
||||||
|
href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
|
||||||
|
variant='ghost'
|
||||||
|
color='warning'
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch Data
|
||||||
|
const {
|
||||||
|
data: customers,
|
||||||
|
isLoading,
|
||||||
|
mutate: refreshCustomers,
|
||||||
|
} = useSWR(
|
||||||
|
`${CustomerApi.basePath}${getTableFilterQueryString()}`,
|
||||||
|
CustomerApi.getAllFetcher
|
||||||
|
);
|
||||||
|
|
||||||
|
// State
|
||||||
|
const deleteModal = useModal();
|
||||||
|
const [selectedCustomer, setSelectedCustomer] = useState<
|
||||||
|
Customer | undefined
|
||||||
|
>(undefined);
|
||||||
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
|
|
||||||
|
// Columns Definition
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Handler
|
||||||
|
const confirmationModalDeleteClickHandler = async () => {
|
||||||
|
setIsDeleteLoading(true);
|
||||||
|
|
||||||
|
await CustomerApi.delete(selectedCustomer?.id as number);
|
||||||
|
refreshCustomers();
|
||||||
|
|
||||||
|
deleteModal.closeModal();
|
||||||
|
toast.success('Successfully delete Customer!');
|
||||||
|
setIsDeleteLoading(false);
|
||||||
|
};
|
||||||
|
const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
updateFilter('search', e.target.value);
|
||||||
|
};
|
||||||
|
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
const newVal = val as OptionType;
|
||||||
|
setPageSize(newVal.value as number);
|
||||||
|
};
|
||||||
|
|
||||||
|
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}
|
||||||
|
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<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 Customer ini (${selectedCustomer?.name})?`}
|
||||||
|
secondaryButton={{
|
||||||
|
text: 'Tidak',
|
||||||
|
}}
|
||||||
|
primaryButton={{
|
||||||
|
text: 'Ya',
|
||||||
|
color: 'error',
|
||||||
|
isLoading: isDeleteLoading,
|
||||||
|
onClick: confirmationModalDeleteClickHandler,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomersTable;
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
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(),
|
||||||
|
}).required('PIC wajib diisi!'),
|
||||||
|
|
||||||
|
type: Yup.object({
|
||||||
|
value: Yup.string().required(),
|
||||||
|
label: Yup.string().required(),
|
||||||
|
}).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,410 @@
|
|||||||
|
'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 { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } 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 { 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 = 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);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Utils Functions
|
||||||
|
const normalizeType = (type?: string | { value: string; label: string }) => {
|
||||||
|
if (!type) return TYPE_OPTIONS[0];
|
||||||
|
return typeof type === 'string' ? { value: type, label: type } : type;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Memo untuk simpan input sebelumnya
|
||||||
|
const formikInitialValues = useMemo<CustomerFormValues>(() => {
|
||||||
|
return {
|
||||||
|
name: initialValues?.name ?? '',
|
||||||
|
email: initialValues?.email ?? '',
|
||||||
|
phone: initialValues?.phone ?? '',
|
||||||
|
picId: initialValues?.pic?.id ?? 0,
|
||||||
|
pic: initialValues?.pic
|
||||||
|
? {
|
||||||
|
value: initialValues.pic.id,
|
||||||
|
label: initialValues.pic.name,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
value: 0,
|
||||||
|
label: '',
|
||||||
|
},
|
||||||
|
type: normalizeType(initialValues?.type),
|
||||||
|
address: initialValues?.address ?? '',
|
||||||
|
account_number: initialValues?.account_number ?? '',
|
||||||
|
};
|
||||||
|
}, [initialValues]);
|
||||||
|
|
||||||
|
// Formik
|
||||||
|
const formik = useFormik<CustomerFormValues>({
|
||||||
|
initialValues: formikInitialValues,
|
||||||
|
enableReinitialize: true,
|
||||||
|
validationSchema: formType === 'edit' ? UpdateCustomerFormSchema : CustomerFormSchema,
|
||||||
|
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 as OptionType).value as string,
|
||||||
|
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='w-full 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?.value
|
||||||
|
) ?? 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/customer/detail/edit/?customerId=${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>
|
||||||
|
|
||||||
|
{customerFormErrorMessage && (
|
||||||
|
<div role='alert' className='alert alert-error'>
|
||||||
|
<Icon
|
||||||
|
icon='material-symbols:error-outline'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
|
<span>{customerFormErrorMessage}</span>
|
||||||
|
</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;
|
||||||
@@ -0,0 +1,303 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
|
||||||
|
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||||
|
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 { ROWS_OPTIONS } from '@/config/constant';
|
||||||
|
import { isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import { cn } from '@/lib/helper';
|
||||||
|
import { SupplierApi } from '@/services/api/master-data';
|
||||||
|
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||||
|
import { Supplier } from '@/types/api/master-data/supplier';
|
||||||
|
import { Icon } from '@iconify/react';
|
||||||
|
import { CellContext, ColumnDef } from '@tanstack/react-table';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
|
||||||
|
const RowOptions = ({
|
||||||
|
type = 'dropdown',
|
||||||
|
props,
|
||||||
|
deleteClickHandler,
|
||||||
|
}: {
|
||||||
|
type: 'dropdown' | 'collapse';
|
||||||
|
props: CellContext<Supplier, 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
|
||||||
|
href={`/master-data/supplier/detail/?supplierId=${props.row.original.id}`}
|
||||||
|
variant='ghost'
|
||||||
|
color='primary'
|
||||||
|
className='justify-start text-sm'
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='mdi:eye-outline'
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
className='justify-start text-sm'
|
||||||
|
/>
|
||||||
|
Detail
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
href={`/master-data/supplier/detail/edit/?supplierId=${props.row.original.id}`}
|
||||||
|
variant='ghost'
|
||||||
|
color='warning'
|
||||||
|
className='justify-start text-sm'
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='material-symbols:edit-outline'
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
className='justify-start text-sm'
|
||||||
|
/>
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const SuppliersTable = () => {
|
||||||
|
const {
|
||||||
|
state: tableFilterState,
|
||||||
|
updateFilter,
|
||||||
|
setPage,
|
||||||
|
setPageSize,
|
||||||
|
toQueryString: getTableFilterQueryString,
|
||||||
|
} = useTableFilter({
|
||||||
|
initial: { search: '', nameSort: '' },
|
||||||
|
paramMap: {
|
||||||
|
page: 'page',
|
||||||
|
pageSize: 'limit',
|
||||||
|
nameSort: 'sort_name',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch Data
|
||||||
|
const {
|
||||||
|
data: suppliers,
|
||||||
|
isLoading,
|
||||||
|
mutate: refreshSuppliers,
|
||||||
|
} = useSWR(
|
||||||
|
`${SupplierApi.basePath}${getTableFilterQueryString()}`,
|
||||||
|
SupplierApi.getAllFetcher
|
||||||
|
);
|
||||||
|
|
||||||
|
// State
|
||||||
|
const deleteModal = useModal();
|
||||||
|
const [selectedSupplier, setSelectedSupplier] = useState<
|
||||||
|
Supplier | undefined
|
||||||
|
>(undefined);
|
||||||
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
|
|
||||||
|
// Columns Definition
|
||||||
|
const suppliersColumns: ColumnDef<Supplier>[] = [
|
||||||
|
{
|
||||||
|
header: '#',
|
||||||
|
cell: (props) =>
|
||||||
|
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||||
|
props.row.index +
|
||||||
|
1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'name',
|
||||||
|
header: 'Nama',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'alias',
|
||||||
|
header: 'Alias',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'pic',
|
||||||
|
header: 'Nama PIC',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'category',
|
||||||
|
header: 'Kategori',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'type',
|
||||||
|
header: 'Tipe',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'phone',
|
||||||
|
header: 'No. Telp',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'email',
|
||||||
|
header: 'Email',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'address',
|
||||||
|
header: 'Alamat',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 = () => {
|
||||||
|
setSelectedSupplier(props.row.original);
|
||||||
|
deleteModal.openModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{currentPageSize > 2 && (
|
||||||
|
<RowDropdownOptions isLast2Rows={isLast2Rows}>
|
||||||
|
<RowOptions
|
||||||
|
type='dropdown'
|
||||||
|
props={props}
|
||||||
|
deleteClickHandler={deleteClickHandler}
|
||||||
|
/>
|
||||||
|
</RowDropdownOptions>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{currentPageSize <= 2 && (
|
||||||
|
<RowCollapseOptions>
|
||||||
|
<RowOptions
|
||||||
|
type='collapse'
|
||||||
|
props={props}
|
||||||
|
deleteClickHandler={deleteClickHandler}
|
||||||
|
/>
|
||||||
|
</RowCollapseOptions>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Handler
|
||||||
|
const confirmationModalDeleteClickHandler = async () => {
|
||||||
|
setIsDeleteLoading(true);
|
||||||
|
|
||||||
|
await SupplierApi.delete(selectedSupplier?.id as number);
|
||||||
|
refreshSuppliers();
|
||||||
|
|
||||||
|
deleteModal.closeModal();
|
||||||
|
toast.success('Successfully delete Supplier!');
|
||||||
|
setIsDeleteLoading(false);
|
||||||
|
};
|
||||||
|
const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
updateFilter('search', e.target.value);
|
||||||
|
};
|
||||||
|
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
const newVal = val as OptionType;
|
||||||
|
setPageSize(newVal.value as number);
|
||||||
|
};
|
||||||
|
|
||||||
|
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/supplier/add' color='primary'>
|
||||||
|
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||||
|
Tambah Supplier
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DebouncedTextInput
|
||||||
|
name='search'
|
||||||
|
placeholder='Cari Supplier'
|
||||||
|
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<Supplier>
|
||||||
|
data={isResponseSuccess(suppliers) ? suppliers?.data : []}
|
||||||
|
columns={suppliersColumns}
|
||||||
|
pageSize={tableFilterState.pageSize}
|
||||||
|
page={isResponseSuccess(suppliers) ? suppliers?.meta?.page : 0}
|
||||||
|
totalItems={
|
||||||
|
isResponseSuccess(suppliers) ? suppliers?.meta?.total_results : 0
|
||||||
|
}
|
||||||
|
onPageChange={setPage}
|
||||||
|
isLoading={isLoading}
|
||||||
|
className={{
|
||||||
|
containerClassName: cn({
|
||||||
|
'mb-20':
|
||||||
|
isResponseSuccess(suppliers) && suppliers?.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 Supplier ini (${selectedSupplier?.name})?`}
|
||||||
|
secondaryButton={{
|
||||||
|
text: 'Tidak',
|
||||||
|
}}
|
||||||
|
primaryButton={{
|
||||||
|
text: 'Ya',
|
||||||
|
color: 'error',
|
||||||
|
isLoading: isDeleteLoading,
|
||||||
|
onClick: confirmationModalDeleteClickHandler,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SuppliersTable;
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import * as Yup from 'yup';
|
||||||
|
|
||||||
|
export const SupplierFormSchema = Yup.object({
|
||||||
|
name: Yup.string().required('Nama wajib diisi!'),
|
||||||
|
alias: Yup.string().required('Alias wajib diisi!'),
|
||||||
|
pic: Yup.string().required('PIC wajib diisi!'),
|
||||||
|
type: Yup.object({
|
||||||
|
value: Yup.string().required(),
|
||||||
|
label: Yup.string().required(),
|
||||||
|
})
|
||||||
|
.required('Tipe wajib diisi!'),
|
||||||
|
category: Yup.object({
|
||||||
|
value: Yup.string().required(),
|
||||||
|
label: Yup.string().required(),
|
||||||
|
})
|
||||||
|
.required('Tipe wajib diisi!'),
|
||||||
|
hatchery: Yup.string().required('Hatchery 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!'),
|
||||||
|
address: Yup.string().required('Alamat wajib diisi!'),
|
||||||
|
npwp: Yup.string()
|
||||||
|
.matches(/^[0-9]+$/, 'Nomor NPWP hanya boleh berisi angka!')
|
||||||
|
.required('Nomor NPWP wajib diisi!'),
|
||||||
|
account_number: Yup.string()
|
||||||
|
.matches(/^[0-9]+$/, 'Nomor rekening hanya boleh berisi angka!')
|
||||||
|
.required('Nomor rekening wajib diisi!'),
|
||||||
|
due_date: Yup.number().min(1, 'Tanggal jatuh tempo wajib diisi!').required('Tanggal jatuh tempo wajib diisi!'),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const UpdateSupplierFormSchema = SupplierFormSchema;
|
||||||
|
|
||||||
|
export type SupplierFormValues = Yup.InferType<typeof SupplierFormSchema>;
|
||||||
@@ -0,0 +1,480 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useModal } from '@/components/Modal';
|
||||||
|
import { CATEGORY_OPTIONS, TYPE_OPTIONS } from '@/config/constant';
|
||||||
|
import { isResponseError } from '@/lib/api-helper';
|
||||||
|
import { SupplierApi } from '@/services/api/master-data';
|
||||||
|
import {
|
||||||
|
CreateSupplierPayload,
|
||||||
|
Supplier,
|
||||||
|
} from '@/types/api/master-data/supplier';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import {
|
||||||
|
SupplierFormSchema,
|
||||||
|
SupplierFormValues,
|
||||||
|
UpdateSupplierFormSchema,
|
||||||
|
} from './SupplierForm.schema';
|
||||||
|
import { useFormik } from 'formik';
|
||||||
|
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';
|
||||||
|
|
||||||
|
interface SupplierCustomProps {
|
||||||
|
formType?: 'add' | 'edit' | 'detail';
|
||||||
|
initialValues?: Supplier;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SupplierForm = ({
|
||||||
|
formType = 'add',
|
||||||
|
initialValues,
|
||||||
|
}: SupplierCustomProps) => {
|
||||||
|
// Setup Kebutuhan Form
|
||||||
|
const router = useRouter();
|
||||||
|
const deleteModal = useModal();
|
||||||
|
|
||||||
|
// Setup State
|
||||||
|
const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
|
||||||
|
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||||
|
const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
|
||||||
|
const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
|
||||||
|
const [hatcheryTagInputValue, setHatcheryTagInputValue] = useState('');
|
||||||
|
|
||||||
|
// -- Options data mapping
|
||||||
|
const typeOptions = TYPE_OPTIONS;
|
||||||
|
const categoryOptions = CATEGORY_OPTIONS;
|
||||||
|
|
||||||
|
// Handler Event
|
||||||
|
const createSupplierHandler = useCallback(
|
||||||
|
async (payload: CreateSupplierPayload) => {
|
||||||
|
const createSupplierRes = await SupplierApi.create(payload);
|
||||||
|
|
||||||
|
if (isResponseError(createSupplierRes)) {
|
||||||
|
setSupplierFormErrorMessage(createSupplierRes.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(createSupplierRes?.message as string);
|
||||||
|
router.push('/master-data/supplier');
|
||||||
|
},
|
||||||
|
[router]
|
||||||
|
);
|
||||||
|
|
||||||
|
const updateSupplierHandler = useCallback(
|
||||||
|
async (supplierId: number, payload: CreateSupplierPayload) => {
|
||||||
|
const updateSupplierRes = await SupplierApi.update(supplierId, payload);
|
||||||
|
|
||||||
|
if (isResponseError(updateSupplierRes)) {
|
||||||
|
setSupplierFormErrorMessage(updateSupplierRes.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(updateSupplierRes?.message as string);
|
||||||
|
router.push('/master-data/supplier');
|
||||||
|
},
|
||||||
|
[router]
|
||||||
|
);
|
||||||
|
|
||||||
|
const deleteSupplierHandler = () => {
|
||||||
|
deleteModal.openModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmationModalDeleteclickHandler = async () => {
|
||||||
|
setIsDeleteLoading(true);
|
||||||
|
|
||||||
|
await SupplierApi.delete(initialValues?.id as number);
|
||||||
|
|
||||||
|
deleteModal.closeModal();
|
||||||
|
setIsDeleteLoading(false);
|
||||||
|
router.push('/master-data/supplier');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Utils Functions
|
||||||
|
const normalizeOptionValue = (
|
||||||
|
type?: string | { value: string; label: string },
|
||||||
|
options?: OptionType[]
|
||||||
|
): { value: string; label: string } => {
|
||||||
|
if (!type && !options) return { value: '', label: '' };
|
||||||
|
if (!type && options && options.length > 0)
|
||||||
|
return options[0] as { value: string; label: string };
|
||||||
|
if (typeof type === 'string') return { value: type, label: type };
|
||||||
|
return type ?? { value: '', label: '' };
|
||||||
|
};
|
||||||
|
|
||||||
|
// Memo
|
||||||
|
console.log('Memo');
|
||||||
|
console.log(initialValues);
|
||||||
|
const formikInitialValues = useMemo<SupplierFormValues>(() => {
|
||||||
|
return {
|
||||||
|
name: initialValues?.name ?? '',
|
||||||
|
alias: initialValues?.alias ?? '',
|
||||||
|
pic: initialValues?.pic ?? '',
|
||||||
|
type: normalizeOptionValue(initialValues?.type, typeOptions),
|
||||||
|
category: normalizeOptionValue(initialValues?.category, categoryOptions),
|
||||||
|
hatchery: initialValues?.hatchery ?? '',
|
||||||
|
phone: initialValues?.phone ?? '',
|
||||||
|
email: initialValues?.email ?? '',
|
||||||
|
address: initialValues?.address ?? '',
|
||||||
|
npwp: initialValues?.npwp ?? '',
|
||||||
|
account_number: initialValues?.account_number ?? '',
|
||||||
|
due_date: initialValues?.due_date ?? 1,
|
||||||
|
};
|
||||||
|
}, [initialValues]);
|
||||||
|
|
||||||
|
// Formik
|
||||||
|
const formik = useFormik<SupplierFormValues>({
|
||||||
|
initialValues: formikInitialValues,
|
||||||
|
enableReinitialize: true,
|
||||||
|
validationSchema:
|
||||||
|
formType === 'edit' ? UpdateSupplierFormSchema : SupplierFormSchema,
|
||||||
|
onSubmit: async (values) => {
|
||||||
|
// reset error message
|
||||||
|
setSupplierFormErrorMessage('');
|
||||||
|
|
||||||
|
// create payload
|
||||||
|
const payload: CreateSupplierPayload = {
|
||||||
|
name: values.name,
|
||||||
|
alias: values.alias,
|
||||||
|
pic: values.pic,
|
||||||
|
type: values.type.value,
|
||||||
|
category: values.category.value,
|
||||||
|
hatchery: values.hatchery,
|
||||||
|
phone: values.phone,
|
||||||
|
email: values.email,
|
||||||
|
address: values.address,
|
||||||
|
npwp: values.npwp,
|
||||||
|
account_number: values.account_number,
|
||||||
|
due_date: parseInt(values.due_date.toString()),
|
||||||
|
};
|
||||||
|
|
||||||
|
// cek type form yang disubmit
|
||||||
|
switch (formType) {
|
||||||
|
case 'add':
|
||||||
|
await createSupplierHandler(payload);
|
||||||
|
break;
|
||||||
|
case 'edit':
|
||||||
|
await updateSupplierHandler(initialValues?.id as number, payload);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { setValues: formikSetValues } = formik;
|
||||||
|
|
||||||
|
// Initialize Formik
|
||||||
|
useEffect(() => {
|
||||||
|
formikSetValues(formikInitialValues);
|
||||||
|
setHatcheryTagInputValue(formikInitialValues.hatchery);
|
||||||
|
}, [formikSetValues, formikInitialValues, hatcheryTagInputValue]);
|
||||||
|
|
||||||
|
// Option Handler
|
||||||
|
const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
formik.setFieldTouched('type', true);
|
||||||
|
formik.setFieldValue('type', val);
|
||||||
|
};
|
||||||
|
const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||||
|
formik.setFieldTouched('category', true);
|
||||||
|
formik.setFieldValue('category', val);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Render
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className='w-full max-w-xl'>
|
||||||
|
<header className='flex flex-col gap-4'>
|
||||||
|
<Button
|
||||||
|
href='/master-data/supplier'
|
||||||
|
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 Supplier'}
|
||||||
|
{formType === 'edit' && 'Ubah Supplier'}
|
||||||
|
{formType === 'detail' && 'Detail Supplier'}
|
||||||
|
</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 Supplier'
|
||||||
|
name='name'
|
||||||
|
placeholder='Masukkan nama supplier'
|
||||||
|
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'}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label='Nama Alias'
|
||||||
|
name='alias'
|
||||||
|
placeholder='Masukkan alias supplier'
|
||||||
|
value={formik.values.alias}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.alias && Boolean(formik.errors.alias)}
|
||||||
|
errorMessage={formik.errors.alias}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label='Nama PIC'
|
||||||
|
name='pic'
|
||||||
|
placeholder='Masukkan PIC supplier'
|
||||||
|
value={formik.values.pic}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.pic && Boolean(formik.errors.pic)}
|
||||||
|
errorMessage={formik.errors.pic}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
/>
|
||||||
|
<SelectInput
|
||||||
|
required
|
||||||
|
placeholder='Pilih Tipe'
|
||||||
|
label='Tipe'
|
||||||
|
value={
|
||||||
|
typeOptions.find(
|
||||||
|
(item) => item.value === formik.values.type?.value
|
||||||
|
) ?? 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}
|
||||||
|
/>
|
||||||
|
<SelectInput
|
||||||
|
required
|
||||||
|
placeholder='Pilih Kategori'
|
||||||
|
label='Kategori'
|
||||||
|
value={
|
||||||
|
categoryOptions.find(
|
||||||
|
(item) => item.value === formik.values.category?.value
|
||||||
|
) ?? undefined
|
||||||
|
}
|
||||||
|
onChange={categoryChangeHandler}
|
||||||
|
options={categoryOptions}
|
||||||
|
onInputChange={setCategorySelectInputValue}
|
||||||
|
isError={
|
||||||
|
formik.touched.category && Boolean(formik.errors.category)
|
||||||
|
}
|
||||||
|
errorMessage={formik.errors.category as string}
|
||||||
|
isDisabled={formType === 'detail'}
|
||||||
|
isClearable
|
||||||
|
isSearchable={true}
|
||||||
|
/>
|
||||||
|
<TagInput
|
||||||
|
name='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'}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label='Nomor Telepon'
|
||||||
|
name='phone'
|
||||||
|
placeholder='Masukkan nomor telepon supplier'
|
||||||
|
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='Email'
|
||||||
|
name='email'
|
||||||
|
placeholder='Masukkan email supplier'
|
||||||
|
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'}
|
||||||
|
/>
|
||||||
|
<TextArea
|
||||||
|
required
|
||||||
|
label='Alamat'
|
||||||
|
name='address'
|
||||||
|
placeholder='Masukkan alamat supplier'
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label='NPWP'
|
||||||
|
name='npwp'
|
||||||
|
placeholder='Masukkan NPWP supplier'
|
||||||
|
value={formik.values.npwp}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={formik.touched.npwp && Boolean(formik.errors.npwp)}
|
||||||
|
errorMessage={formik.errors.npwp}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
label='Nomor Rekening'
|
||||||
|
name='account_number'
|
||||||
|
placeholder='Masukkan nomor rekening supplier'
|
||||||
|
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'}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
required
|
||||||
|
type='number'
|
||||||
|
className={{
|
||||||
|
wrapper: 'w-fit',
|
||||||
|
}}
|
||||||
|
label='Jatuh Tempo'
|
||||||
|
name='due_date'
|
||||||
|
placeholder='Masukkan tanggal pembayaran supplier'
|
||||||
|
value={formik.values.due_date}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
onBlur={formik.handleBlur}
|
||||||
|
isError={
|
||||||
|
formik.touched.due_date && Boolean(formik.errors.due_date)
|
||||||
|
}
|
||||||
|
errorMessage={formik.errors.due_date}
|
||||||
|
readOnly={formType === 'detail'}
|
||||||
|
endAdornment={<div>Hari</div>}
|
||||||
|
/>
|
||||||
|
</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={deleteSupplierHandler}
|
||||||
|
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/supplier/detail/edit/?supplierId=${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>
|
||||||
|
|
||||||
|
{supplierFormErrorMessage && (
|
||||||
|
<div role='alert' className='alert alert-error'>
|
||||||
|
<Icon
|
||||||
|
icon='material-symbols:error-outline'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
|
<span>{supplierFormErrorMessage}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{formType !== 'add' && (
|
||||||
|
<ConfirmationModal
|
||||||
|
ref={deleteModal.ref}
|
||||||
|
type='error'
|
||||||
|
text={`Apakah anda yakin ingin menghapus data Supplier ini (${initialValues?.name})?`}
|
||||||
|
secondaryButton={{
|
||||||
|
text: 'Tidak',
|
||||||
|
}}
|
||||||
|
primaryButton={{
|
||||||
|
text: 'Ya',
|
||||||
|
color: 'error',
|
||||||
|
onClick: confirmationModalDeleteclickHandler,
|
||||||
|
isLoading: isDeleteLoading,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SupplierForm;
|
||||||
@@ -115,6 +115,28 @@ export const WAREHOUSE_TYPE_OPTIONS = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const TYPE_OPTIONS = [
|
||||||
|
{
|
||||||
|
label: 'INDIVIDUAL',
|
||||||
|
value: 'INDIVIDUAL',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'BISNIS',
|
||||||
|
value: 'BISNIS',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const CATEGORY_OPTIONS = [
|
||||||
|
{
|
||||||
|
label: 'BOP',
|
||||||
|
value: 'BOP',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'SAPRONAK',
|
||||||
|
value: 'SAPRONAK',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export const PRODUCT_FLAG_OPTIONS = [
|
export const PRODUCT_FLAG_OPTIONS = [
|
||||||
{ label: 'DOC', value: 'DOC' },
|
{ label: 'DOC', value: 'DOC' },
|
||||||
{ label: 'PAKAN', value: 'PAKAN' },
|
{ label: 'PAKAN', value: 'PAKAN' },
|
||||||
|
|||||||
@@ -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';
|
||||||
import {
|
import {
|
||||||
CreateProductCategoryPayload,
|
CreateProductCategoryPayload,
|
||||||
ProductCategory,
|
ProductCategory,
|
||||||
@@ -85,6 +90,11 @@ export const WarehouseApi = new BaseApiService<
|
|||||||
UpdateWarehousePayload
|
UpdateWarehousePayload
|
||||||
>('/master-data/warehouses');
|
>('/master-data/warehouses');
|
||||||
|
|
||||||
|
export const CustomerApi = new BaseApiService<
|
||||||
|
Customer,
|
||||||
|
CreateCustomerPayload,
|
||||||
|
UpdateCustomerPayload
|
||||||
|
>('/master-data/customers');
|
||||||
export const ProductCategoryApi = new BaseApiService<
|
export const ProductCategoryApi = new BaseApiService<
|
||||||
ProductCategory,
|
ProductCategory,
|
||||||
CreateProductCategoryPayload,
|
CreateProductCategoryPayload,
|
||||||
|
|||||||
+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: string;
|
||||||
|
address: string;
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
account_number: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Customer = BaseMetadata & BaseCustomer;
|
||||||
|
|
||||||
|
export type CreateCustomerPayload = {
|
||||||
|
name: string;
|
||||||
|
pic_id: number;
|
||||||
|
type: string;
|
||||||
|
address: string;
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
account_number: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UpdateCustomerPayload = CreateCustomerPayload;
|
||||||
+10
-6
@@ -4,31 +4,35 @@ export type BaseSupplier = {
|
|||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
alias: string;
|
alias: string;
|
||||||
category: string;
|
|
||||||
pic: string;
|
pic: string;
|
||||||
type: string;
|
type: string;
|
||||||
|
category: string;
|
||||||
|
hatchery: string;
|
||||||
phone: string;
|
phone: string;
|
||||||
email: string;
|
email: string;
|
||||||
address: string;
|
address: string;
|
||||||
|
npwp: string;
|
||||||
account_number: string;
|
account_number: string;
|
||||||
balance: number;
|
|
||||||
due_date: number;
|
due_date: number;
|
||||||
};
|
balance?: number;
|
||||||
|
}
|
||||||
|
|
||||||
export type Supplier = BaseMetadata & BaseSupplier;
|
export type Supplier = BaseMetadata & BaseSupplier;
|
||||||
|
|
||||||
export type CreateSupplierPayload = {
|
export type CreateSupplierPayload = {
|
||||||
name: string;
|
name: string;
|
||||||
alias: string;
|
alias: string;
|
||||||
category: string;
|
|
||||||
pic: string;
|
pic: string;
|
||||||
type: string;
|
type: string;
|
||||||
|
category: string;
|
||||||
|
hatchery: string;
|
||||||
phone: string;
|
phone: string;
|
||||||
email: string;
|
email: string;
|
||||||
address: string;
|
address: string;
|
||||||
|
npwp: string;
|
||||||
account_number: string;
|
account_number: string;
|
||||||
balance: number;
|
|
||||||
due_date: number;
|
due_date: number;
|
||||||
};
|
balance?: number;
|
||||||
|
}
|
||||||
|
|
||||||
export type UpdateSupplierPayload = CreateSupplierPayload;
|
export type UpdateSupplierPayload = CreateSupplierPayload;
|
||||||
Reference in New Issue
Block a user