[V0_FILE]javascript:file="client/src/common/LoadingSpinner.js" isQuickEdit="true" isMerged="true" import styled, { keyframes } from "styled-components" const rotate = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } ` const Spinner = styled.div` height: ${(props) => props.size || "35px"}; width: ${(props) => props.size || "35px"}; border-radius: 50%; /* Fallback gradient to prevent errors */ background: linear-gradient(45deg, ${(props) => props.theme.colors.primary || "#667eea"} 0%, ${(props) => props.theme.colors.secondary || "#764ba2"} 100%); animation: ${rotate} 0.8s linear infinite; margin: ${(props) => props.margin || "0 auto"}; ` const LoadingSpinner = (props) => { return } export default LoadingSpinner [V0_FILE]javascript:file="server/config/database.js" isMerged="true" const mongoose = require("mongoose") const connectDB = async () => { try { console.log("Attempting to connect to MongoDB...") console.log("MongoDB URI:", process.env.MONGODB_URI ? "URI is set" : "URI is missing") const conn = await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, serverSelectionTimeoutMS: 5000, // Timeout after 5s instead of 30s socketTimeoutMS: 45000, // Close sockets after 45s of inactivity }) console.log(`MongoDB Connected: ${conn.connection.host}`) } catch (error) { console.error("MongoDB connection error:", error.message) // Provide specific error guidance if (error.message.includes("ENOTFOUND")) { console.error("DNS Resolution Error - Check your connection string and network") } if (error.message.includes("authentication failed")) { console.error("Authentication Error - Check your username and password") } if (error.message.includes("IP not in whitelist")) { console.error("IP Whitelist Error - Add your IP to MongoDB Atlas") } process.exit(1) } } module.exports = connectDB [V0_FILE]typescriptreact:file="client/src/pages/auth/EmailVerification.js" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useParams, useNavigate } from "react-router-dom" import styled from "styled-components" import Card from "../../components/common/Card" import Button from "../../components/common/Button" import LoadingSpinner from "../../components/common/LoadingSpinner" const Container = styled.div` min-height: 100vh; display: flex; align-items: center; justify-content: center; background: ${(props) => props.theme.gradient?.primary || "linear-gradient(45deg, #667eea 0%, #764ba2 100%)"}; padding: ${(props) => props.theme.spacing?.md || "1rem"}; ` const VerificationCard = styled(Card)` max-width: 500px; width: 100%; text-align: center; ` const Title = styled.h1` color: ${(props) => props.theme.colors?.text || "#333333"}; font-size: ${(props) => props.theme.typography?.fontSize?.xlarge || "1.5rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const Message = styled.p` color: ${(props) => props.theme.colors?.textSecondary || "#666666"}; font-size: ${(props) => props.theme.typography?.fontSize?.medium || "1rem"}; line-height: 1.6; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const StatusIcon = styled.div` font-size: 4rem; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; &.success { color: #10b981; } &.error { color: #ef4444; } &.loading { color: ${(props) => props.theme.colors?.primary || "#667eea"}; } ` const ButtonGroup = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.md || "1rem"}; justify-content: center; flex-wrap: wrap; ` const EmailVerification = () => { const { token } = useParams() const navigate = useNavigate() const [status, setStatus] = useState("loading") // loading, success, error const [message, setMessage] = useState("") useEffect(() => { if (token) { verifyEmail(token) } else { setStatus("error") setMessage("Invalid verification link. Please check your email and try again.") } }, [token]) const verifyEmail = async (verificationToken) => { try { const response = await fetch(`${process.env.REACT_APP_API_URL}/auth/verify-email/${verificationToken}`, { method: "POST", headers: { "Content-Type": "application/json", }, }) const data = await response.json() if (response.ok) { setStatus("success") setMessage("Your email has been successfully verified! You can now log in to your account.") } else { setStatus("error") setMessage(data.message || "Email verification failed. Please try again.") } } catch (error) { setStatus("error") setMessage("Network error. Please check your connection and try again.") } } const handleGoToLogin = () => { navigate("/login") } const handleResendVerification = () => { // Implement resend verification logic navigate("/resend-verification") } const renderContent = () => { switch (status) { case "loading": return ( <> Verifying Your Email Please wait while we verify your email address... ) case "success": return ( <> ✅ Email Verified Successfully! {message} ) case "error": return ( <> ❌ Verification Failed {message} ) default: return null } } return ( {renderContent()} ) } export default EmailVerification [V0_FILE]javascript:file="client/src/styles/GlobalStyles.js" isEdit="true" isMerged="true" import { createGlobalStyle } from "styled-components" const GlobalStyle = createGlobalStyle` * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: ${(props) => props.theme.typography?.fontFamily || "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif"}; font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; line-height: ${(props) => props.theme.typography?.lineHeight?.normal || "1.5"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; } ::-webkit-scrollbar-thumb { background: ${(props) => props.theme.gradients?.secondary || "linear-gradient(135deg, #6b8e23 0%, #8fbc8f 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; } ::-webkit-scrollbar-thumb:hover { background: ${(props) => props.theme.colors?.secondary || "#6b8e23"}; } /* Selection Styling */ ::selection { background: ${(props) => props.theme.colors?.secondary || "#6b8e23"}40; color: ${(props) => props.theme.colors?.text || "#2d3748"}; } /* Focus Outline */ *:focus { outline: 2px solid ${(props) => props.theme.colors?.primary || "#667eea"}; outline-offset: 2px; } /* Link Styling */ a { color: ${(props) => props.theme.colors?.primary || "#667eea"}; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); &:hover { color: ${(props) => props.theme.palette?.primary?.dark || "#4c63d2"}; } } /* List Styling */ ul, ol { list-style: none; } /* Button Reset */ button { background: none; border: none; cursor: pointer; font-family: inherit; } /* Input Reset */ input, textarea, select { font-family: inherit; font-size: inherit; } /* Image Styling */ img { max-width: 100%; height: auto; } /* Utility Classes */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 ${(props) => props.theme.spacing?.md || "1rem"}; @media (min-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { padding: 0 ${(props) => props.theme.spacing?.lg || "1.5rem"}; } @media (min-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { padding: 0 ${(props) => props.theme.spacing?.xl || "2rem"}; } } /* Animation Classes */ .fade-in { animation: fadeIn 0.5s ease-in-out; } .slide-up { animation: slideUp 0.5s ease-out; } .scale-in { animation: scaleIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Responsive Typography */ h1, h2, h3, h4, h5, h6 { font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; line-height: ${(props) => props.theme.typography?.lineHeight?.tight || "1.25"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; } h1 { font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; @media (min-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.["4xl"] || "2.25rem"}; } } h2 { font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; @media (min-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; } } h3 { font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; @media (min-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; } } h4 { font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; @media (min-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; } } h5 { font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; @media (min-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; } } h6 { font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; @media (min-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; } } p { margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; line-height: ${(props) => props.theme.typography?.lineHeight?.relaxed || "1.625"}; } ` export default GlobalStyle [V0_FILE]javascript:file="client/src/components/common/Card.js" isEdit="true" isMerged="true" import styled from "styled-components" const CardContainer = styled.div` background: ${(props) => props.theme.gradients?.card || "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(0, 0, 0, 0.1)"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; position: relative; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"}; opacity: 0; transition: opacity 0.3s ease; } &:hover { box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(0, 0, 0, 0.1)"}; transform: translateY(-4px); &::before { opacity: 1; } } ${(props) => { switch (props.$size) { case "sm": return `padding: ${props.theme.spacing?.md || "1rem"};` case "lg": return `padding: ${props.theme.spacing?.["2xl"] || "3rem"};` default: return `padding: ${props.theme.spacing?.xl || "2rem"};` } }} ${(props) => props.$interactive && ` cursor: pointer; `} ${(props) => props.$variant === "elevated" && ` box-shadow: ${props.theme.shadows?.xl || "0 20px 25px -5px rgba(0, 0, 0, 0.1)"}; `} ${(props) => props.$variant === "outlined" && ` background: ${props.theme.colors?.surface || "#ffffff"}; border: 2px solid ${props.theme.colors?.border || "#e2e8f0"}; box-shadow: none; `} ${(props) => props.$variant === "filled" && ` background: ${props.theme.colors?.surfaceLight || "#f7fafc"}; border: none; `} ` const CardHeader = styled.div` border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; padding-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; &:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } ` const CardTitle = styled.h3` margin: 0; color: ${(props) => props.theme.colors?.text || "#2d3748"}; font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; line-height: ${(props) => props.theme.typography?.lineHeight?.tight || "1.25"}; ` const CardSubtitle = styled.p` margin: ${(props) => props.theme.spacing?.sm || "0.5rem"} 0 0 0; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; line-height: ${(props) => props.theme.typography?.lineHeight?.normal || "1.5"}; ` const CardBody = styled.div` color: ${(props) => props.theme.colors?.text || "#2d3748"}; line-height: ${(props) => props.theme.typography?.lineHeight?.relaxed || "1.625"}; ` const CardFooter = styled.div` border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; padding-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: ${(props) => props.theme.spacing?.md || "1rem"}; &:first-child { border-top: none; padding-top: 0; margin-top: 0; } ` const Card = ({ title, subtitle, children, footer, className, size = "base", variant = "default", interactive = false, ...props }) => { return ( {(title || subtitle) && ( {title && {title}} {subtitle && {subtitle}} )} {children} {footer && {footer}} ) } export default Card export { CardContainer, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter } [V0_FILE]html:file="public/index.html" isMerged="true" Management System

[V0_FILE]javascript:file="client/src/Theme.js" isEdit="true" isMerged="true" const theme = { palette: { primary: { main: "#1b4332", // Dark forest green light: "#2d5a47", dark: "#0f2419", }, secondary: { main: "#2d5016", // Dark olive green light: "#52734d", dark: "#1a2f0d", }, background: { main: "#2d3748", // Dark teal from image light: "#4a5568", dark: "#1a202c", }, surface: { main: "#ffffff", light: "#f7fafc", dark: "#edf2f7", }, }, colors: { primary: "#1b4332", // Dark forest green secondary: "#2d5016", // Dark olive green accent: "#40916c", // Medium green for highlights background: "#2d3748", // Dark teal surface: "#ffffff", surfaceLight: "#f7fafc", surfaceDark: "#edf2f7", text: "#2d3748", textLight: "#4a5568", textSecondary: "#718096", textOnDark: "#ffffff", textOnDarkSecondary: "#cbd5e0", border: "#e2e8f0", borderLight: "#f1f5f9", success: "#2d5016", warning: "#ed8936", error: "#c53030", info: "#1b4332", }, gradients: { primary: "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)", secondary: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", background: "linear-gradient(135deg, #2d3748 0%, #1a202c 100%)", surface: "linear-gradient(135deg, #ffffff 0%, #f7fafc 100%)", card: "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)", button: "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)", buttonSecondary: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", accent: "linear-gradient(135deg, #40916c 0%, #2d5016 100%)", success: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", warning: "linear-gradient(135deg, #ed8936 0%, #dd6b20 100%)", error: "linear-gradient(135deg, #c53030 0%, #9c2626 100%)", info: "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)", hero: "linear-gradient(135deg, #0f2419 0%, #1b4332 50%, #2d5016 100%)", cardHover: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)", }, typography: { fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif", fontSize: { xs: "0.75rem", sm: "0.875rem", base: "1rem", lg: "1.125rem", xl: "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem", "5xl": "3rem", }, fontWeight: { light: 300, normal: 400, medium: 500, semibold: 600, bold: 700, extrabold: 800, }, lineHeight: { tight: 1.25, snug: 1.375, normal: 1.5, relaxed: 1.625, loose: 2, }, }, spacing: { xs: "0.25rem", sm: "0.5rem", md: "1rem", lg: "1.5rem", xl: "2rem", "2xl": "3rem", "3xl": "4rem", "4xl": "6rem", "5xl": "8rem", }, borderRadius: { none: "0", sm: "0.25rem", base: "0.375rem", md: "0.5rem", lg: "0.75rem", xl: "1rem", "2xl": "1.5rem", "3xl": "2rem", full: "9999px", }, shadows: { sm: "0 1px 2px 0 rgba(27, 67, 50, 0.05)", base: "0 1px 3px 0 rgba(27, 67, 50, 0.1), 0 1px 2px 0 rgba(27, 67, 50, 0.06)", md: "0 4px 6px -1px rgba(27, 67, 50, 0.1), 0 2px 4px -1px rgba(27, 67, 50, 0.06)", lg: "0 10px 15px -3px rgba(27, 67, 50, 0.1), 0 4px 6px -2px rgba(27, 67, 50, 0.05)", xl: "0 20px 25px -5px rgba(27, 67, 50, 0.1), 0 10px 10px -5px rgba(27, 67, 50, 0.04)", "2xl": "0 25px 50px -12px rgba(27, 67, 50, 0.25)", inner: "inset 0 2px 4px 0 rgba(27, 67, 50, 0.06)", none: "none", glow: "0 0 20px rgba(64, 145, 108, 0.3)", glowLarge: "0 0 40px rgba(64, 145, 108, 0.2)", }, breakpoints: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px", }, } console.log("--- UPDATED DARK GREEN THEME FILE IS RUNNING ---") export default theme [V0_FILE]javascript:file="client/src/pages/auth/Login.js" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Link, useNavigate } from "react-router-dom" import styled from "styled-components" import { FaEnvelope, FaEye, FaEyeSlash, FaLeaf } from "react-icons/fa" import { useAuth } from "../../contexts/AuthContext" import Card from "../../components/common/Card" import Input from "../../components/common/Input" import Button from "../../components/common/Button" import LoadingSpinner from "../../components/common/LoadingSpinner" const LoginContainer = styled.div` min-height: 100vh; display: flex; align-items: center; justify-content: center; background: ${(props) => props.theme.gradients?.hero || "linear-gradient(135deg, #0f2419 0%, #1b4332 50%, #2d5016 100%)"}; padding: ${(props) => props.theme.spacing?.md || "1rem"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(64, 145, 108, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(45, 80, 22, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(27, 67, 50, 0.1) 0%, transparent 50%); pointer-events: none; } &::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } ` const LoginCard = styled(Card)` max-width: 440px; width: 100%; position: relative; z-index: 1; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: ${(props) => props.theme.shadows?.glowLarge || "0 0 40px rgba(64, 145, 108, 0.2)"}, ${(props) => props.theme.shadows?.xl || "0 20px 25px -5px rgba(27, 67, 50, 0.1)"}; @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { margin: ${(props) => props.theme.spacing?.md || "1rem"}; max-width: none; } ` const LogoContainer = styled.div` text-align: center; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; ` const Logo = styled.div` width: 72px; height: 72px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; display: flex; align-items: center; justify-content: center; color: white; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; margin: 0 auto ${(props) => props.theme.spacing?.md || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; } &:hover::before { transform: translateX(100%); } ` const LogoSubtitle = styled.p` color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; margin: 0; letter-spacing: 0.5px; ` const Title = styled.h1` text-align: center; color: ${(props) => props.theme.colors?.text || "#2d3748"}; font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; ` const Subtitle = styled.p` text-align: center; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; line-height: ${(props) => props.theme.typography?.lineHeight?.relaxed || "1.625"}; ` const Form = styled.form` display: flex; flex-direction: column; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ForgotPasswordLink = styled(Link)` color: ${(props) => props.theme.colors?.accent || "#40916c"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; text-align: right; margin-top: -${(props) => props.theme.spacing?.md || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; transition: all 0.3s ease; position: relative; &:hover { color: ${(props) => props.theme.colors?.primary || "#1b4332"}; text-decoration: underline; transform: translateX(-2px); } &::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; transition: width 0.3s ease; } &:hover::before { width: 100%; } ` const SignUpSection = styled.div` text-align: center; margin-top: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; padding-top: ${(props) => props.theme.spacing?.xl || "2rem"}; border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; position: relative; &::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; } ` const SignUpText = styled.p` color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const SignUpLink = styled(Link)` color: ${(props) => props.theme.colors?.accent || "#40916c"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; display: inline-flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; transition: all 0.3s ease; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; opacity: 0; transition: opacity 0.3s ease; z-index: -1; } &:hover { color: white; transform: translateY(-2px); box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; &::before { opacity: 1; } } &::after { content: '→'; transition: transform 0.3s ease; } &:hover::after { transform: translateX(4px); } ` const ErrorMessage = styled.div` background: ${(props) => props.theme.colors?.error || "#c53030"}10; border: 1px solid ${(props) => props.theme.colors?.error || "#c53030"}30; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; padding: ${(props) => props.theme.spacing?.md || "1rem"}; color: ${(props) => props.theme.colors?.error || "#c53030"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; &::before { content: '⚠'; font-size: 1.1rem; color: ${(props) => props.theme.colors?.error || "#c53030"}; } ` const Login = () => { const [formData, setFormData] = useState({ email: "", password: "", }) const [showPassword, setShowPassword] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const { login } = useAuth() const navigate = useNavigate() const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) // Clear error when user starts typing if (error) setError("") } const handleSubmit = async (e) => { e.preventDefault() setLoading(true) setError("") try { await login(formData.email, formData.password) navigate("/dashboard") } catch (err) { setError(err.message || "Login failed. Please try again.") } finally { setLoading(false) } } const togglePasswordVisibility = () => { setShowPassword(!showPassword) } return ( Management Platform Welcome back Sign in to your account to continue managing your business {error && {error}} ) } export default Login [V0_FILE]javascript:file="client/src/components/common/Button.js" isEdit="true" isMerged="true" import styled from "styled-components" import { forwardRef } from "react" const StyledButton = styled.button` display: inline-flex; align-items: center; justify-content: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; font-family: ${(props) => props.theme.typography?.fontFamily || "inherit"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; position: relative; overflow: hidden; text-decoration: none; white-space: nowrap; &:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } &:not(:disabled):hover { transform: translateY(-2px); box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; } &:not(:disabled):active { transform: translateY(0); } /* Shimmer effect */ &::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } &:hover::before { left: 100%; } /* Size Variants */ ${(props) => { switch (props.size) { case "xs": return ` padding: ${props.theme.spacing?.xs || "0.25rem"} ${props.theme.spacing?.sm || "0.5rem"}; font-size: ${props.theme.typography?.fontSize?.xs || "0.75rem"}; min-height: 28px; ` case "sm": return ` padding: ${props.theme.spacing?.sm || "0.5rem"} ${props.theme.spacing?.md || "1rem"}; font-size: ${props.theme.typography?.fontSize?.sm || "0.875rem"}; min-height: 36px; ` case "lg": return ` padding: ${props.theme.spacing?.md || "1rem"} ${props.theme.spacing?.xl || "2rem"}; font-size: ${props.theme.typography?.fontSize?.lg || "1.125rem"}; min-height: 52px; ` case "xl": return ` padding: ${props.theme.spacing?.lg || "1.5rem"} ${props.theme.spacing?.["2xl"] || "3rem"}; font-size: ${props.theme.typography?.fontSize?.xl || "1.25rem"}; min-height: 60px; ` default: return ` padding: ${props.theme.spacing?.sm || "0.5rem"} ${props.theme.spacing?.lg || "1.5rem"}; font-size: ${props.theme.typography?.fontSize?.base || "1rem"}; min-height: 44px; ` } }} /* Variant Styles */ ${(props) => { switch (props.variant) { case "primary": return ` background: ${props.theme.gradients?.button || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; color: ${props.theme.colors?.textOnDark || "#ffffff"}; box-shadow: ${props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; &:not(:disabled):hover { background: ${props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; filter: brightness(1.1); box-shadow: ${props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; } ` case "secondary": return ` background: ${props.theme.gradients?.buttonSecondary || "linear-gradient(135deg, #2d5016 0%, #52734d 100%)"}; color: ${props.theme.colors?.textOnDark || "#ffffff"}; box-shadow: ${props.theme.shadows?.md || "0 4px 6px -1px rgba(45, 80, 22, 0.1)"}; &:not(:disabled):hover { background: ${props.theme.gradients?.secondary || "linear-gradient(135deg, #2d5016 0%, #52734d 100%)"}; filter: brightness(1.1); } ` case "outline": return ` background: transparent; color: ${props.theme.colors?.primary || "#1b4332"}; border: 2px solid ${props.theme.colors?.primary || "#1b4332"}; &:not(:disabled):hover { background: ${props.theme.colors?.primary || "#1b4332"}; color: ${props.theme.colors?.textOnDark || "#ffffff"}; box-shadow: ${props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; } ` case "ghost": return ` background: transparent; color: ${props.theme.colors?.text || "#2d3748"}; &:not(:disabled):hover { background: ${props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${props.theme.colors?.primary || "#1b4332"}; } ` case "danger": return ` background: ${props.theme.gradients?.error || "linear-gradient(135deg, #c53030 0%, #9c2626 100%)"}; color: ${props.theme.colors?.textOnDark || "#ffffff"}; &:not(:disabled):hover { filter: brightness(1.1); } ` case "success": return ` background: ${props.theme.gradients?.success || "linear-gradient(135deg, #2d5016 0%, #52734d 100%)"}; color: ${props.theme.colors?.textOnDark || "#ffffff"}; &:not(:disabled):hover { filter: brightness(1.1); } ` default: return ` background: ${props.theme.colors?.surface || "#ffffff"}; color: ${props.theme.colors?.text || "#2d3748"}; border: 1px solid ${props.theme.colors?.border || "#e2e8f0"}; &:not(:disabled):hover { background: ${props.theme.colors?.surfaceLight || "#f7fafc"}; border-color: ${props.theme.colors?.primary || "#1b4332"}; color: ${props.theme.colors?.primary || "#1b4332"}; } ` } }} /* Full Width */ ${(props) => props.fullWidth && ` width: 100%; `} /* Loading State */ ${(props) => props.loading && ` pointer-events: none; &::after { content: ''; position: absolute; width: 16px; height: 16px; margin: auto; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `} ` const Button = forwardRef( ({ children, variant = "default", size = "base", fullWidth = false, loading = false, className, ...props }, ref) => { return ( {!loading && children} ) }, ) Button.displayName = "Button" export default Button [V0_FILE]javascript:file="client/src/components/common/Input.js" isEdit="true" isMerged="true" "use client" import styled from "styled-components" import { forwardRef, useState } from "react" const InputContainer = styled.div` display: flex; flex-direction: column; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; position: relative; ` const Label = styled.label` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; transition: color 0.3s ease; ${(props) => props.$required && ` &::after { content: ' *'; color: ${props.theme.colors?.error || "#c53030"}; } `} ${(props) => props.$focused && ` color: ${props.theme.colors?.primary || "#1b4332"}; `} ` const InputWrapper = styled.div` position: relative; display: flex; align-items: center; ` const StyledInput = styled.input` width: 100%; padding: ${(props) => props.theme.spacing?.md || "1rem"} ${(props) => props.theme.spacing?.lg || "1.5rem"}; border: 2px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; font-family: ${(props) => props.theme.typography?.fontFamily || "inherit"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); outline: none; &::placeholder { color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; opacity: 1; } &:focus { border-color: ${(props) => props.theme.colors?.primary || "#1b4332"}; box-shadow: 0 0 0 3px ${(props) => props.theme.colors?.primary || "#1b4332"}20, ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; transform: translateY(-1px); } &:hover:not(:focus):not(:disabled) { border-color: ${(props) => props.theme.colors?.accent || "#40916c"}; } &:disabled { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; cursor: not-allowed; opacity: 0.6; } ${(props) => props.$error && ` border-color: ${props.theme.colors?.error || "#c53030"}; &:focus { border-color: ${props.theme.colors?.error || "#c53030"}; box-shadow: 0 0 0 3px ${props.theme.colors?.error || "#c53030"}20; } `} ${(props) => props.$success && ` border-color: ${props.theme.colors?.success || "#2d5016"}; &:focus { border-color: ${props.theme.colors?.success || "#2d5016"}; box-shadow: 0 0 0 3px ${props.theme.colors?.success || "#2d5016"}20; } `} ${(props) => { switch (props.$size) { case "sm": return ` padding: ${props.theme.spacing?.sm || "0.5rem"} ${props.theme.spacing?.md || "1rem"}; font-size: ${props.theme.typography?.fontSize?.sm || "0.875rem"}; ` case "lg": return ` padding: ${props.theme.spacing?.lg || "1.5rem"} ${props.theme.spacing?.xl || "2rem"}; font-size: ${props.theme.typography?.fontSize?.lg || "1.125rem"}; ` default: return "" } }} ${(props) => props.$hasIcon && ` padding-right: ${props.theme.spacing?.["3xl"] || "4rem"}; `} ` const IconContainer = styled.div` position: absolute; right: ${(props) => props.theme.spacing?.md || "1rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; cursor: ${(props) => (props.$clickable ? "pointer" : "default")}; transition: all 0.3s ease; padding: ${(props) => props.theme.spacing?.xs || "0.25rem"}; border-radius: ${(props) => props.theme.borderRadius?.base || "0.375rem"}; &:hover { color: ${(props) => (props.$clickable ? props.theme.colors?.primary || "#1b4332" : "inherit")}; background: ${(props) => (props.$clickable ? props.theme.colors?.surfaceLight || "#f7fafc" : "transparent")}; } ` const ErrorMessage = styled.span` color: ${(props) => props.theme.colors?.error || "#c53030"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; margin-top: ${(props) => props.theme.spacing?.sm || "0.5rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; &::before { content: '⚠'; font-size: 1rem; } ` const HelperText = styled.span` color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; margin-top: ${(props) => props.theme.spacing?.sm || "0.5rem"}; line-height: ${(props) => props.theme.typography?.lineHeight?.normal || "1.5"}; ` const SuccessMessage = styled.span` color: ${(props) => props.theme.colors?.success || "#2d5016"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; margin-top: ${(props) => props.theme.spacing?.sm || "0.5rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; &::before { content: '✓'; font-size: 1rem; } ` const Input = forwardRef( ( { label, error, success, helperText, className, size = "base", icon, onIconClick, required = false, ...props }, ref, ) => { const [focused, setFocused] = useState(false) // Filter out custom props that shouldn't be passed to the input element const { rightIcon, onRightIconClick, ...inputProps } = props return ( {label && ( {label} )} setFocused(true)} onBlur={() => setFocused(false)} {...inputProps} /> {icon && ( {icon} )} {error && {error}} {success && !error && {success}} {helperText && !error && !success && {helperText}} ) }, ) Input.displayName = "Input" export default Input export { StyledInput, InputContainer, Label, ErrorMessage, HelperText } [V0_FILE]javascript:file="client/src/pages/auth/SetPassword.js" isQuickEdit="true" isMerged="true" [V0_FILE]typescriptreact:file="client/src/components/layout/Sidebar.js" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useNavigate, useLocation } from "react-router-dom" import styled from "styled-components" import { FaHome, FaChartBar, FaTractor, FaSignOutAlt, FaChevronLeft, FaChevronRight, FaLeaf } from "react-icons/fa" const SidebarContainer = styled.div` position: fixed; left: 0; top: 0; height: 100vh; width: ${(props) => (props.$isOpen ? "280px" : "72px")}; background: ${(props) => props.theme.gradients?.hero || "linear-gradient(180deg, #0f2419 0%, #1b4332 50%, #2d5016 100%)"}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; box-shadow: ${(props) => props.theme.shadows?.xl || "0 20px 25px -5px rgba(27, 67, 50, 0.1)"}; border-right: 1px solid rgba(255, 255, 255, 0.1); @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { transform: translateX(${(props) => (props.$isOpen ? "0" : "-100%")}); width: 280px; } ` const SidebarHeader = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"} ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; position: relative; ` const Logo = styled.div` width: 40px; height: 40px; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; flex-shrink: 0; ` const BrandInfo = styled.div` opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transform: translateX(${(props) => (props.$isOpen ? "0" : "-20px")}); transition: all 0.3s ease; overflow: hidden; ` const BrandName = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: white; margin: 0; white-space: nowrap; ` const BrandSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: rgba(255, 255, 255, 0.7); margin: 0; white-space: nowrap; ` const ToggleButton = styled.button` position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: 2px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; color: ${(props) => props.theme.colors?.primary || "#1b4332"}; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.3s ease; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; &:hover { background: ${(props) => props.theme.colors?.primary || "#1b4332"}; color: white; transform: translateY(-50%) scale(1.1); } @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { display: none; } ` const Navigation = styled.nav` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} 0; flex: 1; overflow-y: auto; ` const NavSection = styled.div` margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const NavSectionTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 ${(props) => props.theme.spacing?.md || "1rem"} 0; padding: 0 ${(props) => props.theme.spacing?.lg || "1.5rem"}; opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transition: opacity 0.3s ease; ` const NavList = styled.ul` list-style: none; margin: 0; padding: 0; ` const NavItem = styled.li` margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const NavLink = styled.button` width: 100%; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; padding: ${(props) => props.theme.spacing?.md || "1rem"} ${(props) => props.theme.spacing?.lg || "1.5rem"}; background: none; border: none; color: ${(props) => (props.$active ? "white" : "rgba(255, 255, 255, 0.7)")}; font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; cursor: pointer; transition: all 0.3s ease; border-radius: 0 ${(props) => props.theme.borderRadius?.lg || "0.75rem"} ${(props) => props.theme.borderRadius?.lg || "0.75rem"} 0; margin-right: ${(props) => props.theme.spacing?.md || "1rem"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: ${(props) => props.theme.colors?.accent || "#40916c"}; transform: scaleY(${(props) => (props.$active ? 1 : 0)}); transition: transform 0.3s ease; } &:hover { background: rgba(255, 255, 255, 0.1); color: white; transform: translateX(4px); } ${(props) => props.$active && ` background: rgba(255, 255, 255, 0.15); color: white; box-shadow: ${props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; `} ` const NavIcon = styled.div` font-size: 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; ` const NavText = styled.span` opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transform: translateX(${(props) => (props.$isOpen ? "0" : "-20px")}); transition: all 0.3s ease; white-space: nowrap; overflow: hidden; ` const SidebarFooter = styled.div` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-top: 1px solid rgba(255, 255, 255, 0.1); ` const UserProfile = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; padding: ${(props) => props.theme.spacing?.md || "1rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: rgba(255, 255, 255, 0.1); margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const UserAvatar = styled.div` width: 36px; height: 36px; border-radius: 50%; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; flex-shrink: 0; ` const UserInfo = styled.div` opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transform: translateX(${(props) => (props.$isOpen ? "0" : "-20px")}); transition: all 0.3s ease; overflow: hidden; ` const UserName = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: white; white-space: nowrap; ` const UserRole = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: rgba(255, 255, 255, 0.7); white-space: nowrap; ` const Sidebar = ({ isOpen, onToggle, userModules = [], userRole = "user", hasModuleAccess, isAdmin }) => { const navigate = useNavigate() const location = useLocation() const mainNavItems = [ { id: "dashboard", label: "Dashboard", icon: , path: "/dashboard", }, { id: "analytics", label: "Analytics", icon: , path: "/analytics", }, ] const moduleNavItems = [ { id: "agriculture", label: "Agriculture", icon: , path: "/agriculture", module: "Agriculture", }, ] const handleNavigation = (path) => { navigate(path) } const handleLogout = () => { // Add proper logout logic here if (window.confirm("Are you sure you want to sign out?")) { // Clear any stored authentication data localStorage.removeItem("token") localStorage.removeItem("user") // Navigate to login page navigate("/login") // Optionally reload the page to clear any cached state window.location.reload() } } const isActiveRoute = (path) => { return location.pathname === path } return ( ManagePro Business Suite {isOpen ? : } Main {mainNavItems.map((item) => ( handleNavigation(item.path)}> {item.icon} {item.label} ))} Modules {moduleNavItems.map((item) => ( handleNavigation(item.path)}> {item.icon} {item.label} ))} A Aline NIYO Administrator Sign out ) } export default Sidebar [V0_FILE]typescriptreact:file="client/src/components/dashboard/DashboardHome.js" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import styled from "styled-components" import { FaUsers, FaProjectDiagram, FaDollarSign, FaChartLine, // Use FaChartLine instead of FaTrendingUp FaTractor, FaBell, FaLeaf, } from "react-icons/fa" import StatsCard from "./StatsCard" const DashboardContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { padding: ${(props) => props.theme.spacing?.md || "1rem"}; } ` const WelcomeSection = styled.div` margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; text-align: center; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; text-align: left; } ` const WelcomeTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; } ` const WelcomeSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; margin: 0; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; ` const StatsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { grid-template-columns: repeat(2, 1fr); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; } @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { grid-template-columns: 1fr; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; } ` const ModulesSection = styled.div` margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const SectionTitle = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; &::before { content: ''; width: 4px; height: 28px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; } ` const ModuleCard = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; } &:hover { transform: translateY(-4px); box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}, ${(props) => props.theme.shadows?.xl || "0 20px 25px -5px rgba(27, 67, 50, 0.1)"}; } ` const ModuleHeader = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ModuleIcon = styled.div` width: 56px; height: 56px; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; ` const ModuleInfo = styled.div` flex: 1; ` const ModuleTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0 0 ${(props) => props.theme.spacing?.xs || "0.25rem"} 0; ` const ModuleStatus = styled.span` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.accent || "#40916c"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; &::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: ${(props) => props.theme.colors?.accent || "#40916c"}; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } ` const ModuleStats = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const StatItem = styled.div` text-align: center; ` const StatValue = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const StatLabel = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; text-transform: uppercase; letter-spacing: 0.5px; ` const ActivitySection = styled.div` margin-top: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; ` const ActivityCard = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const ActivityHeader = styled.div` display: flex; align-items: center; justify-content: space-between; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ActivityTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const ViewAllButton = styled.button` background: none; border: none; color: ${(props) => props.theme.colors?.accent || "#40916c"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; cursor: pointer; transition: color 0.3s ease; &:hover { color: ${(props) => props.theme.colors?.primary || "#1b4332"}; } ` const ActivityList = styled.div` display: flex; flex-direction: column; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const ActivityItem = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; padding: ${(props) => props.theme.spacing?.md || "1rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceDark || "#edf2f7"}; transform: translateX(4px); } ` const ActivityIcon = styled.div` width: 40px; height: 40px; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.theme.gradients?.secondary || "linear-gradient(135deg, #2d5016 0%, #52734d 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; ` const ActivityContent = styled.div` flex: 1; ` const ActivityText = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const ActivityTime = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const DashboardHome = () => { const statsData = [ { title: "Total Users", value: "2,847", change: "+12.5% from last month", changeType: "positive", icon: , iconColor: "#1b4332", }, { title: "Active Projects", value: "156", change: "+8.2% from last month", changeType: "positive", icon: , iconColor: "#2d5016", }, { title: "Revenue", value: "$89,432", change: "+15.3% from last month", changeType: "positive", icon: , iconColor: "#40916c", }, { title: "Growth Rate", value: "23.8%", change: "+2.1% from last month", changeType: "positive", icon: , // Changed from FaTrendingUp to FaChartLine iconColor: "#52734d", }, ] const recentActivities = [ { icon: , text: "New agriculture module activated", time: "2 hours ago", }, { icon: , text: "5 new users registered", time: "4 hours ago", }, { icon: , text: "Monthly report generated", time: "6 hours ago", }, { icon: , text: "System maintenance completed", time: "1 day ago", }, ] return ( Welcome back, Aline! Here's what's happening with your business today. {statsData.map((stat, index) => ( ))} Active Modules Smart Agriculture Active and running 58 Items 23 Active 8 Alerts Recent Activity View All {recentActivities.map((activity, index) => ( {activity.icon} {activity.text} {activity.time} ))} ) } export default DashboardHome [V0_FILE]typescriptreact:file="client/src/components/dashboard/StatsCard.js" isEdit="true" isQuickEdit="true" isMerged="true" import styled from "styled-components" const CardContainer = styled.div` background: ${(props) => props.theme.colors?.background || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px rgba(0,0,0,0.1)"}; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"} ${(props) => props.theme.spacing?.xl || "2rem"}; transition: all 0.3s ease; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; } &:hover { box-shadow: ${(props) => props.theme.shadows?.xl || "0 20px 25px rgba(0,0,0,0.15)"}; transform: translateY(-8px); } ` const CardHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const CardTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.medium || "1rem"}; font-weight: 600; color: ${(props) => props.theme.colors?.textSecondary || "#666666"}; margin: 0; text-transform: uppercase; letter-spacing: 0.5px; ` const CardIcon = styled.div` width: 48px; height: 48px; border-radius: ${(props) => props.theme.borderRadius?.medium || "8px"}; background: ${(props) => props.iconColor || props.theme.colors?.primary || "#667eea"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; ` const CardValue = styled.div` font-size: 3rem; font-weight: 800; color: ${(props) => props.theme.colors?.text || "#333333"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; line-height: 1; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: 2.5rem; } ` const CardChange = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.small || "0.875rem"}; font-weight: 500; &.positive { color: #10b981; } &.negative { color: #ef4444; } &.neutral { color: ${(props) => props.theme.colors?.textSecondary || "#666666"}; } ` const ChangeIcon = styled.span` font-size: 16px; ` const StatsCard = ({ title, value, change, changeType = "neutral", icon, iconColor, className }) => { const formatValue = (val) => { if (typeof val === "number") { return val.toLocaleString() } return val } const getChangeIcon = () => { switch (changeType) { case "positive": return "↗" case "negative": return "↘" default: return "→" } } return ( {title} {icon && {icon}} {formatValue(value)} {change && ( {getChangeIcon()} {change} )} ) } export default StatsCard [V0_FILE]typescriptreact:file="client/src/pages/Dashboard.js" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { useAuth } from "../contexts/AuthContext" import Header from "../components/layout/Header" import Sidebar from "../components/layout/Sidebar" import DashboardHome from "../components/dashboard/DashboardHome" const DashboardContainer = styled.div` min-height: 100vh; background: ${(props) => props.theme.colors?.surface || "#f8f9fa"}; ` const DashboardLayout = styled.div` display: flex; min-height: 100vh; ` const MainContent = styled.main` flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-left: ${(props) => (props.$sidebarOpen ? "280px" : "72px")}; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); @media (max-width: 1024px) { margin-left: 0; } ` const ContentArea = styled.div` flex: 1; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; overflow-y: auto; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; @media (max-width: 768px) { padding: ${(props) => props.theme.spacing?.xl || "2rem"} ${(props) => props.theme.spacing?.md || "1rem"}; } ` const PageHeader = styled.div` margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const PageTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.xlarge || "1.5rem"}; font-weight: 700; color: ${(props) => props.theme.colors?.text || "#333333"}; margin: 0 0 ${(props) => props.theme.spacing?.sm || "0.5rem"} 0; ` const PageSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.medium || "1rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#666666"}; margin: 0; ` const ModuleContainer = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const ModuleCard = styled.div` background: ${(props) => props.theme.colors?.background || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.large || "12px"}; box-shadow: ${(props) => props.theme.shadows?.medium || "0 4px 6px rgba(0,0,0,0.1)"}; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; border: 1px solid ${(props) => props.theme.colors?.surface || "#f8f9fa"}; transition: all 0.3s ease; cursor: pointer; &:hover { box-shadow: ${(props) => props.theme.shadows?.large || "0 10px 25px rgba(0,0,0,0.15)"}; transform: translateY(-2px); } ` const ModuleIcon = styled.div` width: 48px; height: 48px; border-radius: ${(props) => props.theme.borderRadius?.medium || "8px"}; background: ${(props) => props.iconColor || props.theme.colors?.primary || "#667eea"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const ModuleTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.large || "1.25rem"}; font-weight: 600; color: ${(props) => props.theme.colors?.text || "#333333"}; margin: 0 0 ${(props) => props.theme.spacing?.sm || "0.5rem"} 0; ` const ModuleDescription = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.medium || "1rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#666666"}; margin: 0; line-height: 1.5; ` const LoadingContainer = styled.div` display: flex; justify-content: center; align-items: center; min-height: 200px; ` const ErrorContainer = styled.div` background: #fef2f2; border: 1px solid #fecaca; border-radius: ${(props) => props.theme.borderRadius?.medium || "8px"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; color: #dc2626; text-align: center; ` // Module configurations const moduleConfigs = { "User Management": { icon: "👥", color: "#667eea", description: "Manage users, roles, and permissions", }, "Inventory Management": { icon: "📦", color: "#f093fb", description: "Track and manage inventory items", }, "Financial Management": { icon: "💰", color: "#4ade80", description: "Handle financial transactions and reports", }, "Project Management": { icon: "📋", color: "#fb923c", description: "Organize and track project progress", }, "Customer Management": { icon: "🤝", color: "#06b6d4", description: "Manage customer relationships and data", }, IMS: { icon: "📦", color: "#f093fb", description: "Inventory Management System", }, ISA: { icon: "🌱", color: "#4ade80", description: "Intelligent Systems Agriculture", }, "Waste Management": { icon: "♻️", color: "#06b6d4", description: "Waste tracking and management", }, "Construction Sites": { icon: "🏗️", color: "#fb923c", description: "Construction site management", }, Reporting: { icon: "📊", color: "#8b5cf6", description: "Generate and view detailed reports", }, } const Dashboard = () => { const { user } = useAuth() const [currentView, setCurrentView] = useState("home") const [loading, setLoading] = useState(true) const [error, _setError] = useState(null) const [sidebarOpen, setSidebarOpen] = useState(true) useEffect(() => { // Simulate loading const timer = setTimeout(() => { setLoading(false) }, 1000) return () => clearTimeout(timer) }, []) // Helper function to check if user has access to a specific module const hasModuleAccess = (moduleName) => { if (!user?.modules) return false return user.modules.includes(moduleName) } // Helper function to check if user is admin const isAdmin = () => { return user?.role === "admin" || user?.role === "Administrator" } const handleModuleClick = (moduleName) => { setCurrentView(moduleName.toLowerCase().replace(/\s+/g, "-")) } const handleSidebarToggle = () => { setSidebarOpen(!sidebarOpen) } const renderModules = () => { if (!user?.modules || user.modules.length === 0) { return (

No Modules Assigned

Contact your administrator to get access to modules.

) } return ( {user.modules.map((module) => { const config = moduleConfigs[module] || { icon: "⚙️", color: "#6b7280", description: "Module description", } return ( handleModuleClick(module)}> {config.icon} {module} {config.description} ) })} ) } const renderContent = () => { if (loading) { return (

Loading dashboard...

) } if (error) { return (

Error Loading Dashboard

{error}

) } switch (currentView) { case "home": return default: return (

Welcome to Your Dashboard Select a module below to get started with your management tasks. {renderModules()}

) } } return (

{renderContent()} ) } export default Dashboard [V0_FILE]typescriptreact:file="client/src/components/layout/Header.js" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useNavigate } from "react-router-dom" import styled from "styled-components" import { FaBell, FaSearch, FaCog, FaBars } from "react-icons/fa" import { useAuth } from "../../contexts/AuthContext" const HeaderContainer = styled.header` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; box-shadow: ${(props) => props.theme.shadows?.sm || "0 1px 2px 0 rgba(27, 67, 50, 0.05)"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} ${(props) => props.theme.spacing?.xl || "2rem"}; position: sticky; top: 0; z-index: 999; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { padding: ${(props) => props.theme.spacing?.md || "1rem"}; } ` const HeaderContent = styled.div` display: flex; justify-content: space-between; align-items: center; max-width: 100%; ` const LeftSection = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; flex: 1; ` const MobileMenuButton = styled.button` display: none; background: none; border: none; color: ${(props) => props.theme.colors?.text || "#2d3748"}; font-size: 20px; cursor: pointer; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${(props) => props.theme.colors?.primary || "#1b4332"}; } @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { display: flex; align-items: center; justify-content: center; } ` const SearchContainer = styled.div` position: relative; max-width: 400px; width: 100%; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { display: none; } ` const SearchInput = styled.input` width: 100%; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.md || "1rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; border: 2px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; transition: all 0.3s ease; outline: none; &::placeholder { color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; } &:focus { border-color: ${(props) => props.theme.colors?.primary || "#1b4332"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; box-shadow: 0 0 0 3px ${(props) => props.theme.colors?.primary || "#1b4332"}20; } ` const SearchIcon = styled.div` position: absolute; left: ${(props) => props.theme.spacing?.md || "1rem"}; top: 50%; transform: translateY(-50%); color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: 16px; pointer-events: none; ` const RightSection = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const IconButton = styled.button` width: 44px; height: 44px; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.3s ease; position: relative; &:hover { background: ${(props) => props.theme.colors?.primary || "#1b4332"}; color: white; transform: translateY(-2px); box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; } ${(props) => props.$hasNotification && ` &::after { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: ${props.theme.colors?.error || "#c53030"}; border-radius: 50%; border: 2px solid ${props.theme.colors?.surface || "#ffffff"}; } `} ` const UserSection = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; padding-left: ${(props) => props.theme.spacing?.md || "1rem"}; border-left: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { border-left: none; padding-left: 0; } ` const UserInfo = styled.div` display: flex; flex-direction: column; align-items: flex-end; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { display: none; } ` const UserName = styled.span` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; line-height: 1.2; ` const UserRole = styled.span` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; line-height: 1.2; ` const Avatar = styled.div` width: 40px; height: 40px; border-radius: 50%; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; cursor: pointer; transition: all 0.3s ease; border: 2px solid ${(props) => props.theme.colors?.surface || "#ffffff"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; &:hover { transform: scale(1.05); box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; } ` const Header = ({ onSidebarToggle }) => { const { user, logout } = useAuth() const navigate = useNavigate() const [searchQuery, setSearchQuery] = useState("") const handleLogout = () => { if (window.confirm("Are you sure you want to sign out?")) { // Clear authentication data localStorage.removeItem("token") localStorage.removeItem("user") // Call logout from auth context if available if (logout) { logout() } // Navigate to login navigate("/login") } } const handleSearch = (e) => { e.preventDefault() // Handle search logic console.log("Searching for:", searchQuery) } const getInitials = (firstName, lastName) => { return `${firstName?.charAt(0) || ""}${lastName?.charAt(0) || ""}`.toUpperCase() } return ( {user && ( <> {`${user.firstName || "Aline"} ${user.lastName || "NIYO"}`} {user.role || "User"} {getInitials(user.firstName || "Aline", user.lastName || "NIYO")} )} ) } export default Header [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Comprehensive Management System", description: "Integrated solution for IMS, ISA, Waste Management & Construction Sites", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%); --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); --card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); --sidebar-gradient: linear-gradient(180deg, #1e3a8a 0%, #3730a3 50%, #581c87 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Inter", sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; } .gradient-text { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import Sidebar from "./components/Sidebar" import Header from "./components/Header" import Dashboard from "./components/Dashboard" import IMSModule from "./components/modules/IMSModule" import ISAModule from "./components/modules/ISAModule" import WasteModule from "./components/modules/WasteModule" import ConstructionModule from "./components/modules/ConstructionModule" export default function Home() { const [activeModule, setActiveModule] = useState("dashboard") const [sidebarOpen, setSidebarOpen] = useState(true) const renderActiveModule = () => { switch (activeModule) { case "dashboard": return case "ims": return case "isa": return case "waste": return case "construction": return default: return } } return (

{renderActiveModule()}

) } [V0_FILE]typescriptreact:file="app/components/Sidebar.tsx" isMerged="true" "use client" import { Home, Package, Sprout, Trash2, HardHat, BarChart3, Settings, Users, Bell, ChevronLeft, ChevronRight, } from "lucide-react" interface SidebarProps { activeModule: string setActiveModule: (module: string) => void isOpen: boolean setIsOpen: (open: boolean) => void } const menuItems = [ { id: "dashboard", label: "Dashboard", icon: Home, color: "from-blue-500 to-purple-600" }, { id: "ims", label: "Inventory (IMS)", icon: Package, color: "from-green-500 to-teal-600" }, { id: "isa", label: "Agriculture (ISA)", icon: Sprout, color: "from-emerald-500 to-green-600" }, { id: "waste", label: "Waste Management", icon: Trash2, color: "from-orange-500 to-red-600" }, { id: "construction", label: "Construction Sites", icon: HardHat, color: "from-yellow-500 to-orange-600" }, ] const bottomItems = [ { id: "analytics", label: "Analytics", icon: BarChart3 }, { id: "users", label: "Users", icon: Users }, { id: "notifications", label: "Notifications", icon: Bell }, { id: "settings", label: "Settings", icon: Settings }, ] export default function Sidebar({ activeModule, setActiveModule, isOpen, setIsOpen }: SidebarProps) { return (

{/* Header */}

{isOpen && (

CMS

Management System

)}

{/* Main Navigation */}

{menuItems.map((item) => { const Icon = item.icon const isActive = activeModule === item.id return ( ) })}

{/* Bottom Navigation */}

{bottomItems.map((item) => { const Icon = item.icon return ( ) })}

{/* User Profile */} {isOpen && (

Admin User

System Administrator

)}

) } [V0_FILE]typescriptreact:file="app/components/Header.tsx" isMerged="true" "use client" import { Search, Bell, Settings, User, Menu } from "lucide-react" interface HeaderProps { sidebarOpen: boolean setSidebarOpen: (open: boolean) => void } export default function Header({ sidebarOpen, setSidebarOpen }: HeaderProps) { return (

{/* Left Section */}

Comprehensive Management System

Integrated solution for inventory, agriculture, waste & construction

{/* Right Section */}

{/* Search */}

{/* Notifications */} {/* Settings */} {/* User Profile */}

Admin User

Administrator

) } [V0_FILE]typescriptreact:file="app/components/Dashboard.tsx" isMerged="true" "use client" import { Package, Sprout, Trash2, HardHat, DollarSign, AlertTriangle, CheckCircle, Clock, BarChart3, } from "lucide-react" const stats = [ { title: "Total Inventory Items", value: "12,847", change: "+12.5%", changeType: "positive", icon: Package, gradient: "from-green-500 to-teal-600", }, { title: "Active Crop Fields", value: "156", change: "+8.2%", changeType: "positive", icon: Sprout, gradient: "from-emerald-500 to-green-600", }, { title: "Waste Revenue", value: "$89,432", change: "+15.3%", changeType: "positive", icon: DollarSign, gradient: "from-orange-500 to-red-600", }, { title: "Construction Sites", value: "23", change: "+2.1%", changeType: "positive", icon: HardHat, gradient: "from-yellow-500 to-orange-600", }, ] const modules = [ { id: "ims", title: "Inventory Management System (IMS)", description: "Streamline inventory operations for retail, food service, and construction environments", icon: Package, gradient: "from-green-500 to-teal-600", features: ["Stock Management", "Sales & Returns", "Real-time Levels", "Automated Alerts"], status: "Active", items: "12,847 items", }, { id: "isa", title: "Integrated Smart Agriculture (ISA)", description: "Empower agribusinesses with tools to plan, monitor, and optimize agricultural activities", icon: Sprout, gradient: "from-emerald-500 to-green-600", features: ["Land Mapping", "Soil Health", "Irrigation Tracking", "Crop Planning"], status: "Active", items: "156 fields", }, { id: "waste", title: "Waste Management & Sales", description: "Promote sustainability by managing sale and redistribution of surplus food items", icon: Trash2, gradient: "from-orange-500 to-red-600", features: ["Waste Tracking", "Quality Checks", "Partner Management", "Revenue Tracking"], status: "Active", items: "$89,432 revenue", }, { id: "construction", title: "Construction Site Management", description: "Comprehensive management of construction equipment, materials, and site operations", icon: HardHat, gradient: "from-yellow-500 to-orange-600", features: ["Equipment Tracking", "Material Inventory", "Site Management", "Cost Control"], status: "Active", items: "23 sites", }, ] const recentActivity = [ { id: 1, type: "inventory", message: "Low stock alert: Construction materials below threshold", time: "2 minutes ago", priority: "high", icon: AlertTriangle, }, { id: 2, type: "agriculture", message: "Irrigation cycle completed for Field A-12", time: "15 minutes ago", priority: "normal", icon: CheckCircle, }, { id: 3, type: "waste", message: "New waste sale order processed: $2,450", time: "1 hour ago", priority: "normal", icon: DollarSign, }, { id: 4, type: "construction", message: "Equipment maintenance scheduled for Site B-7", time: "2 hours ago", priority: "normal", icon: Clock, }, ] export default function Dashboard() { return (

{/* Welcome Section */}

Welcome to Your Management Hub

Monitor and control all your operations from one centralized dashboard

{/* Stats Grid */}

{stats.map((stat, index) => { const Icon = stat.icon return (

{stat.change}

{stat.value}

{stat.title}

) })}

{/* Modules Overview */}

{modules.map((module) => { const Icon = module.icon return (

{module.title}

{module.items}

{module.status}

{module.description}

{module.features.map((feature, index) => (

{feature}

))}

) })}

{/* Recent Activity */}

Recent Activity

{recentActivity.map((activity) => { const Icon = activity.icon return (

{activity.message}

{activity.time}

{activity.priority === "high" && ( High Priority )}

) })}

) } [V0_FILE]typescriptreact:file="app/components/modules/IMSModule.tsx" isMerged="true" "use client" import { Package, Plus, Search, Filter, Download, AlertTriangle, TrendingUp } from "lucide-react" export default function IMSModule() { return (

{/* Header */}

Inventory Management System

Streamline inventory operations for retail, food service, and construction

{/* Quick Stats */}

Total Items

12,847

Low Stock Items

Total Value

$2.4M

Inventory Items

{/* Sample data - in real app this would come from API */} {/* Add more sample rows as needed */}

Item	Category	Stock	Value	Status	Actions
Construction Steel Bars SKU: CSB-001	Construction	1,250 units	$125,000	In Stock

) } [V0_FILE]typescriptreact:file="app/components/modules/ISAModule.tsx" isMerged="true" "use client" import { Sprout, MapPin, Droplets, Thermometer, Calendar } from "lucide-react" export default function ISAModule() { return (

{/* Header */}

Integrated Smart Agriculture

Empower agribusinesses with intelligent farming solutions

{/* Quick Stats */}

Active Fields

156

Irrigation Active

Avg Temperature

24°C

Scheduled Tasks

{/* Field Management */}

Field Overview

Field A-12

Tomatoes - 5.2 hectares

Growing

Field B-7

Corn - 8.1 hectares

Irrigating

Weather & Conditions

24°C

Temperature

65%

Humidity

) } [V0_FILE]typescriptreact:file="app/components/modules/WasteModule.tsx" isMerged="true" "use client" import { Trash2, DollarSign, Recycle, Users, Package } from "lucide-react" export default function WasteModule() { return (

{/* Header */}

Waste Management & Sales

Transform waste into revenue through sustainable practices

{/* Quick Stats */}

Monthly Revenue

$89,432

Waste Processed

2,847 kg

Active Partners

Pending Orders

{/* Waste Categories */}

Waste Categories

Organic Waste

1,245 kg this month

$12,450

Recyclables

892 kg this month

$8,920

Recent Transactions

Green Valley Farms

Organic waste - 150 kg

$1,500

EcoRecycle Co.

Mixed recyclables - 75 kg

$750

) } [V0_FILE]typescriptreact:file="app/components/modules/ConstructionModule.tsx" isMerged="true" "use client" import { HardHat, Truck, Wrench, MapPin, Users } from "lucide-react" export default function ConstructionModule() { return (

{/* Header */}

Construction Site Management

Comprehensive management of construction operations and resources

{/* Quick Stats */}

Active Sites

Equipment Units

156

Workers

342

Maintenance Due

{/* Site Overview */}

Active Construction Sites

Downtown Plaza

Commercial Building - 45% complete

Active

Riverside Apartments

Residential Complex - 78% complete

Active

Equipment Status

148

Operational

Maintenance

) } [V0_FILE]json:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, animation: { "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]javascript:file="client/src/components/inventory/ReceiptGenerator.js" isMerged="true" "use client" import { useRef } from "react" import styled from "styled-components" import { FaPrint, FaDownload, FaReceipt, FaUser } from "react-icons/fa" import Button from "../common/Button" import Card from "../common/Card" const ReceiptContainer = styled.div` max-width: 800px; margin: 0 auto; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const ReceiptCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; box-shadow: ${(props) => props.theme.shadows?.xl || "0 20px 25px -5px rgba(27, 67, 50, 0.1)"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const ReceiptHeader = styled.div` text-align: center; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"} 0; border-bottom: 2px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; position: relative; &::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; } ` const CompanyLogo = styled.div` width: 80px; height: 80px; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; margin: 0 auto ${(props) => props.theme.spacing?.lg || "1.5rem"}; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; ` const CompanyName = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const CompanyAddress = styled.p` color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; line-height: ${(props) => props.theme.typography?.lineHeight?.relaxed || "1.625"}; margin: 0; ` const ReceiptInfo = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { grid-template-columns: 1fr; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; } ` const InfoSection = styled.div` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; border-left: 4px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; ` const InfoTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const InfoContent = styled.div` color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; line-height: ${(props) => props.theme.typography?.lineHeight?.relaxed || "1.625"}; p { margin: 0 0 ${(props) => props.theme.spacing?.xs || "0.25rem"} 0; } strong { color: ${(props) => props.theme.colors?.text || "#2d3748"}; } ` const ItemsTable = styled.table` width: 100%; border-collapse: collapse; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const TableHeader = styled.thead` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; ` const TableHeaderCell = styled.th` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; text-align: left; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const TableBody = styled.tbody`` const TableRow = styled.tr` border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; &:last-child { border-bottom: none; } ` const TableCell = styled.td` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; ` const TotalSection = styled.div` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; border: 2px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const TotalRow = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; &:last-child { margin-bottom: 0; padding-top: ${(props) => props.theme.spacing?.md || "1rem"}; border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; color: ${(props) => props.theme.colors?.primary || "#1b4332"}; } ` const Footer = styled.div` text-align: center; padding: ${(props) => props.theme.spacing?.xl || "2rem"} 0; border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; ` const ActionButtons = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.md || "1rem"}; justify-content: center; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; flex-wrap: wrap; @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { button { flex: 1; } } ` const ReceiptGenerator = ({ receiptData, onClose }) => { const receiptRef = useRef() // Sample receipt data const defaultReceiptData = { receiptNumber: "RCP-2024-001", date: new Date().toLocaleDateString(), customer: { name: "Green Valley Construction", address: "123 Main Street, City, State 12345", phone: "+1 (555) 123-4567", email: "contact@greenvalley.com", }, items: [ { id: 1, name: "Construction Steel Bars", sku: "CSB-001", quantity: 50, unit: "pieces", unitPrice: 125.0, total: 6250.0, }, { id: 2, name: "Industrial Cement", sku: "IC-003", quantity: 25, unit: "bags", unitPrice: 15.75, total: 393.75, }, { id: 3, name: "Construction Tools Set", sku: "CTS-005", quantity: 3, unit: "sets", unitPrice: 450.0, total: 1350.0, }, ], subtotal: 7993.75, tax: 799.38, discount: 200.0, total: 8593.13, } const receipt = receiptData || defaultReceiptData const handlePrint = () => { window.print() } const handleDownload = () => { // In a real app, this would generate a PDF alert("PDF download functionality would be implemented here") } return ( {onClose && ( )} Comprehensive Management System 123 Business Avenue, Suite 100
Business City, State 12345
Phone: +1 (555) 123-4567 | Email: info@cms.com Receipt Information

Receipt #: {receipt.receiptNumber}

Date: {receipt.date}

Time: {new Date().toLocaleTimeString()}

Customer Information

Name: {receipt.customer.name}

Address: {receipt.customer.address}

Phone: {receipt.customer.phone}

Email: {receipt.customer.email}

Item SKU Qty Unit Price Total {receipt.items.map((item) => ( {item.name} {item.sku} {item.quantity} {item.unit} ${item.unitPrice.toFixed(2)} ${item.total.toFixed(2)} ))} Subtotal: ${receipt.subtotal.toFixed(2)} Tax (10%): ${receipt.tax.toFixed(2)} Discount: -${receipt.discount.toFixed(2)} Total Amount: ${receipt.total.toFixed(2)} ) } export default ReceiptGenerator [V0_FILE]javascript:file="client/src/components/inventory/PurchaseOrderForm.js" isMerged="true" "use client" import { useState } from "react" import styled from "styled-components" import { FaPlus, FaTrash, FaCalendar, FaUser, FaSave, FaTimes } from "react-icons/fa" import Card from "../common/Card" import Button from "../common/Button" import Input from "../common/Input" const FormContainer = styled.div` max-width: 1200px; margin: 0 auto; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const FormHeader = styled.div` background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; color: white; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const FormTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const FormSubtitle = styled.p` opacity: 0.9; margin: 0; ` const FormGrid = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { grid-template-columns: 1fr; } ` const FormSection = styled(Card)` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const SectionTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const ItemsSection = styled(Card)` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const ItemsTable = styled.table` width: 100%; border-collapse: collapse; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const TableHeader = styled.thead` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; ` const TableHeaderCell = styled.th` padding: ${(props) => props.theme.spacing?.md || "1rem"}; text-align: left; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const TableBody = styled.tbody`` const TableRow = styled.tr` border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const TableCell = styled.td` padding: ${(props) => props.theme.spacing?.md || "1rem"}; vertical-align: top; ` const RemoveButton = styled.button` background: ${(props) => props.theme.colors?.error || "#c53030"}; color: white; border: none; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"}; cursor: pointer; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.error || "#c53030"}dd; transform: scale(1.05); } ` const TotalSection = styled.div` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; border-left: 4px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; ` const TotalRow = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; &:last-child { margin-bottom: 0; padding-top: ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; color: ${(props) => props.theme.colors?.primary || "#1b4332"}; } ` const ActionButtons = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.md || "1rem"}; justify-content: flex-end; flex-wrap: wrap; @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { button { flex: 1; } } ` const PurchaseOrderForm = ({ onClose, onSave }) => { const [formData, setFormData] = useState({ poNumber: `PO-${Date.now()}`, supplier: "", supplierEmail: "", supplierPhone: "", orderDate: new Date().toISOString().split("T")[0], expectedDate: "", notes: "", }) const [items, setItems] = useState([ { id: 1, name: "", sku: "", quantity: 1, unitPrice: 0, total: 0, }, ]) const handleInputChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleItemChange = (index, field, value) => { const updatedItems = [...items] updatedItems[index][field] = value // Calculate total for this item if (field === "quantity" || field === "unitPrice") { updatedItems[index].total = updatedItems[index].quantity * updatedItems[index].unitPrice } setItems(updatedItems) } const addItem = () => { setItems([ ...items, { id: Date.now(), name: "", sku: "", quantity: 1, unitPrice: 0, total: 0, }, ]) } const removeItem = (index) => { if (items.length > 1) { setItems(items.filter((_, i) => i !== index)) } } const calculateSubtotal = () => { return items.reduce((sum, item) => sum + item.total, 0) } const calculateTax = () => { return calculateSubtotal() * 0.1 // 10% tax } const calculateTotal = () => { return calculateSubtotal() + calculateTax() } const handleSave = () => { const purchaseOrder = { ...formData, items, subtotal: calculateSubtotal(), tax: calculateTax(), total: calculateTotal(), } if (onSave) { onSave(purchaseOrder) } alert("Purchase Order saved successfully!") } return ( Create Purchase Order Generate a new purchase order for your suppliers Supplier Information Order Details Order Items Item Name SKU Quantity Unit Price Total Action {items.map((item, index) => ( handleItemChange(index, "name", e.target.value)} placeholder="Item name" /> handleItemChange(index, "sku", e.target.value)} placeholder="SKU" /> handleItemChange(index, "quantity", Number.parseFloat(e.target.value) || 0)} min="1" /> handleItemChange(index, "unitPrice", Number.parseFloat(e.target.value) || 0)} min="0" /> ${item.total.toFixed(2)} removeItem(index)}> ))} Subtotal: ${calculateSubtotal().toFixed(2)} Tax (10%): ${calculateTax().toFixed(2)} Total Amount: ${calculateTotal().toFixed(2)} {onClose && ( )} ) } export default PurchaseOrderForm [V0_FILE]javascript:file="server/routes/inventory.js" isMerged="true" const express = require("express") const router = express.Router() const Inventory = require("../models/Inventory") const PurchaseOrder = require("../models/PurchaseOrder") const Receipt = require("../models/Receipt") // Get all inventory items router.get("/", async (req, res) => { try { const { search, category, status, location, page = 1, limit = 50 } = req.query const query = {} // Search functionality if (search) { query.$or = [ { name: { $regex: search, $options: "i" } }, { sku: { $regex: search, $options: "i" } }, { category: { $regex: search, $options: "i" } }, ] } // Filter by category if (category) { query.category = category } // Filter by status if (status) { query.status = status } // Filter by location if (location) { query.location = location } const skip = (page - 1) * limit const items = await Inventory.find(query).sort({ updatedAt: -1 }).skip(skip).limit(Number.parseInt(limit)) const total = await Inventory.countDocuments(query) res.json({ success: true, data: items, pagination: { page: Number.parseInt(page), limit: Number.parseInt(limit), total, pages: Math.ceil(total / limit), }, }) } catch (error) { console.error("Error fetching inventory:", error) res.status(500).json({ success: false, message: "Error fetching inventory items", error: error.message, }) } }) // Get inventory statistics router.get("/stats", async (req, res) => { try { const totalItems = await Inventory.countDocuments() const lowStockItems = await Inventory.countDocuments({ status: "low-stock" }) const outOfStockItems = await Inventory.countDocuments({ status: "out-of-stock" }) const totalValueResult = await Inventory.aggregate([ { $group: { _id: null, totalValue: { $sum: { $multiply: ["$quantity", "$price"] } }, }, }, ]) const totalValue = totalValueResult.length > 0 ? totalValueResult[0].totalValue : 0 const categories = await Inventory.distinct("category") const locations = await Inventory.distinct("location") res.json({ success: true, data: { totalItems, lowStockItems, outOfStockItems, totalValue, categoriesCount: categories.length, locationsCount: locations.length, }, }) } catch (error) { console.error("Error fetching inventory stats:", error) res.status(500).json({ success: false, message: "Error fetching inventory statistics", error: error.message, }) } }) // Create new inventory item router.post("/", async (req, res) => { try { const { name, sku, category, quantity, unit, price, minStockLevel, location, supplier, description, expiryDate } = req.body // Validate required fields if (!name || !sku || !category || quantity === undefined || !unit || price === undefined) { return res.status(400).json({ success: false, message: "Missing required fields: name, sku, category, quantity, unit, price", }) } // Check if SKU already exists const existingItem = await Inventory.findOne({ sku }) if (existingItem) { return res.status(400).json({ success: false, message: "Item with this SKU already exists", }) } // Determine stock status let status = "in-stock" if (quantity === 0) { status = "out-of-stock" } else if (minStockLevel && quantity <= minStockLevel) { status = "low-stock" } const newItem = new Inventory({ name, sku, category, quantity, unit, price, minStockLevel: minStockLevel || 10, location: location || "Main Warehouse", supplier, description, expiryDate, status, totalValue: quantity * price, createdAt: new Date(), updatedAt: new Date(), }) const savedItem = await newItem.save() res.status(201).json({ success: true, message: "Inventory item created successfully", data: savedItem, }) } catch (error) { console.error("Error creating inventory item:", error) res.status(500).json({ success: false, message: "Error creating inventory item", error: error.message, }) } }) // Update inventory item router.put("/:id", async (req, res) => { try { const { id } = req.params const updateData = { ...req.body, updatedAt: new Date() } // Recalculate total value if quantity or price changed if (updateData.quantity !== undefined || updateData.price !== undefined) { const currentItem = await Inventory.findById(id) if (currentItem) { const quantity = updateData.quantity !== undefined ? updateData.quantity : currentItem.quantity const price = updateData.price !== undefined ? updateData.price : currentItem.price updateData.totalValue = quantity * price // Update status based on quantity if (quantity === 0) { updateData.status = "out-of-stock" } else if (currentItem.minStockLevel && quantity <= currentItem.minStockLevel) { updateData.status = "low-stock" } else { updateData.status = "in-stock" } } } const updatedItem = await Inventory.findByIdAndUpdate(id, updateData, { new: true }) if (!updatedItem) { return res.status(404).json({ success: false, message: "Inventory item not found", }) } res.json({ success: true, message: "Inventory item updated successfully", data: updatedItem, }) } catch (error) { console.error("Error updating inventory item:", error) res.status(500).json({ success: false, message: "Error updating inventory item", error: error.message, }) } }) // Delete inventory item router.delete("/:id", async (req, res) => { try { const { id } = req.params const deletedItem = await Inventory.findByIdAndDelete(id) if (!deletedItem) { return res.status(404).json({ success: false, message: "Inventory item not found", }) } res.json({ success: true, message: "Inventory item deleted successfully", data: deletedItem, }) } catch (error) { console.error("Error deleting inventory item:", error) res.status(500).json({ success: false, message: "Error deleting inventory item", error: error.message, }) } }) // Create purchase order router.post("/purchase-orders", async (req, res) => { try { const { poNumber, supplier, supplierEmail, supplierPhone, orderDate, expectedDate, items, subtotal, tax, total, notes, } = req.body const newPO = new PurchaseOrder({ poNumber, supplier, supplierEmail, supplierPhone, orderDate: new Date(orderDate), expectedDate: expectedDate ? new Date(expectedDate) : null, items, subtotal, tax, total, notes, status: "pending", createdAt: new Date(), updatedAt: new Date(), }) const savedPO = await newPO.save() res.status(201).json({ success: true, message: "Purchase order created successfully", data: savedPO, }) } catch (error) { console.error("Error creating purchase order:", error) res.status(500).json({ success: false, message: "Error creating purchase order", error: error.message, }) } }) // Get all purchase orders router.get("/purchase-orders", async (req, res) => { try { const { status, supplier, page = 1, limit = 20 } = req.query const query = {} if (status) { query.status = status } if (supplier) { query.supplier = { $regex: supplier, $options: "i" } } const skip = (page - 1) * limit const purchaseOrders = await PurchaseOrder.find(query) .sort({ createdAt: -1 }) .skip(skip) .limit(Number.parseInt(limit)) const total = await PurchaseOrder.countDocuments(query) res.json({ success: true, data: purchaseOrders, pagination: { page: Number.parseInt(page), limit: Number.parseInt(limit), total, pages: Math.ceil(total / limit), }, }) } catch (error) { console.error("Error fetching purchase orders:", error) res.status(500).json({ success: false, message: "Error fetching purchase orders", error: error.message, }) } }) // Generate receipt router.post("/receipts", async (req, res) => { try { const { receiptNumber, customer, items, subtotal, tax, discount, total, paymentMethod, notes } = req.body const newReceipt = new Receipt({ receiptNumber, customer, items, subtotal, tax, discount: discount || 0, total, paymentMethod: paymentMethod || "cash", notes, createdAt: new Date(), }) const savedReceipt = await newReceipt.save() // Update inventory quantities for (const item of items) { await Inventory.findOneAndUpdate( { sku: item.sku }, { $inc: { quantity: -item.quantity }, updatedAt: new Date(), }, ) } res.status(201).json({ success: true, message: "Receipt generated successfully", data: savedReceipt, }) } catch (error) { console.error("Error generating receipt:", error) res.status(500).json({ success: false, message: "Error generating receipt", error: error.message, }) } }) // Get all receipts router.get("/receipts", async (req, res) => { try { const { customer, startDate, endDate, page = 1, limit = 20 } = req.query const query = {} if (customer) { query["customer.name"] = { $regex: customer, $options: "i" } } if (startDate || endDate) { query.createdAt = {} if (startDate) { query.createdAt.$gte = new Date(startDate) } if (endDate) { query.createdAt.$lte = new Date(endDate) } } const skip = (page - 1) * limit const receipts = await Receipt.find(query).sort({ createdAt: -1 }).skip(skip).limit(Number.parseInt(limit)) const total = await Receipt.countDocuments(query) res.json({ success: true, data: receipts, pagination: { page: Number.parseInt(page), limit: Number.parseInt(limit), total, pages: Math.ceil(total / limit), }, }) } catch (error) { console.error("Error fetching receipts:", error) res.status(500).json({ success: false, message: "Error fetching receipts", error: error.message, }) } }) // Low stock alerts router.get("/alerts/low-stock", async (req, res) => { try { const lowStockItems = await Inventory.find({ $expr: { $lte: ["$quantity", "$minStockLevel"] }, }).sort({ quantity: 1 }) res.json({ success: true, data: lowStockItems, count: lowStockItems.length, }) } catch (error) { console.error("Error fetching low stock alerts:", error) res.status(500).json({ success: false, message: "Error fetching low stock alerts", error: error.message, }) } }) // Inventory reports router.get("/reports/summary", async (req, res) => { try { const { startDate, endDate } = req.query const dateQuery = {} if (startDate || endDate) { dateQuery.updatedAt = {} if (startDate) { dateQuery.updatedAt.$gte = new Date(startDate) } if (endDate) { dateQuery.updatedAt.$lte = new Date(endDate) } } // Category-wise summary const categoryStats = await Inventory.aggregate([ { $match: dateQuery }, { $group: { _id: "$category", totalItems: { $sum: 1 }, totalQuantity: { $sum: "$quantity" }, totalValue: { $sum: { $multiply: ["$quantity", "$price"] } }, avgPrice: { $avg: "$price" }, }, }, { $sort: { totalValue: -1 } }, ]) // Location-wise summary const locationStats = await Inventory.aggregate([ { $match: dateQuery }, { $group: { _id: "$location", totalItems: { $sum: 1 }, totalQuantity: { $sum: "$quantity" }, totalValue: { $sum: { $multiply: ["$quantity", "$price"] } }, }, }, { $sort: { totalValue: -1 } }, ]) // Status distribution const statusStats = await Inventory.aggregate([ { $match: dateQuery }, { $group: { _id: "$status", count: { $sum: 1 }, }, }, ]) res.json({ success: true, data: { categoryStats, locationStats, statusStats, }, }) } catch (error) { console.error("Error generating inventory report:", error) res.status(500).json({ success: false, message: "Error generating inventory report", error: error.message, }) } }) module.exports = router [V0_FILE]javascript:file="server/models/Inventory.js" isMerged="true" const mongoose = require("mongoose") const inventorySchema = new mongoose.Schema({ name: { type: String, required: true, trim: true, }, sku: { type: String, required: true, unique: true, trim: true, uppercase: true, }, category: { type: String, required: true, trim: true, }, description: { type: String, trim: true, }, quantity: { type: Number, required: true, min: 0, default: 0, }, unit: { type: String, required: true, trim: true, }, price: { type: Number, required: true, min: 0, }, totalValue: { type: Number, default: 0, }, minStockLevel: { type: Number, default: 10, min: 0, }, maxStockLevel: { type: Number, min: 0, }, location: { type: String, required: true, trim: true, default: "Main Warehouse", }, supplier: { type: String, trim: true, }, supplierContact: { email: String, phone: String, }, status: { type: String, enum: ["in-stock", "low-stock", "out-of-stock", "discontinued"], default: "in-stock", }, barcode: { type: String, trim: true, }, expiryDate: { type: Date, }, lastRestocked: { type: Date, }, tags: [ { type: String, trim: true, }, ], images: [ { url: String, alt: String, }, ], createdAt: { type: Date, default: Date.now, }, updatedAt: { type: Date, default: Date.now, }, }) // Indexes for better query performance inventorySchema.index({ sku: 1 }) inventorySchema.index({ category: 1 }) inventorySchema.index({ status: 1 }) inventorySchema.index({ location: 1 }) inventorySchema.index({ name: "text", description: "text" }) // Pre-save middleware to calculate total value inventorySchema.pre("save", function (next) { this.totalValue = this.quantity * this.price this.updatedAt = new Date() // Update status based on quantity if (this.quantity === 0) { this.status = "out-of-stock" } else if (this.quantity <= this.minStockLevel) { this.status = "low-stock" } else { this.status = "in-stock" } next() }) module.exports = mongoose.model("Inventory", inventorySchema) [V0_FILE]javascript:file="server/models/PurchaseOrder.js" isMerged="true" const mongoose = require("mongoose") const purchaseOrderItemSchema = new mongoose.Schema({ name: { type: String, required: true, trim: true, }, sku: { type: String, required: true, trim: true, }, quantity: { type: Number, required: true, min: 1, }, unitPrice: { type: Number, required: true, min: 0, }, total: { type: Number, required: true, min: 0, }, }) const purchaseOrderSchema = new mongoose.Schema({ poNumber: { type: String, required: true, unique: true, trim: true, }, supplier: { type: String, required: true, trim: true, }, supplierEmail: { type: String, trim: true, lowercase: true, }, supplierPhone: { type: String, trim: true, }, orderDate: { type: Date, required: true, default: Date.now, }, expectedDate: { type: Date, }, receivedDate: { type: Date, }, items: [purchaseOrderItemSchema], subtotal: { type: Number, required: true, min: 0, }, tax: { type: Number, default: 0, min: 0, }, discount: { type: Number, default: 0, min: 0, }, total: { type: Number, required: true, min: 0, }, status: { type: String, enum: ["pending", "sent", "confirmed", "partially-received", "received", "cancelled"], default: "pending", }, notes: { type: String, trim: true, }, attachments: [ { filename: String, url: String, uploadDate: { type: Date, default: Date.now, }, }, ], createdBy: { type: mongoose.Schema.Types.ObjectId, ref: "User", }, createdAt: { type: Date, default: Date.now, }, updatedAt: { type: Date, default: Date.now, }, }) // Indexes purchaseOrderSchema.index({ poNumber: 1 }) purchaseOrderSchema.index({ supplier: 1 }) purchaseOrderSchema.index({ status: 1 }) purchaseOrderSchema.index({ orderDate: -1 }) // Pre-save middleware purchaseOrderSchema.pre("save", function (next) { this.updatedAt = new Date() next() }) module.exports = mongoose.model("PurchaseOrder", purchaseOrderSchema) [V0_FILE]javascript:file="server/models/Receipt.js" isMerged="true" const mongoose = require("mongoose") const receiptItemSchema = new mongoose.Schema({ name: { type: String, required: true, trim: true, }, sku: { type: String, required: true, trim: true, }, quantity: { type: Number, required: true, min: 1, }, unit: { type: String, required: true, trim: true, }, unitPrice: { type: Number, required: true, min: 0, }, total: { type: Number, required: true, min: 0, }, }) const receiptSchema = new mongoose.Schema({ receiptNumber: { type: String, required: true, unique: true, trim: true, }, customer: { name: { type: String, required: true, trim: true, }, email: { type: String, trim: true, lowercase: true, }, phone: { type: String, trim: true, }, address: { type: String, trim: true, }, }, items: [receiptItemSchema], subtotal: { type: Number, required: true, min: 0, }, tax: { type: Number, default: 0, min: 0, }, discount: { type: Number, default: 0, min: 0, }, total: { type: Number, required: true, min: 0, }, paymentMethod: { type: String, enum: ["cash", "card", "bank-transfer", "check", "other"], default: "cash", }, paymentStatus: { type: String, enum: ["paid", "pending", "partial", "refunded"], default: "paid", }, notes: { type: String, trim: true, }, createdBy: { type: mongoose.Schema.Types.ObjectId, ref: "User", }, createdAt: { type: Date, default: Date.now, }, }) // Indexes receiptSchema.index({ receiptNumber: 1 }) receiptSchema.index({ "customer.name": 1 }) receiptSchema.index({ createdAt: -1 }) receiptSchema.index({ paymentStatus: 1 }) module.exports = mongoose.model("Receipt", receiptSchema) [V0_FILE]javascript:file="client/src/components/inventory/BarcodeScanner.js" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import styled from "styled-components" import { FaBarcode, FaCamera, FaTimes, FaSearch, FaPlus } from "react-icons/fa" import Card from "../common/Card" import Button from "../common/Button" import Input from "../common/Input" const ScannerContainer = styled.div` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: ${(props) => props.theme.spacing?.md || "1rem"}; ` const ScannerCard = styled(Card)` max-width: 500px; width: 100%; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; position: relative; ` const ScannerHeader = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ScannerTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const CloseButton = styled.button` background: none; border: none; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: 20px; cursor: pointer; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; } ` const VideoContainer = styled.div` position: relative; width: 100%; height: 300px; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; overflow: hidden; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; display: flex; align-items: center; justify-content: center; ` const Video = styled.video` width: 100%; height: 100%; object-fit: cover; ` const ScanOverlay = styled.div` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 100px; border: 2px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; &::before, &::after { content: ''; position: absolute; width: 20px; height: 20px; border: 3px solid ${(props) => props.theme.colors?.accent || "#40916c"}; } &::before { top: -3px; left: -3px; border-right: none; border-bottom: none; } &::after { bottom: -3px; right: -3px; border-left: none; border-top: none; } ` const ManualInput = styled.div` border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; padding-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const InputLabel = styled.label` display: block; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const ResultContainer = styled.div` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ResultItem = styled.div` display: flex; justify-content: space-between; align-items: center; padding: ${(props) => props.theme.spacing?.md || "1rem"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; &:last-child { margin-bottom: 0; } ` const ItemInfo = styled.div`` const ItemName = styled.div` font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const ItemDetails = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const BarcodeScanner = ({ isOpen, onClose, onScanResult }) => { const [manualBarcode, setManualBarcode] = useState("") const [scanResult, setScanResult] = useState(null) const [isScanning, setIsScanning] = useState(false) const videoRef = useRef(null) const streamRef = useRef(null) useEffect(() => { if (isOpen && !isScanning) { startCamera() } return () => { stopCamera() } }, [isOpen]) const startCamera = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, }) if (videoRef.current) { videoRef.current.srcObject = stream streamRef.current = stream setIsScanning(true) } } catch (error) { console.error("Error accessing camera:", error) alert("Unable to access camera. Please use manual input.") } } const stopCamera = () => { if (streamRef.current) { streamRef.current.getTracks().forEach((track) => track.stop()) streamRef.current = null } setIsScanning(false) } const handleManualSubmit = async (e) => { e.preventDefault() if (manualBarcode.trim()) { await searchByBarcode(manualBarcode.trim()) } } const searchByBarcode = async (barcode) => { try { // Simulate API call to search inventory by barcode const mockResult = { id: 1, name: "Construction Steel Bars", sku: "CSB-001", barcode: barcode, quantity: 1250, price: 125.0, location: "Warehouse A", } setScanResult(mockResult) if (onScanResult) { onScanResult(mockResult) } } catch (error) { console.error("Error searching barcode:", error) alert("Item not found") } } const handleClose = () => { stopCamera() setScanResult(null) setManualBarcode("") if (onClose) { onClose() } } if (!isOpen) return null return ( Barcode Scanner {isScanning ? ( <>

Or enter barcode manually: {scanResult && (

Scan Result:

{scanResult.name} SKU: {scanResult.sku} | Stock: {scanResult.quantity} | ${scanResult.price} )} ) } export default BarcodeScanner [V0_FILE]javascript:file="client/src/components/analytics/AnalyticsDashboard.js" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import styled from "styled-components" import { FaChartLine, FaChartBar, FaChartPie, FaDownload, FaCalendar, FaTrendingUp, FaTrendingDown, FaArrowUp, FaArrowDown, FaDollarSign, } from "react-icons/fa" import Card from "../common/Card" import Button from "../common/Button" const AnalyticsContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; ` const HeaderSection = styled.div` background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; color: white; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const HeaderContent = styled.div`` const HeaderTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const HeaderSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; opacity: 0.9; margin: 0; ` const DateRangeSelector = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.md || "1rem"}; align-items: center; background: rgba(255, 255, 255, 0.1); padding: ${(props) => props.theme.spacing?.md || "1rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; flex-wrap: wrap; ` const DateInput = styled.input` background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; color: white; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; &::placeholder { color: rgba(255, 255, 255, 0.7); } &::-webkit-calendar-picker-indicator { filter: invert(1); } ` const MetricsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const MetricCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(27, 67, 50, 0.1)"}; transition: all 0.3s ease; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.gradient || props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; } &:hover { transform: translateY(-4px); box-shadow: ${(props) => props.theme.shadows?.glowLarge || "0 0 40px rgba(64, 145, 108, 0.2)"}; } ` const MetricHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const MetricIcon = styled.div` width: 56px; height: 56px; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; background: ${(props) => props.gradient || props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; ` const MetricValue = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const MetricLabel = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const MetricChange = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => (props.positive ? props.theme.colors?.success || "#2d5016" : props.theme.colors?.error || "#c53030")}; ` const ChartsGrid = styled.div` display: grid; grid-template-columns: 2fr 1fr; gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { grid-template-columns: 1fr; } ` const ChartCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(27, 67, 50, 0.1)"}; ` const ChartHeader = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; padding-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const ChartTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const ChartContainer = styled.div` height: 300px; display: flex; align-items: center; justify-content: center; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; ` const TableContainer = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(27, 67, 50, 0.1)"}; overflow: hidden; ` const Table = styled.table` width: 100%; border-collapse: collapse; ` const TableHeader = styled.thead` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; ` const TableHeaderCell = styled.th` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; text-align: left; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; text-transform: uppercase; letter-spacing: 0.5px; ` const TableBody = styled.tbody`` const TableRow = styled.tr` border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; } &:last-child { border-bottom: none; } ` const TableCell = styled.td` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; ` const AnalyticsDashboard = () => { const [dateRange, setDateRange] = useState({ startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], endDate: new Date().toISOString().split("T")[0], }) const [analyticsData, setAnalyticsData] = useState({ metrics: [ { title: "Total Revenue", value: "$2,847,392", change: "+12.5%", positive: true, icon: , gradient: "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)", }, { title: "Inventory Turnover", value: "4.2x", change: "+8.3%", positive: true, icon: , gradient: "linear-gradient(135deg, #40916c 0%, #2d5016 100%)", }, { title: "Stock Value", value: "$1,234,567", change: "+15.7%", positive: true, icon: , gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", }, { title: "Low Stock Items", value: "23", change: "-5.2%", positive: true, icon: , gradient: "linear-gradient(135deg, #ed8936 0%, #dd6b20 100%)", }, ], topProducts: [ { name: "Construction Steel Bars", revenue: "$156,250", growth: "+23.5%" }, { name: "Industrial Cement", revenue: "$89,430", growth: "+18.2%" }, { name: "Organic Tomatoes", revenue: "$67,890", growth: "+12.8%" }, { name: "Construction Tools", revenue: "$45,670", growth: "+9.4%" }, { name: "Agricultural Seeds", revenue: "$34,520", growth: "+7.1%" }, ], }) const handleDateChange = (field, value) => { setDateRange((prev) => ({ ...prev, [field]: value, })) } const exportReport = () => { // In a real app, this would generate and download a report alert("Analytics report exported successfully!") } return ( Analytics & Reports Comprehensive insights into your business performance and trends handleDateChange("startDate", e.target.value)} /> to handleDateChange("endDate", e.target.value)} /> {analyticsData.metrics.map((metric, index) => (

{metric.value} {metric.title}

{metric.icon} {metric.positive ? : } {metric.change} from last period ))} Revenue Trends 📈 Revenue chart would be rendered here using Chart.js or Recharts Category Distribution 🥧 Pie chart would be rendered here Top Performing Products Product NameRevenueGrowthTrend {analyticsData.topProducts.map((product, index) => ( {product.name} {product.revenue} {product.growth} ))}

) } export default AnalyticsDashboard [V0_FILE]javascript:file="client/src/pages/modules/ISA.js" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { FaSeedling, FaMapMarkedAlt, FaTint, FaThermometerHalf, FaCalendarAlt, FaChartLine, FaPlus, FaEdit, FaEye, FaDownload, FaExclamationTriangle, FaCheckCircle, } from "react-icons/fa" import Card from "../../components/common/Card" import Button from "../../components/common/Button" const ISAContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; ` const HeaderSection = styled.div` background: ${(props) => props.theme.gradients?.secondary || "linear-gradient(135deg, #2d5016 0%, #52734d 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; color: white; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transform: translate(50%, -50%); } ` const HeaderContent = styled.div` position: relative; z-index: 1; ` const HeaderTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const HeaderSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; opacity: 0.9; margin: 0; ` const StatsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const StatCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(45, 80, 22, 0.1)"}; transition: all 0.3s ease; &:hover { transform: translateY(-8px); box-shadow: ${(props) => props.theme.shadows?.glowLarge || "0 0 40px rgba(82, 115, 77, 0.2)"}; } ` const WeatherWidget = styled(Card)` background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; text-align: center; ` const WeatherIcon = styled.div` font-size: 3rem; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const Temperature = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const WeatherCondition = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; opacity: 0.9; ` const FieldsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const FieldCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(45, 80, 22, 0.1)"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.statusColor || props.theme.gradients?.secondary || "linear-gradient(135deg, #2d5016 0%, #52734d 100%)"}; } ` const FieldHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const FieldInfo = styled.div` flex: 1; ` const FieldName = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const FieldDetails = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; margin: 0; ` const FieldStatus = styled.div` padding: ${(props) => props.theme.spacing?.xs || "0.25rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ${(props) => { switch (props.status) { case "healthy": return ` background: ${props.theme.colors?.success || "#2d5016"}20; color: ${props.theme.colors?.success || "#2d5016"}; ` case "attention": return ` background: ${props.theme.colors?.warning || "#ed8936"}20; color: ${props.theme.colors?.warning || "#ed8936"}; ` case "critical": return ` background: ${props.theme.colors?.error || "#c53030"}20; color: ${props.theme.colors?.error || "#c53030"}; ` default: return ` background: ${props.theme.colors?.textSecondary || "#718096"}20; color: ${props.theme.colors?.textSecondary || "#718096"}; ` } }} ` const FieldMetrics = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: ${(props) => props.theme.spacing?.md || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const MetricItem = styled.div` text-align: center; padding: ${(props) => props.theme.spacing?.md || "1rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; ` const MetricIcon = styled.div` font-size: 1.5rem; color: ${(props) => props.color || props.theme.colors?.primary || "#1b4332"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const MetricValue = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const MetricLabel = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; text-transform: uppercase; letter-spacing: 0.5px; ` const ActionButtons = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; justify-content: flex-end; ` const ActionButton = styled.button` width: 36px; height: 36px; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; border: none; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.secondary || "#2d5016"}; color: white; transform: translateY(-2px); } ` const TasksSection = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(45, 80, 22, 0.1)"}; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const SectionTitle = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const TasksList = styled.div` display: flex; flex-direction: column; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const TaskItem = styled.div` display: flex; align-items: center; justify-content: space-between; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; border-left: 4px solid ${(props) => props.priorityColor || props.theme.colors?.primary || "#1b4332"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceDark || "#edf2f7"}; transform: translateX(4px); } ` const TaskInfo = styled.div` flex: 1; ` const TaskTitle = styled.div` font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const TaskDetails = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const TaskPriority = styled.div` padding: ${(props) => props.theme.spacing?.xs || "0.25rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; text-transform: uppercase; letter-spacing: 0.5px; background: ${(props) => props.color || props.theme.colors?.primary || "#1b4332"}20; color: ${(props) => props.color || props.theme.colors?.primary || "#1b4332"}; ` const ISA = () => { const [fieldsData, setFieldsData] = useState([]) const [tasksData, setTasksData] = useState([]) const [weatherData, setWeatherData] = useState({ temperature: "24°C", condition: "Partly Cloudy", humidity: "65%", rainfall: "12mm", }) // Sample data const sampleFieldsData = [ { id: 1, name: "Field A-12", crop: "Tomatoes", area: "5.2 hectares", status: "healthy", statusColor: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", soilMoisture: "68%", temperature: "26°C", ph: "6.8", lastIrrigation: "2 hours ago", nextTask: "Fertilizer application", }, { id: 2, name: "Field B-7", crop: "Corn", area: "8.1 hectares", status: "attention", statusColor: "linear-gradient(135deg, #ed8936 0%, #dd6b20 100%)", soilMoisture: "45%", temperature: "28°C", ph: "7.2", lastIrrigation: "6 hours ago", nextTask: "Irrigation needed", }, { id: 3, name: "Field C-3", crop: "Lettuce", area: "3.5 hectares", status: "healthy", statusColor: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", soilMoisture: "72%", temperature: "22°C", ph: "6.5", lastIrrigation: "1 hour ago", nextTask: "Pest inspection", }, ] const sampleTasksData = [ { id: 1, title: "Irrigation System Check - Field B-7", details: "Check and repair irrigation system in corn field", priority: "high", priorityColor: "#c53030", dueDate: "Today, 2:00 PM", }, { id: 2, title: "Fertilizer Application - Field A-12", details: "Apply organic fertilizer to tomato plants", priority: "medium", priorityColor: "#ed8936", dueDate: "Tomorrow, 8:00 AM", }, { id: 3, title: "Pest Inspection - Field C-3", details: "Weekly pest inspection for lettuce field", priority: "low", priorityColor: "#2d5016", dueDate: "Friday, 10:00 AM", }, ] useEffect(() => { setFieldsData(sampleFieldsData) setTasksData(sampleTasksData) }, []) const getStatusIcon = (status) => { switch (status) { case "healthy": return case "attention": return case "critical": return default: return } } const getStatusText = (status) => { switch (status) { case "healthy": return "Healthy" case "attention": return "Needs Attention" case "critical": return "Critical" default: return "Unknown" } } return ( Integrated Smart Agriculture Advanced agricultural management with IoT sensors, weather monitoring, and crop optimization

156

Active Fields

+8.2% from last month

☀️ {weatherData.temperature} {weatherData.condition}

💧 {weatherData.humidity}

🌧️ {weatherData.rainfall}

Irrigation Active

+12.5% efficiency

$89,432

Crop Value

+15.3% from last season

{fieldsData.map((field) => ( {field.name} {field.crop} • {field.area} {getStatusIcon(field.status)} {getStatusText(field.status)} {field.soilMoisture} Soil Moisture {field.temperature} Temperature {field.ph} Soil pH

Last Irrigation: {field.lastIrrigation}

Next Task: {field.nextTask}

))} Scheduled Tasks {tasksData.map((task) => ( {task.title} {task.details} • Due: {task.dueDate} {task.priority} ))}

) } export default ISA [V0_FILE]javascript:file="client/src/pages/modules/WasteManagement.js" isMerged="true" "use client" import { useState } from "react" import styled from "styled-components" import { FaRecycle, FaTrash, FaDollarSign, FaUsers, FaChartLine, FaPlus, FaEdit, FaEye, FaDownload, FaLeaf, FaIndustry, FaShoppingCart, FaCheckCircle, FaClock, FaExclamationTriangle, } from "react-icons/fa" import Card from "../../components/common/Card" import Button from "../../components/common/Button" const WasteContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; ` const HeaderSection = styled.div` background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; color: white; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; right: 0; width: 250px; height: 250px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transform: translate(30%, -30%); } ` const HeaderContent = styled.div` position: relative; z-index: 1; ` const HeaderTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const HeaderSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; opacity: 0.9; margin: 0; ` const StatsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const StatCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(240, 147, 251, 0.1)"}; transition: all 0.3s ease; &:hover { transform: translateY(-8px); box-shadow: ${(props) => props.theme.shadows?.glowLarge || "0 0 40px rgba(245, 87, 108, 0.2)"}; } ` const CategoriesGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const CategoryCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(240, 147, 251, 0.1)"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.gradient || "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"}; } ` const CategoryHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const CategoryIcon = styled.div` width: 56px; height: 56px; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; background: ${(props) => props.gradient || "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(240, 147, 251, 0.3)"}; ` const CategoryInfo = styled.div` flex: 1; margin-left: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const CategoryName = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const CategoryStats = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const CategoryMetrics = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); gap: ${(props) => props.theme.spacing?.md || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const MetricItem = styled.div` text-align: center; padding: ${(props) => props.theme.spacing?.md || "1rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; ` const MetricValue = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const MetricLabel = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; text-transform: uppercase; letter-spacing: 0.5px; ` const TransactionsSection = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(240, 147, 251, 0.1)"}; overflow: hidden; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const SectionHeader = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const SectionTitle = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const TransactionsList = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const TransactionItem = styled.div` display: flex; align-items: center; justify-content: space-between; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceDark || "#edf2f7"}; transform: translateX(4px); } &:last-child { margin-bottom: 0; } ` const TransactionInfo = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; flex: 1; ` const TransactionIcon = styled.div` width: 48px; height: 48px; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.gradient || "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; flex-shrink: 0; ` const TransactionDetails = styled.div`` const TransactionTitle = styled.div` font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const TransactionMeta = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const TransactionAmount = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.success || "#2d5016"}; ` const TransactionStatus = styled.div` padding: ${(props) => props.theme.spacing?.xs || "0.25rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; text-transform: uppercase; letter-spacing: 0.5px; margin-left: ${(props) => props.theme.spacing?.md || "1rem"}; ${(props) => { switch (props.status) { case "completed": return ` background: ${props.theme.colors?.success || "#2d5016"}20; color: ${props.theme.colors?.success || "#2d5016"}; ` case "pending": return ` background: ${props.theme.colors?.warning || "#ed8936"}20; color: ${props.theme.colors?.warning || "#ed8936"}; ` case "processing": return ` background: ${props.theme.colors?.info || "#1b4332"}20; color: ${props.theme.colors?.info || "#1b4332"}; ` default: return ` background: ${props.theme.colors?.textSecondary || "#718096"}20; color: ${props.theme.colors?.textSecondary || "#718096"}; ` } }} ` const WasteManagement = () => { const [wasteData, setWasteData] = useState({ categories: [ { id: 1, name: "Organic Waste", type: "organic", icon: , gradient: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", weight: "1,245 kg", revenue: "$12,450", partners: 8, trend: "+15.3%", }, { id: 2, name: "Recyclable Materials", type: "recyclable", icon: , gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", weight: "892 kg", revenue: "$8,920", partners: 12, trend: "+22.1%", }, { id: 3, name: "Industrial Waste", type: "industrial", icon: , gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", weight: "567 kg", revenue: "$5,670", partners: 5, trend: "+8.7%", }, { id: 4, name: "Food Surplus", type: "food", icon: , gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", weight: "234 kg", revenue: "$2,340", partners: 15, trend: "+31.2%", }, ], transactions: [ { id: 1, title: "Green Valley Farms", description: "Organic waste collection - 150 kg", amount: "$1,500", status: "completed", date: "2 hours ago", icon: , gradient: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", }, { id: 2, title: "EcoRecycle Co.", description: "Mixed recyclables - 75 kg", amount: "$750", status: "processing", date: "4 hours ago", icon: , gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", }, { id: 3, title: "City Food Bank", description: "Food surplus donation - 50 kg", amount: "$500", status: "pending", date: "6 hours ago", icon: , gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", }, { id: 4, title: "Industrial Solutions Ltd", description: "Metal scrap collection - 200 kg", amount: "$2,000", status: "completed", date: "1 day ago", icon: , gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", }, ], }) const getStatusIcon = (status) => { switch (status) { case "completed": return case "pending": return case "processing": return default: return } } const getStatusText = (status) => { switch (status) { case "completed": return "Completed" case "pending": return "Pending" case "processing": return "Processing" default: return "Unknown" } } return ( Waste Management & Sales Transform waste into revenue through sustainable practices and strategic partnerships

$89,432

Monthly Revenue

+18.5% from last month

2,847 kg

Waste Processed

+25.3% efficiency

Active Partners

+12 new partners

Pending Orders

Processing queue

{wasteData.categories.map((category) => ( {category.icon} {category.name} {category.weight} this month • {category.partners} partners {category.revenue} Revenue {category.trend} Growth

))} Recent Transactions

{wasteData.transactions.map((transaction) => ( {transaction.icon} {transaction.title} {transaction.description} • {transaction.date}

{transaction.amount} {getStatusIcon(transaction.status)} {getStatusText(transaction.status)}

))} ) } export default WasteManagement [V0_FILE]javascript:file="client/src/pages/modules/ConstructionSites.js" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { FaTruck, FaWrench, FaUsers, FaChartLine, FaPlus, FaEdit, FaEye, FaDownload, FaExclamationTriangle, FaCheckCircle, FaClock, FaTools, FaBuilding, FaDollarSign, } from "react-icons/fa" import Card from "../../components/common/Card" import Button from "../../components/common/Button" const ConstructionContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; ` const HeaderSection = styled.div` background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; color: white; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transform: translate(40%, -40%); } ` const HeaderContent = styled.div` position: relative; z-index: 1; ` const HeaderTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const HeaderSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; opacity: 0.9; margin: 0; ` const StatsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const StatCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(255, 154, 158, 0.1)"}; transition: all 0.3s ease; &:hover { transform: translateY(-8px); box-shadow: ${(props) => props.theme.shadows?.glowLarge || "0 0 40px rgba(254, 207, 239, 0.2)"}; } ` const SitesGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const SiteCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(255, 154, 158, 0.1)"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.statusColor || "linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)"}; } ` const SiteHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const SiteInfo = styled.div` flex: 1; ` const SiteName = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const SiteDetails = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; margin: 0; ` const SiteStatus = styled.div` padding: ${(props) => props.theme.spacing?.xs || "0.25rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ${(props) => { switch (props.status) { case "active": return ` background: ${props.theme.colors?.success || "#2d5016"}20; color: ${props.theme.colors?.success || "#2d5016"}; ` case "delayed": return ` background: ${props.theme.colors?.warning || "#ed8936"}20; color: ${props.theme.colors?.warning || "#ed8936"}; ` case "completed": return ` background: ${props.theme.colors?.info || "#1b4332"}20; color: ${props.theme.colors?.info || "#1b4332"}; ` default: return ` background: ${props.theme.colors?.textSecondary || "#718096"}20; color: ${props.theme.colors?.textSecondary || "#718096"}; ` } }} ` const ProgressBar = styled.div` width: 100%; height: 8px; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; overflow: hidden; margin: ${(props) => props.theme.spacing?.lg || "1.5rem"} 0; ` const ProgressFill = styled.div` height: 100%; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); width: ${(props) => props.progress || 0}%; transition: width 0.3s ease; ` const SiteMetrics = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: ${(props) => props.theme.spacing?.md || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const MetricItem = styled.div` text-align: center; padding: ${(props) => props.theme.spacing?.md || "1rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; ` const MetricIcon = styled.div` font-size: 1.5rem; color: ${(props) => props.color || props.theme.colors?.primary || "#1b4332"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const MetricValue = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const MetricLabel = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; text-transform: uppercase; letter-spacing: 0.5px; ` const EquipmentSection = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(255, 154, 158, 0.1)"}; overflow: hidden; ` const SectionHeader = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const SectionTitle = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const EquipmentGrid = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const EquipmentCard = styled.div` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-left: 4px solid ${(props) => props.statusColor || props.theme.colors?.primary || "#1b4332"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceDark || "#edf2f7"}; transform: translateY(-2px); } ` const EquipmentHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const EquipmentInfo = styled.div` flex: 1; ` const EquipmentName = styled.div` font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const EquipmentDetails = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const EquipmentStatus = styled.div` padding: ${(props) => props.theme.spacing?.xs || "0.25rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; text-transform: uppercase; letter-spacing: 0.5px; background: ${(props) => props.color || props.theme.colors?.primary || "#1b4332"}20; color: ${(props) => props.color || props.theme.colors?.primary || "#1b4332"}; ` const ConstructionSites = () => { const [sitesData, setSitesData] = useState([]) const [equipmentData, setEquipmentData] = useState([]) // Sample data const sampleSitesData = [ { id: 1, name: "Downtown Plaza", type: "Commercial Building", location: "Downtown District", status: "active", statusColor: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", progress: 45, workers: 25, equipment: 12, budget: "$2.5M", deadline: "Dec 2024", manager: "John Smith", }, { id: 2, name: "Riverside Apartments", type: "Residential Complex", location: "Riverside Area", status: "active", statusColor: "linear-gradient(135deg, #2d5016 0%, #52734d 100%)", progress: 78, workers: 18, equipment: 8, budget: "$1.8M", deadline: "Oct 2024", manager: "Sarah Johnson", }, { id: 3, name: "Industrial Warehouse", type: "Industrial Building", location: "Industrial Zone", status: "delayed", statusColor: "linear-gradient(135deg, #ed8936 0%, #dd6b20 100%)", progress: 32, workers: 15, equipment: 10, budget: "$3.2M", deadline: "Jan 2025", manager: "Mike Davis", }, ] const sampleEquipmentData = [ { id: 1, name: "Excavator CAT 320", type: "Heavy Machinery", site: "Downtown Plaza", status: "operational", statusColor: "#2d5016", lastMaintenance: "2 weeks ago", nextMaintenance: "In 2 weeks", utilization: "85%", }, { id: 2, name: "Crane Tower TC-7032", type: "Lifting Equipment", site: "Riverside Apartments", status: "maintenance", statusColor: "#ed8936", lastMaintenance: "Yesterday", nextMaintenance: "In 1 month", utilization: "0%", }, { id: 3, name: "Concrete Mixer CM-500", type: "Mixing Equipment", site: "Industrial Warehouse", status: "operational", statusColor: "#2d5016", lastMaintenance: "1 week ago", nextMaintenance: "In 3 weeks", utilization: "92%", }, { id: 4, name: "Bulldozer BD-180", type: "Heavy Machinery", site: "Downtown Plaza", status: "idle", statusColor: "#718096", lastMaintenance: "3 days ago", nextMaintenance: "In 1 week", utilization: "45%", }, ] useEffect(() => { setSitesData(sampleSitesData) setEquipmentData(sampleEquipmentData) }, []) const getStatusIcon = (status) => { switch (status) { case "active": return case "delayed": return case "completed": return case "operational": return case "maintenance": return case "idle": return default: return } } const getStatusText = (status) => { switch (status) { case "active": return "Active" case "delayed": return "Delayed" case "completed": return "Completed" case "operational": return "Operational" case "maintenance": return "Maintenance" case "idle": return "Idle" default: return "Unknown" } } return ( Construction Site Management Comprehensive management of construction equipment, materials, and site operations

Active Sites

+3 new sites this month

156

Equipment Units

87% operational

342

Workers

+15 new hires

Maintenance Due

Requires attention

{sitesData.map((site) => ( {site.name} {site.type} • {site.location} {getStatusIcon(site.status)} {getStatusText(site.status)}

Progress {site.progress}%

{site.workers} Workers {site.equipment} Equipment {site.budget} Budget

Manager: {site.manager}

Deadline: {site.deadline}

))} Equipment Management

{equipmentData.map((equipment) => ( {equipment.name} {equipment.type} • {equipment.site} {getStatusIcon(equipment.status)} {getStatusText(equipment.status)}

Last Maintenance: {equipment.lastMaintenance}

Next Maintenance: {equipment.nextMaintenance}

Utilization: {equipment.utilization}

))} ) } export default ConstructionSites [V0_FILE]javascript:file="server/models/User.js" isMerged="true" const mongoose = require("mongoose") const bcrypt = require("bcryptjs") const userSchema = new mongoose.Schema({ firstName: { type: String, required: true, trim: true, }, lastName: { type: String, required: true, trim: true, }, email: { type: String, required: true, unique: true, trim: true, lowercase: true, }, password: { type: String, required: true, minlength: 6, }, role: { type: String, enum: ["admin", "manager", "user", "viewer"], default: "user", }, modules: [ { type: String, enum: ["IMS", "ISA", "Waste Management", "Construction Sites", "Analytics", "User Management"], }, ], permissions: { inventory: { read: { type: Boolean, default: false }, write: { type: Boolean, default: false }, delete: { type: Boolean, default: false }, }, agriculture: { read: { type: Boolean, default: false }, write: { type: Boolean, default: false }, delete: { type: Boolean, default: false }, }, waste: { read: { type: Boolean, default: false }, write: { type: Boolean, default: false }, delete: { type: Boolean, default: false }, }, construction: { read: { type: Boolean, default: false }, write: { type: Boolean, default: false }, delete: { type: Boolean, default: false }, }, analytics: { read: { type: Boolean, default: false }, write: { type: Boolean, default: false }, }, users: { read: { type: Boolean, default: false }, write: { type: Boolean, default: false }, delete: { type: Boolean, default: false }, }, }, profile: { phone: String, address: String, department: String, position: String, avatar: String, }, isActive: { type: Boolean, default: true, }, isEmailVerified: { type: Boolean, default: false, }, emailVerificationToken: String, passwordResetToken: String, passwordResetExpires: Date, lastLogin: Date, loginAttempts: { type: Number, default: 0, }, lockUntil: Date, createdAt: { type: Date, default: Date.now, }, updatedAt: { type: Date, default: Date.now, }, }) // Indexes userSchema.index({ email: 1 }) userSchema.index({ role: 1 }) userSchema.index({ isActive: 1 }) // Virtual for account lock userSchema.virtual("isLocked").get(function () { return !!(this.lockUntil && this.lockUntil > Date.now()) }) // Pre-save middleware to hash password userSchema.pre("save", async function (next) { if (!this.isModified("password")) return next() try { const salt = await bcrypt.genSalt(12) this.password = await bcrypt.hash(this.password, salt) next() } catch (error) { next(error) } }) // Pre-save middleware to update timestamp userSchema.pre("save", function (next) { this.updatedAt = new Date() next() }) // Method to compare password userSchema.methods.comparePassword = async function (candidatePassword) { return bcrypt.compare(candidatePassword, this.password) } // Method to increment login attempts userSchema.methods.incLoginAttempts = function () { // If we have a previous lock that has expired, restart at 1 if (this.lockUntil && this.lockUntil < Date.now()) { return this.updateOne({ $unset: { lockUntil: 1 }, $set: { loginAttempts: 1 }, }) } const updates = { $inc: { loginAttempts: 1 } } // Lock account after 5 failed attempts for 2 hours if (this.loginAttempts + 1 >= 5 && !this.isLocked) { updates.$set = { lockUntil: Date.now() + 2 * 60 * 60 * 1000 } // 2 hours } return this.updateOne(updates) } // Method to reset login attempts userSchema.methods.resetLoginAttempts = function () { return this.updateOne({ $unset: { loginAttempts: 1, lockUntil: 1 }, }) } // Method to check if user has permission userSchema.methods.hasPermission = function (module, action) { if (this.role === "admin") return true return this.permissions[module] && this.permissions[module][action] } // Method to check if user has module access userSchema.methods.hasModuleAccess = function (moduleName) { if (this.role === "admin") return true return this.modules.includes(moduleName) } module.exports = mongoose.model("User", userSchema) [V0_FILE]javascript:file="client/src/components/layout/DynamicSidebar.js" isMerged="true" "use client" import { useNavigate, useLocation } from "react-router-dom" import styled from "styled-components" import { FaHome, FaChartBar, FaTractor, FaSignOutAlt, FaChevronLeft, FaChevronRight, FaLeaf, FaBoxes, FaRecycle, FaHardHat, FaUsers, FaCog, } from "react-icons/fa" import { useAuth } from "../../contexts/AuthContext" const SidebarContainer = styled.div` position: fixed; left: 0; top: 0; height: 100vh; width: ${(props) => (props.$isOpen ? "280px" : "72px")}; background: ${(props) => props.theme.gradients?.hero || "linear-gradient(180deg, #0f2419 0%, #1b4332 50%, #2d5016 100%)"}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; box-shadow: ${(props) => props.theme.shadows?.xl || "0 20px 25px -5px rgba(27, 67, 50, 0.1)"}; border-right: 1px solid rgba(255, 255, 255, 0.1); @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { transform: translateX(${(props) => (props.$isOpen ? "0" : "-100%")}); width: 280px; } ` const SidebarHeader = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"} ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; position: relative; ` const Logo = styled.div` width: 40px; height: 40px; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}; flex-shrink: 0; ` const BrandInfo = styled.div` opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transform: translateX(${(props) => (props.$isOpen ? "0" : "-20px")}); transition: all 0.3s ease; overflow: hidden; ` const BrandName = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: white; margin: 0; white-space: nowrap; ` const BrandSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: rgba(255, 255, 255, 0.7); margin: 0; white-space: nowrap; ` const ToggleButton = styled.button` position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: 2px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; color: ${(props) => props.theme.colors?.primary || "#1b4332"}; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.3s ease; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; &:hover { background: ${(props) => props.theme.colors?.primary || "#1b4332"}; color: white; transform: translateY(-50%) scale(1.1); } @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { display: none; } ` const Navigation = styled.nav` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} 0; flex: 1; overflow-y: auto; ` const NavSection = styled.div` margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const NavSectionTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 ${(props) => props.theme.spacing?.md || "1rem"} 0; padding: 0 ${(props) => props.theme.spacing?.lg || "1.5rem"}; opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transition: opacity 0.3s ease; ` const NavList = styled.ul` list-style: none; margin: 0; padding: 0; ` const NavItem = styled.li` margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const NavLink = styled.button` width: 100%; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; padding: ${(props) => props.theme.spacing?.md || "1rem"} ${(props) => props.theme.spacing?.lg || "1.5rem"}; background: none; border: none; color: ${(props) => (props.$active ? "white" : "rgba(255, 255, 255, 0.7)")}; font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; cursor: pointer; transition: all 0.3s ease; border-radius: 0 ${(props) => props.theme.borderRadius?.lg || "0.75rem"} ${(props) => props.theme.borderRadius?.lg || "0.75rem"} 0; margin-right: ${(props) => props.theme.spacing?.md || "1rem"}; position: relative; overflow: hidden; &::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: ${(props) => props.theme.colors?.accent || "#40916c"}; transform: scaleY(${(props) => (props.$active ? 1 : 0)}); transition: transform 0.3s ease; } &:hover { background: rgba(255, 255, 255, 0.1); color: white; transform: translateX(4px); } ${(props) => props.$active && ` background: rgba(255, 255, 255, 0.15); color: white; box-shadow: ${props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; `} ` const NavIcon = styled.div` font-size: 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; ` const NavText = styled.span` opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transform: translateX(${(props) => (props.$isOpen ? "0" : "-20px")}); transition: all 0.3s ease; white-space: nowrap; overflow: hidden; ` const NotificationBadge = styled.span` position: absolute; top: -2px; right: -2px; background: ${(props) => props.theme.colors?.error || "#c53030"}; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid ${(props) => props.theme.colors?.surface || "#ffffff"}; ` const SidebarFooter = styled.div` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-top: 1px solid rgba(255, 255, 255, 0.1); ` const UserProfile = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; padding: ${(props) => props.theme.spacing?.md || "1rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: rgba(255, 255, 255, 0.1); margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const UserAvatar = styled.div` width: 36px; height: 36px; border-radius: 50%; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; flex-shrink: 0; ` const UserInfo = styled.div` opacity: ${(props) => (props.$isOpen ? 1 : 0)}; transform: translateX(${(props) => (props.$isOpen ? "0" : "-20px")}); transition: all 0.3s ease; overflow: hidden; ` const UserName = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: white; white-space: nowrap; ` const UserRole = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: rgba(255, 255, 255, 0.7); white-space: nowrap; ` // Module configuration with icons and routes const MODULE_CONFIG = { IMS: { icon: , label: "Inventory", path: "/inventory", section: "modules", }, ISA: { icon: , label: "Agriculture", path: "/agriculture", section: "modules", }, "Waste Management": { icon: , label: "Waste Management", path: "/waste", section: "modules", }, "Construction Sites": { icon: , label: "Construction", path: "/construction", section: "modules", }, Analytics: { icon: , label: "Analytics", path: "/analytics", section: "main", }, "User Management": { icon: , label: "Users", path: "/users", section: "admin", }, } const DynamicSidebar = ({ isOpen, onToggle }) => { const navigate = useNavigate() const location = useLocation() const { user, logout } = useAuth() // Base navigation items (always visible) const baseNavItems = [ { id: "dashboard", label: "Dashboard", icon: , path: "/dashboard", section: "main", }, ] // Generate navigation items based on user modules and permissions const generateNavItems = () => { if (!user) return baseNavItems const navItems = [...baseNavItems] // Add module-based navigation if (user.modules && user.modules.length > 0) { user.modules.forEach((moduleName) => { const moduleConfig = MODULE_CONFIG[moduleName] if (moduleConfig) { navItems.push({ id: moduleName.toLowerCase().replace(/\s+/g, "-"), label: moduleConfig.label, icon: moduleConfig.icon, path: moduleConfig.path, section: moduleConfig.section, module: moduleName, }) } }) } // Add settings for all users navItems.push({ id: "settings", label: "Settings", icon: , path: "/settings", section: "system", }) return navItems } // Group navigation items by section const groupNavItems = (items) => { const grouped = { main: [], modules: [], admin: [], system: [], } items.forEach((item) => { const section = item.section || "main" if (grouped[section]) { grouped[section].push(item) } }) return grouped } const navItems = generateNavItems() const groupedNavItems = groupNavItems(navItems) const handleNavigation = (path) => { navigate(path) } const handleLogout = () => { if (window.confirm("Are you sure you want to sign out?")) { logout() navigate("/login") } } const isActiveRoute = (path) => { return location.pathname === path || location.pathname.startsWith(path + "/") } const getInitials = (firstName, lastName) => { return `${firstName?.charAt(0) || ""}${lastName?.charAt(0) || ""}`.toUpperCase() } // Get notification count (mock data - replace with real data) const getNotificationCount = () => { // This would come from your notification system return 3 } return ( ManagePro Business Suite {isOpen ? : } {/* Main Section */} {groupedNavItems.main.length > 0 && ( Main {groupedNavItems.main.map((item) => ( handleNavigation(item.path)}> {item.icon} {item.id === "notifications" && getNotificationCount() > 0 && ( {getNotificationCount()} )} {item.label} ))} )} {/* Modules Section */} {groupedNavItems.modules.length > 0 && ( Modules {groupedNavItems.modules.map((item) => ( handleNavigation(item.path)}> {item.icon} {item.label} ))} )} {/* Admin Section */} {groupedNavItems.admin.length > 0 && ( Administration {groupedNavItems.admin.map((item) => ( handleNavigation(item.path)}> {item.icon} {item.label} ))} )} {/* System Section */} {groupedNavItems.system.length > 0 && ( System {groupedNavItems.system.map((item) => ( handleNavigation(item.path)}> {item.icon} {item.label} ))} )} {user && ( {getInitials(user.firstName, user.lastName)} {`${user.firstName} ${user.lastName}`} {user.role} )} Sign out ) } export default DynamicSidebar [V0_FILE]javascript:file="client/src/components/charts/ChartComponents.js" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { LineChart, Line, AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, RadialBarChart, RadialBar, ComposedChart, } from "recharts" const ChartContainer = styled.div` width: 100%; height: ${(props) => props.height || "400px"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const ChartHeader = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; padding-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const ChartTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; ` const ChartSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; margin: 0; ` const FilterButtons = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const FilterButton = styled.button` padding: ${(props) => props.theme.spacing?.xs || "0.25rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; background: ${(props) => (props.$active ? props.theme.colors?.primary || "#1b4332" : "transparent")}; color: ${(props) => (props.$active ? "white" : props.theme.colors?.text || "#2d3748")}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; cursor: pointer; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.primary || "#1b4332"}; color: white; } ` // Color schemes for charts const COLORS = { primary: ["#1b4332", "#2d5a47", "#40916c", "#52734d", "#74a478"], success: ["#2d5016", "#52734d", "#74a478", "#95d5b2", "#b7e4c7"], warning: ["#ed8936", "#dd6b20", "#c05621", "#9c4221", "#7c2d12"], error: ["#c53030", "#e53e3e", "#f56565", "#fc8181", "#feb2b2"], info: ["#3182ce", "#4299e1", "#63b3ed", "#90cdf4", "#bee3f8"], } // Revenue Trend Chart export const RevenueTrendChart = ({ data, period = "7d" }) => { const [selectedPeriod, setSelectedPeriod] = useState(period) const periods = [ { key: "7d", label: "7D" }, { key: "30d", label: "30D" }, { key: "90d", label: "90D" }, { key: "1y", label: "1Y" }, ] return (

Revenue Trends Track revenue performance over time

{periods.map((p) => ( setSelectedPeriod(p.key)}> {p.label} ))} ) } // Inventory Distribution Chart export const InventoryDistributionChart = ({ data }) => { return (

Inventory Distribution Stock levels by category

`${name} ${(percent * 100).toFixed(0)}%`} outerRadius={80} fill="#8884d8" dataKey="value" > {data.map((entry, index) => ( ))} ) } // Sales Performance Chart export const SalesPerformanceChart = ({ data }) => { return (

Sales Performance Monthly sales comparison

) } // Module Performance Chart export const ModulePerformanceChart = ({ data }) => { return (

Module Performance Usage and efficiency metrics

) } // Real-time Activity Chart export const RealTimeActivityChart = ({ data }) => { const [liveData, setLiveData] = useState(data) useEffect(() => { const interval = setInterval(() => { // Simulate real-time data updates setLiveData((prevData) => prevData.map((item) => ({ ...item, value: Math.max(0, item.value + (Math.random() - 0.5) * 10), })), ) }, 2000) return () => clearInterval(interval) }, []) return (

Real-time Activity Live system metrics

Live

) } // KPI Dashboard Chart export const KPIDashboardChart = ({ data }) => { return (

Key Performance Indicators Critical business metrics

) } export default { RevenueTrendChart, InventoryDistributionChart, SalesPerformanceChart, ModulePerformanceChart, RealTimeActivityChart, KPIDashboardChart, } [V0_FILE]javascript:file="client/src/components/dashboard/DynamicDashboard.js" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { useAuth } from "../../contexts/AuthContext" import { FaDollarSign, FaTractor, FaBoxes, FaRecycle, FaHardHat, FaEye, FaDownload } from "react-icons/fa" import StatsCard from "./StatsCard" import { RevenueTrendChart, InventoryDistributionChart, SalesPerformanceChart, ModulePerformanceChart, RealTimeActivityChart, KPIDashboardChart, } from "../charts/ChartComponents" const DashboardContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { padding: ${(props) => props.theme.spacing?.md || "1rem"}; } ` const WelcomeSection = styled.div` margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; text-align: center; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; text-align: left; } ` const WelcomeTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; } ` const WelcomeSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; margin: 0; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; ` const StatsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { grid-template-columns: repeat(2, 1fr); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; } @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { grid-template-columns: 1fr; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; } ` const ChartsGrid = styled.div` display: grid; grid-template-columns: 2fr 1fr; gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { grid-template-columns: 1fr; } ` const ModulesSection = styled.div` margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const SectionTitle = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; &::before { content: ''; width: 4px; height: 28px; background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; } ` const ModulesGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: ${(props) => props.theme.spacing?.xl || "2rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { grid-template-columns: 1fr; } ` const ModuleCard = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.gradient || props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; } &:hover { transform: translateY(-4px); box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 20px rgba(64, 145, 108, 0.3)"}, ${(props) => props.theme.shadows?.xl || "0 20px 25px -5px rgba(27, 67, 50, 0.1)"}; } ` const ModuleHeader = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ModuleIcon = styled.div` width: 56px; height: 56px; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; background: ${(props) => props.gradient || props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; ` const ModuleInfo = styled.div` flex: 1; ` const ModuleTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0 0 ${(props) => props.theme.spacing?.xs || "0.25rem"} 0; ` const ModuleStatus = styled.span` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.accent || "#40916c"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; &::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: ${(props) => props.theme.colors?.accent || "#40916c"}; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } ` const ModuleStats = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const StatItem = styled.div` text-align: center; ` const StatValue = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const StatLabel = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; text-transform: uppercase; letter-spacing: 0.5px; ` const QuickActions = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; margin-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ActionButton = styled.button` padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; &:hover { background: ${(props) => props.theme.colors?.primary || "#1b4332"}; color: white; border-color: ${(props) => props.theme.colors?.primary || "#1b4332"}; } ` // Module configurations with dynamic data const MODULE_CONFIGS = { IMS: { icon: , title: "Inventory Management", gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", getStats: (data) => ({ items: data?.inventory?.totalItems || "0", lowStock: data?.inventory?.lowStockItems || "0", value: data?.inventory?.totalValue || "$0", }), }, ISA: { icon: , title: "Smart Agriculture", gradient: "linear-gradient(135deg, #52734d 0%, #74a478 100%)", getStats: (data) => ({ fields: data?.agriculture?.activeFields || "0", crops: data?.agriculture?.activeCrops || "0", yield: data?.agriculture?.expectedYield || "0%", }), }, "Waste Management": { icon: , title: "Waste Management", gradient: "linear-gradient(135deg, #ed8936 0%, #dd6b20 100%)", getStats: (data) => ({ processed: data?.waste?.processedToday || "0", revenue: data?.waste?.revenue || "$0", efficiency: data?.waste?.efficiency || "0%", }), }, "Construction Sites": { icon: , title: "Construction Sites", gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", getStats: (data) => ({ sites: data?.construction?.activeSites || "0", equipment: data?.construction?.equipment || "0", progress: data?.construction?.avgProgress || "0%", }), }, } const DynamicDashboard = () => { const { user } = useAuth() const [dashboardData, setDashboardData] = useState({}) const [loading, setLoading] = useState(true) // Generate stats based on user modules const generateStatsData = () => { const baseStats = [ { title: "Total Revenue", value: "$2,847,392", change: "+12.5% from last month", changeType: "positive", icon: , iconColor: "#1b4332", }, ] if (user?.modules?.includes("IMS")) { baseStats.push({ title: "Inventory Items", value: "12,847", change: "+8.2% from last month", changeType: "positive", icon: , iconColor: "#667eea", }) } if (user?.modules?.includes("ISA")) { baseStats.push({ title: "Active Fields", value: "156", change: "+15.3% from last month", changeType: "positive", icon: , iconColor: "#52734d", }) } if (user?.modules?.includes("Waste Management")) { baseStats.push({ title: "Waste Revenue", value: "$89,432", change: "+23.8% from last month", changeType: "positive", icon: , iconColor: "#ed8936", }) } if (user?.modules?.includes("Construction Sites")) { baseStats.push({ title: "Active Sites", value: "23", change: "+5.1% from last month", changeType: "positive", icon: , iconColor: "#f093fb", }) } return baseStats } // Generate chart data const generateChartData = () => { return { revenue: [ { date: "Jan", revenue: 45000 }, { date: "Feb", revenue: 52000 }, { date: "Mar", revenue: 48000 }, { date: "Apr", revenue: 61000 }, { date: "May", revenue: 55000 }, { date: "Jun", revenue: 67000 }, ], inventory: [ { name: "Electronics", value: 35 }, { name: "Construction", value: 25 }, { name: "Agriculture", value: 20 }, { name: "Food Items", value: 20 }, ], sales: [ { month: "Jan", sales: 4000, target: 4500 }, { month: "Feb", sales: 3000, target: 3500 }, { month: "Mar", sales: 5000, target: 4800 }, { month: "Apr", sales: 4500, target: 4200 }, { month: "May", sales: 6000, target: 5500 }, { month: "Jun", sales: 5500, target: 5200 }, ], modulePerformance: [ { name: "IMS", value: 85, fill: "#667eea" }, { name: "ISA", value: 92, fill: "#52734d" }, { name: "Waste", value: 78, fill: "#ed8936" }, { name: "Construction", value: 88, fill: "#f093fb" }, ], realTime: [ { time: "00:00", value: 45 }, { time: "00:05", value: 52 }, { time: "00:10", value: 48 }, { time: "00:15", value: 61 }, { time: "00:20", value: 55 }, { time: "00:25", value: 67 }, ], kpi: [ { name: "Customer Satisfaction", current: 85, target: 90 }, { name: "Operational Efficiency", current: 78, target: 85 }, { name: "Revenue Growth", current: 92, target: 88 }, { name: "Cost Reduction", current: 76, target: 80 }, ], } } useEffect(() => { // Simulate loading dashboard data const loadDashboardData = async () => { setLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) const mockData = { inventory: { totalItems: "12,847", lowStockItems: "23", totalValue: "$1,234,567", }, agriculture: { activeFields: "156", activeCrops: "12", expectedYield: "94%", }, waste: { processedToday: "2.3T", revenue: "$89,432", efficiency: "87%", }, construction: { activeSites: "23", equipment: "145", avgProgress: "76%", }, } setDashboardData(mockData) setLoading(false) } loadDashboardData() }, []) const statsData = generateStatsData() const chartData = generateChartData() const handleModuleClick = (moduleName) => { // Navigate to specific module console.log(`Navigating to ${moduleName}`) } const renderUserModules = () => { if (!user?.modules || user.modules.length === 0) { return (

No modules assigned. Contact your administrator to get access to modules.

) } return ( {user.modules.map((moduleName) => { const config = MODULE_CONFIGS[moduleName] if (!config) return null const stats = config.getStats(dashboardData) return ( handleModuleClick(moduleName)}> {config.icon} {config.title} Active and running {Object.entries(stats).map(([key, value]) => ( {value} {key} ))} View Export ) })} ) } if (loading) { return (

Loading dashboard...

) } return ( Welcome back, {user?.firstName || "User"}! Here's what's happening with your {user?.modules?.length || 0} active modules today. {statsData.map((stat, index) => ( ))} {/* Charts Section - Only show if user has analytics access */} {user?.modules?.includes("Analytics") && ( <> Analytics & Insights )} Your Active Modules {renderUserModules()} ) } export default DynamicDashboard [V0_FILE]javascript:file="client/src/components/analytics/AdvancedAnalytics.js" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { useAuth } from "../../contexts/AuthContext" import { FaChartLine, FaDownload, FaCalendar, FaTrendingUp, FaArrowUp, FaArrowDown, FaDollarSign, FaFilter, FaSync, FaEye, } from "react-icons/fa" import Card from "../common/Card" import Button from "../common/Button" import { RevenueTrendChart, InventoryDistributionChart, SalesPerformanceChart, ModulePerformanceChart, RealTimeActivityChart, KPIDashboardChart, } from "../charts/ChartComponents" const AnalyticsContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; ` const HeaderSection = styled.div` background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; color: white; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const HeaderContent = styled.div`` const HeaderTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const HeaderSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; opacity: 0.9; margin: 0; ` const ControlsSection = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.md || "1rem"}; align-items: center; background: rgba(255, 255, 255, 0.1); padding: ${(props) => props.theme.spacing?.md || "1rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; flex-wrap: wrap; ` const DateRangeSelector = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; align-items: center; ` const DateInput = styled.input` background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; color: white; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; &::placeholder { color: rgba(255, 255, 255, 0.7); } &::-webkit-calendar-picker-indicator { filter: invert(1); } ` const FilterButton = styled(Button)` background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: white; &:hover { background: rgba(255, 255, 255, 0.3); } ` const MetricsOverview = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; ` const MetricCard = styled(Card)` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: none; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(27, 67, 50, 0.1)"}; transition: all 0.3s ease; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: ${(props) => props.gradient || props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; } &:hover { transform: translateY(-2px); box-shadow: ${(props) => props.theme.shadows?.glowLarge || "0 0 40px rgba(64, 145, 108, 0.2)"}; } ` const MetricHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const MetricIcon = styled.div` width: 48px; height: 48px; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.gradient || props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; ` const MetricValue = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const MetricLabel = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const MetricChange = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.xs || "0.25rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => (props.positive ? props.theme.colors?.success || "#2d5016" : props.theme.colors?.error || "#c53030")}; ` const ChartsSection = styled.div` display: grid; grid-template-columns: 1fr; gap: ${(props) => props.theme.spacing?.xl || "2rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; ` const ChartRow = styled.div` display: grid; grid-template-columns: ${(props) => props.columns || "2fr 1fr"}; gap: ${(props) => props.theme.spacing?.xl || "2rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { grid-template-columns: 1fr; } ` const ReportsSection = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(27, 67, 50, 0.1)"}; ` const ReportsHeader = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; padding-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const ReportsTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; ` const ReportsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const ReportCard = styled.div` border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; transition: all 0.3s ease; cursor: pointer; &:hover { border-color: ${(props) => props.theme.colors?.primary || "#1b4332"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; } ` const ReportTitle = styled.h4` font-size: ${(props) => props.theme.typography?.fontSize?.base || "1rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0 0 ${(props) => props.theme.spacing?.sm || "0.5rem"} 0; ` const ReportDescription = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; margin: 0 0 ${(props) => props.theme.spacing?.md || "1rem"} 0; ` const ReportActions = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const AdvancedAnalytics = () => { const { user } = useAuth() const [dateRange, setDateRange] = useState({ startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], endDate: new Date().toISOString().split("T")[0], }) const [selectedModules, setSelectedModules] = useState(user?.modules || []) const [analyticsData, setAnalyticsData] = useState({}) const [loading, setLoading] = useState(true) // Generate analytics data based on user modules const generateAnalyticsData = () => { const baseMetrics = [ { title: "Total Revenue", value: "$2,847,392", change: "+12.5%", positive: true, icon: , gradient: "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)", }, ] if (user?.modules?.includes("IMS")) { baseMetrics.push({ title: "Inventory Turnover", value: "4.2x", change: "+8.3%", positive: true, icon: , gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", }) } if (user?.modules?.includes("ISA")) { baseMetrics.push({ title: "Crop Yield", value: "94.2%", change: "+15.7%", positive: true, icon: , gradient: "linear-gradient(135deg, #52734d 0%, #74a478 100%)", }) } if (user?.modules?.includes("Waste Management")) { baseMetrics.push({ title: "Waste Efficiency", value: "87.5%", change: "+5.2%", positive: true, icon: , gradient: "linear-gradient(135deg, #ed8936 0%, #dd6b20 100%)", }) } return baseMetrics } // Generate chart data const generateChartData = () => { return { revenue: [ { date: "Jan", revenue: 145000 }, { date: "Feb", revenue: 152000 }, { date: "Mar", revenue: 148000 }, { date: "Apr", revenue: 161000 }, { date: "May", revenue: 155000 }, { date: "Jun", revenue: 167000 }, { date: "Jul", revenue: 172000 }, { date: "Aug", revenue: 168000 }, { date: "Sep", revenue: 175000 }, { date: "Oct", revenue: 182000 }, { date: "Nov", revenue: 178000 }, { date: "Dec", revenue: 185000 }, ], inventory: [ { name: "Electronics", value: 35 }, { name: "Construction Materials", value: 25 }, { name: "Agricultural Supplies", value: 20 }, { name: "Food Items", value: 15 }, { name: "Others", value: 5 }, ], sales: [ { month: "Jan", sales: 14000, target: 14500 }, { month: "Feb", sales: 13000, target: 13500 }, { month: "Mar", sales: 15000, target: 14800 }, { month: "Apr", sales: 14500, target: 14200 }, { month: "May", sales: 16000, target: 15500 }, { month: "Jun", sales: 15500, target: 15200 }, ], modulePerformance: [ { name: "IMS", value: 85, fill: "#667eea" }, { name: "ISA", value: 92, fill: "#52734d" }, { name: "Waste", value: 78, fill: "#ed8936" }, { name: "Construction", value: 88, fill: "#f093fb" }, ], realTime: [ { time: "00:00", value: 145 }, { time: "00:05", value: 152 }, { time: "00:10", value: 148 }, { time: "00:15", value: 161 }, { time: "00:20", value: 155 }, { time: "00:25", value: 167 }, ], kpi: [ { name: "Customer Satisfaction", current: 85, target: 90 }, { name: "Operational Efficiency", current: 78, target: 85 }, { name: "Revenue Growth", current: 92, target: 88 }, { name: "Cost Reduction", current: 76, target: 80 }, { name: "Quality Score", current: 89, target: 85 }, { name: "Employee Productivity", current: 82, target: 80 }, ], } } const availableReports = [ { title: "Monthly Revenue Report", description: "Comprehensive revenue analysis with trends and forecasts", modules: ["IMS", "ISA", "Waste Management", "Construction Sites"], }, { title: "Inventory Analysis", description: "Stock levels, turnover rates, and optimization recommendations", modules: ["IMS"], }, { title: "Agricultural Performance", description: "Crop yields, soil health, and seasonal analysis", modules: ["ISA"], }, { title: "Waste Management Efficiency", description: "Processing rates, revenue generation, and environmental impact", modules: ["Waste Management"], }, { title: "Construction Progress", description: "Project timelines, resource utilization, and cost analysis", modules: ["Construction Sites"], }, { title: "Cross-Module Analytics", description: "Integrated insights across all your active modules", modules: user?.modules || [], }, ] useEffect(() => { const loadAnalyticsData = async () => { setLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) setAnalyticsData(generateChartData()) setLoading(false) } loadAnalyticsData() }, [dateRange, selectedModules]) const handleDateChange = (field, value) => { setDateRange((prev) => ({ ...prev, [field]: value, })) } const handleModuleFilter = (modules) => { setSelectedModules(modules) } const exportReport = (reportType) => { // In a real app, this would generate and download the specific report alert(`Exporting ${reportType} report...`) } const refreshData = () => { setLoading(true) setTimeout(() => { setAnalyticsData(generateChartData()) setLoading(false) }, 1000) } const metricsData = generateAnalyticsData() // Filter reports based on user modules const userReports = availableReports.filter((report) => report.modules.some((module) => user?.modules?.includes(module)), ) if (!user?.modules?.includes("Analytics")) { return (

Access Denied

You don't have access to the Analytics module. Contact your administrator to request access.

) } return ( Advanced Analytics Comprehensive insights and reporting for your {user?.modules?.length || 0} active modules handleDateChange("startDate", e.target.value)} /> to handleDateChange("endDate", e.target.value)} /> handleModuleFilter(user?.modules || [])}> Filter Refresh exportReport("comprehensive")}> Export All {metricsData.map((metric, index) => (

{metric.value} {metric.title} {metric.positive ? : } {metric.change} from last period

{metric.icon} ))} {!loading && analyticsData && ( )} Available Reports {userReports.map((report, index) => ( {report.title} {report.description} ))} ) } export default AdvancedAnalytics [V0_FILE]javascript:file="server/middleware/auth.js" isMerged="true" const jwt = require("jsonwebtoken") const User = require("../models/User") // Verify JWT token const verifyToken = async (req, res, next) => { try { const token = req.header("Authorization")?.replace("Bearer ", "") if (!token) { return res.status(401).json({ success: false, message: "Access denied. No token provided.", }) } const decoded = jwt.verify(token, process.env.JWT_SECRET || "your-secret-key") const user = await User.findById(decoded.userId).select("-password") if (!user) { return res.status(401).json({ success: false, message: "Invalid token. User not found.", }) } if (!user.isActive) { return res.status(403).json({ success: false, message: "Account is deactivated.", }) } req.user = user next() } catch (error) { console.error("Token verification error:", error) res.status(401).json({ success: false, message: "Invalid token.", }) } } // Check if user has specific permission const checkPermission = (module, action) => { return (req, res, next) => { if (!req.user) { return res.status(401).json({ success: false, message: "Authentication required.", }) } // Admin has all permissions if (req.user.role === "admin") { return next() } // Check specific permission if (!req.user.hasPermission(module, action)) { return res.status(403).json({ success: false, message: `Access denied. You don't have ${action} permission for ${module}.`, }) } next() } } // Check if user has module access const checkModuleAccess = (moduleName) => { return (req, res, next) => { if (!req.user) { return res.status(401).json({ success: false, message: "Authentication required.", }) } // Admin has access to all modules if (req.user.role === "admin") { return next() } // Check module access if (!req.user.hasModuleAccess(moduleName)) { return res.status(403).json({ success: false, message: `Access denied. You don't have access to ${moduleName} module.`, }) } next() } } // Check if user is admin const requireAdmin = (req, res, next) => { if (!req.user) { return res.status(401).json({ success: false, message: "Authentication required.", }) } if (req.user.role !== "admin") { return res.status(403).json({ success: false, message: "Access denied. Admin privileges required.", }) } next() } // Rate limiting middleware const rateLimit = (windowMs = 15 * 60 * 1000, max = 100) => { const requests = new Map() return (req, res, next) => { const key = req.ip || req.connection.remoteAddress const now = Date.now() const windowStart = now - windowMs // Clean old entries for (const [ip, timestamps] of requests.entries()) { requests.set( ip, timestamps.filter((time) => time > windowStart), ) if (requests.get(ip).length === 0) { requests.delete(ip) } } // Check current requests const userRequests = requests.get(key) || [] if (userRequests.length >= max) { return res.status(429).json({ success: false, message: "Too many requests. Please try again later.", }) } // Add current request userRequests.push(now) requests.set(key, userRequests) next() } } module.exports = { verifyToken, checkPermission, checkModuleAccess, requireAdmin, rateLimit, } [V0_FILE]javascript:file="server/routes/analytics.js" isMerged="true" const express = require("express") const { verifyToken, checkModuleAccess } = require("../middleware/auth") const Inventory = require("../models/Inventory") const PurchaseOrder = require("../models/PurchaseOrder") const Receipt = require("../models/Receipt") const User = require("../models/User") const router = express.Router() // Get dashboard analytics router.get("/dashboard", verifyToken, checkModuleAccess("Analytics"), async (req, res) => { try { const { startDate, endDate, modules } = req.query const userModules = req.user.modules // Parse date range const start = startDate ? new Date(startDate) : new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) const end = endDate ? new Date(endDate) : new Date() const analytics = {} // Revenue analytics const revenueData = await Receipt.aggregate([ { $match: { createdAt: { $gte: start, $lte: end }, }, }, { $group: { _id: { year: { $year: "$createdAt" }, month: { $month: "$createdAt" }, day: { $dayOfMonth: "$createdAt" }, }, totalRevenue: { $sum: "$total" }, count: { $sum: 1 }, }, }, { $sort: { "_id.year": 1, "_id.month": 1, "_id.day": 1 }, }, ]) analytics.revenue = { total: revenueData.reduce((sum, item) => sum + item.totalRevenue, 0), trend: revenueData.map((item) => ({ date: `${item._id.year}-${String(item._id.month).padStart(2, "0")}-${String(item._id.day).padStart(2, "0")}`, revenue: item.totalRevenue, transactions: item.count, })), } // Inventory analytics (if user has IMS access) if (userModules.includes("IMS")) { const inventoryStats = await Inventory.aggregate([ { $group: { _id: "$category", totalItems: { $sum: "$quantity" }, totalValue: { $sum: { $multiply: ["$quantity", "$price"] } }, lowStockItems: { $sum: { $cond: [{ $lte: ["$quantity", "$minStock"] }, 1, 0], }, }, }, }, ]) const totalInventoryValue = await Inventory.aggregate([ { $group: { _id: null, totalValue: { $sum: { $multiply: ["$quantity", "$price"] } }, totalItems: { $sum: "$quantity" }, uniqueProducts: { $sum: 1 }, }, }, ]) analytics.inventory = { totalValue: totalInventoryValue[0]?.totalValue || 0, totalItems: totalInventoryValue[0]?.totalItems || 0, uniqueProducts: totalInventoryValue[0]?.uniqueProducts || 0, categoryBreakdown: inventoryStats, lowStockCount: inventoryStats.reduce((sum, cat) => sum + cat.lowStockItems, 0), } } // Purchase order analytics if (userModules.includes("IMS")) { const purchaseOrderStats = await PurchaseOrder.aggregate([ { $match: { createdAt: { $gte: start, $lte: end }, }, }, { $group: { _id: "$status", count: { $sum: 1 }, totalValue: { $sum: "$total" }, }, }, ]) analytics.purchaseOrders = { total: purchaseOrderStats.reduce((sum, item) => sum + item.count, 0), totalValue: purchaseOrderStats.reduce((sum, item) => sum + item.totalValue, 0), statusBreakdown: purchaseOrderStats, } } // User activity analytics (admin only) if (req.user.role === "admin") { const userStats = await User.aggregate([ { $group: { _id: "$role", count: { $sum: 1 }, activeUsers: { $sum: { $cond: ["$isActive", 1, 0], }, }, }, }, ]) const recentLogins = await User.find({ lastLogin: { $gte: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) }, }).countDocuments() analytics.users = { total: await User.countDocuments(), active: await User.countDocuments({ isActive: true }), recentLogins, roleBreakdown: userStats, } } // Module performance metrics const moduleMetrics = {} if (userModules.includes("IMS")) { const inventoryTurnover = await calculateInventoryTurnover(start, end) moduleMetrics.IMS = { performance: inventoryTurnover, efficiency: Math.min(100, inventoryTurnover * 20), // Convert to percentage status: "active", } } if (userModules.includes("ISA")) { // Mock agriculture data - replace with real calculations moduleMetrics.ISA = { performance: 92, efficiency: 88, status: "active", } } if (userModules.includes("Waste Management")) { // Mock waste management data - replace with real calculations moduleMetrics["Waste Management"] = { performance: 78, efficiency: 85, status: "active", } } if (userModules.includes("Construction Sites")) { // Mock construction data - replace with real calculations moduleMetrics["Construction Sites"] = { performance: 88, efficiency: 82, status: "active", } } analytics.modules = moduleMetrics res.json({ success: true, data: analytics, dateRange: { start, end }, modules: userModules, }) } catch (error) { console.error("Analytics error:", error) res.status(500).json({ success: false, message: "Error fetching analytics data", error: error.message, }) } }) // Get specific module analytics router.get("/module/:moduleName", verifyToken, async (req, res) => { try { const { moduleName } = req.params const { startDate, endDate } = req.query // Check if user has access to this module if (!req.user.hasModuleAccess(moduleName) && req.user.role !== "admin") { return res.status(403).json({ success: false, message: `Access denied to ${moduleName} module`, }) } const start = startDate ? new Date(startDate) : new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) const end = endDate ? new Date(endDate) : new Date() let moduleData = {} switch (moduleName) { case "IMS": moduleData = await getInventoryAnalytics(start, end) break case "ISA": moduleData = await getAgricultureAnalytics(start, end) break case "Waste Management": moduleData = await getWasteManagementAnalytics(start, end) break case "Construction Sites": moduleData = await getConstructionAnalytics(start, end) break default: return res.status(400).json({ success: false, message: "Invalid module name", }) } res.json({ success: true, module: moduleName, data: moduleData, dateRange: { start, end }, }) } catch (error) { console.error("Module analytics error:", error) res.status(500).json({ success: false, message: "Error fetching module analytics", error: error.message, }) } }) // Generate and export reports router.post("/reports/generate", verifyToken, checkModuleAccess("Analytics"), async (req, res) => { try { const { reportType, modules, dateRange, format = "json" } = req.body // Validate user has access to requested modules const userModules = req.user.modules const requestedModules = modules.filter((module) => userModules.includes(module)) if (requestedModules.length === 0) { return res.status(403).json({ success: false, message: "No access to requested modules", }) } const start = new Date(dateRange.start) const end = new Date(dateRange.end) const reportData = { reportType, generatedAt: new Date(), dateRange: { start, end }, modules: requestedModules, data: {}, } // Generate data for each requested module for (const module of requestedModules) { switch (module) { case "IMS": reportData.data.inventory = await getInventoryAnalytics(start, end) break case "ISA": reportData.data.agriculture = await getAgricultureAnalytics(start, end) break case "Waste Management": reportData.data.waste = await getWasteManagementAnalytics(start, end) break case "Construction Sites": reportData.data.construction = await getConstructionAnalytics(start, end) break } } // Add summary metrics reportData.summary = generateReportSummary(reportData.data) res.json({ success: true, report: reportData, downloadUrl: `/api/analytics/reports/download/${Date.now()}`, // Mock download URL }) } catch (error) { console.error("Report generation error:", error) res.status(500).json({ success: false, message: "Error generating report", error: error.message, }) } }) // Helper functions async function calculateInventoryTurnover(start, end) { try { const sales = await Receipt.aggregate([ { $match: { createdAt: { $gte: start, $lte: end }, }, }, { $group: { _id: null, totalSales: { $sum: "$total" }, }, }, ]) const avgInventory = await Inventory.aggregate([ { $group: { _id: null, avgValue: { $avg: { $multiply: ["$quantity", "$price"] } }, }, }, ]) const totalSales = sales[0]?.totalSales || 0 const avgInventoryValue = avgInventory[0]?.avgValue || 1 return totalSales / avgInventoryValue } catch (error) { console.error("Inventory turnover calculation error:", error) return 0 } } async function getInventoryAnalytics(start, end) { // Detailed inventory analytics const analytics = { overview: await Inventory.aggregate([ { $group: { _id: null, totalItems: { $sum: "$quantity" }, totalValue: { $sum: { $multiply: ["$quantity", "$price"] } }, uniqueProducts: { $sum: 1 }, avgPrice: { $avg: "$price" }, }, }, ]), categoryBreakdown: await Inventory.aggregate([ { $group: { _id: "$category", items: { $sum: "$quantity" }, value: { $sum: { $multiply: ["$quantity", "$price"] } }, products: { $sum: 1 }, }, }, { $sort: { value: -1 } }, ]), lowStockItems: await Inventory.find({ $expr: { $lte: ["$quantity", "$minStock"] }, }).select("name quantity minStock category"), recentTransactions: await Receipt.find({ createdAt: { $gte: start, $lte: end }, }) .sort({ createdAt: -1 }) .limit(10) .populate("customer", "name email"), } return analytics } async function getAgricultureAnalytics(start, end) { // Mock agriculture analytics - replace with real data return { overview: { totalFields: 156, activeFields: 142, totalArea: "2,450 hectares", avgYield: "94.2%", }, cropBreakdown: [ { crop: "Wheat", area: 850, yield: 95.2, status: "Growing" }, { crop: "Corn", area: 650, yield: 92.8, status: "Harvesting" }, { crop: "Soybeans", area: 450, yield: 96.1, status: "Planted" }, { crop: "Rice", area: 500, yield: 93.5, status: "Growing" }, ], soilHealth: { excellent: 45, good: 38, fair: 15, poor: 2, }, irrigation: { automated: 78, manual: 22, efficiency: 87.5, }, } } async function getWasteManagementAnalytics(start, end) { // Mock waste management analytics - replace with real data return { overview: { totalProcessed: "45.2 tons", revenue: "$89,432", efficiency: "87.5%", recyclingRate: "92.3%", }, wasteTypes: [ { type: "Organic", amount: 18.5, revenue: 35420 }, { type: "Plastic", amount: 12.3, revenue: 28950 }, { type: "Metal", amount: 8.7, revenue: 15680 }, { type: "Paper", amount: 5.7, revenue: 9382 }, ], partners: [ { name: "EcoRecycle Corp", volume: 15.2, revenue: 28500 }, { name: "Green Solutions", volume: 12.8, revenue: 24200 }, { name: "Waste Pro", volume: 10.5, revenue: 19800 }, ], } } async function getConstructionAnalytics(start, end) { // Mock construction analytics - replace with real data return { overview: { activeSites: 23, totalEquipment: 145, avgProgress: "76.3%", onTimeProjects: "89.2%", }, siteBreakdown: [ { site: "Downtown Plaza", progress: 85, budget: 2500000, status: "On Track" }, { site: "Residential Complex A", progress: 67, budget: 1800000, status: "Delayed" }, { site: "Industrial Park", progress: 92, budget: 3200000, status: "Ahead" }, { site: "Shopping Center", progress: 54, budget: 2100000, status: "On Track" }, ], equipment: { operational: 132, maintenance: 8, repair: 5, utilization: 91.2, }, costs: { materials: 1250000, labor: 890000, equipment: 450000, overhead: 320000, }, } } function generateReportSummary(data) { const summary = { totalModules: Object.keys(data).length, keyMetrics: {}, recommendations: [], } // Generate key metrics based on available data if (data.inventory) { summary.keyMetrics.inventoryValue = data.inventory.overview[0]?.totalValue || 0 summary.keyMetrics.lowStockItems = data.inventory.lowStockItems?.length || 0 } if (data.agriculture) { summary.keyMetrics.avgYield = data.agriculture.overview.avgYield summary.keyMetrics.activeFields = data.agriculture.overview.activeFields } if (data.waste) { summary.keyMetrics.wasteRevenue = data.waste.overview.revenue summary.keyMetrics.recyclingRate = data.waste.overview.recyclingRate } if (data.construction) { summary.keyMetrics.avgProgress = data.construction.overview.avgProgress summary.keyMetrics.onTimeProjects = data.construction.overview.onTimeProjects } // Generate recommendations if (data.inventory?.lowStockItems?.length > 0) { summary.recommendations.push("Consider restocking low inventory items to avoid stockouts") } if (data.agriculture?.soilHealth?.poor > 5) { summary.recommendations.push("Implement soil improvement programs for fields with poor health") } return summary } module.exports = router [V0_FILE]typescriptreact:file="server/routes/auth.js" isEdit="true" isQuickEdit="true" isMerged="true" const express = require("express") const jwt = require("jsonwebtoken") const crypto = require("crypto") const nodemailer = require("nodemailer") const User = require("../models/User") const router = express.Router() // Gmail transporter setup const transporter = nodemailer.createTransporter({ service: "gmail", auth: { user: process.env.GMAIL_USER, // Your Gmail address pass: process.env.GMAIL_APP_PASSWORD, // Gmail App Password (not regular password) }, }) // Generate JWT token const generateToken = (userId) => { return jwt.sign({ userId }, process.env.JWT_SECRET || "your-secret-key", { expiresIn: "7d", }) } // Register user router.post("/register", async (req, res) => { try { const { firstName, lastName, email, password, role = "user" } = req.body // Validate required fields if (!firstName || !lastName || !email || !password) { return res.status(400).json({ success: false, message: "All fields are required", }) } // Check if user already exists const existingUser = await User.findOne({ email }) if (existingUser) { return res.status(400).json({ success: false, message: "User with this email already exists", }) } // Generate email verification token const emailVerificationToken = crypto.randomBytes(32).toString("hex") // Create new user const user = new User({ firstName, lastName, email, password, role, emailVerificationToken, modules: role === "admin" ? ["IMS", "ISA", "Waste Management", "Construction Sites", "Analytics", "User Management"] : ["IMS"], permissions: role === "admin" ? { inventory: { read: true, write: true, delete: true }, agriculture: { read: true, write: true, delete: true }, waste: { read: true, write: true, delete: true }, construction: { read: true, write: true, delete: true }, analytics: { read: true, write: true }, users: { read: true, write: true, delete: true }, } : { inventory: { read: true, write: false, delete: false }, agriculture: { read: false, write: false, delete: false }, waste: { read: false, write: false, delete: false }, construction: { read: false, write: false, delete: false }, analytics: { read: false, write: false }, users: { read: false, write: false, delete: false }, }, }) await user.save() // Send verification email if (process.env.GMAIL_USER) { const verificationUrl = `${process.env.CLIENT_URL}/verify-email/${emailVerificationToken}` await transporter.sendMail({ from: `"Comprehensive Management System" <${process.env.GMAIL_USER}>`, to: email, subject: "Verify Your Email - Comprehensive Management System", html: `

Welcome to Comprehensive Management System!

Hello ${firstName},

Thank you for registering with our platform. Please click the button below to verify your email address:

Verify Email Address

If the button doesn't work, copy and paste this link into your browser:

${verificationUrl}

This link will expire in 24 hours.

If you didn't create an account, please ignore this email.

`, }) } // Generate token const token = generateToken(user._id) res.status(201).json({ success: true, message: "User registered successfully. Please check your email for verification.", token, user: { id: user._id, firstName: user.firstName, lastName: user.lastName, email: user.email, role: user.role, modules: user.modules, permissions: user.permissions, isEmailVerified: user.isEmailVerified, }, }) } catch (error) { console.error("Registration error:", error) res.status(500).json({ success: false, message: "Error registering user", error: error.message, }) } }) // Login user router.post("/login", async (req, res) => { try { const { email, password } = req.body // Validate required fields if (!email || !password) { return res.status(400).json({ success: false, message: "Email and password are required", }) } // Find user const user = await User.findOne({ email }) if (!user) { return res.status(401).json({ success: false, message: "Invalid email or password", }) } // Check if account is locked if (user.isLocked) { return res.status(423).json({ success: false, message: "Account is temporarily locked due to too many failed login attempts", }) } // Check if account is active if (!user.isActive) { return res.status(403).json({ success: false, message: "Account is deactivated. Please contact administrator.", }) } // Verify password const isPasswordValid = await user.comparePassword(password) if (!isPasswordValid) { await user.incLoginAttempts() return res.status(401).json({ success: false, message: "Invalid email or password", }) } // Reset login attempts on successful login if (user.loginAttempts > 0) { await user.resetLoginAttempts() } // Update last login user.lastLogin = new Date() await user.save() // Generate token const token = generateToken(user._id) res.json({ success: true, message: "Login successful", token, user: { id: user._id, firstName: user.firstName, lastName: user.lastName, email: user.email, role: user.role, modules: user.modules, permissions: user.permissions, isEmailVerified: user.isEmailVerified, lastLogin: user.lastLogin, }, }) } catch (error) { console.error("Login error:", error) res.status(500).json({ success: false, message: "Error logging in", error: error.message, }) } }) // Forgot password router.post("/forgot-password", async (req, res) => { try { const { email } = req.body const user = await User.findOne({ email }) if (!user) { return res.status(404).json({ success: false, message: "User with this email does not exist", }) } // Generate reset token const resetToken = crypto.randomBytes(32).toString("hex") user.passwordResetToken = resetToken user.passwordResetExpires = Date.now() + 3600000 // 1 hour await user.save() // Send reset email if (process.env.GMAIL_USER) { const resetUrl = `${process.env.CLIENT_URL}/reset-password/${resetToken}` await transporter.sendMail({ from: `"Comprehensive Management System" <${process.env.GMAIL_USER}>`, to: email, subject: "Password Reset - Comprehensive Management System", html: `

Password Reset Request

Hello ${user.firstName},

You requested a password reset. Click the button below to reset your password:

Reset Password

This link will expire in 1 hour.

If you didn't request this, please ignore this email.

`, }) } res.json({ success: true, message: "Password reset email sent", }) } catch (error) { console.error("Forgot password error:", error) res.status(500).json({ success: false, message: "Error sending reset email", error: error.message, }) } }) // Reset password router.post("/reset-password/:token", async (req, res) => { try { const { token } = req.params const { password } = req.body const user = await User.findOne({ passwordResetToken: token, passwordResetExpires: { $gt: Date.now() }, }) if (!user) { return res.status(400).json({ success: false, message: "Invalid or expired reset token", }) } user.password = password user.passwordResetToken = undefined user.passwordResetExpires = undefined await user.save() res.json({ success: true, message: "Password reset successfully", }) } catch (error) { console.error("Reset password error:", error) res.status(500).json({ success: false, message: "Error resetting password", error: error.message, }) } }) module.exports = router [V0_FILE]javascript:file="server/config/email.js" isMerged="true" const nodemailer = require("nodemailer") // Gmail configuration const createGmailTransporter = () => { if (!process.env.GMAIL_USER || !process.env.GMAIL_APP_PASSWORD) { console.warn("Gmail credentials not configured. Email functionality will be disabled.") return null } const transporter = nodemailer.createTransporter({ service: "gmail", auth: { user: process.env.GMAIL_USER, pass: process.env.GMAIL_APP_PASSWORD, }, }) // Verify connection configuration transporter.verify((error, success) => { if (error) { console.error("Gmail configuration error:", error) } else { console.log("Gmail server is ready to send emails") } }) return transporter } // Email templates const emailTemplates = { verification: (firstName, verificationUrl) => ({ subject: "Verify Your Email - Comprehensive Management System", html: `

Comprehensive Management System

Your Complete Business Solution

Welcome ${firstName}! 🎉

Thank you for joining our comprehensive management platform. You're just one step away from accessing powerful tools for:

📦 Inventory Management System
🌱 Intelligent Smart Agriculture
♻️ Waste Management Solutions
🏗️ Construction Site Management
📊 Advanced Analytics & Reporting

✅ Verify Email Address

⚠️ Important: This verification link expires in 24 hours for security reasons.

If the button doesn't work, copy and paste this link into your browser:
${verificationUrl}

If you didn't create an account, please ignore this email.
© 2024 Comprehensive Management System. All rights reserved.

`, }), passwordReset: (firstName, resetUrl) => ({ subject: "🔐 Password Reset - Comprehensive Management System", html: `

🔐 Password Reset

Comprehensive Management System

Hello ${firstName},

We received a request to reset your password for your Comprehensive Management System account.

If you made this request, click the button below to set a new password:

🔑 Reset Password

⏰ Security Notice: This reset link expires in 1 hour for your security.

🛡️ Didn't request this? Your account is safe. Simply ignore this email and your password won't be changed.

If the button doesn't work, copy and paste this link into your browser:
${resetUrl}

For security questions, contact our support team.
© 2024 Comprehensive Management System. All rights reserved.

`, }), welcomeComplete: (firstName, modules) => ({ subject: "🎉 Welcome to Your Management Dashboard!", html: `

🎉 You're All Set!

Welcome to Comprehensive Management System

Welcome ${firstName}! 🚀

Your account is now active and ready to use

📋 Your Assigned Modules:

${modules .map((module) => { const moduleIcons = { IMS: "📦", ISA: "🌱", "Waste Management": "♻️", "Construction Sites": "🏗️", Analytics: "📊", "User Management": "👥", } return `

${moduleIcons[module] || "📋"} ${module}

` }) .join("")}

🚀 Access Your Dashboard

💡 Pro Tip: Explore each module to discover powerful features tailored for your business needs!

Need help getting started? Check our documentation or contact support.
© 2024 Comprehensive Management System. All rights reserved.

`, }), } // Send email function const sendEmail = async (to, template, data) => { const transporter = createGmailTransporter() if (!transporter) { console.log("Email not sent - Gmail not configured") return false } try { const emailContent = emailTemplates[template]( data.firstName, data.url || data.resetUrl || data.verificationUrl, data.modules, ) await transporter.sendMail({ from: `"Comprehensive Management System" <${process.env.GMAIL_USER}>`, to: to, subject: emailContent.subject, html: emailContent.html, }) console.log(`Email sent successfully to ${to}`) return true } catch (error) { console.error("Email sending error:", error) return false } } module.exports = { createGmailTransporter, sendEmail, emailTemplates, } [V0_FILE]javascript:file="server/utils/emailService.js" isMerged="true" const { sendEmail } = require("../config/email") class EmailService { static async sendVerificationEmail(user, verificationToken) { const verificationUrl = `${process.env.CLIENT_URL}/verify-email/${verificationToken}` return await sendEmail(user.email, "verification", { firstName: user.firstName, verificationUrl: verificationUrl, }) } static async sendPasswordResetEmail(user, resetToken) { const resetUrl = `${process.env.CLIENT_URL}/reset-password/${resetToken}` return await sendEmail(user.email, "passwordReset", { firstName: user.firstName, resetUrl: resetUrl, }) } static async sendWelcomeEmail(user) { return await sendEmail(user.email, "welcomeComplete", { firstName: user.firstName, modules: user.modules, }) } static async sendModuleAccessEmail(user, newModules) { const moduleList = newModules.join(", ") return await sendEmail(user.email, "moduleAccess", { firstName: user.firstName, modules: newModules, moduleList: moduleList, }) } static async sendAccountStatusEmail(user, status) { const statusMessages = { activated: "Your account has been activated and you now have full access to the system.", deactivated: "Your account has been temporarily deactivated. Please contact your administrator.", locked: "Your account has been locked due to security reasons. Please contact support.", unlocked: "Your account has been unlocked and you can now log in normally.", } return await sendEmail(user.email, "accountStatus", { firstName: user.firstName, status: status, message: statusMessages[status], }) } } module.exports = EmailService [V0_FILE]plaintext:file=".env.example" isMerged="true" # Database Configuration MONGODB_URI=mongodb://localhost:27017/comprehensive-management # For MongoDB Atlas: mongodb+srv://username:password@cluster.mongodb.net/database # JWT Configuration JWT_SECRET=your-super-secret-jwt-key-here-make-it-long-and-random # Gmail Configuration (for sending emails) GMAIL_USER=your-email@gmail.com GMAIL_APP_PASSWORD=your-16-character-app-password # Client URL (for email links) CLIENT_URL=http://localhost:3000 # Server Configuration PORT=5000 NODE_ENV=development # Rate Limiting RATE_LIMIT_WINDOW_MS=900000 RATE_LIMIT_MAX_REQUESTS=100 # Session Configuration SESSION_SECRET=your-session-secret-key [V0_FILE]markdown:file="docs/GMAIL_SETUP.md" isMerged="true" # Gmail Configuration Guide ## Setting up Gmail for Email Services ### Step 1: Enable 2-Factor Authentication 1. Go to your Google Account settings 2. Navigate to "Security" 3. Enable "2-Step Verification" ### Step 2: Generate App Password 1. In Google Account settings, go to "Security" 2. Under "2-Step Verification", click "App passwords" 3. Select "Mail" as the app 4. Select "Other" as the device and name it "Management System" 5. Copy the 16-character password generated ### Step 3: Configure Environment Variables \`\`\`bash GMAIL_USER=your-email@gmail.com GMAIL_APP_PASSWORD=abcd-efgh-ijkl-mnop # 16-character app password \`\`\` ### Step 4: Test Configuration The system will automatically verify the Gmail connection on startup. ## Important Notes ⚠️ **Security Reminders:** - Never use your regular Gmail password - Always use App Passwords for applications - Keep your App Password secure and don't share it - Regularly rotate your App Passwords 📧 **Email Features:** - Account verification emails - Password reset emails - Welcome emails with module information - Account status notifications - Module access updates ## Troubleshooting ### Common Issues: 1. **"Invalid credentials"** - Check if you're using App Password, not regular password 2. **"Less secure app access"** - This is not needed with App Passwords 3. **"Authentication failed"** - Verify 2FA is enabled and App Password is correct ### Testing Email Functionality: \`\`\`javascript // Test email in your application const EmailService = require('./server/utils/emailService') // Test verification email await EmailService.sendVerificationEmail(user, token) \`\`\` ## Email Templates The system includes beautiful, responsive email templates for: - ✅ Email verification - 🔐 Password reset - 🎉 Welcome messages - 📋 Module access updates - 🛡️ Account status changes All templates are mobile-responsive and include your branding. [V0_FILE]javascript:file="server/server.js" isMerged="true" const express = require("express") const mongoose = require("mongoose") const cors = require("cors") const helmet = require("helmet") const compression = require("compression") const morgan = require("morgan") const rateLimit = require("express-rate-limit") const path = require("path") require("dotenv").config() // Import routes const authRoutes = require("./routes/auth") const inventoryRoutes = require("./routes/inventory") const analyticsRoutes = require("./routes/analytics") const userRoutes = require("./routes/users") const dashboardRoutes = require("./routes/dashboard") const reportRoutes = require("./routes/reports") const notificationRoutes = require("./routes/notifications") // Import middleware const { verifyToken } = require("./middleware/auth") const errorHandler = require("./middleware/errorHandler") const logger = require("./utils/logger") const app = express() const PORT = process.env.PORT || 5000 // Security middleware app.use( helmet({ contentSecurityPolicy: { directives: { defaultSrc: ["'self'"], styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"], fontSrc: ["'self'", "https://fonts.gstatic.com"], imgSrc: ["'self'", "data:", "https:"], scriptSrc: ["'self'"], }, }, }), ) // Rate limiting const limiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15 minutes max: 100, // limit each IP to 100 requests per windowMs message: { success: false, message: "Too many requests from this IP, please try again later.", }, standardHeaders: true, legacyHeaders: false, }) const authLimiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15 minutes max: 5, // limit each IP to 5 auth requests per windowMs message: { success: false, message: "Too many authentication attempts, please try again later.", }, skipSuccessfulRequests: true, }) // Apply rate limiting app.use(limiter) app.use("/api/auth", authLimiter) // Middleware app.use(compression()) app.use(morgan("combined", { stream: { write: (message) => logger.info(message.trim()) } })) app.use( cors({ origin: process.env.CLIENT_URL || "http://localhost:3000", credentials: true, methods: ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"], allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With"], }), ) app.use(express.json({ limit: "10mb" })) app.use(express.urlencoded({ extended: true, limit: "10mb" })) // Static files app.use("/uploads", express.static(path.join(__dirname, "uploads"))) app.use("/public", express.static(path.join(__dirname, "public"))) // Health check endpoint app.get("/health", (req, res) => { res.json({ success: true, message: "Server is running", timestamp: new Date().toISOString(), uptime: process.uptime(), environment: process.env.NODE_ENV || "development", }) }) // API Routes app.use("/api/auth", authRoutes) app.use("/api/inventory", verifyToken, inventoryRoutes) app.use("/api/analytics", verifyToken, analyticsRoutes) app.use("/api/users", verifyToken, userRoutes) app.use("/api/dashboard", verifyToken, dashboardRoutes) app.use("/api/reports", verifyToken, reportRoutes) app.use("/api/notifications", verifyToken, notificationRoutes) // API documentation endpoint app.get("/api", (req, res) => { res.json({ success: true, message: "Comprehensive Management System API", version: "1.0.0", endpoints: { auth: "/api/auth", inventory: "/api/inventory", analytics: "/api/analytics", users: "/api/users", dashboard: "/api/dashboard", reports: "/api/reports", notifications: "/api/notifications", }, documentation: "/api/docs", }) }) // 404 handler for API routes app.use("/api/*", (req, res) => { res.status(404).json({ success: false, message: "API endpoint not found", path: req.originalUrl, }) }) // Serve React app in production if (process.env.NODE_ENV === "production") { app.use(express.static(path.join(__dirname, "../client/build"))) app.get("*", (req, res) => { res.sendFile(path.join(__dirname, "../client/build/index.html")) }) } // Error handling middleware (must be last) app.use(errorHandler) // Database connection const connectDB = async () => { try { const conn = await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }) logger.info(`MongoDB Connected: ${conn.connection.host}`) // Create indexes for better performance await createIndexes() } catch (error) { logger.error("Database connection error:", error) process.exit(1) } } // Create database indexes const createIndexes = async () => { try { const User = require("./models/User") const Inventory = require("./models/Inventory") const PurchaseOrder = require("./models/PurchaseOrder") const Receipt = require("./models/Receipt") // User indexes await User.collection.createIndex({ email: 1 }, { unique: true }) await User.collection.createIndex({ role: 1 }) await User.collection.createIndex({ isActive: 1 }) await User.collection.createIndex({ lastLogin: -1 }) // Inventory indexes await Inventory.collection.createIndex({ name: 1 }) await Inventory.collection.createIndex({ category: 1 }) await Inventory.collection.createIndex({ barcode: 1 }, { unique: true, sparse: true }) await Inventory.collection.createIndex({ quantity: 1 }) await Inventory.collection.createIndex({ minStock: 1 }) // Purchase Order indexes await PurchaseOrder.collection.createIndex({ orderNumber: 1 }, { unique: true }) await PurchaseOrder.collection.createIndex({ status: 1 }) await PurchaseOrder.collection.createIndex({ createdAt: -1 }) await PurchaseOrder.collection.createIndex({ supplier: 1 }) // Receipt indexes await Receipt.collection.createIndex({ receiptNumber: 1 }, { unique: true }) await Receipt.collection.createIndex({ customer: 1 }) await Receipt.collection.createIndex({ createdAt: -1 }) await Receipt.collection.createIndex({ total: -1 }) logger.info("Database indexes created successfully") } catch (error) { logger.error("Error creating indexes:", error) } } // Graceful shutdown const gracefulShutdown = (signal) => { logger.info(`Received ${signal}. Shutting down gracefully...`) server.close(() => { logger.info("HTTP server closed") mongoose.connection.close(false, () => { logger.info("MongoDB connection closed") process.exit(0) }) }) // Force close after 10 seconds setTimeout(() => { logger.error("Could not close connections in time, forcefully shutting down") process.exit(1) }, 10000) } // Start server const server = app.listen(PORT, () => { logger.info(`Server running on port ${PORT}`) logger.info(`Environment: ${process.env.NODE_ENV || "development"}`) logger.info(`Client URL: ${process.env.CLIENT_URL || "http://localhost:3000"}`) }) // Connect to database connectDB() // Handle unhandled promise rejections process.on("unhandledRejection", (err, promise) => { logger.error("Unhandled Promise Rejection:", err) server.close(() => { process.exit(1) }) }) // Handle uncaught exceptions process.on("uncaughtException", (err) => { logger.error("Uncaught Exception:", err) process.exit(1) }) // Handle graceful shutdown process.on("SIGTERM", () => gracefulShutdown("SIGTERM")) process.on("SIGINT", () => gracefulShutdown("SIGINT")) module.exports = app [V0_FILE]javascript:file="client/src/contexts/AuthContext.js" isMerged="true" "use client" import { createContext, useContext, useReducer, useEffect } from "react" import { toast } from "react-toastify" import api from "../utils/api" // Initial state const initialState = { user: null, token: localStorage.getItem("token"), isAuthenticated: false, loading: true, error: null, } // Action types const AUTH_ACTIONS = { LOGIN_START: "LOGIN_START", LOGIN_SUCCESS: "LOGIN_SUCCESS", LOGIN_FAILURE: "LOGIN_FAILURE", LOGOUT: "LOGOUT", LOAD_USER_START: "LOAD_USER_START", LOAD_USER_SUCCESS: "LOAD_USER_SUCCESS", LOAD_USER_FAILURE: "LOAD_USER_FAILURE", CLEAR_ERROR: "CLEAR_ERROR", UPDATE_USER: "UPDATE_USER", } // Reducer const authReducer = (state, action) => { switch (action.type) { case AUTH_ACTIONS.LOGIN_START: case AUTH_ACTIONS.LOAD_USER_START: return { ...state, loading: true, error: null, } case AUTH_ACTIONS.LOGIN_SUCCESS: localStorage.setItem("token", action.payload.token) return { ...state, user: action.payload.user, token: action.payload.token, isAuthenticated: true, loading: false, error: null, } case AUTH_ACTIONS.LOAD_USER_SUCCESS: return { ...state, user: action.payload, isAuthenticated: true, loading: false, error: null, } case AUTH_ACTIONS.LOGIN_FAILURE: case AUTH_ACTIONS.LOAD_USER_FAILURE: localStorage.removeItem("token") return { ...state, user: null, token: null, isAuthenticated: false, loading: false, error: action.payload, } case AUTH_ACTIONS.LOGOUT: localStorage.removeItem("token") return { ...state, user: null, token: null, isAuthenticated: false, loading: false, error: null, } case AUTH_ACTIONS.UPDATE_USER: return { ...state, user: { ...state.user, ...action.payload }, } case AUTH_ACTIONS.CLEAR_ERROR: return { ...state, error: null, } default: return state } } // Create context const AuthContext = createContext() // Auth Provider export const AuthProvider = ({ children }) => { const [state, dispatch] = useReducer(authReducer, initialState) // Load user on app start useEffect(() => { if (state.token) { loadUser() } else { dispatch({ type: AUTH_ACTIONS.LOAD_USER_FAILURE, payload: null }) } }, []) // Load user from token const loadUser = async () => { try { dispatch({ type: AUTH_ACTIONS.LOAD_USER_START }) const response = await api.get("/auth/me") if (response.data.success) { dispatch({ type: AUTH_ACTIONS.LOAD_USER_SUCCESS, payload: response.data.user, }) } else { throw new Error(response.data.message) } } catch (error) { console.error("Load user error:", error) dispatch({ type: AUTH_ACTIONS.LOAD_USER_FAILURE, payload: error.response?.data?.message || "Failed to load user", }) } } // Login const login = async (email, password) => { try { dispatch({ type: AUTH_ACTIONS.LOGIN_START }) const response = await api.post("/auth/login", { email, password }) if (response.data.success) { dispatch({ type: AUTH_ACTIONS.LOGIN_SUCCESS, payload: { user: response.data.user, token: response.data.token, }, }) toast.success("Login successful!") return { success: true } } else { throw new Error(response.data.message) } } catch (error) { const errorMessage = error.response?.data?.message || "Login failed" dispatch({ type: AUTH_ACTIONS.LOGIN_FAILURE, payload: errorMessage, }) toast.error(errorMessage) return { success: false, error: errorMessage } } } // Register const register = async (userData) => { try { const response = await api.post("/auth/register", userData) if (response.data.success) { dispatch({ type: AUTH_ACTIONS.LOGIN_SUCCESS, payload: { user: response.data.user, token: response.data.token, }, }) toast.success("Registration successful! Please verify your email.") return { success: true } } else { throw new Error(response.data.message) } } catch (error) { const errorMessage = error.response?.data?.message || "Registration failed" toast.error(errorMessage) return { success: false, error: errorMessage } } } // Logout const logout = () => { dispatch({ type: AUTH_ACTIONS.LOGOUT }) toast.info("Logged out successfully") } // Update user const updateUser = (userData) => { dispatch({ type: AUTH_ACTIONS.UPDATE_USER, payload: userData }) } // Clear error const clearError = () => { dispatch({ type: AUTH_ACTIONS.CLEAR_ERROR }) } // Check if user has module access const hasModuleAccess = (moduleName) => { if (!state.user) return false if (state.user.role === "admin") return true return state.user.modules?.includes(moduleName) || false } // Check if user has permission const hasPermission = (module, action) => { if (!state.user) return false if (state.user.role === "admin") return true return state.user.permissions?.[module]?.[action] || false } // Check if user is admin const isAdmin = () => { return state.user?.role === "admin" } const value = { ...state, login, register, logout, loadUser, updateUser, clearError, hasModuleAccess, hasPermission, isAdmin, } return {children} } // Custom hook export const useAuth = () => { const context = useContext(AuthContext) if (!context) { throw new Error("useAuth must be used within an AuthProvider") } return context } export default AuthContext [V0_FILE]javascript:file="client/src/utils/api.js" isMerged="true" import axios from "axios" import { toast } from "react-toastify" // Create axios instance const api = axios.create({ baseURL: process.env.REACT_APP_API_URL || "http://localhost:5000/api", timeout: 30000, headers: { "Content-Type": "application/json", }, }) // Request interceptor api.interceptors.request.use( (config) => { // Add auth token to requests const token = localStorage.getItem("token") if (token) { config.headers.Authorization = `Bearer ${token}` } // Add request timestamp config.metadata = { startTime: new Date() } // Log request in development if (process.env.NODE_ENV === "development") { console.log(`🚀 ${config.method?.toUpperCase()} ${config.url}`, config.data) } return config }, (error) => { console.error("Request error:", error) return Promise.reject(error) }, ) // Response interceptor api.interceptors.response.use( (response) => { // Calculate request duration const duration = new Date() - response.config.metadata.startTime // Log response in development if (process.env.NODE_ENV === "development") { console.log(`✅ ${response.config.method?.toUpperCase()} ${response.config.url} (${duration}ms)`, response.data) } return response }, (error) => { // Calculate request duration const duration = error.config?.metadata ? new Date() - error.config.metadata.startTime : 0 // Log error in development if (process.env.NODE_ENV === "development") { console.error( `❌ ${error.config?.method?.toUpperCase()} ${error.config?.url} (${duration}ms)`, error.response?.data || error.message, ) } // Handle different error types if (error.response) { const { status, data } = error.response switch (status) { case 401: // Unauthorized - redirect to login localStorage.removeItem("token") if (window.location.pathname !== "/login") { toast.error("Session expired. Please login again.") window.location.href = "/login" } break case 403: // Forbidden toast.error(data.message || "Access denied") break case 404: // Not found toast.error(data.message || "Resource not found") break case 422: // Validation error if (data.errors && Array.isArray(data.errors)) { data.errors.forEach((err) => toast.error(err.message)) } else { toast.error(data.message || "Validation error") } break case 429: // Rate limit exceeded toast.error(data.message || "Too many requests. Please try again later.") break case 500: // Server error toast.error(data.message || "Internal server error") break default: // Other errors toast.error(data.message || `Error: ${status}`) } } else if (error.request) { // Network error toast.error("Network error. Please check your connection.") } else { // Other error toast.error(error.message || "An unexpected error occurred") } return Promise.reject(error) }, ) // API methods export const apiMethods = { // Auth endpoints auth: { login: (credentials) => api.post("/auth/login", credentials), register: (userData) => api.post("/auth/register", userData), logout: () => api.post("/auth/logout"), me: () => api.get("/auth/me"), forgotPassword: (email) => api.post("/auth/forgot-password", { email }), resetPassword: (token, password) => api.post(`/auth/reset-password/${token}`, { password }), verifyEmail: (token) => api.post(`/auth/verify-email/${token}`), }, // User endpoints users: { getAll: (params) => api.get("/users", { params }), getById: (id) => api.get(`/users/${id}`), create: (userData) => api.post("/users", userData), update: (id, userData) => api.put(`/users/${id}`, userData), delete: (id) => api.delete(`/users/${id}`), updateProfile: (userData) => api.put("/users/profile", userData), changePassword: (passwordData) => api.put("/users/change-password", passwordData), }, // Inventory endpoints inventory: { getAll: (params) => api.get("/inventory", { params }), getById: (id) => api.get(`/inventory/${id}`), create: (itemData) => api.post("/inventory", itemData), update: (id, itemData) => api.put(`/inventory/${id}`, itemData), delete: (id) => api.delete(`/inventory/${id}`), getLowStock: () => api.get("/inventory/low-stock"), getCategories: () => api.get("/inventory/categories"), bulkUpdate: (updates) => api.put("/inventory/bulk-update", updates), }, // Analytics endpoints analytics: { getDashboard: (params) => api.get("/analytics/dashboard", { params }), getModule: (moduleName, params) => api.get(`/analytics/module/${moduleName}`, { params }), generateReport: (reportData) => api.post("/analytics/reports/generate", reportData), getReports: (params) => api.get("/analytics/reports", { params }), }, // Dashboard endpoints dashboard: { getStats: () => api.get("/dashboard/stats"), getRecentActivity: () => api.get("/dashboard/recent-activity"), getNotifications: () => api.get("/dashboard/notifications"), }, // Notification endpoints notifications: { getAll: (params) => api.get("/notifications", { params }), markAsRead: (id) => api.put(`/notifications/${id}/read`), markAllAsRead: () => api.put("/notifications/mark-all-read"), delete: (id) => api.delete(`/notifications/${id}`), }, } export default api [V0_FILE]javascript:file="server/utils/logger.js" isMerged="true" const winston = require("winston") const path = require("path") // Define log format const logFormat = winston.format.combine( winston.format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }), winston.format.errors({ stack: true }), winston.format.json(), winston.format.prettyPrint(), ) // Create logger const logger = winston.createLogger({ level: process.env.LOG_LEVEL || "info", format: logFormat, defaultMeta: { service: "comprehensive-management-system" }, transports: [ // Write all logs with level 'error' and below to error.log new winston.transports.File({ filename: path.join(__dirname, "../logs/error.log"), level: "error", maxsize: 5242880, // 5MB maxFiles: 5, }), // Write all logs with level 'info' and below to combined.log new winston.transports.File({ filename: path.join(__dirname, "../logs/combined.log"), maxsize: 5242880, // 5MB maxFiles: 5, }), ], }) // If we're not in production, log to the console as well if (process.env.NODE_ENV !== "production") { logger.add( new winston.transports.Console({ format: winston.format.combine( winston.format.colorize(), winston.format.simple(), winston.format.printf(({ timestamp, level, message, ...meta }) => { return `${timestamp} [${level}]: ${message} ${Object.keys(meta).length ? JSON.stringify(meta, null, 2) : ""}` }), ), }), ) } module.exports = logger [V0_FILE]javascript:file="server/middleware/errorHandler.js" isMerged="true" const logger = require("../utils/logger") const errorHandler = (err, req, res, next) => { let error = { ...err } error.message = err.message // Log error logger.error(err) // Mongoose bad ObjectId if (err.name === "CastError") { const message = "Resource not found" error = { message, statusCode: 404 } } // Mongoose duplicate key if (err.code === 11000) { const message = "Duplicate field value entered" error = { message, statusCode: 400 } } // Mongoose validation error if (err.name === "ValidationError") { const message = Object.values(err.errors) .map((val) => val.message) .join(", ") error = { message, statusCode: 400 } } // JWT errors if (err.name === "JsonWebTokenError") { const message = "Invalid token" error = { message, statusCode: 401 } } if (err.name === "TokenExpiredError") { const message = "Token expired" error = { message, statusCode: 401 } } res.status(error.statusCode || 500).json({ success: false, message: error.message || "Server Error", ...(process.env.NODE_ENV === "development" && { stack: err.stack }), }) } module.exports = errorHandler [V0_FILE]javascript:file="server/routes/dashboard.js" isMerged="true" const express = require("express") const { verifyToken } = require("../middleware/auth") const User = require("../models/User") const Inventory = require("../models/Inventory") const PurchaseOrder = require("../models/PurchaseOrder") const Receipt = require("../models/Receipt") const router = express.Router() // Get dashboard statistics router.get("/stats", verifyToken, async (req, res) => { try { const userModules = req.user.modules || [] const stats = {} // Base stats for all users stats.overview = { totalRevenue: 0, monthlyGrowth: 0, activeModules: userModules.length, lastLogin: req.user.lastLogin, } // Calculate total revenue from receipts const revenueData = await Receipt.aggregate([ { $group: { _id: null, total: { $sum: "$total" }, count: { $sum: 1 }, }, }, ]) if (revenueData.length > 0) { stats.overview.totalRevenue = revenueData[0].total stats.overview.totalTransactions = revenueData[0].count } // Module-specific stats if (userModules.includes("IMS")) { const inventoryStats = await Inventory.aggregate([ { $group: { _id: null, totalItems: { $sum: "$quantity" }, totalValue: { $sum: { $multiply: ["$quantity", "$price"] } }, uniqueProducts: { $sum: 1 }, lowStockItems: { $sum: { $cond: [{ $lte: ["$quantity", "$minStock"] }, 1, 0], }, }, }, }, ]) stats.inventory = inventoryStats[0] || { totalItems: 0, totalValue: 0, uniqueProducts: 0, lowStockItems: 0, } } if (userModules.includes("ISA")) { // Mock agriculture stats - replace with real data stats.agriculture = { activeFields: 156, totalArea: 2450, avgYield: 94.2, activeCrops: 12, } } if (userModules.includes("Waste Management")) { // Mock waste management stats - replace with real data stats.waste = { processedToday: 2.3, monthlyRevenue: 89432, efficiency: 87.5, recyclingRate: 92.3, } } if (userModules.includes("Construction Sites")) { // Mock construction stats - replace with real data stats.construction = { activeSites: 23, totalEquipment: 145, avgProgress: 76.3, onTimeProjects: 89.2, } } // Admin-only stats if (req.user.role === "admin") { const userStats = await User.aggregate([ { $group: { _id: "$role", count: { $sum: 1 }, }, }, ]) stats.users = { total: await User.countDocuments(), active: await User.countDocuments({ isActive: true }), roleBreakdown: userStats, } } res.json({ success: true, data: stats, }) } catch (error) { console.error("Dashboard stats error:", error) res.status(500).json({ success: false, message: "Error fetching dashboard statistics", error: error.message, }) } }) // Get recent activity router.get("/recent-activity", verifyToken, async (req, res) => { try { const activities = [] // Recent receipts const recentReceipts = await Receipt.find().sort({ createdAt: -1 }).limit(5).populate("customer", "name") recentReceipts.forEach((receipt) => { activities.push({ type: "sale", title: "New Sale", description: `Sale of $${receipt.total} to ${receipt.customer?.name || "Customer"}`, timestamp: receipt.createdAt, icon: "💰", color: "#10b981", }) }) // Recent purchase orders const recentPOs = await PurchaseOrder.find().sort({ createdAt: -1 }).limit(3) recentPOs.forEach((po) => { activities.push({ type: "purchase", title: "Purchase Order", description: `PO #${po.orderNumber} - $${po.total}`, timestamp: po.createdAt, icon: "📦", color: "#3b82f6", }) }) // Recent low stock alerts const lowStockItems = await Inventory.find({ $expr: { $lte: ["$quantity", "$minStock"] }, }).limit(3) lowStockItems.forEach((item) => { activities.push({ type: "alert", title: "Low Stock Alert", description: `${item.name} is running low (${item.quantity} left)`, timestamp: new Date(), icon: "⚠️", color: "#f59e0b", }) }) // Sort activities by timestamp activities.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)) res.json({ success: true, data: activities.slice(0, 10), // Return top 10 activities }) } catch (error) { console.error("Recent activity error:", error) res.status(500).json({ success: false, message: "Error fetching recent activity", error: error.message, }) } }) // Get notifications router.get("/notifications", verifyToken, async (req, res) => { try { const notifications = [] // Low stock notifications if (req.user.modules?.includes("IMS")) { const lowStockItems = await Inventory.find({ $expr: { $lte: ["$quantity", "$minStock"] }, }).limit(5) lowStockItems.forEach((item) => { notifications.push({ id: `low-stock-${item._id}`, type: "warning", title: "Low Stock Alert", message: `${item.name} is running low (${item.quantity} remaining)`, timestamp: new Date(), read: false, action: { label: "Reorder", url: `/inventory/${item._id}`, }, }) }) } // System notifications notifications.push({ id: "welcome", type: "info", title: "Welcome to the System", message: "Your account has been successfully set up.", timestamp: req.user.createdAt, read: false, }) // Module-specific notifications if (req.user.modules?.includes("ISA")) { notifications.push({ id: "harvest-reminder", type: "info", title: "Harvest Season", message: "Corn fields are ready for harvest in the next 2 weeks.", timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), read: false, }) } res.json({ success: true, data: notifications, unreadCount: notifications.filter((n) => !n.read).length, }) } catch (error) { console.error("Notifications error:", error) res.status(500).json({ success: false, message: "Error fetching notifications", error: error.message, }) } }) module.exports = router [V0_FILE]javascript:file="package.json" isEdit="true" isMerged="true" { "name": "comprehensive-management-system", "version": "1.0.0", "description": "A comprehensive business management system with multiple modules", "main": "server/server.js", "scripts": { "dev": "concurrently \"npm run server\" \"npm run client\"", "server": "nodemon server/server.js", "client": "cd client && npm start", "build": "cd client && npm run build", "start": "node server/server.js", "test": "jest", "test:watch": "jest --watch", "lint": "eslint server client/src", "lint:fix": "eslint server client/src --fix", "seed": "node server/scripts/seedDatabase.js", "logs": "tail -f server/logs/combined.log" }, "keywords": ["management", "inventory", "agriculture", "waste-management", "construction", "analytics", "business"], "author": "Your Name", "license": "MIT", "dependencies": { "express": "^4.18.2", "mongoose": "^7.5.0", "bcryptjs": "^2.4.3", "jsonwebtoken": "^9.0.2", "nodemailer": "^6.9.4", "cors": "^2.8.5", "helmet": "^7.0.0", "compression": "^1.7.4", "morgan": "^1.10.0", "express-rate-limit": "^6.10.0", "winston": "^3.10.0", "dotenv": "^16.3.1", "multer": "^1.4.5-lts.1", "sharp": "^0.32.5", "joi": "^17.9.2", "moment": "^2.29.4", "lodash": "^4.17.21", "uuid": "^9.0.0" }, "devDependencies": { "nodemon": "^3.0.1", "concurrently": "^8.2.0", "jest": "^29.6.2", "supertest": "^6.3.3", "eslint": "^8.47.0", "prettier": "^3.0.2" }, "engines": { "node": ">=16.0.0", "npm": ">=8.0.0" } } [V0_FILE]javascript:file="client/src/contexts/NotificationContext.js" isMerged="true" "use client" import { createContext, useContext, useState, useEffect } from "react" import { toast } from "react-toastify" import api from "../utils/api" const NotificationContext = createContext() export const useNotifications = () => { const context = useContext(NotificationContext) if (!context) { throw new Error("useNotifications must be used within a NotificationProvider") } return context } export const NotificationProvider = ({ children }) => { const [notifications, setNotifications] = useState([]) const [unreadCount, setUnreadCount] = useState(0) // Fetch notifications on mount useEffect(() => { fetchNotifications() // Set up polling for new notifications const interval = setInterval(fetchNotifications, 30000) // Poll every 30 seconds return () => clearInterval(interval) }, []) const fetchNotifications = async () => { try { const response = await api.get("/notifications") if (response.data.success) { setNotifications(response.data.notifications) setUnreadCount(response.data.notifications.filter((n) => !n.read).length) } } catch (error) { console.error("Error fetching notifications:", error) } } const markAsRead = async (notificationId) => { try { await api.patch(`/notifications/${notificationId}/read`) setNotifications((prev) => prev.map((n) => (n._id === notificationId ? { ...n, read: true } : n))) setUnreadCount((prev) => Math.max(0, prev - 1)) } catch (error) { console.error("Error marking notification as read:", error) } } const markAllAsRead = async () => { try { await api.patch("/notifications/mark-all-read") setNotifications((prev) => prev.map((n) => ({ ...n, read: true }))) setUnreadCount(0) } catch (error) { console.error("Error marking all notifications as read:", error) } } const deleteNotification = async (notificationId) => { try { await api.delete(`/notifications/${notificationId}`) setNotifications((prev) => prev.filter((n) => n._id !== notificationId)) setUnreadCount((prev) => { const notification = notifications.find((n) => n._id === notificationId) return notification && !notification.read ? prev - 1 : prev }) } catch (error) { console.error("Error deleting notification:", error) } } const showToast = (message, type = "info") => { switch (type) { case "success": toast.success(message) break case "error": toast.error(message) break case "warning": toast.warning(message) break default: toast.info(message) } } const value = { notifications, unreadCount, markAsRead, markAllAsRead, deleteNotification, showToast, fetchNotifications, } return {children} } [V0_FILE]javascript:file="client/src/contexts/ThemeContext.js" isMerged="true" "use client" import { createContext, useContext, useState, useEffect } from "react" import theme from "../Theme" const ThemeContext = createContext() export const useTheme = () => { const context = useContext(ThemeContext) if (!context) { throw new Error("useTheme must be used within a ThemeProvider") } return context } const darkTheme = { ...theme, colors: { ...theme.colors, background: "#1a202c", surface: "#2d3748", surfaceLight: "#4a5568", text: "#ffffff", textLight: "#e2e8f0", textSecondary: "#a0aec0", border: "#4a5568", borderLight: "#2d3748", }, gradients: { ...theme.gradients, background: "linear-gradient(135deg, #1a202c 0%, #2d3748 100%)", surface: "linear-gradient(135deg, #2d3748 0%, #4a5568 100%)", card: "linear-gradient(135deg, #2d3748 0%, #4a5568 100%)", }, } export const ThemeProvider = ({ children }) => { const [currentTheme, setCurrentTheme] = useState(theme) const [isDarkMode, setIsDarkMode] = useState(false) useEffect(() => { // Check for saved theme preference const savedTheme = localStorage.getItem("theme") if (savedTheme === "dark") { setIsDarkMode(true) setCurrentTheme(darkTheme) } else { setIsDarkMode(false) setCurrentTheme(theme) } }, []) const toggleTheme = () => { const newIsDarkMode = !isDarkMode setIsDarkMode(newIsDarkMode) if (newIsDarkMode) { setCurrentTheme(darkTheme) localStorage.setItem("theme", "dark") } else { setCurrentTheme(theme) localStorage.setItem("theme", "light") } } const value = { currentTheme, isDarkMode, toggleTheme, lightTheme: theme, darkTheme, } return {children} } [V0_FILE]javascript:file="client/src/components/common/ErrorBoundary.js" isMerged="true" "use client" import React from "react" import styled from "styled-components" import Button from "./Button" const ErrorContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; text-align: center; background: ${(props) => props.theme.colors.surfaceLight}; ` const ErrorTitle = styled.h1` font-size: 2rem; color: ${(props) => props.theme.colors.error}; margin-bottom: 1rem; ` const ErrorMessage = styled.p` font-size: 1.1rem; color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 2rem; max-width: 600px; ` const ErrorDetails = styled.details` margin-top: 2rem; padding: 1rem; background: ${(props) => props.theme.colors.surface}; border-radius: ${(props) => props.theme.borderRadius.md}; border: 1px solid ${(props) => props.theme.colors.border}; max-width: 800px; width: 100%; ` const ErrorSummary = styled.summary` cursor: pointer; font-weight: ${(props) => props.theme.typography.fontWeight.medium}; color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 1rem; ` const ErrorStack = styled.pre` font-size: 0.875rem; color: ${(props) => props.theme.colors.textSecondary}; background: ${(props) => props.theme.colors.surfaceLight}; padding: 1rem; border-radius: ${(props) => props.theme.borderRadius.sm}; overflow-x: auto; white-space: pre-wrap; ` class ErrorBoundary extends React.Component { constructor(props) { super(props) this.state = { hasError: false, error: null, errorInfo: null } } static getDerivedStateFromError(error) { return { hasError: true } } componentDidCatch(error, errorInfo) { this.setState({ error: error, errorInfo: errorInfo, }) // Log error to console in development if (process.env.NODE_ENV === "development") { console.error("ErrorBoundary caught an error:", error, errorInfo) } // You can also log the error to an error reporting service here // logErrorToService(error, errorInfo) } handleReload = () => { window.location.reload() } handleGoHome = () => { window.location.href = "/dashboard" } render() { if (this.state.hasError) { return ( Oops! Something went wrong We're sorry, but something unexpected happened. Please try refreshing the page or go back to the dashboard.

{process.env.NODE_ENV === "development" && this.state.error && ( Error Details (Development Mode)

Error: {this.state.error.toString()}

{this.state.errorInfo && {this.state.errorInfo.componentStack}} )} ) } return this.props.children } } export default ErrorBoundary [V0_FILE]javascript:file="client/src/components/auth/PublicRoute.js" isMerged="true" "use client" import { Navigate } from "react-router-dom" import { useAuth } from "../../contexts/AuthContext" import LoadingSpinner from "../common/LoadingSpinner" const PublicRoute = ({ children }) => { const { user, loading } = useAuth() if (loading) { return } // If user is authenticated, redirect to dashboard if (user) { return } // If not authenticated, show the public route return children } export default PublicRoute [V0_FILE]javascript:file="client/src/pages/Profile.js" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { useAuth } from "../contexts/AuthContext" import { useNotifications } from "../contexts/NotificationContext" import Card from "../components/common/Card" import Button from "../components/common/Button" import Input from "../components/common/Input" import api from "../utils/api" const ProfileContainer = styled.div` max-width: 800px; margin: 0 auto; padding: 2rem; ` const ProfileHeader = styled.div` text-align: center; margin-bottom: 2rem; ` const ProfileTitle = styled.h1` font-size: 2rem; color: ${(props) => props.theme.colors.text}; margin-bottom: 0.5rem; ` const ProfileSubtitle = styled.p` color: ${(props) => props.theme.colors.textSecondary}; font-size: 1.1rem; ` const ProfileForm = styled.form` display: flex; flex-direction: column; gap: 1.5rem; ` const FormRow = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; @media (max-width: 768px) { grid-template-columns: 1fr; } ` const AvatarSection = styled.div` display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; ` const Avatar = styled.div` width: 120px; height: 120px; border-radius: 50%; background: ${(props) => props.theme.gradients.primary}; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; font-weight: bold; ` const ModulesList = styled.div` display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; ` const ModuleBadge = styled.span` background: ${(props) => props.theme.colors.primary}; color: white; padding: 0.25rem 0.75rem; border-radius: ${(props) => props.theme.borderRadius.full}; font-size: 0.875rem; ` const Profile = () => { const { user, updateUser } = useAuth() const { showToast } = useNotifications() const [loading, setLoading] = useState(false) const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", phone: "", department: "", position: "", }) useEffect(() => { if (user) { setFormData({ firstName: user.firstName || "", lastName: user.lastName || "", email: user.email || "", phone: user.phone || "", department: user.department || "", position: user.position || "", }) } }, [user]) const handleInputChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = async (e) => { e.preventDefault() setLoading(true) try { const response = await api.put("/users/profile", formData) if (response.data.success) { updateUser(response.data.user) showToast("Profile updated successfully!", "success") } } catch (error) { showToast(error.response?.data?.message || "Failed to update profile", "error") } finally { setLoading(false) } } const getInitials = () => { if (user?.firstName && user?.lastName) { return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase() } return user?.email?.[0]?.toUpperCase() || "U" } if (!user) { return

} return ( My Profile Manage your account information {getInitials()}

{user.firstName} {user.lastName}

{user.role === "admin" ? "Administrator" : "User"}

{user.modules && user.modules.length > 0 && (

Assigned Modules:

{user.modules.map((module, index) => ( {module} ))}

)}

) } export default Profile [V0_FILE]javascript:file="client/src/pages/Settings.js" isMerged="true" "use client" import { useState } from "react" import styled from "styled-components" import { useTheme } from "../contexts/ThemeContext" import { useNotifications } from "../contexts/NotificationContext" import Card from "../components/common/Card" import Button from "../components/common/Button" import Input from "../components/common/Input" import api from "../utils/api" const SettingsContainer = styled.div` max-width: 800px; margin: 0 auto; padding: 2rem; ` const SettingsHeader = styled.div` margin-bottom: 2rem; ` const SettingsTitle = styled.h1` font-size: 2rem; color: ${(props) => props.theme.colors.text}; margin-bottom: 0.5rem; ` const SettingsSection = styled.div` margin-bottom: 2rem; ` const SectionTitle = styled.h2` font-size: 1.5rem; color: ${(props) => props.theme.colors.text}; margin-bottom: 1rem; ` const ToggleSwitch = styled.div` display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid ${(props) => props.theme.colors.border}; &:last-child { border-bottom: none; } ` const ToggleLabel = styled.div` flex: 1; ` const ToggleTitle = styled.h3` font-size: 1rem; color: ${(props) => props.theme.colors.text}; margin-bottom: 0.25rem; ` const ToggleDescription = styled.p` font-size: 0.875rem; color: ${(props) => props.theme.colors.textSecondary}; ` const Switch = styled.button` width: 50px; height: 24px; border-radius: 12px; border: none; cursor: pointer; position: relative; transition: background-color 0.3s; background-color: ${(props) => (props.active ? props.theme.colors.primary : props.theme.colors.border)}; &::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: white; top: 2px; left: ${(props) => (props.active ? "28px" : "2px")}; transition: left 0.3s; } ` const PasswordForm = styled.form` display: flex; flex-direction: column; gap: 1rem; ` const Settings = () => { const { isDarkMode, toggleTheme } = useTheme() const { showToast } = useNotifications() const [passwordData, setPasswordData] = useState({ currentPassword: "", newPassword: "", confirmPassword: "", }) const [loading, setLoading] = useState(false) const [notifications, setNotifications] = useState({ email: true, push: false, sms: false, }) const handlePasswordChange = (e) => { const { name, value } = e.target setPasswordData((prev) => ({ ...prev, [name]: value, })) } const handlePasswordSubmit = async (e) => { e.preventDefault() if (passwordData.newPassword !== passwordData.confirmPassword) { showToast("New passwords do not match", "error") return } if (passwordData.newPassword.length < 6) { showToast("Password must be at least 6 characters long", "error") return } setLoading(true) try { const response = await api.put("/users/change-password", { currentPassword: passwordData.currentPassword, newPassword: passwordData.newPassword, }) if (response.data.success) { showToast("Password changed successfully!", "success") setPasswordData({ currentPassword: "", newPassword: "", confirmPassword: "", }) } } catch (error) { showToast(error.response?.data?.message || "Failed to change password", "error") } finally { setLoading(false) } } const handleNotificationToggle = (type) => { setNotifications((prev) => ({ ...prev, [type]: !prev[type], })) showToast(`${type} notifications ${notifications[type] ? "disabled" : "enabled"}`, "info") } return ( Settings Appearance Dark Mode Switch between light and dark themes Notifications Email Notifications Receive notifications via email handleNotificationToggle("email")} /> Push Notifications Receive browser push notifications handleNotificationToggle("push")} /> SMS Notifications Receive notifications via SMS handleNotificationToggle("sms")} /> Security ) } export default Settings [V0_FILE]javascript:file="client/src/pages/modules/Analytics.js" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { LineChart, Line, AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import Card from "../../components/common/Card" import Button from "../../components/common/Button" import api from "../../utils/api" const AnalyticsContainer = styled.div` padding: 2rem; ` const AnalyticsHeader = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; ` const Title = styled.h1` font-size: 2rem; color: ${(props) => props.theme.colors.text}; ` const FilterContainer = styled.div` display: flex; gap: 1rem; align-items: center; ` const Select = styled.select` padding: 0.5rem; border: 1px solid ${(props) => props.theme.colors.border}; border-radius: ${(props) => props.theme.borderRadius.md}; background: ${(props) => props.theme.colors.surface}; color: ${(props) => props.theme.colors.text}; ` const ChartsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-bottom: 2rem; ` const ChartCard = styled(Card)` padding: 1.5rem; ` const ChartTitle = styled.h3` font-size: 1.25rem; color: ${(props) => props.theme.colors.text}; margin-bottom: 1rem; ` const StatsGrid = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; ` const StatCard = styled(Card)` padding: 1.5rem; text-align: center; ` const StatValue = styled.div` font-size: 2rem; font-weight: bold; color: ${(props) => props.theme.colors.primary}; margin-bottom: 0.5rem; ` const StatLabel = styled.div` color: ${(props) => props.theme.colors.textSecondary}; font-size: 0.875rem; ` const COLORS = ["#1b4332", "#2d5016", "#40916c", "#52734d", "#74c69d"] const Analytics = () => { const [timeRange, setTimeRange] = useState("30") const [loading, setLoading] = useState(true) const [data, setData] = useState({ revenue: [], inventory: [], sales: [], modules: [], stats: { totalRevenue: 0, totalOrders: 0, activeUsers: 0, inventoryValue: 0, }, }) useEffect(() => { fetchAnalyticsData() }, [timeRange]) const fetchAnalyticsData = async () => { setLoading(true) try { const response = await api.get(`/analytics/dashboard?days=${timeRange}`) if (response.data.success) { setData(response.data.data) } } catch (error) { console.error("Error fetching analytics:", error) } finally { setLoading(false) } } const exportData = async () => { try { const response = await api.get(`/analytics/export?days=${timeRange}`, { responseType: "blob", }) const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement("a") link.href = url link.setAttribute("download", `analytics-${timeRange}days.csv`) document.body.appendChild(link) link.click() link.remove() } catch (error) { console.error("Error exporting data:", error) } } if (loading) { return

Loading analytics...

} return ( Analytics Dashboard ${data.stats.totalRevenue.toLocaleString()} Total Revenue {data.stats.totalOrders.toLocaleString()} Total Orders {data.stats.activeUsers.toLocaleString()} Active Users ${data.stats.inventoryValue.toLocaleString()} Inventory Value Revenue Trend Sales Performance Inventory Distribution `${name} ${(percent * 100).toFixed(0)}%`} outerRadius={80} fill="#8884d8" dataKey="value" > {data.inventory.map((entry, index) => ( ))} Module Usage ) } export default Analytics [V0_FILE]javascript:file="client/src/pages/modules/UserManagement.js" isMerged="true" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { useNotifications } from "../../contexts/NotificationContext" import Card from "../../components/common/Card" import Button from "../../components/common/Button" import Input from "../../components/common/Input" import api from "../../utils/api" const UserManagementContainer = styled.div` padding: 2rem; ` const Header = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; ` const Title = styled.h1` font-size: 2rem; color: ${(props) => props.theme.colors.text}; ` const UsersTable = styled.div` overflow-x: auto; ` const Table = styled.table` width: 100%; border-collapse: collapse; th, td { padding: 1rem; text-align: left; border-bottom: 1px solid ${(props) => props.theme.colors.border}; } th { background: ${(props) => props.theme.colors.surfaceLight}; font-weight: bold; color: ${(props) => props.theme.colors.text}; } td { color: ${(props) => props.theme.colors.textSecondary}; } ` const StatusBadge = styled.span` padding: 0.25rem 0.75rem; border-radius: ${(props) => props.theme.borderRadius.full}; font-size: 0.875rem; font-weight: medium; background: ${(props) => (props.active ? props.theme.colors.success : props.theme.colors.error)}; color: white; ` const RoleBadge = styled.span` padding: 0.25rem 0.75rem; border-radius: ${(props) => props.theme.borderRadius.full}; font-size: 0.875rem; font-weight: medium; background: ${(props) => (props.role === "admin" ? props.theme.colors.primary : props.theme.colors.secondary)}; color: white; ` const ModulesList = styled.div` display: flex; flex-wrap: wrap; gap: 0.25rem; ` const ModuleBadge = styled.span` background: ${(props) => props.theme.colors.accent}; color: white; padding: 0.125rem 0.5rem; border-radius: ${(props) => props.theme.borderRadius.sm}; font-size: 0.75rem; ` const ActionButtons = styled.div` display: flex; gap: 0.5rem; ` const Modal = styled.div` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; ` const ModalContent = styled.div` background: ${(props) => props.theme.colors.surface}; padding: 2rem; border-radius: ${(props) => props.theme.borderRadius.lg}; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; ` const ModalHeader = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; ` const ModalTitle = styled.h2` font-size: 1.5rem; color: ${(props) => props.theme.colors.text}; ` const CloseButton = styled.button` background: none; border: none; font-size: 1.5rem; cursor: pointer; color: ${(props) => props.theme.colors.textSecondary}; ` const Form = styled.form` display: flex; flex-direction: column; gap: 1rem; ` const CheckboxGroup = styled.div` display: flex; flex-direction: column; gap: 0.5rem; ` const CheckboxItem = styled.label` display: flex; align-items: center; gap: 0.5rem; cursor: pointer; ` const UserManagement = () => { const { showToast } = useNotifications() const [users, setUsers] = useState([]) const [loading, setLoading] = useState(true) const [showModal, setShowModal] = useState(false) const [editingUser, setEditingUser] = useState(null) const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", role: "user", modules: [], isActive: true, }) const availableModules = ["IMS", "ISA", "Waste Management", "Construction Sites", "Analytics"] useEffect(() => { fetchUsers() }, []) const fetchUsers = async () => { try { const response = await api.get("/users") if (response.data.success) { setUsers(response.data.users) } } catch (error) { showToast("Failed to fetch users", "error") } finally { setLoading(false) } } const handleInputChange = (e) => { const { name, value, type, checked } = e.target setFormData((prev) => ({ ...prev, [name]: type === "checkbox" ? checked : value, })) } const handleModuleChange = (module) => { setFormData((prev) => ({ ...prev, modules: prev.modules.includes(module) ? prev.modules.filter((m) => m !== module) : [...prev.modules, module], })) } const handleSubmit = async (e) => { e.preventDefault() try { let response if (editingUser) { response = await api.put(`/users/${editingUser._id}`, formData) } else { response = await api.post("/users", formData) } if (response.data.success) { showToast(editingUser ? "User updated successfully" : "User created successfully", "success") fetchUsers() closeModal() } } catch (error) { showToast(error.response?.data?.message || "Operation failed", "error") } } const handleEdit = (user) => { setEditingUser(user) setFormData({ firstName: user.firstName, lastName: user.lastName, email: user.email, role: user.role, modules: user.modules || [], isActive: user.isActive, }) setShowModal(true) } const handleDelete = async (userId) => { if (window.confirm("Are you sure you want to delete this user?")) { try { const response = await api.delete(`/users/${userId}`) if (response.data.success) { showToast("User deleted successfully", "success") fetchUsers() } } catch (error) { showToast("Failed to delete user", "error") } } } const toggleUserStatus = async (userId, currentStatus) => { try { const response = await api.patch(`/users/${userId}/status`, { isActive: !currentStatus, }) if (response.data.success) { showToast(`User ${!currentStatus ? "activated" : "deactivated"} successfully`, "success") fetchUsers() } } catch (error) { showToast("Failed to update user status", "error") } } const openModal = () => { setEditingUser(null) setFormData({ firstName: "", lastName: "", email: "", role: "user", modules: [], isActive: true, }) setShowModal(true) } const closeModal = () => { setShowModal(false) setEditingUser(null) } if (loading) { return

Loading users...

} return (

User Management

{users.map((user) => ( ))}

Name	Email	Role	Modules	Status	Actions
{user.firstName} {user.lastName}	{user.email}	{user.role}	{user.modules?.map((module, index) => ( {module} ))}	{user.isActive ? "Active" : "Inactive"}

{showModal && ( e.stopPropagation()}> {editingUser ? "Edit User" : "Add New User"} × )} ) } export default UserManagement [V0_FILE]javascript:file="client/src/pages/NotFound.js" isMerged="true" "use client" import styled from "styled-components" import { Link } from "react-router-dom" import Button from "../components/common/Button" const NotFoundContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; text-align: center; background: ${(props) => props.theme.colors.surfaceLight}; ` const ErrorCode = styled.h1` font-size: 8rem; font-weight: bold; color: ${(props) => props.theme.colors.primary}; margin: 0; line-height: 1; ` const ErrorTitle = styled.h2` font-size: 2rem; color: ${(props) => props.theme.colors.text}; margin: 1rem 0; ` const ErrorMessage = styled.p` font-size: 1.1rem; color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 2rem; max-width: 500px; ` const ButtonGroup = styled.div` display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; ` const NotFound = () => { return ( 404 Page Not Found The page you're looking for doesn't exist. It might have been moved, deleted, or you entered the wrong URL. ) } export default NotFound [V0_FILE]javascript:file="client/src/pages/Maintenance.js" isMerged="true" "use client" import styled from "styled-components" import Button from "../components/common/Button" const MaintenanceContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; text-align: center; background: ${(props) => props.theme.gradients.background}; ` const MaintenanceIcon = styled.div` font-size: 4rem; margin-bottom: 2rem; ` const MaintenanceTitle = styled.h1` font-size: 2.5rem; color: ${(props) => props.theme.colors.text}; margin-bottom: 1rem; ` const MaintenanceMessage = styled.p` font-size: 1.2rem; color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 2rem; max-width: 600px; line-height: 1.6; ` const EstimatedTime = styled.div` background: ${(props) => props.theme.colors.surface}; padding: 1rem 2rem; border-radius: ${(props) => props.theme.borderRadius.lg}; margin-bottom: 2rem; border: 1px solid ${(props) => props.theme.colors.border}; ` const Maintenance = () => { const handleRefresh = () => { window.location.reload() } return ( 🔧 System Maintenance We're currently performing scheduled maintenance to improve your experience. The system will be back online shortly. Thank you for your patience. Estimated completion time: 30 minutes ) } export default Maintenance [V0_FILE]javascript:file="server/routes/reports.js" isMerged="true" const express = require("express") const router = express.Router() const { verifyToken, requireRole } = require("../middleware/auth") // Generate inventory report router.get("/inventory", verifyToken, async (req, res) => { try { // Implementation for inventory report res.json({ success: true, message: "Inventory report generated", data: {}, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to generate inventory report", }) } }) // Generate sales report router.get("/sales", verifyToken, async (req, res) => { try { // Implementation for sales report res.json({ success: true, message: "Sales report generated", data: {}, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to generate sales report", }) } }) module.exports = router [V0_FILE]javascript:file="server/routes/notifications.js" isMerged="true" const express = require("express") const router = express.Router() const { verifyToken } = require("../middleware/auth") // Get user notifications router.get("/", verifyToken, async (req, res) => { try { // Mock notifications for now const notifications = [ { _id: "1", title: "Welcome to the system", message: "Your account has been created successfully", type: "info", read: false, createdAt: new Date(), }, ] res.json({ success: true, notifications, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to fetch notifications", }) } }) // Mark notification as read router.patch("/:id/read", verifyToken, async (req, res) => { try { res.json({ success: true, message: "Notification marked as read", }) } catch (error) { res.status(500).json({ success: false, message: "Failed to mark notification as read", }) } }) // Mark all notifications as read router.patch("/mark-all-read", verifyToken, async (req, res) => { try { res.json({ success: true, message: "All notifications marked as read", }) } catch (error) { res.status(500).json({ success: false, message: "Failed to mark all notifications as read", }) } }) // Delete notification router.delete("/:id", verifyToken, async (req, res) => { try { res.json({ success: true, message: "Notification deleted", }) } catch (error) { res.status(500).json({ success: false, message: "Failed to delete notification", }) } }) module.exports = router [V0_FILE]javascript:file="server/routes/users.js" isMerged="true" const express = require("express") const router = express.Router() const bcrypt = require("bcryptjs") const User = require("../models/User") const { verifyToken, requireRole } = require("../middleware/auth") // Get all users (admin only) router.get("/", verifyToken, requireRole("admin"), async (req, res) => { try { const users = await User.find({}, "-password") res.json({ success: true, users, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to fetch users", }) } }) // Create new user (admin only) router.post("/", verifyToken, requireRole("admin"), async (req, res) => { try { const { firstName, lastName, email, role, modules, isActive } = req.body // Check if user already exists const existingUser = await User.findOne({ email }) if (existingUser) { return res.status(400).json({ success: false, message: "User with this email already exists", }) } // Generate temporary password const tempPassword = Math.random().toString(36).slice(-8) const hashedPassword = await bcrypt.hash(tempPassword, 12) const user = new User({ firstName, lastName, email, password: hashedPassword, role: role || "user", modules: modules || [], isActive: isActive !== undefined ? isActive : true, isEmailVerified: true, // Admin created users are auto-verified }) await user.save() // TODO: Send email with temporary password res.status(201).json({ success: true, message: "User created successfully", user: { _id: user._id, firstName: user.firstName, lastName: user.lastName, email: user.email, role: user.role, modules: user.modules, isActive: user.isActive, }, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to create user", }) } }) // Update user (admin only) router.put("/:id", verifyToken, requireRole("admin"), async (req, res) => { try { const { firstName, lastName, email, role, modules, isActive } = req.body const user = await User.findByIdAndUpdate( req.params.id, { firstName, lastName, email, role, modules, isActive, }, { new: true, select: "-password" }, ) if (!user) { return res.status(404).json({ success: false, message: "User not found", }) } res.json({ success: true, message: "User updated successfully", user, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to update user", }) } }) // Delete user (admin only) router.delete("/:id", verifyToken, requireRole("admin"), async (req, res) => { try { const user = await User.findByIdAndDelete(req.params.id) if (!user) { return res.status(404).json({ success: false, message: "User not found", }) } res.json({ success: true, message: "User deleted successfully", }) } catch (error) { res.status(500).json({ success: false, message: "Failed to delete user", }) } }) // Toggle user status (admin only) router.patch("/:id/status", verifyToken, requireRole("admin"), async (req, res) => { try { const { isActive } = req.body const user = await User.findByIdAndUpdate(req.params.id, { isActive }, { new: true, select: "-password" }) if (!user) { return res.status(404).json({ success: false, message: "User not found", }) } res.json({ success: true, message: `User ${isActive ? "activated" : "deactivated"} successfully`, user, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to update user status", }) } }) // Update user profile (own profile) router.put("/profile", verifyToken, async (req, res) => { try { const { firstName, lastName, phone, department, position } = req.body const user = await User.findByIdAndUpdate( req.user.id, { firstName, lastName, phone, department, position, }, { new: true, select: "-password" }, ) res.json({ success: true, message: "Profile updated successfully", user, }) } catch (error) { res.status(500).json({ success: false, message: "Failed to update profile", }) } }) // Change password (own password) router.put("/change-password", verifyToken, async (req, res) => { try { const { currentPassword, newPassword } = req.body const user = await User.findById(req.user.id) if (!user) { return res.status(404).json({ success: false, message: "User not found", }) } // Verify current password const isCurrentPasswordValid = await bcrypt.compare(currentPassword, user.password) if (!isCurrentPasswordValid) { return res.status(400).json({ success: false, message: "Current password is incorrect", }) } // Hash new password const hashedNewPassword = await bcrypt.hash(newPassword, 12) // Update password await User.findByIdAndUpdate(req.user.id, { password: hashedNewPassword, }) res.json({ success: true, message: "Password changed successfully", }) } catch (error) { res.status(500).json({ success: false, message: "Failed to change password", }) } }) module.exports = router [V0_FILE]javascript:file="client/src/pages/modules/IMS.js" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useNavigate, useLocation } from "react-router-dom" import styled from "styled-components" import { FaBoxes, FaPlus, FaSearch, FaFilter, FaDownload, FaBarcode, FaChartLine, FaEdit, FaEye, FaTruck, FaUsers, FaTrash, } from "react-icons/fa" import Button from "../../components/common/Button" import Input from "../../components/common/Input" import LoadingSpinner from "../../components/common/LoadingSpinner" import { useAuth } from "../../contexts/AuthContext" import { useNotifications } from "../../contexts/NotificationContext" import api from "../../utils/api" const IMSContainer = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; min-height: 100vh; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { padding: ${(props) => props.theme.spacing?.md || "1rem"}; } ` const HeaderSection = styled.div` background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; margin-bottom: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; color: white; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transform: translate(50%, -50%); } ` const HeaderContent = styled.div` position: relative; z-index: 1; ` const HeaderTitle = styled.h1` font-size: ${(props) => props.theme.typography?.fontSize?.["3xl"] || "1.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; } ` const HeaderSubtitle = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; opacity: 0.9; margin: 0; ` const TabContainer = styled.div` display: flex; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; padding: ${(props) => props.theme.spacing?.xs || "0.25rem"}; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; box-shadow: ${(props) => props.theme.shadows?.sm || "0 1px 2px 0 rgba(27, 67, 50, 0.05)"}; overflow-x: auto; ` const Tab = styled.button` flex: 1; min-width: 120px; padding: ${(props) => props.theme.spacing?.md || "1rem"} ${(props) => props.theme.spacing?.lg || "1.5rem"}; border: none; background: ${(props) => (props.$active ? props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)" : "transparent")}; color: ${(props) => (props.$active ? "white" : props.theme.colors?.textSecondary || "#718096")}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; &:hover { background: ${(props) => (props.$active ? props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)" : props.theme.colors?.surfaceLight || "#f7fafc")}; color: ${(props) => (props.$active ? "white" : props.theme.colors?.text || "#2d3748")}; } ` const ActionBar = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: ${(props) => props.theme.spacing?.xl || "2rem"}; flex-wrap: wrap; gap: ${(props) => props.theme.spacing?.md || "1rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { flex-direction: column; align-items: stretch; } ` const SearchContainer = styled.div` position: relative; flex: 1; max-width: 400px; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { max-width: none; } ` const SearchInput = styled(Input)` padding-left: ${(props) => props.theme.spacing?.["3xl"] || "4rem"}; ` const SearchIcon = styled.div` position: absolute; left: ${(props) => props.theme.spacing?.md || "1rem"}; top: 50%; transform: translateY(-50%); color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: 18px; z-index: 2; ` const ActionButtons = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.md || "1rem"}; flex-wrap: wrap; @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { width: 100%; button { flex: 1; } } ` const ContentArea = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; box-shadow: ${(props) => props.theme.shadows?.md || "0 4px 6px -1px rgba(27, 67, 50, 0.1)"}; overflow: hidden; ` const Modal = styled.div` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; ` const ModalContent = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; padding: 2rem; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; ` const ModalHeader = styled.div` display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const ModalTitle = styled.h2` font-size: 1.5rem; font-weight: bold; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0; ` const CloseButton = styled.button` background: none; border: none; font-size: 1.5rem; cursor: pointer; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; padding: 0.5rem; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; } ` const Form = styled.form` display: flex; flex-direction: column; gap: 1.5rem; ` const FormRow = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; ` const FormActions = styled.div` display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` // Inventory List Component const InventoryList = ({ searchQuery, onEdit, onDelete, hasWritePermission, hasDeletePermission }) => { const [items, setItems] = useState([]) const [loading, setLoading] = useState(true) const [filteredItems, setFilteredItems] = useState([]) useEffect(() => { fetchItems() }, []) useEffect(() => { if (searchQuery) { const filtered = items.filter( (item) => item.name.toLowerCase().includes(searchQuery.toLowerCase()) || item.sku.toLowerCase().includes(searchQuery.toLowerCase()) || item.category.toLowerCase().includes(searchQuery.toLowerCase()), ) setFilteredItems(filtered) } else { setFilteredItems(items) } }, [searchQuery, items]) const fetchItems = async () => { try { const response = await api.get("/inventory") if (response.data.success) { setItems(response.data.items) } } catch (error) { console.error("Failed to fetch inventory items:", error) } finally { setLoading(false) } } if (loading) { return (

) } return (

{filteredItems.map((item) => ( ))}

Product	Category	Stock	Price	Status	Actions
{item.name} SKU: {item.sku}	{item.category}	{item.quantity} {item.unit}	${item.price}	10 ? "#2d501620" : "#c5303020", color: item.quantity > 10 ? "#2d5016" : "#c53030", }} > {item.quantity > 10 ? "In Stock" : "Low Stock"}	{hasWritePermission && ( )} {hasDeletePermission && ( )}

) } // Add/Edit Item Modal const ItemModal = ({ isOpen, onClose, item, onSave }) => { const [formData, setFormData] = useState({ name: "", sku: "", category: "", quantity: "", unit: "", price: "", description: "", location: "", supplier: "", }) useEffect(() => { if (item) { setFormData(item) } else { setFormData({ name: "", sku: "", category: "", quantity: "", unit: "", price: "", description: "", location: "", supplier: "", }) } }, [item]) const handleSubmit = (e) => { e.preventDefault() onSave(formData) } const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } if (!isOpen) return null return ( e.stopPropagation()}> {item ? "Edit Item" : "Add New Item"} × ) } const IMS = () => { const navigate = useNavigate() const location = useLocation() const { hasPermission } = useAuth() const { showToast } = useNotifications() const [activeTab, setActiveTab] = useState("inventory") const [searchQuery, setSearchQuery] = useState("") const [showModal, setShowModal] = useState(false) const [editingItem, setEditingItem] = useState(null) // Check permissions const hasReadPermission = hasPermission("inventory", "read") const hasWritePermission = hasPermission("inventory", "write") const hasDeletePermission = hasPermission("inventory", "delete") const tabs = [ { id: "inventory", label: "Inventory", icon: }, { id: "purchase-orders", label: "Purchase Orders", icon: }, { id: "suppliers", label: "Suppliers", icon: }, { id: "reports", label: "Reports", icon: }, ] const handleSearch = (e) => { setSearchQuery(e.target.value) } const handleAddItem = () => { setEditingItem(null) setShowModal(true) } const handleEditItem = (item) => { setEditingItem(item) setShowModal(true) } const handleDeleteItem = async (itemId) => { if (window.confirm("Are you sure you want to delete this item?")) { try { const response = await api.delete(`/inventory/${itemId}`) if (response.data.success) { showToast("Item deleted successfully", "success") // Refresh the list } } catch (error) { showToast("Failed to delete item", "error") } } } const handleSaveItem = async (itemData) => { try { let response if (editingItem) { response = await api.put(`/inventory/${editingItem._id}`, itemData) } else { response = await api.post("/inventory", itemData) } if (response.data.success) { showToast(editingItem ? "Item updated successfully" : "Item created successfully", "success") setShowModal(false) setEditingItem(null) // Refresh the list } } catch (error) { showToast("Failed to save item", "error") } } const renderTabContent = () => { switch (activeTab) { case "inventory": return ( ) case "purchase-orders": return

Purchase Orders coming soon...

case "suppliers": return

Suppliers management coming soon...

case "reports": return

Reports and analytics coming soon...

default: return null } } if (!hasReadPermission) { return (

Access Denied

You don't have permission to view inventory data.

) } return ( Inventory Management System Advanced inventory control with real-time tracking, automated alerts, and comprehensive reporting {tabs.map((tab) => ( setActiveTab(tab.id)}> {tab.icon} {tab.label} ))} {hasWritePermission && ( )} {renderTabContent()} setShowModal(false)} item={editingItem} onSave={handleSaveItem} /> ) } export default IMS [V0_FILE]javascript:file="client/src/components/layout/MainLayout.js" isEdit="true" "use client" import { useState, useEffect } from "react" import { Outlet, useLocation } from "react-router-dom" import styled from "styled-components" import DynamicSidebar from "./DynamicSidebar" import DynamicHeader from "./DynamicHeader" import { useAuth } from "../../contexts/AuthContext" import { useTheme } from "../../contexts/ThemeContext" const LayoutContainer = styled.div` display: flex; min-height: 100vh; background: ${(props) => props.theme.colors?.background || "#f8fafc"}; ` const SidebarContainer = styled.div` width: ${(props) => (props.$collapsed ? "80px" : "280px")}; transition: width 0.3s ease; flex-shrink: 0; @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { position: fixed; top: 0; left: ${(props) => (props.$mobileOpen ? "0" : "-280px")}; height: 100vh; z-index: 1000; width: 280px; } ` const MainContent = styled.div` flex: 1; display: flex; flex-direction: column; min-width: 0; @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { margin-left: 0; } ` const ContentArea = styled.main` flex: 1; overflow-y: auto; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; ` const Overlay = styled.div` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; display: ${(props) => (props.$show ? "block" : "none")}; @media (min-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { display: none; } ` const MainLayout = () => { const { user } = useAuth() const { theme } = useTheme() const location = useLocation() const [sidebarCollapsed, setSidebarCollapsed] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) // Close mobile menu when route changes useEffect(() => { setMobileMenuOpen(false) }, [location.pathname]) // Handle window resize useEffect(() => { const handleResize = () => { if (window.innerWidth >= 1024) { setMobileMenuOpen(false) } } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) const toggleSidebar = () => { setSidebarCollapsed(!sidebarCollapsed) } const toggleMobileMenu = () => { setMobileMenuOpen(!mobileMenuOpen) } if (!user) { return null } return ( setMobileMenuOpen(false)} /> setMobileMenuOpen(false)} /> ) } export default MainLayout [V0_FILE]javascript:file="client/src/components/layout/DynamicHeader.js" isEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { useNavigate, useLocation } from "react-router-dom" import styled from "styled-components" import { FaBars, FaSearch, FaBell, FaUser, FaCog, FaSignOutAlt, FaMoon, FaSun, FaChevronDown } from "react-icons/fa" import { useAuth } from "../../contexts/AuthContext" import { useTheme } from "../../contexts/ThemeContext" import { useNotifications } from "../../contexts/NotificationContext" const HeaderContainer = styled.header` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; padding: 0 ${(props) => props.theme.spacing?.lg || "1.5rem"}; height: 70px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: ${(props) => props.theme.shadows?.sm || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"}; ` const LeftSection = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const MobileMenuButton = styled.button` display: none; background: none; border: none; font-size: 1.25rem; color: ${(props) => props.theme.colors?.text || "#2d3748"}; cursor: pointer; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; } @media (max-width: ${(props) => props.theme.breakpoints?.lg || "1024px"}) { display: flex; align-items: center; justify-content: center; } ` const Breadcrumbs = styled.nav` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { display: none; } ` const BreadcrumbItem = styled.span` color: ${(props) => (props.$active ? props.theme.colors?.primary || "#1b4332" : props.theme.colors?.textSecondary || "#718096")}; font-weight: ${(props) => (props.$active ? "600" : "400")}; &:not(:last-child)::after { content: "/"; margin-left: ${(props) => props.theme.spacing?.sm || "0.5rem"}; color: ${(props) => props.theme.colors?.border || "#e2e8f0"}; } ` const RightSection = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const SearchContainer = styled.div` position: relative; display: flex; align-items: center; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { display: none; } ` const SearchInput = styled.input` width: 300px; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; transition: all 0.3s ease; &:focus { outline: none; border-color: ${(props) => props.theme.colors?.primary || "#1b4332"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 0 3px rgba(27, 67, 50, 0.1)"}; } &::placeholder { color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; } ` const SearchIcon = styled.div` position: absolute; left: ${(props) => props.theme.spacing?.md || "1rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; font-size: 1rem; pointer-events: none; ` const IconButton = styled.button` position: relative; background: none; border: none; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; } ` const NotificationBadge = styled.span` position: absolute; top: -2px; right: -2px; background: ${(props) => props.theme.colors?.error || "#c53030"}; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 600; ` const UserMenu = styled.div` position: relative; ` const UserButton = styled.button` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; background: none; border: none; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; cursor: pointer; transition: all 0.3s ease; color: ${(props) => props.theme.colors?.text || "#2d3748"}; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; } ` const UserAvatar = styled.div` width: 36px; height: 36px; border-radius: 50%; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem; ` const UserInfo = styled.div` display: flex; flex-direction: column; align-items: flex-start; @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { display: none; } ` const UserName = styled.span` font-weight: 600; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; ` const UserRole = styled.span` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; text-transform: capitalize; ` const DropdownMenu = styled.div` position: absolute; top: 100%; right: 0; margin-top: ${(props) => props.theme.spacing?.xs || "0.25rem"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(0, 0, 0, 0.1)"}; min-width: 200px; z-index: 1000; opacity: ${(props) => (props.$show ? 1 : 0)}; visibility: ${(props) => (props.$show ? "visible" : "hidden")}; transform: ${(props) => (props.$show ? "translateY(0)" : "translateY(-10px)")}; transition: all 0.3s ease; ` const DropdownItem = styled.button` width: 100%; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; padding: ${(props) => props.theme.spacing?.md || "1rem"}; border: none; background: none; color: ${(props) => props.theme.colors?.text || "#2d3748"}; cursor: pointer; transition: all 0.3s ease; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; } &:first-child { border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"} ${(props) => props.theme.borderRadius?.lg || "0.75rem"} 0 0; } &:last-child { border-radius: 0 0 ${(props) => props.theme.borderRadius?.lg || "0.75rem"} ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; } ` const DynamicHeader = ({ onMobileMenuToggle }) => { const navigate = useNavigate() const location = useLocation() const { user, logout } = useAuth() const { theme, toggleTheme } = useTheme() const { notifications } = useNotifications() const [showUserMenu, setShowUserMenu] = useState(false) const [searchQuery, setSearchQuery] = useState("") const userMenuRef = useRef(null) // Close user menu when clicking outside useEffect(() => { const handleClickOutside = (event) => { if (userMenuRef.current && !userMenuRef.current.contains(event.target)) { setShowUserMenu(false) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) // Generate breadcrumbs from current path const generateBreadcrumbs = () => { const pathSegments = location.pathname.split("/").filter(Boolean) const breadcrumbs = [{ label: "Dashboard", path: "/dashboard" }] let currentPath = "" pathSegments.forEach((segment, index) => { currentPath += `/${segment}` const label = segment.charAt(0).toUpperCase() + segment.slice(1).replace("-", " ") breadcrumbs.push({ label, path: currentPath, active: index === pathSegments.length - 1, }) }) return breadcrumbs } const handleSearch = (e) => { e.preventDefault() if (searchQuery.trim()) { navigate(`/search?q=${encodeURIComponent(searchQuery)}`) } } const handleLogout = async () => { try { await logout() navigate("/login") } catch (error) { console.error("Logout failed:", error) } } const breadcrumbs = generateBreadcrumbs() const unreadCount = notifications?.filter((n) => !n.read).length || 0 return ( {breadcrumbs.map((crumb, index) => ( {crumb.label} ))} {theme === "light" ? : } navigate("/notifications")} title="Notifications"> {unreadCount > 0 && {unreadCount}} setShowUserMenu(!showUserMenu)}> {user?.name?.charAt(0) || "U"} {user?.name || "User"} {user?.role || "user"} navigate("/profile")}> Profile navigate("/settings")}> Settings Logout ) } export default DynamicHeader [V0_FILE]javascript:file="client/src/components/auth/ProtectedRoute.js" isEdit="true" "use client" import { useAuth } from "../../contexts/AuthContext" import { Navigate, useLocation } from "react-router-dom" import styled from "styled-components" import { FaLock, FaExclamationTriangle } from "react-icons/fa" import LoadingSpinner from "../common/LoadingSpinner" const AccessDeniedContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: ${(props) => props.theme.spacing?.["2xl"] || "3rem"}; text-align: center; ` const AccessDeniedIcon = styled.div` font-size: 4rem; color: ${(props) => props.theme.colors?.error || "#c53030"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const AccessDeniedTitle = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.["2xl"] || "1.5rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.md || "1rem"}; ` const AccessDeniedMessage = styled.p` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; max-width: 500px; ` const AccessDeniedDetails = styled.div` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; margin-top: ${(props) => props.theme.spacing?.lg || "1.5rem"}; text-align: left; max-width: 500px; ` const DetailItem = styled.div` display: flex; justify-content: space-between; align-items: center; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"} 0; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; &:last-child { border-bottom: none; } ` const DetailLabel = styled.span` font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; ` const DetailValue = styled.span` color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const LoadingContainer = styled.div` display: flex; align-items: center; justify-content: center; min-height: 60vh; ` const ProtectedRoute = ({ children, requiredModule = null, requiredPermission = null, requiredRole = null }) => { const { user, loading, hasModuleAccess, hasPermission, hasRole } = useAuth() const location = useLocation() // Show loading spinner while checking authentication if (loading) { return ( ) } // Redirect to login if not authenticated if (!user) { return } // Check module access if (requiredModule && !hasModuleAccess(requiredModule)) { return ( Module Access Denied You don't have access to the {requiredModule} module. Please contact your administrator to request access. Required Module: {requiredModule} Your Role: {user.role} Available Modules: {user.modules?.join(", ") || "None"} ) } // Check specific permission if (requiredPermission && !hasPermission(requiredPermission.module, requiredPermission.action)) { return ( Permission Denied You don't have permission to {requiredPermission.action} in the {requiredPermission.module} module. Required Permission: {requiredPermission.module}:{requiredPermission.action} Your Role: {user.role} ) } // Check role requirement if (requiredRole && !hasRole(requiredRole)) { return ( Insufficient Role This area requires {requiredRole} role or higher. Your current role doesn't have sufficient privileges. Required Role: {requiredRole} Your Role: {user.role} ) } // All checks passed, render the protected content return children } export default ProtectedRoute [V0_FILE]javascript:file="client/src/App.js" isEdit="true" "use client" import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom" import { ThemeProvider } from "styled-components" import { AuthProvider } from "./contexts/AuthContext" import { ThemeContextProvider } from "./contexts/ThemeContext" import { NotificationProvider } from "./contexts/NotificationContext" import GlobalStyles from "./styles/GlobalStyles" import Theme from "./Theme" import ErrorBoundary from "./components/common/ErrorBoundary" import ProtectedRoute from "./components/auth/ProtectedRoute" import PublicRoute from "./components/auth/PublicRoute" import MainLayout from "./components/layout/MainLayout" // Auth Pages import Login from "./pages/auth/Login" import SetPassword from "./pages/auth/SetPassword" import EmailVerification from "./pages/auth/EmailVerification" // Main Pages import Dashboard from "./pages/Dashboard" import Profile from "./pages/Profile" import Settings from "./pages/Settings" import NotFound from "./pages/NotFound" import Maintenance from "./pages/Maintenance" // Module Pages import IMS from "./pages/modules/IMS" import ISA from "./pages/modules/ISA" import WasteManagement from "./pages/modules/WasteManagement" import ConstructionSites from "./pages/modules/ConstructionSites" import Analytics from "./pages/modules/Analytics" import UserManagement from "./pages/modules/UserManagement" function App() { return ( {/* Public Routes */} } /> } /> } /> {/* Protected Routes with Layout */} } > {/* Dashboard */} } /> } /> {/* Profile & Settings */} } /> } /> {/* Module Routes */} } /> } /> } /> } /> } /> } /> {/* Utility Pages */} } /> {/* 404 Page */} } /> ) } export default App [V0_FILE]javascript:file="client/src/components/inventory/InventoryTable.js" "use client" import { useState } from "react" import styled from "styled-components" import { FaBoxes, FaEdit, FaEye, FaTrash, FaSort, FaSortUp, FaSortDown } from "react-icons/fa" import LoadingSpinner from "../common/LoadingSpinner" import Button from "../common/Button" const TableContainer = styled.div` overflow-x: auto; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; box-shadow: ${(props) => props.theme.shadows?.sm || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"}; ` const Table = styled.table` width: 100%; border-collapse: collapse; min-width: 800px; ` const TableHeader = styled.thead` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-bottom: 2px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; ` const TableHeaderCell = styled.th` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; text-align: left; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; text-transform: uppercase; letter-spacing: 0.5px; cursor: ${(props) => (props.$sortable ? "pointer" : "default")}; user-select: none; position: relative; &:hover { background: ${(props) => (props.$sortable ? props.theme.colors?.border || "#e2e8f0" : "transparent")}; } ` const SortIcon = styled.span` margin-left: ${(props) => props.theme.spacing?.sm || "0.5rem"}; opacity: ${(props) => (props.$active ? 1 : 0.3)}; transition: opacity 0.3s ease; ` const TableBody = styled.tbody`` const TableRow = styled.tr` border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; transition: all 0.3s ease; &:hover { background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; } &:last-child { border-bottom: none; } ` const TableCell = styled.td` padding: ${(props) => props.theme.spacing?.lg || "1.5rem"} ${(props) => props.theme.spacing?.md || "1rem"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; vertical-align: middle; ` const ProductInfo = styled.div` display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const ProductImage = styled.div` width: 48px; height: 48px; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; flex-shrink: 0; ` const ProductDetails = styled.div` min-width: 0; ` const ProductName = styled.div` font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin-bottom: ${(props) => props.theme.spacing?.xs || "0.25rem"}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ` const ProductSKU = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const StatusBadge = styled.span` padding: ${(props) => props.theme.spacing?.xs || "0.25rem"} ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.full || "9999px"}; font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; ${(props) => { switch (props.$status) { case "in-stock": return ` background: ${props.theme.colors?.success || "#2d5016"}20; color: ${props.theme.colors?.success || "#2d5016"}; ` case "low-stock": return ` background: ${props.theme.colors?.warning || "#ed8936"}20; color: ${props.theme.colors?.warning || "#ed8936"}; ` case "out-of-stock": return ` background: ${props.theme.colors?.error || "#c53030"}20; color: ${props.theme.colors?.error || "#c53030"}; ` default: return ` background: ${props.theme.colors?.textSecondary || "#718096"}20; color: ${props.theme.colors?.textSecondary || "#718096"}; ` } }} ` const ActionButtonGroup = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; align-items: center; ` const ActionButton = styled.button` width: 36px; height: 36px; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; border: none; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-size: 0.875rem; &:hover { background: ${(props) => props.theme.colors?.primary || "#1b4332"}; color: white; transform: translateY(-2px); } &.delete { &:hover { background: ${(props) => props.theme.colors?.error || "#c53030"}; } } ` const EmptyState = styled.div` text-align: center; padding: ${(props) => props.theme.spacing?.["4xl"] || "6rem"} ${(props) => props.theme.spacing?.xl || "2rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; .icon { font-size: 4rem; margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; opacity: 0.5; } h3 { font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; } p { margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"}; } ` const LoadingContainer = styled.div` display: flex; justify-content: center; align-items: center; padding: ${(props) => props.theme.spacing?.["4xl"] || "6rem"}; ` const Pagination = styled.div` display: flex; justify-content: space-between; align-items: center; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; ` const PaginationInfo = styled.div` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.textSecondary || "#718096"}; ` const PaginationControls = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; align-items: center; ` const InventoryTable = ({ items = [], loading = false, onView, onEdit, onDelete, hasWritePermission = false, hasDeletePermission = false, pagination = null, onPageChange = null, onSort = null, sortConfig = null, }) => { const [localSortConfig, setLocalSortConfig] = useState(sortConfig || { key: null, direction: "asc" }) const handleSort = (key) => { let direction = "asc" if (localSortConfig.key === key && localSortConfig.direction === "asc") { direction = "desc" } const newSortConfig = { key, direction } setLocalSortConfig(newSortConfig) if (onSort) { onSort(newSortConfig) } } const getSortIcon = (key) => { if (localSortConfig.key !== key) { return } return localSortConfig.direction === "asc" ? : } const getStatusText = (item) => { if (item.quantity === 0) return "out-of-stock" if (item.quantity <= (item.minStockLevel || 10)) return "low-stock" return "in-stock" } const getStatusLabel = (status) => { switch (status) { case "in-stock": return "In Stock" case "low-stock": return "Low Stock" case "out-of-stock": return "Out of Stock" default: return "Unknown" } } if (loading) { return ( ) } if (!items || items.length === 0) { return (

No inventory items found

Start by adding your first inventory item to get started.

{hasWritePermission && } ) } return ( handleSort("name")}> Product {getSortIcon("name")} handleSort("category")}> Category {getSortIcon("category")} handleSort("quantity")}> Stock {getSortIcon("quantity")} handleSort("price")}> Unit Price {getSortIcon("price")} Total ValueStatusLocationActions {items.map((item) => { const status = getStatusText(item) return ( {item.name} SKU: {item.sku} {item.category} {item.quantity?.toLocaleString() || 0} {item.unit} ${item.price?.toFixed(2) || "0.00"} ${((item.quantity || 0) * (item.price || 0)).toLocaleString()} {getStatusLabel(status)} {item.location || "N/A"} onView && onView(item)} title="View Details"> {hasWritePermission && ( onEdit && onEdit(item)} title="Edit Item"> )} {hasDeletePermission && ( onDelete && onDelete(item._id || item.id)} title="Delete Item" > )} ) })}

{pagination && ( Showing {(pagination.page - 1) * pagination.limit + 1} to{" "} {Math.min(pagination.page * pagination.limit, pagination.total)} of {pagination.total} items Page {pagination.page} of {pagination.pages} )} ) } export default InventoryTable [V0_FILE]javascript:file="client/src/components/inventory/ItemModal.js" "use client" import { useState, useEffect } from "react" import styled from "styled-components" import { FaTimes, FaSave, FaBoxes, FaBarcode } from "react-icons/fa" import Button from "../common/Button" import Input from "../common/Input" const Modal = styled.div` position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(4px); ` const ModalContent = styled.div` background: ${(props) => props.theme.colors?.surface || "#ffffff"}; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"}; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; box-shadow: ${(props) => props.theme.shadows?.xl || "0 20px 25px -5px rgba(0, 0, 0, 0.1)"}; ` const ModalHeader = styled.div` display: flex; justify-content: space-between; align-items: center; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; background: ${(props) => props.theme.gradients?.primary || "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)"}; color: white; border-radius: ${(props) => props.theme.borderRadius?.xl || "1rem"} ${(props) => props.theme.borderRadius?.xl || "1rem"} 0 0; ` const ModalTitle = styled.h2` font-size: ${(props) => props.theme.typography?.fontSize?.xl || "1.25rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.bold || "700"}; margin: 0; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.md || "1rem"}; ` const CloseButton = styled.button` background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: ${(props) => props.theme.spacing?.sm || "0.5rem"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; transition: all 0.3s ease; opacity: 0.8; &:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; } ` const ModalBody = styled.div` padding: ${(props) => props.theme.spacing?.xl || "2rem"}; ` const Form = styled.form` display: flex; flex-direction: column; gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; ` const FormSection = styled.div` background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: ${(props) => props.theme.borderRadius?.lg || "0.75rem"}; padding: ${(props) => props.theme.spacing?.lg || "1.5rem"}; border-left: 4px solid ${(props) => props.theme.colors?.primary || "#1b4332"}; ` const SectionTitle = styled.h3` font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; margin: 0 0 ${(props) => props.theme.spacing?.lg || "1.5rem"} 0; display: flex; align-items: center; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const FormRow = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: ${(props) => props.theme.spacing?.lg || "1.5rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.md || "768px"}) { grid-template-columns: 1fr; } ` const FormGroup = styled.div` display: flex; flex-direction: column; gap: ${(props) => props.theme.spacing?.sm || "0.5rem"}; ` const Label = styled.label` font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; ` const Select = styled.select` padding: ${(props) => props.theme.spacing?.md || "1rem"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; transition: all 0.3s ease; &:focus { outline: none; border-color: ${(props) => props.theme.colors?.primary || "#1b4332"}; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 0 3px rgba(27, 67, 50, 0.1)"}; } ` const TextArea = styled.textarea` padding: ${(props) => props.theme.spacing?.md || "1rem"}; border: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; border-radius: ${(props) => props.theme.borderRadius?.md || "0.5rem"}; background: ${(props) => props.theme.colors?.surface || "#ffffff"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; color: ${(props) => props.theme.colors?.text || "#2d3748"}; font-family: inherit; resize: vertical; min-height: 100px; transition: all 0.3s ease; &:focus { outline: none; border-color: ${(props) => props.theme.colors?.primary || "#1b4332"}; box-shadow: ${(props) => props.theme.shadows?.glow || "0 0 0 3px rgba(27, 67, 50, 0.1)"}; } ` const ModalFooter = styled.div` display: flex; gap: ${(props) => props.theme.spacing?.md || "1rem"}; justify-content: flex-end; padding: ${(props) => props.theme.spacing?.xl || "2rem"}; border-top: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"}; background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"}; border-radius: 0 0 ${(props) => props.theme.borderRadius?.xl || "1rem"} ${(props) => props.theme.borderRadius?.xl || "1rem"}; @media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) { flex-direction: column; button { width: 100%; } } ` const ErrorMessage = styled.div` color: ${(props) => props.theme.colors?.error || "#c53030"}; font-size: ${(props) => props.theme.typography?.fontSize?.sm || "0.875rem"}; margin-top: ${(props) => props.theme.spacing?.xs || "0.25rem"}; ` const ItemModal = ({ isOpen, onClose, item, onSave, loading = false }) => { const [formData, setFormData] = useState({ name: "", sku: "", category: "", description: "", quantity: "", unit: "", price: "", minStockLevel: "", maxStockLevel: "", location: "", supplier: "", supplierContact: { email: "", phone: "", }, barcode: "", expiryDate: "", tags: "", }) const [errors, setErrors] = useState({}) // Predefined options const categories = [ "Construction Materials", "Fresh Produce", "Electronics", "Tools & Equipment", "Office Supplies", "Raw Materials", "Finished Goods", "Consumables", "Other", ] const units = [ "pieces", "kg", "lbs", "tons", "meters", "feet", "liters", "gallons", "boxes", "bags", "rolls", "sheets", "sets", "pairs", "units", ] const locations = [ "Main Warehouse", "Warehouse A", "Warehouse B", "Cold Storage", "Outdoor Storage", "Office Storage", "Production Floor", "Quality Control", "Shipping Dock", "Receiving Dock", ] useEffect(() => { if (item) { setFormData({ name: item.name || "", sku: item.sku || "", category: item.category || "", description: item.description || "", quantity: item.quantity?.toString() || "", unit: item.unit || "", price: item.price?.toString() || "", minStockLevel: item.minStockLevel?.toString() || "", maxStockLevel: item.maxStockLevel?.toString() || "", location: item.location || "", supplier: item.supplier || "", supplierContact: { email: item.supplierContact?.email || "", phone: item.supplierContact?.phone || "", }, barcode: item.barcode || "", expiryDate: item.expiryDate ? new Date(item.expiryDate).toISOString().split("T")[0] : "", tags: item.tags?.join(", ") || "", }) } else { setFormData({ name: "", sku: "", category: "", description: "", quantity: "", unit: "", price: "", minStockLevel: "10", maxStockLevel: "", location: "Main Warehouse", supplier: "", supplierContact: { email: "", phone: "", }, barcode: "", expiryDate: "", tags: "", }) } setErrors({}) }, [item, isOpen]) const validateForm = () => { const newErrors = {} if (!formData.name.trim()) newErrors.name = "Product name is required" if (!formData.sku.trim()) newErrors.sku = "SKU is required" if (!formData.category.trim()) newErrors.category = "Category is required" if (!formData.quantity || formData.quantity < 0) newErrors.quantity = "Valid quantity is required" if (!formData.unit.trim()) newErrors.unit = "Unit is required" if (!formData.price || formData.price < 0) newErrors.price = "Valid price is required" if (formData.minStockLevel && formData.minStockLevel < 0) newErrors.minStockLevel = "Minimum stock level must be positive" if (formData.maxStockLevel && formData.maxStockLevel < 0) newErrors.maxStockLevel = "Maximum stock level must be positive" if ( formData.minStockLevel && formData.maxStockLevel && Number(formData.minStockLevel) > Number(formData.maxStockLevel) ) { newErrors.maxStockLevel = "Maximum stock level must be greater than minimum" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e) => { e.preventDefault() if (!validateForm()) { return } const submitData = { ...formData, quantity: Number(formData.quantity), price: Number(formData.price), minStockLevel: formData.minStockLevel ? Number(formData.minStockLevel) : 10, maxStockLevel: formData.maxStockLevel ? Number(formData.maxStockLevel) : null, expiryDate: formData.expiryDate ? new Date(formData.expiryDate) : null, tags: formData.tags ? formData.tags .split(",") .map((tag) => tag.trim()) .filter(Boolean) : [], } onSave(submitData) } const handleChange = (e) => { const { name, value } = e.target if (name.includes(".")) { const [parent, child] = name.split(".") setFormData((prev) => ({ ...prev, [parent]: { ...prev[parent], [child]: value, }, })) } else { setFormData((prev) => ({ ...prev, [name]: value, })) } // Clear error when user starts typing if (errors[name]) { setErrors((prev) => ({ ...prev, [name]: "", })) } } const generateSKU = () => { const prefix = formData.category ? formData.category.substring(0, 3).toUpperCase() : "ITM" const timestamp = Date.now().toString().slice(-6) const randomNum = Math.floor(Math.random() * 100) .toString() .padStart(2, "0") const generatedSKU = `${prefix}-${timestamp}-${randomNum}` setFormData((prev) => ({ ...prev, sku: generatedSKU, })) } if (!isOpen) return null return ( e.stopPropagation()}> {item ? "Edit Item" : "Add New Item"}

Basic Information Product Name * {errors.name && {errors.name}} SKU *

{errors.sku && {errors.sku}} Category * {errors.category && {errors.category}} Location Description

</FormGroup>
            </FormSection>

<FormSection>
              <SectionTitle>Inventory Details</SectionTitle>

<FormRow>
                <FormGroup>
                  <Label>Quantity *</Label>
                  <Input
                    name="quantity"
                    type="number"
                    min="0"
                    value={formData.quantity}
                    onChange={handleChange}
                    placeholder="0"
                    error={errors.quantity}
                  />
                  {errors.quantity && <ErrorMessage>{errors.quantity}</ErrorMessage>}
                </FormGroup>

<FormGroup>
                  <Label>Unit *</Label>
                  <Select name="unit" value={formData.unit} onChange={handleChange}>
                    <option value="">Select unit</option>
                    {units.map((unit) => (
                      <option key={unit} value={unit}>
                        {unit}
                      </option>
                    ))}
                  </Select>
                  {errors.unit && <ErrorMessage>{errors.unit}</ErrorMessage>}
                </FormGroup>
              </FormRow>

<FormRow>
                <FormGroup>
                  <Label>Unit Price *</Label>
                  <Input
                    name="price"
                    type="number"
                    min="0"
                    step="0.01"
                    value={formData.price}
                    onChange={handleChange}
                    placeholder="0.00"
                    error={errors.price}
                  />
                  {errors.price && <ErrorMessage>{errors.price}</ErrorMessage>}
                </FormGroup>

<FormGroup>
                  <Label>Expiry Date</Label>
                  <Input name="expiryDate" type="date" value={formData.expiryDate} onChange={handleChange} />
                </FormGroup>
              </FormRow>

<FormRow>
                <FormGroup>
                  <Label>Minimum Stock Level</Label>
                  <Input
                    name="minStockLevel"
                    type="number"
                    min="0"
                    value={formData.minStockLevel}
                    onChange={handleChange}
                    placeholder="10"
                    error={errors.minStockLevel}
                  />
                  {errors.minStockLevel && <ErrorMessage>{errors.minStockLevel}</ErrorMessage>}
                </FormGroup>

<FormGroup>
                  <Label>Maximum Stock Level</Label>
                  <Input
                    name="maxStockLevel"
                    type="number"
                    min="0"
                    value={formData.maxStockLevel}
                    onChange={handleChange}
                    placeholder="1000"
                    error={errors.maxStockLevel}
                  />
                  {errors.maxStockLevel && <ErrorMessage>{errors.maxStockLevel}</ErrorMessage>}
                </FormGroup>
              </FormRow>
            </FormSection>

<FormSection>
              <SectionTitle>Supplier Information</SectionTitle>

<FormRow>
                <FormGroup>
                  <Label>Supplier Name</Label>
                  <Input
                    name="supplier"
                    value={formData.supplier}
                    onChange={handleChange}
                    placeholder="Enter supplier name"
                  />
                </FormGroup>

<FormGroup>
                  <Label>Supplier Email</Label>
                  <Input
                    name="supplierContact.email"
                    type="email"
                    value={formData.supplierContact.email}
                    onChange={handleChange}
                    placeholder="supplier@example.com"
                  />
                </FormGroup>
              </FormRow>

<FormRow>
                <FormGroup>
                  <Label>Supplier Phone</Label>
                  <Input
                    name="supplierContact.phone"
                    value={formData.supplierContact.phone}
                    onChange={handleChange}
                    placeholder="+1 (555) 123-4567"
                  />
                </FormGroup>

<FormGroup>
                  <Label>Barcode</Label>
                  <div style={{ display: "flex", gap: "0.5rem" }}>
                    <Input
                      name="barcode"
                      value={formData.barcode}
                      onChange={handleChange}
                      placeholder="Enter barcode"
                      style={{ flex: 1 }}
                    />
                    <Button type="button" variant="outline" size="sm" title="Scan Barcode">
                      <FaBarcode />
                    </Button>
                  </div>
                </FormGroup>
              </FormRow>

<ModalFooter>
          <Button type="button" variant="secondary" onClick={onClose} disabled={loading}>
            Cancel
          </Button>
          <Button type="submit" variant="primary" onClick={handleSubmit} disabled={loading}>
            <FaSave />
            {loading ? "Saving..." : item ? "Update Item" : "Create Item"}
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

export default ItemModal
[V0_FILE]javascript:file="client/src/components/inventory/StatsCards.js"
"use client"

import { useState, useEffect } from "react"
import styled from "styled-components"
import {
  FaBoxes,
  FaExclamationTriangle,
  FaDollarSign,
  FaWarehouse,
  FaTrendUp,
  FaTrendDown,
  FaChartLine,
} from "react-icons/fa"
import Card from "../common/Card"
import LoadingSpinner from "../common/LoadingSpinner"
import api from "../../utils/api"

const StatsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: ${(props) => props.theme.spacing?.xl || "2rem"};
  margin-bottom: ${(props) => props.theme.spacing?.["3xl"] || "4rem"};

@media (max-width: ${(props) => props.theme.breakpoints?.sm || "640px"}) {
    grid-template-columns: 1fr;
    gap: ${(props) => props.theme.spacing?.lg || "1.5rem"};
  }
`

const StatCard = styled(Card)`
  background: ${(props) => props.theme.colors?.surface || "#ffffff"};
  border: none;
  box-shadow: ${(props) => props.theme.shadows?.lg || "0 10px 15px -3px rgba(27, 67, 50, 0.1)"};
  transition: all 0.3s ease;
  cursor: pointer;

&:hover {
    transform: translateY(-8px);
    box-shadow: ${(props) => props.theme.shadows?.glowLarge || "0 0 40px rgba(64, 145, 108, 0.2)"};
  }
`

const StatHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"};
`

const StatContent = styled.div`
  flex: 1;
  text-align: right;
`

const StatPeriod = styled.div`
  font-size: ${(props) => props.theme.typography?.fontSize?.xs || "0.75rem"};
  color: ${(props) => props.theme.colors?.textSecondary || "#718096"};
`

const LoadingContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
`

const StatsCards = ({ onCardClick }) => {
  const [stats, setStats] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

useEffect(() => {
    fetchStats()
  }, [])

const fetchStats = async () => {
    try {
      setLoading(true)
      const response = await api.get("/inventory/stats")
      if (response.data.success) {
        setStats(response.data.data)
      }
    } catch (error) {
      console.error("Failed to fetch inventory stats:", error)
      setError("Failed to load statistics")
    } finally {
      setLoading(false)
    }
  }

const formatCurrency = (value) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(value)
  }

const formatNumber = (value) => {
    return new Intl.NumberFormat("en-US").format(value)
  }

if (loading) {
    return (
      <StatsGrid>
        <LoadingContainer>
          <LoadingSpinner size="60px" />
        </LoadingContainer>
      </StatsGrid>
    )
  }

if (error || !stats) {
    return (
      <StatsGrid>
        <StatCard>
          <div style={{ textAlign: "center", padding: "2rem", color: "#718096" }}>
            <p>Unable to load statistics</p>
            <button onClick={fetchStats} style={{ marginTop: "1rem" }}>
              Retry
            </button>
          </div>
        </StatCard>
      </StatsGrid>
    )
  }

const statsData = [
    {
      title: "Total Items",
      value: formatNumber(stats.totalItems || 0),
      change: "+12.5%",
      positive: true,
      icon: <FaBoxes />,
      iconColor: "linear-gradient(135deg, #1b4332 0%, #2d5a47 100%)",
      onClick: () => onCardClick && onCardClick("inventory"),
    },
    {
      title: "Low Stock Alerts",
      value: formatNumber(stats.lowStockItems || 0),
      change: stats.lowStockItems > 0 ? "+8.2%" : "0%",
      positive: false,
      icon: <FaExclamationTriangle />,
      iconColor: "linear-gradient(135deg, #ed8936 0%, #dd6b20 100%)",
      onClick: () => onCardClick && onCardClick("low-stock"),
    },
    {
      title: "Total Value",
      value: formatCurrency(stats.totalValue || 0),
      change: "+15.3%",
      positive: true,
      icon: <FaDollarSign />,
      iconColor: "linear-gradient(135deg, #40916c 0%, #2d5016 100%)",
      onClick: () => onCardClick && onCardClick("value"),
    },
    {
      title: "Locations",
      value: formatNumber(stats.locationsCount || 0),
      change: "+2.1%",
      positive: true,
      icon: <FaWarehouse />,
      iconColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
      onClick: () => onCardClick && onCardClick("locations"),
    },
    {
      title: "Categories",
      value: formatNumber(stats.categoriesCount || 0),
      change: "0%",
      positive: true,
      icon: <FaChartLine />,
      iconColor: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
      onClick: () => onCardClick && onCardClick("categories"),
    },
    {
      title: "Out of Stock",
      value: formatNumber(stats.outOfStockItems || 0),
      change: stats.outOfStockItems > 0 ? "-5.2%" : "0%",
      positive: stats.outOfStockItems === 0,
      icon: <FaExclamationTriangle />,
      iconColor: "linear-gradient(135deg, #c53030 0%, #9c2626 100%)",
      onClick: () => onCardClick && onCardClick("out-of-stock"),
    },
  ]

return (
    <StatsGrid>
      {statsData.map((stat, index) => (
        <StatCard key={index} onClick={stat.onClick}>
          <StatHeader>
            <StatIcon $iconColor={stat.iconColor}>{stat.icon}</StatIcon>
            <StatContent>
              <StatValue>{stat.value}</StatValue>
              <StatLabel>{stat.title}</StatLabel>
            </StatContent>
          </StatHeader>
          <StatFooter>
            <StatChange $positive={stat.positive}>
              {stat.positive ? <FaTrendUp /> : <FaTrendDown />}
              {stat.change}
            </StatChange>
            <StatPeriod>from last month</StatPeriod>
          </StatFooter>
        </StatCard>
      ))}
    </StatsGrid>
  )
}

export default StatsCards
[V0_FILE]javascript:file="client/src/components/inventory/PurchaseOrderList.js"
"use client"

import { useState, useEffect } from "react"
import styled from "styled-components"
import {
  FaTruck,
  FaPlus,
  FaEye,
  FaEdit,
  FaTrash,
  FaDownload,
  FaCalendar,
  FaUser,
  FaSort,
  FaSortUp,
  FaSortDown,
} from "react-icons/fa"
import Button from "../common/Button"
import LoadingSpinner from "../common/LoadingSpinner"
import api from "../../utils/api"

const TableContainer = styled.div`
  overflow-x: auto;
`

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
`

const TableHeader = styled.thead`
  background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"};
`

&:hover {
    background: ${(props) => (props.$sortable ? props.theme.colors?.border || "#e2e8f0" : "transparent")};
  }
`

const SortIcon = styled.span`
  margin-left: ${(props) => props.theme.spacing?.sm || "0.5rem"};
  opacity: ${(props) => (props.$active ? 1 : 0.3)};
  transition: opacity 0.3s ease;
`

const TableBody = styled.tbody``

const TableRow = styled.tr`
  border-bottom: 1px solid ${(props) => props.theme.colors?.border || "#e2e8f0"};
  transition: all 0.3s ease;

&:hover {
    background: ${(props) => props.theme.colors?.surfaceLight || "#f7fafc"};
  }

&:last-child {
    border-bottom: none;
  }
`

const SupplierInfo = styled.div`
  display: flex;
  align-items: center;
  gap: ${(props) => props.theme.spacing?.sm || "0.5rem"};
`

const SupplierIcon = styled.div`
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: ${(props) => props.theme.gradients?.accent || "linear-gradient(135deg, #40916c 0%, #2d5016 100%)"};
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  flex-shrink: 0;
`

const SupplierName = styled.div`
  font-weight: ${(props) => props.theme.typography?.fontWeight?.medium || "500"};
  color: ${(props) => props.theme.colors?.text || "#2d3748"};
`

${(props) => {
    switch (props.$status) {
      case "pending":
        return `
          background: ${props.theme.colors?.warning || "#ed8936"}20;
          color: ${props.theme.colors?.warning || "#ed8936"};
        `
      case "sent":
        return `
          background: ${props.theme.colors?.info || "#3182ce"}20;
          color: ${props.theme.colors?.info || "#3182ce"};
        `
      case "confirmed":
        return `
          background: ${props.theme.colors?.success || "#2d5016"}20;
          color: ${props.theme.colors?.success || "#2d5016"};
        `
      case "received":
        return `
          background: ${props.theme.colors?.success || "#2d5016"}30;
          color: ${props.theme.colors?.success || "#2d5016"};
        `
      case "cancelled":
        return `
          background: ${props.theme.colors?.error || "#c53030"}20;
          color: ${props.theme.colors?.error || "#c53030"};
        `
      default:
        return `
          background: ${props.theme.colors?.textSecondary || "#718096"}20;
          color: ${props.theme.colors?.textSecondary || "#718096"};
        `
    }
  }}
`

const ActionButtonGroup = styled.div`
  display: flex;
  gap: ${(props) => props.theme.spacing?.sm || "0.5rem"};
  align-items: center;
`

&:hover {
    background: ${(props) => props.theme.colors?.primary || "#1b4332"};
    color: white;
    transform: translateY(-1px);
  }

&.delete {
    &:hover {
      background: ${(props) => props.theme.colors?.error || "#c53030"};
    }
  }
`

.icon {
    font-size: 3rem;
    margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"};
    opacity: 0.5;
  }

h3 {
    font-size: ${(props) => props.theme.typography?.fontSize?.lg || "1.125rem"};
    font-weight: ${(props) => props.theme.typography?.fontWeight?.semibold || "600"};
    margin-bottom: ${(props) => props.theme.spacing?.sm || "0.5rem"};
    color: ${(props) => props.theme.colors?.text || "#2d3748"};
  }

p {
    margin-bottom: ${(props) => props.theme.spacing?.lg || "1.5rem"};
  }
`

const LoadingContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: ${(props) => props.theme.spacing?.["4xl"] || "6rem"};
`

const PurchaseOrderList = ({
  onAdd,
  onView,
  onEdit,
  onDelete,
  hasWritePermission = false,
  hasDeletePermission = false,
}) => {
  const [purchaseOrders, setPurchaseOrders] = useState([])
  const [loading, setLoading] = useState(true)
  const [sortConfig, setSortConfig] = useState({ key: "orderDate", direction: "desc" })

useEffect(() => {
    fetchPurchaseOrders()
  }, [])

const fetchPurchaseOrders = async () => {
    try {
      setLoading(true)
      const response = await api.get("/inventory/purchase-orders")
      if (response.data.success) {
        setPurchaseOrders(response.data.data)
      }
    } catch (error) {
      console.error("Failed to fetch purchase orders:", error)
    } finally {
      setLoading(false)
    }
  }

const handleSort = (key) => {
    let direction = "asc"
    if (sortConfig.key === key && sortConfig.direction === "asc") {
      direction = "desc"
    }
    setSortConfig({ key, direction })
  }

const getSortIcon = (key) => {
    if (sortConfig.key !== key) {
      return <FaSort />
    }
    return sortConfig.direction === "asc" ? <FaSortUp /> : <FaSortDown />
  }

const getStatusLabel = (status) => {
    const labels = {
      pending: "Pending",
      sent: "Sent",
      confirmed: "Confirmed",
      "partially-received": "Partial",
      received: "Received",
      cancelled: "Cancelled",
    }
    return labels[status] || status
  }

const formatCurrency = (amount) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(amount)
  }

const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

// Sort purchase orders
  const sortedPurchaseOrders = [...purchaseOrders].sort((a, b) => {
    const aValue = a[sortConfig.key]
    const bValue = b[sortConfig.key]

if (sortConfig.direction === "asc") {
      return aValue > bValue ? 1 : -1
    } else {
      return aValue < bValue ? 1 : -1
    }
  })

if (loading) {
    return (
      <Container>
        <LoadingContainer>
          <LoadingSpinner size="60px" />
        </LoadingContainer>
      </Container>
    )
  }

return (
    <Container>
      <Header>
        <HeaderTitle>
          <FaTruck />
          Purchase Orders
        </HeaderTitle>
        {hasWritePermission && (
          <Button variant="primary" size="sm" onClick={onAdd}>
            <FaPlus /> Create PO
          </Button>
        )}
      </Header>

{sortedPurchaseOrders.length === 0 ? (
        <EmptyState>
          <div className="icon">
            <FaTruck />
          </div>
          <h3>No Purchase Orders</h3>
          <p>Create your first purchase order to get started.</p>
          {hasWritePermission && (
            <Button variant="primary" onClick={onAdd}>
              <FaPlus /> Create Purchase Order
            </Button>
          )}
        </EmptyState>
      ) : (
        <TableContainer>
          <Table>
            <TableHeader>
              <tr>
                <TableHeaderCell $sortable onClick={() => handleSort("poNumber")}>
                  PO Number
                  <SortIcon $active={sortConfig.key === "poNumber"}>{getSortIcon("poNumber")}</SortIcon>
                </TableHeaderCell>
                <TableHeaderCell $sortable onClick={() => handleSort("supplier")}>
                  Supplier
                  <SortIcon $active={sortConfig.key === "supplier"}>{getSortIcon("supplier")}</SortIcon>
                </TableHeaderCell>
                <TableHeaderCell $sortable onClick={() => handleSort("orderDate")}>
                  Order Date
                  <SortIcon $active={sortConfig.key === "orderDate"}>{getSortIcon("orderDate")}</SortIcon>
                </TableHeaderCell>
                <TableHeaderCell>Expected Date</TableHeaderCell>
                <TableHeaderCell $sortable onClick={() => handleSort("total")}>
                  Amount
                  <SortIcon $active={sortConfig.key === "total"}>{getSortIcon("total")}</SortIcon>
                </TableHeaderCell>
                <TableHeaderCell $sortable onClick={() => handleSort("status")}>
                  Status
                  <SortIcon $active={sortConfig.key === "status"}>{getSortIcon("status")}</SortIcon>
                </TableHeaderCell>
                <TableHeaderCell>Actions</TableHeaderCell>
              </tr>
            </TableHeader>
            <TableBody>
              {sortedPurchaseOrders.map((po) => (
                <TableRow key={po._id}>
                  <TableCell>
                    <PONumber>{po.poNumber}</PONumber>
                    <PODate>
                      <FaCalendar />
                      Created {formatDate(po.createdAt)}
                    </PODate>
                  </TableCell>
                  <TableCell>
                    <SupplierInfo>
                      <SupplierIcon>
                        <FaUser />
                      </SupplierIcon>
                      <SupplierName>{po.supplier}</SupplierName>
                    </SupplierInfo>
                  </TableCell>
                  <TableCell>{formatDate(po.orderDate)}</TableCell>
                  <TableCell>{po.expectedDate ? formatDate(po.expectedDate) : "Not set"}</TableCell>
                  <TableCell>
                    <Amount>{formatCurrency(po.total)}</Amount>
                  </TableCell>
                  <TableCell>
                    <StatusBadge $status={po.status}>{getStatusLabel(po.status)}</StatusBadge>
                  </TableCell>
                  <TableCell>
                    <ActionButtonGroup>
                      <ActionButton onClick={() => onView && onView(po)} title="View Details">
                        <FaEye />
                      </ActionButton>
                      <ActionButton title="Download PDF">
                        <FaDownload />
                      </ActionButton>
                      {hasWritePermission && (
                        <ActionButton onClick={() => onEdit && onEdit(po)} title="Edit PO">
                          <FaEdit />
                        </ActionButton>
                      )}
                      {hasDeletePermission && (
                        <ActionButton className="delete" onClick={() => onDelete && onDelete(po._id)} title="Delete PO">
                          <FaTrash />
                        </ActionButton>
                      )}
                    </ActionButtonGroup>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </Container>
  )
}

export default PurchaseOrderList</article></body></html>