diff --git a/src/app/api/inventory/actions.ts b/src/app/api/inventory/actions.ts
index 860c4bb..d626720 100644
--- a/src/app/api/inventory/actions.ts
+++ b/src/app/api/inventory/actions.ts
@@ -10,6 +10,9 @@ import { RecordsRes } from "../utils";
 
 export interface LotLineInfo {
     inventoryLotLineId: number,
+    itemId: number,
+    itemNo: string,
+    itemName: string,
     lotNo: string,
     remainingQty: number,
     uom: string
diff --git a/src/app/api/pickOrder/actions.ts b/src/app/api/pickOrder/actions.ts
index 592df57..faf2ff5 100644
--- a/src/app/api/pickOrder/actions.ts
+++ b/src/app/api/pickOrder/actions.ts
@@ -91,7 +91,7 @@ export const consolidatePickOrder_revert = async (ids: number[]) => {
   export const releasePickOrder = async (data: ReleasePickOrderInputs) => {
     console.log(data)
     console.log(JSON.stringify(data))
-    const po = await serverFetchJson<any>(`${BASE_API_URL}/pickOrder/releaseConso`, {
+    const po = await serverFetchJson<{body: any, status: number}>(`${BASE_API_URL}/pickOrder/releaseConso`, {
       method: "POST",
       body: JSON.stringify(data),
       headers: { "Content-Type": "application/json" },
diff --git a/src/app/api/pickOrder/index.ts b/src/app/api/pickOrder/index.ts
index 285b606..5e97b74 100644
--- a/src/app/api/pickOrder/index.ts
+++ b/src/app/api/pickOrder/index.ts
@@ -2,6 +2,7 @@ import "server-only";
 import { Pageable, serverFetchJson } from "@/app/utils/fetchUtil";
 import { BASE_API_URL } from "@/config/api";
 import { cache } from "react";
+import { String } from "lodash";
 
 interface PickOrderItemInfo {
     name: string,
@@ -31,6 +32,19 @@ export interface PickOrderLine {
     uomCode: string,
     uomDesc: string
 }
+export interface StockOutLine {
+    id: number
+    itemId: number
+    itemName: string
+    itemNo: string
+    qty: number
+    stockOutId?: number
+    pickOrderLineId: number
+    lotNo?: string
+    inventoryLotLineId?: number
+    status: string
+    pickTime?: string
+}
 export interface ConsoPickOrderResult{
     id: number,
     code: string,
diff --git a/src/app/utils/formatUtil.ts b/src/app/utils/formatUtil.ts
index 7d2fb40..1272c67 100644
--- a/src/app/utils/formatUtil.ts
+++ b/src/app/utils/formatUtil.ts
@@ -67,6 +67,13 @@ export const stockInLineStatusMap: { [status: string]: number } = {
   "rejected": 9,
 };
 
+export const stockOutLineStatusMap: { [status: string]: number } = {
+  "draft": 0,
+  "pending": 1, // waiting for qc
+  // after qc = completed
+  "completed": 2,
+};
+
 export const pickOrderStatusMap: { [status: string]: number } = {
   "pending": 1,
   "consolidated": 2,
diff --git a/src/components/DashboardLineChart/DashboardLineChart.tsx b/src/components/DashboardLineChart/DashboardLineChart.tsx
new file mode 100644
index 0000000..425be25
--- /dev/null
+++ b/src/components/DashboardLineChart/DashboardLineChart.tsx
@@ -0,0 +1,18 @@
+"use client"
+// npm install 
+interface Props { // params type
+
+}
+
+const DashboardLineChart: React.FC<Props> = ({ 
+    // params
+ }) => {
+
+    return (
+        <>
+        line chart
+        </>
+    )
+}
+export default DashboardLineChart
+
diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
index 27820b5..dc50888 100644
--- a/src/components/DashboardPage/DashboardPage.tsx
+++ b/src/components/DashboardPage/DashboardPage.tsx
@@ -5,20 +5,41 @@ import theme from "../../theme";
 import { TabsProps } from "@mui/material/Tabs";
 import React, { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, Grid } from "@mui/material";
+import DashboardProgressChart from "../DashboardProgressChart/DashboardProgressChart";
+import DashboardLineChart from "../DashboardLineChart/DashboardLineChart";
 
-type Props = {
-  
-}
-const DashboardPage: React.FC<Props> = ({
-  
-}) => {
+type Props = {};
+
+const DashboardPage: React.FC<Props> = ({}) => {
   const { t } = useTranslation("dashboard");
   const router = useRouter();
 
   return (
     <ThemeProvider theme={theme}>
       <>
-
+        <Grid container>
+          <Grid item xs={12}>
+            <Card>
+              <CardHeader
+                title={t("Progress chart")}
+              />
+              <CardContent>
+                <DashboardProgressChart />
+              </CardContent>
+            </Card>
+          </Grid>
+          <Grid item xs={12}>
+            <Card>
+              <CardHeader  
+                title={t("Line chart")} 
+              />
+              <CardContent>
+                <DashboardLineChart />
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
       </>
     </ThemeProvider>
   );
diff --git a/src/components/DashboardProgressChart/DashboardProgressChart.tsx b/src/components/DashboardProgressChart/DashboardProgressChart.tsx
new file mode 100644
index 0000000..f5ec1a1
--- /dev/null
+++ b/src/components/DashboardProgressChart/DashboardProgressChart.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+interface Props { // params type
+
+}
+
+const DashboardProgressChart: React.FC<Props> = ({ 
+    // params
+ }) => {
+
+    return (
+        <>
+        progress chart
+        </>
+    )
+}
+export default DashboardProgressChart
+