setIsMenuOpen(false)}
+ onKeyDown={e => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ setIsMenuOpen(false);
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ aria-label="Close menu"
+ />
+ )}
+
+ );
+};
+
+export default KitchenHeader;
diff --git a/src/components/KitchenInterfaces/KitchenHeader.module.css b/src/components/KitchenInterfaces/KitchenHeader.module.css
new file mode 100644
index 0000000000..9142906408
--- /dev/null
+++ b/src/components/KitchenInterfaces/KitchenHeader.module.css
@@ -0,0 +1,211 @@
+.headerContainer {
+ background-color: #ffffff;
+ border-bottom: 1px solid #e0e0e0;
+ padding: 0 32px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-family: 'Inter', sans-serif;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+}
+
+/* Left side: Logo & Brand */
+.brandSection {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.logoImage {
+ height: 40px;
+ width: auto;
+ border-radius: 8px; /* Slight rounding if square */
+}
+
+.brandTextContainer {
+ display: flex;
+ flex-direction: column;
+ white-space: nowrap;
+}
+
+.brandTitle {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ line-height: 1.2;
+}
+
+.brandSubtitle {
+ font-size: 11px;
+ color: #888;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+/* Center-Right: Navigation */
+.navContainer {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.navItem {
+ text-decoration: none;
+ color: #555;
+ font-size: 14px;
+ font-weight: 500;
+ padding: 8px 16px;
+ border-radius: 20px;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+}
+
+.navItem:hover {
+ background-color: #f5f5f5;
+ color: #333;
+ text-decoration: none;
+}
+
+/* Active State */
+.activeLink {
+ background-color: #e6f4ea; /* Light green background */
+ color: #2e7d32; /* Darker green text */
+ font-weight: 600;
+}
+.activeLink:hover {
+ background-color: #dcedc8;
+ color: #1b5e20;
+}
+
+/* Dropdown Arrow Indicator (simple css triangle or unicode) */
+.dropdownArrow {
+ font-size: 10px;
+ margin-left: 4px;
+ color: #777;
+}
+
+/* Mobile Menu Button */
+.menuToggle {
+ display: none;
+ background: none;
+ border: none;
+ font-size: 24px;
+ color: #333;
+ cursor: pointer;
+}
+
+/* Background Overlay */
+.overlay {
+ display: none;
+}
+
+
+/* Responsive Adjustments */
+@media (max-width: 900px) {
+ .headerContainer {
+ padding: 0 16px;
+ height: 64px; /* Fixed height again */
+ flex-wrap: nowrap; /* Prevent wrap */
+ padding-bottom: 0;
+ padding-top: 0;
+ }
+
+ .brandTextContainer {
+ white-space: nowrap;
+ }
+
+ .menuToggle {
+ display: block;
+ }
+
+ .navContainer {
+ position: absolute;
+ top: 64px;
+ left: 0;
+ width: 100%;
+ background-color: white;
+ flex-direction: column;
+ padding: 16px 0;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transform: translateY(-150%);
+ transition: transform 0.3s ease-in-out;
+ z-index: 999;
+ align-items: flex-start;
+ }
+
+ .navOpen {
+ transform: translateY(0);
+ }
+
+ .navItem {
+ width: 100%;
+ padding: 12px 24px;
+ border-radius: 0;
+ }
+
+ /* Overlay */
+ .overlay {
+ display: block;
+ position: fixed;
+ top: 64px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0,0,0,0.3);
+ z-index: 998;
+ }
+
+ /* Prevent horizontal scrolling on container overrides */
+ .navContainer::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+
+/* Dark Mode Overrides */
+.darkMode {
+ background-color: #1c2541; /* bg-space-cadet */
+ border-bottom: 1px solid #2f4157;
+ color: #fff;
+}
+
+.darkMode .brandTitle {
+ color: #e6e6e6;
+}
+
+.darkMode .brandSubtitle {
+ color: #b0b0b0;
+}
+
+.darkMode .navItem {
+ color: #b0b0b0;
+}
+
+.darkMode .navItem:hover {
+ background-color: #2f4157;
+ color: #fff;
+}
+
+.darkMode .activeLink {
+ background-color: #2e7d32;
+ color: #fff;
+}
+
+.darkMode .activeLink:hover {
+ background-color: #1b5e20;
+}
+
+.darkMode .menuToggle {
+ color: #fff;
+}
+
+@media (max-width: 900px) {
+ .darkMode .navContainer {
+ background-color: #1c2541;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.5);
+ }
+}
diff --git a/src/components/KitchenInterfaces/Processing/AddProcessingProjectModal.jsx b/src/components/KitchenInterfaces/Processing/AddProcessingProjectModal.jsx
new file mode 100644
index 0000000000..7bba166132
--- /dev/null
+++ b/src/components/KitchenInterfaces/Processing/AddProcessingProjectModal.jsx
@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { useSelector } from 'react-redux';
+import styles from './ProcessingLandingPage.module.css';
+
+const AddProcessingProjectModal = ({ isOpen, onClose, targetSection, onSave }) => {
+ const darkMode = useSelector(state => state.theme.darkMode);
+
+ const [formData, setFormData] = useState({
+ projectName: '',
+ type: targetSection || 'canning',
+ priority: 'Low',
+ quantity: '',
+ trays: '',
+ batches: '',
+ storage: '',
+ date: new Date().toISOString().split('T')[0],
+ });
+
+ useEffect(() => {
+ if (targetSection) {
+ setFormData(prev => ({ ...prev, type: targetSection }));
+ }
+ }, [targetSection]);
+
+ if (!isOpen) return null;
+
+ const handleChange = e => {
+ const { name, value } = e.target;
+ setFormData(prev => ({ ...prev, [name]: value }));
+ };
+
+ const handleSubmit = e => {
+ e.preventDefault();
+ // Map frontend field names to backend schema
+ const payload = {
+ item_name: formData.projectName,
+ process_name: formData.type,
+ quantity: Number(formData.quantity) || 0,
+ unit: formData.unit || 'lbs',
+ batches: Number(formData.batches) || 0,
+ priority: formData.priority,
+ scheduled_date: formData.date,
+ supplies_quantity: Number(formData.trays || formData.storage) || 0,
+ supplies_type: formData.type === 'cellarStorage' ? 'bins' : 'trays',
+ };
+ onSave(payload);
+ };
+
+ return (
+
+
+
+
Schedule New Project
+
+
+
+
+
+
+ );
+};
+
+export default AddProcessingProjectModal;
diff --git a/src/components/KitchenInterfaces/Processing/ProcessingLandingPage.jsx b/src/components/KitchenInterfaces/Processing/ProcessingLandingPage.jsx
new file mode 100644
index 0000000000..57ac3be685
--- /dev/null
+++ b/src/components/KitchenInterfaces/Processing/ProcessingLandingPage.jsx
@@ -0,0 +1,308 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useSelector } from 'react-redux';
+import styles from './ProcessingLandingPage.module.css';
+import ProcessingQueue from './ProcessingQueue';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ENDPOINTS } from '../../../utils/URL';
+import {
+ faArchive,
+ faSun,
+ faSnowflake,
+ faWarehouse,
+ faPlus,
+} from '@fortawesome/free-solid-svg-icons';
+
+// Mock Data
+const DASHBOARD_METRICS = [
+ { id: 1, title: 'Items Canned', value: 245, icon: faArchive, iconClass: styles.iconPurple },
+ { id: 2, title: 'Items Dehydrated', value: 128, icon: faSun, iconClass: styles.iconOrange },
+ { id: 3, title: 'Freeze Dried', value: 67, icon: faSnowflake, iconClass: styles.iconBlue },
+ { id: 4, title: 'Cellar Storage', value: 180, icon: faWarehouse, iconClass: styles.iconGreen },
+];
+
+const PROCESSING_METHODS = [
+ { id: 'canning', name: 'Canning', total: 245, thisMonth: 45, status: 'active' },
+ { id: 'dehydration', name: 'Dehydration', total: 128, thisMonth: 28, status: 'active' },
+ { id: 'freezeDrying', name: 'Freeze Drying', total: 67, thisMonth: 12, status: 'active' },
+ { id: 'cellarStorage', name: 'Cellar Storage', total: 180, thisMonth: 52, status: 'active' },
+];
+
+const CANNING_SUPPLIES = [
+ { name: 'Quart Jars', quantity: '120 units' },
+ { name: 'Pint Jars', quantity: '85 units' },
+ { name: 'Canning Lids', quantity: '200 units' },
+];
+
+const STORAGE_SUPPLIES = [
+ { name: 'Vacuum Seal Bags (Quart)', quantity: '45 units' },
+ { name: 'Mylar Bags (Gallon)', quantity: '38 units' },
+ { name: 'Cellar Storage Bins', quantity: '12 units' },
+];
+
+const SECTIONS = [
+ 'Processing Overview',
+ 'Canning',
+ 'Dehydration',
+ 'Freeze Drying',
+ 'Cellar Storage',
+ 'Bulk Orders',
+ 'Menu Calendar',
+];
+
+import AddProcessingProjectModal from './AddProcessingProjectModal';
+// ... checks for imports
+
+const ProcessingLandingPage = () => {
+ const [activeTab, setActiveTab] = useState('Processing Overview');
+ const darkMode = useSelector(state => state.theme.darkMode);
+
+ // State for projects and error handling
+ const [projects, setProjects] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ // Modal State
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [modalTargetSection, setModalTargetSection] = useState('canning');
+
+ // Fetch Projects on Mount
+ useEffect(() => {
+ const fetchProjects = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const url = ENDPOINTS.KITCHEN_PROCESSING_PROJECTS || '/api/kitchenandinventory/processing';
+ const response = await axios.get(url);
+ if (Array.isArray(response.data)) {
+ setProjects(response.data);
+ } else {
+ // eslint-disable-next-line no-console
+ console.warn('Received non-array data from API:', response.data);
+ setError('Cannot connect to backend: Invalid response format.');
+ }
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.error('Error fetching processing projects:', err);
+ setError('Cannot connect to backend: Processing module api not found.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchProjects();
+ }, []);
+
+ const getProjectsByType = type => {
+ if (!Array.isArray(projects)) return [];
+ return projects.filter(p => p.process_name === type);
+ };
+
+ const openAddModal = section => {
+ setModalTargetSection(section);
+ setIsModalOpen(true);
+ };
+
+ const handleCreateProject = async newProjectData => {
+ try {
+ const url = ENDPOINTS.KITCHEN_PROCESSING_PROJECTS || '/api/kitchenandinventory/processing';
+ await axios.post(url, newProjectData);
+
+ // Re-fetch all projects from backend to get consistent data with _id
+ const response = await axios.get(url);
+ if (Array.isArray(response.data)) {
+ setProjects(response.data);
+ }
+ setIsModalOpen(false);
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.error('Error creating project:', err);
+ // eslint-disable-next-line no-alert
+ alert('Failed to create project. Backend execution failed.');
+ setIsModalOpen(false);
+ }
+ };
+
+ const handleAddProject = type => {
+ openAddModal(type);
+ };
+
+ const renderContent = () => {
+ if (activeTab === 'Processing Overview') {
+ return (
+
+ {/* Left Column: Processing Methods */}
+
+
+
Processing Methods
+
Items processed by method
+
+
+
+ {PROCESSING_METHODS.map(method => (
+
+
+ {method.name}
+ +{method.thisMonth} this month
+
+
+ {method.total}
+ {method.status}
+
+
+ ))}
+
+
+
+ {/* Right Column: Processing Supplies */}
+
+
+
Processing Supplies
+
Current inventory of processing materials
+
+
+
+
+
Canning Supplies
+ {CANNING_SUPPLIES.map((item, idx) => (
+
+ {item.name}
+ {item.quantity}
+
+ ))}
+
+
+
+
Storage Materials
+ {STORAGE_SUPPLIES.map((item, idx) => (
+
+ {item.name}
+ {item.quantity}
+
+ ))}
+
+
+
+
+
+
+ );
+ }
+
+ // Render Queue Sections
+ if (activeTab === 'Canning') {
+ return (
+
handleAddProject('canning')}
+ />
+ );
+ }
+ if (activeTab === 'Dehydration') {
+ return (
+ handleAddProject('dehydration')}
+ />
+ );
+ }
+ if (activeTab === 'Freeze Drying') {
+ return (
+ handleAddProject('freezeDrying')}
+ />
+ );
+ }
+ if (activeTab === 'Cellar Storage') {
+ return (
+ handleAddProject('cellarStorage')}
+ />
+ );
+ }
+
+ return (
+
+
+
+
{activeTab} Section
+
This module is currently under development.
+
+
+
+
Kitchen & Processing
+
+ Manage food processing, preservation, bulk orders, and menu planning
+
+
+
+
+ {DASHBOARD_METRICS.map(metric => (
+
+
+ {metric.title}
+
+
+
{metric.value}
+
+ ))}
+
+
+
+ {SECTIONS.map(section => (
+
+ ))}
+
+
+ {error ? (
+
+ {error}
+
+ ) : loading ? (
+
Loading projects...
+ ) : (
+ renderContent()
+ )}
+
+
setIsModalOpen(false)}
+ targetSection={modalTargetSection}
+ onSave={handleCreateProject}
+ />
+
+
+
+
{project.item_name}
+
+ Quantity: {project.quantity} {project.unit || 'lbs'}
+
+
+
+ {project.priority || 'Low'} priority
+
+
+
+
+ {project.batches > 0 && (
+
+ Batches
+ {project.batches} batches
+
+ )}
+
+
+ Scheduled Date
+ {formatDate(project.scheduled_date)}
+
+
+
+
+
+
+
+
+
+ {projects && projects.length > 0 ? (
+ projects.map(project => (
+
+ ))
+ ) : (
+
+
No scheduled projects.
+
+ )}
+
+