This commit is contained in:
Raja Oktafrianto
2025-04-12 10:56:55 +07:00
35 changed files with 2431 additions and 547 deletions

View File

@ -23,6 +23,7 @@ import {
SelectValue
} from '@/components/ui/select';
import { doSaveLogActivity } from '@/actions/GlobalActions';
import { NumericFormat } from 'react-number-format';
interface ProviderProps {
provider_id: string;
@ -41,15 +42,29 @@ const EditDialog = () => {
show: false,
message: ''
});
const initialState = {
const initialState: {
name: string;
code: string;
type: string;
description: string;
price_point: string | number | null;
price_cash: string | number | null;
cashback_point: string | number | null;
cashback_cash: string | number | null;
status: string;
provider: string;
process_on_third_party: string;
updated_by: string;
updated_at: string;
} = {
name: '',
code: '',
type: '',
description: '',
price_point: 0,
price_cash: 0,
cashback_point: 0,
cashback_cash: 0,
price_point: null,
price_cash: null,
cashback_point: null,
cashback_cash: null,
status: '',
provider: '',
process_on_third_party: '',
@ -139,11 +154,13 @@ const EditDialog = () => {
formField.type.trim() === '' ||
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === 0 ||
formField.price_cash === 0 ||
formField.cashback_point === 0 ||
formField.cashback_cash === 0 ||
formField.status === '' ||
formField.price_point === null ||
formField.price_cash === null ||
formField.cashback_point === null ||
formField.cashback_cash === null ||
formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.updated_by.trim() === '' ||
formField.updated_at.trim() === ''
) {
@ -152,7 +169,7 @@ const EditDialog = () => {
}
doUpdateProduct(e);
console.log(formField);
// console.log(formField);
setAlert({ show: false, message: '' });
};
@ -260,16 +277,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.price_point}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({ ...formField, price_point: isNaN(value) ? 0 : value });
value={formField.price_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_point: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Price Point"
/>
</div>
</div>
@ -279,16 +299,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.price_cash}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({ ...formField, price_cash: isNaN(value) ? 0 : value });
value={formField.price_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
price_cash: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Price Cash"
/>
</div>
</div>
@ -298,16 +321,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.cashback_point}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({ ...formField, cashback_point: isNaN(value) ? 0 : value });
value={formField.cashback_point ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_point: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Cashback Point"
/>
</div>
</div>
@ -317,16 +343,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
min={0}
step={0.01}
value={formField.cashback_cash}
onChange={(e) => {
const value = parseFloat(e.target.value);
setFormField({ ...formField, cashback_cash: isNaN(value) ? 0 : value });
value={formField.cashback_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Cashback Cash"
/>
</div>
</div>

View File

@ -72,6 +72,19 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.code,
id: 'code',
header: ({ column }) => <DataGridColumnHeader title="Code" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
},
filterFn: (row, id, value) => {
return row.original.products_name.toLowerCase().includes(value.toLowerCase());
}
},
{
accessorFn: (row) => row.name,
id: 'name',
@ -89,12 +102,32 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
accessorFn: (row) => row.description,
id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.provider?.name,
id: 'provider_name',
header: ({ column }) => <DataGridColumnHeader title="Provider Name" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.type,
id: 'type',
header: ({ column }) => <DataGridColumnHeader title="Type" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[150px]'
}
},
{
accessorFn: (row) => row.price_point,
id: 'price_point',
@ -115,6 +148,64 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.cashback_point,
id: 'cashback_point',
header: ({ column }) => <DataGridColumnHeader title="Cashback Point" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.cashback_cash,
id: 'cashback_cash',
header: ({ column }) => <DataGridColumnHeader title="Cashback Cash" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.process_on_third_party,
id: 'process_on_third_party',
header: ({ column }) => <DataGridColumnHeader title="Third Party" column={column} />,
cell: ({ row }) => {
const isActive = row.original.process_on_third_party === 'Y';
return <span>{isActive ? 'Yes' : 'No'}</span>;
},
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.status,
id: 'status',
header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
cell: ({ row }) => {
const isActive = row.original.status === 'Y';
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
}`}
>
{isActive ? 'Active' : 'Inactive'}
</span>
);
},
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
id: 'actions',
header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
@ -160,7 +251,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
// console.log(response?.data);
console.log(response?.data);
setProducts(response?.data.list);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
@ -189,7 +280,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'Product.id', desc: false }]}
sorting={[{ id: 'Product.created_at', desc: true }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getProductsLists(pageIndex, pageSize, sorting, columnFilters)