create-myexam-app 1.0.0

package/projects/parking managementt system/frontend/src/pages/ParkingRecord.jsx

@@ -0,0 +1,168 @@
+import { useState,useEffect } from "react";
+import axios from "axios";
+
+function ParkingRecord(){
+     
+  const [car, setCar] = useState('')
+  const [slot, setSlot] = useState('')
+  const [entryTime, setEntryTime] = useState('')
+  const [exitTime, setExitTime] = useState('')
+  const [duration, setDuration] = useState('')
+  const [record, setRecord] = useState([])
+  const [editId, setEditId] = useState(null)
+
+  const getAllRecords = async () => {
+    try{
+        const res = await axios.get('http://localhost:5000/api/parkingRecords')
+        setRecord(res.data)
+    }catch(error){
+        console.log(error)
+    }
+  }
+useEffect(() => {
+    getAllRecords()
+}, [])
+
+const handleSubmit = async (e) => {
+    e.preventDefault()
+    try{
+        if (editId) {
+        await axios.put(`http://localhost:5000/api/parkingRecords/${editId}`, {
+            car,
+          slot,
+          entryTime,
+          exitTime,
+          duration,
+
+        })
+        alert ('record succussefully updated')
+        setEditId(null)
+    } else {
+        await axios.post('http://localhost:5000/api/parkingRecords', {
+              car,
+          slot,
+          entryTime,
+          exitTime,
+          duration,
+        })
+        alert ('Record added succussfully')
+    }
+    setCar('')
+    setDuration('')
+    setEntryTime('')
+    setExitTime('')
+    setSlot('')
+    getAllRecords()
+    
+}catch(error){
+alert('failed to record')
+}
+
+}
+const handleEdit = (record)  => {
+    setEditId(record._id)
+    setCar(record.car)
+    setSlot(record.slot)
+    setEntryTime(record.entryTime)
+    setDuration(record.duration)
+    setExitTime(record.exitTime)
+}
+const handleDelete = async (id) => {
+    try{
+        await axios.delete(`http://localhost:5000/api/parkingRecords/${id}`)
+        alert('deleted successfully')
+        getAllRecords()
+    }catch(error){
+        alert('failed to delete')
+    }
+}
+return (
+    <div className="bg-amber-50 p-6 min-h-screen">
+<h2 className="text-2xl font-bold text-gray-800 mb-6">ParkingRecord</h2>
+<form onSubmit={handleSubmit} className="bg-white rounded-x1 border border-gray-200 
+p-6 mb-8 flex flex-col gap-4 max-w-md m-7">
+
+    <label className="text-sm font-medium text-gray-600"> Car Id</label>
+    <input type="text" value={car} 
+    onChange={(e) => setCar(e.target.value)} required
+    className="border border-gray-300 rounded-lg px-3 py-2 yext-sm focus:outline-none
+    focus:border-orange-400"
+    />
+ <label className="text-sm font-medium text-gray-500">Slot ID</label>
+        <input
+          type="text"
+          value={slot}
+          onChange={(e) => setSlot(e.target.value)}
+          required
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none
+          focus:border-orange-400 "
+        />
+        <label className="text-sm font-medium text-gray-300">Entry Time</label>
+        <input
+          type="datetime-local"
+          value={entryTime}
+          onChange={(e) => setEntryTime(e.target.value)}
+          required
+          className="border border-gray-500 rounded-lg px-4 py-2 text-sm focus:outline-none
+          focus:border-orange-800"
+        />
+        <label className="text-sm font-medium text-gray-400">Exit Time</label>
+        <input
+          type="datetime-local"
+          value={exitTime}
+          onChange={(e) => setExitTime(e.target.value)}
+          className="border border-gray-500 text-sm rounded-lg px-4 py-2 focus:outline-none
+          focus:border-orange-800"
+        />
+        <label className="text-sm font-medium border-gray-400">Duration (hours)</label>
+        <input
+          type="number"
+          value={duration}
+          onChange={(e) => setDuration(e.target.value)}
+          className="border border-gray-400 rounded-lg text-sm px-4 py-2 
+          focus:outline-none focus:border-orange-800"
+        />
+        <button type="submit" className="bg-orange-300 text-white font-medium 
+        py-2 rounded-lg hover:bg-orange-800 transition-colors"> 
+        {editId? 'update Record': 'Add record'}
+</button>
+</form>
+
+<h3 className="font-medium text-sm text-gray-500 mb-2">Record list</h3>
+<div className="shadow-sm bg-white rounded-xl border border-gray-400 overflow-hidden"> 
+<table className="w-full text-sm">
+    <thead className="bg-gray-400 text-gray-400 text-left">
+        <tr >
+              <th  className="px-4 py-2 font-medium">Car</th>
+            <th  className="px-4 py-2 font-medium">Slot</th>
+            <th  className="px-4 py-2 font-medium">Entry Time</th>
+            <th  className="px-4 py-2 font-medium">Exit Time</th>
+            <th  className="px-4 py-2 font-medium">Duration</th>
+            <th  className="px-4 py-2 font-medium">Actions</th>
+        </tr>
+    </thead>
+    <tbody className="divide-y divide-gray-100">
+        {record.map((record) => (
+            <tr key={record._id} className="hover:bg-gray-50">
+                   <td className="px-4 py-2 text-gray-800">{record.car}</td>
+              <td  className="px-4 py-2 text-gray-800">{record.slot}</td>
+              <td  className="px-4 py-2 text-gray-800">{record.entryTime}</td>
+              <td  className="px-4 py-2 text-gray-800">{record.exitTime}</td>
+              <td  className="px-4 py-2 text-gray-800">{record.duration}</td>
+              <td className="px-4 py-2">
+                <button onClick={() => handleEdit(record)} className="px-3 py-2 bg-orange-400 text-orange-700
+                rounded-lg hover:bg-orange-600 transition-colors"
+                    >Edit</button>
+                <button onClick={() => handleDelete(record._id)} className="px-3 py-2 bg-orange-400 text-orange-500
+                rounded-lg hover:bg-orange-500 transition-colors">Delete</button>
+              </td>
+            </tr>
+        ))}
+    </tbody>
+</table>
+</div>
+    </div>
+)
+}
+
+export default ParkingRecord

package/projects/parking managementt system/frontend/src/pages/ParkingSlot.jsx

@@ -0,0 +1,102 @@
+ import { useState, useEffect } from "react";
+import axios from "axios";
+
+function ParkingSlot() {
+  const [slotNumber, setSlotNumber] = useState('');
+  // Fix 1: Set default to 'available' so it matches the dropdown
+  const [slotStatus, setSlotStatus] = useState('available'); 
+  const [slots, setSlots] = useState([]);
+
+  const getAllSlots = async () => {
+    try {
+      const res = await axios.get('http://localhost:5000/api/parkingSlots');
+      // Fix 2: Better "Shield" logic. Checks for array OR nested array.
+      const data = Array.isArray(res.data) ? res.data : (res.data.slots || []);
+      setSlots(data);
+    } catch (error) {
+      console.log("Fetch error:", error);
+      setSlots([]); 
+    }
+  };
+
+  useEffect(() => {
+    getAllSlots();
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await axios.post('http://localhost:5000/api/parkingSlots', {
+        slotNumber,
+        slotStatus,
+      });
+      alert('Slot added successfully');
+      setSlotNumber('');
+      setSlotStatus('available'); // Reset to default
+      getAllSlots();
+    } catch (error) {
+      alert('Failed to add');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-6">
+      <h2 className="text-2xl font-bold text-gray-600 mb-6">Parking Slot</h2>
+      
+      <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-gray-200 p-6 mb-8 flex flex-col gap-4 max-w-md">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium text-gray-600">Slot Number</label>
+          <input
+            type="text"
+            value={slotNumber}
+            onChange={(e) => setSlotNumber(e.target.value)}
+            className="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-orange-400"
+            required
+          />
+
+          <label className="text-sm font-medium text-gray-600">Slot Status</label>
+          <select
+            value={slotStatus}
+            onChange={(e) => setSlotStatus(e.target.value)}
+            className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-orange-400"
+          >
+            <option value="available">Available</option>
+            <option value="occupied">Occupied</option>
+          </select>
+        </div>
+        <button
+          type="submit"
+          className="bg-orange-500 text-white font-medium py-2 rounded-lg hover:bg-orange-600 transition-colors"
+        >
+          Add Slot
+        </button>
+      </form>
+
+      <h2 className="text-lg font-semibold text-gray-700 mb-3">Slots List</h2>
+      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 text-gray-600 text-left">
+            <tr>
+              <th className="px-4 py-3 font-medium">Slot Number</th>
+              <th className="px-4 py-3 font-medium">Status</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {slots.map((slot) => (
+              <tr key={slot._id} className="hover:bg-gray-50 transition-colors">
+                <td className="px-4 py-3 text-gray-800">{slot.slotNumber}</td>
+                <td className="px-4 py-3">
+                  <span className={`px-2 py-1 rounded-full text-xs ${slot.slotStatus === 'available' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
+                    {slot.slotStatus}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default ParkingSlot;

package/projects/parking managementt system/frontend/src/pages/Payment.jsx

@@ -0,0 +1,101 @@
+import { useState,useEffect } from "react";
+import axios from "axios";
+
+function Payment(){
+    const [record, setRecord] = useState('')
+    const [amountPaid, setAmountPaid] = useState('')
+    const [paymentDate, setPaymentDate] = useState('')
+    const [payments, setPayments] = useState([])
+
+    const getAllPayments = async () => {
+        try{
+            const res = await axios.get('http://localhost:5000/api/payments')
+            setPayments(res.data)
+        }catch(error){
+            console.log('error')
+        }
+    }
+
+    useEffect(() => {
+        getAllPayments()
+    }, [])
+
+    const handleSubmit = async (e) => {
+e.preventDefault()
+try{
+    await axios.post('http://localhost:5000/api/payments', {
+        record,
+        amountPaid,
+        paymentDate,
+    })
+    alert ('Payment added successfully')
+    setRecord('')
+    setPaymentDate('')
+    setAmountPaid('')
+    getAllPayments()
+}catch(error){
+    alert ('failed to add payment')
+}
+    }
+     
+    return(
+        <div className="min-h-screen bg-gray-400">
+            <h2 className="text-2xl font-bold text-gray-800 mb-6"> Paymnet</h2>
+            <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-gray-200 p-6 
+            mb-6 flex flex-col gap-4 max-w-md">
+                <div className="flex flex-col gap-1"> 
+                <label className="text-sm font-medium text-gray-600">Record</label>
+                <input type="text" value={record} 
+                onChange={(e) => setRecord(e.target.value)}
+                required 
+                className="border border-gray-400 rounded-lg px-4 py-2 text-sm focus:outline-none
+                focus:border-orange-500"
+                />
+
+                <label className="text-sm font-medium text-gray-600">Amount paid </label>
+                   <input type="number" value={amountPaid} 
+                onChange={(e) => setAmountPaid(e.target.value)}
+                required 
+                className="border border-gray-400 rounded-lg px-4 py-2 text-sm
+                focus:outline-none focus:border-orange-400"
+                />
+
+                <label className="text-sm font-medium text-gray-600">Payment Date</label>
+              <input type="date" value={paymentDate} 
+                onChange={(e) => setPaymentDate(e.target.value)}
+                className="border border-gray-600 rounded-lg px-4 py-2 text-sm
+                focus:outline-none focus:border-orange-500"
+                 />
+                 </div>
+                 <button type="submit" className="bg-orange-500 text-white font-medium
+                 py-2 rounded-lg hover:bg-orange-400 transition-colors">Add Payment</button>
+            </form>
+            <h2 className="text-lg font-semibold text-gray-700 mb-3">Payment List</h2>
+            <div className=" bg-white rounded-xl border border-gray-400 overflow-hidden"> 
+            <table className="w-full text-sm">
+ <thead className="bg-gray-50 text-gray-400 text-left ">
+    <tr>
+           <th className="px-4 py-3 font-medium">Record</th>
+              <th className="px-4 py-3 font-medium">Amount Paid</th>
+              <th className="px-4 py-3 font-medium">Payment Date</th>
+    </tr>
+ </thead>
+
+
+                <tbody className="divide-y divide-gray-100">
+                    {payments.map((payment) =>(
+                        <tr key={payment._id} className="hover:bg-gray-50">
+                            <td className="px-4 py-2 text-gray-800">{payment.record}</td>
+                            <td className="px-4 py-2 text-gray-800">{payment.amountPaid}</td>
+                            <td className="px-4 py-2 text-gray-800">{payment.paymentDate}</td>
+                        </tr>
+                    ))}
+                   
+                </tbody>
+            </table>
+            </div>
+        </div>
+    )
+}
+
+export default Payment

package/projects/parking managementt system/frontend/src/pages/Register.jsx

@@ -0,0 +1,65 @@
+ import { useState } from 'react'
+ import { useNavigate, Link } from 'react-router-dom'
+ import axios from 'axios'
+ 
+ function Register(){
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [userName, setUserName] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+
+  const handleRegister = async (e) => {
+    e.preventDefault()
+    try{
+      await axios.post('http://localhost:5000/api/users/register',{ 
+        email,
+        userName,
+        password
+    });
+    navigate('/')
+    }catch(error){
+      setError('Registration failled. try again')
+    }
+  }
+return(
+  <div className=' min-h-screen bg-gray-100 p-6 '>
+  
+    <h2 className='text-2xl font-bold text-gray-800 mb-1'>Register</h2>
+    {error && <p>{error}</p>}
+    <form onSubmit={handleRegister}
+    className='bg-white rounded-2xl border border-gray-500 p-6 mb-8 
+    flex flex-col gap-2 w-150 '
+    >
+      <label className='text-sm font-medium text-gray-600'>Email</label>
+      <input type="email" placeholder="enter ur email" onChange={(e) => setEmail(e.target.value)}
+      required
+      className='border border-black rounded-1g px-20 py-1 text-sm
+      focus:outline-none focus:border-orange-400'
+      />
+ <label className='text-sm font-medium text-gray-600'>Name</label>
+      <input type="text" placeholder="enter ur name" onChange={(e) => setUserName(e.target.value)}
+      required
+      className='text-sm border border-black rounded-1g px-20 py-1 
+      focus:outline-none focus:border-orange-400'
+      />
+ <label className='text-sm font-medium text-gray-600'>Password</label>
+      <input type="password" placeholder="enter ur password" onChange={(e) => setPassword(e.target.value)}
+      required
+      className='border border-black rounded-1g px-20 py-1 text-sm
+      focus:outline-none focus:border-orange-400'
+      />
+ 
+      <button type='submit' className='bg-orange-500 text-white font-medium
+      py-2 rounded-1g hover:bg-orange-600 transition-colors'>Register</button>
+
+    </form>
+    <p className='text-gray-5 text-sm mt-4 w-50 '>Arleady have an account? <Link to="/"
+    className='text-orange-500 font-medium hover:underline'
+    >Login</Link>  </p>
+  </div>
+)
+
+ }
+
+ export default Register

package/projects/parking managementt system/frontend/src/pages/Report.jsx

@@ -0,0 +1,98 @@
+import { useState,useEffect } from "react";
+import axios from "axios";
+
+function Report (){
+    const [records, setRecords] = useState([])
+    const [payments, setPayments] = useState([])
+
+    const getAllRecords = async () => {
+        try{
+
+         
+        const res = await axios.get('http://localhost:5000/api/parkingRecords')
+        setRecords(res.data)
+    }catch(error){
+console.log('error')
+    }
+}
+
+const getAllPayments = async () => {
+    try{
+        const res = await axios.get('http://localhost:5000/api/payments')
+        setPayments(res.data)
+    }catch(error){
+        console.log('erro')
+    }
+}
+useEffect(() => {
+    getAllPayments()
+    getAllRecords()
+}, [])
+
+const calculateFee = (duration) => {
+        if (!duration || duration <= 0) return 500
+    return Math.ceil(duration) * 500
+}
+const today = new Date(). toDateString()
+
+const todayPayment = payments.filter((payment) => {
+    return new Date(payment.paymentDate). toDateString() === today
+})
+
+return(
+    <div className="min-h-screen bg-gray-400">
+        <h2 className="text-2xl font-bold  text-gray-800 mb-6">Payment</h2>
+        <h3 className="text-lg  font-semibold text-black-500 mb-3">Bill</h3>
+        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden mb-8"> 
+        <table className="w-full text-sm flex">
+            <thead className="bg-gray-50 text-gray-500 text-left">
+                <tr>
+                      <th className="px-4 py-2">Car</th>
+            <th  className="px-4 py-2">Entry Time</th>
+            <th  className="px-4 py-2">Exit Time</th>
+            <th  className="px-4 py-2">Duration (hrs)</th>
+            <th  className="px-4 py-2">Amount (Rwf)</th>
+                </tr>
+            </thead>
+            <tbody>
+                {records.map((record) => (
+                    <tr key={record._id} className="border-t">
+                        <td className="px-4 py-2">{record.car}</td>
+                        <td  className="px-4 py-2">{record.entryTime}</td>
+                        <td  className="px-4 py-2">{record.exitTime}</td>
+                        <td  className="px-4 py-2">{record.duration}</td>
+                        <td  className="px-4 py-2 text-orange-600 font-semibold" >{calculateFee(record.duration)}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+</div>
+        <h3 className="text-lg font-semibold text-black-100 mb-2">Daily Parking Payment Record</h3>
+        <p className="mb-2 text-gray-700">Date:{today}</p>
+        <div className="bg-white rounded-xl  border border-gray-200 overflow-hidden">
+
+         
+        <table className="w-full text-sm">
+            <thead className="bg-gray-50 text-gray-500 text-left">
+                <tr>
+                    <td className="px-4 py-2">Record ID</td>
+                    <td  className="px-4 py-2">Amount Paid</td>
+                    <td  className="px-4 py-2">Payment Date</td>
+                </tr>
+            </thead>
+            <tbody>
+                {todayPayment.map((payment) => (
+                    <tr key={payment._id} className="border-t">
+                        <td className="px-3 py-2">{payment.record}</td>
+                        <td className="px-3 py-2 text-orange-300 font-semibold">{payment.amountPaid}</td>
+                        <td className="px-3 py-2">{new Date(payment.paymentDate).toLocaleDateString()}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+</div>
+    </div>
+)
+}
+
+export default Report

package/projects/parking managementt system/frontend/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(),
+    tailwindcss(),
+  ],
+})