create-cedro-app 1.0.2 → 1.0.3

package/templates/invoice-service-management-system/client/src/components/Service.jsx

@@ -0,0 +1,390 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import {
+  Trash2,
+  Pencil,
+  Wrench
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+function Services() {
+
+  const token = localStorage.getItem("token");
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      navigate("/");
+    }
+
+  }, [navigate]);
+
+  const [services, setServices] = useState([]);
+
+  const [editId, setEditId] = useState(null);
+
+  const [values, setValues] = useState({
+    ServiceCode: "",
+    ServiceName: "",
+    ServiceCost: "",
+    TotalDeduction: ""
+  });
+
+  const fetchServices = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/selectservices",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setServices(res.data || []);
+
+    } catch (error) {
+
+      toast.error("Failed to load services");
+    }
+  };
+
+  useEffect(() => {
+
+    fetchServices();
+
+  }, []);
+
+  const handleSubmit = async (e) => {
+
+    e.preventDefault();
+
+    try {
+
+      if (editId) {
+
+        await axios.put(
+          `http://localhost:3000/updateservice/${editId}`,
+          values,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          }
+        );
+
+        toast.success("Service updated");
+
+        setEditId(null);
+
+      } else {
+
+        await axios.post(
+          "http://localhost:3000/insertservice",
+          values,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          }
+        );
+
+        toast.success("Service created");
+      }
+
+      setValues({
+        ServiceCode: "",
+        ServiceName: "",
+        ServiceCost: "",
+        TotalDeduction: ""
+      });
+
+      fetchServices();
+
+    } catch (error) {
+
+      toast.error(
+        error.response?.data?.Error ||
+        "Error saving service"
+      );
+    }
+  };
+
+  const deleteService = async (code) => {
+
+    try {
+
+      await axios.delete(
+        `http://localhost:3000/deleteservice/${code}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      toast.success("Service deleted");
+
+      fetchServices();
+
+    } catch (error) {
+
+      toast.error("Delete failed");
+    }
+  };
+
+  const editService = (service) => {
+
+    setValues({
+      ServiceCode: service.ServiceCode,
+      ServiceName: service.ServiceName,
+      ServiceCost: service.ServiceCost,
+      TotalDeduction: service.TotalDeduction
+    });
+
+    setEditId(service.ServiceCode);
+  };
+
+  return (
+
+    <div className="p-6">
+
+      <div className="mb-6">
+
+        <h1 className="text-3xl font-bold text-gray-800">
+          Services
+        </h1>
+
+        <p className="text-gray-500 mt-1">
+          Manage vehicle services
+        </p>
+
+      </div>
+
+      <div className="bg-white p-8 rounded-2xl shadow-lg mb-8 border">
+
+        <div className="flex items-center gap-3 mb-6">
+
+          <Wrench
+            className="text-indigo-600"
+            size={30}
+          />
+
+          <h2 className="text-2xl font-bold text-indigo-600">
+
+            {editId
+              ? "Update Service"
+              : "Add Service"}
+
+          </h2>
+
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="grid grid-cols-1 md:grid-cols-2 gap-5"
+        >
+
+          <input
+            type="text"
+            placeholder="Service Code"
+            className="border p-3 rounded-xl"
+            value={values.ServiceCode}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                ServiceCode: e.target.value
+              })
+            }
+            required
+            disabled={editId}
+          />
+
+          <input
+            type="text"
+            placeholder="Service Name"
+            className="border p-3 rounded-xl"
+            value={values.ServiceName}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                ServiceName: e.target.value
+              })
+            }
+            required
+          />
+
+          <input
+            type="text"
+            placeholder="Service Cost"
+            className="border p-3 rounded-xl"
+            value={values.ServiceCost}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                ServiceCost: e.target.value
+              })
+            }
+            required
+          />
+
+          <input
+            type="text"
+            placeholder="Total Deduction"
+            className="border p-3 rounded-xl"
+            value={values.TotalDeduction}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                TotalDeduction: e.target.value
+              })
+            }
+            required
+          />
+
+          <button
+            className={`text-white p-3 rounded-xl font-semibold ${
+              editId
+                ? "bg-green-600 hover:bg-green-700"
+                : "bg-indigo-600 hover:bg-indigo-700"
+            }`}
+          >
+
+            {editId
+              ? "Update Service"
+              : "Save Service"}
+
+          </button>
+
+        </form>
+
+      </div>
+
+      <div className="bg-white rounded-2xl shadow-lg overflow-hidden border">
+
+        <div className="p-6 border-b">
+
+          <h2 className="text-2xl font-bold">
+            Services List
+          </h2>
+
+        </div>
+
+        <table className="w-full">
+
+          <thead className="bg-gray-100">
+
+            <tr>
+
+              <th className="p-3">
+                Service Code
+              </th>
+
+              <th className="p-3">
+                Service Name
+              </th>
+
+              <th className="p-3">
+                Service Cost
+              </th>
+
+              <th className="p-3">
+                Total Deduction
+              </th>
+
+              <th className="p-3 text-center">
+                Actions
+              </th>
+
+            </tr>
+
+          </thead>
+
+          <tbody>
+
+            {services.length > 0 ? (
+
+              services.map((service) => (
+
+                <tr
+                  key={service.ServiceCode}
+                  className="text-center border-t"
+                >
+
+                  <td className="p-3">
+                    {service.ServiceCode}
+                  </td>
+
+                  <td className="p-3">
+                    {service.ServiceName}
+                  </td>
+
+                  <td className="p-3">
+                    {service.ServiceCost}
+                  </td>
+
+                  <td className="p-3">
+                    {service.TotalDeduction}
+                  </td>
+
+                  <td className="p-3">
+
+                    <div className="flex justify-center gap-3">
+
+                      <button
+                        onClick={() => editService(service)}
+                        className="bg-blue-500 text-white p-2 rounded"
+                      >
+                        <Pencil size={18} />
+                      </button>
+
+                      <button
+                        onClick={() =>
+                          deleteService(service.ServiceCode)
+                        }
+                        className="bg-red-500 text-white p-2 rounded"
+                      >
+                        <Trash2 size={18} />
+                      </button>
+
+                    </div>
+
+                  </td>
+
+                </tr>
+
+              ))
+
+            ) : (
+
+              <tr>
+
+                <td
+                  colSpan="5"
+                  className="text-center p-4 text-gray-500"
+                >
+                  No services found
+                </td>
+
+              </tr>
+
+            )}
+
+          </tbody>
+
+        </table>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Services;

package/templates/invoice-service-management-system/client/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/invoice-service-management-system/client/src/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import {BrowserRouter as Router} from 'react-router-dom'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+ <Router>
+     <App />
+ </Router>
+  </StrictMode>,
+)

package/templates/invoice-service-management-system/client/vite.config.js

@@ -0,0 +1,9 @@
+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()
+  ],
+})

package/templates/invoice-service-management-system/server/.env

@@ -0,0 +1,8 @@
+PORT=3000
+
+HOST=localhost
+USER=root
+PASSWORD=
+DATABASE=vsbms
+
+JWT_SECRET=cedrick125412@

package/templates/invoice-service-management-system/server/Functions/Customer.js

@@ -0,0 +1,79 @@
+import db from "../db.js";
+
+
+
+
+
+export const InsertCustomer = (req, res) => {
+
+    const { FirstName,LastName,Address,Telephone,VehiclePlateNumber,VehicleType,ServiceDate}= req.body;
+
+
+    // VALIDATION
+    if (
+      !FirstName || !LastName || !Address || !Telephone || !VehiclePlateNumber || !VehicleType || !ServiceDate
+    ) {
+        return res.status(400).json({
+            Error: "All fields are required"
+        });
+    }
+
+
+    const sql = `
+        INSERT INTO Customer
+        (
+           FirstName,LastName,Address,Telephone,VehiclePlateNumber,VehicleType,ServiceDate
+        )
+        VALUES (?, ?,?,?,?,?,?)
+    `;
+
+
+    db.query(
+        sql,
+        [
+           FirstName,LastName,Address,Telephone,VehiclePlateNumber,VehicleType,ServiceDate
+        ],
+        (err, result) => {
+
+            if (err) {
+
+                return res.status(500).json({
+                    Error: `Failed to insert car: ${err.message}`
+                });
+            }
+
+            return res.status(201).json({
+                Message: "Customer inserted successfully"
+            });
+        }
+    );
+};
+
+
+
+
+
+
+
+export const SelectCustomers = (req, res) => {
+
+    const sql = `
+        SELECT * FROM Customer
+        ORDER BY CustomerId DESC
+    `;
+
+
+    db.query(sql, (err, result) => {
+
+        if (err) {
+
+            console.log(err);
+
+            return res.status(500).json({
+                Error: "Failed to fetch cars"
+            });
+        }
+
+        return res.status(200).json(result);
+    });
+};

package/templates/invoice-service-management-system/server/Functions/Invoice.js

@@ -0,0 +1,192 @@
+import db from "../db.js";
+
+
+export const createInvoice = (req, res) => {
+
+  const {
+    TotalCost,
+    PaidAmount,
+    Balance,
+    PaymentMonth,
+    CustomerId,
+    ServiceCode
+  } = req.body;
+
+
+  if (
+    !TotalCost ||
+    !PaidAmount ||
+    !Balance ||
+    !PaymentMonth ||
+    !CustomerId ||
+    !ServiceCode
+  ) {
+    return res.status(400).json({
+      Error: "All fields are required"
+    });
+  }
+
+  const sql = `
+    INSERT INTO invoice
+    (
+      TotalCost,
+      PaidAmount,
+      Balance,
+      PaymentMonth,
+      CustomerId,
+      ServiceCode
+    )
+    VALUES (?, ?, ?, ?, ?, ?)
+  `;
+
+  db.query(
+    sql,
+    [
+      TotalCost,
+      PaidAmount,
+      Balance,
+      PaymentMonth,
+      CustomerId,
+      ServiceCode
+    ],
+    (err, result) => {
+
+      if (err) {
+
+        console.log(err);
+
+        return res.status(500).json({
+          Error: err.message
+        });
+      }
+
+      return res.status(201).json({
+        message: "Invoice inserted successfully"
+      });
+
+    }
+  );
+};
+
+
+export const getAllInvoices = (req, res) => {
+
+  const sql = `
+    SELECT 
+      invoice.*,
+      customer.FirstName,
+      customer.LastName,
+      service.ServiceName
+    FROM invoice
+    JOIN customer
+    ON invoice.CustomerId = customer.CustomerId
+    JOIN service
+    ON invoice.ServiceCode = service.ServiceCode
+  `;
+
+  db.query(sql, (err, result) => {
+
+    if (err) {
+      return res.status(500).json(err);
+    }
+
+    res.json(result);
+  });
+};
+
+
+export const getSingleInvoice = (req, res) => {
+
+  const id = req.params.id;
+
+  const sql = `
+    SELECT * FROM invoice
+    WHERE InvoiceId = ?
+  `;
+
+  db.query(sql, [id], (err, result) => {
+
+    if (err) {
+      return res.status(500).json(err);
+    }
+
+    res.json(result[0]);
+  });
+};
+
+
+export const updateInvoice = (req, res) => {
+
+  const id = req.params.id;
+
+  const {
+    TotalCost,
+    PaidAmount,
+    Balance,
+    PaymentMonth,
+    CustomerId,
+    ServiceCode
+  } = req.body;
+
+  const sql = `
+    UPDATE invoice
+    SET
+      TotalCost = ?,
+      PaidAmount = ?,
+      Balance = ?,
+      PaymentMonth = ?,
+      CustomerId = ?,
+      ServiceCode = ?
+    WHERE InvoiceId = ?
+  `;
+
+  db.query(
+    sql,
+    [
+      TotalCost,
+      PaidAmount,
+      Balance,
+      PaymentMonth,
+      CustomerId,
+      ServiceCode,
+      id
+    ],
+    (err, result) => {
+
+      if (err) {
+        return res.status(500).json(err);
+      }
+
+      res.json({
+        message: "Invoice updated successfully"
+      });
+    }
+  );
+};
+
+
+export const deleteInvoice = (req, res) => {
+
+  const id = req.params.id;
+
+  const sql = `
+    DELETE FROM invoice
+    WHERE InvoiceId = ?
+  `;
+
+  db.query(sql, [id], (err, result) => {
+
+    if (err) {
+
+      return res.status(500).json({
+        Error: err.message
+      });
+    }
+
+    return res.status(200).json({
+      message: "Invoice deleted successfully"
+    });
+
+  });
+
+};