diff --git a/src/views/DashboardPMO/chartDashboard.js b/src/views/DashboardPMO/chartDashboard.js
new file mode 100644
index 0000000..74da1eb
--- /dev/null
+++ b/src/views/DashboardPMO/chartDashboard.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import { Doughnut, Bar } from 'react-chartjs-2';
+import faker from '@faker-js/faker';
+
+export const optionsDoughnut = {
+  title: {
+    display: true,
+    text: 'PROJECT BY TYPE'
+  },
+};
+
+export const data = {
+  labels: ['Manned guarding ', 'C&T', 'CMS ', 'ESS', 'RSO'],
+  datasets: [
+    {
+      label: '# of Votes',
+      data: [12, 19, 3, 5, 2],
+      backgroundColor: [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(255, 206, 86, 0.2)',
+        'rgba(75, 192, 192, 0.2)',
+        'rgba(153, 102, 255, 0.2)',
+        // 'rgba(255, 159, 64, 0.2)',
+      ],
+      borderColor: [
+        'rgba(255, 99, 132, 1)',
+        'rgba(54, 162, 235, 1)',
+        'rgba(255, 206, 86, 1)',
+        'rgba(75, 192, 192, 1)',
+        'rgba(153, 102, 255, 1)',
+        // 'rgba(255, 159, 64, 1)',
+      ],
+      borderWidth: 1,
+    },
+  ],
+};
+
+export const DoughnutChart = () => {
+  return <Doughnut data={data} options={optionsDoughnut} />;
+}
+
+
+export const options = {
+  title: {
+    display: true,
+    text: 'PROJECT BY GOVERNANCE PHASE'
+  },
+  legend: {
+    position: 'right',
+  },
+  responsive: true,
+  scales: {
+    yAxes: [{
+      display: true,
+
+      // position: 'right',
+      stacked: true,
+    }],
+    xAxes: [{
+      display: true,
+      // position: 'right',
+      stacked: true,
+    }],
+  },
+};
+
+const labels = [''];
+
+export const dataBar = {
+  labels,
+  datasets: [
+    {
+      indexAxis: 'y',
+      label: 'Initiation',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
+      backgroundColor: 'rgb(255, 99, 132)',
+    },
+    {
+      indexAxis: 'y',
+      label: 'Execution',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
+      backgroundColor: 'rgb(75, 192, 192)',
+    },
+    {
+      indexAxis: 'y',
+      label: 'Closing',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
+      backgroundColor: 'rgb(53, 162, 235)',
+    },
+    // {
+    //   indexAxis: 'y',
+    //   label: 'Excecution',
+    //   data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
+    //   backgroundColor: 'rgba(255, 159, 64, 1)',
+    // },
+  ],
+};
+
+export function BarChart() {
+  return <Bar indexAxis='y' options={options} data={dataBar} />;
+}
+
+
+
+
diff --git a/src/views/DashboardPMO/tableDashboard.js b/src/views/DashboardPMO/tableDashboard.js
new file mode 100644
index 0000000..64931d3
--- /dev/null
+++ b/src/views/DashboardPMO/tableDashboard.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import { Table, Tag, Space } from 'antd';
+
+const columns = [
+  {
+    title: 'Project Name',
+    dataIndex: 'project',
+    key: 'project',
+    fixed: 'left',
+    width: 200,
+    // render: text => <a>{text}</a>,
+  },
+  {
+    title: 'Project Owner',
+    dataIndex: 'owner',
+    key: 'owner',
+  },
+  {
+    title: 'Start Date',
+    dataIndex: 'startDate',
+    key: 'startDate',
+  },
+  {
+    title: 'End Date',
+    dataIndex: 'endDate',
+    key: 'endDate',
+  },
+  {
+    title: 'Cost',
+    dataIndex: 'cost',
+    key: 'cost',
+    render: text => `Rp. ${text.toLocaleString()}`,
+    align: 'right'
+  },
+  {
+    title: 'Cost Health',
+    dataIndex: 'costHealth',
+    key: 'costHealth',
+    render: text =>
+      text === 'good' ? <div className='health-status-good' /> :
+        text === 'danger' ? <div className='health-status-danger' /> :
+          text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />
+    ,
+    align: 'center',
+  },
+  {
+    title: 'Work Health',
+    dataIndex: 'workHealth',
+    key: 'workHealth',
+    render: text =>
+      text === 'good' ? <div className='health-status-good' /> :
+        text === 'danger' ? <div className='health-status-danger' /> :
+          text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />,
+    align: 'center',
+  },
+  {
+    title: 'Schedule Health',
+    dataIndex: 'scheduleHealth',
+    key: 'scheduleHealth',
+    render: text =>
+      text === 'good' ? <div className='health-status-good' /> :
+        text === 'danger' ? <div className='health-status-danger' /> :
+          text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />,
+    align: 'center',
+  },
+  {
+    title: '% Complete',
+    dataIndex: 'complete',
+    key: 'complete',
+    render: text => `${text}%`,
+    align: 'right'
+  },
+  // {
+  //   title: 'Action',
+  //   key: 'action',
+  //   render: (text, record) => (
+  //     <Space size="middle">
+  //       <a>Invite {record.name}</a>
+  //       <a>Delete</a>
+  //     </Space>
+  //   ),
+  // },
+];
+
+const data = [
+  {
+    key: '1',
+    project: 'Bay Plaza',
+    owner: 'John Brown',
+    startDate: '1/22/2022',
+    endDate: '1/22/2023',
+    complete: 20,
+    cost: 40000000,
+    costHealth: 'good',
+    workHealth: 'default',
+    scheduleHealth: 'warning'
+  },
+  {
+    key: '2',
+    project: 'Jambi Bridge',
+    owner: 'Jim Green',
+    startDate: '4/22/2022',
+    endDate: '11/22/2023',
+    complete: 65,
+    cost: 20000000,
+    costHealth: 'good',
+    workHealth: 'default',
+    scheduleHealth: 'danger'
+  },
+  {
+    key: '3',
+    project: 'Banten International Airport',
+    owner: 'Joe Black',
+    startDate: '1/22/2022',
+    endDate: '1/22/2025',
+    complete: 50,
+    cost: 200000000,
+    costHealth: 'default',
+    workHealth: 'default',
+    scheduleHealth: 'default'
+  },
+];
+
+const TableDashboard = () => {
+  return (
+    <Table size="small" columns={columns} dataSource={data} scroll={{ x: 1300, y: 300 }} />
+  );
+}
+
+export default TableDashboard;
\ No newline at end of file