From a8fe2bdba01c32d7cff362965453c8ff64e40b96 Mon Sep 17 00:00:00 2001
From: thelenvr <thelenvr@gmail.com>
Date: Tue, 7 May 2024 01:37:55 -0400
Subject: [PATCH 1/4] created the orderhistory page file, edit routes, add to
 header

---
 src/components/Header/index.tsx  | 17 +++++++++--------
 src/pages/OrderHistory/index.tsx | 15 +++++++++++++++
 src/routes.tsx                   |  5 +++++
 3 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/OrderHistory/index.tsx

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 066ee41..e3bc09a 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -58,14 +58,15 @@ const Index: React.FC = () => {
               ) : null}
               {user ? (
                 <>
-                  <Link to='/profile/edit'>
-                    <Button
-                      type='button'
-                      className='btn btn-link my-1 mx-0 mx-lg-1'
-                    >
-                      Profile
-                    </Button>
-                  </Link>
+                  <NavDropdown title='My Account' className='my-1'>
+                    <Link to='/profile/edit' className='dropdown-item'>
+                      Edit Profile
+                    </Link>
+                    <Link to='/profile/orders' className='dropdown-item'>
+                      Order History
+                    </Link>
+                  </NavDropdown>
+
                   <Link to='/logout'>
                     <Button
                       type='button'
diff --git a/src/pages/OrderHistory/index.tsx b/src/pages/OrderHistory/index.tsx
new file mode 100644
index 0000000..d65ce9e
--- /dev/null
+++ b/src/pages/OrderHistory/index.tsx
@@ -0,0 +1,15 @@
+import PageContainer from 'components/PageContainer'
+
+const Orders = () => (
+    <div className='container'>
+      <p>Order History</p>
+    </div>
+  )
+
+const Index: React.FC = () => (
+  <PageContainer>
+    <Orders />
+  </PageContainer>
+)
+
+export default Index
diff --git a/src/routes.tsx b/src/routes.tsx
index 526bf06..4246a41 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -13,6 +13,7 @@ import MovieSeatSelect from 'pages/MovieSeatSelect'
 import MovieSelect from 'pages/MovieSelect'
 import NotFound from 'pages/NotFound'
 import OrderConfirmation from 'pages/OrderConfirmation'
+import OrderHistory from 'pages/OrderHistory'
 import OrderSummary from 'pages/OrderSummary'
 import PromoManage from 'pages/PromoManage'
 import Register from 'pages/Register'
@@ -77,6 +78,10 @@ const children: RouteObject[] = [
         path: '/profile/edit',
         element: <EditProfile />
       },
+      {
+        path: '/profile/orders',
+        element: <OrderHistory />
+      },
       {
         path: '/changePassword',
         element: <ChangePassword />

From 76890693734bdc5f1fbed1a9da6089aa2a59c080 Mon Sep 17 00:00:00 2001
From: thelenvr <thelenvr@gmail.com>
Date: Tue, 7 May 2024 02:47:24 -0400
Subject: [PATCH 2/4] basic table structure

---
 src/pages/OrderHistory/index.tsx        | 61 +++++++++++++++++++++----
 src/pages/OrderHistory/style.module.css | 17 +++++++
 2 files changed, 68 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/OrderHistory/style.module.css

diff --git a/src/pages/OrderHistory/index.tsx b/src/pages/OrderHistory/index.tsx
index d65ce9e..864a61a 100644
--- a/src/pages/OrderHistory/index.tsx
+++ b/src/pages/OrderHistory/index.tsx
@@ -1,15 +1,56 @@
+import styles from './style.module.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
 import PageContainer from 'components/PageContainer'
+import { useState } from 'react'
+import { Card, Table } from 'react-bootstrap'
 
-const Orders = () => (
-    <div className='container'>
-      <p>Order History</p>
-    </div>
-  )
-
-const Index: React.FC = () => (
-  <PageContainer>
-    <Orders />
-  </PageContainer>
+const OrderRow: React.FC<{
+  key: string
+}> = (
+  { key } // TODO: add refresh back
+) => (
+  <tr className='align-middle' key={key}>
+    <td className={styles.hideOverflow}>(Some movie)</td>
+    <td className={styles.hideOverflow}>(01-01-2024)</td>
+    <td className={styles.hideOverflow}>(Some seats)</td>
+    <td className={styles.hideOverflow}>(Some tickets)</td>
+    <td className={styles.hideOverflow}>(A promo used)</td>
+    <td className={styles.hideOverflow}>(The card used)</td>
+    <td className='text-end'>end</td>
+  </tr>
 )
 
+const Index: React.FC = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [key, setKey] = useState('')
+  return (
+    <PageContainer>
+      <Card>
+        <Card.Header>
+          <div className='d-flex justify-content-between align-items-center'>
+            <h2>Your Order History</h2>
+          </div>
+        </Card.Header>
+        <Card.Body>
+          <Table hover>
+            <thead>
+              <tr>
+                <th>MOVIE</th>
+                <th>DATE</th>
+                <th>SEATS</th>
+                <th>TICKETS</th>
+                <th>PROMOTION USED</th>
+                <th>CARD USED</th>
+              </tr>
+            </thead>
+            <tbody>
+              <OrderRow key={key} />
+            </tbody>
+          </Table>
+        </Card.Body>
+      </Card>
+    </PageContainer>
+  )
+}
+
 export default Index
diff --git a/src/pages/OrderHistory/style.module.css b/src/pages/OrderHistory/style.module.css
new file mode 100644
index 0000000..f773617
--- /dev/null
+++ b/src/pages/OrderHistory/style.module.css
@@ -0,0 +1,17 @@
+.hide-overflow {
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.test-case {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid #000;
+  margin: 10px;
+  width: 300px;
+  background-color: #f0f0f0;
+}

From 50d815a671a447b3ded3ab62d83b2e6ba5904c0e Mon Sep 17 00:00:00 2001
From: thelenvr <thelenvr@gmail.com>
Date: Tue, 7 May 2024 02:51:25 -0400
Subject: [PATCH 3/4] quick fix for build

---
 src/pages/OrderHistory/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/OrderHistory/index.tsx b/src/pages/OrderHistory/index.tsx
index 864a61a..16e13bf 100644
--- a/src/pages/OrderHistory/index.tsx
+++ b/src/pages/OrderHistory/index.tsx
@@ -1,7 +1,6 @@
 import styles from './style.module.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import PageContainer from 'components/PageContainer'
-import { useState } from 'react'
 import { Card, Table } from 'react-bootstrap'
 
 const OrderRow: React.FC<{
@@ -21,8 +20,7 @@ const OrderRow: React.FC<{
 )
 
 const Index: React.FC = () => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [key, setKey] = useState('')
+  const key = 'order-row' // TODO: add key, setKey back
   return (
     <PageContainer>
       <Card>

From 63e2c71dca990b9290bfbe3c3ec4cdb89e7f2246 Mon Sep 17 00:00:00 2001
From: Boming Zhang <bz14520@uga.edu>
Date: Tue, 7 May 2024 03:39:46 -0400
Subject: [PATCH 4/4] feat: finish order history

---
 src/client/index.ts              | 430 ++++++++++++++-----------------
 src/pages/OrderHistory/index.tsx |  48 ++--
 src/pages/PromoManage/index.tsx  |   1 -
 3 files changed, 227 insertions(+), 252 deletions(-)

diff --git a/src/client/index.ts b/src/client/index.ts
index d92790c..163873a 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -65,6 +65,18 @@ export interface SchemaCard {
   zip: string
 }
 
+export interface SchemaCreateOrder {
+  /** @maxLength 255 */
+  promotion_code?: string
+  show_id: string
+  tickets: SchemaCreateTicket[]
+}
+
+export interface SchemaCreateTicket {
+  seat: string
+  type: string
+}
+
 export interface SchemaCreateUser {
   /** @maxLength 150 */
   email: string
@@ -110,7 +122,6 @@ export interface SchemaMovie {
   rating_code: string
   /** @maxLength 255 */
   reviews: string
-  /** @maxLength 255 */
   show_time: string
   /** @maxLength 255 */
   synopsis: string
@@ -130,14 +141,21 @@ export interface SchemaMovieListResponse {
 }
 
 export interface SchemaOrder {
-  /** @maxLength 255 */
-  card: string
+  booking_fee_price: number
+  card_id: string
+  check_out: boolean
+  created_at: string
   id: string
   /** @maxLength 255 */
-  promotion: string
-  show: SchemaShow
-  /** @maxLength 255 */
-  tickets_array: string
+  movie_title: string
+  promotion_id: string
+  promotion_price: number
+  sales_tax_price: number
+  show_id: string
+  ticket_price: number
+  tickets: SchemaTicket[]
+  total_price: number
+  user_id: string
 }
 
 export interface SchemaOrderListResponse {
@@ -200,24 +218,29 @@ export interface SchemaShow {
   /** @maxLength 255 */
   end_time: string
   id: string
-  movie: SchemaMovie
+  movie_id: string
   /** @max 255 */
   senior_ticket_price: number
   /** @maxLength 255 */
   start_time: string
   /** @maxLength 1023 */
   theater_location: string
-  /** @maxLength 1023 */
-  ticket_type: string
+}
+
+export interface SchemaShowListResponse {
+  count?: number
+  data?: SchemaShow[]
+  limit?: number
+  offset?: number
 }
 
 export interface SchemaTicket {
   id?: string
-  price?: number
-  seat?: string
-  show?: string
-  title?: string
-  type?: string
+  order_id: string
+  price: number
+  seat: string
+  show_id: string
+  type: string
 }
 
 export interface SchemaTokenResponse {
@@ -294,16 +317,6 @@ export interface SchemaUpsertMovie {
   trailer_video: string
 }
 
-export interface SchemaUpsertOrder {
-  /** @maxLength 255 */
-  card: string
-  /** @maxLength 255 */
-  promotion: string
-  show: SchemaShow
-  /** @maxLength 255 */
-  tickets_array: string
-}
-
 export interface SchemaUpsertPromotion {
   /** @maxLength 255 */
   code: string
@@ -319,23 +332,13 @@ export interface SchemaUpsertShow {
   child_ticket_price: number
   /** @maxLength 255 */
   end_time: string
-  movie: SchemaMovie
+  movie_id: string
   /** @max 255 */
   senior_ticket_price: number
   /** @maxLength 255 */
   start_time: string
   /** @maxLength 1023 */
   theater_location: string
-  /** @maxLength 1023 */
-  ticket_type: string
-}
-
-export interface SchemaUpsertTicket {
-  price?: number
-  seat?: string
-  show?: string
-  title?: string
-  type?: string
 }
 
 export interface SchemaUser {
@@ -658,168 +661,6 @@ export class HttpClient<SecurityDataType = unknown> {
 export class Api<
   SecurityDataType extends unknown
 > extends HttpClient<SecurityDataType> {
-  order = {
-    /**
-     * @description Create a new order.
-     *
-     * @tags Order
-     * @name V1OrdersCreate
-     * @summary create a new order
-     * @request POST:/api/v1/Orders
-     * @secure
-     */
-    v1OrdersCreate: (Order: SchemaUpsertOrder, params: RequestParams = {}) =>
-      this.request<SchemaOrder, SchemaErrorResponse>({
-        path: `/api/v1/Orders`,
-        method: 'POST',
-        body: Order,
-        secure: true,
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      }),
-
-    /**
-     * @description a order.
-     *
-     * @tags Order
-     * @name V1OrdersDetail
-     * @summary get a order
-     * @request GET:/api/v1/Orders/{id}
-     */
-    v1OrdersDetail: (id: string, params: RequestParams = {}) =>
-      this.request<SchemaOrder, SchemaErrorResponse>({
-        path: `/api/v1/Orders/${id}`,
-        method: 'GET',
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      }),
-
-    /**
-     * @description update Order
-     *
-     * @tags Order
-     * @name V1OrdersUpdate
-     * @summary update a Order
-     * @request PUT:/api/v1/Orders/{id}
-     * @secure
-     */
-    v1OrdersUpdate: (
-      id: string,
-      updateOrder: SchemaUpsertOrder,
-      params: RequestParams = {}
-    ) =>
-      this.request<SchemaOrder, SchemaErrorResponse>({
-        path: `/api/v1/Orders/${id}`,
-        method: 'PUT',
-        body: updateOrder,
-        secure: true,
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      }),
-
-    /**
-     * @description delete Order
-     *
-     * @tags Order
-     * @name V1OrdersDelete
-     * @summary delete a Order
-     * @request DELETE:/api/v1/Orders/{id}
-     * @secure
-     */
-    v1OrdersDelete: (id: string, params: RequestParams = {}) =>
-      this.request<object, SchemaErrorResponse>({
-        path: `/api/v1/Orders/${id}`,
-        method: 'DELETE',
-        secure: true,
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      })
-  }
-  show = {
-    /**
-     * @description Create a new show.
-     *
-     * @tags Show
-     * @name V1ShowsCreate
-     * @summary create a new show
-     * @request POST:/api/v1/Shows
-     * @secure
-     */
-    v1ShowsCreate: (Show: SchemaUpsertShow, params: RequestParams = {}) =>
-      this.request<SchemaShow, SchemaErrorResponse>({
-        path: `/api/v1/Shows`,
-        method: 'POST',
-        body: Show,
-        secure: true,
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      }),
-
-    /**
-     * @description a show.
-     *
-     * @tags Show
-     * @name V1ShowsDetail
-     * @summary get a show
-     * @request GET:/api/v1/Shows/{id}
-     */
-    v1ShowsDetail: (id: string, params: RequestParams = {}) =>
-      this.request<SchemaShow, SchemaErrorResponse>({
-        path: `/api/v1/Shows/${id}`,
-        method: 'GET',
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      }),
-
-    /**
-     * @description update Show
-     *
-     * @tags Show
-     * @name V1ShowsUpdate
-     * @summary update a Show
-     * @request PUT:/api/v1/Shows/{id}
-     * @secure
-     */
-    v1ShowsUpdate: (
-      id: string,
-      updateShow: SchemaUpsertShow,
-      params: RequestParams = {}
-    ) =>
-      this.request<SchemaShow, SchemaErrorResponse>({
-        path: `/api/v1/Shows/${id}`,
-        method: 'PUT',
-        body: updateShow,
-        secure: true,
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      }),
-
-    /**
-     * @description delete Show
-     *
-     * @tags Show
-     * @name V1ShowsDelete
-     * @summary delete a Show
-     * @request DELETE:/api/v1/Shows/{id}
-     * @secure
-     */
-    v1ShowsDelete: (id: string, params: RequestParams = {}) =>
-      this.request<object, SchemaErrorResponse>({
-        path: `/api/v1/Shows/${id}`,
-        method: 'DELETE',
-        secure: true,
-        type: ContentType.Json,
-        format: 'json',
-        ...params
-      })
-  }
   admin = {
     /**
      * @description Get all promotions.
@@ -1328,23 +1169,40 @@ export class Api<
         type: ContentType.Json,
         format: 'json',
         ...params
+      }),
+
+    /**
+     * @description shows of a movie.
+     *
+     * @tags Movie
+     * @name V1MoviesShowsDetail
+     * @summary get shows of a movie
+     * @request GET:/api/v1/movies/{id}/shows
+     */
+    v1MoviesShowsDetail: (id: string, params: RequestParams = {}) =>
+      this.request<SchemaShowListResponse, SchemaErrorResponse>({
+        path: `/api/v1/movies/${id}/shows`,
+        method: 'GET',
+        type: ContentType.Json,
+        format: 'json',
+        ...params
       })
   }
-  ticket = {
+  order = {
     /**
-     * @description Create a new ticket.
+     * @description Create a new order.
      *
-     * @tags Ticket
-     * @name V1TicketsCreate
-     * @summary create a new ticket
-     * @request POST:/api/v1/tickets
+     * @tags Order
+     * @name V1OrdersCreate
+     * @summary create a new order
+     * @request POST:/api/v1/orders
      * @secure
      */
-    v1TicketsCreate: (ticket: SchemaUpsertTicket, params: RequestParams = {}) =>
-      this.request<SchemaTicket, SchemaErrorResponse>({
-        path: `/api/v1/tickets`,
+    v1OrdersCreate: (Order: SchemaCreateOrder, params: RequestParams = {}) =>
+      this.request<SchemaOrder, SchemaErrorResponse>({
+        path: `/api/v1/orders`,
         method: 'POST',
-        body: ticket,
+        body: Order,
         secure: true,
         type: ContentType.Json,
         format: 'json',
@@ -1352,17 +1210,17 @@ export class Api<
       }),
 
     /**
-     * @description Retrieve a ticket by ID.
+     * @description a order.
      *
-     * @tags Ticket
-     * @name V1TicketsDetail
-     * @summary retrieve a ticket by ID
-     * @request GET:/api/v1/tickets/{id}
+     * @tags Order
+     * @name V1OrdersDetail
+     * @summary get a order
+     * @request GET:/api/v1/orders/{id}
      * @secure
      */
-    v1TicketsDetail: (id: string, params: RequestParams = {}) =>
-      this.request<SchemaTicket, SchemaErrorResponse>({
-        path: `/api/v1/tickets/${id}`,
+    v1OrdersDetail: (id: string, params: RequestParams = {}) =>
+      this.request<SchemaOrder, SchemaErrorResponse>({
+        path: `/api/v1/orders/${id}`,
         method: 'GET',
         secure: true,
         type: ContentType.Json,
@@ -1371,23 +1229,124 @@ export class Api<
       }),
 
     /**
-     * @description Update a ticket.
+     * @description Checkout a order.
      *
-     * @tags Ticket
-     * @name V1TicketsUpdate
-     * @summary update a ticket
-     * @request PUT:/api/v1/tickets/{id}
+     * @tags Order
+     * @name V1OrdersCheckoutCreate
+     * @summary checkout a order
+     * @request POST:/api/v1/orders/{id}/checkout
      * @secure
      */
-    v1TicketsUpdate: (
+    v1OrdersCheckoutCreate: (
       id: string,
-      ticket: SchemaUpsertTicket,
+      Card: SchemaUpdateCard,
       params: RequestParams = {}
     ) =>
+      this.request<SchemaOrder, SchemaErrorResponse>({
+        path: `/api/v1/orders/${id}/checkout`,
+        method: 'POST',
+        body: Card,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      })
+  }
+  show = {
+    /**
+     * @description Create a new show.
+     *
+     * @tags Show
+     * @name V1ShowsCreate
+     * @summary create a new show
+     * @request POST:/api/v1/shows
+     * @secure
+     */
+    v1ShowsCreate: (Show: SchemaUpsertShow, params: RequestParams = {}) =>
+      this.request<SchemaShow, SchemaErrorResponse>({
+        path: `/api/v1/shows`,
+        method: 'POST',
+        body: Show,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description a show.
+     *
+     * @tags Show
+     * @name V1ShowsDetail
+     * @summary get a show
+     * @request GET:/api/v1/shows/{id}
+     */
+    v1ShowsDetail: (id: string, params: RequestParams = {}) =>
+      this.request<SchemaShow, SchemaErrorResponse>({
+        path: `/api/v1/shows/${id}`,
+        method: 'GET',
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description update show
+     *
+     * @tags Show
+     * @name V1ShowsUpdate
+     * @summary update a show
+     * @request PUT:/api/v1/shows/{id}
+     * @secure
+     */
+    v1ShowsUpdate: (
+      id: string,
+      updateShow: SchemaUpsertShow,
+      params: RequestParams = {}
+    ) =>
+      this.request<SchemaShow, SchemaErrorResponse>({
+        path: `/api/v1/shows/${id}`,
+        method: 'PUT',
+        body: updateShow,
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      }),
+
+    /**
+     * @description delete show
+     *
+     * @tags Show
+     * @name V1ShowsDelete
+     * @summary delete a show
+     * @request DELETE:/api/v1/shows/{id}
+     * @secure
+     */
+    v1ShowsDelete: (id: string, params: RequestParams = {}) =>
+      this.request<object, SchemaErrorResponse>({
+        path: `/api/v1/shows/${id}`,
+        method: 'DELETE',
+        secure: true,
+        type: ContentType.Json,
+        format: 'json',
+        ...params
+      })
+  }
+  ticket = {
+    /**
+     * @description Retrieve a ticket by ID.
+     *
+     * @tags Ticket
+     * @name V1TicketsDetail
+     * @summary retrieve a ticket by ID
+     * @request GET:/api/v1/tickets/{id}
+     * @secure
+     */
+    v1TicketsDetail: (id: string, params: RequestParams = {}) =>
       this.request<SchemaTicket, SchemaErrorResponse>({
         path: `/api/v1/tickets/${id}`,
-        method: 'PUT',
-        body: ticket,
+        method: 'GET',
         secure: true,
         type: ContentType.Json,
         format: 'json',
@@ -1435,18 +1394,27 @@ export class Api<
       }),
 
     /**
-     * @description a user's orders.
+     * @description get all orders history from the current user.
      *
      * @tags User
-     * @name V1UsersOrdersList
-     * @summary get a user's orders
-     * @request GET:/api/v1/users/orders
+     * @name V1UsersMeOrdersList
+     * @summary get all orders history
+     * @request GET:/api/v1/users/me/orders
      * @secure
      */
-    v1UsersOrdersList: (params: RequestParams = {}) =>
+    v1UsersMeOrdersList: (
+      query?: {
+        /** offset */
+        offset?: number
+        /** limit */
+        limit?: number
+      },
+      params: RequestParams = {}
+    ) =>
       this.request<SchemaOrderListResponse, SchemaErrorResponse>({
-        path: `/api/v1/users/orders`,
+        path: `/api/v1/users/me/orders`,
         method: 'GET',
+        query: query,
         secure: true,
         type: ContentType.Json,
         format: 'json',
diff --git a/src/pages/OrderHistory/index.tsx b/src/pages/OrderHistory/index.tsx
index 16e13bf..3ed6cba 100644
--- a/src/pages/OrderHistory/index.tsx
+++ b/src/pages/OrderHistory/index.tsx
@@ -1,48 +1,56 @@
 import styles from './style.module.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
+import { useRequest } from 'ahooks'
+import type { SchemaOrder } from 'client'
 import PageContainer from 'components/PageContainer'
 import { Card, Table } from 'react-bootstrap'
+import Backend from 'utils/service'
 
 const OrderRow: React.FC<{
   key: string
-}> = (
-  { key } // TODO: add refresh back
-) => (
+  order: SchemaOrder
+}> = ({ key, order }) => (
   <tr className='align-middle' key={key}>
-    <td className={styles.hideOverflow}>(Some movie)</td>
-    <td className={styles.hideOverflow}>(01-01-2024)</td>
-    <td className={styles.hideOverflow}>(Some seats)</td>
-    <td className={styles.hideOverflow}>(Some tickets)</td>
-    <td className={styles.hideOverflow}>(A promo used)</td>
-    <td className={styles.hideOverflow}>(The card used)</td>
-    <td className='text-end'>end</td>
+    <td className={styles.hideOverflow}>{order.movie_title}</td>
+    <td className={styles.hideOverflow}>{order.created_at}</td>
+    <td className={styles.hideOverflow}>{order.ticket_price}</td>
+    <td className={styles.hideOverflow}>{order.booking_fee_price}</td>
+    <td className={styles.hideOverflow}>{order.promotion_price}</td>
+    <td className={styles.hideOverflow}>{order.sales_tax_price}</td>
+    <td className={styles.hideOverflow}>{order.total_price}</td>
   </tr>
 )
 
 const Index: React.FC = () => {
-  const key = 'order-row' // TODO: add key, setKey back
+  const { data, loading } = useRequest(async () =>
+    Backend.user.v1UsersMeOrdersList()
+  )
   return (
     <PageContainer>
       <Card>
         <Card.Header>
           <div className='d-flex justify-content-between align-items-center'>
-            <h2>Your Order History</h2>
+            <b>Order history</b>
           </div>
         </Card.Header>
         <Card.Body>
           <Table hover>
             <thead>
               <tr>
-                <th>MOVIE</th>
-                <th>DATE</th>
-                <th>SEATS</th>
-                <th>TICKETS</th>
-                <th>PROMOTION USED</th>
-                <th>CARD USED</th>
+                <th>Movie</th>
+                <th>Created At</th>
+                <th>Ticket Price</th>
+                <th>Booking Fee Price</th>
+                <th>Promotion Price</th>
+                <th>Sales Tax Price</th>
+                <th>Total Price</th>
               </tr>
             </thead>
             <tbody>
-              <OrderRow key={key} />
+              {loading
+                ? null
+                : data?.data.data?.map(order => (
+                    <OrderRow key={order.id} order={order} />
+                  ))}
             </tbody>
           </Table>
         </Card.Body>
diff --git a/src/pages/PromoManage/index.tsx b/src/pages/PromoManage/index.tsx
index 8dad86b..e2bd3bb 100644
--- a/src/pages/PromoManage/index.tsx
+++ b/src/pages/PromoManage/index.tsx
@@ -1,6 +1,5 @@
 import styles from './style.module.css'
 import { useRequest } from 'ahooks'
-import 'bootstrap/dist/css/bootstrap.min.css'
 import type { SchemaPromotion } from 'client'
 import PageContainer from 'components/PageContainer'
 import { useState } from 'react'