krispdev-business 1.0.0

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

@@ -0,0 +1,384 @@
+import React, { useState, useEffect } from 'react';
+import api from '../services/api';
+
+function ServiceRecord() {
+  const [services, setServices] = useState([]);
+  const [packages, setPackages] = useState([]);
+  const [cars, setCars] = useState([]);
+  const [formData, setFormData] = useState({
+    ServiceDate: new Date().toISOString().split('T')[0],
+    PlateNumber: '',
+    PackageNumber: ''
+  });
+  const [editingId, setEditingId] = useState(null);
+  const [message, setMessage] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [showBill, setShowBill] = useState(null);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const [servicesRes, packagesRes, carsRes] = await Promise.all([
+        api.get('/services'),
+        api.get('/packages'),
+        api.get('/cars')
+      ]);
+      
+      setServices(servicesRes.data.data || []);
+      setPackages(packagesRes.data.data || []);
+      setCars(carsRes.data.data || []);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+    
+    try {
+      if (editingId) {
+        await api.put(`/services/${editingId}`, formData);
+        setMessage({ type: 'success', text: '✅ Service record updated successfully!' });
+        setEditingId(null);
+      } else {
+        const response = await api.post('/services', formData);
+        setMessage({ type: 'success', text: '✅ Service record created successfully!' });
+        
+        // Auto-redirect to payment if needed
+        if (response.data.RecordNumber) {
+          setTimeout(() => {
+            if (window.confirm('Would you like to record payment for this service?')) {
+              window.location.href = `/payments?record=${response.data.RecordNumber}`;
+            }
+          }, 500);
+        }
+      }
+      
+      setFormData({
+        ServiceDate: new Date().toISOString().split('T')[0],
+        PlateNumber: '',
+        PackageNumber: ''
+      });
+      fetchData();
+      setTimeout(() => setMessage(null), 3000);
+    } catch (err) {
+      setMessage({ type: 'error', text: err.response?.data?.error || 'Operation failed' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEdit = (service) => {
+    setEditingId(service.RecordNumber);
+    setFormData({
+      ServiceDate: service.ServiceDate.split('T')[0],
+      PlateNumber: service.PlateNumber,
+      PackageNumber: service.PackageNumber
+    });
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleDelete = async (id) => {
+    if (window.confirm('⚠️ Delete this service record? This will also delete associated payment.')) {
+      setLoading(true);
+      try {
+        await api.delete(`/services/${id}`);
+        setMessage({ type: 'success', text: '🗑️ Service record deleted successfully!' });
+        fetchData();
+        setTimeout(() => setMessage(null), 3000);
+      } catch (err) {
+        setMessage({ type: 'error', text: err.response?.data?.error || 'Delete failed' });
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleViewBill = async (recordNumber) => {
+    try {
+      const response = await api.get(`/reports/bill/${recordNumber}`);
+      setShowBill(response.data.data);
+    } catch (err) {
+      setMessage({ type: 'error', text: 'Bill not found. Please record payment first.' });
+      setTimeout(() => setMessage(null), 3000);
+    }
+  };
+
+  const closeBill = () => {
+    setShowBill(null);
+  };
+
+  const printBill = () => {
+    window.print();
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto animate-fade-in space-y-6">
+      {/* Bill Modal */}
+      {showBill && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in" onClick={closeBill}>
+          <div className="glass-card max-w-2xl w-full p-8 animate-slide-up" onClick={(e) => e.stopPropagation()}>
+            <div className="text-center mb-6" id="bill-content">
+              <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
+                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+              <h2 className="text-2xl font-bold text-white mb-2">SmartPark Car Wash</h2>
+              <p className="text-white/60 text-sm">{showBill.companyAddress}</p>
+              <p className="text-white/40 text-xs mt-2">Receipt: {showBill.receiptNumber}</p>
+            </div>
+            
+            <div className="space-y-3 text-white border-t border-b border-white/20 py-4 my-4">
+              <div className="flex justify-between">
+                <span className="text-white/60">Plate Number:</span>
+                <span className="font-mono font-bold">{showBill.PlateNumber}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-white/60">Driver:</span>
+                <span>{showBill.DriverName}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-white/60">Phone:</span>
+                <span>{showBill.PhoneNumber}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-white/60">Service Date:</span>
+                <span>{new Date(showBill.ServiceDate).toLocaleDateString()}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-white/60">Package:</span>
+                <span className="font-semibold">{showBill.PackageName}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-white/60">Package Price:</span>
+                <span>{showBill.PackagePrice.toLocaleString()} RWF</span>
+              </div>
+              <div className="flex justify-between pt-2 border-t border-white/20">
+                <span className="text-white/60">Amount Paid:</span>
+                <span className="text-green-400 font-bold">{showBill.AmountPaid.toLocaleString()} RWF</span>
+              </div>
+              {showBill.ChangeAmount > 0 && (
+                <div className="flex justify-between">
+                  <span className="text-white/60">Change:</span>
+                  <span className="text-yellow-400">{showBill.ChangeAmount.toLocaleString()} RWF</span>
+                </div>
+              )}
+              <div className="flex justify-between">
+                <span className="text-white/60">Payment Date:</span>
+                <span>{new Date(showBill.PaymentDate).toLocaleDateString()}</span>
+              </div>
+            </div>
+            
+            <div className="text-center text-white/40 text-sm mt-4">
+              Thank you for choosing SmartPark!
+            </div>
+            
+            <div className="flex space-x-3 mt-6">
+              <button onClick={printBill} className="glass-button flex-1">
+                🖨️ Print
+              </button>
+              <button onClick={closeBill} className="glass-button-secondary flex-1">
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Form Section */}
+      <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-purple-500 to-pink-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 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" />
+            </svg>
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-white">
+              {editingId ? 'Edit Service Record' : 'New Service Record'}
+            </h2>
+            <p className="text-white/60 text-sm">
+              {editingId ? 'Update service information' : 'Record a car wash service'}
+            </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-3 gap-4">
+            <div>
+              <label className="text-white/80 text-sm block mb-2">Service Date *</label>
+              <input
+                type="date"
+                name="ServiceDate"
+                value={formData.ServiceDate}
+                onChange={handleChange}
+                className="glass-input w-full"
+                required
+              />
+            </div>
+            
+            <div>
+              <label className="text-white/80 text-sm block mb-2">Plate Number *</label>
+              <select
+                name="PlateNumber"
+                value={formData.PlateNumber}
+                onChange={handleChange}
+                className="glass-input w-full"
+                required
+              >
+                <option value="">Select car</option>
+                {cars.map(car => (
+                  <option key={car.PlateNumber} value={car.PlateNumber}>
+                    {car.PlateNumber} - {car.DriverName}
+                  </option>
+                ))}
+              </select>
+            </div>
+            
+            <div>
+              <label className="text-white/80 text-sm block mb-2">Service Package *</label>
+              <select
+                name="PackageNumber"
+                value={formData.PackageNumber}
+                onChange={handleChange}
+                className="glass-input w-full"
+                required
+              >
+                <option value="">Select package</option>
+                {packages.map(pkg => (
+                  <option key={pkg.PackageNumber} value={pkg.PackageNumber}>
+                    {pkg.PackageName} - {pkg.PackagePrice.toLocaleString()} RWF
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          
+          <div className="flex justify-end space-x-3 pt-4">
+            {editingId && (
+              <button
+                type="button"
+                onClick={() => {
+                  setEditingId(null);
+                  setFormData({
+                    ServiceDate: new Date().toISOString().split('T')[0],
+                    PlateNumber: '',
+                    PackageNumber: ''
+                  });
+                }}
+                className="glass-button-secondary"
+              >
+                Cancel
+              </button>
+            )}
+            <button
+              type="submit"
+              disabled={loading}
+              className="glass-button disabled:opacity-50"
+            >
+              {loading ? 'Processing...' : (editingId ? 'Update Record' : 'Create Record')}
+            </button>
+          </div>
+        </form>
+      </div>
+      
+      {/* Services List */}
+      <div className="glass-card p-8">
+        <div className="flex justify-between items-center mb-6">
+          <h3 className="text-xl font-bold text-white">Service Records</h3>
+          <div className="text-white/60 text-sm">
+            Total: {services.length} records
+          </div>
+        </div>
+        
+        <div className="overflow-x-auto">
+          <table className="glass-table w-full">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Plate</th>
+                <th>Driver</th>
+                <th>Package</th>
+                <th>Price</th>
+                <th>Payment</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {services.length === 0 ? (
+                <tr>
+                  <td colSpan="7" className="text-center text-white/40 py-8">
+                    No service records found
+                  </td>
+                </tr>
+              ) : (
+                services.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.PackagePrice?.toLocaleString()} RWF</td>
+                    <td>
+                      {service.AmountPaid ? (
+                        <span className="text-green-400">✓ {service.AmountPaid.toLocaleString()} RWF</span>
+                      ) : (
+                        <span className="text-yellow-400">Pending</span>
+                      )}
+                    </td>
+                    <td>
+                      <div className="flex space-x-2">
+                        <button
+                          onClick={() => handleEdit(service)}
+                          className="text-blue-300 hover:text-blue-200 text-sm"
+                        >
+                          Edit
+                        </button>
+                        <button
+                          onClick={() => handleDelete(service.RecordNumber)}
+                          className="text-red-300 hover:text-red-200 text-sm"
+                        >
+                          Delete
+                        </button>
+                        {service.AmountPaid && (
+                          <button
+                            onClick={() => handleViewBill(service.RecordNumber)}
+                            className="text-green-300 hover:text-green-200 text-sm"
+                          >
+                            Bill
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ServiceRecord;

package/Dev-Business/frontend-project/src/index.css

@@ -0,0 +1,155 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    background: linear-gradient(135deg, #4c1d95, #1e3a8a, #312e81);
+    min-height: 100vh;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+}
+
+@layer components {
+  .glass-card {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    border-radius: 1rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 2rem;
+  }
+  
+  .glass-input {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: white;
+    width: 100%;
+    transition: all 0.3s ease;
+  }
+  
+  .glass-input:focus {
+    outline: none;
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
+  }
+  
+  .glass-input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+  }
+  
+  .glass-button {
+    background: linear-gradient(135deg, #3b82f6, #9333ea);
+    color: white;
+    font-weight: 600;
+    padding: 0.75rem 2rem;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .glass-button:hover {
+    transform: scale(1.05);
+    background: linear-gradient(135deg, #2563eb, #7e22ce);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  }
+  
+  .glass-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .glass-button-secondary {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    font-weight: 600;
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
+    cursor: pointer;
+  }
+  
+  .glass-button-secondary:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.05);
+  }
+  
+  .glass-table {
+    width: 100%;
+    color: white;
+    border-collapse: collapse;
+  }
+  
+  .glass-table th {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(12px);
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  
+  .glass-table td {
+    padding: 0.75rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .glass-table tr:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+/* Custom animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}

package/Dev-Business/frontend-project/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/Dev-Business/frontend-project/src/services/api.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'http://localhost:5000/api',
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Add response interceptor for error handling
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      // Redirect to login if unauthorized
+      window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;

package/Dev-Business/frontend-project/tailwind.config.js

@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'float': 'float 6s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0', transform: 'translateY(-20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-20px)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/Dev-Business/frontend-project/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      }
+    }
+  }
+})

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "krispdev-business",
+  "version": "1.0.0",
+  "private": false,
+  "description": "A full-stack business management application with Express backend and React frontend",
+  "main": "Dev-Business/backend-project/server.js",
+  "scripts": {
+    "start": "node Dev-Business/backend-project/server.js",
+    "dev": "nodemon Dev-Business/backend-project/server.js",
+    "install:all": "cd Dev-Business/backend-project && npm install && cd ../frontend-project && npm install",
+    "build:frontend": "cd Dev-Business/frontend-project && npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["business-management", "express", "react", "full-stack", "mysql"],
+  "author": "isezeranochrispin",
+  "license": "ISC"
+}