krispdev-business 1.0.0

package/Dev-Business/frontend-project/src/components/DailyReport.jsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect } from 'react';
+import api from '../services/api';
+
+function DailyReport() {
+  const [report, setReport] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [loading, setLoading] = useState(false);
+  const [dateRange, setDateRange] = useState({ startDate: '', endDate: '' });
+  const [revenueReport, setRevenueReport] = useState(null);
+
+  useEffect(() => {
+    fetchDailyReport();
+    fetchRevenueReport();
+  }, []);
+
+  const fetchDailyReport = async () => {
+    setLoading(true);
+    try {
+      const response = await api.get(`/reports/daily?date=${selectedDate}`);
+      setReport(response.data.data);
+    } catch (error) {
+      console.error('Error fetching report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchRevenueReport = async () => {
+    try {
+      let url = '/reports/revenue';
+      if (dateRange.startDate && dateRange.endDate) {
+        url += `?startDate=${dateRange.startDate}&endDate=${dateRange.endDate}`;
+      }
+      const response = await api.get(url);
+      setRevenueReport(response.data);
+    } catch (error) {
+      console.error('Error fetching revenue report:', error);
+    }
+  };
+
+  const handleDateChange = (e) => {
+    setSelectedDate(e.target.value);
+  };
+
+  const handleDateRangeChange = (e) => {
+    setDateRange({ ...dateRange, [e.target.name]: e.target.value });
+  };
+
+  const applyDateRange = () => {
+    fetchRevenueReport();
+  };
+
+  const exportToCSV = () => {
+    if (!report?.transactions) return;
+    
+    const headers = ['Plate Number', 'Driver', 'Package', 'Amount Paid', 'Payment Date', 'Service Date'];
+    const csvData = report.transactions.map(t => [
+      t.PlateNumber,
+      t.DriverName,
+      t.PackageName,
+      t.AmountPaid,
+      new Date(t.PaymentDate).toLocaleDateString(),
+      new Date(t.ServiceDate).toLocaleDateString()
+    ]);
+    
+    const csvContent = [headers, ...csvData].map(row => row.join(',')).join('\n');
+    const blob = new Blob([csvContent], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `report_${selectedDate}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto animate-fade-in space-y-6">
+      {/* Daily Report Section */}
+      <div className="glass-card p-8">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0">
+          <div className="flex items-center space-x-3">
+            <div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl flex items-center justify-center">
+              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              </svg>
+            </div>
+            <div>
+              <h2 className="text-2xl font-bold text-white">Daily Report</h2>
+              <p className="text-white/60 text-sm">View daily sales and transactions</p>
+            </div>
+          </div>
+          
+          <div className="flex space-x-3">
+            <input
+              type="date"
+              value={selectedDate}
+              onChange={handleDateChange}
+              className="glass-input"
+            />
+            <button onClick={fetchDailyReport} className="glass-button">
+              View Report
+            </button>
+            <button onClick={exportToCSV} className="glass-button-secondary">
+              Export CSV
+            </button>
+          </div>
+        </div>
+        
+        {loading ? (
+          <div className="text-center py-12">
+            <div className="text-white text-xl animate-pulse">Loading report...</div>
+          </div>
+        ) : report ? (
+          <>
+            {/* Summary Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+              <div className="bg-white/5 rounded-lg p-4">
+                <div className="text-white/60 text-sm">Date</div>
+                <div className="text-2xl font-bold text-white">{new Date(report.date).toLocaleDateString()}</div>
+              </div>
+              <div className="bg-white/5 rounded-lg p-4">
+                <div className="text-white/60 text-sm">Total Services</div>
+                <div className="text-2xl font-bold text-blue-400">{report.totalServices}</div>
+              </div>
+              <div className="bg-white/5 rounded-lg p-4">
+                <div className="text-white/60 text-sm">Total Revenue</div>
+                <div className="text-2xl font-bold text-green-400">{report.totalRevenue.toLocaleString()} RWF</div>
+              </div>
+            </div>
+            
+            {/* Transactions Table */}
+            <div className="overflow-x-auto">
+              <table className="glass-table w-full">
+                <thead>
+                  <tr>
+                    <th>Plate Number</th>
+                    <th>Driver</th>
+                    <th>Package</th>
+                    <th>Amount Paid</th>
+                    <th>Payment Date</th>
+                    <th>Service Date</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {report.transactions.length === 0 ? (
+                    <tr>
+                      <td colSpan="6" className="text-center text-white/40 py-8">
+                        No transactions found for this date
+                      </td>
+                    </tr>
+                  ) : (
+                    report.transactions.map((transaction, index) => (
+                      <tr key={index}>
+                        <td className="font-mono">{transaction.PlateNumber}</td>
+                        <td>{transaction.DriverName}</td>
+                        <td>{transaction.PackageName}</td>
+                        <td className="text-green-400">{transaction.AmountPaid.toLocaleString()} RWF</td>
+                        <td>{new Date(transaction.PaymentDate).toLocaleDateString()}</td>
+                        <td>{new Date(transaction.ServiceDate).toLocaleDateString()}</td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </>
+        ) : (
+          <div className="text-center py-12 text-white/40">
+            No data available
+          </div>
+        )}
+      </div>
+      
+      {/* Revenue Report Section */}
+      <div className="glass-card p-8">
+        <h3 className="text-xl font-bold text-white mb-4">Revenue Analysis</h3>
+        
+        <div className="flex flex-col md:flex-row gap-4 mb-6">
+          <div className="flex-1">
+            <label className="text-white/80 text-sm block mb-2">Start Date</label>
+            <input
+              type="date"
+              name="startDate"
+              value={dateRange.startDate}
+              onChange={handleDateRangeChange}
+              className="glass-input w-full"
+            />
+          </div>
+          <div className="flex-1">
+            <label className="text-white/80 text-sm block mb-2">End Date</label>
+            <input
+              type="date"
+              name="endDate"
+              value={dateRange.endDate}
+              onChange={handleDateRangeChange}
+              className="glass-input w-full"
+            />
+          </div>
+          <div className="flex items-end">
+            <button onClick={applyDateRange} className="glass-button">
+              Apply Filter
+            </button>
+          </div>
+        </div>
+        
+        {revenueReport && (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+              <div className="bg-white/5 rounded-lg p-4">
+                <div className="text-white/60 text-sm">Period Total Revenue</div>
+                <div className="text-2xl font-bold text-green-400">
+                  {revenueReport.summary?.totalRevenue?.toLocaleString() || 0} RWF
+                </div>
+              </div>
+              <div className="bg-white/5 rounded-lg p-4">
+                <div className="text-white/60 text-sm">Total Services</div>
+                <div className="text-2xl font-bold text-blue-400">
+                  {revenueReport.summary?.totalServices || 0}
+                </div>
+              </div>
+              <div className="bg-white/5 rounded-lg p-4">
+                <div className="text-white/60 text-sm">Average Daily Revenue</div>
+                <div className="text-2xl font-bold text-purple-400">
+                  {Math.round(revenueReport.summary?.averageDaily || 0).toLocaleString()} RWF
+                </div>
+              </div>
+            </div>
+            
+            <div className="overflow-x-auto">
+              <table className="glass-table w-full">
+                <thead>
+                  <tr>
+                    <th>Date</th>
+                    <th>Services</th>
+                    <th>Revenue</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {revenueReport.data?.length === 0 ? (
+                    <tr>
+                      <td colSpan="3" className="text-center text-white/40 py-8">
+                        No revenue data for selected period
+                      </td>
+                    </tr>
+                  ) : (
+                    revenueReport.data?.map((item, index) => (
+                      <tr key={index}>
+                        <td>{new Date(item.date).toLocaleDateString()}</td>
+                        <td>{item.totalServices}</td>
+                        <td className="text-green-400">{parseFloat(item.dailyRevenue).toLocaleString()} RWF</td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DailyReport;

package/Dev-Business/frontend-project/src/components/Dashboard.jsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import api from '../services/api';
+
+function Dashboard() {
+  const [stats, setStats] = useState({
+    totalServices: 0,
+    totalRevenue: 0,
+    todayServices: 0,
+    todayRevenue: 0
+  });
+  const [recentServices, setRecentServices] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+  const fetchDashboardData = async () => {
+    try {
+      const [servicesRes, todayReport] = await Promise.all([
+        api.get('/services'),
+        api.get('/reports/daily')
+      ]);
+      
+      const services = servicesRes.data.data || [];
+      const todayData = todayReport.data.data;
+      
+      setStats({
+        totalServices: services.length,
+        totalRevenue: services.reduce((sum, s) => sum + (parseFloat(s.AmountPaid) || 0), 0),
+        todayServices: todayData?.totalServices || 0,
+        todayRevenue: todayData?.totalRevenue || 0
+      });
+      
+      setRecentServices(services.slice(0, 5));
+    } catch (error) {
+      console.error('Error fetching dashboard data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const statCards = [
+    { title: 'Total Services', value: stats.totalServices, icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2', color: 'from-blue-500 to-cyan-500' },
+    { title: 'Total Revenue', value: `${stats.totalRevenue.toLocaleString()} RWF`, icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z', color: 'from-green-500 to-emerald-500' },
+    { title: "Today's Services", value: stats.todayServices, icon: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z', color: 'from-purple-500 to-pink-500' },
+    { title: "Today's Revenue", value: `${stats.todayRevenue.toLocaleString()} RWF`, icon: 'M9 8h6m-5 4h4m-2 4h2M3 12a9 9 0 1018 0 9 9 0 00-18 0z', color: 'from-orange-500 to-red-500' },
+  ];
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <div className="text-white text-xl animate-pulse">Loading dashboard...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* Welcome Section */}
+      <div className="glass-card p-6">
+        <h1 className="text-3xl font-bold text-white mb-2">Welcome Back!</h1>
+        <p className="text-white/60">Here's what's happening with your car wash business today.</p>
+      </div>
+      
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {statCards.map((stat, index) => (
+          <div key={index} className="glass-card p-6 hover:scale-105 transition-transform duration-300">
+            <div className="flex items-center justify-between mb-4">
+              <div className={`w-12 h-12 bg-gradient-to-r ${stat.color} rounded-xl flex items-center justify-center`}>
+                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={stat.icon} />
+                </svg>
+              </div>
+            </div>
+            <h3 className="text-white/60 text-sm mb-1">{stat.title}</h3>
+            <p className="text-white text-2xl font-bold">{stat.value}</p>
+          </div>
+        ))}
+      </div>
+      
+      {/* Recent Services */}
+      <div className="glass-card p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold text-white">Recent Services</h2>
+          <Link to="/services" className="text-blue-300 hover:text-blue-200 text-sm">
+            View All →
+          </Link>
+        </div>
+        
+        {recentServices.length > 0 ? (
+          <div className="overflow-x-auto">
+            <table className="glass-table">
+              <thead>
+                <tr>
+                  <th>Date</th>
+                  <th>Plate Number</th>
+                  <th>Driver</th>
+                  <th>Package</th>
+                  <th>Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                {recentServices.map((service) => (
+                  <tr key={service.RecordNumber}>
+                    <td>{new Date(service.ServiceDate).toLocaleDateString()}</td>
+                    <td className="font-mono">{service.PlateNumber}</td>
+                    <td>{service.DriverName}</td>
+                    <td>{service.PackageName}</td>
+                    <td>{service.AmountPaid?.toLocaleString()} RWF</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="text-white/40 text-center py-8">No services recorded yet</p>
+        )}
+      </div>
+      
+      {/* Quick Actions */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Link to="/services" className="glass-card p-6 hover:bg-white/20 transition-all duration-300 text-center group">
+          <svg className="w-12 h-12 text-white mx-auto mb-3 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+          </svg>
+          <h3 className="text-white font-semibold">New Service</h3>
+          <p className="text-white/40 text-sm mt-1">Record a car wash service</p>
+        </Link>
+        
+        <Link to="/payments" className="glass-card p-6 hover:bg-white/20 transition-all duration-300 text-center group">
+          <svg className="w-12 h-12 text-white mx-auto mb-3 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
+          </svg>
+          <h3 className="text-white font-semibold">Record Payment</h3>
+          <p className="text-white/40 text-sm mt-1">Process customer payment</p>
+        </Link>
+        
+        <Link to="/reports" className="glass-card p-6 hover:bg-white/20 transition-all duration-300 text-center group">
+          <svg className="w-12 h-12 text-white mx-auto mb-3 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+          </svg>
+          <h3 className="text-white font-semibold">View Reports</h3>
+          <p className="text-white/40 text-sm mt-1">See daily analytics</p>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default Dashboard;

package/Dev-Business/frontend-project/src/components/Login.jsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import api from '../services/api';
+
+function Login({ onLogin }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    
+    try {
+      const response = await api.post('/auth/login', { username, password });
+      if (response.data.success && response.data.user) {
+        onLogin(response.data.user);
+      }
+    } catch (err) {
+      setError(err.response?.data?.error || 'Invalid credentials');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ 
+      minHeight: '100vh', 
+      position: 'relative', 
+      overflow: 'hidden',
+      background: 'linear-gradient(135deg, #4c1d95, #1e3a8a, #312e81)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '1.5rem'
+    }}>
+      {/* Animated Background Circles */}
+      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+        <div style={{
+          position: 'absolute',
+          top: '-10%',
+          left: '-10%',
+          width: '400px',
+          height: '400px',
+          background: '#9333ea',
+          borderRadius: '50%',
+          filter: 'blur(80px)',
+          opacity: 0.3,
+          animation: 'float 6s ease-in-out infinite'
+        }}></div>
+        <div style={{
+          position: 'absolute',
+          bottom: '-10%',
+          right: '-10%',
+          width: '400px',
+          height: '400px',
+          background: '#3b82f6',
+          borderRadius: '50%',
+          filter: 'blur(80px)',
+          opacity: 0.3,
+          animation: 'float 6s ease-in-out infinite',
+          animationDelay: '2s'
+        }}></div>
+        <div style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '500px',
+          height: '500px',
+          background: '#ec4899',
+          borderRadius: '50%',
+          filter: 'blur(100px)',
+          opacity: 0.15,
+          animation: 'float 6s ease-in-out infinite',
+          animationDelay: '4s'
+        }}></div>
+      </div>
+      
+      {/* Login Card */}
+      <div className="glass-card" style={{ maxWidth: '500px', width: '100%' }}>
+        <div style={{ textAlign: 'center', marginBottom: '2.5rem' }}>
+          <div style={{
+            width: '112px',
+            height: '112px',
+            margin: '0 auto 1.5rem',
+            background: 'linear-gradient(135deg, #3b82f6, #9333ea)',
+            borderRadius: '1.5rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+          }}>
+            <svg style={{ width: '56px', height: '56px', color: 'white' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+            </svg>
+          </div>
+          <h1 style={{ fontSize: '3rem', fontWeight: 'bold', color: 'white', marginBottom: '0.5rem' }}>SmartPark</h1>
+          <p style={{ fontSize: '1.25rem', color: 'rgba(255,255,255,0.7)' }}>Car Wash Management System</p>
+        </div>
+        
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+          <div>
+            <label style={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', fontWeight: 500, display: 'block', marginBottom: '0.5rem' }}>Username</label>
+            <input
+              type="text"
+              placeholder="Enter your username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="glass-input"
+              required
+              disabled={loading}
+            />
+          </div>
+          
+          <div>
+            <label style={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', fontWeight: 500, display: 'block', marginBottom: '0.5rem' }}>Password</label>
+            <input
+              type="password"
+              placeholder="Enter your password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="glass-input"
+              required
+              disabled={loading}
+            />
+          </div>
+          
+          {error && (
+            <div style={{
+              background: 'rgba(239, 68, 68, 0.3)',
+              backdropFilter: 'blur(8px)',
+              border: '1px solid rgba(239, 68, 68, 0.5)',
+              borderRadius: '0.5rem',
+              padding: '1rem',
+              color: '#fecaca',
+              textAlign: 'center'
+            }}>
+              {error}
+            </div>
+          )}
+          
+          <button
+            type="submit"
+            disabled={loading}
+            className="glass-button"
+            style={{ fontSize: '1.125rem' }}
+          >
+            {loading ? 'Logging in...' : 'Login to Dashboard'}
+          </button>
+        </form>
+        
+        <div style={{ marginTop: '2rem', paddingTop: '1.5rem', borderTop: '1px solid rgba(255,255,255,0.2)', textAlign: 'center' }}>
+          <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: '0.875rem' }}>Demo Credentials</p>
+          <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: '0.875rem', marginTop: '0.25rem', fontFamily: 'monospace' }}>Username: admin | Password: admin123</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

package/Dev-Business/frontend-project/src/components/Navbar.jsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+function Navbar({ user, onLogout }) {
+  const location = useLocation();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  
+  const navItems = [
+    { path: '/', name: 'Dashboard', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
+    { path: '/cars', name: 'Cars', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
+    { path: '/services', name: 'Services', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' },
+    { path: '/payments', name: 'Payments', icon: 'M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z' },
+    { path: '/reports', name: 'Reports', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
+  ];
+  
+  return (
+    <>
+      <nav className="glass-card fixed top-4 left-4 right-4 z-50 px-6 py-3 animate-fade-in">
+        <div className="flex justify-between items-center">
+          <Link to="/" className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
+              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+              </svg>
+            </div>
+            <span className="text-white font-bold text-xl hidden md:block">SmartPark</span>
+          </Link>
+          
+          {/* Desktop Menu */}
+          <div className="hidden md:flex space-x-2">
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`px-4 py-2 rounded-lg transition-all duration-300 flex items-center space-x-2 ${
+                  location.pathname === item.path
+                    ? 'bg-white/20 text-white'
+                    : 'text-white/70 hover:bg-white/10 hover:text-white'
+                }`}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
+                </svg>
+                <span>{item.name}</span>
+              </Link>
+            ))}
+          </div>
+          
+          <div className="flex items-center space-x-3">
+            <div className="hidden md:block text-right">
+              <div className="text-white text-sm font-medium">{user?.username}</div>
+              <div className="text-white/40 text-xs">Administrator</div>
+            </div>
+            <button
+              onClick={onLogout}
+              className="glass-button-secondary text-sm px-4 py-2"
+            >
+              Logout
+            </button>
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="md:hidden text-white p-2"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </nav>
+      
+      {/* Mobile Menu */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-40 pt-20 animate-fade-in md:hidden">
+          <div className="glass-card mx-4 p-4 space-y-2" onClick={() => setIsMobileMenuOpen(false)}>
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-300 ${
+                  location.pathname === item.path
+                    ? 'bg-white/20 text-white'
+                    : 'text-white/70 hover:bg-white/10'
+                }`}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
+                </svg>
+                <span>{item.name}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Navbar;