create-jinmankn-app 1.0.11 → 1.0.13

package/templates/index/frontend/src/pages/Register.jsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Link, useNavigate } from 'react-router-dom';
+
+function Register() {
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    try {
+      const response = await axios.post('http://localhost:5006/api/auth/register', {
+        name,
+        email,
+        password,
+      });
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+      setMessage('Account created successfully');
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Registration failed');
+      console.error('Server Error:', err.response?.data || err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 px-4">
+      <div className="w-full max-w-md box p-6">
+        <h1 className="mb-1 text-2xl font-bold text-teal-900">DAB HRMS</h1>
+        <p className="mb-6 text-sm text-gray-600">Create a new account</p>
+
+        {message && <p className="alert-success">{message}</p>}
+        {error && <p className="alert-error">{error}</p>}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="mb-1 block text-sm font-medium">Name</label>
+            <input
+              id="name"
+              type="text"
+              required
+              placeholder="Enter your full name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="input-field"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="email" className="mb-1 block text-sm font-medium">Email</label>
+            <input
+              id="email"
+              type="email"
+              required
+              placeholder="Enter your email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="input-field"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="mb-1 block text-sm font-medium">Password</label>
+            <input
+              id="password"
+              type="password"
+              required
+              minLength={6}
+              placeholder="Create a secure password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="input-field"
+            />
+          </div>
+
+          <button type="submit" disabled={loading} className="btn-primary w-full">
+            {loading ? 'Creating account...' : 'Register'}
+          </button>
+        </form>
+
+        <p className="mt-4 text-center text-sm text-gray-600">
+          Already have an account? <Link to="/login" className="text-blue-600 hover:underline">Sign in</Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Register;
+

package/templates/index/frontend/src/pages/Reports.jsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Reports() {
+  const [report, setReport] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` };
+
+  useEffect(() => {
+    axios
+      .get('http://localhost:5006/api/reports/on-leave-by-department', { headers })
+      .then((res) => setReport(res.data))
+      .catch((err) => setError(err.response?.data?.message || 'Failed to load report'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return <p className="text-gray-600">Loading report...</p>;
+  }
+
+  if (error) {
+    return <p className="alert-error">{error}</p>;
+  }
+
+  return (
+    <div>
+      <h1 className="mb-2 text-2xl font-bold">Employee Status Report</h1>
+      <p className="mb-6 text-sm text-gray-600">
+        Employees currently on leave, organized by department
+      </p>
+
+      <div className="mb-6 box border-l-4 border-teal-700">
+        <p className="text-sm text-gray-600">Total employees on leave</p>
+        <p className="text-3xl font-bold text-teal-900">{report.totalOnLeave}</p>
+      </div>
+
+      {report.departments.length === 0 ? (
+        <div className="box">
+          <p className="text-gray-600">
+            No employees are currently on leave. Set an employee&apos;s status to{' '}
+            <strong>on leave</strong> on the Employees page to include them in this report.
+          </p>
+        </div>
+      ) : (
+        report.departments.map((dept) => (
+          <div key={dept.departmentName} className="mb-6 box">
+            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+              <h2 className="text-lg font-semibold">{dept.departmentName}</h2>
+              <span className="rounded-full bg-teal-100 px-3 py-1 text-sm font-medium text-teal-900">
+                {dept.count} on leave
+              </span>
+            </div>
+
+            <div className="overflow-x-auto">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Email</th>
+                    <th>Telephone</th>
+                    <th>Position</th>
+                    <th>Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {dept.employees.map((emp) => (
+                    <tr key={emp.id}>
+                      <td>{emp.firstName} {emp.lastName}</td>
+                      <td>{emp.email}</td>
+                      <td>{emp.telephone}</td>
+                      <td>{emp.position}</td>
+                      <td>{emp.status}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ))
+      )}
+
+      <div className="box bg-teal-50">
+        <p className="font-semibold text-teal-900">
+          Grand total on leave: {report.totalOnLeave}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Reports;
+

package/templates/index/frontend/vite.config.js

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