Dyanu Maharashtra Syllabus Guidelines And MHT-CET

[18/06, 11:19 pm] Mauli Tcs: header.jsx

import React from 'react';

import '../styles/AdminPanel.css';

export default function AdminPanel() {

const recentBookingsData = [

{ id: '#BK-9201', user: 'Rahul Sharma', slot: 'A2', floor: 'Floor 1', price: '$80.00', status: 'Active' },

{ id: '#BK-8841', user: 'Amit Patel', slot: 'C5', floor: 'Floor 3', price: '$60.00', status: 'Active' },

{ id: '#BK-8711', user: 'Priya Singh', slot: 'B3', floor: 'Floor 2', price: '$40.00', status: 'Completed' },

{ id: '#BK-8502', user: 'Sneha Patil', slot: 'D5', floor: 'Floor 4', price: '$120.00', status: 'Completed' }

];

return (

<h2>Admin Management System</h2>

<p>Monitor bookings, adjust parking layouts, and analyze system performance metrics in real-time.</p>

</div>

{/* 4 Analytical Summary Component Cards */}

<div>

<span className="stat-label">Total Revenue</span>

</div>

<div>

<span className="stat-label">Total Bookings</span>

<span className="stat-subtext text-green">▲ 8% this month</span>

</div>

<div>

<span className="stat-label">Occupancy Rate</span>

<span className="stat-subtext text-amber">● Peak hours alert active</span>

</div>

<div>

<span className="stat-label">Total Users</span>

<span className="stat-subtext text-green">▲ 5% new drivers</span>

</div>

{/* Analytics Graphical Visualization Rows */}

<h4 className="chart-card-heading">Revenue Analytics Overlap</h4>

{/* Visualized pure CSS line graph vector layout nodes */}

</div>

</div>

<h4 className="chart-card-heading">Occupancy Breakdown</h4>

<span>Filled</span>

</div>

<div className="d-legend"><span className="dot bg-blue"></span> 28 Available</div>

<div className="d-legend"><span className="dot bg-purple"></span> 4 Out of order</div>

</div>

{/* Comprehensive Recent Activity Log Table */}

<h4 className="table-card-title-heading">Monitor Bookings and System Usage</h4>

<thead>

<tr>

<th>Booking ID</th>

<th>Driver/User</th>

<th>Assigned Slot</th>

<th>Floor</th>

<th>Amount Paid</th>

<th>Status</th>

</tr>

</thead>

<tbody>

{recentBookingsData.map((row) => (

<td>

<div className="driver-avatar-placeholder">{row.user.charAt(0)}</div>

</div>

</td>

<td>{row.floor}</td>

<td><strong className="text-green-bold">{row.price}</strong></td>

<td>

{row.status}

</span>

</td>

</tr>

))}

</tbody>

</table>

</div>

{/* Right Side Sticky Admin Tool Controls Widget */}

<h4 className="control-sidebar-title">Manage Parking Slots</h4>

<p className="control-sidebar-desc">Admin can view all parking slots, add new slots, edit details, or delete configuration blocks instantly.</p>

<button className="btn-admin-action-block bg-blue-action">➕ Add New Parking Slot</button>

<button className="btn-admin-action-block bg-slate-action">✏️ Edit Slot Details Configuration</button>

<button className="btn-admin-action-block bg-red-action">🗑️ Delete Slot From Matrix Repo</button>

</div>

<div>

<strong>System Operational Sync Active</strong>

<p>Information is updated in real-time across client layers without errors.</p>

</div>

);

}

[18/06, 11:19 pm] Mauli Tcs: sidebar.jsx

import React from 'react';

import { useNavigate, useLocation } from 'react-router-dom';

import '../styles/Sidebar.css'

export default function Sidebar({ role, onLogout }) {

const navigate = useNavigate();

const location = useLocation();

const menuItems = role === 'admin'

? [

{ name: 'Dashboard', path: '/dashboard', icon: '📁' },

{ name: 'Slots Management', path: '/slots-manage', icon: '🅿️' },

{ name: 'Bookings', path: '/bookings-manage', icon: '📅' },

{ name: 'Users', path: '/users-list', icon: '👤' },

{ name: 'Payments', path: '/payments-log', icon: '💳' },

{ name: 'Reports', path: '/reports-panel', icon: '📈' },

{ name: 'Analytics', path: '/analytics-panel', icon: '📊' },

{ name: 'Settings', path: '/settings', icon: '⚙️' }

]

: [

{ name: 'Dashboard', path: '/dashboard', icon: '📁' },

{ name: 'Find Slots', path: '/booking-details', icon: '🔍' }, // 🔥 FIX: Change this from /dashboard to /booking-details

{ name: 'My Bookings', path: '/my-bookings', icon: '📅' },

{ name: 'Wallet', path: '/wallet', icon: '💳' },

{ name: 'Settings', path: '/settings', icon: '⚙️' }

];

return (

{/* Sidebar Top Branding Header */}

<div>

<h4 className="brand-txt-main">SMART PARKING</h4>

<span className="brand-txt-sub">{role === 'admin' ? 'Admin Panel' : 'Management System'}</span>

</div>

{/* Sidebar Navigation Items Links List */}

{menuItems.map((item) => {

const isActive = location.pathname === item.path;

return (

<button

key={item.name}

onClick={() => navigate(item.path)}

className={`sidebar-nav-link-item ${isActive ? 'link-state-active' : ''}`}

</button>

);

})}

</div>

{/* Bottom App Promo & Actions Banner wrapper */}

<h5>Smart Parking System</h5>

<p>Manage your parking operations efficiently.</p>

</div>

<span className="sidebar-item-name-text">Logout</span>

</button>

</div>

);

}

[18/06, 11:19 pm] Mauli Tcs: adminPanel.jsx

import React from 'react';

import '../styles/AdminPanel.css';

export default function AdminPanel() {

const recentBookingsData = [

{ id: '#BK-9201', user: 'Rahul Sharma', slot: 'A2', floor: 'Floor 1', price: '$80.00', status: 'Active' },

{ id: '#BK-8841', user: 'Amit Patel', slot: 'C5', floor: 'Floor 3', price: '$60.00', status: 'Active' },

{ id: '#BK-8711', user: 'Priya Singh', slot: 'B3', floor: 'Floor 2', price: '$40.00', status: 'Completed' },

{ id: '#BK-8502', user: 'Sneha Patil', slot: 'D5', floor: 'Floor 4', price: '$120.00', status: 'Completed' }

];

return (

<h2>Admin Management System</h2>

<p>Monitor bookings, adjust parking layouts, and analyze system performance metrics in real-time.</p>

</div>

{/* 4 Analytical Summary Component Cards */}

<div>

<span className="stat-label">Total Revenue</span>

</div>

<div>

<span className="stat-label">Total Bookings</span>

<span className="stat-subtext text-green">▲ 8% this month</span>

</div>

<div>

<span className="stat-label">Occupancy Rate</span>

<span className="stat-subtext text-amber">● Peak hours alert active</span>

</div>

<div>

<span className="stat-label">Total Users</span>

<span className="stat-subtext text-green">▲ 5% new drivers</span>

</div>

{/* Analytics Graphical Visualization Rows */}

<h4 className="chart-card-heading">Revenue Analytics Overlap</h4>

{/* Visualized pure CSS line graph vector layout nodes */}

</div>

</div>

<h4 className="chart-card-heading">Occupancy Breakdown</h4>

<span>Filled</span>

</div>

<div className="d-legend"><span className="dot bg-blue"></span> 28 Available</div>

<div className="d-legend"><span className="dot bg-purple"></span> 4 Out of order</div>

</div>

{/* Comprehensive Recent Activity Log Table */}

<h4 className="table-card-title-heading">Monitor Bookings and System Usage</h4>

<thead>

<tr>

<th>Booking ID</th>

<th>Driver/User</th>

<th>Assigned Slot</th>

<th>Floor</th>

<th>Amount Paid</th>

<th>Status</th>

</tr>

</thead>

<tbody>

{recentBookingsData.map((row) => (

<td>

<div className="driver-avatar-placeholder">{row.user.charAt(0)}</div>

</div>

</td>

<td>{row.floor}</td>

<td><strong className="text-green-bold">{row.price}</strong></td>

<td>

{row.status}

</span>

</td>

</tr>

))}

</tbody>

</table>

</div>

{/* Right Side Sticky Admin Tool Controls Widget */}

<h4 className="control-sidebar-title">Manage Parking Slots</h4>

<p className="control-sidebar-desc">Admin can view all parking slots, add new slots, edit details, or delete configuration blocks instantly.</p>

<button className="btn-admin-action-block bg-blue-action">➕ Add New Parking Slot</button>

<button className="btn-admin-action-block bg-slate-action">✏️ Edit Slot Details Configuration</button>

<button className="btn-admin-action-block bg-red-action">🗑️ Delete Slot From Matrix Repo</button>

</div>

<div>

<strong>System Operational Sync Active</strong>

<p>Information is updated in real-time across client layers without errors.</p>

</div>

);

}

[18/06, 11:20 pm] Mauli Tcs: BookingDetails.jsx

import React, { useState } from 'react';

import { useNavigate, useLocation } from 'react-router-dom';

import '../styles/BookingDetails.css';

export default function BookingDetails() {

const navigate = useNavigate();

const location = useLocation();

// Selected slot fallback parameters to prevent workspace crashes if accessed directly

const slot = location.state?.slot || {

slotNumber: 'A1',

floor: 1,

type: 'SUV, Compact',

pricePerHour: 20.00,

status: 'Available',

description: 'Near elevator lobby'

};

// State handles matching layout selections inside 37a2cf5f-4311-41fc-9ec1-cc681ada9259_2.png

const [selectedDuration, setSelectedDuration] = useState(4); // Default to 4 Hours button active border

const [startDate, setStartDate] = useState('2025-05-18');

const [startTime, setStartTime] = useState('09:00');

const [endDate, setEndDate] = useState('2025-05-18');

const [endTime, setEndTime] = useState('13:00');

const hourlyPrice = slot.pricePerHour || 20.00;

const totalCost = selectedDuration * hourlyPrice;

// Handles quick select clicks to instantly update totals

const handleQuickSelect = (hours) => {

setSelectedDuration(hours);

// Simulates changing end time option fields dynamically based on 9:00 AM start

const calculableEndHour = 9 + hours;

const formattedEndStr = calculableEndHour < 12

? `${calculableEndHour.toString().padStart(2, '0')}:00 AM`

: `${(calculableEndHour === 12 ? 12 : calculableEndHour - 12).toString().padStart(2, '0')}:00 PM`;

if (hours === 4) setEndTime('13:00');

};

return (

{/* Breadcrumb Header Nav Tracker */}

<span>Dashboard</span> <span className="trail-arrow">></span> <span className="trail-current">Booking Details</span>

</div>

{/* Left Interactive Configuration Lane Container */}

<h2 className="wizard-main-heading">Booking Details</h2>

<p className="wizard-main-subheading">Select duration to book your parking slot</p>

{/* Step Progress Tracker

-------+--

Dyanu

MHTCET MOCK TEST 2025

HSC BOARD EXAM 2026

Syllabus Links

Popular Posts