feat: ingredient product
This commit is contained in:
ferdiansyah783
+1
-1
@@ -243,7 +243,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
|
||||
</Button>
|
||||
<div className='flex justify-center items-center flex-wrap gap-2'>
|
||||
<Typography>New on our platform?</Typography>
|
||||
<Typography component={Link} href={getLocalizedUrl('/register', locale as Locale)} color='primary.main'>
|
||||
<Typography component={Link} href={getLocalizedUrl('/organization', locale as Locale)} color='primary.main'>
|
||||
Create an account
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@@ -221,7 +221,6 @@ const CustomerListTable = () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
{ text: 'Duplicate', icon: 'tabler-copy' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Dialog from '@mui/material/Dialog'
|
||||
import DialogContent from '@mui/material/DialogContent'
|
||||
import DialogTitle from '@mui/material/DialogTitle'
|
||||
|
||||
// Third-party Imports
|
||||
import { Autocomplete, Button, Grid2, MenuItem } from '@mui/material'
|
||||
import { useMemo, useState } from 'react'
|
||||
import CustomTextField from '../../../../../@core/components/mui/TextField'
|
||||
import DialogCloseButton from '../../../../../components/dialogs/DialogCloseButton'
|
||||
import { Product } from '../../../../../types/services/product'
|
||||
import { ProductRecipeRequest } from '../../../../../types/services/productRecipe'
|
||||
import { useOutlets } from '../../../../../services/queries/outlets'
|
||||
import { useDebounce } from 'use-debounce'
|
||||
import { useIngredients } from '../../../../../services/queries/ingredients'
|
||||
|
||||
// Component Imports
|
||||
|
||||
type PaymentMethodProps = {
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
product: Product
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
product_id: '',
|
||||
variant_id: '',
|
||||
ingredient_id: '',
|
||||
quantity: 0,
|
||||
outlet_id: ''
|
||||
}
|
||||
|
||||
const AddRecipeDialog = ({ open, setOpen, product }: PaymentMethodProps) => {
|
||||
const [formData, setFormData] = useState<ProductRecipeRequest>(initialValues)
|
||||
|
||||
const [outletInput, setOutletInput] = useState('')
|
||||
const [outletDebouncedInput] = useDebounce(outletInput, 500)
|
||||
const [ingredientInput, setIngredientInput] = useState('')
|
||||
const [ingredientDebouncedInput] = useDebounce(ingredientInput, 500)
|
||||
|
||||
const { data: outlets, isLoading: outletsLoading } = useOutlets({
|
||||
search: outletDebouncedInput
|
||||
})
|
||||
const { data: ingredients, isLoading: ingredientsLoading } = useIngredients({
|
||||
search: ingredientDebouncedInput
|
||||
})
|
||||
|
||||
const outletOptions = useMemo(() => outlets?.outlets || [], [outlets])
|
||||
const ingredientOptions = useMemo(() => ingredients?.data || [], [ingredients])
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
fullWidth
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
maxWidth='sm'
|
||||
scroll='body'
|
||||
closeAfterTransition={false}
|
||||
sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
|
||||
>
|
||||
<DialogCloseButton onClick={() => setOpen(false)} disableRipple>
|
||||
<i className='tabler-x' />
|
||||
</DialogCloseButton>
|
||||
<DialogTitle variant='h4' className='flex gap-2 flex-col text-center sm:pbs-16 sm:pbe-10 sm:pli-16'>
|
||||
Create Recipe
|
||||
</DialogTitle>
|
||||
<DialogContent className='pbs-0 sm:pli-16 sm:pbe-20 space-y-4'>
|
||||
{product.variants && (
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
label='Variant'
|
||||
value={formData.variant_id}
|
||||
onChange={e => setFormData({ ...formData, variant_id: e.target.value })}
|
||||
>
|
||||
{product.variants.map((variant, index) => (
|
||||
<MenuItem value={variant.id} key={index}>
|
||||
{variant.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</CustomTextField>
|
||||
)}
|
||||
<Autocomplete
|
||||
options={outletOptions}
|
||||
loading={outletsLoading}
|
||||
getOptionLabel={option => option.name}
|
||||
value={outletOptions.find(p => 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}</>
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Grid2 container spacing={2}>
|
||||
<Grid2 size={{ xs: 6 }}>
|
||||
<Autocomplete
|
||||
options={ingredientOptions || []}
|
||||
loading={ingredientsLoading}
|
||||
getOptionLabel={option => option.name}
|
||||
value={ingredientOptions?.find(p => p.id === formData.ingredient_id) || null}
|
||||
onInputChange={(event, newIngredientInput) => {
|
||||
setIngredientInput(newIngredientInput)
|
||||
}}
|
||||
onChange={(event, newValue) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
ingredient_id: newValue?.id || ''
|
||||
})
|
||||
}}
|
||||
renderInput={params => (
|
||||
<CustomTextField
|
||||
{...params}
|
||||
className=''
|
||||
label='Ingredient'
|
||||
fullWidth
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: <>{params.InputProps.endAdornment}</>
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid2>
|
||||
<Grid2 size={{ xs: 4 }}>
|
||||
<CustomTextField
|
||||
type='number'
|
||||
label='Quantity'
|
||||
fullWidth
|
||||
value={formData.quantity}
|
||||
onChange={e => setFormData({ ...formData, quantity: Number(e.target.value) })}
|
||||
/>
|
||||
</Grid2>
|
||||
<Grid2 size={{ xs: 2 }}>
|
||||
<Button variant='contained' color='primary' className='rounded-full' startIcon={<i className='tabler-plus' />} />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddRecipeDialog
|
||||
@@ -72,25 +72,14 @@ const AddRecipeDrawer = (props: Props) => {
|
||||
const handleSubmit = (e: any) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (currentProductRecipe.id) {
|
||||
updateProductRecipe.mutate(
|
||||
{ id: currentProductRecipe.id, payload: formData },
|
||||
{
|
||||
onSuccess: () => {
|
||||
handleReset()
|
||||
}
|
||||
createProductRecipe.mutate(
|
||||
{ ...formData, product_id: product.id, variant_id: currentProductRecipe.id || '' },
|
||||
{
|
||||
onSuccess: () => {
|
||||
handleReset()
|
||||
}
|
||||
)
|
||||
} else {
|
||||
createProductRecipe.mutate(
|
||||
{ ...formData, product_id: product.id, variant_id: currentProductRecipe.variant?.ID || '' },
|
||||
{
|
||||
onSuccess: () => {
|
||||
handleReset()
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
@@ -109,8 +98,8 @@ const AddRecipeDrawer = (props: Props) => {
|
||||
const setTitleDrawer = (recipe: any) => {
|
||||
let title = 'Original'
|
||||
|
||||
if (recipe?.variant?.Name) {
|
||||
title = recipe?.variant?.Name
|
||||
if (recipe?.name) {
|
||||
title = recipe?.name
|
||||
}
|
||||
|
||||
return title
|
||||
@@ -205,11 +194,7 @@ const AddRecipeDrawer = (props: Props) => {
|
||||
type='submit'
|
||||
disabled={createProductRecipe.isPending || updateProductRecipe.isPending}
|
||||
>
|
||||
{currentProductRecipe?.id
|
||||
? updateProductRecipe.isPending
|
||||
? 'Updating...'
|
||||
: 'Update'
|
||||
: createProductRecipe.isPending
|
||||
{createProductRecipe.isPending
|
||||
? 'Adding...'
|
||||
: 'Add'}
|
||||
</Button>
|
||||
|
||||
@@ -25,6 +25,7 @@ import Loading from '../../../../../components/layout/shared/Loading'
|
||||
import { setProductRecipe } from '../../../../../redux-store/slices/productRecipe'
|
||||
import { useProductRecipesByProduct } from '../../../../../services/queries/productRecipes'
|
||||
import { useProductById } from '../../../../../services/queries/products'
|
||||
import { ProductVariant } from '../../../../../types/services/product'
|
||||
import { formatCurrency } from '../../../../../utils/transform'
|
||||
import AddRecipeDrawer from './AddRecipeDrawer'
|
||||
|
||||
@@ -37,19 +38,6 @@ const ProductDetail = () => {
|
||||
const { data: product, isLoading, error } = useProductById(params?.id as string)
|
||||
const { data: productRecipe, isLoading: isLoadingProductRecipe } = useProductRecipesByProduct(params?.id as string)
|
||||
|
||||
const groupedByVariant = productRecipe?.reduce((acc: any, item: any) => {
|
||||
const variantId = item.variant_id
|
||||
if (!acc[variantId]) {
|
||||
acc[variantId] = {
|
||||
variant: item.product_variant,
|
||||
product: item.product,
|
||||
ingredients: []
|
||||
}
|
||||
}
|
||||
acc[variantId].ingredients.push(item)
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
const handleOpenProductRecipe = (recipe: any) => {
|
||||
setOpenProductRecipe(true)
|
||||
dispatch(setProductRecipe(recipe))
|
||||
@@ -94,174 +82,37 @@ const ProductDetail = () => {
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{productRecipe && (
|
||||
<div className='space-y-6'>
|
||||
{/* Recipe Details by Variant */}
|
||||
<div className='space-y-4'>
|
||||
<div className='flex items-center gap-2 mb-4'>
|
||||
<i className='tabler-chef-hat text-textPrimary text-xl' />
|
||||
<Typography variant='h5' component='h2' className='font-semibold'>
|
||||
Recipe Details
|
||||
</Typography>
|
||||
</div>
|
||||
{/* {productRecipe && ( */}
|
||||
<div className='space-y-6'>
|
||||
{/* Recipe Details by Variant */}
|
||||
<div className='space-y-4'>
|
||||
<div className='flex items-center gap-2 mb-4'>
|
||||
<i className='tabler-chef-hat text-textPrimary text-xl' />
|
||||
<Typography variant='h5' component='h2' className='font-semibold'>
|
||||
Recipe Details
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{Object.keys(groupedByVariant).length > 0 ? (
|
||||
Object.entries(groupedByVariant).map(([variantId, variantData]: any) => (
|
||||
<Card key={variantId} className=''>
|
||||
<CardHeader
|
||||
title={
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<i className='tabler-variant text-blue-600 text-lg' />
|
||||
<Typography variant='h6' className='font-semibold'>
|
||||
{variantData?.variant?.Name || 'Original'} Variant
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex gap-4 text-sm'>
|
||||
<Chip
|
||||
label={`Cost: ${formatCurrency(variantData?.variant?.Cost || variantData.product?.Cost)}`}
|
||||
variant='outlined'
|
||||
color='primary'
|
||||
/>
|
||||
<Chip
|
||||
label={`Price Modifier: ${formatCurrency(variantData?.variant?.PriceModifier || 0)}`}
|
||||
variant='outlined'
|
||||
color='secondary'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<TableContainer component={Paper} variant='outlined'>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow className='bg-gray-50'>
|
||||
<TableCell className='font-semibold'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<i className='tabler-ingredients text-green-600' />
|
||||
Ingredient
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-scale text-orange-600' />
|
||||
Quantity
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-currency-dollar text-purple-600' />
|
||||
Unit Cost
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-center'>
|
||||
<div className='flex items-center justify-center gap-2'>
|
||||
<i className='tabler-package text-blue-600' />
|
||||
Stock Available
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='font-semibold text-right'>
|
||||
<div className='flex items-center justify-end gap-2'>
|
||||
<i className='tabler-calculator text-red-600' />
|
||||
Total Cost
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{variantData.ingredients.map((item: any) => (
|
||||
<TableRow key={item.id} className='hover:bg-gray-50'>
|
||||
<TableCell>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='w-2 h-2 rounded-full bg-green-500' />
|
||||
<div>
|
||||
<Typography variant='body2' className='font-medium capitalize'>
|
||||
{item.ingredient.name}
|
||||
</Typography>
|
||||
<Typography variant='caption' color='textSecondary'>
|
||||
{item.ingredient.is_semi_finished ? 'Semi-finished' : 'Raw ingredient'}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='text-center'>
|
||||
<Chip label={item.quantity} size='small' variant='outlined' color='primary' />
|
||||
</TableCell>
|
||||
<TableCell className='text-center'>{formatCurrency(item.ingredient.cost)}</TableCell>
|
||||
<TableCell className='text-center'>
|
||||
<Chip
|
||||
label={item.ingredient.stock}
|
||||
size='small'
|
||||
color={item.ingredient.stock > 5 ? 'success' : 'warning'}
|
||||
variant='outlined'
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className='text-right font-medium'>
|
||||
{formatCurrency(item.ingredient.cost * item.quantity)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{/* Variant Summary */}
|
||||
<Box className='mt-4 p-4 bg-blue-50 rounded-lg'>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant='body2' className='flex items-center gap-2'>
|
||||
<i className='tabler-list-numbers text-blue-600' />
|
||||
<span className='font-semibold'>Total Ingredients:</span>
|
||||
{variantData.ingredients.length}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant='body2' className='flex items-center gap-2'>
|
||||
<i className='tabler-sum text-green-600' />
|
||||
<span className='font-semibold'>Total Recipe Cost:</span>
|
||||
{formatCurrency(
|
||||
variantData.ingredients.reduce(
|
||||
(sum: any, item: any) => sum + item.ingredient.cost * item.quantity,
|
||||
0
|
||||
)
|
||||
)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
className='mt-4'
|
||||
startIcon={<i className='tabler-plus' />}
|
||||
onClick={() => handleOpenProductRecipe(variantData)}
|
||||
>
|
||||
Add Ingredient
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<Card className=''>
|
||||
{product?.variants?.length &&
|
||||
product.variants.map((variantData: ProductVariant, index: number) => (
|
||||
<Card key={index}>
|
||||
<CardHeader
|
||||
title={
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<i className='tabler-variant text-blue-600 text-lg' />
|
||||
<Typography variant='h6' className='font-semibold'>
|
||||
Original Variant
|
||||
{variantData?.name || 'Original'} Variant
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex gap-4 text-sm'>
|
||||
<Chip
|
||||
label={`Cost: ${formatCurrency(product?.cost || 0)}`}
|
||||
label={`Cost: ${formatCurrency(variantData?.cost || 0)}`}
|
||||
variant='outlined'
|
||||
color='primary'
|
||||
/>
|
||||
<Chip
|
||||
label={`Price Modifier: ${formatCurrency(product?.price || 0)}`}
|
||||
label={`Price Modifier: ${formatCurrency(variantData?.price_modifier || 0)}`}
|
||||
variant='outlined'
|
||||
color='secondary'
|
||||
/>
|
||||
@@ -306,25 +157,86 @@ const ProductDetail = () => {
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody></TableBody>
|
||||
<TableBody>
|
||||
{productRecipe?.length &&
|
||||
productRecipe
|
||||
.filter((item: any) => item.variant_id === variantData.id)
|
||||
.map((item: any, index: number) => (
|
||||
<TableRow key={index} className='hover:bg-gray-50'>
|
||||
<TableCell>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='w-2 h-2 rounded-full bg-green-500' />
|
||||
<div>
|
||||
<Typography variant='body2' className='font-medium capitalize'>
|
||||
{item.ingredient.name}
|
||||
</Typography>
|
||||
<Typography variant='caption' color='textSecondary'>
|
||||
{item.ingredient.is_semi_finished ? 'Semi-finished' : 'Raw ingredient'}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='text-center'>
|
||||
<Chip label={item.quantity} size='small' variant='outlined' color='primary' />
|
||||
</TableCell>
|
||||
<TableCell className='text-center'>{formatCurrency(item.ingredient.cost)}</TableCell>
|
||||
<TableCell className='text-center'>
|
||||
<Chip
|
||||
label={item.ingredient.stock}
|
||||
size='small'
|
||||
color={item.ingredient.stock > 5 ? 'success' : 'warning'}
|
||||
variant='outlined'
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className='text-right font-medium'>
|
||||
{formatCurrency(item.ingredient.cost * item.quantity)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{/* Variant Summary */}
|
||||
{productRecipe?.length && (
|
||||
<Box className='mt-4 p-4 bg-blue-50 rounded-lg'>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant='body2' className='flex items-center gap-2'>
|
||||
<i className='tabler-list-numbers text-blue-600' />
|
||||
<span className='font-semibold'>Total Ingredients:</span>
|
||||
{productRecipe.filter((item: any) => item.variant_id === variantData.id).length}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography variant='body2' className='flex items-center gap-2'>
|
||||
<i className='tabler-sum text-green-600' />
|
||||
<span className='font-semibold'>Total Recipe Cost:</span>
|
||||
{formatCurrency(
|
||||
productRecipe
|
||||
.filter((item: any) => item.variant_id === variantData.id)
|
||||
.reduce((sum: any, item: any) => sum + item.ingredient.cost * item.quantity, 0)
|
||||
)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
className='mt-4'
|
||||
startIcon={<i className='tabler-plus' />}
|
||||
onClick={() => handleOpenProductRecipe({ variant: undefined })}
|
||||
onClick={() => handleOpenProductRecipe(variantData)}
|
||||
>
|
||||
Add Ingredient
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddRecipeDrawer open={openProductRecipe} handleClose={() => setOpenProductRecipe(false)} product={product!} />
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.'
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -16,6 +16,7 @@ import { formatShortCurrency } from '../../../utils/transform'
|
||||
type Props = {
|
||||
title: string
|
||||
value: number
|
||||
isCurrency: boolean
|
||||
isLoading: boolean
|
||||
avatarIcon: string
|
||||
avatarSkin?: CustomAvatarProps['skin']
|
||||
@@ -26,12 +27,12 @@ type Props = {
|
||||
const DistributedBarChartOrder = ({
|
||||
title,
|
||||
value,
|
||||
isCurrency = false,
|
||||
isLoading,
|
||||
avatarIcon,
|
||||
avatarSkin,
|
||||
avatarColor
|
||||
}: Props) => {
|
||||
|
||||
if (isLoading) {
|
||||
return <Skeleton sx={{ bgcolor: 'grey.100' }} variant='rectangular' width={300} height={118} />
|
||||
}
|
||||
@@ -45,7 +46,7 @@ const DistributedBarChartOrder = ({
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography color='text.primary' variant='h4'>
|
||||
{formatShortCurrency(value)}
|
||||
{isCurrency ? 'Rp ' + formatShortCurrency(value) : formatShortCurrency(value)}
|
||||
</Typography>
|
||||
</div>
|
||||
<CustomAvatar variant='rounded' skin={avatarSkin} size={52} color={avatarColor}>
|
||||
|
||||
@@ -33,7 +33,7 @@ const OrdersReport = ({ orderData, title }: { orderData: RecentSale[]; title: st
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{orderData.map((sale, index) => (
|
||||
{orderData && orderData.map((sale, index) => (
|
||||
<tr key={index} className='hover:bg-gray-50'>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
|
||||
{formatDate(sale.date)}
|
||||
|
||||
@@ -19,7 +19,7 @@ const PaymentMethodReport = ({ payments }: { payments: PaymentDataItem[] }) => {
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Payment Methods</h2>
|
||||
</div>
|
||||
<div className='space-y-6'>
|
||||
{payments.map(method => (
|
||||
{payments && payments.map(method => (
|
||||
<div key={method.payment_method_id} className='border-b border-gray-200 pb-4 last:border-b-0'>
|
||||
<div className='flex justify-between items-center mb-2'>
|
||||
<span className='text-sm font-medium text-gray-900'>{method.payment_method_name}</span>
|
||||
|
||||
@@ -34,7 +34,7 @@ const ProductSales = ({ productData, title }: { productData: ProductData[], titl
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{productData.map((product, index) => (
|
||||
{productData && productData.map((product, index) => (
|
||||
<tr key={product.product_id} className='hover:bg-gray-50'>
|
||||
<td className='px-4 py-4 whitespace-nowrap'>
|
||||
<div className='flex items-center'>
|
||||
|
||||
@@ -0,0 +1,377 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
|
||||
// Next Imports
|
||||
|
||||
// MUI Imports
|
||||
import Button from '@mui/material/Button'
|
||||
import Card from '@mui/material/Card'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import Checkbox from '@mui/material/Checkbox'
|
||||
import MenuItem from '@mui/material/MenuItem'
|
||||
import type { TextFieldProps } from '@mui/material/TextField'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
// Third-party Imports
|
||||
import type { RankingInfo } from '@tanstack/match-sorter-utils'
|
||||
import { rankItem } from '@tanstack/match-sorter-utils'
|
||||
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
|
||||
// Component Imports
|
||||
import CustomTextField from '@core/components/mui/TextField'
|
||||
|
||||
// Util Imports
|
||||
|
||||
// Style Imports
|
||||
import tableStyles from '@core/styles/table.module.css'
|
||||
import { Box, Chip, CircularProgress, IconButton, TablePagination } from '@mui/material'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import OptionMenu from '../../../../@core/components/option-menu'
|
||||
import ConfirmDeleteDialog from '../../../../components/dialogs/confirm-delete'
|
||||
import Loading from '../../../../components/layout/shared/Loading'
|
||||
import TablePaginationComponent from '../../../../components/TablePaginationComponent'
|
||||
import { setOrganization } from '../../../../redux-store/slices/organization'
|
||||
import { useOrganizationsMutation } from '../../../../services/mutations/organization'
|
||||
import { useOrganizations } from '../../../../services/queries/organizations'
|
||||
import { Organization } from '../../../../types/services/organization'
|
||||
|
||||
declare module '@tanstack/table-core' {
|
||||
interface FilterFns {
|
||||
fuzzy: FilterFn<unknown>
|
||||
}
|
||||
interface FilterMeta {
|
||||
itemRank: RankingInfo
|
||||
}
|
||||
}
|
||||
|
||||
type SaOrganizationsTypeWithAction = Organization & {
|
||||
actions?: string
|
||||
}
|
||||
|
||||
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||
// Rank the item
|
||||
const itemRank = rankItem(row.getValue(columnId), value)
|
||||
|
||||
// Store the itemRank info
|
||||
addMeta({
|
||||
itemRank
|
||||
})
|
||||
|
||||
// Return if the item should be filtered in/out
|
||||
return itemRank.passed
|
||||
}
|
||||
|
||||
const DebouncedInput = ({
|
||||
value: initialValue,
|
||||
onChange,
|
||||
debounce = 500,
|
||||
...props
|
||||
}: {
|
||||
value: string | number
|
||||
onChange: (value: string | number) => void
|
||||
debounce?: number
|
||||
} & Omit<TextFieldProps, 'onChange'>) => {
|
||||
// States
|
||||
const [value, setValue] = useState(initialValue)
|
||||
|
||||
useEffect(() => {
|
||||
setValue(initialValue)
|
||||
}, [initialValue])
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
onChange(value)
|
||||
}, debounce)
|
||||
|
||||
return () => clearTimeout(timeout)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [value])
|
||||
|
||||
return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
|
||||
}
|
||||
|
||||
// Column Definitions
|
||||
const columnHelper = createColumnHelper<SaOrganizationsTypeWithAction>()
|
||||
|
||||
const OrganizationListTable = () => {
|
||||
const dispatch = useDispatch()
|
||||
|
||||
// States
|
||||
const [rowSelection, setRowSelection] = useState({})
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(10)
|
||||
const [openConfirm, setOpenConfirm] = useState(false)
|
||||
const [organizationId, setOrganizationId] = useState('')
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
const { data, isLoading, error, isFetching } = useOrganizations({
|
||||
page: currentPage,
|
||||
limit: pageSize,
|
||||
search
|
||||
})
|
||||
|
||||
const { deleteOrganization } = useOrganizationsMutation()
|
||||
|
||||
const organizations = data?.organizations ?? []
|
||||
const totalCount = data?.total_count ?? 0
|
||||
|
||||
const handlePageChange = useCallback((event: unknown, newPage: number) => {
|
||||
setCurrentPage(newPage)
|
||||
}, [])
|
||||
|
||||
// Handle page size change
|
||||
const handlePageSizeChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newPageSize = parseInt(event.target.value, 10)
|
||||
setPageSize(newPageSize)
|
||||
setCurrentPage(1) // Reset to first page
|
||||
}, [])
|
||||
|
||||
const handleDelete = () => {
|
||||
deleteOrganization.mutate(organizationId, {
|
||||
onSuccess: () => setOpenConfirm(false)
|
||||
})
|
||||
}
|
||||
|
||||
const columns = useMemo<ColumnDef<SaOrganizationsTypeWithAction, any>[]>(
|
||||
() => [
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
{...{
|
||||
checked: table.getIsAllRowsSelected(),
|
||||
indeterminate: table.getIsSomeRowsSelected(),
|
||||
onChange: table.getToggleAllRowsSelectedHandler()
|
||||
}}
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
{...{
|
||||
checked: row.getIsSelected(),
|
||||
disabled: !row.getCanSelect(),
|
||||
indeterminate: row.getIsSomeSelected(),
|
||||
onChange: row.getToggleSelectedHandler()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
},
|
||||
columnHelper.accessor('name', {
|
||||
header: 'Name',
|
||||
cell: ({ row }) => <Typography color='text.primary'>{row.original.name || '-'}</Typography>
|
||||
}),
|
||||
columnHelper.accessor('email', {
|
||||
header: 'Email',
|
||||
cell: ({ row }) => <Typography color='text.primary'>{row.original.email || '-'}</Typography>
|
||||
}),
|
||||
columnHelper.accessor('phone_number', {
|
||||
header: 'Phone',
|
||||
cell: ({ row }) => <Typography>{row.original.phone_number || '-'}</Typography>
|
||||
}),
|
||||
columnHelper.accessor('plan_type', {
|
||||
header: 'Plan Type',
|
||||
cell: ({ row }) => (
|
||||
<Chip label={row.original.plan_type} variant='tonal' color={row.original.plan_type === 'enterprise' ? 'primary' : 'info'} />
|
||||
)
|
||||
}),
|
||||
columnHelper.accessor('actions', {
|
||||
header: 'Actions',
|
||||
cell: ({ row }) => (
|
||||
<div className='flex items-center'>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
dispatch(setOrganization(row.original))
|
||||
}}
|
||||
>
|
||||
<i className='tabler-edit text-textSecondary' />
|
||||
</IconButton>
|
||||
<OptionMenu
|
||||
iconButtonProps={{ size: 'medium' }}
|
||||
iconClassName='text-textSecondary'
|
||||
options={[
|
||||
{ text: 'Download', icon: 'tabler-download' },
|
||||
{
|
||||
text: 'Delete',
|
||||
icon: 'tabler-trash',
|
||||
menuItemProps: {
|
||||
onClick: () => {
|
||||
setOpenConfirm(true)
|
||||
setOrganizationId(row.original.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
{ text: 'Duplicate', icon: 'tabler-copy' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
enableSorting: false
|
||||
})
|
||||
],
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[]
|
||||
)
|
||||
|
||||
const table = useReactTable({
|
||||
data: organizations as Organization[],
|
||||
columns,
|
||||
filterFns: {
|
||||
fuzzy: fuzzyFilter
|
||||
},
|
||||
state: {
|
||||
rowSelection,
|
||||
pagination: {
|
||||
pageIndex: currentPage,
|
||||
pageSize
|
||||
}
|
||||
},
|
||||
enableRowSelection: true, //enable row selection for all rows
|
||||
onRowSelectionChange: setRowSelection,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
// Disable client-side pagination since we're handling it server-side
|
||||
manualPagination: true,
|
||||
pageCount: Math.ceil(totalCount / pageSize)
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardContent className='flex justify-between flex-wrap max-sm:flex-col sm:items-center gap-4'>
|
||||
<DebouncedInput
|
||||
value={search}
|
||||
onChange={value => setSearch(value as string)}
|
||||
placeholder='Search'
|
||||
className='max-sm:is-full'
|
||||
/>
|
||||
<div className='flex max-sm:flex-col items-start sm:items-center gap-4 max-sm:is-full'>
|
||||
<CustomTextField select value={pageSize} onChange={handlePageSizeChange} className='is-full sm:is-[70px]'>
|
||||
<MenuItem value='10'>10</MenuItem>
|
||||
<MenuItem value='25'>25</MenuItem>
|
||||
<MenuItem value='50'>50</MenuItem>
|
||||
<MenuItem value='100'>100</MenuItem>
|
||||
</CustomTextField>
|
||||
<Button
|
||||
variant='tonal'
|
||||
className='max-sm:is-full'
|
||||
color='secondary'
|
||||
startIcon={<i className='tabler-upload' />}
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
<div className='overflow-x-auto'>
|
||||
{isLoading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<table className={tableStyles.table}>
|
||||
<thead>
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map(header => (
|
||||
<th key={header.id}>
|
||||
{header.isPlaceholder ? null : (
|
||||
<>
|
||||
<div
|
||||
className={classnames({
|
||||
'flex items-center': header.column.getIsSorted(),
|
||||
'cursor-pointer select-none': header.column.getCanSort()
|
||||
})}
|
||||
onClick={header.column.getToggleSortingHandler()}
|
||||
>
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
{{
|
||||
asc: <i className='tabler-chevron-up text-xl' />,
|
||||
desc: <i className='tabler-chevron-down text-xl' />
|
||||
}[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
{table.getFilteredRowModel().rows.length === 0 ? (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
|
||||
No data available
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
) : (
|
||||
<tbody>
|
||||
{table
|
||||
.getRowModel()
|
||||
.rows.slice(0, table.getState().pagination.pageSize)
|
||||
.map(row => {
|
||||
return (
|
||||
<tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
|
||||
))}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
)}
|
||||
</table>
|
||||
)}
|
||||
|
||||
{isFetching && !isLoading && (
|
||||
<Box
|
||||
position='absolute'
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
display='flex'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
bgcolor='rgba(255,255,255,0.7)'
|
||||
zIndex={1}
|
||||
>
|
||||
<CircularProgress size={24} />
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<TablePagination
|
||||
component={() => (
|
||||
<TablePaginationComponent
|
||||
pageIndex={currentPage}
|
||||
pageSize={pageSize}
|
||||
totalCount={totalCount}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
)}
|
||||
count={totalCount}
|
||||
rowsPerPage={pageSize}
|
||||
page={currentPage}
|
||||
onPageChange={handlePageChange}
|
||||
onRowsPerPageChange={handlePageSizeChange}
|
||||
rowsPerPageOptions={[10, 25, 50]}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<ConfirmDeleteDialog
|
||||
open={openConfirm}
|
||||
onClose={() => setOpenConfirm(false)}
|
||||
onConfirm={handleDelete}
|
||||
isLoading={deleteOrganization.isPending}
|
||||
title='Delete Organization'
|
||||
message='Are you sure you want to delete this Organization? This action cannot be undone.'
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrganizationListTable
|
||||
Reference in New Issue
Block a user