diff --git a/package-lock.json b/package-lock.json
index 5d2dce0..f989b68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "pos-realtime-report",
       "version": "0.0.0",
       "dependencies": {
+        "ag-grid-community": "^31.3.2",
+        "ag-grid-enterprise": "^31.3.2",
+        "ag-grid-react": "^31.3.2",
         "antd": "^5.21.2",
         "axios": "^1.7.7",
         "crypto-js": "^4.2.0",
@@ -1823,6 +1826,38 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/ag-charts-community": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-9.3.2.tgz",
+      "integrity": "sha512-jw2llxTYzGAZ24m7eQsKS24BnJBhspZKsL03DbqH0wxLepbEcC3eeWICe+02TBQCbFVsWmSsYukjzQg3FkVWRw=="
+    },
+    "node_modules/ag-grid-community": {
+      "version": "31.3.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.4.tgz",
+      "integrity": "sha512-jOxQO86C6eLnk1GdP24HB6aqaouFzMWizgfUwNY5MnetiWzz9ZaAmOGSnW/XBvdjXvC5Fpk3gSbvVKKQ7h9kBw=="
+    },
+    "node_modules/ag-grid-enterprise": {
+      "version": "31.3.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-31.3.4.tgz",
+      "integrity": "sha512-kreGRsFjz41APXXchLcQFtginnrmIGQYH48p7ydz33x8v+aja06HS5yEM6NP8j+VVHX43LeXnsl5Y4TLRgSoeg==",
+      "dependencies": {
+        "ag-charts-community": "9.3.2",
+        "ag-grid-community": "31.3.4"
+      }
+    },
+    "node_modules/ag-grid-react": {
+      "version": "31.3.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.4.tgz",
+      "integrity": "sha512-WmPASHRFGSTxCMRStWG5bRtln0Ugsdqbb3+Y8sEyGHeLw4hXqfpqie3lT9kqCOl7wPWUjCpwmFdXzRnWPmyyeg==",
+      "dependencies": {
+        "ag-grid-community": "31.3.4",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3521,7 +3556,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3877,6 +3911,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
diff --git a/package.json b/package.json
index 0b9aeed..6922e35 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "antd": "^5.21.2",
+    "ag-grid-community": "^31.3.2",
+    "ag-grid-enterprise": "^31.3.2",
+    "ag-grid-react": "^31.3.2",
     "axios": "^1.7.7",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
diff --git a/src/apps/admin/index.tsx b/src/apps/admin/index.tsx
index 60363bd..56d2981 100644
--- a/src/apps/admin/index.tsx
+++ b/src/apps/admin/index.tsx
@@ -2,9 +2,9 @@ import axios from 'axios';
 import AdminLayout from './layout';
 import { API_URL, currencyFormatter } from '@pos/base';
 import { useEffect, useState } from 'react';
-import { Card, Col, DatePicker, notification, Row, Table, Typography } from 'antd';
+import { Card, Col, DatePicker, notification, Row, Table } from 'antd';
 import dayjs from 'dayjs';
-import lodash, { filter } from 'lodash';
+import lodash from 'lodash';
 import { v4 } from 'uuid';
 
 export default function Admin() {
diff --git a/src/apps/admin/layout/index.tsx b/src/apps/admin/layout/index.tsx
index 866b7b4..733fdc2 100644
--- a/src/apps/admin/layout/index.tsx
+++ b/src/apps/admin/layout/index.tsx
@@ -13,7 +13,7 @@ interface AdminLayoutProps {
 
 export default function AdminLayout(props: AdminLayoutProps) {
   const { children } = props;
-  const [loadingLogout, setLoadingLogout] = useState(false);
+  const [_loadingLogout, setLoadingLogout] = useState(false);
   const user = useRecoilValue(UserDataState);
   const initialName = getInitialName(user.name);