ferdiansyah/pos-dashboard-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ingredient product

Browse Source
This commit is contained in:
ferdiansyah783
2025-08-12 21:29:24 +07:00
parent c3780af341
commit f3dfad4cb3
36 changed files with 1731 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/apps/user/list/AddUserDrawer.tsx
+147 -19
View File
@@ -1,5 +1,5 @@
// React Imports
import { useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
// MUI Imports
import Button from '@mui/material/Button'
@@ -10,15 +10,19 @@ import MenuItem from '@mui/material/MenuItem'
import Typography from '@mui/material/Typography'
// Third-party Imports
import { Controller, useForm } from 'react-hook-form'
// Types Imports
import type { UsersType } from '@/types/apps/userTypes'
// Component Imports
import CustomTextField from '@core/components/mui/TextField'
import { Autocomplete, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Switch } from '@mui/material'
import { useDispatch, useSelector } from 'react-redux'
import { useDebounce } from 'use-debounce'
import { RootState } from '../../../../redux-store'
import { resetUser } from '../../../../redux-store/slices/user'
import { useUsersMutation } from '../../../../services/mutations/users'
import { useOutlets } from '../../../../services/queries/outlets'
import { UserRequest } from '../../../../types/services/user'
import { Switch } from '@mui/material'
type Props = {
open: boolean
@@ -31,26 +35,73 @@ const initialData = {
email: '',
password: '',
role: '',
permissions: {},
permissions: {
can_create_orders: false,
can_void_orders: false
},
is_active: true,
organization_id: '',
outlet_id: '',
outlet_id: ''
}
const AddUserDrawer = (props: Props) => {
const dispatch = useDispatch()
// Props
const { open, handleClose } = props
// States
const [formData, setFormData] = useState<UserRequest>(initialData)
const [outletInput, setOutletInput] = useState('')
const [outletDebouncedInput] = useDebounce(outletInput, 500)
const onSubmit = () => {
handleClose()
setFormData(initialData)
const { currentUser } = useSelector((state: RootState) => state.userReducer)
const { createUser, updateUser } = useUsersMutation()
const { data: outlets, isLoading: outletsLoading } = useOutlets({
search: outletDebouncedInput
})
const outletOptions = useMemo(() => outlets?.outlets || [], [outlets])
useEffect(() => {
if (currentUser.id) {
setFormData({
name: currentUser.name,
email: currentUser.email,
role: currentUser.role,
password: '',
is_active: currentUser.is_active,
outlet_id: currentUser.outlet_id,
permissions: currentUser.permissions
})
}
}, [currentUser])
const handleSubmit = (e: any) => {
e.preventDefault()
if (currentUser.id) {
updateUser.mutate(
{ id: currentUser.id, payload: formData },
{
onSuccess: () => {
handleReset()
}
}
)
} else {
createUser.mutate(formData, {
onSuccess: () => {
handleReset()
}
})
}
}
const handleReset = () => {
handleClose()
dispatch(resetUser())
setFormData(initialData)
}
@@ -61,6 +112,17 @@ const AddUserDrawer = (props: Props) => {
})
}
const handleCheckBoxChange = (e: any) => {
const { name, checked } = e.target
setFormData(prev => ({
...prev,
permissions: {
...prev.permissions,
[name]: checked
}
}))
}
return (
<Drawer
open={open}
@@ -71,14 +133,14 @@ const AddUserDrawer = (props: Props) => {
sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
>
<div className='flex items-center justify-between plb-5 pli-6'>
<Typography variant='h5'>Add New User</Typography>
<Typography variant='h5'>{currentUser.id ? 'Edit' : 'Add'} User</Typography>
<IconButton size='small' onClick={handleReset}>
<i className='tabler-x text-2xl text-textPrimary' />
</IconButton>
</div>
<Divider />
<div>
<form onSubmit={onSubmit} className='flex flex-col gap-6 p-6'>
<form onSubmit={handleSubmit} className='flex flex-col gap-6 p-6'>
<CustomTextField
fullWidth
label='Name'
@@ -96,15 +158,81 @@ const AddUserDrawer = (props: Props) => {
value={formData.email}
onChange={handleInputChange}
/>
{currentUser.id ? null : (
<CustomTextField
fullWidth
type='password'
label='Password'
placeholder='********'
name='password'
value={formData.password}
onChange={handleInputChange}
/>
)}
<CustomTextField
select
fullWidth
type='password'
label='Password'
placeholder='********'
name='password'
value={formData.password}
onChange={handleInputChange}
label='Role'
placeholder='Select Role'
value={formData.role}
onChange={e => setFormData({ ...formData, role: e.target.value })}
>
<MenuItem value={`manager`}>Manager</MenuItem>
<MenuItem value={`cashier`}>Cashier</MenuItem>
<MenuItem value={`waiter`}>Waiter</MenuItem>
</CustomTextField>
<Autocomplete
options={outletOptions}
loading={outletsLoading}
getOptionLabel={option => option.name}
value={outletOptions.find((p: any) => p.id === formData.outlet_id) || null}
onInputChange={(event, newOutlettInput) => {
setOutletInput(newOutlettInput)
}}
onChange={(event, newValue) => {
setFormData({
...formData,
outlet_id: newValue?.id || ''
})
}}
renderInput={params => (
<CustomTextField
{...params}
className=''
label='Outlet'
fullWidth
InputProps={{
...params.InputProps,
endAdornment: <>{params.InputProps.endAdornment}</>
}}
/>
)}
/>
<FormControl component='fieldset' variant='outlined'>
<FormLabel component='legend'>Assign permissions</FormLabel>
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={formData.permissions.can_create_orders}
onChange={handleCheckBoxChange}
name='can_create_orders'
/>
}
label='Can create orders'
/>
<FormControlLabel
control={
<Checkbox
checked={formData.permissions.can_void_orders}
onChange={handleCheckBoxChange}
name='can_void_orders'
/>
}
label='Can void orders'
/>
</FormGroup>
</FormControl>
<div className='flex items-center'>
<div className='flex flex-col items-start gap-1'>
<Typography color='text.primary' className='font-medium'>
@@ -119,7 +247,7 @@ const AddUserDrawer = (props: Props) => {
</div>
<div className='flex items-center gap-4'>
<Button variant='contained' type='submit'>
Submit
{createUser.isPending || updateUser.isPending ? 'Saving...' : 'Save'}
</Button>
<Button variant='tonal' color='error' type='reset' onClick={() => handleReset()}>
Cancel
src/views/apps/user/list/UserListTable.tsx
+35 -18
View File
@@ -47,6 +47,10 @@ import TablePaginationComponent from '../../../../components/TablePaginationComp
import { useUsers } from '../../../../services/queries/users'
import { User } from '../../../../types/services/user'
import AddUserDrawer from './AddUserDrawer'
import { useDispatch } from 'react-redux'
import { setUser } from '../../../../redux-store/slices/user'
import { useUsersMutation } from '../../../../services/mutations/users'
import ConfirmDeleteDialog from '../../../../components/dialogs/confirm-delete'
declare module '@tanstack/table-core' {
interface FilterFns {
@@ -123,13 +127,15 @@ const userRoleObj: UserRoleType = {
const columnHelper = createColumnHelper<UsersTypeWithAction>()
const UserListTable = () => {
const dispatch = useDispatch()
// States
const [addUserOpen, setAddUserOpen] = useState(false)
const [rowSelection, setRowSelection] = useState({})
const [currentPage, setCurrentPage] = useState(1)
const [pageSize, setPageSize] = useState(10)
const [openConfirm, setOpenConfirm] = useState(false)
const [customerId, setCustomerId] = useState('')
const [userId, setUserId] = useState('')
const [search, setSearch] = useState('')
// Hooks
@@ -141,7 +147,7 @@ const UserListTable = () => {
search
})
// const { deleteCustomer } = useCustomersMutation()
const { deleteUser } = useUsersMutation()
const users = data?.users ?? []
const totalCount = data?.pagination.total_count ?? 0
@@ -157,11 +163,11 @@ const UserListTable = () => {
setCurrentPage(1) // Reset to first page
}, [])
// const handleDelete = () => {
// deleteCustomer.mutate(customerId, {
// onSuccess: () => setOpenConfirm(false)
// })
// }
const handleDelete = () => {
deleteUser.mutate(userId, {
onSuccess: () => setOpenConfirm(false)
})
}
const columns = useMemo<ColumnDef<UsersTypeWithAction, any>[]>(
() => [
@@ -236,22 +242,27 @@ const UserListTable = () => {
header: 'Action',
cell: ({ row }) => (
<div className='flex items-center'>
<IconButton onClick={() => {}}>
<IconButton
onClick={() => {
setUserId(row.original.id)
setOpenConfirm(true)
}}
>
<i className='tabler-trash text-textSecondary' />
</IconButton>
<OptionMenu
iconButtonProps={{ size: 'medium' }}
iconClassName='text-textSecondary'
options={[
{
text: 'Download',
icon: 'tabler-download',
menuItemProps: { className: 'flex items-center gap-2 text-textSecondary' }
},
{
text: 'Edit',
icon: 'tabler-edit',
menuItemProps: { className: 'flex items-center gap-2 text-textSecondary' }
menuItemProps: {
onClick: () => {
dispatch(setUser(row.original))
setAddUserOpen(true)
}
}
}
]}
/>
@@ -298,7 +309,7 @@ const UserListTable = () => {
return (
<>
<Card>
<CardHeader title='Filters' className='pbe-4' />
{/* <CardHeader title='Filters' className='pbe-4' /> */}
{/* <TableFilters setData={setFilteredData} tableData={data} /> */}
<div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
<DebouncedInput
@@ -432,9 +443,15 @@ const UserListTable = () => {
/>
</Card>
<AddUserDrawer
open={addUserOpen}
handleClose={() => setAddUserOpen(!addUserOpen)}
<AddUserDrawer open={addUserOpen} handleClose={() => setAddUserOpen(!addUserOpen)} />
<ConfirmDeleteDialog
open={openConfirm}
onClose={() => setOpenConfirm(false)}
onConfirm={handleDelete}
isLoading={deleteUser.isPending}
title='Delete User'
message='Are you sure you want to delete this User? This action cannot be undone.'
/>
</>
)
src/views/apps/user/list/index.tsx
-4
View File
@@ -2,7 +2,6 @@
import Grid from '@mui/material/Grid2'
// Type Imports
import type { UsersType } from '@/types/apps/userTypes'
// Component Imports
import UserListTable from './UserListTable'
@@ -10,9 +9,6 @@ import UserListTable from './UserListTable'
const UserList = () => {
return (
<Grid container spacing={6}>
{/* <Grid size={{ xs: 12 }}>
<UserListCards />
</Grid> */}
<Grid size={{ xs: 12 }}>
<UserListTable />
</Grid>