Bijoy1

client/src/App.js

@@ -1,46 +1,47 @@
-import React,{useMemo} from 'react'
-import { CssBaseline,ThemeProvider } from '@mui/material'
-import { createTheme } from '@mui/material/styles'
-import { useSelector } from 'react-redux'
-import { themeSettings } from 'themes'
-import { BrowserRouter as Router,Routes,Route,Navigate } from 'react-router-dom'
-import Layout from 'scenes/layout'
-import Dashboard from 'scenes/dashboard'
-import Products from 'scenes/products'
-import Customers from 'scenes/customers'
-import Transactions from 'scenes/transactions'
-import Geography from 'scenes/geography'
-import Overview from 'scenes/overview'
-import Daily from 'scenes/daily'
-import Monthly from 'scenes/monthly'
-import Breakdown from 'scenes/breakdown'
-import Admins from 'scenes/admins'
-import Performance from 'scenes/performance'
+import React, { useMemo } from "react";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { createTheme } from "@mui/material/styles";
+import { useSelector } from "react-redux";
+import { themeSettings } from "themes";
+import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import Layout from "scenes/layout";
+import Dashboard from "scenes/dashboard";
+import Products from "scenes/products";
+import Customers from "scenes/customers";
+import Transactions from "scenes/transactions";
+import Geography from "scenes/geography";
+import Overview from "scenes/overview";
+import Daily from "scenes/daily";
+import Monthly from "scenes/monthly";
+import Breakdown from "scenes/breakdown";
+import Admins from "scenes/admins";
+import Performance from "scenes/performance";
+import TrayImageUploader from "scenes/trayImageUploader"; // Import the Tray Image Uploader component
 
 function App() {
-
-  const mode = useSelector((state) => state.global.mode)
-  const theme = useMemo(() => createTheme(themeSettings(mode)),[mode])
+  const mode = useSelector((state) => state.global.mode);
+  const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
 
   return (
     <div className="app">
       <Router>
         <ThemeProvider theme={theme}>
-          <CssBaseline/>
+          <CssBaseline />
           <Routes>
-            <Route element={<Layout/>}>
-              <Route path="/" element={<Navigate to="/dashboard"/>} replace/>
-              <Route path="/dashboard" element={<Dashboard/>}/>
-              <Route path="/products" element={<Products/>}/>
-              <Route path="/customers" element={<Customers/>}/>
-              <Route path="/transactions" element={<Transactions/>}/>
-              <Route path="/geography" element={<Geography/>}/> 
-              <Route path="/overview" element={<Overview/>}/>
-              <Route path="/daily" element={<Daily/>}/>
-              <Route path="/monthly" element={<Monthly/>}/>
-              <Route path="/breakdown" element={<Breakdown/>}/>
-              <Route path="/admin" element={<Admins/>}/>
-              <Route path="/performance" element={<Performance/>}/>
+            <Route element={<Layout />}>
+              <Route path="/" element={<Navigate to="/dashboard" />} replace />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/products" element={<Products />} />
+              <Route path="/customers" element={<Customers />} />
+              <Route path="/transactions" element={<Transactions />} />
+              <Route path="/geography" element={<Geography />} />
+              <Route path="/overview" element={<Overview />} />
+              <Route path="/daily" element={<Daily />} />
+              <Route path="/monthly" element={<Monthly />} />
+              <Route path="/breakdown" element={<Breakdown />} />
+              <Route path="/admin" element={<Admins />} />
+              <Route path="/performance" element={<Performance />} />
+              <Route path="/tray-image-uploader" element={<TrayImageUploader />} /> {/* Add Tray Image Uploader route */}
             </Route>
           </Routes>
         </ThemeProvider>

client/src/components/Navbar.jsx

@@ -3,7 +3,7 @@ import { LightModeOutlined,DarkModeOutlined,Menu as MenuIcon,Search,SettingsOutl
 import FlexBetween from 'components/FlexBetween'
 import { useDispatch } from 'react-redux'
 import { setMode } from 'state'
-import ProfileImage from 'assets/profile.jpeg'
+import ProfileImage from 'assets/images.png'
 import { AppBar,Toolbar,useTheme,InputBase,IconButton,Button,Box,Typography,Menu,MenuItem } from '@mui/material'
 
 const Navbar = ({

client/src/components/Sidebar.jsx

@@ -31,15 +31,23 @@ import {
 } from '@mui/icons-material'
 import { useLocation,useNavigate } from 'react-router-dom'
 import FlexBetween from './FlexBetween'
-import ProfileImage from 'assets/profile.jpeg'
+import ProfileImage from 'assets/images.png'
 
 const navItems =[
     {
         text:"Dashboard",
         icon:<HomeOutlined/>
     },
     {
-        text:"Client Facing",
+        text:"Flight List",
+        icon:<ReceiptLongOutlined/>
+    },
+    {
+        text:"Data Analysis",
+        icon:<PointOfSaleOutlined/>
+    },
+    {
+        text:"Extra",
         icon:null
     },
     {
@@ -50,22 +58,11 @@ const navItems =[
         text:"Customers",
         icon:<Groups2Outlined/>
     },
-    {
-        text:"Transactions",
-        icon:<ReceiptLongOutlined/>
-    },
+
     {
         text:"Geography",
         icon:<PublicOutlined/>
     },
-    {
-        text:"Sales",
-        icon:null
-    },
-    {
-        text:"Overview",
-        icon:<PointOfSaleOutlined/>
-    },
     {
         text:"Daily",
         icon:<TodayOutlined/>
@@ -78,10 +75,6 @@ const navItems =[
         text:"Breakdown",
         icon:<PieChartOutlined/>
     },
-    {
-        text:"Management",
-        icon:null
-    },
     {
         text:"Admin",
         icon:<AdminPanelSettingsOutlined/>
@@ -133,7 +126,7 @@ const Sidebar = ({
                     <FlexBetween color={theme.palette.secondary.main}>
                         <Box display="flex" alignItems="center" gap="0.5rem">
                             <Typography variant="h4" fontWeight="bold">
-                                ECOMVISION
+                                CathAI
                             </Typography>
                         </Box>
                         {!isNonMobile && (
@@ -154,7 +147,7 @@ const Sidebar = ({
                                     </Typography>
                                 )
                             }
-                            const lcText= text.toLowerCase()
+                            const lcText = text === "Flight List" ? "transactions" : text === "Data Analysis" ? "overview" : text.toLowerCase();
 
                             return (
                                 <ListItem key={text} disablePadding>
@@ -204,10 +197,10 @@ const Sidebar = ({
                         sx={{ objectFit:"cover" }}
                     />
                     <Box textAlign="left">
-                        <Typography fontWeight="bold" fontSize="0.9rem" sx={{ color: theme.palette.secondary[100] }}>{user.name}</Typography>
-                        <Typography fontWeight="bold" fontSize="0.8rem" sx={{ color: theme.palette.secondary[200] }}>{user.occupation}</Typography>
+                        <Typography fontWeight="bold" fontSize="0.9rem" sx={{ color: theme.palette.secondary[100] }}> Mr Chan </Typography>
+                        <Typography fontWeight="bold" fontSize="0.8rem" sx={{ color: theme.palette.secondary[200] }}> VP of Analytics </Typography>
                     </Box>
-                    <SettingsOutlined sx={{ color: theme.palette.secondary[300], fontSize:"25px" }}/>
+                    <SettingsOutlined sx={{ color: theme.palette.secondary[300], fontSize:"25px" }}/> 
                 </FlexBetween>
             </Box>            
         </Drawer>

client/src/scenes/trayImageUploader/index.js

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { Box, Typography, Button, TextField, useTheme } from "@mui/material";
+import { tokensDark } from "themes"; // Use tokensDark or tokensLight, depending on your theme setup
+
+const TrayImageUploader = () => {
+  const theme = useTheme();
+  const colors = tokensDark; // Adjust based on your desired theme
+
+  const [images, setImages] = useState([]);
+  const [flightNumber, setFlightNumber] = useState("");
+  const [flightDate, setFlightDate] = useState("");
+  const [message, setMessage] = useState(""); // Message to display after submission
+
+  // Handle image selection
+  const handleImageUpload = (event) => {
+    const uploadedImages = Array.from(event.target.files);
+    setImages(uploadedImages);
+  };
+
+  // Simulate a successful submission
+  const handleSubmit = () => {
+    setMessage("Images uploaded successfully! (Simulated response)");
+    setTimeout(() => setMessage(""), 3000); // Clear message after 3 seconds
+  };
+
+  return (
+    <Box m="20px">
+      <Typography variant="h4" color={colors.primary[500]}>
+        New Report
+      </Typography>
+      <Typography variant="body1" color={colors.grey[600]} mt={2}>
+        Upload tray images for analysis. We will analyze the food waste and meal performance based on the image.
+      </Typography>
+
+      {/* Image Upload Input */}
+      <Box
+        mt={4}
+        p={2}
+        border="2px dashed"
+        borderColor={colors.grey[500]}
+        borderRadius="8px"
+        textAlign="center"
+        component="label"
+        htmlFor="image-upload"
+      >
+        <Typography>Drag and drop image here</Typography>
+        <Typography>or browse files</Typography>
+        <input
+          type="file"
+          id="image-upload"
+          accept="image/*"
+          multiple
+          style={{ display: "none" }}
+          onChange={handleImageUpload}
+        />
+      </Box>
+
+      {/* Image Preview */}
+      <Box display="flex" justifyContent="center" mt={4}>
+        {images.length > 0 && images.map((image, index) => (
+          <Box key={index} mx={1}>
+            <img
+              src={URL.createObjectURL(image)}
+              alt={`Preview ${index}`}
+              width="150px"
+              height="150px"
+              style={{ objectFit: "cover" }}
+            />
+          </Box>
+        ))}
+      </Box>
+
+      {/* Flight Information Inputs */}
+      <Box display="flex" justifyContent="space-between" mt={4}>
+        <TextField
+          label="Associated Flight Number"
+          value={flightNumber}
+          onChange={(e) => setFlightNumber(e.target.value)}
+          variant="outlined"
+          fullWidth
+          margin="normal"
+        />
+        <TextField
+          label="Date of the Flight"
+          type="date"
+          value={flightDate}
+          onChange={(e) => setFlightDate(e.target.value)}
+          variant="outlined"
+          fullWidth
+          margin="normal"
+          InputLabelProps={{ shrink: true }}
+        />
+      </Box>
+
+      {/* Submit Button */}
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={handleSubmit}
+        sx={{ mt: 3 }}
+      >
+        Submit
+      </Button>
+
+      {/* Display message after submission */}
+      {message && (
+        <Typography variant="h6" color={colors.greenAccent[500]} mt={2}>
+          {message}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export default TrayImageUploader;

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "cxserve",
+  "version": "1.0.0",
+  "description": "This project is a full-stack admin dashboard built using the following technologies:",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}