Drawer Width - Copy this React, Mui Component to your project

o create the E-Tenders for EDI Add and Update functionality under the design specifications you've provided, the following code structure can be implemented using a web framework like React (for the front end) combined with backend logic for handling Add/Update functionality. I'll provide both front-end design (UI structure and interactions) and an example of how the backend might be structured. Front-End (React) javascript Copy code import React, { useState, useEffect } from 'react'; import './Dashboard.css'; // Ensure to include your styles // Card component for displaying each tender const TenderCard = ({ tender, onEdit, onDelete }) => { return ( <div className="tender-card" onClick={() => onEdit(tender)}> <h3>{tender.title}</h3> <p>Status: <span className={tender.status.toLowerCase()}>{tender.status}</span></p> <button className="delete-btn" onClick={(e) => {e.stopPropagation(); onDelete(tender.id)}}>Delete</button> </div> ); }; const Dashboard = () => { const [tenders, setTenders] = useState([]); const [isDarkMode, setIsDarkMode] = useState(false); const [isAdding, setIsAdding] = useState(false); const [selectedTender, setSelectedTender] = useState(null); // Fetch tenders from the server useEffect(() => { fetch('/api/tenders') // API endpoint to get tenders .then(response => response.json()) .then(data => setTenders(data)); }, []); // Handle adding/updating tender const handleAddOrUpdateTender = (tender) => { if (isAdding) { fetch('/api/tenders', { method: 'POST', body: JSON.stringify(tender), headers: { 'Content-Type': 'application/json' }, }).then(() => fetchTenders()); } else { fetch(`/api/tenders/${tender.id}`, { method: 'PUT', body: JSON.stringify(tender), headers: { 'Content-Type': 'application/json' }, }).then(() => fetchTenders()); } setIsAdding(false); setSelectedTender(null); }; // Fetch updated tenders const fetchTenders = () => { fetch('/api/tenders') .then(response => response.json()) .then(data => setTenders(data)); }; // Handle edit button click const handleEdit = (tender) => { setSelectedTender(tender); setIsAdding(false); }; // Handle delete button click const handleDelete = (id) => { fetch(`/api/tenders/${id}`, { method: 'DELETE' }) .then(() => fetchTenders()); }; // Handle theme toggle const toggleTheme = () => setIsDarkMode(!isDarkMode); return ( <div className={`dashboard ${isDarkMode ? 'dark-mode' : 'light-mode'}`}> <div className="header"> <h1>E-Tenders Dashboard</h1> <button className="theme-toggle-btn" onClick={toggleTheme}> {isDarkMode ? 'Light Mode' : 'Dark Mode'} </button> </div> <div className="hero"> <h2>Key Metrics</h2> <div className="key-metrics"> {/* Display Key Performance Indicators */} <p>New Tenders: 5</p> <p>Accepted Tenders: 15</p> <p>Pending Issues: 2</p> </div> </div> <div className="actions"> <button className="add-tender-btn" onClick={() => setIsAdding(true)}> Add Tender </button> </div> <div className="tender-cards"> {tenders.map(tender => ( <TenderCard key={tender.id} tender={tender} onEdit={handleEdit} onDelete={handleDelete} /> ))} </div> {selectedTender && ( <div className="tender-form"> <h3>{isAdding ? 'Add Tender' : 'Edit Tender'}</h3> <form onSubmit={(e) => {e.preventDefault(); handleAddOrUpdateTender(selectedTender)}}> <input type="text" value={selectedTender.title} onChange={(e) => setSelectedTender({...selectedTender, title: e.target.value})} placeholder="Tender Title" required /> <textarea value={selectedTender.description} onChange={(e) => setSelectedTender({...selectedTender, description: e.target.value})} placeholder="Tender Description" ></textarea> <select value={selectedTender.status} onChange={(e) => setSelectedTender({...selectedTender, status: e.target.value})} > <option value="Pending">Pending</option> <option value="Accepted">Accepted</option> <option value="Rejected">Rejected</option> </select> <button type="submit">{isAdding ? 'Add Tender' : 'Update Tender'}</button> </form> </div> )} </div> ); }; export default Dashboard; Backend (Node.js with Express) javascript Copy code const express = require('express'); const app = express(); const cors = require('cors'); const bodyParser = require('body-parser'); let tenders = [ { id: 1, title: "Tender 1", description: "Description 1", status: "Pending" }, { id: 2, title: "Tender 2", description: "Description 2", status: "Accepted" }, ]; // Middleware app.use(cors()); app.use(bodyParser.json()); // Get all tenders app.get('/api/tenders', (req, res) => { res.json(tenders); }); // Add new tender app.post('/api/tenders', (req, res) => { const newTender = req.body; newTender.id = tenders.length + 1; tenders.push(newTender); res.status(201).json(newTender); }); // Update tender app.put('/api/tenders/:id', (req, res) => { const tenderId = parseInt(req.params.id); const updatedTender = req.body; tenders = tenders.map(tender => tender.id === tenderId ? { ...tender, ...updatedTender } : tender); res.json(updatedTender); }); // Delete tender app.delete('/api/tenders/:id', (req, res) => { const tenderId = parseInt(req.params.id); tenders = tenders.filter(tender => tender.id !== tenderId); res.status(204).send(); }); app.listen(5000, () => { console.log('Server running on port 5000'); }); Explanation Frontend: React is used for building the UI. The dashboard is designed with a minimalist structure and provides a responsive layout, interactivity with hover effects, and dynamic content loading (such as updating tenders). The TenderCard component displays each tender's data, and buttons allow users to edit or delete tenders. Users can toggle between light and dark modes with the toggleTheme button. Forms for adding or editing tenders dynamically update the UI when submitted. Backend: A simple Node.js server with Express handles API requests for tenders: GET /api/tenders retrieves the list of tenders. POST /api/tenders adds a new tender. PUT /api/tenders/:id updates an existing tender. DELETE /api/tenders/:id removes a tender.