Merge remote-tracking branch 'origin/main' into efril
This commit is contained in:
efrilm
@@ -0,0 +1,584 @@
|
||||
'use client'
|
||||
|
||||
// React Imports
|
||||
import type { ChangeEvent } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Button from '@mui/material/Button'
|
||||
import Grid from '@mui/material/Grid2'
|
||||
import MenuItem from '@mui/material/MenuItem'
|
||||
import Avatar from '@mui/material/Avatar'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import Alert from '@mui/material/Alert'
|
||||
import CircularProgress from '@mui/material/CircularProgress'
|
||||
|
||||
// Third-party Imports
|
||||
import classnames from 'classnames'
|
||||
|
||||
// Type Imports
|
||||
import type { CustomInputHorizontalData } from '@core/components/custom-inputs/types'
|
||||
|
||||
// Component Imports
|
||||
import CustomInputHorizontal from '@core/components/custom-inputs/Horizontal'
|
||||
import DirectionalIcon from '@components/DirectionalIcon'
|
||||
import { useSettings } from '@core/hooks/useSettings'
|
||||
import CustomTextField from '@core/components/mui/TextField'
|
||||
|
||||
// Styles Imports
|
||||
import frontCommonStyles from '@views/front-pages/styles.module.css'
|
||||
import { useOrganizationsMutation } from '../../../../../services/mutations/organization'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
// Types
|
||||
export interface OrganizationRequest {
|
||||
organization_name: string
|
||||
organization_email?: string | null
|
||||
organization_phone_number?: string | null
|
||||
plan_type: 'basic' | 'premium' | 'enterprise'
|
||||
admin_name: string
|
||||
admin_email: string
|
||||
admin_password: string
|
||||
outlet_name: string
|
||||
outlet_address?: string | null
|
||||
outlet_timezone?: string | null
|
||||
outlet_currency: string
|
||||
}
|
||||
|
||||
// Data
|
||||
const planData: CustomInputHorizontalData[] = [
|
||||
{
|
||||
title: (
|
||||
<div className='flex items-center gap-4'>
|
||||
<Avatar
|
||||
variant='rounded'
|
||||
className='is-[58px] bs-[34px]'
|
||||
sx={theme => ({
|
||||
backgroundColor: 'var(--mui-palette-primary-light)',
|
||||
color: 'var(--mui-palette-primary-main)'
|
||||
})}
|
||||
>
|
||||
<i className='tabler-rocket text-2xl' />
|
||||
</Avatar>
|
||||
<div className='flex flex-col'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
Basic Plan
|
||||
</Typography>
|
||||
<Typography variant='body2' color='text.secondary'>
|
||||
Perfect for small businesses
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
value: 'basic',
|
||||
isSelected: true
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<div className='flex items-center gap-4'>
|
||||
<Avatar
|
||||
variant='rounded'
|
||||
className='is-[58px] bs-[34px]'
|
||||
sx={theme => ({
|
||||
backgroundColor: 'var(--mui-palette-success-light)',
|
||||
color: 'var(--mui-palette-success-main)'
|
||||
})}
|
||||
>
|
||||
<i className='tabler-crown text-2xl' />
|
||||
</Avatar>
|
||||
<div className='flex flex-col'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
Premium Plan
|
||||
</Typography>
|
||||
<Typography variant='body2' color='text.secondary'>
|
||||
Most popular choice
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
value: 'premium'
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<div className='flex items-center gap-4'>
|
||||
<Avatar
|
||||
variant='rounded'
|
||||
className='is-[58px] bs-[34px]'
|
||||
sx={theme => ({
|
||||
backgroundColor: 'var(--mui-palette-warning-light)',
|
||||
color: 'var(--mui-palette-warning-main)'
|
||||
})}
|
||||
>
|
||||
<i className='tabler-building text-2xl' />
|
||||
</Avatar>
|
||||
<div className='flex flex-col'>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
Enterprise Plan
|
||||
</Typography>
|
||||
<Typography variant='body2' color='text.secondary'>
|
||||
Advanced features for large teams
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
value: 'enterprise'
|
||||
}
|
||||
]
|
||||
|
||||
const currencies = [
|
||||
{ code: 'USD', name: 'US Dollar' },
|
||||
{ code: 'EUR', name: 'Euro' },
|
||||
{ code: 'GBP', name: 'British Pound' },
|
||||
{ code: 'JPY', name: 'Japanese Yen' },
|
||||
{ code: 'AUD', name: 'Australian Dollar' },
|
||||
{ code: 'CAD', name: 'Canadian Dollar' },
|
||||
{ code: 'CHF', name: 'Swiss Franc' },
|
||||
{ code: 'CNY', name: 'Chinese Yuan' },
|
||||
{ code: 'IDR', name: 'Indonesian Rupiah' }
|
||||
]
|
||||
|
||||
const timezones = [
|
||||
'UTC',
|
||||
'America/New_York',
|
||||
'America/Los_Angeles',
|
||||
'Europe/London',
|
||||
'Europe/Paris',
|
||||
'Asia/Tokyo',
|
||||
'Asia/Shanghai',
|
||||
'Asia/Jakarta',
|
||||
'Australia/Sydney'
|
||||
]
|
||||
|
||||
const planPricing = {
|
||||
basic: { price: 29.99, features: ['Up to 5 users', 'Basic reporting', '24/7 support', 'Mobile app'] },
|
||||
premium: {
|
||||
price: 59.99,
|
||||
features: ['Up to 25 users', 'Advanced reporting', 'Priority support', 'API access', 'Custom integrations']
|
||||
},
|
||||
enterprise: {
|
||||
price: 129.99,
|
||||
features: [
|
||||
'Unlimited users',
|
||||
'Enterprise reporting',
|
||||
'Dedicated support',
|
||||
'White-label solution',
|
||||
'Custom development'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const CreateOrganization = () => {
|
||||
const initialSelected: string = planData.filter(item => item.isSelected)[
|
||||
planData.filter(item => item.isSelected).length - 1
|
||||
].value
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// States
|
||||
const [formData, setFormData] = useState<OrganizationRequest>({
|
||||
organization_name: '',
|
||||
organization_email: null,
|
||||
organization_phone_number: null,
|
||||
plan_type: initialSelected as 'basic' | 'premium' | 'enterprise',
|
||||
admin_name: '',
|
||||
admin_email: '',
|
||||
admin_password: '',
|
||||
outlet_name: '',
|
||||
outlet_address: null,
|
||||
outlet_timezone: null,
|
||||
outlet_currency: 'USD'
|
||||
})
|
||||
|
||||
const [errors, setErrors] = useState<Partial<Record<keyof OrganizationRequest, string>>>({})
|
||||
const [submitError, setSubmitError] = useState<string | null>(null)
|
||||
|
||||
// Hooks
|
||||
const { updatePageSettings } = useSettings()
|
||||
const { createOrganization } = useOrganizationsMutation()
|
||||
|
||||
const handleInputChange = (field: keyof OrganizationRequest) => (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const value = event.target.value
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value || null
|
||||
}))
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({
|
||||
...prev,
|
||||
[field]: undefined
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
const handlePlanChange = (prop: string | ChangeEvent<HTMLInputElement>) => {
|
||||
const planType = typeof prop === 'string' ? prop : prop.target.value
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
plan_type: planType as 'basic' | 'premium' | 'enterprise'
|
||||
}))
|
||||
}
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: Partial<Record<keyof OrganizationRequest, string>> = {}
|
||||
|
||||
// Required fields validation
|
||||
if (!formData.organization_name.trim()) {
|
||||
newErrors.organization_name = 'Organization name is required'
|
||||
} else if (formData.organization_name.length > 255) {
|
||||
newErrors.organization_name = 'Organization name must be 255 characters or less'
|
||||
}
|
||||
|
||||
if (!formData.admin_name.trim()) {
|
||||
newErrors.admin_name = 'Admin name is required'
|
||||
} else if (formData.admin_name.length > 255) {
|
||||
newErrors.admin_name = 'Admin name must be 255 characters or less'
|
||||
}
|
||||
|
||||
if (!formData.admin_email.trim()) {
|
||||
newErrors.admin_email = 'Admin email is required'
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.admin_email)) {
|
||||
newErrors.admin_email = 'Please enter a valid email address'
|
||||
}
|
||||
|
||||
if (!formData.admin_password) {
|
||||
newErrors.admin_password = 'Password is required'
|
||||
} else if (formData.admin_password.length < 6) {
|
||||
newErrors.admin_password = 'Password must be at least 6 characters long'
|
||||
}
|
||||
|
||||
if (!formData.outlet_name.trim()) {
|
||||
newErrors.outlet_name = 'Outlet name is required'
|
||||
} else if (formData.outlet_name.length > 255) {
|
||||
newErrors.outlet_name = 'Outlet name must be 255 characters or less'
|
||||
}
|
||||
|
||||
if (!formData.outlet_currency) {
|
||||
newErrors.outlet_currency = 'Currency is required'
|
||||
} else if (formData.outlet_currency.length !== 3) {
|
||||
newErrors.outlet_currency = 'Currency must be a 3-character ISO code'
|
||||
}
|
||||
|
||||
// Optional email validation
|
||||
if (formData.organization_email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.organization_email)) {
|
||||
newErrors.organization_email = 'Please enter a valid email address'
|
||||
}
|
||||
|
||||
setErrors(newErrors)
|
||||
return Object.keys(newErrors).length === 0
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!validateForm()) return
|
||||
|
||||
setSubmitError(null)
|
||||
|
||||
createOrganization.mutate(formData, {
|
||||
onSuccess: () => {
|
||||
router.push('/login')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// For Page specific settings
|
||||
useEffect(() => {
|
||||
return updatePageSettings({
|
||||
skin: 'default'
|
||||
})
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
const selectedPlan = planPricing[formData.plan_type]
|
||||
|
||||
return (
|
||||
<section className={classnames('md:plb-[100px] plb-6', frontCommonStyles.layoutSpacing)}>
|
||||
<Card>
|
||||
<Grid container>
|
||||
<Grid size={{ md: 12, lg: 8 }}>
|
||||
<CardContent className='flex flex-col max-sm:gap-y-5 gap-y-8 sm:p-8 border-be lg:border-be-0 lg:border-e bs-full'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<Typography variant='h4' className='flex items-center gap-2'>
|
||||
<i className='tabler-building text-primary' />
|
||||
Create Organization
|
||||
</Typography>
|
||||
<Typography>
|
||||
Set up your organization with admin account and primary outlet. Choose the plan that best fits your
|
||||
needs.
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
{submitError && (
|
||||
<Alert severity='error' className='mb-4'>
|
||||
{submitError}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Plan Selection */}
|
||||
<div>
|
||||
<Typography variant='h5' className='mbe-4 flex items-center gap-2'>
|
||||
<i className='tabler-crown text-warning' />
|
||||
Choose Your Plan
|
||||
</Typography>
|
||||
<Grid container spacing={4}>
|
||||
{planData.map((item, index) => (
|
||||
<CustomInputHorizontal
|
||||
key={index}
|
||||
type='radio'
|
||||
name='plan-type'
|
||||
data={item}
|
||||
selected={formData.plan_type}
|
||||
handleChange={handlePlanChange}
|
||||
gridProps={{ size: { xs: 12, md: 4 } }}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Organization Details */}
|
||||
<div>
|
||||
<Typography variant='h5' className='mbe-6 flex items-center gap-2'>
|
||||
<i className='tabler-building text-info' />
|
||||
Organization Details
|
||||
</Typography>
|
||||
<Grid container spacing={5}>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
required
|
||||
label='Organization Name'
|
||||
placeholder='My Company Ltd.'
|
||||
value={formData.organization_name}
|
||||
onChange={handleInputChange('organization_name')}
|
||||
error={!!errors.organization_name}
|
||||
helperText={errors.organization_name}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
label='Organization Email'
|
||||
placeholder='contact@mycompany.com'
|
||||
type='email'
|
||||
value={formData.organization_email || ''}
|
||||
onChange={handleInputChange('organization_email')}
|
||||
error={!!errors.organization_email}
|
||||
helperText={errors.organization_email}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
label='Phone Number'
|
||||
placeholder='+1 (555) 123-4567'
|
||||
value={formData.organization_phone_number || ''}
|
||||
onChange={handleInputChange('organization_phone_number')}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Admin Account */}
|
||||
<div>
|
||||
<Typography variant='h5' className='mbe-6 flex items-center gap-2'>
|
||||
<i className='tabler-user-shield text-success' />
|
||||
Admin Account
|
||||
</Typography>
|
||||
<Grid container spacing={5}>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
required
|
||||
label='Admin Name'
|
||||
placeholder='John Doe'
|
||||
value={formData.admin_name}
|
||||
onChange={handleInputChange('admin_name')}
|
||||
error={!!errors.admin_name}
|
||||
helperText={errors.admin_name}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
required
|
||||
label='Admin Email'
|
||||
placeholder='admin@mycompany.com'
|
||||
type='email'
|
||||
value={formData.admin_email}
|
||||
onChange={handleInputChange('admin_email')}
|
||||
error={!!errors.admin_email}
|
||||
helperText={errors.admin_email}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
required
|
||||
type='password'
|
||||
label='Admin Password'
|
||||
placeholder='Minimum 6 characters'
|
||||
value={formData.admin_password}
|
||||
onChange={handleInputChange('admin_password')}
|
||||
error={!!errors.admin_password}
|
||||
helperText={errors.admin_password}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
{/* Outlet Information */}
|
||||
<div>
|
||||
<Typography variant='h5' className='mbe-6 flex items-center gap-2'>
|
||||
<i className='tabler-store text-warning' />
|
||||
Primary Outlet
|
||||
</Typography>
|
||||
<Grid container spacing={5}>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
required
|
||||
label='Outlet Name'
|
||||
placeholder='Main Store'
|
||||
value={formData.outlet_name}
|
||||
onChange={handleInputChange('outlet_name')}
|
||||
error={!!errors.outlet_name}
|
||||
helperText={errors.outlet_name}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
required
|
||||
label='Currency'
|
||||
value={formData.outlet_currency}
|
||||
onChange={handleInputChange('outlet_currency')}
|
||||
error={!!errors.outlet_currency}
|
||||
helperText={errors.outlet_currency}
|
||||
>
|
||||
{currencies.map(currency => (
|
||||
<MenuItem key={currency.code} value={currency.code}>
|
||||
{currency.code} - {currency.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</CustomTextField>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<CustomTextField
|
||||
fullWidth
|
||||
label='Outlet Address'
|
||||
placeholder='123 Main Street, City, State, Country'
|
||||
value={formData.outlet_address || ''}
|
||||
onChange={handleInputChange('outlet_address')}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6 }}>
|
||||
<CustomTextField
|
||||
select
|
||||
fullWidth
|
||||
label='Timezone'
|
||||
value={formData.outlet_timezone || ''}
|
||||
onChange={handleInputChange('outlet_timezone')}
|
||||
>
|
||||
{timezones.map(tz => (
|
||||
<MenuItem key={tz} value={tz}>
|
||||
{tz}
|
||||
</MenuItem>
|
||||
))}
|
||||
</CustomTextField>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ md: 12, lg: 4 }}>
|
||||
<CardContent className='flex flex-col gap-8 sm:p-8'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<Typography variant='h4' className='flex items-center gap-2'>
|
||||
<i className='tabler-receipt text-primary' />
|
||||
Plan Summary
|
||||
</Typography>
|
||||
<Typography>Review your selected plan and get started with your organization.</Typography>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col gap-5'>
|
||||
<div className='flex flex-col gap-4 p-6 bg-actionHover rounded'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<Typography className='font-medium capitalize'>{formData.plan_type} Plan</Typography>
|
||||
<Chip
|
||||
label={formData.plan_type === 'premium' ? 'Most Popular' : 'Selected'}
|
||||
color={formData.plan_type === 'premium' ? 'success' : 'primary'}
|
||||
size='small'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-baseline'>
|
||||
<Typography variant='h1'>${selectedPlan.price}</Typography>
|
||||
<Typography component='sub'>/month</Typography>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
{selectedPlan.features.map((feature, index) => (
|
||||
<div key={index} className='flex items-center gap-2'>
|
||||
<i className='tabler-check text-success text-sm' />
|
||||
<Typography variant='body2'>{feature}</Typography>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='flex gap-2 items-center justify-between mbe-2'>
|
||||
<Typography>Plan Cost</Typography>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
${selectedPlan.price}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex gap-2 items-center justify-between'>
|
||||
<Typography>Setup Fee</Typography>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
Free
|
||||
</Typography>
|
||||
</div>
|
||||
<Divider className='mlb-4' />
|
||||
<div className='flex gap-2 items-center justify-between'>
|
||||
<Typography className='font-medium'>Total</Typography>
|
||||
<Typography color='text.primary' className='font-medium'>
|
||||
${selectedPlan.price}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant='contained'
|
||||
size='large'
|
||||
onClick={handleSubmit}
|
||||
disabled={createOrganization.isPending}
|
||||
endIcon={
|
||||
createOrganization.isPending ? (
|
||||
<CircularProgress size={20} color='inherit' />
|
||||
) : (
|
||||
<DirectionalIcon ltrIconClass='tabler-arrow-right' rtlIconClass='tabler-arrow-left' />
|
||||
)
|
||||
}
|
||||
>
|
||||
{createOrganization.isPending ? 'Creating Organization...' : 'Create Organization'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Typography variant='body2' className='text-center'>
|
||||
By creating an organization, you agree to our Terms of Service and Privacy Policy. You can change your
|
||||
plan anytime.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateOrganization
|
||||
@@ -23,6 +23,7 @@ const DashboardOrder = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Items'
|
||||
isCurrency={false}
|
||||
value={data?.summary.total_items as number}
|
||||
avatarIcon={'tabler-package'}
|
||||
avatarColor='primary'
|
||||
@@ -33,6 +34,7 @@ const DashboardOrder = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Orders'
|
||||
isCurrency={false}
|
||||
value={data?.summary.total_orders as number}
|
||||
avatarIcon={'tabler-shopping-cart'}
|
||||
avatarColor='info'
|
||||
@@ -43,6 +45,7 @@ const DashboardOrder = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Average Orders'
|
||||
isCurrency={true}
|
||||
value={data?.summary.average_order_value as number}
|
||||
avatarIcon={'tabler-trending-up'}
|
||||
avatarColor='warning'
|
||||
@@ -53,6 +56,7 @@ const DashboardOrder = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Sales'
|
||||
isCurrency={true}
|
||||
value={data?.summary.total_sales as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='success'
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import React from 'react'
|
||||
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import { formatCurrency, formatDate } from '../../../../../../utils/transform'
|
||||
import { formatCurrency, formatDate, formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
|
||||
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
|
||||
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
|
||||
@@ -22,7 +22,7 @@ const DashboardOverview = () => {
|
||||
<p className='text-2xl font-bold text-gray-900 mb-1'>{value}</p>
|
||||
{subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
|
||||
</div>
|
||||
<div className={`p-3 rounded-full ${bgColor} bg-opacity-10`}>
|
||||
<div className={`px-4 py-3 rounded-full ${bgColor} bg-opacity-10`}>
|
||||
<i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,7 +55,7 @@ const DashboardOverview = () => {
|
||||
<MetricCard
|
||||
iconClass='tabler-cash'
|
||||
title='Total Sales'
|
||||
value={formatCurrency(salesData.overview.total_sales)}
|
||||
value={formatShortCurrency(salesData.overview.total_sales)}
|
||||
bgColor='bg-green-500'
|
||||
/>
|
||||
<MetricCard
|
||||
@@ -68,7 +68,7 @@ const DashboardOverview = () => {
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Average Order Value'
|
||||
value={formatCurrency(salesData.overview.average_order_value)}
|
||||
value={formatShortCurrency(salesData.overview.average_order_value)}
|
||||
bgColor='bg-purple-500'
|
||||
/>
|
||||
<MetricCard
|
||||
@@ -79,24 +79,6 @@ const DashboardOverview = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Additional Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6 mb-8'>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-x text-[24px] text-red-500 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Voided Orders</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-red-600'>{salesData.overview.voided_orders}</p>
|
||||
</div>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-refresh text-[24px] text-yellow-500 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Refunded Orders</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-yellow-600'>{salesData.overview.refunded_orders}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
|
||||
{/* Top Products */}
|
||||
<ProductSales title='Top Products' productData={salesData.top_products} />
|
||||
|
||||
@@ -23,6 +23,7 @@ const DashboardPayment = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Orders'
|
||||
isCurrency={false}
|
||||
value={data?.summary.total_orders as number}
|
||||
avatarIcon={'tabler-shopping-cart'}
|
||||
avatarColor='primary'
|
||||
@@ -33,6 +34,7 @@ const DashboardPayment = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Payment'
|
||||
isCurrency={false}
|
||||
value={data?.summary.total_payments as number}
|
||||
avatarIcon={'tabler-package'}
|
||||
avatarColor='info'
|
||||
@@ -43,6 +45,7 @@ const DashboardPayment = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Average Orders'
|
||||
isCurrency={true}
|
||||
value={data?.summary.average_order_value as number}
|
||||
avatarIcon={'tabler-trending-up'}
|
||||
avatarColor='warning'
|
||||
@@ -53,6 +56,7 @@ const DashboardPayment = () => {
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Amount'
|
||||
isCurrency={true}
|
||||
value={data?.summary.total_amount as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='success'
|
||||
|
||||
@@ -1,66 +1,52 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Grid from '@mui/material/Grid2'
|
||||
|
||||
// Component Imports
|
||||
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
|
||||
|
||||
// Server Action Imports
|
||||
import Loading from '../../../../../../components/layout/shared/Loading'
|
||||
import React from 'react'
|
||||
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
|
||||
import { DailyData, ProductDataReport, ProfitLossReport } from '../../../../../../types/services/analytic'
|
||||
import EarningReportsWithTabs from '../../../../../../views/dashboards/crm/EarningReportsWithTabs'
|
||||
import { formatShortCurrency } from '../../../../../../utils/transform'
|
||||
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
|
||||
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
|
||||
|
||||
function formatMetricName(metric: string): string {
|
||||
const nameMap: { [key: string]: string } = {
|
||||
revenue: 'Revenue',
|
||||
cost: 'Cost',
|
||||
gross_profit: 'Gross Profit',
|
||||
gross_profit_margin: 'Gross Profit Margin (%)',
|
||||
tax: 'Tax',
|
||||
discount: 'Discount',
|
||||
net_profit: 'Net Profit',
|
||||
net_profit_margin: 'Net Profit Margin (%)',
|
||||
orders: 'Orders'
|
||||
const DashboardProfitloss = () => {
|
||||
// Sample data - replace with your actual data
|
||||
const { data: profitData, isLoading } = useProfitLossAnalytics()
|
||||
|
||||
const formatCurrency = (amount: any) => {
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
|
||||
}
|
||||
|
||||
const DashboardProfitLoss = () => {
|
||||
const { data, isLoading } = useProfitLossAnalytics()
|
||||
const formatPercentage = (value: any) => {
|
||||
return `${value.toFixed(2)}%`
|
||||
}
|
||||
|
||||
const formatDate = (dateString: any) => {
|
||||
return new Date(dateString).toLocaleDateString('id-ID', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
const metrics = ['cost', 'revenue', 'gross_profit', 'net_profit']
|
||||
|
||||
const transformSalesData = (data: ProfitLossReport) => {
|
||||
return [
|
||||
{
|
||||
type: 'products',
|
||||
avatarIcon: 'tabler-package',
|
||||
date: data.product_data.map((d: ProductDataReport) => d.product_name),
|
||||
series: [{ data: data.product_data.map((d: ProductDataReport) => d.revenue) }]
|
||||
}
|
||||
// {
|
||||
// type: 'profits',
|
||||
// avatarIcon: 'tabler-currency-dollar',
|
||||
// date: data.data.map((d: DailyData) => formatDate(d.date)),
|
||||
// series: metrics.map(metric => ({
|
||||
// name: formatMetricName(metric as string),
|
||||
// data: data.data.map((item: any) => item[metric] as number)
|
||||
// }))
|
||||
// }
|
||||
]
|
||||
const getProfitabilityColor = (margin: any) => {
|
||||
if (margin > 50) return 'text-green-600 bg-green-100'
|
||||
if (margin > 0) return 'text-yellow-600 bg-yellow-100'
|
||||
return 'text-red-600 bg-red-100'
|
||||
}
|
||||
|
||||
function formatMetricName(metric: string): string {
|
||||
const nameMap: { [key: string]: string } = {
|
||||
revenue: 'Revenue',
|
||||
net_profit: 'Net Profit',
|
||||
}
|
||||
|
||||
return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
|
||||
}
|
||||
|
||||
const metrics = ['revenue', 'net_profit']
|
||||
|
||||
const transformMultipleData = (data: ProfitLossReport) => {
|
||||
return [
|
||||
{
|
||||
@@ -75,58 +61,285 @@ const DashboardProfitLoss = () => {
|
||||
]
|
||||
}
|
||||
|
||||
if (isLoading) return <Loading />
|
||||
const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500', isNegative = false }: any) => (
|
||||
<div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex-1'>
|
||||
<h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
|
||||
<p className={`text-2xl font-bold mb-1 ${isNegative ? 'text-red-600' : 'text-gray-900'}`}>{value}</p>
|
||||
{subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
|
||||
</div>
|
||||
<div className={`p-3 rounded-full ${bgColor} bg-opacity-10`}>
|
||||
<i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Grid container spacing={6}>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Cost'
|
||||
value={data?.summary.total_cost as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='primary'
|
||||
avatarSkin='light'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Total Rvenue'
|
||||
value={data?.summary.total_revenue as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='info'
|
||||
avatarSkin='light'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Gross Profit'
|
||||
value={data?.summary.gross_profit as number}
|
||||
avatarIcon={'tabler-trending-up'}
|
||||
avatarColor='warning'
|
||||
avatarSkin='light'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
|
||||
<DistributedBarChartOrder
|
||||
isLoading={isLoading}
|
||||
title='Net Profit'
|
||||
value={data?.summary.net_profit as number}
|
||||
avatarIcon={'tabler-currency-dollar'}
|
||||
avatarColor='success'
|
||||
avatarSkin='light'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>
|
||||
<EarningReportsWithTabs data={transformSalesData(data!)} />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 12 }}>
|
||||
<MultipleSeries data={transformMultipleData(data!)} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<>
|
||||
{profitData && (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className='mb-8'>
|
||||
<h1 className='text-3xl font-bold text-gray-900 mb-2'>Profit Analysis Dashboard</h1>
|
||||
<p className='text-gray-600'>
|
||||
{formatDate(profitData.date_from)} - {formatDate(profitData.date_to)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Summary Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
|
||||
<MetricCard
|
||||
iconClass='tabler-currency-dollar'
|
||||
title='Total Revenue'
|
||||
value={formatShortCurrency(profitData.summary.total_revenue)}
|
||||
bgColor='bg-green-500'
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-receipt'
|
||||
title='Total Cost'
|
||||
value={formatShortCurrency(profitData.summary.total_cost)}
|
||||
bgColor='bg-red-500'
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-trending-up'
|
||||
title='Gross Profit'
|
||||
value={formatShortCurrency(profitData.summary.gross_profit)}
|
||||
subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
|
||||
bgColor='bg-blue-500'
|
||||
isNegative={profitData.summary.gross_profit < 0}
|
||||
/>
|
||||
<MetricCard
|
||||
iconClass='tabler-percentage'
|
||||
title='Profitability Ratio'
|
||||
value={formatPercentage(profitData.summary.profitability_ratio)}
|
||||
subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
|
||||
bgColor='bg-purple-500'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Additional Summary Metrics */}
|
||||
<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-wallet text-[24px] text-green-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-green-600 mb-2'>
|
||||
{formatShortCurrency(profitData.summary.net_profit)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>Margin: {formatPercentage(profitData.summary.net_profit_margin)}</p>
|
||||
</div>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-shopping-cart text-[24px] text-blue-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Total Orders</h3>
|
||||
</div>
|
||||
<p className='text-3xl font-bold text-blue-600'>{profitData.summary.total_orders}</p>
|
||||
</div>
|
||||
<div className='bg-white rounded-lg shadow-md p-6'>
|
||||
<div className='flex items-center mb-4'>
|
||||
<i className='tabler-discount text-[24px] text-orange-600 mr-2'></i>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Tax & Discount</h3>
|
||||
</div>
|
||||
<p className='text-xl font-bold text-orange-600 mb-1'>
|
||||
{formatShortCurrency(profitData.summary.total_tax + profitData.summary.total_discount)}
|
||||
</p>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Tax: {formatShortCurrency(profitData.summary.total_tax)} | Discount:{' '}
|
||||
{formatShortCurrency(profitData.summary.total_discount)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profit Chart */}
|
||||
<div className='mb-8'>
|
||||
<MultipleSeries data={transformMultipleData(profitData)} />
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8'>
|
||||
{/* Daily Breakdown */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-calendar text-[24px] text-purple-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Daily Breakdown</h2>
|
||||
</div>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='min-w-full'>
|
||||
<thead>
|
||||
<tr className='bg-gray-50'>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Date</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Orders</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{profitData.data.map((day, 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(day.date)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(day.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(day.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
day.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(day.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
day.gross_profit_margin
|
||||
)}`}
|
||||
>
|
||||
{formatPercentage(day.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{day.orders}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Performing Products */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-trophy text-[24px] text-gold-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Top Performers</h2>
|
||||
</div>
|
||||
<div className='space-y-4'>
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.slice(0, 5)
|
||||
.map((product, index) => (
|
||||
<div
|
||||
key={product.product_id}
|
||||
className='flex items-center justify-between p-4 bg-gray-50 rounded-lg'
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<span
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3 ${
|
||||
index === 0
|
||||
? 'bg-yellow-500'
|
||||
: index === 1
|
||||
? 'bg-gray-400'
|
||||
: index === 2
|
||||
? 'bg-orange-500'
|
||||
: 'bg-blue-500'
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className='font-medium text-gray-900'>{product.product_name}</h3>
|
||||
<p className='text-sm text-gray-600'>{product.category_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<p className={`font-bold ${product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</p>
|
||||
<p className='text-xs text-gray-500'>{formatPercentage(product.gross_profit_margin)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Analysis Table */}
|
||||
<div className='bg-white rounded-lg shadow-md'>
|
||||
<div className='p-6'>
|
||||
<div className='flex items-center mb-6'>
|
||||
<i className='tabler-package text-[24px] text-green-500 mr-2'></i>
|
||||
<h2 className='text-xl font-semibold text-gray-900'>Product Analysis</h2>
|
||||
</div>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='min-w-full'>
|
||||
<thead>
|
||||
<tr className='bg-gray-50'>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Product</th>
|
||||
<th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Category</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Qty</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
|
||||
<th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Per Unit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='bg-white divide-y divide-gray-200'>
|
||||
{profitData.product_data
|
||||
.sort((a, b) => b.gross_profit - a.gross_profit)
|
||||
.map(product => (
|
||||
<tr key={product.product_id} className='hover:bg-gray-50'>
|
||||
<td className='px-4 py-4 whitespace-nowrap'>
|
||||
<div className='text-sm font-medium text-gray-900'>{product.product_name}</div>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap'>
|
||||
<span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
|
||||
{product.category_name}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{product.quantity_sold}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
|
||||
{formatCurrency(product.revenue)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
|
||||
{formatCurrency(product.cost)}
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
|
||||
product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(product.gross_profit)}
|
||||
</td>
|
||||
<td className='px-4 py-4 whitespace-nowrap text-right'>
|
||||
<span
|
||||
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
|
||||
product.gross_profit_margin
|
||||
)}`}
|
||||
>
|
||||
{formatPercentage(product.gross_profit_margin)}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className={`px-4 py-4 whitespace-nowrap text-right text-sm ${
|
||||
product.profit_per_unit >= 0 ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(product.profit_per_unit)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashboardProfitLoss
|
||||
export default DashboardProfitloss
|
||||
|
||||
@@ -2,24 +2,23 @@
|
||||
import Button from '@mui/material/Button'
|
||||
|
||||
// Type Imports
|
||||
import type { ChildrenType } from '@core/types'
|
||||
import type { Locale } from '@configs/i18n'
|
||||
import type { ChildrenType } from '@core/types'
|
||||
|
||||
// Layout Imports
|
||||
import HorizontalLayout from '@layouts/HorizontalLayout'
|
||||
import LayoutWrapper from '@layouts/LayoutWrapper'
|
||||
import VerticalLayout from '@layouts/VerticalLayout'
|
||||
import HorizontalLayout from '@layouts/HorizontalLayout'
|
||||
|
||||
// Component Imports
|
||||
import Providers from '@components/Providers'
|
||||
import Navigation from '@components/layout/vertical/Navigation'
|
||||
import Header from '@components/layout/horizontal/Header'
|
||||
import Navbar from '@components/layout/vertical/Navbar'
|
||||
import VerticalFooter from '@components/layout/vertical/Footer'
|
||||
import HorizontalFooter from '@components/layout/horizontal/Footer'
|
||||
import Customizer from '@core/components/customizer'
|
||||
import ScrollToTop from '@core/components/scroll-to-top'
|
||||
import AuthGuard from '@/hocs/AuthGuard'
|
||||
import Providers from '@components/Providers'
|
||||
import HorizontalFooter from '@components/layout/horizontal/Footer'
|
||||
import Header from '@components/layout/horizontal/Header'
|
||||
import VerticalFooter from '@components/layout/vertical/Footer'
|
||||
import Navbar from '@components/layout/vertical/Navbar'
|
||||
import Navigation from '@components/layout/vertical/Navigation'
|
||||
import ScrollToTop from '@core/components/scroll-to-top'
|
||||
|
||||
// Config Imports
|
||||
import { i18n } from '@configs/i18n'
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
// MUI Imports
|
||||
import Button from '@mui/material/Button'
|
||||
|
||||
// Type Imports
|
||||
import type { Locale } from '@configs/i18n'
|
||||
import type { ChildrenType } from '@core/types'
|
||||
|
||||
// Layout Imports
|
||||
import HorizontalLayout from '@layouts/HorizontalLayout'
|
||||
import LayoutWrapper from '@layouts/LayoutWrapper'
|
||||
import VerticalLayout from '@layouts/VerticalLayout'
|
||||
|
||||
// Component Imports
|
||||
import Providers from '@components/Providers'
|
||||
import HorizontalFooter from '@components/layout/horizontal/Footer'
|
||||
import Header from '@components/layout/horizontal/Header'
|
||||
import VerticalFooter from '@components/layout/vertical/Footer'
|
||||
import Navbar from '@components/layout/vertical/Navbar'
|
||||
import Navigation from '@components/layout/vertical/Navigation'
|
||||
import ScrollToTop from '@core/components/scroll-to-top'
|
||||
|
||||
// Config Imports
|
||||
import { i18n } from '@configs/i18n'
|
||||
|
||||
// Util Imports
|
||||
import { getDictionary } from '@/utils/getDictionary'
|
||||
import { getMode, getSystemMode } from '@core/utils/serverHelpers'
|
||||
import RolesGuard from '../../../../hocs/RolesGuard'
|
||||
|
||||
const Layout = async (props: ChildrenType & { params: Promise<{ lang: Locale }> }) => {
|
||||
const params = await props.params
|
||||
|
||||
const { children } = props
|
||||
|
||||
// Vars
|
||||
const direction = i18n.langDirection[params.lang]
|
||||
const dictionary = await getDictionary(params.lang)
|
||||
const mode = await getMode()
|
||||
const systemMode = await getSystemMode()
|
||||
|
||||
return (
|
||||
<Providers direction={direction}>
|
||||
<RolesGuard locale={params.lang}>
|
||||
<LayoutWrapper
|
||||
systemMode={systemMode}
|
||||
verticalLayout={
|
||||
<VerticalLayout
|
||||
navigation={<Navigation dictionary={dictionary} mode={mode} />}
|
||||
navbar={<Navbar />}
|
||||
footer={<VerticalFooter />}
|
||||
>
|
||||
{children}
|
||||
</VerticalLayout>
|
||||
}
|
||||
horizontalLayout={
|
||||
<HorizontalLayout header={<Header dictionary={dictionary} />} footer={<HorizontalFooter />}>
|
||||
{children}
|
||||
</HorizontalLayout>
|
||||
}
|
||||
/>
|
||||
<ScrollToTop className='mui-fixed'>
|
||||
<Button
|
||||
variant='contained'
|
||||
className='is-10 bs-10 rounded-full p-0 min-is-0 flex items-center justify-center'
|
||||
>
|
||||
<i className='tabler-arrow-up' />
|
||||
</Button>
|
||||
</ScrollToTop>
|
||||
{/* <Customizer dir={direction} /> */}
|
||||
</RolesGuard>
|
||||
</Providers>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
@@ -0,0 +1,25 @@
|
||||
import OrganizationListTable from '../../../../../../../views/sa/organizations/list/OrganizationListTable'
|
||||
|
||||
/**
|
||||
* ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
|
||||
* ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
|
||||
* ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
|
||||
* ! because we've used the server action for getting our static data.
|
||||
*/
|
||||
|
||||
/* const getEcommerceData = async () => {
|
||||
// Vars
|
||||
const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch ecommerce data')
|
||||
}
|
||||
|
||||
return res.json()
|
||||
} */
|
||||
|
||||
const OrganizationsListTablePage = async () => {
|
||||
return <OrganizationListTable />
|
||||
}
|
||||
|
||||
export default OrganizationsListTablePage
|
||||
Reference in New Issue
Block a user