krispdev-business 1.0.0

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

@@ -0,0 +1,100 @@
+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">
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                onClick={() => setIsMobileMenuOpen(false)}
+                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;

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

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import api from '../services/api';
+
+function PaymentForm() {
+  const [searchParams] = useSearchParams();
+  const [formData, setFormData] = useState({
+    AmountPaid: '',
+    PaymentDate: new Date().toISOString().split('T')[0],
+    RecordNumber: searchParams.get('record') || ''
+  });
+  const [services, setServices] = useState([]);
+  const [selectedService, setSelectedService] = useState(null);
+  const [message, setMessage] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetchUnpaidServices();
+  }, []);
+
+  useEffect(() => {
+    if (formData.RecordNumber) {
+      fetchServiceDetails(formData.RecordNumber);
+    }
+  }, [formData.RecordNumber]);
+
+  const fetchUnpaidServices = async () => {
+    try {
+      const response = await api.get('/services');
+      const allServices = response.data.data || [];
+      const unpaid = allServices.filter(service => !service.AmountPaid);
+      setServices(unpaid);
+    } catch (error) {
+      console.error('Error fetching services:', error);
+    }
+  };
+
+  const fetchServiceDetails = async (recordNumber) => {
+    try {
+      const response = await api.get(`/services/${recordNumber}`);
+      setSelectedService(response.data.data);
+      if (response.data.data.PackagePrice) {
+        setFormData(prev => ({
+          ...prev,
+          AmountPaid: response.data.data.PackagePrice
+        }));
+      }
+    } catch (error) {
+      console.error('Error fetching service details:', error);
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+    
+    try {
+      await api.post('/payments', formData);
+      setMessage({ type: 'success', text: '✅ Payment recorded successfully!' });
+      setFormData({
+        AmountPaid: '',
+        PaymentDate: new Date().toISOString().split('T')[0],
+        RecordNumber: ''
+      });
+      setSelectedService(null);
+      fetchUnpaidServices();
+      setTimeout(() => setMessage(null), 3000);
+    } catch (err) {
+      setMessage({ type: 'error', text: err.response?.data?.error || 'Payment failed' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto animate-fade-in space-y-6">
+      <div className="glass-card p-8">
+        <div className="flex items-center space-x-3 mb-6">
+          <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-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="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>
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-white">Record Payment</h2>
+            <p className="text-white/60 text-sm">Process customer payment for services</p>
+          </div>
+        </div>
+        
+        {message && (
+          <div className={`mb-6 p-4 rounded-lg backdrop-blur-sm ${
+            message.type === 'success' 
+              ? 'bg-green-500/20 border border-green-500/50 text-green-200' 
+              : 'bg-red-500/20 border border-red-500/50 text-red-200'
+          } animate-fade-in`}>
+            {message.text}
+          </div>
+        )}
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="text-white/80 text-sm block mb-2">Select Service *</label>
+              <select
+                name="RecordNumber"
+                value={formData.RecordNumber}
+                onChange={handleChange}
+                className="glass-input w-full"
+                required
+              >
+                <option value="">Select unpaid service</option>
+                {services.map(service => (
+                  <option key={service.RecordNumber} value={service.RecordNumber}>
+                    {service.PlateNumber} - {service.DriverName} - {new Date(service.ServiceDate).toLocaleDateString()}
+                  </option>
+                ))}
+              </select>
+            </div>
+            
+            <div>
+              <label className="text-white/80 text-sm block mb-2">Payment Date *</label>
+              <input
+                type="date"
+                name="PaymentDate"
+                value={formData.PaymentDate}
+                onChange={handleChange}
+                className="glass-input w-full"
+                required
+              />
+            </div>
+            
+            <div>
+              <label className="text-white/80 text-sm block mb-2">Amount Paid (RWF) *</label>
+              <input
+                type="number"
+                name="AmountPaid"
+                value={formData.AmountPaid}
+                onChange={handleChange}
+                placeholder="Enter amount"
+                className="glass-input w-full"
+                required
+                min="0"
+                step="100"
+              />
+            </div>
+          </div>
+          
+          {selectedService && (
+            <div className="bg-white/5 rounded-lg p-4 mt-4">
+              <h4 className="text-white font-semibold mb-2">Service Details</h4>
+              <div className="grid grid-cols-2 gap-2 text-sm">
+                <div className="text-white/60">Package:</div>
+                <div className="text-white">{selectedService.PackageName}</div>
+                <div className="text-white/60">Package Price:</div>
+                <div className="text-white">{selectedService.PackagePrice?.toLocaleString()} RWF</div>
+                <div className="text-white/60">Driver:</div>
+                <div className="text-white">{selectedService.DriverName}</div>
+                <div className="text-white/60">Vehicle:</div>
+                <div className="text-white">{selectedService.PlateNumber}</div>
+              </div>
+              {parseFloat(formData.AmountPaid) < selectedService.PackagePrice && (
+                <div className="mt-3 text-yellow-400 text-sm">
+                  ⚠️ Amount paid is less than package price ({selectedService.PackagePrice.toLocaleString()} RWF)
+                </div>
+              )}
+              {parseFloat(formData.AmountPaid) > selectedService.PackagePrice && (
+                <div className="mt-3 text-green-400 text-sm">
+                  ✓ Change to return: {(formData.AmountPaid - selectedService.PackagePrice).toLocaleString()} RWF
+                </div>
+              )}
+            </div>
+          )}
+          
+          <div className="flex justify-end pt-4">
+            <button
+              type="submit"
+              disabled={loading}
+              className="glass-button disabled:opacity-50"
+            >
+              {loading ? 'Processing...' : 'Record Payment'}
+            </button>
+          </div>
+        </form>
+      </div>
+      
+      {/* Recent Payments Summary */}
+      <div className="glass-card p-8">
+        <h3 className="text-xl font-bold text-white mb-4">Payment Summary</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="bg-white/5 rounded-lg p-4">
+            <div className="text-white/60 text-sm">Unpaid Services</div>
+            <div className="text-2xl font-bold text-yellow-400">{services.length}</div>
+          </div>
+          <div className="bg-white/5 rounded-lg p-4">
+            <div className="text-white/60 text-sm">Total Due Amount</div>
+            <div className="text-2xl font-bold text-white">
+              {services.reduce((sum, s) => sum + (s.PackagePrice || 0), 0).toLocaleString()} RWF
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PaymentForm;