diff --git a/src/pages/master/provider/ProviderMaster.tsx b/src/pages/master/provider/ProviderMaster.tsx index 8f873b2..a073e82 100644 --- a/src/pages/master/provider/ProviderMaster.tsx +++ b/src/pages/master/provider/ProviderMaster.tsx @@ -1,7 +1,23 @@ +import { Container, DataGridInner } from '@/components'; +import { ManageProviderContextProvider } from './hooks/ManageProviderContext'; +import AddDialog from './blocks/AddDialog'; +import EditDialog from './blocks/EditDialog'; +import DeleteDialog from './blocks/DeleteDialog'; + const ProviderMaster = () => { return ( -

Provider

- ) -} + + +

Manage Provider

+
+ +
+ + + + + + ); +}; -export default ProviderMaster; \ No newline at end of file +export default ProviderMaster; diff --git a/src/pages/master/provider/blocks/AddDialog.tsx b/src/pages/master/provider/blocks/AddDialog.tsx new file mode 100644 index 0000000..39a3260 --- /dev/null +++ b/src/pages/master/provider/blocks/AddDialog.tsx @@ -0,0 +1,210 @@ +import { apiConfig } from '@/config/api.config'; +import { useManageProviderContext } from '../hooks/useManageProviderContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { getAuth } from '@/auth'; +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 { showAddDialog, handleAddDialog } = useManageProviderContext(); + const { reload } = useDataGrid(); + const { PostData } = useCallApi(); + const parentRef = useRef(null); + const parsedUser = getAuth()?.user; + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState = { + name: '', + description: '', + type: '', + status: '', + transactionTypeId: '', + agentId: '', + 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 doCreateProvider = useCallback(async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PostData(`${API_URL}/provider/create`, formField); + + if (response?.status) { + resetForm(); + handleAddDialog(false); + toast.success('Success Create Provider'); + reload(); + } else { + toast.error('Failed Create Provider'); + setAlert({ show: true, message: 'Failed Create Provider' }); + } + }, []); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.name === '' || + formField.description === '' || + formField.status === '' || + formField.transactionTypeId === '' || + formField.agentId === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + doCreateProvider(e); + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + useEffect(() => { + if (showAddDialog) { + setFormField({ + ...formField, + created_by: parsedUser.username, + created_at: formattedTime + }); + } + }, [formattedTime]); + + return ( + handleAddDialog(open)}> + + + Provider - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, description: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, type: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, status: e.target.value })} + /> +
+
+ +
+
+ + + setFormField({ ...formField, transactionTypeId: e.target.value }) + } + /> +
+
+ +
+
+ + setFormField({ ...formField, agentId: e.target.value })} + /> +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default AddDialog; diff --git a/src/pages/master/provider/blocks/DeleteDialog.tsx b/src/pages/master/provider/blocks/DeleteDialog.tsx new file mode 100644 index 0000000..9be7895 --- /dev/null +++ b/src/pages/master/provider/blocks/DeleteDialog.tsx @@ -0,0 +1,83 @@ +import { apiConfig } from '@/config/api.config'; +import { useManageProviderContext } from '../hooks/useManageProviderContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import { ChangeEvent, useCallback, useState } from 'react'; +import { toast } from 'sonner'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle +} 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, selectedProvider } = useManageProviderContext(); + const { reload } = useDataGrid(); + const { DeleteData } = useCallApi(); + const [enforce, setEnforce] = useState(false); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + const doDeleteProvider = useCallback(async () => { + const response = await DeleteData(`${API_URL}/provider/delete/${selectedProvider}/${enforce}`, { + id: selectedProvider + }); + + if (response?.status) { + setAlert((prev) => ({ ...prev, show: false, message: '' })); + handleDeleteDialog(false, null); + toast.success('Success Delete Provider'); + reload(); + } else { + setAlert((prev) => ({ ...prev, show: true, message: response?.message })); + toast.error('Failed Delete Provider'); + } + }, [selectedProvider, 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/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx new file mode 100644 index 0000000..ea5a1e5 --- /dev/null +++ b/src/pages/master/provider/blocks/EditDialog.tsx @@ -0,0 +1,202 @@ +import { apiConfig } from '@/config/api.config'; +import { useManageProviderContext } from '../hooks/useManageProviderContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import { getAuth } from '@/auth'; +import React, { useCallback, useState } from 'react'; +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, selectedProvider } = useManageProviderContext(); + 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: '', + type: '', + status: '', + transactionTypeId: '', + agentId: '', + created_by: '', + created_at: '' + }; + const [formField, setFormField] = useState(initialState); + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + const doUpdateProvider = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PutData(`${API_URL}/provider/update/${selectedProvider}`, formField); + + if (response?.status) { + resetForm(); + handleEditDialog(false, null); + toast.success('Provider updated successfully.'); + reload(); + } else { + toast.error('Failed to update provider.'); + setAlert({ show: true, message: 'Failed to update provider.' }); + } + }, + [selectedProvider, formField] + ); + + const handleUpdate = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.name === '' || + formField.description === '' || + formField.type === '' || + formField.status === '' || + formField.transactionTypeId === '' || + formField.agentId === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + // doUpdateProvider(e); + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + return ( + handleEditDialog(open, null)}> + + + Provider - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, description: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, type: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, status: e.target.value })} + /> +
+
+ +
+
+ + + setFormField({ ...formField, transactionTypeId: e.target.value }) + } + /> +
+
+ +
+
+ + setFormField({ ...formField, agentId: e.target.value })} + /> +
+
+ +
+ +
+
+
+
+ + + + ); +}; + +export default EditDialog; diff --git a/src/pages/master/provider/blocks/ListToolbar.tsx b/src/pages/master/provider/blocks/ListToolbar.tsx new file mode 100644 index 0000000..24a532f --- /dev/null +++ b/src/pages/master/provider/blocks/ListToolbar.tsx @@ -0,0 +1,55 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; +import { useManageProviderContext } from '../hooks/useManageProviderContext'; +import { Button } from '@/components/ui/button'; + +const ListToolbar = () => { + const { reload, table } = useDataGrid(); + const { handleAddDialog } = useManageProviderContext(); + + return ( +
+
+
+
+ + + + +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; diff --git a/src/pages/master/provider/hooks/ManageProviderContext.tsx b/src/pages/master/provider/hooks/ManageProviderContext.tsx new file mode 100644 index 0000000..10482a6 --- /dev/null +++ b/src/pages/master/provider/hooks/ManageProviderContext.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 ProviderProps { + name: string; + description: string; + type: string; + status: string; + transactionTypeId: string; + agentId: string; +} + +interface ContextProps { + provider: ProviderProps[]; + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_sucos: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_sucos: string | null) => void; + selectedProvider: string | null; + getProviderLists: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any + ) => Promise<{ data: ProviderProps[]; totalCount: number } | undefined>; +} + +const initialProps: ContextProps = { + provider: [], + showEditDialog: false, + handleEditDialog: () => {}, + showAddDialog: false, + handleAddDialog: () => {}, + showDeleteDialog: false, + handleDeleteDialog: () => {}, + selectedProvider: null, + getProviderLists: async () => undefined +}; + +const ManageProviderContext = createContext(initialProps); +const API_URL = apiConfig.service_master_data; + +const ManageProviderContextProvider = ({ children }: { children: React.ReactNode }) => { + const [provider, setProvider] = useState([]); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showEditDialog, setShowEditDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedProvider, setSelectedProvider] = useState(null); + const { GetData } = useCallApi(); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const handleEditDialog = useCallback((show: boolean, selected_provider: string | null) => { + setShowEditDialog(show); + setSelectedProvider(show ? selected_provider : null); + }, []); + + const handleDeleteDialog = useCallback((show: boolean, selected_provider: string | null) => { + setShowDeleteDialog(show); + setSelectedProvider(show ? selected_provider : null); + }, []); + + 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: false, + enableHiding: false, + meta: { + headerClassName: 'w-[250px]' + } + }, + { + accessorFn: (row) => row.type, + id: 'type', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { + headerClassName: 'w-[100px]' + } + }, + { + accessorFn: (row) => row.status, + id: 'status', + header: ({ column }) => , + enableSorting: false, + 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 getProviderLists = 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}/provider/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); + setProvider(response?.data.list); + return { data: response?.data.list, totalCount: response?.data.total_count }; + } catch (error) { + console.error('Error fetching Provider', error); + } + }; + + return ( + + + + } + layout={{ card: true }} + sorting={[{ id: 'id', desc: false }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + getProviderLists(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + + + ); +}; + +export { ManageProviderContext, ManageProviderContextProvider }; +export type { ProviderProps }; diff --git a/src/pages/master/provider/hooks/useManageProviderContext.tsx b/src/pages/master/provider/hooks/useManageProviderContext.tsx new file mode 100644 index 0000000..1fe8d37 --- /dev/null +++ b/src/pages/master/provider/hooks/useManageProviderContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManageProviderContext } from './ManageProviderContext'; + +const useManageProviderContext = () => { + const context = useContext(ManageProviderContext); + + if (!context) throw new Error('useManageProviderContext must be used within AuthProvider'); + + return context; +}; + +export { useManageProviderContext };