diff --git a/src/pages/master/products/ProductsMaster.tsx b/src/pages/master/products/ProductsMaster.tsx new file mode 100644 index 0000000..d4dd679 --- /dev/null +++ b/src/pages/master/products/ProductsMaster.tsx @@ -0,0 +1,23 @@ +import { Container, DataGridInner } from '@/components'; +import { ManageProductsContextProvider } from './hooks/ManageProductsContext'; +import AddDialog from './blocks/AddDialog'; +import EditDialog from './blocks/EditDialog'; +import DeleteDialog from './blocks/DeleteDialog'; + +const ProductsMaster = () => { + return ( + + +

Products

+
+ +
+ + + + + + ); +}; + +export default ProductsMaster; diff --git a/src/pages/master/products/blocks/AddDialog.tsx b/src/pages/master/products/blocks/AddDialog.tsx new file mode 100644 index 0000000..21d77d3 --- /dev/null +++ b/src/pages/master/products/blocks/AddDialog.tsx @@ -0,0 +1,267 @@ +import { getAuth } from '@/auth'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { useManageProductsContext } from '../hooks/useManageProductsContext'; +import { useCallApi } from '@/hooks'; +import { Alert, useDataGrid } from '@/components'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_master_data; +const AddDialog = () => { + const parentRef = useRef(null); + const parsedUser = getAuth()?.user; + const { showAddDialog, handleAddDialog } = useManageProductsContext(); + const { PostData } = useCallApi(); + const { reload } = useDataGrid(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState = { + name: '', + description: '', + price_point: 0, + price_cash: 0, + cashback_point: 0, + cashback_cash: 0, + status: '', + providerId: '', + created_by: '', + created_at: '' + }; + const [formField, setFormField] = useState(initialState); + const created_time = new Date(); + const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + const doCreateProduct = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PostData(`${API_URL}/product/create`, formField); + + if (response?.status) { + resetForm(); + handleAddDialog(false); + toast.success('Success Create Product'); + reload(); + } else { + toast.error('Failed Create Product'); + setAlert({ show: true, message: response?.message }); + } + }, + [formField] + ); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.name === '' || + formField.description === '' || + formField.price_point === 0 || + formField.price_cash === 0 || + formField.cashback_point === 0 || + formField.cashback_cash === 0 || + formField.status === '' || + formField.created_by === '' || + formField.created_at === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + doCreateProduct(e); + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + useEffect(() => { + if (showAddDialog) { + setFormField({ + ...formField, + created_by: parsedUser.username, + created_at: formattedTime + }); + } + }, [formattedTime]); + + return ( + handleAddDialog(open)}> + + + Product - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, description: e.target.value })} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, price_point: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, price_cash: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, cashback_point: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, cashback_cash: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + setFormField({ ...formField, status: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, providerId: e.target.value })} + /> +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default AddDialog; diff --git a/src/pages/master/products/blocks/DeleteDialog.tsx b/src/pages/master/products/blocks/DeleteDialog.tsx new file mode 100644 index 0000000..1f09243 --- /dev/null +++ b/src/pages/master/products/blocks/DeleteDialog.tsx @@ -0,0 +1,74 @@ +import { apiConfig } from '@/config/api.config'; +import { useManageProductsContext } from '../hooks/useManageProductsContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import { ChangeEvent, useCallback, useState } from 'react'; +import { toast } from 'sonner'; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog'; +import { EnforceSwitch } from '@/components/switch'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_master_data; +const DeleteDialog = () => { + const { showDeleteDialog, handleDeleteDialog, selectedProducts } = useManageProductsContext(); + const { reload } = useDataGrid(); + const { DeleteData } = useCallApi(); + const [enforce, setEnforce] = useState(false); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + const doDeleteProduct = useCallback(async () => { + const response = await DeleteData(`${API_URL}/product/delete/${selectedProducts}/${enforce}`, { + id: selectedProducts + }); + + if (response?.status) { + setAlert((prev) => ({ ...prev, show: false, message: '' })); + handleDeleteDialog(false, null); + toast.success('Success Delete Product'); + reload(); + } else { + toast.error('Failed Delete Product'); + setAlert((prev) => ({ ...prev, show: true, message: response?.message })); + } + }, [selectedProducts, enforce]); + + return ( + handleDeleteDialog(open, null)}> + + + +

Are you sure?

+ you will delete this data! +
+ + ) => { + setEnforce(e.target.checked); + }} + /> +
+ + {alert.show && ( + +

{alert.message}

+ + )} + + + + + + + + ); +}; + +export default DeleteDialog; diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx new file mode 100644 index 0000000..5f5e45c --- /dev/null +++ b/src/pages/master/products/blocks/EditDialog.tsx @@ -0,0 +1,266 @@ +import { Alert, useDataGrid } from '@/components'; +import { useManageProductsContext } from '../hooks/useManageProductsContext'; +import { useCallApi } from '@/hooks'; +import { getAuth } from '@/auth'; +import React, { useCallback, useEffect, useState } from 'react'; +import { apiConfig } from '@/config/api.config'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_master_data; +const EditDialog = () => { + const { showEditDialog, handleEditDialog, selectedProducts } = useManageProductsContext(); + const { reload } = useDataGrid(); + const { PutData } = useCallApi(); + const parsedUser = getAuth()?.user; + const created_time = new Date(); + const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState = { + name: '', + description: '', + price_point: 0, + price_cash: 0, + cashback_point: 0, + cashback_cash: 0, + status: '', + providerId: '', + updated_by: '', + updated_at: '' + }; + const [formField, setFormField] = useState(initialState); + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + const doUpdateProduct = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PutData(`${API_URL}/product/update/${selectedProducts}`, formField); + + if (response?.status) { + resetForm(); + handleEditDialog(false, null); + toast.success('Product updated successfully.'); + reload(); + } else { + toast.error('Failed to update Product. Please try again.'); + setAlert({ show: true, message: 'Failed to update Product. Please try again.' }); + } + }, + [selectedProducts, formField] + ); + + const handleUpdate = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.name === '' || + formField.description === '' || + formField.price_point === 0 || + formField.price_cash === 0 || + formField.cashback_point === 0 || + formField.cashback_cash === 0 || + formField.status === '' || + formField.updated_by === '' || + formField.updated_at === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + doUpdateProduct(e); + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + useEffect(() => { + if (showEditDialog) { + setFormField({ + ...formField, + updated_by: parsedUser.username, + updated_at: formattedTime + }); + } + }, [formattedTime]); + + return ( + handleEditDialog(open, null)}> + + + Product - Update + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, description: e.target.value })} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, price_point: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, price_cash: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, cashback_point: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + { + const value = parseFloat(e.target.value); + setFormField({ ...formField, cashback_cash: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + setFormField({ ...formField, status: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, providerId: e.target.value })} + /> +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default EditDialog; diff --git a/src/pages/master/products/blocks/ListToolbar.tsx b/src/pages/master/products/blocks/ListToolbar.tsx new file mode 100644 index 0000000..e4af4bd --- /dev/null +++ b/src/pages/master/products/blocks/ListToolbar.tsx @@ -0,0 +1,55 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; +import { useManageProductsContext } from '../hooks/useManageProductsContext'; +import { Button } from '@/components/ui/button'; + +const ListToolbar = () => { + const { table, reload } = useDataGrid(); + const { handleAddDialog } = useManageProductsContext(); + + return ( +
+
+
+
+ + + + +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/master/products/hooks/ManageProductsContext.tsx b/src/pages/master/products/hooks/ManageProductsContext.tsx new file mode 100644 index 0000000..c5b819a --- /dev/null +++ b/src/pages/master/products/hooks/ManageProductsContext.tsx @@ -0,0 +1,212 @@ +import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components'; +import { apiConfig } from '@/config/api.config'; +import { useCallApi } from '@/hooks'; +import { ColumnDef } from '@tanstack/react-table'; +import React, { createContext, useCallback, useMemo, useState } from 'react'; +import { Toaster } from 'sonner'; +import ListToolbar from '../blocks/ListToolbar'; + +interface ProductsProps { + name: string; + description: string; + price_point: number; + price_cash: number; + status: string; + providerId: string; +} + +interface ContextProps { + products: ProductsProps[]; + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_products: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_products: string | null) => void; + selectedProducts: string | null; + getProductsLists: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any + ) => Promise<{ data: ProductsProps[]; totalCount: number } | undefined>; +} + +const initialProps: ContextProps = { + products: [], + showEditDialog: false, + handleEditDialog: (show: boolean, selected_products: string | null) => {}, + showAddDialog: false, + handleAddDialog: (show: boolean) => {}, + showDeleteDialog: false, + handleDeleteDialog: (show: boolean, selected_products: string | null) => {}, + selectedProducts: null, + getProductsLists: async () => undefined +}; + +const ManageProductsContext = createContext(initialProps); +const API_URL = apiConfig.service_master_data; + +const ManageProductsContextProvider = ({ children }: { children: React.ReactNode }) => { + const [products, setProducts] = useState([]); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showEditDialog, setShowEditDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedProducts, setSelectedProducts] = useState(null); + const { GetData } = useCallApi(); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const handleEditDialog = useCallback((show: boolean, selected_products: string | null) => { + setSelectedProducts(show ? selected_products : null); + setShowEditDialog(show); + }, []); + + const handleDeleteDialog = useCallback((show: boolean, selected_products: string | null) => { + setSelectedProducts(show ? selected_products : null); + setShowDeleteDialog(show); + }, []); + + const columns = useMemo[]>( + () => [ + { + accessorFn: (row) => row.id, + id: 'id', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[100px]' + } + }, + { + accessorFn: (row) => row.name, + id: 'name', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.description, + id: 'description', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.price_point, + id: 'price_point', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[100px]' + } + }, + { + accessorFn: (row) => row.price_cash, + id: 'price_cash', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { + headerClassName: 'w-[100px]' + } + }, + { + id: 'actions', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + cell: (data) => { + const row = data.row.original; + return ( + <> + + + + ); + }, + meta: { + headerClassName: 'w-[100px]', + cellClassName: 'text-center' + } + } + ], + [handleEditDialog, handleDeleteDialog] + ); + + const getProductsLists = async (page: number, limit: number, sorting: any, filter: any) => { + try { + sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; + filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() }; + const response = await GetData(`${API_URL}/product/list`, { + limit, + page: page + 1, + with_deleted: true, + order_field: sorting[0].id, + order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', + filter: JSON.stringify(filter) + }); + console.log(response?.data); + setProducts(response?.data.list); + return { data: response?.data.list, totalCount: response?.data.total_count }; + } catch (error) { + console.error('Error fetching Products', error); + } + }; + + return ( + + + + } + layout={{ card: true }} + sorting={[{ id: 'id', desc: false }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + getProductsLists(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + + + ); +}; + +export { ManageProductsContext, ManageProductsContextProvider }; +export type { ProductsProps }; diff --git a/src/pages/master/products/hooks/useManageProductsContext.tsx b/src/pages/master/products/hooks/useManageProductsContext.tsx new file mode 100644 index 0000000..58164e6 --- /dev/null +++ b/src/pages/master/products/hooks/useManageProductsContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManageProductsContext } from './ManageProductsContext'; + +const useManageProductsContext = () => { + const context = useContext(ManageProductsContext); + if (!context) { + throw new Error('useManageProductsContext must be used within a ManageProductsContextProvider'); + } + return context; +}; + +export { useManageProductsContext }; diff --git a/src/pages/master/provider/ProviderMaster.tsx b/src/pages/master/provider/ProviderMaster.tsx new file mode 100644 index 0000000..8f873b2 --- /dev/null +++ b/src/pages/master/provider/ProviderMaster.tsx @@ -0,0 +1,7 @@ +const ProviderMaster = () => { + return ( +

Provider

+ ) +} + +export default ProviderMaster; \ No newline at end of file