diff --git a/src/app/[lang]/(dashboard)/(private)/apps/ecommerce/orders/[id]/details/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/ecommerce/orders/[id]/details/page.tsx
new file mode 100644
index 0000000..2a63669
--- /dev/null
+++ b/src/app/[lang]/(dashboard)/(private)/apps/ecommerce/orders/[id]/details/page.tsx
@@ -0,0 +1,31 @@
+// Next Imports
+
+// Type Imports
+
+// Component Imports
+import OrderDetails from '@views/apps/ecommerce/orders/details'
+
+/**
+ * ! 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 OrderDetailsPage = async () => {
+
+  return <OrderDetails />
+}
+
+export default OrderDetailsPage
diff --git a/src/app/[lang]/(dashboard)/(private)/apps/ecommerce/orders/detail/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/ecommerce/orders/detail/page.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/[lang]/(dashboard)/(private)/apps/user/list/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/user/list/page.tsx
index 6ac873d..a26eb1d 100644
--- a/src/app/[lang]/(dashboard)/(private)/apps/user/list/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/apps/user/list/page.tsx
@@ -21,7 +21,7 @@ import UserList from '@views/apps/user/list'
 
 const UserListApp = async () => {
 
-  return <UserList userData={[]} />
+  return <UserList />
 }
 
 export default UserListApp
diff --git a/src/app/[lang]/(dashboard)/(private)/dashboards/profit-loss/page.tsx b/src/app/[lang]/(dashboard)/(private)/dashboards/profit-loss/page.tsx
index eba1a15..6af19a7 100644
--- a/src/app/[lang]/(dashboard)/(private)/dashboards/profit-loss/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/dashboards/profit-loss/page.tsx
@@ -5,15 +5,13 @@ import Grid from '@mui/material/Grid2'
 
 // Component Imports
 import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
-import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
 
 // Server Action Imports
 import Loading from '../../../../../../components/layout/shared/Loading'
 import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
-import {
-    ProductDataReport,
-    ProfitLossReport
-} from '../../../../../../types/services/analytic'
+import { DailyData, ProductDataReport, ProfitLossReport } from '../../../../../../types/services/analytic'
+import EarningReportsWithTabs from '../../../../../../views/dashboards/crm/EarningReportsWithTabs'
+import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
 
 function formatMetricName(metric: string): string {
   const nameMap: { [key: string]: string } = {
@@ -41,7 +39,7 @@ const DashboardProfitLoss = () => {
     })
   }
 
-  const metrics = ['revenue', 'cost', 'gross_profit', 'net_profit']
+  const metrics = ['cost', 'revenue', 'gross_profit', 'net_profit']
 
   const transformSalesData = (data: ProfitLossReport) => {
     return [
@@ -50,16 +48,30 @@ const DashboardProfitLoss = () => {
         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)
-    //     }))
-    //   }
+      }
+      // {
+      //   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 transformMultipleData = (data: ProfitLossReport) => {
+    return [
+      {
+        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)
+        }))
+      }
     ]
   }
 
@@ -110,6 +122,9 @@ const DashboardProfitLoss = () => {
       <Grid size={{ xs: 12, lg: 12 }}>
         <EarningReportsWithTabs data={transformSalesData(data!)} />
       </Grid>
+      <Grid size={{ xs: 12, lg: 12 }}>
+        <MultipleSeries data={transformMultipleData(data!)} />
+      </Grid>
     </Grid>
   )
 }
diff --git a/src/components/layout/vertical/VerticalMenu.tsx b/src/components/layout/vertical/VerticalMenu.tsx
index 609adb9..54b83b3 100644
--- a/src/components/layout/vertical/VerticalMenu.tsx
+++ b/src/components/layout/vertical/VerticalMenu.tsx
@@ -109,6 +109,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
             </SubMenu>
             <SubMenu label={dictionary['navigation'].orders}>
               <MenuItem href={`/${locale}/apps/ecommerce/orders/list`}>{dictionary['navigation'].list}</MenuItem>
+              <MenuItem className='hidden' href={`/${locale}/apps/ecommerce/orders/${params.id}/details`}>{dictionary['navigation'].details}</MenuItem>
             </SubMenu>
             <SubMenu label={dictionary['navigation'].customers}>
               <MenuItem href={`/${locale}/apps/ecommerce/customers/list`}>{dictionary['navigation'].list}</MenuItem>
diff --git a/src/redux-store/index.ts b/src/redux-store/index.ts
index 6421eaa..37c577c 100644
--- a/src/redux-store/index.ts
+++ b/src/redux-store/index.ts
@@ -5,13 +5,15 @@ import productReducer from '@/redux-store/slices/product'
 import customerReducer from '@/redux-store/slices/customer'
 import paymentMethodReducer from '@/redux-store/slices/paymentMethod'
 import ingredientReducer from '@/redux-store/slices/ingredient'
+import orderReducer from '@/redux-store/slices/order'
 
 export const store = configureStore({
   reducer: {
     productReducer,
     customerReducer,
     paymentMethodReducer,
-    ingredientReducer
+    ingredientReducer,
+    orderReducer
   },
   middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false })
 })
diff --git a/src/redux-store/slices/order.ts b/src/redux-store/slices/order.ts
new file mode 100644
index 0000000..d3f6f50
--- /dev/null
+++ b/src/redux-store/slices/order.ts
@@ -0,0 +1,64 @@
+// Third-party Imports
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
+
+// Type Imports
+
+// Data Imports
+import { Order } from '../../types/services/order'
+
+const initialState: { currentOrder: Order } = {
+  currentOrder: {
+      id: '',
+      order_number: '',
+      outlet_id: '',
+      user_id: '',
+      table_number: '',
+      order_type: '',
+      status: '',
+      subtotal: 0,
+      tax_amount: 0,
+      discount_amount: 0,
+      total_amount: 0,
+      total_cost: 0,
+      remaining_amount: 0,
+      payment_status: '',
+      refund_amount: 0,
+      is_void: false,
+      is_refund: false,
+      notes: '',
+      metadata: {
+          customer_name: '',
+          last_split_amount: 0,
+          last_split_customer_id: '',
+          last_split_customer_name: '',
+          last_split_payment_id: '',
+          last_split_quantities: {},
+          last_split_type: ''
+      },
+      created_at: '',
+      updated_at: '',
+      order_items: [],
+      payments: [],
+      total_paid: 0,
+      payment_count: 0,
+      split_type: ''
+  }
+}
+
+export const orderSlice = createSlice({
+  name: 'order',
+  initialState,
+  reducers: {
+    setOrder: (state, action: PayloadAction<Order>) => {
+      state.currentOrder = action.payload
+    },
+    resetOrder: state => {
+      state.currentOrder = initialState.currentOrder
+    }
+  }
+})
+
+export const { setOrder, resetOrder } = orderSlice.actions
+
+export default orderSlice.reducer
diff --git a/src/services/mutations/users.ts b/src/services/mutations/users.ts
index 6618122..ca790bb 100644
--- a/src/services/mutations/users.ts
+++ b/src/services/mutations/users.ts
@@ -1,27 +1,52 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { CustomerRequest } from '../../types/services/customer'
 import { api } from '../api'
-import { User } from '../../types/services/user'
+import { toast } from 'react-toastify'
 
-type CreateUserPayload = {
-  name: string
-  email: string
-}
-
-const useUsersMutation = () => {
+export const useCustomersMutation = () => {
   const queryClient = useQueryClient()
-  
-  const createUser = useMutation<User, Error, CreateUserPayload>({
-    mutationFn: async newUser => {
-      const response = await api.post('/users', newUser)
+
+  const createCustomer = useMutation({
+    mutationFn: async (newCustomer: CustomerRequest) => {
+      const response = await api.post('/customers', newCustomer)
       return response.data
     },
     onSuccess: () => {
-      // Optional: refetch 'users' list after success
-      queryClient.invalidateQueries({ queryKey: ['users'] })
+      toast.success('Customer created successfully!')
+      queryClient.invalidateQueries({ queryKey: ['customers'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
     }
   })
 
-  return { createUser }
-}
+  const updateCustomer = useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: CustomerRequest }) => {
+      const response = await api.put(`/customers/${id}`, payload)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('Customer updated successfully!')
+      queryClient.invalidateQueries({ queryKey: ['customers'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Update failed')
+    }
+  })
 
-export default useUsersMutation
+  const deleteCustomer = useMutation({
+    mutationFn: async (id: string) => {
+      const response = await api.delete(`/customers/${id}`)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('Customer deleted successfully!')
+      queryClient.invalidateQueries({ queryKey: ['customers'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Delete failed')
+    }
+  })
+
+  return { createCustomer, updateCustomer, deleteCustomer }
+}
diff --git a/src/services/queries/orders.ts b/src/services/queries/orders.ts
index f88d7bb..ecd5018 100644
--- a/src/services/queries/orders.ts
+++ b/src/services/queries/orders.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { Orders } from '../../types/services/order'
+import { Order, Orders } from '../../types/services/order'
 import { api } from '../api'
 
 interface OrdersQueryParams {
@@ -34,3 +34,13 @@ export function useOrders(params: OrdersQueryParams = {}) {
     }
   })
 }
+
+export function useOrder(id: string) {
+  return useQuery<Order>({
+    queryKey: ['orders', id],
+    queryFn: async () => {
+      const res = await api.get(`/orders/${id}`)
+      return res.data.data
+    }
+  })
+}
diff --git a/src/services/queries/users.ts b/src/services/queries/users.ts
index 0bf6510..e6b67dc 100644
--- a/src/services/queries/users.ts
+++ b/src/services/queries/users.ts
@@ -1,14 +1,36 @@
 import { useQuery } from '@tanstack/react-query'
+import { Users } from '../../types/services/user'
 import { api } from '../api'
-import { User } from '../../types/services/user'
 
+interface UsersQueryParams {
+  page?: number
+  limit?: number
+  search?: string
+}
 
-export function useUsers() {
-  return useQuery<User[]>({
-    queryKey: ['users'],
+export function useUsers(params: UsersQueryParams = {}) {
+  const { page = 1, limit = 10, search = '', ...filters } = params
+
+  return useQuery<Users>({
+    queryKey: ['users', { page, limit, search, ...filters }],
     queryFn: async () => {
-      const res = await api.get('/users')
-      return res.data
-    },
+      const queryParams = new URLSearchParams()
+
+      queryParams.append('page', page.toString())
+      queryParams.append('limit', limit.toString())
+
+      if (search) {
+        queryParams.append('search', search)
+      }
+
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          queryParams.append(key, value.toString())
+        }
+      })
+
+      const res = await api.get(`/users?${queryParams.toString()}`)
+      return res.data.data
+    }
   })
 }
diff --git a/src/types/services/order.ts b/src/types/services/order.ts
index ede701e..9dddadb 100644
--- a/src/types/services/order.ts
+++ b/src/types/services/order.ts
@@ -1,12 +1,72 @@
-export interface Orders {
-  orders: Order[]
-  total_count: number
-  page: number
-  limit: number
-  total_pages: number
+export type LastSplitQuantity = {
+  quantity: number
+  total_amount: number
+  unit_price: number
 }
 
-export interface Order {
+export type OrderMetadata = {
+  customer_name: string
+  last_split_amount: number
+  last_split_customer_id: string
+  last_split_customer_name: string
+  last_split_payment_id: string
+  last_split_quantities: Record<string, LastSplitQuantity>
+  last_split_type: string
+}
+
+export type OrderItem = {
+  id: string
+  order_id: string
+  product_id: string
+  product_name: string
+  product_variant_id: string | null
+  quantity: number
+  unit_price: number
+  total_price: number
+  modifiers: unknown[] // Adjust if modifiers have a defined structure
+  notes: string
+  status: string
+  created_at: string
+  updated_at: string
+  printer_type: string
+  paid_quantity: number
+}
+
+export type PaymentOrderItem = {
+  id: string
+  payment_id: string
+  order_item_id: string
+  amount: number
+  created_at: string
+  updated_at: string
+}
+
+export type PaymentMetadata = {
+  customer_id: string
+  customer_name: string
+  split_type: string
+}
+
+export type Payment = {
+  id: string
+  order_id: string
+  payment_method_id: string
+  payment_method_name: string
+  payment_method_type: string
+  amount: number
+  status: string
+  split_number: number
+  split_total: number
+  split_type: string
+  split_description: string
+  refund_amount: number
+  metadata: PaymentMetadata
+  created_at: string
+  updated_at: string
+  payment_order_items: PaymentOrderItem[]
+}
+
+export type Order = {
   id: string
   order_number: string
   outlet_id: string
@@ -18,28 +78,27 @@ export interface Order {
   tax_amount: number
   discount_amount: number
   total_amount: number
+  total_cost: number
+  remaining_amount: number
+  payment_status: string
+  refund_amount: number
+  is_void: boolean
+  is_refund: boolean
   notes: string | null
-  metadata: {
-    customer_name: string
-  }
+  metadata: OrderMetadata
   created_at: string
   updated_at: string
   order_items: OrderItem[]
+  payments: Payment[]
+  total_paid: number
+  payment_count: number
+  split_type: string
 }
 
-export interface OrderItem {
-  id: string
-  order_id: string
-  product_id: string
-  product_name: string
-  product_variant_id: string | null
-  product_variant_name?: string
-  quantity: number
-  unit_price: number
-  total_price: number
-  modifiers: any[]
-  notes: string
-  status: string
-  created_at: string
-  updated_at: string
+export type Orders = {
+  orders: Order[],
+  total_count: number
+  page: number
+  limit: number
+  total_pages: number
 }
diff --git a/src/types/services/user.ts b/src/types/services/user.ts
index 437e494..4d0e2fe 100644
--- a/src/types/services/user.ts
+++ b/src/types/services/user.ts
@@ -1,5 +1,35 @@
 export type User = {
-  id: string
-  name: string
-  email: string
+  id: string;
+  organization_id: string;
+  outlet_id: string;
+  name: string;
+  email: string;
+  role: string;
+  permissions: Record<string, unknown>;
+  is_active: boolean;
+  created_at: string; // ISO date string
+  updated_at: string; // ISO date string
+};
+
+type Pagination = {
+  total_count: number;
+  page: number;
+  limit: number;
+  total_pages: number;
+};
+
+export type Users = {
+  users: User[];
+  pagination: Pagination;
+};
+
+export type UserRequest = {
+  organization_id: string;
+  outlet_id: string;
+  name: string;
+  email: string;
+  password: string;
+  role: string;
+  permissions: Record<string, unknown>;
+  is_active: boolean;
 }
diff --git a/src/views/apps/ecommerce/orders/details/BillingAddressCard.tsx b/src/views/apps/ecommerce/orders/details/BillingAddressCard.tsx
index a1feceb..db8ad92 100644
--- a/src/views/apps/ecommerce/orders/details/BillingAddressCard.tsx
+++ b/src/views/apps/ecommerce/orders/details/BillingAddressCard.tsx
@@ -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>
   )
diff --git a/src/views/apps/ecommerce/orders/details/CustomerDetailsCard.tsx b/src/views/apps/ecommerce/orders/details/CustomerDetailsCard.tsx
index f1fe4ad..3a25b2d 100644
--- a/src/views/apps/ecommerce/orders/details/CustomerDetailsCard.tsx
+++ b/src/views/apps/ecommerce/orders/details/CustomerDetailsCard.tsx
@@ -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>
   )
diff --git a/src/views/apps/ecommerce/orders/details/OrderDetailHeader.tsx b/src/views/apps/ecommerce/orders/details/OrderDetailHeader.tsx
index da7d702..6f52a59 100644
--- a/src/views/apps/ecommerce/orders/details/OrderDetailHeader.tsx
+++ b/src/views/apps/ecommerce/orders/details/OrderDetailHeader.tsx
@@ -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}
diff --git a/src/views/apps/ecommerce/orders/details/OrderDetailsCard.tsx b/src/views/apps/ecommerce/orders/details/OrderDetailsCard.tsx
index 95f4197..536f496 100644
--- a/src/views/apps/ecommerce/orders/details/OrderDetailsCard.tsx
+++ b/src/views/apps/ecommerce/orders/details/OrderDetailsCard.tsx
@@ -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>
diff --git a/src/views/apps/ecommerce/orders/details/index.tsx b/src/views/apps/ecommerce/orders/details/index.tsx
index 529a931..efc8883 100644
--- a/src/views/apps/ecommerce/orders/details/index.tsx
+++ b/src/views/apps/ecommerce/orders/details/index.tsx
@@ -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>
diff --git a/src/views/apps/ecommerce/orders/list/OrderListTable.tsx b/src/views/apps/ecommerce/orders/list/OrderListTable.tsx
index 6393944..574bd9b 100644
--- a/src/views/apps/ecommerce/orders/list/OrderListTable.tsx
+++ b/src/views/apps/ecommerce/orders/list/OrderListTable.tsx
@@ -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' }
diff --git a/src/views/apps/user/list/AddUserDrawer.tsx b/src/views/apps/user/list/AddUserDrawer.tsx
index dc819ff..4d909cc 100644
--- a/src/views/apps/user/list/AddUserDrawer.tsx
+++ b/src/views/apps/user/list/AddUserDrawer.tsx
@@ -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
diff --git a/src/views/apps/user/list/UserListTable.tsx b/src/views/apps/user/list/UserListTable.tsx
index be7d970..eb58ef9 100644
--- a/src/views/apps/user/list/UserListTable.tsx
+++ b/src/views/apps/user/list/UserListTable.tsx
@@ -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}
       />
     </>
   )
diff --git a/src/views/apps/user/list/index.tsx b/src/views/apps/user/list/index.tsx
index 7d94df5..1a51b80 100644
--- a/src/views/apps/user/list/index.tsx
+++ b/src/views/apps/user/list/index.tsx
@@ -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>
   )
diff --git a/src/views/dashboards/crm/EarningReportsWithTabs.tsx b/src/views/dashboards/crm/EarningReportsWithTabs.tsx
index 4050c62..9e46212 100644
--- a/src/views/dashboards/crm/EarningReportsWithTabs.tsx
+++ b/src/views/dashboards/crm/EarningReportsWithTabs.tsx
@@ -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']} />}
       />
diff --git a/src/views/dashboards/profit-loss/EarningReportWithTabs.tsx b/src/views/dashboards/profit-loss/EarningReportWithTabs.tsx
new file mode 100644
index 0000000..edc9373
--- /dev/null
+++ b/src/views/dashboards/profit-loss/EarningReportWithTabs.tsx
@@ -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