create-cedro-app 1.0.2 → 1.0.3

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

@@ -0,0 +1,523 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { toast } from "react-toastify";
+import {
+  Receipt,
+  Trash2,
+  Pencil
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+function Invoices() {
+
+  const token = localStorage.getItem("token");
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      navigate("/");
+    }
+
+  }, [navigate]);
+
+  const [customers, setCustomers] = useState([]);
+
+  const [services, setServices] = useState([]);
+
+  const [invoices, setInvoices] = useState([]);
+
+  const [editId, setEditId] = useState(null);
+
+  const [values, setValues] = useState({
+    TotalCost: "",
+    PaidAmount: "",
+    Balance: "",
+    PaymentMonth: "",
+    CustomerId: "",
+    ServiceCode: ""
+  });
+
+  const fetchCustomers = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/selectcustomers",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setCustomers(res.data || []);
+
+    } catch (error) {
+
+      toast.error("Failed to load customers");
+    }
+  };
+
+  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");
+    }
+  };
+
+  const fetchInvoices = async () => {
+
+    try {
+
+      const res = await axios.get(
+        "http://localhost:3000/selectinvoices",
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      setInvoices(res.data || []);
+
+    } catch (error) {
+
+      toast.error("Failed to load invoices");
+    }
+  };
+
+  useEffect(() => {
+
+    fetchCustomers();
+
+    fetchServices();
+
+    fetchInvoices();
+
+  }, []);
+
+  const handleSubmit = async (e) => {
+
+    e.preventDefault();
+
+    try {
+
+      if (editId) {
+
+        await axios.put(
+          `http://localhost:3000/updateinvoice/${editId}`,
+          values,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          }
+        );
+
+        toast.success("Invoice updated");
+
+        setEditId(null);
+
+      } else {
+
+        await axios.post(
+          "http://localhost:3000/insertinvoice",
+          values,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          }
+        );
+
+        toast.success("Invoice created");
+      }
+
+      setValues({
+        TotalCost: "",
+        PaidAmount: "",
+        Balance: "",
+        PaymentMonth: "",
+        CustomerId: "",
+        ServiceCode: ""
+      });
+
+      fetchInvoices();
+
+    } catch (error) {
+
+      toast.error(
+        error.response?.data?.Error ||
+        "Error saving invoice"
+      );
+    }
+  };
+
+  const deleteInvoice = async (id) => {
+
+    try {
+
+      await axios.delete(
+        `http://localhost:3000/deleteinvoice/${id}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`
+          }
+        }
+      );
+
+      toast.success("Invoice deleted");
+
+      fetchInvoices();
+
+    } catch (error) {
+
+      toast.error("Delete failed");
+    }
+  };
+
+  const editInvoice = (invoice) => {
+
+    setValues({
+      TotalCost: invoice.TotalCost,
+      PaidAmount: invoice.PaidAmount,
+      Balance: invoice.Balance,
+      PaymentMonth: invoice.PaymentMonth,
+      CustomerId: invoice.CustomerId,
+      ServiceCode: invoice.ServiceCode
+    });
+
+    setEditId(invoice.InvoiceId);
+  };
+
+  return (
+
+    <div className="p-6">
+
+      <div className="mb-6">
+
+        <h1 className="text-3xl font-bold text-gray-800">
+          Invoices
+        </h1>
+
+        <p className="text-gray-500 mt-1">
+          Manage customer invoices
+        </p>
+
+      </div>
+
+      <div className="bg-white p-8 rounded-2xl shadow-lg mb-8 border">
+
+        <div className="flex items-center gap-3 mb-6">
+
+          <Receipt
+            className="text-indigo-600"
+            size={30}
+          />
+
+          <h2 className="text-2xl font-bold text-indigo-600">
+
+            {editId
+              ? "Update Invoice"
+              : "Create Invoice"}
+
+          </h2>
+
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="grid grid-cols-1 md:grid-cols-2 gap-5"
+        >
+
+          <input
+            type="text"
+            placeholder="Total Cost"
+            className="border p-3 rounded-xl"
+            value={values.TotalCost}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                TotalCost: e.target.value
+              })
+            }
+            required
+          />
+
+          <input
+            type="text"
+            placeholder="Paid Amount"
+            className="border p-3 rounded-xl"
+            value={values.PaidAmount}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                PaidAmount: e.target.value
+              })
+            }
+            required
+          />
+
+          <input
+            type="text"
+            placeholder="Balance"
+            className="border p-3 rounded-xl"
+            value={values.Balance}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Balance: e.target.value
+              })
+            }
+            required
+          />
+
+          <input
+            type="text"
+            placeholder="Payment Month"
+            className="border p-3 rounded-xl"
+            value={values.PaymentMonth}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                PaymentMonth: e.target.value
+              })
+            }
+            required
+          />
+
+          <select
+            className="border p-3 rounded-xl"
+            value={values.CustomerId}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                CustomerId: e.target.value
+              })
+            }
+            required
+          >
+
+            <option value="">
+              Select Customer
+            </option>
+
+            {customers.map((customer) => (
+
+              <option
+                key={customer.CustomerId}
+                value={customer.CustomerId}
+              >
+
+                {customer.FirstName} {customer.LastName}
+
+              </option>
+
+            ))}
+
+          </select>
+
+          <select
+            className="border p-3 rounded-xl"
+            value={values.ServiceCode}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                ServiceCode: e.target.value
+              })
+            }
+            required
+          >
+
+            <option value="">
+              Select Service
+            </option>
+
+            {services.map((service) => (
+
+              <option
+                key={service.ServiceCode}
+                value={service.ServiceCode}
+              >
+
+                {service.ServiceName}
+
+              </option>
+
+            ))}
+
+          </select>
+
+          <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 Invoice"
+              : "Save Invoice"}
+
+          </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">
+            Invoice List
+          </h2>
+
+        </div>
+
+        <table className="w-full">
+
+          <thead className="bg-gray-100">
+
+            <tr>
+
+              <th className="p-3">
+                Customer
+              </th>
+
+              <th className="p-3">
+                Service
+              </th>
+
+              <th className="p-3">
+                Total Cost
+              </th>
+
+              <th className="p-3">
+                Paid Amount
+              </th>
+
+              <th className="p-3">
+                Balance
+              </th>
+
+              <th className="p-3">
+                Payment Month
+              </th>
+
+              <th className="p-3 text-center">
+                Actions
+              </th>
+
+            </tr>
+
+          </thead>
+
+          <tbody>
+
+            {invoices.length > 0 ? (
+
+              invoices.map((invoice) => (
+
+                <tr
+                  key={invoice.InvoiceId}
+                  className="text-center border-t"
+                >
+
+                  <td className="p-3">
+                    {invoice.FirstName} {invoice.LastName}
+                  </td>
+
+                  <td className="p-3">
+                    {invoice.ServiceName}
+                  </td>
+
+                  <td className="p-3">
+                    {invoice.TotalCost}
+                  </td>
+
+                  <td className="p-3">
+                    {invoice.PaidAmount}
+                  </td>
+
+                  <td className="p-3">
+                    {invoice.Balance}
+                  </td>
+
+                  <td className="p-3">
+                    {invoice.PaymentMonth}
+                  </td>
+
+                  <td className="p-3">
+
+                    <div className="flex justify-center gap-3">
+
+                      <button
+                        onClick={() => editInvoice(invoice)}
+                        className="bg-blue-500 text-white p-2 rounded"
+                      >
+                        <Pencil size={18} />
+                      </button>
+
+                      <button
+                        onClick={() =>
+                          deleteInvoice(invoice.InvoiceId)
+                        }
+                        className="bg-red-500 text-white p-2 rounded"
+                      >
+                        <Trash2 size={18} />
+                      </button>
+
+                    </div>
+
+                  </td>
+
+                </tr>
+
+              ))
+
+            ) : (
+
+              <tr>
+
+                <td
+                  colSpan="7"
+                  className="text-center p-4 text-gray-500"
+                >
+                  No invoices found
+                </td>
+
+              </tr>
+
+            )}
+
+          </tbody>
+
+        </table>
+
+      </div>
+
+    </div>
+  );
+}
+
+export default Invoices;

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

@@ -0,0 +1,170 @@
+import axios from "axios";
+import { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { Wrench, Mail, Lock } from "lucide-react";
+
+function Login() {
+
+  const navigate = useNavigate();
+
+  const [error, setError] = useState("");
+
+  const [values, setValues] = useState({
+    Email: "",
+    Password: ""
+  });
+
+  // =========================
+  // LOGIN HANDLER
+  // =========================
+  const HandleLogin = async (e) => {
+
+    e.preventDefault();
+
+    
+
+       await axios.post(
+        "http://localhost:3000/login",
+        values
+      )
+      .then((res)=>{
+            // SAVE TOKEN
+      localStorage.setItem(
+        "token",
+        res.data.token
+      );
+
+      console.log(res.data);
+
+      toast.success(res.data.Message);
+
+      navigate("/dashboard");
+      })
+
+     
+
+     .catch((error)=>{
+setError(error.response?.data?.Error);
+
+      toast.error(
+        error.response?.data?.Error
+      );
+    })
+
+      
+  }
+  
+
+
+  return (
+
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+
+      <form
+        onSubmit={HandleLogin}
+        className="w-[420px] bg-white rounded-3xl shadow-2xl p-10 border-t-[6px] border-indigo-600"
+      >
+
+        <div className="text-center mb-8">
+
+          <div className="flex justify-center mb-3">
+            <Wrench
+              size={45}
+              className="text-indigo-600"
+            />
+          </div>
+
+          <h2 className="text-3xl font-bold text-gray-800">
+            auto fix Login
+          </h2>
+
+          <p className="text-gray-500 mt-2">
+            login
+          </p>
+
+        </div>
+
+
+        {/* ERROR */}
+        {
+          error &&
+          <p className="text-red-500 mb-4">
+            {error}
+          </p>
+        }
+
+
+        {/* EMAIL */}
+        <div className="mb-4 relative">
+
+          <Mail className="absolute top-3 left-3 text-gray-400" />
+
+          <input
+            type="email"
+            placeholder="Enter Email"
+            className="w-full border pl-10 p-3 rounded-xl"
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Email: e.target.value
+              })
+            }
+            required
+          />
+
+        </div>
+
+
+        {/* PASSWORD */}
+        <div className="mb-6 relative">
+
+          <Lock className="absolute top-3 left-3 text-gray-400" />
+
+          <input
+            type="password"
+            placeholder="Enter Password"
+            className="w-full border pl-10 p-3 rounded-xl"
+            onChange={(e) =>
+              setValues({
+                ...values,
+                Password: e.target.value
+              })
+            }
+            required
+          />
+
+        </div>
+
+
+        {/* BUTTON */}
+        <button
+          type="submit"
+          className="w-full bg-indigo-600 text-white p-3 rounded-xl"
+        >
+          Login to System
+        </button>
+
+
+        {/* REGISTER */}
+        <p className="mt-6 text-center text-gray-600">
+
+          No account?
+
+          <Link
+            to="/register"
+            className="text-indigo-600 font-semibold ml-2"
+          >
+            Register
+          </Link>
+
+        </p>
+
+      </form>
+
+    </div>
+  );
+}
+
+export default Login;

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function PageNotFound() {
+  return (
+    <div className='flex items-center justify-center min-h-screen bg-gray-200'>
+      <h2 className='text-red-700 text-[90px]'>Page Not Found  <span>404</span></h2>
+    </div>
+  )
+}
+
+export default PageNotFound