smart001 1.0.0

package/frontend/src/pages/Payroll.jsx

@@ -0,0 +1,113 @@
+import axios from 'axios';
+import { useState } from 'react';
+import Sidebar from '../components/Sidebar';
+
+function Payroll() {
+
+    const [month, setMonth] = useState('');
+    const [data, setData] = useState([]);
+
+    const fetchPayroll = async () => {
+
+        if (!month) return alert("Select month");
+
+        const res = await axios.get(
+            `http://localhost:5000/payroll/${month}`
+        );
+
+        setData(res.data);
+    };
+
+    return (
+        <div className="flex min-h-screen bg-gray-100">
+
+            <Sidebar />
+
+            <div className="flex-1 p-10">
+
+                <h1 className="text-3xl font-bold mb-6">
+                    Monthly Payroll Report
+                </h1>
+
+                {/* FILTER */}
+                <div className="bg-white p-6 rounded-xl shadow-md mb-6">
+
+                    <input
+                        type="month"
+                        value={month}
+                        onChange={(e) => setMonth(e.target.value)}
+                        className="border p-3 rounded mr-4"
+                    />
+
+                    <button
+                        onClick={fetchPayroll}
+                        className="bg-blue-600 text-white px-6 py-3 rounded"
+                    >
+                        Generate Report
+                    </button>
+
+                </div>
+
+                {/* TABLE */}
+                <div className="bg-white p-6 rounded-xl shadow-md">
+
+                    <table className="w-full border">
+
+                        <thead className="bg-gray-200">
+
+                            <tr>
+                                <th className="border p-2">First Name</th>
+                                <th className="border p-2">Last Name</th>
+                                <th className="border p-2">Position</th>
+                                <th className="border p-2">Department</th>
+                                <th className="border p-2">Net Salary</th>
+                                <th className="border p-2">Month</th>
+                            </tr>
+
+                        </thead>
+
+                        <tbody>
+
+                            {data.map((item, index) => (
+                                <tr key={index}>
+
+                                    <td className="border p-2">
+                                        {item.FirstName}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {item.LastName}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {item.PositionName}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {item.DepartmentName}
+                                    </td>
+
+                                    <td className="border p-2 font-bold text-green-600">
+                                        {item.NetSalary}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {item.MonthPaid}
+                                    </td>
+
+                                </tr>
+                            ))}
+
+                        </tbody>
+
+                    </table>
+
+                </div>
+
+            </div>
+
+        </div>
+    );
+}
+
+export default Payroll;

package/frontend/src/pages/Register.jsx

@@ -0,0 +1,108 @@
+import axios from 'axios';
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+
+function Register() {
+
+    const navigate = useNavigate();
+
+    const [form, setForm] = useState({
+        username: '',
+        password: ''
+    });
+
+    const handleChange = (e) => {
+
+        setForm({
+            ...form,
+            [e.target.name]: e.target.value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+
+        e.preventDefault();
+
+        try {
+
+            const res = await axios.post(
+                'http://localhost:5000/register',
+                form
+            );
+
+            alert(res.data.message);
+
+            navigate('/login');
+
+        } catch (error) {
+
+            console.log(error);
+
+            alert(
+                error.response?.data?.message ||
+                'Registration failed'
+            );
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-100">
+
+            <div className="bg-white p-10 rounded-2xl shadow-lg w-full max-w-md">
+
+                <h1 className="text-4xl font-bold text-center mb-8 text-gray-800">
+                    Register
+                </h1>
+
+                <form
+                    onSubmit={handleSubmit}
+                    className="space-y-5"
+                >
+
+                    <input
+                        type="text"
+                        name="username"
+                        placeholder="Username"
+                        value={form.username}
+                        onChange={handleChange}
+                        className="w-full border border-gray-300 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-green-500"
+                    />
+
+                    <input
+                        type="password"
+                        name="password"
+                        placeholder="Password"
+                        value={form.password}
+                        onChange={handleChange}
+                        className="w-full border border-gray-300 rounded-lg px-4 py-3 outline-none focus:ring-2 focus:ring-green-500"
+                    />
+
+                    <button
+                        type="submit"
+                        className="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-semibold duration-300"
+                    >
+                        Register
+                    </button>
+
+                </form>
+
+                <p className="text-center mt-6 text-gray-600">
+
+                    Already have an account?
+
+                    <Link
+                        to="/login"
+                        className="text-green-600 ml-2 hover:underline"
+                    >
+                        Login
+                    </Link>
+
+                </p>
+
+            </div>
+
+        </div>
+    );
+}
+
+export default Register;

package/frontend/src/pages/Salary.jsx

@@ -0,0 +1,166 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import Sidebar from '../components/Sidebar';
+
+function Salary() {
+
+    const [salary, setSalary] = useState([]);
+    const [employees, setEmployees] = useState([]);
+
+    const [form, setForm] = useState({
+        EmployeeNumber: '',
+        MonthPaid: ''
+    });
+
+    // FETCH SALARY
+    const fetchSalary = async () => {
+        const res = await axios.get('http://localhost:5000/salary');
+        setSalary(res.data);
+    };
+
+    // FETCH EMPLOYEES
+    const fetchEmployees = async () => {
+        const res = await axios.get('http://localhost:5000/employees');
+        setEmployees(res.data);
+    };
+
+    useEffect(() => {
+        fetchSalary();
+        fetchEmployees();
+    }, []);
+
+    const handleChange = (e) => {
+        setForm({
+            ...form,
+            [e.target.name]: e.target.value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+
+        e.preventDefault();
+
+        await axios.post('http://localhost:5000/salary', form);
+
+        alert('Salary Generated');
+
+        setForm({
+            EmployeeNumber: '',
+            MonthPaid: ''
+        });
+
+        fetchSalary();
+    };
+
+    return (
+        <div className="flex min-h-screen bg-gray-100">
+
+            <Sidebar />
+
+            <div className="flex-1 p-10">
+
+                <h1 className="text-3xl font-bold mb-6">
+                    Salary Management
+                </h1>
+
+                {/* FORM */}
+                <form
+                    onSubmit={handleSubmit}
+                    className="bg-white p-6 rounded-xl shadow-md mb-10"
+                >
+
+                    <select
+                        name="EmployeeNumber"
+                        value={form.EmployeeNumber}
+                        onChange={handleChange}
+                        className="border p-3 rounded w-full mb-4"
+                    >
+                        <option value="">Select Employee</option>
+
+                        {employees.map(emp => (
+                            <option
+                                key={emp.EmployeeNumber}
+                                value={emp.EmployeeNumber}
+                            >
+                                {emp.FirstName} {emp.LastName}
+                            </option>
+                        ))}
+                    </select>
+
+                    <input
+                        type="month"
+                        name="MonthPaid"
+                        value={form.MonthPaid}
+                        onChange={handleChange}
+                        className="border p-3 rounded w-full mb-4"
+                    />
+
+                    <button
+                        className="bg-purple-600 text-white px-6 py-3 rounded-lg"
+                    >
+                        Generate Salary
+                    </button>
+
+                </form>
+
+                {/* TABLE */}
+                <div className="bg-white p-6 rounded-xl shadow-md">
+
+                    <table className="w-full border">
+
+                        <thead className="bg-gray-200">
+                            <tr>
+                                <th className="border p-2">Employee</th>
+                                <th className="border p-2">Department</th>
+                                <th className="border p-2">Gross</th>
+                                <th className="border p-2">Deduction</th>
+                                <th className="border p-2">Net Salary</th>
+                                <th className="border p-2">Month</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+
+                            {salary.map(s => (
+                                <tr key={s.SalaryID}>
+
+                                    <td className="border p-2">
+                                        {s.FirstName} {s.LastName}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {s.DepartmentName}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {s.GrossSalary}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {s.TotalDeduction}
+                                    </td>
+
+                                    <td className="border p-2 font-bold text-green-600">
+                                        {s.NetSalary}
+                                    </td>
+
+                                    <td className="border p-2">
+                                        {s.MonthPaid}
+                                    </td>
+
+                                </tr>
+                            ))}
+
+                        </tbody>
+
+                    </table>
+
+                </div>
+
+            </div>
+
+        </div>
+    );
+}
+
+export default Salary;

package/frontend/vite.config.js

@@ -0,0 +1,8 @@
+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/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "smart001",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}