diff --git a/03_source/frontend/src/_mock/_party-event.ts b/03_source/frontend/src/_mock/_party-event.ts
index 1b8cdab..73cc98e 100644
--- a/03_source/frontend/src/_mock/_party-event.ts
+++ b/03_source/frontend/src/_mock/_party-event.ts
@@ -1,14 +1,14 @@
-export const PRODUCT_GENDER_OPTIONS = [
+export const PARTY_EVENT_GENDER_OPTIONS = [
   { label: 'Men', value: 'Men' },
   { label: 'Women', value: 'Women' },
   { label: 'Kids', value: 'Kids' },
 ];
 
-export const PRODUCT_CATEGORY_OPTIONS = ['Shose', 'Apparel', 'Accessories'];
+export const PARTY_EVENT_CATEGORY_OPTIONS = ['Shose', 'Apparel', 'Accessories'];
 
-export const PRODUCT_RATING_OPTIONS = ['up4Star', 'up3Star', 'up2Star', 'up1Star'];
+export const PARTY_EVENT_RATING_OPTIONS = ['up4Star', 'up3Star', 'up2Star', 'up1Star'];
 
-export const PRODUCT_COLOR_OPTIONS = [
+export const PARTY_EVENT_COLOR_OPTIONS = [
   '#FF4842',
   '#1890FF',
   '#FFC0CB',
@@ -19,7 +19,7 @@ export const PRODUCT_COLOR_OPTIONS = [
   '#FFFFFF',
 ];
 
-export const PRODUCT_COLOR_NAME_OPTIONS = [
+export const PARTY_EVENT_COLOR_NAME_OPTIONS = [
   { value: '#FF4842', label: 'Red' },
   { value: '#1890FF', label: 'Blue' },
   { value: '#FFC0CB', label: 'Pink' },
@@ -30,7 +30,7 @@ export const PRODUCT_COLOR_NAME_OPTIONS = [
   { value: '#FFFFFF', label: 'White' },
 ];
 
-export const PRODUCT_SIZE_OPTIONS = [
+export const PARTY_EVENT_SIZE_OPTIONS = [
   { value: '7', label: '7' },
   { value: '8', label: '8' },
   { value: '8.5', label: '8.5' },
@@ -44,26 +44,26 @@ export const PRODUCT_SIZE_OPTIONS = [
   { value: '13', label: '13' },
 ];
 
-export const PRODUCT_STOCK_OPTIONS = [
+export const PARTY_EVENT_STOCK_OPTIONS = [
   { value: 'in stock', label: 'In stock' },
   { value: 'low stock', label: 'Low stock' },
   { value: 'out of stock', label: 'Out of stock' },
 ];
 
 // not used due to i18n
-export const PRODUCT_PUBLISH_OPTIONS = [
+export const PARTY_EVENT_PUBLISH_OPTIONS = [
   { value: 'published', label: 'Published' },
   { value: 'draft', label: 'Draft' },
 ];
 
-export const PRODUCT_SORT_OPTIONS = [
+export const PARTY_EVENT_SORT_OPTIONS = [
   { value: 'featured', label: 'Featured' },
   { value: 'newest', label: 'Newest' },
   { value: 'priceDesc', label: 'Price: High - Low' },
   { value: 'priceAsc', label: 'Price: Low - High' },
 ];
 
-export const PRODUCT_CATEGORY_GROUP_OPTIONS = [
+export const PARTY_EVENT_CATEGORY_GROUP_OPTIONS = [
   { group: 'Clothing', classify: ['Shirts', 'T-shirts', 'Jeans', 'Leather', 'Accessories'] },
   { group: 'Tailored', classify: ['Suits', 'Blazers', 'Trousers', 'Waistcoats', 'Apparel'] },
   { group: 'Accessories', classify: ['Shoes', 'Backpacks and bags', 'Bracelets', 'Face masks'] },
diff --git a/03_source/frontend/src/_mock/_party-order.ts b/03_source/frontend/src/_mock/_party-order.ts
new file mode 100644
index 0000000..1b11276
--- /dev/null
+++ b/03_source/frontend/src/_mock/_party-order.ts
@@ -0,0 +1,89 @@
+import { _mock } from './_mock';
+
+// ----------------------------------------------------------------------
+
+export const PARTY_ORDER_STATUS_OPTIONS = [
+  { value: 'pending', label: 'Pending' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'cancelled', label: 'Cancelled' },
+  { value: 'refunded', label: 'Refunded' },
+];
+
+const ITEMS = Array.from({ length: 3 }, (_, index) => ({
+  id: _mock.id(index),
+  sku: `16H9UR${index}`,
+  quantity: index + 1,
+  name: _mock.productName(index),
+  coverUrl: _mock.image.product(index),
+  price: _mock.number.price(index),
+}));
+
+export const _party_orders = Array.from({ length: 20 }, (_, index) => {
+  const shipping = 10;
+
+  const discount = 10;
+
+  const taxes = 10;
+
+  const items = (index % 2 && ITEMS.slice(0, 1)) || (index % 3 && ITEMS.slice(1, 3)) || ITEMS;
+
+  const totalQuantity = items.reduce((accumulator, item) => accumulator + item.quantity, 0);
+
+  const subtotal = items.reduce((accumulator, item) => accumulator + item.price * item.quantity, 0);
+
+  const totalAmount = subtotal - shipping - discount + taxes;
+
+  const customer = {
+    id: _mock.id(index),
+    name: _mock.fullName(index),
+    email: _mock.email(index),
+    avatarUrl: _mock.image.avatar(index),
+    ipAddress: '192.158.1.38',
+  };
+
+  const delivery = { shipBy: 'DHL', speedy: 'Standard', trackingNumber: 'SPX037739199373' };
+
+  const history = {
+    orderTime: _mock.time(1),
+    paymentTime: _mock.time(2),
+    deliveryTime: _mock.time(3),
+    completionTime: _mock.time(4),
+    timeline: [
+      { title: 'Delivery successful', time: _mock.time(1) },
+      { title: 'Transporting to [2]', time: _mock.time(2) },
+      { title: 'Transporting to [1]', time: _mock.time(3) },
+      { title: 'The shipping unit has picked up the goods', time: _mock.time(4) },
+      { title: 'Order has been created', time: _mock.time(5) },
+    ],
+  };
+
+  return {
+    id: _mock.id(index),
+    orderNumber: `#601${index}`,
+    createdAt: _mock.time(index),
+    taxes,
+    items,
+    history,
+    subtotal,
+    shipping,
+    discount,
+    customer,
+    delivery,
+    totalAmount,
+    totalQuantity,
+    shippingAddress: {
+      fullAddress: '19034 Verna Unions Apt. 164 - Honolulu, RI / 87535',
+      phoneNumber: '365-374-4961',
+    },
+    payment: {
+      //
+      cardType: 'mastercard',
+      cardNumber: '**** **** **** 5678',
+    },
+    status:
+      (index % 2 && 'completed') ||
+      (index % 3 && 'pending') ||
+      (index % 4 && 'cancelled') ||
+      'refunded',
+  };
+});
diff --git a/03_source/frontend/src/_mock/index.ts b/03_source/frontend/src/_mock/index.ts
index 9685023..4bd8e34 100644
--- a/03_source/frontend/src/_mock/index.ts
+++ b/03_source/frontend/src/_mock/index.ts
@@ -23,3 +23,7 @@ export * from './_product';
 export * from './_overview';
 
 export * from './_calendar';
+
+export * from './_party-event';
+
+export * from './_party-order';
diff --git a/03_source/frontend/src/actions/party-order.ts b/03_source/frontend/src/actions/party-order.ts
new file mode 100644
index 0000000..662e519
--- /dev/null
+++ b/03_source/frontend/src/actions/party-order.ts
@@ -0,0 +1,226 @@
+// src/actions/order.ts
+import { useMemo } from 'react';
+import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
+import type { IOrderItem } from 'src/types/party-order';
+import type { IProductItem } from 'src/types/product';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
+
+// ----------------------------------------------------------------------
+
+const swrOptions: SWRConfiguration = {
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+};
+
+// ----------------------------------------------------------------------
+
+type OrdersData = {
+  partyOrders: IOrderItem[];
+};
+
+export function useGetPartyOrders() {
+  const url = endpoints.partyOrder.list;
+
+  const { data, isLoading, error, isValidating, mutate } = useSWR<OrdersData>(
+    url,
+    fetcher,
+    swrOptions
+  );
+
+  const memoizedValue = useMemo(
+    () => ({
+      orders: data?.partyOrders || [],
+      ordersLoading: isLoading,
+      ordersError: error,
+      ordersValidating: isValidating,
+      ordersEmpty: !isLoading && !isValidating && !data?.partyOrders.length,
+      mutate,
+    }),
+    [data?.partyOrders, error, isLoading, isValidating, mutate]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type OrderData = {
+  order: IOrderItem;
+};
+
+export function useGetOrder(orderId: string) {
+  const url = orderId ? [endpoints.order.details, { params: { orderId } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<OrderData>(url, fetcher, swrOptions);
+
+  const memoizedValue = useMemo(
+    () => ({
+      order: data?.order,
+      orderLoading: isLoading,
+      orderError: error,
+      orderValidating: isValidating,
+    }),
+    [data?.order, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SearchResultsData = {
+  results: IProductItem[];
+};
+
+export function useSearchProducts(query: string) {
+  const url = query ? [endpoints.product.search, { params: { query } }] : '';
+
+  const { data, isLoading, error, isValidating } = useSWR<SearchResultsData>(url, fetcher, {
+    ...swrOptions,
+    keepPreviousData: true,
+  });
+
+  const memoizedValue = useMemo(
+    () => ({
+      searchResults: data?.results || [],
+      searchLoading: isLoading,
+      searchError: error,
+      searchValidating: isValidating,
+      searchEmpty: !isLoading && !isValidating && !data?.results.length,
+    }),
+    [data?.results, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+// ----------------------------------------------------------------------
+
+type SaveOrderData = {
+  name: string;
+  city: string;
+  role: string;
+  email: string;
+  state: string;
+  status: string;
+  address: string;
+  country: string;
+  zipCode: string;
+  company: string;
+  avatarUrl: string;
+  phoneNumber: string;
+  isVerified: boolean;
+  //
+  ordername: string;
+  password: string;
+};
+
+export async function saveOrder(orderId: string, saveOrderData: SaveOrderData) {
+  // const url = orderId ? [endpoints.order.details, { params: { orderId } }] : '';
+
+  const res = await axiosInstance.post(
+    //
+    `http://localhost:7272/api/order/saveOrder?orderId=${orderId}`,
+    {
+      data: saveOrderData,
+    }
+  );
+
+  return res;
+}
+
+export async function uploadOrderImage(saveOrderData: SaveOrderData) {
+  console.log('uploadOrderImage ?');
+  // const url = orderId ? [endpoints.order.details, { params: { orderId } }] : '';
+
+  const res = await axiosInstance.get('http://localhost:7272/api/product/helloworld');
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type CreateOrderData = {
+  name: string;
+  city: string;
+  role: string;
+  email: string;
+  state: string;
+  status: string;
+  address: string;
+  country: string;
+  zipCode: string;
+  company: string;
+  avatarUrl: string;
+  phoneNumber: string;
+  isVerified: boolean;
+  //
+  ordername: string;
+  password: string;
+};
+
+export async function createOrder(createOrderData: CreateOrderData) {
+  console.log('create product ?');
+  // const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
+
+  const res = await axiosInstance.post('http://localhost:7272/api/order/createOrder', {
+    data: createOrderData,
+  });
+
+  return res;
+}
+
+// ----------------------------------------------------------------------
+
+type DeleteOrderResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function deletePartyOrder(orderId: string): Promise<DeleteOrderResponse> {
+  const url = `http://localhost:7272/api/order/deleteOrder?orderId=${orderId}`;
+
+  try {
+    const res = await axiosInstance.delete(url);
+
+    return {
+      success: true,
+      message: 'Order deleted successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete product',
+    };
+  }
+}
+
+// ----------------------------------------------------------------------
+
+type ChangeStatusResponse = {
+  success: boolean;
+  message?: string;
+};
+
+export async function changeStatus(
+  orderId: string,
+  newOrderStatus: string
+): Promise<ChangeStatusResponse> {
+  const url = endpoints.order.changeStatus(orderId);
+
+  try {
+    const res = await axiosInstance.put(url, { data: { status: newOrderStatus } });
+
+    return {
+      success: true,
+      message: 'status updated successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Failed to delete product',
+    };
+  }
+}
diff --git a/03_source/frontend/src/lib/axios.ts b/03_source/frontend/src/lib/axios.ts
index 64ba133..922153a 100644
--- a/03_source/frontend/src/lib/axios.ts
+++ b/03_source/frontend/src/lib/axios.ts
@@ -84,6 +84,9 @@ export const endpoints = {
     changeStatus: (invoiceId: string) => `/api/invoice/changeStatus?invoiceId=${invoiceId}`,
     search: '/api/invoice/search',
   },
+  //
+  //
+  //
   partyEvent: {
     list: '/api/party-event/list',
     details: '/api/party-event/details',
@@ -92,4 +95,13 @@ export const endpoints = {
     update: '/api/party-event/update',
     delete: '/api/party-event/delete',
   },
+  partyOrder: {
+    list: '/api/party-order/list',
+    profile: '/api/party-order/profile',
+    update: '/api/party-order/update',
+    settings: '/api/party-order/settings',
+    details: '/api/party-order/details',
+    changeStatus: (partyOrderId: string) =>
+      `/api/party-order/changeStatus?partyOrderId=${partyOrderId}`,
+  },
 };
diff --git a/03_source/frontend/src/pages/dashboard/party-order/details.tsx b/03_source/frontend/src/pages/dashboard/party-order/details.tsx
new file mode 100644
index 0000000..f128574
--- /dev/null
+++ b/03_source/frontend/src/pages/dashboard/party-order/details.tsx
@@ -0,0 +1,30 @@
+// src/pages/dashboard/order/details.tsx
+//
+import { _orders } from 'src/_mock/_order';
+import { useGetOrder } from 'src/actions/order';
+import { CONFIG } from 'src/global-config';
+import { useParams } from 'src/routes/hooks';
+import { OrderDetailsView } from 'src/sections/order/view';
+
+// ----------------------------------------------------------------------
+
+const metadata = { title: `Order details | Dashboard - ${CONFIG.appName}` };
+
+export default function Page() {
+  const { id = '' } = useParams();
+
+  // const currentOrder = _orders.find((order) => order.id === id);
+  // TODO: error handling
+  const { order, orderLoading, orderError } = useGetOrder(id);
+
+  if (!order) return <>loading</>;
+  if (orderLoading) return <>loading</>;
+
+  return (
+    <>
+      <title>{metadata.title}</title>
+
+      <OrderDetailsView order={order} />
+    </>
+  );
+}
diff --git a/03_source/frontend/src/pages/dashboard/party-order/list.tsx b/03_source/frontend/src/pages/dashboard/party-order/list.tsx
new file mode 100644
index 0000000..17c0612
--- /dev/null
+++ b/03_source/frontend/src/pages/dashboard/party-order/list.tsx
@@ -0,0 +1,18 @@
+// src/pages/dashboard/party-order/list.tsx
+//
+import { CONFIG } from 'src/global-config';
+import { PartyOrderListView } from 'src/sections/party-order/view';
+
+// ----------------------------------------------------------------------
+
+const metadata = { title: `Order list | Dashboard - ${CONFIG.appName}` };
+
+export default function Page() {
+  return (
+    <>
+      <title>{metadata.title}</title>
+
+      <PartyOrderListView />
+    </>
+  );
+}
diff --git a/03_source/frontend/src/routes/paths.ts b/03_source/frontend/src/routes/paths.ts
index 902c0a8..66d237e 100644
--- a/03_source/frontend/src/routes/paths.ts
+++ b/03_source/frontend/src/routes/paths.ts
@@ -179,6 +179,8 @@ export const paths = {
       },
     },
     //
+    //
+    //
     partyEvent: {
       root: `${ROOTS.DASHBOARD}/party-event`,
       new: `${ROOTS.DASHBOARD}/party-event/new`,
@@ -189,5 +191,10 @@ export const paths = {
         edit: `${ROOTS.DASHBOARD}/party-event/${MOCK_ID}/edit`,
       },
     },
+    partyOrder: {
+      root: `${ROOTS.DASHBOARD}/party-order`,
+      details: (id: string) => `${ROOTS.DASHBOARD}/party-order/${id}`,
+      demo: { details: `${ROOTS.DASHBOARD}/party-order/${MOCK_ID}` },
+    },
   },
 };
diff --git a/03_source/frontend/src/routes/sections/dashboard.tsx b/03_source/frontend/src/routes/sections/dashboard.tsx
index 988c89b..f3b044b 100644
--- a/03_source/frontend/src/routes/sections/dashboard.tsx
+++ b/03_source/frontend/src/routes/sections/dashboard.tsx
@@ -83,6 +83,10 @@ const PartyEventListPage = lazy(() => import('src/pages/dashboard/party-event/li
 const PartyEventCreatePage = lazy(() => import('src/pages/dashboard/party-event/new'));
 const PartyEventEditPage = lazy(() => import('src/pages/dashboard/party-event/edit'));
 
+// PartyOrder
+const PartyOrderListPage = lazy(() => import('src/pages/dashboard/party-order/list'));
+const PartyOrderDetailsPage = lazy(() => import('src/pages/dashboard/party-order/details'));
+
 // ----------------------------------------------------------------------
 
 function SuspenseOutlet() {
@@ -217,6 +221,14 @@ export const dashboardRoutes: RouteObject[] = [
           { path: ':id/edit', element: <PartyEventEditPage /> },
         ],
       },
+      {
+        path: 'party-order',
+        children: [
+          { index: true, element: <PartyOrderListPage /> },
+          { path: 'list', element: <PartyOrderListPage /> },
+          { path: ':id', element: <PartyOrderDetailsPage /> },
+        ],
+      },
     ],
   },
 ];
diff --git a/03_source/frontend/src/sections/order/view/order-list-view.tsx b/03_source/frontend/src/sections/order/view/order-list-view.tsx
index 3985972..04b953f 100644
--- a/03_source/frontend/src/sections/order/view/order-list-view.tsx
+++ b/03_source/frontend/src/sections/order/view/order-list-view.tsx
@@ -13,7 +13,7 @@ import { useBoolean, useSetState } from 'minimal-shared/hooks';
 import { varAlpha } from 'minimal-shared/utils';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { _orders, ORDER_STATUS_OPTIONS } from 'src/_mock';
+import { _party_orders, ORDER_STATUS_OPTIONS } from 'src/_mock';
 import { deleteOrder, useGetOrders } from 'src/actions/order';
 import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
 import { ConfirmDialog } from 'src/components/custom-dialog';
diff --git a/03_source/frontend/src/sections/party-order/party-order-details-customer.tsx b/03_source/frontend/src/sections/party-order/party-order-details-customer.tsx
new file mode 100644
index 0000000..0aff327
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-details-customer.tsx
@@ -0,0 +1,59 @@
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Iconify } from 'src/components/iconify';
+import type { IOrderCustomer } from 'src/types/party-order';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  customer?: IOrderCustomer;
+};
+
+export function OrderDetailsCustomer({ customer }: Props) {
+  return (
+    <>
+      <CardHeader
+        title="Customer info"
+        action={
+          <IconButton>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        }
+      />
+      <Box sx={{ p: 3, display: 'flex' }}>
+        <Avatar
+          alt={customer?.name}
+          src={customer?.avatarUrl}
+          sx={{ width: 48, height: 48, mr: 2 }}
+        />
+
+        <Stack spacing={0.5} sx={{ typography: 'body2', alignItems: 'flex-start' }}>
+          <Typography variant="subtitle2">{customer?.name}</Typography>
+
+          <Box sx={{ color: 'text.secondary' }}>{customer?.email}</Box>
+
+          <div>
+            IP address:
+            <Box component="span" sx={{ color: 'text.secondary', ml: 0.25 }}>
+              {customer?.ipAddress}
+            </Box>
+          </div>
+
+          <Button
+            size="small"
+            color="error"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+            sx={{ mt: 1 }}
+          >
+            Add to Blacklist
+          </Button>
+        </Stack>
+      </Box>
+    </>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-details-delivery.tsx b/03_source/frontend/src/sections/party-order/party-order-details-delivery.tsx
new file mode 100644
index 0000000..a5fbcdb
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-details-delivery.tsx
@@ -0,0 +1,57 @@
+import Box from '@mui/material/Box';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import { Iconify } from 'src/components/iconify';
+import type { IOrderDelivery } from 'src/types/party-order';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  delivery?: IOrderDelivery;
+};
+
+export function OrderDetailsDelivery({ delivery }: Props) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <CardHeader
+        title={t('Delivery')}
+        action={
+          <IconButton>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        }
+      />
+      <Stack spacing={1.5} sx={{ p: 3, typography: 'body2' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
+            {t('Ship by')}
+          </Box>
+
+          {delivery?.shipBy}
+        </Box>
+
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
+            {t('Speedy')}
+          </Box>
+
+          {delivery?.speedy}
+        </Box>
+
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
+            {t('Tracking No.')}
+          </Box>
+
+          <Link underline="always" color="inherit">
+            {delivery?.trackingNumber}
+          </Link>
+        </Box>
+      </Stack>
+    </>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-details-history.tsx b/03_source/frontend/src/sections/party-order/party-order-details-history.tsx
new file mode 100644
index 0000000..a283d9f
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-details-history.tsx
@@ -0,0 +1,108 @@
+// src/sections/order/order-details-history.tsx
+import Timeline from '@mui/lab/Timeline';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import type { IOrderHistory } from 'src/types/party-order';
+import { fDateTime } from 'src/utils/format-time';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  history?: IOrderHistory;
+};
+
+export function OrderDetailsHistory({ history }: Props) {
+  const { t } = useTranslation();
+
+  const renderSummary = () => (
+    <Paper
+      variant="outlined"
+      sx={{
+        p: 2.5,
+        gap: 2,
+        minWidth: 260,
+        flexShrink: 0,
+        borderRadius: 2,
+        display: 'flex',
+        typography: 'body2',
+        borderStyle: 'dashed',
+        flexDirection: 'column',
+      }}
+    >
+      <div>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Order time')}</Box>
+        {fDateTime(history?.orderTime)}
+      </div>
+
+      <div>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Payment time')}</Box>
+        {fDateTime(history?.orderTime)}
+      </div>
+
+      <div>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Delivery time for the carrier')}</Box>
+        {fDateTime(history?.orderTime)}
+      </div>
+
+      <div>
+        <Box sx={{ mb: 0.5, color: 'text.disabled' }}>{t('Completion time')}</Box>
+        {fDateTime(history?.orderTime)}
+      </div>
+    </Paper>
+  );
+
+  const renderTimeline = () => (
+    <Timeline
+      sx={{ p: 0, m: 0, [`& .${timelineItemClasses.root}:before`]: { flex: 0, padding: 0 } }}
+    >
+      {history?.timeline.map((item, index) => {
+        const firstTime = index === 0;
+        const lastTime = index === history.timeline.length - 1;
+
+        return (
+          <TimelineItem key={item.title}>
+            <TimelineSeparator>
+              <TimelineDot color={(firstTime && 'primary') || 'grey'} />
+              {lastTime ? null : <TimelineConnector />}
+            </TimelineSeparator>
+
+            <TimelineContent>
+              <Typography variant="subtitle2">{item.title}</Typography>
+
+              <Box sx={{ color: 'text.disabled', typography: 'caption', mt: 0.5 }}>
+                {fDateTime(item.time)}
+              </Box>
+            </TimelineContent>
+          </TimelineItem>
+        );
+      })}
+    </Timeline>
+  );
+
+  return (
+    <Card>
+      <CardHeader title="History" />
+      <Box
+        sx={{
+          p: 3,
+          gap: 3,
+          display: 'flex',
+          alignItems: { md: 'flex-start' },
+          flexDirection: { xs: 'column-reverse', md: 'row' },
+        }}
+      >
+        {renderTimeline()}
+        {renderSummary()}
+      </Box>
+    </Card>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-details-items.tsx b/03_source/frontend/src/sections/party-order/party-order-details-items.tsx
new file mode 100644
index 0000000..37cb283
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-details-items.tsx
@@ -0,0 +1,130 @@
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import type { CardProps } from '@mui/material/Card';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import ListItemText from '@mui/material/ListItemText';
+import { useTranslation } from 'react-i18next';
+import { Iconify } from 'src/components/iconify';
+import { Scrollbar } from 'src/components/scrollbar';
+import type { IOrderProductItem } from 'src/types/party-order';
+import { fCurrency } from 'src/utils/format-number';
+
+// ----------------------------------------------------------------------
+
+type Props = CardProps & {
+  taxes?: number;
+  shipping?: number;
+  discount?: number;
+  subtotal?: number;
+  totalAmount?: number;
+  items?: IOrderProductItem[];
+};
+
+export function OrderDetailsItems({
+  sx,
+  taxes,
+  shipping,
+  discount,
+  subtotal,
+  items = [],
+  totalAmount,
+  ...other
+}: Props) {
+  const { t } = useTranslation();
+  const renderTotal = () => (
+    <Box
+      sx={{
+        p: 3,
+        gap: 2,
+        display: 'flex',
+        textAlign: 'right',
+        typography: 'body2',
+        alignItems: 'flex-end',
+        flexDirection: 'column',
+      }}
+    >
+      <Box sx={{ display: 'flex' }}>
+        <Box sx={{ color: 'text.secondary' }}>{t('Subtotal')}</Box>
+        <Box sx={{ width: 160, typography: 'subtitle2' }}>{fCurrency(subtotal) || '-'}</Box>
+      </Box>
+
+      <Box sx={{ display: 'flex' }}>
+        <Box sx={{ color: 'text.secondary' }}>{t('Shipping')}</Box>
+        <Box sx={{ width: 160, ...(shipping && { color: 'error.main' }) }}>
+          {shipping ? `- ${fCurrency(shipping)}` : '-'}
+        </Box>
+      </Box>
+
+      <Box sx={{ display: 'flex' }}>
+        <Box sx={{ color: 'text.secondary' }}>{t('Discount')}</Box>
+        <Box sx={{ width: 160, ...(discount && { color: 'error.main' }) }}>
+          {discount ? `- ${fCurrency(discount)}` : '-'}
+        </Box>
+      </Box>
+
+      <Box sx={{ display: 'flex' }}>
+        <Box sx={{ color: 'text.secondary' }}>{t('Taxes')}</Box>
+
+        <Box sx={{ width: 160 }}>{taxes ? fCurrency(taxes) : '-'}</Box>
+      </Box>
+
+      <Box sx={{ display: 'flex', typography: 'subtitle1' }}>
+        <div>{t('Total')}</div>
+        <Box sx={{ width: 160 }}>{fCurrency(totalAmount) || '-'}</Box>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Card sx={sx} {...other}>
+      <CardHeader
+        title={t('Details')}
+        action={
+          <IconButton>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        }
+      />
+
+      <Scrollbar>
+        {items.map((item) => (
+          <Box
+            key={item.id}
+            sx={[
+              (theme) => ({
+                p: 3,
+                minWidth: 640,
+                display: 'flex',
+                alignItems: 'center',
+                borderBottom: `dashed 2px ${theme.vars.palette.background.neutral}`,
+              }),
+            ]}
+          >
+            <Avatar src={item.coverUrl} variant="rounded" sx={{ width: 48, height: 48, mr: 2 }} />
+
+            <ListItemText
+              primary={item.name}
+              secondary={item.sku}
+              slotProps={{
+                primary: { sx: { typography: 'body2' } },
+                secondary: {
+                  sx: { mt: 0.5, color: 'text.disabled' },
+                },
+              }}
+            />
+
+            <Box sx={{ typography: 'body2' }}>x{item.quantity}</Box>
+
+            <Box sx={{ width: 110, textAlign: 'right', typography: 'subtitle2' }}>
+              {fCurrency(item.price)}
+            </Box>
+          </Box>
+        ))}
+      </Scrollbar>
+
+      {renderTotal()}
+    </Card>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-details-payment.tsx b/03_source/frontend/src/sections/party-order/party-order-details-payment.tsx
new file mode 100644
index 0000000..9d9cd5a
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-details-payment.tsx
@@ -0,0 +1,39 @@
+import Box from '@mui/material/Box';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import { Iconify } from 'src/components/iconify';
+import type { IOrderPayment } from 'src/types/party-order';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  payment?: IOrderPayment;
+};
+
+export function OrderDetailsPayment({ payment }: Props) {
+  return (
+    <>
+      <CardHeader
+        title="Payment"
+        action={
+          <IconButton>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        }
+      />
+      <Box
+        sx={{
+          p: 3,
+          gap: 0.5,
+          display: 'flex',
+          typography: 'body2',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+        }}
+      >
+        {payment?.cardNumber}
+        <Iconify icon="payments:mastercard" width={36} height="auto" />
+      </Box>
+    </>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-details-shipping.tsx b/03_source/frontend/src/sections/party-order/party-order-details-shipping.tsx
new file mode 100644
index 0000000..5b78bc5
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-details-shipping.tsx
@@ -0,0 +1,44 @@
+import Box from '@mui/material/Box';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import { Iconify } from 'src/components/iconify';
+import type { IOrderShippingAddress } from 'src/types/party-order';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  shippingAddress?: IOrderShippingAddress;
+};
+
+export function OrderDetailsShipping({ shippingAddress }: Props) {
+  return (
+    <>
+      <CardHeader
+        title="Shipping"
+        action={
+          <IconButton>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        }
+      />
+      <Stack spacing={1.5} sx={{ p: 3, typography: 'body2' }}>
+        <Box sx={{ display: 'flex' }}>
+          <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
+            Address
+          </Box>
+
+          {shippingAddress?.fullAddress}
+        </Box>
+
+        <Box sx={{ display: 'flex' }}>
+          <Box component="span" sx={{ color: 'text.secondary', width: 120, flexShrink: 0 }}>
+            Phone number
+          </Box>
+
+          {shippingAddress?.phoneNumber}
+        </Box>
+      </Stack>
+    </>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-details-toolbar.tsx b/03_source/frontend/src/sections/party-order/party-order-details-toolbar.tsx
new file mode 100644
index 0000000..a898d65
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-details-toolbar.tsx
@@ -0,0 +1,138 @@
+// src/sections/order/order-details-toolbar.tsx
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { usePopover } from 'minimal-shared/hooks';
+import { useTranslation } from 'react-i18next';
+import { CustomPopover } from 'src/components/custom-popover';
+import { Iconify } from 'src/components/iconify';
+import { Label } from 'src/components/label';
+import { RouterLink } from 'src/routes/components';
+import type { IDateValue } from 'src/types/common';
+import { fDateTime } from 'src/utils/format-time';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  status?: string;
+  backHref: string;
+  orderNumber?: string;
+  createdAt?: IDateValue;
+  onChangeStatus: (newValue: string) => void;
+  statusOptions: { value: string; label: string }[];
+};
+
+export function OrderDetailsToolbar({
+  status,
+  backHref,
+  createdAt,
+  orderNumber,
+  statusOptions,
+  onChangeStatus,
+}: Props) {
+  const { t } = useTranslation();
+  const menuActions = usePopover();
+
+  const renderMenuActions = () => (
+    <CustomPopover
+      open={menuActions.open}
+      anchorEl={menuActions.anchorEl}
+      onClose={menuActions.onClose}
+      slotProps={{ arrow: { placement: 'top-right' } }}
+    >
+      <MenuList>
+        {statusOptions.map((option) => (
+          <MenuItem
+            key={option.value}
+            selected={option.value === status}
+            onClick={() => {
+              menuActions.onClose();
+              onChangeStatus(option.value);
+            }}
+          >
+            {t(option.label)}
+          </MenuItem>
+        ))}
+      </MenuList>
+    </CustomPopover>
+  );
+
+  return (
+    <>
+      <Box
+        sx={{
+          gap: 3,
+          display: 'flex',
+          mb: { xs: 3, md: 5 },
+          flexDirection: { xs: 'column', md: 'row' },
+        }}
+      >
+        <Box sx={{ gap: 1, display: 'flex', alignItems: 'flex-start' }}>
+          <IconButton component={RouterLink} href={backHref}>
+            <Iconify icon="eva:arrow-ios-back-fill" />
+          </IconButton>
+
+          <Stack spacing={0.5}>
+            <Box sx={{ gap: 1, display: 'flex', alignItems: 'center' }}>
+              <Typography variant="h4"> Order {orderNumber} </Typography>
+              <Label
+                variant="soft"
+                color={
+                  (status === 'completed' && 'success') ||
+                  (status === 'pending' && 'warning') ||
+                  (status === 'cancelled' && 'error') ||
+                  'default'
+                }
+              >
+                {status}
+              </Label>
+            </Box>
+
+            <Typography variant="body2" sx={{ color: 'text.disabled' }}>
+              {fDateTime(createdAt)}
+            </Typography>
+          </Stack>
+        </Box>
+
+        <Box
+          sx={{
+            gap: 1.5,
+            flexGrow: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <Button
+            color="inherit"
+            variant="outlined"
+            endIcon={<Iconify icon="eva:arrow-ios-downward-fill" />}
+            onClick={menuActions.onOpen}
+            sx={{ textTransform: 'capitalize' }}
+          >
+            {status}
+          </Button>
+
+          <Button
+            color="inherit"
+            variant="outlined"
+            startIcon={<Iconify icon="solar:printer-minimalistic-bold" />}
+          >
+            {t('Print (not implemented)')}
+          </Button>
+
+          <Button color="inherit" variant="contained" startIcon={<Iconify icon="solar:pen-bold" />}>
+            {t('Edit')}
+          </Button>
+        </Box>
+      </Box>
+
+      {renderMenuActions()}
+    </>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-table-filters-result.tsx b/03_source/frontend/src/sections/party-order/party-order-table-filters-result.tsx
new file mode 100644
index 0000000..622ba92
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-table-filters-result.tsx
@@ -0,0 +1,66 @@
+import Chip from '@mui/material/Chip';
+import type { UseSetStateReturn } from 'minimal-shared/hooks';
+import { useCallback } from 'react';
+import type { FiltersResultProps } from 'src/components/filters-result';
+import { chipProps, FiltersBlock, FiltersResult } from 'src/components/filters-result';
+import type { IOrderTableFilters } from 'src/types/party-order';
+import { fDateRangeShortLabel } from 'src/utils/format-time';
+
+// ----------------------------------------------------------------------
+
+type Props = FiltersResultProps & {
+  onResetPage: () => void;
+  filters: UseSetStateReturn<IOrderTableFilters>;
+};
+
+export function PartyOrderTableFiltersResult({ filters, totalResults, onResetPage, sx }: Props) {
+  const { state: currentFilters, setState: updateFilters, resetState: resetFilters } = filters;
+
+  const handleRemoveKeyword = useCallback(() => {
+    onResetPage();
+    updateFilters({ name: '' });
+  }, [onResetPage, updateFilters]);
+
+  const handleRemoveStatus = useCallback(() => {
+    onResetPage();
+    updateFilters({ status: 'all' });
+  }, [onResetPage, updateFilters]);
+
+  const handleRemoveDate = useCallback(() => {
+    onResetPage();
+    updateFilters({ startDate: null, endDate: null });
+  }, [onResetPage, updateFilters]);
+
+  const handleReset = useCallback(() => {
+    onResetPage();
+    resetFilters();
+  }, [onResetPage, resetFilters]);
+
+  return (
+    <FiltersResult totalResults={totalResults} onReset={handleReset} sx={sx}>
+      <FiltersBlock label="Status:" isShow={currentFilters.status !== 'all'}>
+        <Chip
+          {...chipProps}
+          label={currentFilters.status}
+          onDelete={handleRemoveStatus}
+          sx={{ textTransform: 'capitalize' }}
+        />
+      </FiltersBlock>
+
+      <FiltersBlock
+        label="Date:"
+        isShow={Boolean(currentFilters.startDate && currentFilters.endDate)}
+      >
+        <Chip
+          {...chipProps}
+          label={fDateRangeShortLabel(currentFilters.startDate, currentFilters.endDate)}
+          onDelete={handleRemoveDate}
+        />
+      </FiltersBlock>
+
+      <FiltersBlock label="Keyword:" isShow={!!currentFilters.name}>
+        <Chip {...chipProps} label={currentFilters.name} onDelete={handleRemoveKeyword} />
+      </FiltersBlock>
+    </FiltersResult>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-table-row.tsx b/03_source/frontend/src/sections/party-order/party-order-table-row.tsx
new file mode 100644
index 0000000..b8e190e
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-table-row.tsx
@@ -0,0 +1,237 @@
+// src/sections/order/view/order-list-view.tsx
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import Collapse from '@mui/material/Collapse';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import { useBoolean, usePopover } from 'minimal-shared/hooks';
+import { useTranslation } from 'react-i18next';
+import { ConfirmDialog } from 'src/components/custom-dialog';
+import { CustomPopover } from 'src/components/custom-popover';
+import { Iconify } from 'src/components/iconify';
+import { Label } from 'src/components/label';
+import { RouterLink } from 'src/routes/components';
+import type { IOrderItem } from 'src/types/party-order';
+import { fCurrency } from 'src/utils/format-number';
+import { fDate, fTime } from 'src/utils/format-time';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  row: IOrderItem;
+  selected: boolean;
+  detailsHref: string;
+  onSelectRow: () => void;
+  onDeleteRow: () => void;
+};
+
+export function PartyOrderTableRow({
+  row,
+  selected,
+  onSelectRow,
+  onDeleteRow,
+  detailsHref,
+}: Props) {
+  const confirmDialog = useBoolean();
+  const menuActions = usePopover();
+  const collapseRow = useBoolean();
+  const { t } = useTranslation();
+
+  const renderPrimaryRow = () => (
+    <TableRow hover selected={selected}>
+      <TableCell padding="checkbox">
+        <Checkbox
+          checked={selected}
+          onClick={onSelectRow}
+          slotProps={{
+            input: {
+              id: `${row.id}-checkbox`,
+              'aria-label': `${row.id} checkbox`,
+            },
+          }}
+        />
+      </TableCell>
+
+      <TableCell>
+        <Link component={RouterLink} href={detailsHref} color="inherit" underline="always">
+          {row.orderNumber}
+        </Link>
+      </TableCell>
+
+      <TableCell>
+        <Box sx={{ gap: 2, display: 'flex', alignItems: 'center' }}>
+          <Avatar alt={row.customer.name} src={row.customer.avatarUrl} />
+
+          <Stack sx={{ typography: 'body2', flex: '1 1 auto', alignItems: 'flex-start' }}>
+            <Box component="span">{row.customer.name}</Box>
+
+            <Box component="span" sx={{ color: 'text.disabled' }}>
+              {row.customer.email}
+            </Box>
+          </Stack>
+        </Box>
+      </TableCell>
+
+      <TableCell>
+        <ListItemText
+          primary={fDate(row.createdAt)}
+          secondary={fTime(row.createdAt)}
+          slotProps={{
+            primary: {
+              noWrap: true,
+              sx: { typography: 'body2' },
+            },
+            secondary: {
+              sx: { mt: 0.5, typography: 'caption' },
+            },
+          }}
+        />
+      </TableCell>
+
+      <TableCell align="center"> {row.totalQuantity} </TableCell>
+
+      <TableCell> {fCurrency(row.subtotal)} </TableCell>
+
+      <TableCell>
+        <Label
+          variant="soft"
+          color={
+            (row.status === 'completed' && 'success') ||
+            (row.status === 'pending' && 'warning') ||
+            (row.status === 'cancelled' && 'error') ||
+            'default'
+          }
+        >
+          {row.status}
+        </Label>
+      </TableCell>
+
+      <TableCell align="right" sx={{ px: 1, whiteSpace: 'nowrap' }}>
+        <IconButton
+          color={collapseRow.value ? 'inherit' : 'default'}
+          onClick={collapseRow.onToggle}
+          sx={{ ...(collapseRow.value && { bgcolor: 'action.hover' }) }}
+        >
+          <Iconify icon="eva:arrow-ios-downward-fill" />
+        </IconButton>
+
+        <IconButton color={menuActions.open ? 'inherit' : 'default'} onClick={menuActions.onOpen}>
+          <Iconify icon="eva:more-vertical-fill" />
+        </IconButton>
+      </TableCell>
+    </TableRow>
+  );
+
+  const renderSecondaryRow = () => (
+    <TableRow>
+      <TableCell sx={{ p: 0, border: 'none' }} colSpan={8}>
+        <Collapse
+          in={collapseRow.value}
+          timeout="auto"
+          unmountOnExit
+          sx={{ bgcolor: 'background.neutral' }}
+        >
+          <Paper sx={{ m: 1.5 }}>
+            {row.items.map((item) => (
+              <Box
+                key={item.id}
+                sx={(theme) => ({
+                  display: 'flex',
+                  alignItems: 'center',
+                  p: theme.spacing(1.5, 2, 1.5, 1.5),
+                  '&:not(:last-of-type)': {
+                    borderBottom: `solid 2px ${theme.vars.palette.background.neutral}`,
+                  },
+                })}
+              >
+                <Avatar
+                  src={item.coverUrl}
+                  variant="rounded"
+                  sx={{ width: 48, height: 48, mr: 2 }}
+                />
+
+                <ListItemText
+                  primary={item.name}
+                  secondary={item.sku}
+                  slotProps={{
+                    primary: {
+                      sx: { typography: 'body2' },
+                    },
+                    secondary: {
+                      sx: { mt: 0.5, color: 'text.disabled' },
+                    },
+                  }}
+                />
+
+                <div>x{item.quantity} </div>
+
+                <Box sx={{ width: 110, textAlign: 'right' }}>{fCurrency(item.price)}</Box>
+              </Box>
+            ))}
+          </Paper>
+        </Collapse>
+      </TableCell>
+    </TableRow>
+  );
+
+  const renderMenuActions = () => (
+    <CustomPopover
+      open={menuActions.open}
+      anchorEl={menuActions.anchorEl}
+      onClose={menuActions.onClose}
+      slotProps={{ arrow: { placement: 'right-top' } }}
+    >
+      <MenuList>
+        <MenuItem
+          onClick={() => {
+            confirmDialog.onTrue();
+            menuActions.onClose();
+          }}
+          sx={{ color: 'error.main' }}
+        >
+          <Iconify icon="solar:trash-bin-trash-bold" />
+          {t('Delete')}
+        </MenuItem>
+
+        <li>
+          <MenuItem component={RouterLink} href={detailsHref} onClick={() => menuActions.onClose()}>
+            <Iconify icon="solar:eye-bold" />
+            {t('View')}
+          </MenuItem>
+        </li>
+      </MenuList>
+    </CustomPopover>
+  );
+
+  const renderConfrimDialog = () => (
+    <ConfirmDialog
+      open={confirmDialog.value}
+      onClose={confirmDialog.onFalse}
+      title="Delete"
+      content="Are you sure want to delete?"
+      action={
+        <Button variant="contained" color="error" onClick={onDeleteRow}>
+          Delete
+        </Button>
+      }
+    />
+  );
+
+  return (
+    <>
+      {renderPrimaryRow()}
+      {renderSecondaryRow()}
+      {renderMenuActions()}
+      {renderConfrimDialog()}
+    </>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/party-order-table-toolbar.tsx b/03_source/frontend/src/sections/party-order/party-order-table-toolbar.tsx
new file mode 100644
index 0000000..22d3ee6
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/party-order-table-toolbar.tsx
@@ -0,0 +1,156 @@
+import Box from '@mui/material/Box';
+import { formHelperTextClasses } from '@mui/material/FormHelperText';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import TextField from '@mui/material/TextField';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import type { UseSetStateReturn } from 'minimal-shared/hooks';
+import { usePopover } from 'minimal-shared/hooks';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CustomPopover } from 'src/components/custom-popover';
+import { Iconify } from 'src/components/iconify';
+import type { IDatePickerControl } from 'src/types/common';
+import type { IOrderTableFilters } from 'src/types/party-order';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  dateError: boolean;
+  onResetPage: () => void;
+  filters: UseSetStateReturn<IOrderTableFilters>;
+};
+
+export function PartyOrderTableToolbar({ filters, onResetPage, dateError }: Props) {
+  const { t } = useTranslation();
+  const menuActions = usePopover();
+
+  const { state: currentFilters, setState: updateFilters } = filters;
+
+  const handleFilterName = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onResetPage();
+      updateFilters({ name: event.target.value });
+    },
+    [onResetPage, updateFilters]
+  );
+
+  const handleFilterStartDate = useCallback(
+    (newValue: IDatePickerControl) => {
+      onResetPage();
+      updateFilters({ startDate: newValue });
+    },
+    [onResetPage, updateFilters]
+  );
+
+  const handleFilterEndDate = useCallback(
+    (newValue: IDatePickerControl) => {
+      onResetPage();
+      updateFilters({ endDate: newValue });
+    },
+    [onResetPage, updateFilters]
+  );
+
+  const renderMenuActions = () => (
+    <CustomPopover
+      open={menuActions.open}
+      anchorEl={menuActions.anchorEl}
+      onClose={menuActions.onClose}
+      slotProps={{ arrow: { placement: 'right-top' } }}
+    >
+      <MenuList>
+        <MenuItem onClick={() => menuActions.onClose()}>
+          <Iconify icon="solar:printer-minimalistic-bold" />
+          {t('Print')}
+        </MenuItem>
+
+        <MenuItem onClick={() => menuActions.onClose()}>
+          <Iconify icon="solar:import-bold" />
+          {t('Import')}
+        </MenuItem>
+
+        <MenuItem onClick={() => menuActions.onClose()}>
+          <Iconify icon="solar:export-bold" />
+          {t('Export')}
+        </MenuItem>
+      </MenuList>
+    </CustomPopover>
+  );
+
+  return (
+    <>
+      <Box
+        sx={{
+          p: 2.5,
+          gap: 2,
+          display: 'flex',
+          pr: { xs: 2.5, md: 1 },
+          flexDirection: { xs: 'column', md: 'row' },
+          alignItems: { xs: 'flex-end', md: 'center' },
+        }}
+      >
+        <DatePicker
+          label={t('Start date')}
+          value={currentFilters.startDate}
+          onChange={handleFilterStartDate}
+          slotProps={{ textField: { fullWidth: true } }}
+          sx={{ maxWidth: { md: 200 } }}
+        />
+
+        <DatePicker
+          label={t('End date')}
+          value={currentFilters.endDate}
+          onChange={handleFilterEndDate}
+          slotProps={{
+            textField: {
+              fullWidth: true,
+              error: dateError,
+              helperText: dateError ? 'End date must be later than start date' : null,
+            },
+          }}
+          sx={{
+            maxWidth: { md: 200 },
+            [`& .${formHelperTextClasses.root}`]: {
+              position: { md: 'absolute' },
+              bottom: { md: -40 },
+            },
+          }}
+        />
+
+        <Box
+          sx={{
+            gap: 2,
+            width: 1,
+            flexGrow: 1,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <TextField
+            fullWidth
+            value={currentFilters.name}
+            onChange={handleFilterName}
+            placeholder={t('Search customer or order number...')}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Iconify icon="eva:search-fill" sx={{ color: 'text.disabled' }} />
+                  </InputAdornment>
+                ),
+              },
+            }}
+          />
+
+          <IconButton onClick={menuActions.onOpen}>
+            <Iconify icon="eva:more-vertical-fill" />
+          </IconButton>
+        </Box>
+      </Box>
+
+      {renderMenuActions()}
+    </>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/view/index.ts b/03_source/frontend/src/sections/party-order/view/index.ts
new file mode 100644
index 0000000..c9cfd64
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/view/index.ts
@@ -0,0 +1,3 @@
+export * from './party-order-list-view';
+
+export * from './party-order-details-view';
diff --git a/03_source/frontend/src/sections/party-order/view/party-order-details-view.tsx b/03_source/frontend/src/sections/party-order/view/party-order-details-view.tsx
new file mode 100644
index 0000000..7ac3d71
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/view/party-order-details-view.tsx
@@ -0,0 +1,104 @@
+// src/sections/order/view/order-details-view.tsx
+
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { ORDER_STATUS_OPTIONS } from 'src/_mock';
+import { changeStatus } from 'src/actions/party-order';
+import { DashboardContent } from 'src/layouts/dashboard';
+import { useTranslate } from 'src/locales';
+import { paths } from 'src/routes/paths';
+import type { IOrderItem } from 'src/types/party-order';
+import { OrderDetailsCustomer } from '../party-order-details-customer';
+import { OrderDetailsDelivery } from '../party-order-details-delivery';
+import { OrderDetailsHistory } from '../party-order-details-history';
+import { OrderDetailsItems } from '../party-order-details-items';
+import { OrderDetailsPayment } from '../party-order-details-payment';
+import { OrderDetailsShipping } from '../party-order-details-shipping';
+import { OrderDetailsToolbar } from '../party-order-details-toolbar';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  order: IOrderItem;
+};
+
+export function OrderDetailsView({ order }: Props) {
+  const { t } = useTranslation();
+
+  const [status, setStatus] = useState(order.status);
+
+  const handleChangeStatus = useCallback(
+    async (newValue: string) => {
+      setStatus(newValue);
+      // change order status
+      try {
+        if (order?.id) {
+          await changeStatus(order.id, newValue);
+
+          toast.success('order status updated');
+        }
+      } catch (error) {
+        console.error(error);
+        toast.warning('error during update order status');
+      }
+    },
+    [order.id]
+  );
+
+  return (
+    <DashboardContent>
+      <OrderDetailsToolbar
+        status={status}
+        createdAt={order?.createdAt}
+        orderNumber={order?.orderNumber}
+        backHref={paths.dashboard.order.root}
+        onChangeStatus={handleChangeStatus}
+        statusOptions={ORDER_STATUS_OPTIONS}
+      />
+
+      <Grid container spacing={3}>
+        <Grid size={{ xs: 12, md: 8 }}>
+          <Box
+            sx={{
+              //
+              gap: 3,
+              display: 'flex',
+              flexDirection: { xs: 'column-reverse', md: 'column' },
+            }}
+          >
+            <OrderDetailsItems
+              items={order?.items}
+              taxes={order?.taxes}
+              shipping={order?.shipping}
+              discount={order?.discount}
+              subtotal={order?.subtotal}
+              totalAmount={order?.totalAmount}
+            />
+
+            <OrderDetailsHistory history={order?.history} />
+          </Box>
+        </Grid>
+
+        <Grid size={{ xs: 12, md: 4 }}>
+          <Card>
+            <OrderDetailsCustomer customer={order?.customer} />
+
+            <Divider sx={{ borderStyle: 'dashed' }} />
+            <OrderDetailsDelivery delivery={order?.delivery} />
+
+            <Divider sx={{ borderStyle: 'dashed' }} />
+            <OrderDetailsShipping shippingAddress={order?.shippingAddress} />
+
+            <Divider sx={{ borderStyle: 'dashed' }} />
+            <OrderDetailsPayment payment={order?.payment} />
+          </Card>
+        </Grid>
+      </Grid>
+    </DashboardContent>
+  );
+}
diff --git a/03_source/frontend/src/sections/party-order/view/party-order-list-view.tsx b/03_source/frontend/src/sections/party-order/view/party-order-list-view.tsx
new file mode 100644
index 0000000..79d0078
--- /dev/null
+++ b/03_source/frontend/src/sections/party-order/view/party-order-list-view.tsx
@@ -0,0 +1,364 @@
+// src/sections/order/view/order-list-view.tsx
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import IconButton from '@mui/material/IconButton';
+import Tab from '@mui/material/Tab';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import Tabs from '@mui/material/Tabs';
+import Tooltip from '@mui/material/Tooltip';
+import { useBoolean, useSetState } from 'minimal-shared/hooks';
+import { varAlpha } from 'minimal-shared/utils';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { _party_orders, PARTY_ORDER_STATUS_OPTIONS } from 'src/_mock';
+import { deletePartyOrder, useGetPartyOrders } from 'src/actions/party-order';
+import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
+import { ConfirmDialog } from 'src/components/custom-dialog';
+import { Iconify } from 'src/components/iconify';
+import { Label } from 'src/components/label';
+import { Scrollbar } from 'src/components/scrollbar';
+import { toast } from 'src/components/snackbar';
+import type { TableHeadCellProps } from 'src/components/table';
+import {
+  emptyRows,
+  getComparator,
+  rowInPage,
+  TableEmptyRows,
+  TableHeadCustom,
+  TableNoData,
+  TablePaginationCustom,
+  TableSelectedAction,
+  useTable,
+} from 'src/components/table';
+import { DashboardContent } from 'src/layouts/dashboard';
+import { useRouter } from 'src/routes/hooks';
+import { paths } from 'src/routes/paths';
+import type { IOrderItem, IOrderTableFilters } from 'src/types/party-order';
+import { fIsAfter, fIsBetween } from 'src/utils/format-time';
+import { PartyOrderTableFiltersResult } from '../party-order-table-filters-result';
+import { PartyOrderTableRow } from '../party-order-table-row';
+import { PartyOrderTableToolbar } from '../party-order-table-toolbar';
+
+// ----------------------------------------------------------------------
+
+const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...PARTY_ORDER_STATUS_OPTIONS];
+
+// ----------------------------------------------------------------------
+
+export function PartyOrderListView() {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const TABLE_HEAD: TableHeadCellProps[] = [
+    { id: 'orderNumber', label: t('Order'), width: 88 },
+    { id: 'name', label: t('Customer') },
+    { id: 'createdAt', label: t('Date'), width: 140 },
+    { id: 'totalQuantity', label: t('Items'), width: 120, align: 'center' },
+    { id: 'totalAmount', label: t('Price'), width: 140 },
+    { id: 'status', label: t('Status'), width: 110 },
+    { id: '', width: 88 },
+  ];
+
+  const { orders, mutate, ordersLoading } = useGetPartyOrders();
+
+  const table = useTable({ defaultOrderBy: 'orderNumber' });
+
+  const confirmDialog = useBoolean();
+
+  const [tableData, setTableData] = useState<IOrderItem[]>([]);
+
+  useEffect(() => {
+    setTableData(orders);
+  }, [orders]);
+
+  const filters = useSetState<IOrderTableFilters>({
+    name: '',
+    status: 'all',
+    startDate: null,
+    endDate: null,
+  });
+  const { state: currentFilters, setState: updateFilters } = filters;
+
+  const dateError = fIsAfter(currentFilters.startDate, currentFilters.endDate);
+
+  const dataFiltered = applyFilter({
+    inputData: tableData,
+    comparator: getComparator(table.order, table.orderBy),
+    filters: currentFilters,
+    dateError,
+  });
+
+  const dataInPage = rowInPage(dataFiltered, table.page, table.rowsPerPage);
+
+  const canReset =
+    !!currentFilters.name ||
+    currentFilters.status !== 'all' ||
+    (!!currentFilters.startDate && !!currentFilters.endDate);
+
+  const notFound = (!dataFiltered.length && canReset) || !dataFiltered.length;
+
+  const handleDeleteRow = useCallback(
+    async (id: string) => {
+      // const deleteRow = tableData.filter((row) => row.id !== id);
+
+      try {
+        await deletePartyOrder(id);
+        toast.success('Delete success!');
+        mutate();
+      } catch (error) {
+        console.error(error);
+        toast.error('Delete failed!');
+      }
+
+      // toast.success('Delete success!');
+      // setTableData(deleteRow);
+      // table.onUpdatePageDeleteRow(dataInPage.length);
+    },
+    [table, tableData, mutate]
+  );
+
+  const handleDeleteRows = useCallback(() => {
+    const deleteRows = tableData.filter((row) => !table.selected.includes(row.id));
+
+    toast.success('Delete success!');
+
+    setTableData(deleteRows);
+
+    table.onUpdatePageDeleteRows(dataInPage.length, dataFiltered.length);
+  }, [dataFiltered.length, dataInPage.length, table, tableData]);
+
+  const handleFilterStatus = useCallback(
+    (event: React.SyntheticEvent, newValue: string) => {
+      table.onResetPage();
+      updateFilters({ status: newValue });
+    },
+    [updateFilters, table]
+  );
+
+  const renderConfirmDialog = () => (
+    <ConfirmDialog
+      open={confirmDialog.value}
+      onClose={confirmDialog.onFalse}
+      title={t('Delete')}
+      content={
+        <>
+          Are you sure want to delete <strong> {table.selected.length} </strong> items?
+        </>
+      }
+      action={
+        <Button
+          variant="contained"
+          color="error"
+          onClick={() => {
+            handleDeleteRows();
+            // confirmDialog.onFalse();
+          }}
+        >
+          {t('Delete')}
+        </Button>
+      }
+    />
+  );
+
+  useEffect(() => {
+    mutate();
+  }, []);
+
+  if (!orders) return <>loading</>;
+  if (ordersLoading) return <>loading</>;
+
+  return (
+    <>
+      <DashboardContent>
+        <CustomBreadcrumbs
+          heading="List"
+          links={[
+            //
+            { name: t('Dashboard'), href: paths.dashboard.root },
+            { name: t('Party Order'), href: paths.dashboard.partyOrder.root },
+            { name: t('List') },
+          ]}
+          sx={{ mb: { xs: 3, md: 5 } }}
+        />
+
+        <Card>
+          <Tabs
+            value={currentFilters.status}
+            onChange={handleFilterStatus}
+            sx={[
+              (theme) => ({
+                px: 2.5,
+                boxShadow: `inset 0 -2px 0 0 ${varAlpha(theme.vars.palette.grey['500Channel'], 0.08)}`,
+              }),
+            ]}
+          >
+            {STATUS_OPTIONS.map((tab) => (
+              <Tab
+                key={tab.value}
+                iconPosition="end"
+                value={tab.value}
+                label={t(tab.label)}
+                icon={
+                  <Label
+                    variant={
+                      ((tab.value === 'all' || tab.value === currentFilters.status) && 'filled') ||
+                      'soft'
+                    }
+                    color={
+                      (tab.value === 'completed' && 'success') ||
+                      (tab.value === 'pending' && 'warning') ||
+                      (tab.value === 'cancelled' && 'error') ||
+                      'default'
+                    }
+                  >
+                    {['completed', 'pending', 'cancelled', 'refunded'].includes(tab.value)
+                      ? tableData.filter((user) => user.status === tab.value).length
+                      : tableData.length}
+                  </Label>
+                }
+              />
+            ))}
+          </Tabs>
+
+          <PartyOrderTableToolbar
+            filters={filters}
+            onResetPage={table.onResetPage}
+            dateError={dateError}
+          />
+
+          {canReset && (
+            <PartyOrderTableFiltersResult
+              filters={filters}
+              totalResults={dataFiltered.length}
+              onResetPage={table.onResetPage}
+              sx={{ p: 2.5, pt: 0 }}
+            />
+          )}
+
+          <Box sx={{ position: 'relative' }}>
+            <TableSelectedAction
+              dense={table.dense}
+              numSelected={table.selected.length}
+              rowCount={dataFiltered.length}
+              onSelectAllRows={(checked) =>
+                table.onSelectAllRows(
+                  checked,
+                  dataFiltered.map((row) => row.id)
+                )
+              }
+              action={
+                <Tooltip title={t('Delete')}>
+                  <IconButton color="primary" onClick={confirmDialog.onTrue}>
+                    <Iconify icon="solar:trash-bin-trash-bold" />
+                  </IconButton>
+                </Tooltip>
+              }
+            />
+
+            <Scrollbar sx={{ minHeight: 444 }}>
+              <Table size={table.dense ? 'small' : 'medium'} sx={{ minWidth: 960 }}>
+                <TableHeadCustom
+                  order={table.order}
+                  orderBy={table.orderBy}
+                  headCells={TABLE_HEAD}
+                  rowCount={dataFiltered.length}
+                  numSelected={table.selected.length}
+                  onSort={table.onSort}
+                  onSelectAllRows={(checked) =>
+                    table.onSelectAllRows(
+                      checked,
+                      dataFiltered.map((row) => row.id)
+                    )
+                  }
+                />
+
+                <TableBody>
+                  {dataFiltered
+                    .slice(
+                      table.page * table.rowsPerPage,
+                      table.page * table.rowsPerPage + table.rowsPerPage
+                    )
+                    .map((row) => (
+                      <PartyOrderTableRow
+                        key={row.id}
+                        row={row}
+                        selected={table.selected.includes(row.id)}
+                        onSelectRow={() => table.onSelectRow(row.id)}
+                        onDeleteRow={() => handleDeleteRow(row.id)}
+                        detailsHref={paths.dashboard.order.details(row.id)}
+                      />
+                    ))}
+
+                  <TableEmptyRows
+                    height={table.dense ? 56 : 56 + 20}
+                    emptyRows={emptyRows(table.page, table.rowsPerPage, dataFiltered.length)}
+                  />
+
+                  <TableNoData notFound={notFound} />
+                </TableBody>
+              </Table>
+            </Scrollbar>
+          </Box>
+
+          <TablePaginationCustom
+            page={table.page}
+            dense={table.dense}
+            count={dataFiltered.length}
+            rowsPerPage={table.rowsPerPage}
+            onPageChange={table.onChangePage}
+            onChangeDense={table.onChangeDense}
+            onRowsPerPageChange={table.onChangeRowsPerPage}
+          />
+        </Card>
+      </DashboardContent>
+
+      {renderConfirmDialog()}
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+type ApplyFilterProps = {
+  dateError: boolean;
+  inputData: IOrderItem[];
+  filters: IOrderTableFilters;
+  comparator: (a: any, b: any) => number;
+};
+
+function applyFilter({ inputData, comparator, filters, dateError }: ApplyFilterProps) {
+  const { status, name, startDate, endDate } = filters;
+
+  const stabilizedThis = inputData.map((el, index) => [el, index] as const);
+
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+
+  inputData = stabilizedThis.map((el) => el[0]);
+
+  if (name) {
+    inputData = inputData.filter(({ orderNumber, customer }) =>
+      [orderNumber, customer.name, customer.email].some((field) =>
+        field?.toLowerCase().includes(name.toLowerCase())
+      )
+    );
+  }
+
+  if (status !== 'all') {
+    inputData = inputData.filter((order) => order.status === status);
+  }
+
+  if (!dateError) {
+    if (startDate && endDate) {
+      inputData = inputData.filter((order) => fIsBetween(order.createdAt, startDate, endDate));
+    }
+  }
+
+  return inputData;
+}
diff --git a/03_source/frontend/src/types/party-order.ts b/03_source/frontend/src/types/party-order.ts
new file mode 100644
index 0000000..943e5f3
--- /dev/null
+++ b/03_source/frontend/src/types/party-order.ts
@@ -0,0 +1,71 @@
+import type { IDatePickerControl, IDateValue } from './common';
+
+// ----------------------------------------------------------------------
+
+export type IOrderTableFilters = {
+  name: string;
+  status: string;
+  endDate: IDatePickerControl;
+  startDate: IDatePickerControl;
+};
+
+export type IOrderHistory = {
+  orderTime: IDateValue;
+  paymentTime: IDateValue;
+  deliveryTime: IDateValue;
+  completionTime: IDateValue;
+  timeline: { title: string; time: IDateValue }[];
+};
+
+export type IOrderShippingAddress = {
+  fullAddress: string;
+  phoneNumber: string;
+};
+
+export type IOrderPayment = {
+  cardType: string;
+  cardNumber: string;
+};
+
+export type IOrderDelivery = {
+  shipBy: string;
+  speedy: string;
+  trackingNumber: string;
+};
+
+export type IOrderCustomer = {
+  id: string;
+  name: string;
+  email: string;
+  avatarUrl: string;
+  ipAddress: string;
+};
+
+export type IOrderProductItem = {
+  id: string;
+  sku: string;
+  name: string;
+  price: number;
+  coverUrl: string;
+  quantity: number;
+};
+
+export type IOrderItem = {
+  id: string;
+  createdAt: IDateValue;
+  //
+  taxes: number;
+  status: string;
+  shipping: number;
+  discount: number;
+  subtotal: number;
+  orderNumber: string;
+  totalAmount: number;
+  totalQuantity: number;
+  history: IOrderHistory | undefined;
+  payment: IOrderPayment;
+  customer: IOrderCustomer;
+  delivery: IOrderDelivery;
+  items: IOrderProductItem[];
+  shippingAddress: IOrderShippingAddress;
+};