Jeff

package.json

@@ -20,12 +20,24 @@
     "e2e": "playwright test"
   },
   "dependencies": {
-    "electron-updater": "^6.1.8"
+    "@emotion/styled": "^11.11.5",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "^5.15.19",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+    "@mui/x-charts": "^7.6.1",
+    "@mui/x-tree-view": "^7.6.1",
+    "axios": "^1.7.2",
+    "electron-updater": "^6.1.8",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.23.1",
+    "styled-components": "^6.1.11",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.18",
     "electron": "^29.1.1",

src/App.css

@@ -1,52 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo-box {
-  position: relative;
-  height: 9em;
-}
-
-.logo {
-  position: absolute;
-  left: calc(50% - 4.5em);
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .logo.electron {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

src/App.tsx

@@ -1,38 +1,12 @@
-import { useState } from 'react'
-import UpdateElectron from '@/components/update'
-import logoVite from './assets/logo-vite.svg'
-import logoElectron from './assets/logo-electron.svg'
-import './App.css'
+import React from "react";
+import { Outlet } from "react-router-dom";
 
-function App() {
-  const [count, setCount] = useState(0)
+const App: React.FC = () => {
   return (
-    <div className='App'>
-      <div className='logo-box'>
-        <a href='https://github.com/electron-vite/electron-vite-react' target='_blank'>
-          <img src={logoVite} className='logo vite' alt='Electron + Vite logo' />
-          <img src={logoElectron} className='logo electron' alt='Electron + Vite logo' />
-        </a>
-      </div>
-      <h1>Electron + Vite + React</h1>
-      <div className='card'>
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className='read-the-docs'>
-        Click on the Electron + Vite logo to learn more
-      </p>
-      <div className='flex-center'>
-        Place static files into the<code>/public</code> folder <img style={{ width: '5em' }} src='./node.svg' alt='Node logo' />
-      </div>
-
-      <UpdateElectron />
+    <div>
+      <Outlet />
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/AuthProvider.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+interface AuthContextType {
+  token: string | null;
+  setToken: (token: string | null) => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [token, setToken] = useState<string | null>(null);
+
+  return (
+    <AuthContext.Provider value={{ token, setToken }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

src/api/getMenus.ts

@@ -0,0 +1,19 @@
+export const fetchMenus = async (token: string) => {
+    const response = await fetch('http://180.191.51.65:9130/api/menus', {
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      }
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      console.error('API Error Response:', errorData);
+      throw new Error(`Error: ${response.statusText} - ${errorData.message}`);
+    }
+
+    const data = await response.json();
+    return data.payload;
+  };
+
+

src/api/userLogin.ts

@@ -0,0 +1,25 @@
+// loginUser.ts
+export interface LoginResponse {
+  code: number;
+  status: string;
+  payload: {
+    BearerToken: string;
+  };
+}
+
+export const loginUser = async (credentials: { usrcde: string; usrpwd: string; }): Promise<LoginResponse> => {
+  const response = await fetch("http://180.191.51.65:9130/api/user-ess/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(credentials),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Network response was not ok: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data;
+};

src/assets/SidebarData.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import StarBorder from "@mui/icons-material/StarBorder";
+import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+import PaymentIcon from "@mui/icons-material/Payment";
+import ReportIcon from "@mui/icons-material/Report";
+
+interface SidebarItem {
+  id: number;
+  label: string;
+  icon: React.ReactNode;
+  items?: SidebarItem[];
+}
+
+export const sidebarData: SidebarItem[] = [
+  {
+    id: 1,
+    label: "Dashboard",
+    icon: <DashboardIcon />,
+    items: [
+      { id: 11, label: "Overview", icon: <StarBorder /> },
+      { id: 12, label: "Stats", icon: <StarBorder /> },
+      { id: 13, label: "Reports", icon: <StarBorder /> },
+    ],
+  },
+  {
+    id: 2,
+    label: "Employees",
+    icon: <EmojiPeopleIcon />,
+    items: [
+      { id: 21, label: "All Employees", icon: <StarBorder /> },
+      { id: 22, label: "Add Employee", icon: <StarBorder /> },
+      { id: 23, label: "Manage Employees", icon: <StarBorder /> },
+    ],
+  },
+  {
+    id: 3,
+    label: "Payroll",
+    icon: <PaymentIcon />,
+    items: [
+      { id: 31, label: "Monthly Payroll", icon: <StarBorder /> },
+      { id: 32, label: "Annual Payroll", icon: <StarBorder /> },
+      { id: 33, label: "Payroll Settings", icon: <StarBorder /> },
+    ],
+  },
+  {
+    id: 4,
+    label: "Reports",
+    icon: <ReportIcon />,
+    items: [
+      { id: 41, label: "Payroll Reports", icon: <StarBorder /> },
+      { id: 42, label: "Employee Reports", icon: <StarBorder /> },
+      { id: 43, label: "Tax Reports", icon: <StarBorder /> },
+    ],
+  },
+];

src/axiosConfig.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+    baseURL: 'http://180.191.51.65:9130/api', 
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+export default axiosInstance;

src/components/Chart.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { useTheme } from "@mui/material/styles";
+import { LineChart, axisClasses } from "@mui/x-charts";
+import { ChartsTextStyle } from "@mui/x-charts/ChartsText";
+import Title from "./Title";
+
+// Generate Sales Data
+function createData(
+  time: string,
+  amount?: number
+): { time: string; amount: number | null } {
+  return { time, amount: amount ?? null };
+}
+
+const data = [
+  createData("00:00", 0),
+  createData("03:00", 300),
+  createData("06:00", 600),
+  createData("09:00", 800),
+  createData("12:00", 1500),
+  createData("15:00", 2000),
+  createData("18:00", 2400),
+  createData("21:00", 2400),
+  createData("24:00"),
+];
+
+export default function Chart() {
+  const theme = useTheme();
+
+  return (
+    <React.Fragment>
+      <Title>Today</Title>
+      <div style={{ width: "100%", flexGrow: 1, overflow: "hidden" }}>
+        <LineChart
+          dataset={data}
+          margin={{
+            top: 16,
+            right: 20,
+            left: 70,
+            bottom: 30,
+          }}
+          xAxis={[
+            {
+              scaleType: "point",
+              dataKey: "time",
+              tickNumber: 2,
+              tickLabelStyle: theme.typography.body2 as ChartsTextStyle,
+            },
+          ]}
+          yAxis={[
+            {
+              label: "Sales ($)",
+              labelStyle: {
+                ...(theme.typography.body1 as ChartsTextStyle),
+                fill: theme.palette.text.primary,
+              },
+              tickLabelStyle: theme.typography.body2 as ChartsTextStyle,
+              max: 2500,
+              tickNumber: 3,
+            },
+          ]}
+          series={[
+            {
+              dataKey: "amount",
+              showMark: false,
+              color: theme.palette.primary.light,
+            },
+          ]}
+          sx={{
+            [`.${axisClasses.root} line`]: {
+              stroke: theme.palette.text.secondary,
+            },
+            [`.${axisClasses.root} text`]: {
+              fill: theme.palette.text.secondary,
+            },
+            [`& .${axisClasses.left} .${axisClasses.label}`]: {
+              transform: "translateX(-25px)",
+            },
+          }}
+        />
+      </div>
+    </React.Fragment>
+  );
+}

src/components/Deposits.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import Title from "@/components/Title";
+
+function preventDefault(event: React.MouseEvent) {
+  event.preventDefault();
+}
+
+export default function Deposits() {
+  return (
+    <React.Fragment>
+      <Title>Recent Deposits</Title>
+      <Typography component="p" variant="h4">
+        $3,024.00
+      </Typography>
+      <Typography color="text.secondary" sx={{ flex: 1 }}>
+        on 15 March, 2019
+      </Typography>
+      <div>
+        <Link color="primary" href="#" onClick={preventDefault}>
+          View balance
+        </Link>
+      </div>
+    </React.Fragment>
+  );
+}