fix: user management & profit chart
This commit is contained in:
ferdiansyah783
@@ -2,64 +2,79 @@
|
||||
import Card from '@mui/material/Card'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import type { TypographyProps } from '@mui/material/Typography'
|
||||
|
||||
// Type Imports
|
||||
import type { ThemeColor } from '@core/types'
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Component Imports
|
||||
import AddAddress from '@components/dialogs/add-edit-address'
|
||||
import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
|
||||
import CustomAvatar from '../../../../../@core/components/mui/Avatar'
|
||||
import { Order } from '../../../../../types/services/order'
|
||||
import { formatCurrency } from '../../../../../utils/transform'
|
||||
|
||||
// Vars
|
||||
const data = {
|
||||
firstName: 'Roker',
|
||||
lastName: 'Terrace',
|
||||
email: 'sbaser0@boston.com',
|
||||
country: 'UK',
|
||||
address1: 'Latheronwheel',
|
||||
address2: 'KW5 8NW, London',
|
||||
landmark: 'Near Water Plant',
|
||||
city: 'London',
|
||||
state: 'Capholim',
|
||||
zipCode: '403114',
|
||||
taxId: 'TAX-875623',
|
||||
vatNumber: 'SDF754K77',
|
||||
contact: '+1 (609) 972-22-22'
|
||||
type PayementStatusType = {
|
||||
text: string
|
||||
color: ThemeColor
|
||||
colorClassName: string
|
||||
}
|
||||
|
||||
const BillingAddress = () => {
|
||||
// Vars
|
||||
const typographyProps = (children: string, color: ThemeColor, className: string): TypographyProps => ({
|
||||
children,
|
||||
color,
|
||||
className
|
||||
})
|
||||
const statusChipColor: { [key: string]: PayementStatusType } = {
|
||||
pending: {
|
||||
color: 'warning',
|
||||
text: 'Pending',
|
||||
colorClassName: 'text-warning'
|
||||
},
|
||||
completed: {
|
||||
color: 'success',
|
||||
text: 'Paid',
|
||||
colorClassName: 'text-success'
|
||||
},
|
||||
cancelled: {
|
||||
color: 'error',
|
||||
text: 'Cancelled',
|
||||
colorClassName: 'text-error'
|
||||
}
|
||||
}
|
||||
|
||||
const BillingAddress = ({ data }: { data: Order }) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className='flex flex-col gap-6'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<Typography variant='h5'>Billing Address</Typography>
|
||||
<OpenDialogOnElementClick
|
||||
element={Typography}
|
||||
elementProps={typographyProps('Edit', 'primary', 'cursor-pointer font-medium')}
|
||||
dialog={AddAddress}
|
||||
dialogProps={{ type: 'Add address for billing address', data }}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<Typography>45 Roker Terrace</Typography>
|
||||
<Typography>Latheronwheel</Typography>
|
||||
<Typography>KW5 8NW, London</Typography>
|
||||
<Typography>UK</Typography>
|
||||
<Typography variant='h5'>
|
||||
Payment Details ({data.payments.length} {data.payments.length === 1 ? 'Payment' : 'Payments'})
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-start gap-1'>
|
||||
<Typography variant='h5'>Mastercard</Typography>
|
||||
<Typography>Card Number: ******4291</Typography>
|
||||
</div>
|
||||
{data.payments.map((payment, index) => (
|
||||
<div key={index}>
|
||||
<div className='flex items-center gap-3'>
|
||||
<CustomAvatar skin='light' color='secondary' size={40}>
|
||||
<i className='tabler-credit-card' />
|
||||
</CustomAvatar>
|
||||
<div className='flex flex-col'>
|
||||
<div className='font-medium flex items-center gap-3'>
|
||||
<Typography color='text.primary'>{payment.payment_method_name}</Typography>
|
||||
<div className='flex items-center gap-1'>
|
||||
<i
|
||||
className={classnames(
|
||||
'tabler-circle-filled bs-1.5 is-1.5',
|
||||
statusChipColor[payment.status].colorClassName
|
||||
)}
|
||||
/>
|
||||
<Typography color={`${statusChipColor[payment.status].color}.main`} className='font-medium text-xs'>
|
||||
{statusChipColor[payment.status].text}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<Typography color='text.secondary' className='font-medium'>
|
||||
{formatCurrency(payment.amount)}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@@ -1,21 +1,18 @@
|
||||
// MUI Imports
|
||||
import Avatar from '@mui/material/Avatar'
|
||||
import Card from '@mui/material/Card'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import Avatar from '@mui/material/Avatar'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import type { TypographyProps } from '@mui/material/Typography'
|
||||
|
||||
// Type Imports
|
||||
import type { ThemeColor } from '@core/types'
|
||||
import type { OrderType } from '@/types/apps/ecommerceTypes'
|
||||
|
||||
// Component Imports
|
||||
import CustomAvatar from '@core/components/mui/Avatar'
|
||||
import EditUserInfo from '@components/dialogs/edit-user-info'
|
||||
import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
|
||||
|
||||
// Util Imports
|
||||
import { getInitials } from '@/utils/getInitials'
|
||||
import { Order } from '../../../../../types/services/order'
|
||||
|
||||
const getAvatar = (params: Pick<OrderType, 'avatar' | 'customer'>) => {
|
||||
const { avatar, customer } = params
|
||||
@@ -42,25 +39,17 @@ const userData = {
|
||||
useAsBillingAddress: true
|
||||
}
|
||||
|
||||
const CustomerDetails = ({ orderData }: { orderData?: OrderType }) => {
|
||||
// Vars
|
||||
const typographyProps = (children: string, color: ThemeColor, className: string): TypographyProps => ({
|
||||
children,
|
||||
color,
|
||||
className
|
||||
})
|
||||
|
||||
const CustomerDetails = ({ orderData }: { orderData?: Order }) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className='flex flex-col gap-6'>
|
||||
<Typography variant='h5'>Customer details</Typography>
|
||||
<div className='flex items-center gap-3'>
|
||||
{getAvatar({ avatar: orderData?.avatar ?? '', customer: orderData?.customer ?? '' })}
|
||||
{getAvatar({ avatar: '', customer: orderData?.metadata.customer_name ?? '' })}
|
||||
<div className='flex flex-col'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
{orderData?.customer}
|
||||
{orderData?.metadata.customer_name}
|
||||
</Typography>
|
||||
<Typography>Customer ID: #47389</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-3'>
|
||||
@@ -68,24 +57,9 @@ const CustomerDetails = ({ orderData }: { orderData?: OrderType }) => {
|
||||
<i className='tabler-shopping-cart' />
|
||||
</CustomAvatar>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
12 Orders
|
||||
{orderData?.order_items.length} {orderData?.order_items.length === 1 ? 'Order' : 'Orders'}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
Contact info
|
||||
</Typography>
|
||||
<OpenDialogOnElementClick
|
||||
element={Typography}
|
||||
elementProps={typographyProps('Edit', 'primary', 'cursor-pointer font-medium')}
|
||||
dialog={EditUserInfo}
|
||||
dialogProps={{ data: userData }}
|
||||
/>
|
||||
</div>
|
||||
<Typography>Email: {orderData?.email}</Typography>
|
||||
<Typography>Mobile: +1 (609) 972-22-22</Typography>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
// MUI Imports
|
||||
import type { ButtonProps } from '@mui/material/Button'
|
||||
import Button from '@mui/material/Button'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import type { ButtonProps } from '@mui/material/Button'
|
||||
|
||||
// Type Imports
|
||||
import type { ThemeColor } from '@core/types'
|
||||
import type { OrderType } from '@/types/apps/ecommerceTypes'
|
||||
|
||||
// Component Imports
|
||||
import ConfirmationDialog from '@components/dialogs/confirmation-dialog'
|
||||
import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
|
||||
import { Order } from '../../../../../types/services/order'
|
||||
import { formatDate } from '../../../../../utils/transform'
|
||||
|
||||
type PayementStatusType = {
|
||||
text: string
|
||||
@@ -22,32 +23,32 @@ type StatusChipColorType = {
|
||||
}
|
||||
|
||||
export const paymentStatus: { [key: number]: PayementStatusType } = {
|
||||
1: { text: 'Paid', color: 'success' },
|
||||
2: { text: 'Pending', color: 'warning' },
|
||||
3: { text: 'Cancelled', color: 'secondary' },
|
||||
4: { text: 'Failed', color: 'error' }
|
||||
1: { text: 'paid', color: 'success' },
|
||||
2: { text: 'pending', color: 'warning' },
|
||||
3: { text: 'cancelled', color: 'secondary' },
|
||||
4: { text: 'failed', color: 'error' }
|
||||
}
|
||||
|
||||
export const statusChipColor: { [key: string]: StatusChipColorType } = {
|
||||
Delivered: { color: 'success' },
|
||||
'Out for Delivery': { color: 'primary' },
|
||||
'Ready to Pickup': { color: 'info' },
|
||||
Dispatched: { color: 'warning' }
|
||||
'pending': { color: 'warning' },
|
||||
'completed': { color: 'success' },
|
||||
'partial': { color: 'secondary' },
|
||||
'cancelled': { color: 'error' }
|
||||
}
|
||||
|
||||
const OrderDetailHeader = ({ orderData, order }: { orderData?: OrderType; order: string }) => {
|
||||
const OrderDetailHeader = ({ orderData }: { orderData?: Order }) => {
|
||||
// Vars
|
||||
const buttonProps = (children: string, color: ThemeColor, variant: ButtonProps['variant']): ButtonProps => ({
|
||||
children,
|
||||
color,
|
||||
variant
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='flex flex-wrap justify-between sm:items-center max-sm:flex-col gap-y-4'>
|
||||
<div className='flex flex-col items-start gap-1'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Typography variant='h5'>{`Order #${order}`}</Typography>
|
||||
<Typography variant='h5'>{`Order #${orderData?.order_number}`}</Typography>
|
||||
<Chip
|
||||
variant='tonal'
|
||||
label={orderData?.status}
|
||||
@@ -56,12 +57,12 @@ const OrderDetailHeader = ({ orderData, order }: { orderData?: OrderType; order:
|
||||
/>
|
||||
<Chip
|
||||
variant='tonal'
|
||||
label={paymentStatus[orderData?.payment ?? 0].text}
|
||||
color={paymentStatus[orderData?.payment ?? 0].color}
|
||||
label={orderData?.payment_status || ''}
|
||||
color={statusChipColor[orderData?.payment_status || ''].color}
|
||||
size='small'
|
||||
/>
|
||||
</div>
|
||||
<Typography>{`${new Date(orderData?.date ?? '').toDateString()}, ${orderData?.time} (ET)`}</Typography>
|
||||
<Typography>{`${formatDate(orderData!.created_at)}`}</Typography>
|
||||
</div>
|
||||
<OpenDialogOnElementClick
|
||||
element={Button}
|
||||
|
||||
@@ -1,37 +1,39 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import { useState, useMemo } from 'react'
|
||||
import { useMemo, useState } from 'react'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import Checkbox from '@mui/material/Checkbox'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
import { rankItem } from '@tanstack/match-sorter-utils'
|
||||
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||
import {
|
||||
createColumnHelper,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
getFilteredRowModel,
|
||||
getFacetedMinMaxValues,
|
||||
getFacetedRowModel,
|
||||
getFacetedUniqueValues,
|
||||
getFacetedMinMaxValues,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel
|
||||
getSortedRowModel,
|
||||
useReactTable
|
||||
} from '@tanstack/react-table'
|
||||
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Component Imports
|
||||
import Link from '@components/Link'
|
||||
|
||||
// Style Imports
|
||||
import tableStyles from '@core/styles/table.module.css'
|
||||
import { ThemeColor } from '../../../../../@core/types'
|
||||
import { Order, OrderItem } from '../../../../../types/services/order'
|
||||
import { formatCurrency } from '../../../../../utils/transform'
|
||||
|
||||
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||
// Rank the item
|
||||
@@ -47,57 +49,44 @@ const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||
}
|
||||
|
||||
type dataType = {
|
||||
productName: string
|
||||
productImage: string
|
||||
brand: string
|
||||
price: number
|
||||
product_name: string
|
||||
status: string
|
||||
unit_price: number
|
||||
quantity: number
|
||||
total: number
|
||||
total_price: number
|
||||
}
|
||||
|
||||
const orderData: dataType[] = [
|
||||
{
|
||||
productName: 'OnePlus 7 Pro',
|
||||
productImage: '/images/apps/ecommerce/product-21.png',
|
||||
brand: 'OnePluse',
|
||||
price: 799,
|
||||
quantity: 1,
|
||||
total: 799
|
||||
type PayementStatusType = {
|
||||
text: string
|
||||
color: ThemeColor
|
||||
colorClassName: string
|
||||
}
|
||||
|
||||
const statusChipColor: { [key: string]: PayementStatusType } = {
|
||||
pending: {
|
||||
color: 'warning',
|
||||
text: 'Pending',
|
||||
colorClassName: 'text-warning'
|
||||
},
|
||||
{
|
||||
productName: 'Magic Mouse',
|
||||
productImage: '/images/apps/ecommerce/product-22.png',
|
||||
brand: 'Google',
|
||||
price: 89,
|
||||
quantity: 1,
|
||||
total: 89
|
||||
paid: {
|
||||
color: 'success',
|
||||
text: 'Paid',
|
||||
colorClassName: 'text-success'
|
||||
},
|
||||
{
|
||||
productName: 'Wooden Chair',
|
||||
productImage: '/images/apps/ecommerce/product-23.png',
|
||||
brand: 'Insofar',
|
||||
price: 289,
|
||||
quantity: 2,
|
||||
total: 578
|
||||
},
|
||||
{
|
||||
productName: 'Air Jorden',
|
||||
productImage: '/images/apps/ecommerce/product-24.png',
|
||||
brand: 'Nike',
|
||||
price: 299,
|
||||
quantity: 2,
|
||||
total: 598
|
||||
cancelled: {
|
||||
color: 'error',
|
||||
text: 'Cancelled',
|
||||
colorClassName: 'text-error'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// Column Definitions
|
||||
const columnHelper = createColumnHelper<dataType>()
|
||||
|
||||
const OrderTable = () => {
|
||||
const OrderTable = ({ data }: { data: OrderItem[] }) => {
|
||||
// States
|
||||
const [rowSelection, setRowSelection] = useState({})
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [data, setData] = useState(...[orderData])
|
||||
const [globalFilter, setGlobalFilter] = useState('')
|
||||
|
||||
const columns = useMemo<ColumnDef<dataType, any>[]>(
|
||||
@@ -124,31 +113,43 @@ const OrderTable = () => {
|
||||
/>
|
||||
)
|
||||
},
|
||||
columnHelper.accessor('productName', {
|
||||
columnHelper.accessor('product_name', {
|
||||
header: 'Product',
|
||||
cell: ({ row }) => (
|
||||
<div className='flex items-center gap-3'>
|
||||
<img src={row.original.productImage} alt={row.original.productName} height={34} className='rounded' />
|
||||
<div className='flex flex-col items-start'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
{row.original.productName}
|
||||
{row.original.product_name}
|
||||
</Typography>
|
||||
<Typography variant='body2'>{row.original.brand}</Typography>
|
||||
<div className='flex items-center gap-1'>
|
||||
<i
|
||||
className={classnames(
|
||||
'tabler-circle-filled bs-2.5 is-2.5',
|
||||
statusChipColor[row.original.status].colorClassName
|
||||
)}
|
||||
/>
|
||||
<Typography
|
||||
color={`${statusChipColor[row.original.status].color}.main`}
|
||||
className='font-medium text-xs'
|
||||
>
|
||||
{statusChipColor[row.original.status].text}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}),
|
||||
columnHelper.accessor('price', {
|
||||
columnHelper.accessor('unit_price', {
|
||||
header: 'Price',
|
||||
cell: ({ row }) => <Typography>{`$${row.original.price}`}</Typography>
|
||||
cell: ({ row }) => <Typography>{formatCurrency(row.original.unit_price)}</Typography>
|
||||
}),
|
||||
columnHelper.accessor('quantity', {
|
||||
header: 'Qty',
|
||||
cell: ({ row }) => <Typography>{`${row.original.quantity}`}</Typography>
|
||||
}),
|
||||
columnHelper.accessor('total', {
|
||||
columnHelper.accessor('total_price', {
|
||||
header: 'Total',
|
||||
cell: ({ row }) => <Typography>{`$${row.original.total}`}</Typography>
|
||||
cell: ({ row }) => <Typography>{formatCurrency(row.original.total_price)}</Typography>
|
||||
})
|
||||
],
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@@ -156,7 +157,7 @@ const OrderTable = () => {
|
||||
)
|
||||
|
||||
const table = useReactTable({
|
||||
data: data as dataType[],
|
||||
data: data as OrderItem[],
|
||||
columns,
|
||||
filterFns: {
|
||||
fuzzy: fuzzyFilter
|
||||
@@ -243,18 +244,11 @@ const OrderTable = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const OrderDetailsCard = () => {
|
||||
const OrderDetailsCard = ({ data }: { data: Order }) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Order Details'
|
||||
action={
|
||||
<Typography component={Link} color='primary.main' className='font-medium'>
|
||||
Edit
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
<OrderTable />
|
||||
<CardHeader title='Order Details' />
|
||||
<OrderTable data={data.order_items} />
|
||||
<CardContent className='flex justify-end'>
|
||||
<div>
|
||||
<div className='flex items-center gap-12'>
|
||||
@@ -262,15 +256,15 @@ const OrderDetailsCard = () => {
|
||||
Subtotal:
|
||||
</Typography>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
$2,093
|
||||
{formatCurrency(data.subtotal)}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center gap-12'>
|
||||
<Typography color='text.primary' className='min-is-[100px]'>
|
||||
Shipping Fee:
|
||||
Discount
|
||||
</Typography>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
$2
|
||||
{formatCurrency(data.discount_amount)}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center gap-12'>
|
||||
@@ -278,7 +272,7 @@ const OrderDetailsCard = () => {
|
||||
Tax:
|
||||
</Typography>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
$28
|
||||
{formatCurrency(data.tax_amount)}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center gap-12'>
|
||||
@@ -286,7 +280,7 @@ const OrderDetailsCard = () => {
|
||||
Total:
|
||||
</Typography>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
$2113
|
||||
{formatCurrency(data.total_amount)}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,43 +1,59 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Grid from '@mui/material/Grid2'
|
||||
|
||||
// Type Imports
|
||||
import type { OrderType } from '@/types/apps/ecommerceTypes'
|
||||
|
||||
// Component Imports
|
||||
import { redirect, useParams } from 'next/navigation'
|
||||
import Loading from '../../../../../components/layout/shared/Loading'
|
||||
import { useOrder } from '../../../../../services/queries/orders'
|
||||
import BillingAddress from './BillingAddressCard'
|
||||
import CustomerDetails from './CustomerDetailsCard'
|
||||
import OrderDetailHeader from './OrderDetailHeader'
|
||||
import OrderDetailsCard from './OrderDetailsCard'
|
||||
import ShippingActivity from './ShippingActivityCard'
|
||||
import CustomerDetails from './CustomerDetailsCard'
|
||||
import ShippingAddress from './ShippingAddressCard'
|
||||
import BillingAddress from './BillingAddressCard'
|
||||
|
||||
const OrderDetails = ({ orderData, order }: { orderData?: OrderType; order: string }) => {
|
||||
const OrderDetails = () => {
|
||||
|
||||
const params = useParams()
|
||||
|
||||
const { data, isLoading } = useOrder(params.id as string)
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading />
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
redirect('not-found')
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<OrderDetailHeader orderData={orderData} order={order} />
|
||||
<OrderDetailHeader orderData={data} />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 8 }}>
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<OrderDetailsCard />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ShippingActivity order={order} />
|
||||
<OrderDetailsCard data={data} />
|
||||
</Grid>
|
||||
{/* <Grid size={{ xs: 12 }}>
|
||||
<ShippingActivity order={data.order_number} />
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 4 }}>
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<CustomerDetails orderData={orderData} />
|
||||
<CustomerDetails orderData={data} />
|
||||
</Grid>
|
||||
{/* <Grid size={{ xs: 12 }}>
|
||||
<ShippingAddress />
|
||||
</Grid> */}
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ShippingAddress />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<BillingAddress />
|
||||
<BillingAddress data={data} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
@@ -215,7 +215,7 @@ const OrderListTable = () => {
|
||||
text: 'View',
|
||||
icon: 'tabler-eye',
|
||||
href: getLocalizedUrl(
|
||||
`/apps/ecommerce/orders/details/${row.original.order_number}`,
|
||||
`/apps/ecommerce/orders/${row.original.id}/details`,
|
||||
locale as Locale
|
||||
),
|
||||
linkProps: { className: 'flex items-center gap-2 is-full plb-2 pli-4' }
|
||||
|
||||
@@ -3,94 +3,50 @@ import { useState } from 'react'
|
||||
|
||||
// MUI Imports
|
||||
import Button from '@mui/material/Button'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import Drawer from '@mui/material/Drawer'
|
||||
import IconButton from '@mui/material/IconButton'
|
||||
import MenuItem from '@mui/material/MenuItem'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Divider from '@mui/material/Divider'
|
||||
|
||||
// Third-party Imports
|
||||
import { useForm, Controller } from 'react-hook-form'
|
||||
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 { UserRequest } from '../../../../types/services/user'
|
||||
import { Switch } from '@mui/material'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
handleClose: () => void
|
||||
userData?: UsersType[]
|
||||
setData: (data: UsersType[]) => void
|
||||
}
|
||||
|
||||
type FormValidateType = {
|
||||
fullName: string
|
||||
username: string
|
||||
email: string
|
||||
role: string
|
||||
plan: string
|
||||
status: string
|
||||
}
|
||||
|
||||
type FormNonValidateType = {
|
||||
company: string
|
||||
country: string
|
||||
contact: string
|
||||
}
|
||||
|
||||
// Vars
|
||||
const initialData = {
|
||||
company: '',
|
||||
country: '',
|
||||
contact: ''
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: '',
|
||||
permissions: {},
|
||||
is_active: true,
|
||||
organization_id: '',
|
||||
outlet_id: '',
|
||||
}
|
||||
|
||||
const AddUserDrawer = (props: Props) => {
|
||||
// Props
|
||||
const { open, handleClose, userData, setData } = props
|
||||
const { open, handleClose } = props
|
||||
|
||||
// States
|
||||
const [formData, setFormData] = useState<FormNonValidateType>(initialData)
|
||||
const [formData, setFormData] = useState<UserRequest>(initialData)
|
||||
|
||||
// Hooks
|
||||
const {
|
||||
control,
|
||||
reset: resetForm,
|
||||
handleSubmit,
|
||||
formState: { errors }
|
||||
} = useForm<FormValidateType>({
|
||||
defaultValues: {
|
||||
fullName: '',
|
||||
username: '',
|
||||
email: '',
|
||||
role: '',
|
||||
plan: '',
|
||||
status: ''
|
||||
}
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormValidateType) => {
|
||||
const newUser: UsersType = {
|
||||
id: (userData?.length && userData?.length + 1) || 1,
|
||||
avatar: `/images/avatars/${Math.floor(Math.random() * 8) + 1}.png`,
|
||||
fullName: data.fullName,
|
||||
username: data.username,
|
||||
email: data.email,
|
||||
role: data.role,
|
||||
currentPlan: data.plan,
|
||||
status: data.status,
|
||||
company: formData.company,
|
||||
country: formData.country,
|
||||
contact: formData.contact,
|
||||
billing: userData?.[Math.floor(Math.random() * 50) + 1].billing ?? 'Auto Debit'
|
||||
}
|
||||
|
||||
setData([...(userData ?? []), newUser])
|
||||
const onSubmit = () => {
|
||||
handleClose()
|
||||
setFormData(initialData)
|
||||
resetForm({ fullName: '', username: '', email: '', role: '', plan: '', status: '' })
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
@@ -98,6 +54,13 @@ const AddUserDrawer = (props: Props) => {
|
||||
setFormData(initialData)
|
||||
}
|
||||
|
||||
const handleInputChange = (e: any) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
open={open}
|
||||
@@ -115,144 +78,45 @@ const AddUserDrawer = (props: Props) => {
|
||||
</div>
|
||||
<Divider />
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(data => onSubmit(data))} className='flex flex-col gap-6 p-6'>
|
||||
<Controller
|
||||
name='fullName'
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<CustomTextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label='Full Name'
|
||||
placeholder='John Doe'
|
||||
{...(errors.fullName && { error: true, helperText: 'This field is required.' })}
|
||||
/>
|
||||
)}
|
||||
<form onSubmit={onSubmit} className='flex flex-col gap-6 p-6'>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
label='Name'
|
||||
placeholder='John Doe'
|
||||
name='name'
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<Controller
|
||||
name='username'
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<CustomTextField
|
||||
{...field}
|
||||
fullWidth
|
||||
label='Username'
|
||||
placeholder='johndoe'
|
||||
{...(errors.username && { error: true, helperText: 'This field is required.' })}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
type='email'
|
||||
label='Email'
|
||||
placeholder='johndoe@email'
|
||||
name='email'
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<CustomTextField
|
||||
{...field}
|
||||
fullWidth
|
||||
type='email'
|
||||
label='Email'
|
||||
placeholder='johndoe@gmail.com'
|
||||
{...(errors.email && { error: true, helperText: 'This field is required.' })}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name='role'
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
id='select-role'
|
||||
label='Select Role'
|
||||
{...field}
|
||||
{...(errors.role && { error: true, helperText: 'This field is required.' })}
|
||||
>
|
||||
<MenuItem value='admin'>Admin</MenuItem>
|
||||
<MenuItem value='author'>Author</MenuItem>
|
||||
<MenuItem value='editor'>Editor</MenuItem>
|
||||
<MenuItem value='maintainer'>Maintainer</MenuItem>
|
||||
<MenuItem value='subscriber'>Subscriber</MenuItem>
|
||||
</CustomTextField>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name='plan'
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
id='select-plan'
|
||||
label='Select Plan'
|
||||
{...field}
|
||||
slotProps={{
|
||||
htmlInput: { placeholder: 'Select Plan' }
|
||||
}}
|
||||
{...(errors.plan && { error: true, helperText: 'This field is required.' })}
|
||||
>
|
||||
<MenuItem value='basic'>Basic</MenuItem>
|
||||
<MenuItem value='company'>Company</MenuItem>
|
||||
<MenuItem value='enterprise'>Enterprise</MenuItem>
|
||||
<MenuItem value='team'>Team</MenuItem>
|
||||
</CustomTextField>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name='status'
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
id='select-status'
|
||||
label='Select Status'
|
||||
{...field}
|
||||
{...(errors.status && { error: true, helperText: 'This field is required.' })}
|
||||
>
|
||||
<MenuItem value='pending'>Pending</MenuItem>
|
||||
<MenuItem value='active'>Active</MenuItem>
|
||||
<MenuItem value='inactive'>Inactive</MenuItem>
|
||||
</CustomTextField>
|
||||
)}
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<CustomTextField
|
||||
label='Company'
|
||||
fullWidth
|
||||
placeholder='Company PVT LTD'
|
||||
value={formData.company}
|
||||
onChange={e => setFormData({ ...formData, company: e.target.value })}
|
||||
/>
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
id='country'
|
||||
value={formData.country}
|
||||
onChange={e => setFormData({ ...formData, country: e.target.value })}
|
||||
label='Select Country'
|
||||
slotProps={{
|
||||
htmlInput: { placeholder: 'Country' }
|
||||
}}
|
||||
>
|
||||
<MenuItem value='India'>India</MenuItem>
|
||||
<MenuItem value='USA'>USA</MenuItem>
|
||||
<MenuItem value='Australia'>Australia</MenuItem>
|
||||
<MenuItem value='Germany'>Germany</MenuItem>
|
||||
</CustomTextField>
|
||||
<CustomTextField
|
||||
label='Contact'
|
||||
type='number'
|
||||
fullWidth
|
||||
placeholder='(397) 294-5153'
|
||||
value={formData.contact}
|
||||
onChange={e => setFormData({ ...formData, contact: e.target.value })}
|
||||
type='password'
|
||||
label='Password'
|
||||
placeholder='********'
|
||||
name='password'
|
||||
value={formData.password}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<div className='flex items-center'>
|
||||
<div className='flex flex-col items-start gap-1'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
Active
|
||||
</Typography>
|
||||
</div>
|
||||
<Switch
|
||||
checked={formData.is_active}
|
||||
name='is_active'
|
||||
onChange={e => setFormData({ ...formData, is_active: e.target.checked })}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Button variant='contained' type='submit'>
|
||||
Submit
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import Link from 'next/link'
|
||||
@@ -23,31 +23,17 @@ import Typography from '@mui/material/Typography'
|
||||
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,
|
||||
getFacetedMinMaxValues,
|
||||
getFacetedRowModel,
|
||||
getFacetedUniqueValues,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable
|
||||
} from '@tanstack/react-table'
|
||||
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
import type { UsersType } from '@/types/apps/userTypes'
|
||||
import type { Locale } from '@configs/i18n'
|
||||
import type { ThemeColor } from '@core/types'
|
||||
|
||||
// Component Imports
|
||||
import CustomAvatar from '@core/components/mui/Avatar'
|
||||
import CustomTextField from '@core/components/mui/TextField'
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
import AddUserDrawer from './AddUserDrawer'
|
||||
import TableFilters from './TableFilters'
|
||||
|
||||
// Util Imports
|
||||
import { getInitials } from '@/utils/getInitials'
|
||||
@@ -55,6 +41,12 @@ import { getLocalizedUrl } from '@/utils/i18n'
|
||||
|
||||
// Style Imports
|
||||
import tableStyles from '@core/styles/table.module.css'
|
||||
import { Box, CircularProgress, TablePagination } from '@mui/material'
|
||||
import Loading from '../../../../components/layout/shared/Loading'
|
||||
import TablePaginationComponent from '../../../../components/TablePaginationComponent'
|
||||
import { useUsers } from '../../../../services/queries/users'
|
||||
import { User } from '../../../../types/services/user'
|
||||
import AddUserDrawer from './AddUserDrawer'
|
||||
|
||||
declare module '@tanstack/table-core' {
|
||||
interface FilterFns {
|
||||
@@ -65,18 +57,14 @@ declare module '@tanstack/table-core' {
|
||||
}
|
||||
}
|
||||
|
||||
type UsersTypeWithAction = UsersType & {
|
||||
action?: string
|
||||
type UsersTypeWithAction = User & {
|
||||
actions?: string
|
||||
}
|
||||
|
||||
type UserRoleType = {
|
||||
[key: string]: { icon: string; color: string }
|
||||
}
|
||||
|
||||
type UserStatusType = {
|
||||
[key: string]: ThemeColor
|
||||
}
|
||||
|
||||
// Styled Components
|
||||
const Icon = styled('i')({})
|
||||
|
||||
@@ -127,30 +115,54 @@ const userRoleObj: UserRoleType = {
|
||||
admin: { icon: 'tabler-crown', color: 'error' },
|
||||
author: { icon: 'tabler-device-desktop', color: 'warning' },
|
||||
editor: { icon: 'tabler-edit', color: 'info' },
|
||||
maintainer: { icon: 'tabler-chart-pie', color: 'success' },
|
||||
cashier: { icon: 'tabler-chart-pie', color: 'success' },
|
||||
subscriber: { icon: 'tabler-user', color: 'primary' }
|
||||
}
|
||||
|
||||
const userStatusObj: UserStatusType = {
|
||||
active: 'success',
|
||||
pending: 'warning',
|
||||
inactive: 'secondary'
|
||||
}
|
||||
|
||||
// Column Definitions
|
||||
const columnHelper = createColumnHelper<UsersTypeWithAction>()
|
||||
|
||||
const UserListTable = ({ tableData }: { tableData?: UsersType[] }) => {
|
||||
const UserListTable = () => {
|
||||
// States
|
||||
const [addUserOpen, setAddUserOpen] = useState(false)
|
||||
const [rowSelection, setRowSelection] = useState({})
|
||||
const [data, setData] = useState(...[tableData])
|
||||
const [filteredData, setFilteredData] = useState(data)
|
||||
const [globalFilter, setGlobalFilter] = useState('')
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(10)
|
||||
const [openConfirm, setOpenConfirm] = useState(false)
|
||||
const [customerId, setCustomerId] = useState('')
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
// Hooks
|
||||
const { lang: locale } = useParams()
|
||||
|
||||
const { data, isLoading, error, isFetching } = useUsers({
|
||||
page: currentPage,
|
||||
limit: pageSize,
|
||||
search
|
||||
})
|
||||
|
||||
// const { deleteCustomer } = useCustomersMutation()
|
||||
|
||||
const users = data?.users ?? []
|
||||
const totalCount = data?.pagination.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 = () => {
|
||||
// deleteCustomer.mutate(customerId, {
|
||||
// onSuccess: () => setOpenConfirm(false)
|
||||
// })
|
||||
// }
|
||||
|
||||
const columns = useMemo<ColumnDef<UsersTypeWithAction, any>[]>(
|
||||
() => [
|
||||
{
|
||||
@@ -175,16 +187,15 @@ const UserListTable = ({ tableData }: { tableData?: UsersType[] }) => {
|
||||
/>
|
||||
)
|
||||
},
|
||||
columnHelper.accessor('fullName', {
|
||||
columnHelper.accessor('name', {
|
||||
header: 'User',
|
||||
cell: ({ row }) => (
|
||||
<div className='flex items-center gap-4'>
|
||||
{getAvatar({ avatar: row.original.avatar, fullName: row.original.fullName })}
|
||||
{getAvatar({ avatar: '', fullName: row.original.name })}
|
||||
<div className='flex flex-col'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
{row.original.fullName}
|
||||
{row.original.name}
|
||||
</Typography>
|
||||
<Typography variant='body2'>{row.original.username}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -203,44 +214,31 @@ const UserListTable = ({ tableData }: { tableData?: UsersType[] }) => {
|
||||
</div>
|
||||
)
|
||||
}),
|
||||
columnHelper.accessor('currentPlan', {
|
||||
header: 'Plan',
|
||||
cell: ({ row }) => (
|
||||
<Typography className='capitalize' color='text.primary'>
|
||||
{row.original.currentPlan}
|
||||
</Typography>
|
||||
)
|
||||
columnHelper.accessor('email', {
|
||||
header: 'Email',
|
||||
cell: ({ row }) => <Typography>{row.original.email}</Typography>
|
||||
}),
|
||||
columnHelper.accessor('billing', {
|
||||
header: 'Billing',
|
||||
cell: ({ row }) => <Typography>{row.original.billing}</Typography>
|
||||
}),
|
||||
columnHelper.accessor('status', {
|
||||
columnHelper.accessor('is_active', {
|
||||
header: 'Status',
|
||||
cell: ({ row }) => (
|
||||
<div className='flex items-center gap-3'>
|
||||
<Chip
|
||||
variant='tonal'
|
||||
label={row.original.status}
|
||||
label={row.original.is_active ? 'Active' : 'Inactive'}
|
||||
size='small'
|
||||
color={userStatusObj[row.original.status]}
|
||||
color={row.original.is_active ? 'success' : 'error'}
|
||||
className='capitalize'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}),
|
||||
columnHelper.accessor('action', {
|
||||
columnHelper.accessor('actions', {
|
||||
header: 'Action',
|
||||
cell: ({ row }) => (
|
||||
<div className='flex items-center'>
|
||||
<IconButton onClick={() => setData(data?.filter(product => product.id !== row.original.id))}>
|
||||
<IconButton onClick={() => {}}>
|
||||
<i className='tabler-trash text-textSecondary' />
|
||||
</IconButton>
|
||||
<IconButton>
|
||||
<Link href={getLocalizedUrl('/apps/user/view', locale as Locale)} className='flex'>
|
||||
<i className='tabler-eye text-textSecondary' />
|
||||
</Link>
|
||||
</IconButton>
|
||||
<OptionMenu
|
||||
iconButtonProps={{ size: 'medium' }}
|
||||
iconClassName='text-textSecondary'
|
||||
@@ -263,36 +261,28 @@ const UserListTable = ({ tableData }: { tableData?: UsersType[] }) => {
|
||||
})
|
||||
],
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[data, filteredData]
|
||||
[data]
|
||||
)
|
||||
|
||||
const table = useReactTable({
|
||||
data: filteredData as UsersType[],
|
||||
data: users as User[],
|
||||
columns,
|
||||
filterFns: {
|
||||
fuzzy: fuzzyFilter
|
||||
},
|
||||
state: {
|
||||
rowSelection,
|
||||
globalFilter
|
||||
},
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 10
|
||||
pageIndex: currentPage,
|
||||
pageSize
|
||||
}
|
||||
},
|
||||
enableRowSelection: true, //enable row selection for all rows
|
||||
// enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
|
||||
globalFilterFn: fuzzyFilter,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
onGlobalFilterChange: setGlobalFilter,
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getFacetedRowModel: getFacetedRowModel(),
|
||||
getFacetedUniqueValues: getFacetedUniqueValues(),
|
||||
getFacetedMinMaxValues: getFacetedMinMaxValues()
|
||||
// Disable client-side pagination since we're handling it server-side
|
||||
manualPagination: true,
|
||||
pageCount: Math.ceil(totalCount / pageSize)
|
||||
})
|
||||
|
||||
const getAvatar = (params: Pick<UsersType, 'avatar' | 'fullName'>) => {
|
||||
@@ -309,25 +299,25 @@ const UserListTable = ({ tableData }: { tableData?: UsersType[] }) => {
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader title='Filters' className='pbe-4' />
|
||||
<TableFilters setData={setFilteredData} tableData={data} />
|
||||
{/* <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'>
|
||||
<CustomTextField
|
||||
select
|
||||
value={table.getState().pagination.pageSize}
|
||||
onChange={e => table.setPageSize(Number(e.target.value))}
|
||||
className='max-sm:is-full sm:is-[70px]'
|
||||
>
|
||||
<MenuItem value='10'>10</MenuItem>
|
||||
<MenuItem value='25'>25</MenuItem>
|
||||
<MenuItem value='50'>50</MenuItem>
|
||||
</CustomTextField>
|
||||
<DebouncedInput
|
||||
value={search}
|
||||
onChange={value => setSearch(value as string)}
|
||||
placeholder='Search User'
|
||||
className='max-sm:is-full'
|
||||
/>
|
||||
<div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
|
||||
<DebouncedInput
|
||||
value={globalFilter ?? ''}
|
||||
onChange={value => setGlobalFilter(String(value))}
|
||||
placeholder='Search User'
|
||||
className='max-sm:is-full'
|
||||
/>
|
||||
<CustomTextField
|
||||
select
|
||||
value={pageSize}
|
||||
onChange={handlePageSizeChange}
|
||||
className='max-sm:is-full sm:is-[70px]'
|
||||
>
|
||||
<MenuItem value='10'>10</MenuItem>
|
||||
<MenuItem value='25'>25</MenuItem>
|
||||
<MenuItem value='50'>50</MenuItem>
|
||||
</CustomTextField>
|
||||
<Button
|
||||
color='secondary'
|
||||
variant='tonal'
|
||||
@@ -347,75 +337,104 @@ const UserListTable = ({ tableData }: { tableData?: UsersType[] }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className='overflow-x-auto'>
|
||||
<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>
|
||||
{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 table={table} />}
|
||||
count={table.getFilteredRowModel().rows.length}
|
||||
rowsPerPage={table.getState().pagination.pageSize}
|
||||
page={table.getState().pagination.pageIndex}
|
||||
onPageChange={(_, page) => {
|
||||
table.setPageIndex(page)
|
||||
}}
|
||||
/> */}
|
||||
|
||||
<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>
|
||||
|
||||
<AddUserDrawer
|
||||
open={addUserOpen}
|
||||
handleClose={() => setAddUserOpen(!addUserOpen)}
|
||||
userData={data}
|
||||
setData={setData}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -6,16 +6,15 @@ import type { UsersType } from '@/types/apps/userTypes'
|
||||
|
||||
// Component Imports
|
||||
import UserListTable from './UserListTable'
|
||||
import UserListCards from './UserListCards'
|
||||
|
||||
const UserList = ({ userData }: { userData?: UsersType[] }) => {
|
||||
const UserList = () => {
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
{/* <Grid size={{ xs: 12 }}>
|
||||
<UserListCards />
|
||||
</Grid>
|
||||
</Grid> */}
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<UserListTable tableData={userData} />
|
||||
<UserListTable />
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
@@ -175,7 +175,7 @@ const EarningReportsWithTabs = ({ data }: { data: TabType[] }) => {
|
||||
breakpoint: 1450,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '45%' }
|
||||
bar: { columnWidth: '35%' }
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -206,7 +206,7 @@ const EarningReportsWithTabs = ({ data }: { data: TabType[] }) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Earning Reports'
|
||||
title='Product Reports'
|
||||
subheader='Yearly Earnings Overview'
|
||||
action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,249 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import type { SyntheticEvent } from 'react'
|
||||
import { useState } from 'react'
|
||||
|
||||
// Next Imports
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// MUI Imports
|
||||
import TabContext from '@mui/lab/TabContext'
|
||||
import TabList from '@mui/lab/TabList'
|
||||
import TabPanel from '@mui/lab/TabPanel'
|
||||
import Card from '@mui/material/Card'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import CardHeader from '@mui/material/CardHeader'
|
||||
import Tab from '@mui/material/Tab'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
|
||||
// Third Party Imports
|
||||
import type { ApexOptions } from 'apexcharts'
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Components Imports
|
||||
import CustomAvatar from '@core/components/mui/Avatar'
|
||||
import OptionMenu from '@core/components/option-menu'
|
||||
import Loading from '../../../components/layout/shared/Loading'
|
||||
import { formatShortCurrency } from '../../../utils/transform'
|
||||
|
||||
// Styled Component Imports
|
||||
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
|
||||
|
||||
type ApexChartSeries = NonNullable<ApexOptions['series']>
|
||||
type ApexChartSeriesData = Exclude<ApexChartSeries[0], number>
|
||||
|
||||
type TabType = {
|
||||
type: string
|
||||
avatarIcon: string
|
||||
date: any
|
||||
series: ApexChartSeries
|
||||
}
|
||||
|
||||
const renderTabs = (tabData: TabType[], value: string) => {
|
||||
return tabData.map((item, index) => (
|
||||
<Tab
|
||||
key={index}
|
||||
value={item.type}
|
||||
className='mie-4'
|
||||
label={
|
||||
<div
|
||||
className={classnames(
|
||||
'flex flex-col items-center justify-center gap-2 is-[110px] bs-[100px] border rounded-xl',
|
||||
item.type === value ? 'border-solid border-[var(--mui-palette-primary-main)]' : 'border-dashed'
|
||||
)}
|
||||
>
|
||||
<CustomAvatar variant='rounded' skin='light' size={38} {...(item.type === value && { color: 'primary' })}>
|
||||
<i className={classnames('text-[22px]', { 'text-textSecondary': item.type !== value }, item.avatarIcon)} />
|
||||
</CustomAvatar>
|
||||
<Typography className='font-medium capitalize' color='text.primary'>
|
||||
{item.type}
|
||||
</Typography>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
const renderTabPanels = (tabData: TabType[], theme: Theme, options: ApexOptions, colors: string[]) => {
|
||||
return tabData.map((item, index) => {
|
||||
const max = Math.max(...((item.series[0] as ApexChartSeriesData).data as number[]))
|
||||
const seriesIndex = ((item.series[0] as ApexChartSeriesData).data as number[]).indexOf(max)
|
||||
|
||||
const finalColors = colors.map((color, i) => (seriesIndex === i ? 'var(--mui-palette-primary-main)' : color))
|
||||
|
||||
return (
|
||||
<TabPanel key={index} value={item.type} className='!p-0'>
|
||||
<AppReactApexCharts type='bar' height={360} width='100%' options={{ ...options }} series={item.series} />
|
||||
</TabPanel>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const MultipleSeries = ({ data }: { data: TabType[] }) => {
|
||||
// States
|
||||
const [value, setValue] = useState(data[0].type)
|
||||
|
||||
// Hooks
|
||||
const theme = useTheme()
|
||||
|
||||
// Vars
|
||||
const disabledText = 'var(--mui-palette-text-disabled)'
|
||||
|
||||
const handleChange = (event: SyntheticEvent, newValue: string) => {
|
||||
setValue(newValue)
|
||||
}
|
||||
|
||||
const colors = Array(9).fill('var(--mui-palette-primary-lightOpacity)')
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false }
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 2,
|
||||
borderRadiusApplication: 'end'
|
||||
}
|
||||
},
|
||||
legend: { show: false },
|
||||
tooltip: { enabled: true },
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
offsetY: -11
|
||||
// formatter: val => formatShortCurrency(Number(val)),
|
||||
// style: {
|
||||
// fontWeight: 500,
|
||||
// colors: ['var(--mui-palette-text-primary)'],
|
||||
// fontSize: theme.typography.body1.fontSize as string
|
||||
// }
|
||||
},
|
||||
colors: [
|
||||
'var(--mui-palette-primary-main)',
|
||||
'var(--mui-palette-info-main)',
|
||||
'var(--mui-palette-warning-main)',
|
||||
'var(--mui-palette-success-main)'
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: { type: 'none' }
|
||||
},
|
||||
active: {
|
||||
filter: { type: 'none' }
|
||||
}
|
||||
},
|
||||
stroke: { width: 5, colors: ['transparent'] },
|
||||
grid: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: -19,
|
||||
left: -4,
|
||||
right: 0,
|
||||
bottom: -11
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { color: 'var(--mui-palette-divider)' },
|
||||
categories: data.find(item => item.type === value)?.date,
|
||||
tickPlacement: 'between',
|
||||
labels: {
|
||||
style: {
|
||||
colors: disabledText,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
fontSize: theme.typography.body2.fontSize as string
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -18,
|
||||
formatter: val => `${formatShortCurrency(Number(val))}`,
|
||||
style: {
|
||||
colors: disabledText,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
fontSize: theme.typography.body2.fontSize as string
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1450,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '35%' }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
dataLabels: {
|
||||
style: {
|
||||
fontSize: theme.typography.body2.fontSize as string
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '58%' }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 500,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '70%' }
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader
|
||||
title='Profit Reports'
|
||||
subheader='Yearly Earnings Overview'
|
||||
action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
|
||||
/>
|
||||
<CardContent>
|
||||
<TabContext value={value}>
|
||||
{data.length > 1 && (
|
||||
<TabList
|
||||
variant='scrollable'
|
||||
scrollButtons='auto'
|
||||
onChange={handleChange}
|
||||
aria-label='earning report tabs'
|
||||
className='!border-0 mbe-10'
|
||||
sx={{
|
||||
'& .MuiTabs-indicator': { display: 'none !important' },
|
||||
'& .MuiTab-root': { padding: '0 !important', border: '0 !important' }
|
||||
}}
|
||||
>
|
||||
{renderTabs(data, value)}
|
||||
<Tab
|
||||
disabled
|
||||
value='add'
|
||||
label={
|
||||
<div className='flex flex-col items-center justify-center is-[110px] bs-[100px] border border-dashed rounded-xl'>
|
||||
<CustomAvatar variant='rounded' size={34}>
|
||||
<i className='tabler-plus text-textSecondary' />
|
||||
</CustomAvatar>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</TabList>
|
||||
)}
|
||||
{renderTabPanels(data, theme, options, colors)}
|
||||
</TabContext>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default MultipleSeries
|
||||
Reference in New Issue
Block a user