alpe-temp 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/backend-project/package-lock.json +131 -0
  2. package/backend-project/package.json +3 -1
  3. package/backend-project/src/app.js +33 -55
  4. package/backend-project/src/config/app.config.js +1 -49
  5. package/backend-project/src/config/env.js +2 -10
  6. package/backend-project/src/middleware/auth.middleware.js +3 -26
  7. package/backend-project/src/modules/auth/auth.controller.js +15 -19
  8. package/backend-project/src/modules/auth/auth.routes.js +4 -8
  9. package/backend-project/src/modules/auth/auth.service.js +9 -31
  10. package/backend-project/src/modules/auth/user.model.js +10 -33
  11. package/backend-project/src/modules/department/department.controller.js +0 -4
  12. package/backend-project/src/modules/department/department.model.js +1 -4
  13. package/backend-project/src/modules/department/department.routes.js +0 -1
  14. package/backend-project/src/modules/department/department.service.js +1 -9
  15. package/backend-project/src/modules/employee/employee.controller.js +2 -10
  16. package/backend-project/src/modules/employee/employee.model.js +15 -9
  17. package/backend-project/src/modules/employee/employee.routes.js +4 -6
  18. package/backend-project/src/modules/employee/employee.service.js +20 -5
  19. package/backend-project/src/modules/position/position.controller.js +50 -0
  20. package/backend-project/src/modules/position/position.model.js +8 -0
  21. package/backend-project/src/modules/position/position.routes.js +14 -0
  22. package/backend-project/src/modules/position/position.service.js +21 -0
  23. package/backend-project/src/modules/reports/reports.controller.js +16 -28
  24. package/backend-project/src/modules/reports/reports.routes.js +2 -2
  25. package/backend-project/src/seed.js +69 -15
  26. package/backend-project/src/utils/token.js +1 -27
  27. package/frontend-project/dist/assets/index-BXwcQ8Za.css +1 -0
  28. package/frontend-project/dist/assets/index-Bo0aORq7.js +20 -0
  29. package/frontend-project/dist/index.html +3 -3
  30. package/frontend-project/index.html +1 -1
  31. package/frontend-project/src/Auth/Login.jsx +15 -25
  32. package/frontend-project/src/Auth/Register.jsx +92 -183
  33. package/frontend-project/src/Intro.jsx +4 -9
  34. package/frontend-project/src/LayOut.jsx +10 -23
  35. package/frontend-project/src/api/ApiClient.js +19 -60
  36. package/frontend-project/src/layouts/BottomNav.jsx +22 -105
  37. package/frontend-project/src/layouts/TopNav.jsx +19 -98
  38. package/frontend-project/src/layouts/useShell.js +30 -44
  39. package/frontend-project/src/main.jsx +2 -3
  40. package/frontend-project/src/pages/Department.jsx +21 -58
  41. package/frontend-project/src/pages/Employee.jsx +131 -113
  42. package/frontend-project/src/pages/Home.jsx +36 -36
  43. package/frontend-project/src/pages/Position.jsx +161 -0
  44. package/frontend-project/src/pages/Reports.jsx +81 -68
  45. package/package.json +4 -2
  46. package/server-test-err.txt +0 -0
  47. package/server-test-out.txt +0 -0
  48. package/backend-project/src/modules/_example/example.controller.js +0 -82
  49. package/backend-project/src/modules/_example/example.model.js +0 -47
  50. package/backend-project/src/modules/_example/example.routes.js +0 -43
  51. package/backend-project/src/modules/_example/example.service.js +0 -58
  52. package/backend-project/src/modules/excel/excel.controller.js +0 -61
  53. package/backend-project/src/modules/excel/excel.routes.js +0 -13
  54. package/backend-project/src/modules/excel/excel.service.js +0 -303
  55. package/backend-project/src/modules/salary/salary.controller.js +0 -70
  56. package/backend-project/src/modules/salary/salary.model.js +0 -23
  57. package/backend-project/src/modules/salary/salary.routes.js +0 -16
  58. package/backend-project/src/modules/salary/salary.service.js +0 -44
  59. package/frontend-project/dist/assets/index-B08ICGra.js +0 -20
  60. package/frontend-project/dist/assets/index-D_cqT2Z6.css +0 -1
@@ -4,9 +4,9 @@
4
4
  <meta charset="UTF-8" />
5
5
  <link rel="icon" type="image/svg+xml" href="/logo.png" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Employee Payroll Management System</title>
8
- <script type="module" crossorigin src="/assets/index-B08ICGra.js"></script>
9
- <link rel="stylesheet" crossorigin href="/assets/index-D_cqT2Z6.css">
7
+ <title>HRMS - DAB Enterprise LTD</title>
8
+ <script type="module" crossorigin src="/assets/index-Bo0aORq7.js"></script>
9
+ <link rel="stylesheet" crossorigin href="/assets/index-BXwcQ8Za.css">
10
10
  </head>
11
11
  <body>
12
12
  <div id="root"></div>
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <link rel="icon" type="image/svg+xml" href="/logo.png" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Employee Payroll Management System</title>
7
+ <title>HRMS - DAB Enterprise LTD</title>
8
8
  </head>
9
9
  <body>
10
10
  <div id="root"></div>
@@ -7,7 +7,7 @@ import FormField from '../components/FormField';
7
7
  import { useToast } from '../components/Toast';
8
8
 
9
9
  export default function Login() {
10
- const [email, setEmail] = useState('');
10
+ const [userName, setUserName] = useState('');
11
11
  const [password, setPassword] = useState('');
12
12
  const [showPwd, setShowPwd] = useState(false);
13
13
  const [loading, setLoading] = useState(false);
@@ -15,12 +15,10 @@ export default function Login() {
15
15
  const toast = useToast();
16
16
 
17
17
  const handleLogin = async () => {
18
- if (!email || !password) { toast.error('Please fill in all fields'); return; }
18
+ if (!userName || !password) { toast.error('Please fill in all fields'); return; }
19
19
  setLoading(true);
20
20
  try {
21
- const data = await authApi.login({ email: email.trim(), password });
22
- localStorage.setItem('token', data.data?.accessToken ?? '');
23
- localStorage.setItem('user', JSON.stringify(data.data?.user ?? {}));
21
+ await authApi.login({ userName: userName.trim(), password });
24
22
  toast.success('Login successful');
25
23
  navigate('/dashboard/overview');
26
24
  } catch (err) {
@@ -34,50 +32,42 @@ export default function Login() {
34
32
 
35
33
  return (
36
34
  <div className="min-h-screen flex items-center justify-center p-4">
37
- <div className="w-full max-w-[760px] flex h-[500px] overflow-hidden">
35
+ <div className="w-full max-w-[760px] flex h-[500px] overflow-hidden">
38
36
  <div className="hidden bg-[#008A75] sm:flex flex-col w-5/12 p-10 text-white">
39
37
  <div className="mb-auto">
40
38
  <div className="flex items-center gap-2 mb-1">
41
- <img src="/logo.png" alt="EPMS" className="w-8 h-10" />
42
- <h1 className="text-[22px] font-bold tracking-tight mt-3">EPMS</h1>
39
+ <img src="/logo.png" alt="HRMS" className="w-8 h-10" />
40
+ <h1 className="text-[22px] font-bold tracking-tight mt-3">HRMS</h1>
43
41
  </div>
44
- <p className="text-[10px] text-white/60 font-medium uppercase tracking-widest">Employee Payroll Management System</p>
42
+ <p className="text-[10px] text-white/60 font-medium uppercase tracking-widest">Human Resource Management System</p>
45
43
  </div>
46
44
  <div className="mt-10">
47
- <p className="text-[18px] font-semibold leading-snug">
48
- Welcome back.<br />
49
- <span className="text-white/60">Manage your workforce.</span>
50
- </p>
51
- <p className="text-[12px] text-white/50 mt-3 leading-relaxed">
52
- Sign in to manage employees, departments, and payroll records.
53
- </p>
45
+ <p className="text-[18px] font-semibold leading-snug">Welcome to DAB Enterprise.<br /><span className="text-white/60">Manage your workforce.</span></p>
46
+ <p className="text-[12px] text-white/50 mt-3 leading-relaxed">Sign in to manage employees, departments, positions, and HR reports.</p>
54
47
  </div>
55
48
  <div className="mt-auto pt-10 border-t border-white/20">
56
- <p className="text-[11px] text-white/40" {new Date().getFullYear()} EPMS · All rights reserved</p>
49
+ <p className="text-[11px] text-white/40">&copy; {new Date().getFullYear()} DAB Enterprise LTD</p>
57
50
  </div>
58
51
  </div>
59
52
  <div className="flex-1 bg-white p-8 sm:p-10 flex flex-col justify-center">
60
53
  <div className="mb-6">
61
54
  <h2 className="text-[20px] font-bold text-gray-800">Sign in</h2>
62
- <p className="text-[13px] text-gray-400 mt-1">
63
- Don't have an account?{' '}
64
- <Link to="/register" className="text-[#008A75] font-semibold hover:underline">Create one</Link>
65
- </p>
55
+ <p className="text-[13px] text-gray-400 mt-1">Don't have an account?{' '}<Link to="/register" className="text-[#008A75] font-semibold hover:underline">Create one</Link></p>
66
56
  </div>
67
57
  <div className="space-y-3">
68
- <FormField label="Email address" required>
69
- <FormField.Input type="email" value={email} onChange={(v) => setEmail(v)} placeholder="you@company.com" onKeyDown={handleKey} autoComplete="email" className='rounded-none' />
58
+ <FormField label="Username" required>
59
+ <FormField.Input type="text" value={userName} onChange={(v) => setUserName(v)} placeholder="Enter username" onKeyDown={handleKey} autoComplete="username" />
70
60
  </FormField>
71
61
  <FormField label="Password" required>
72
62
  <div className="relative">
73
- <FormField.Input type={showPwd ? 'text' : 'password'} value={password} onChange={(v) => setPassword(v)} placeholder="Enter password" onKeyDown={handleKey} className='rounded-none' autoComplete="current-password" className="pr-10" />
63
+ <FormField.Input type={showPwd ? 'text' : 'password'} value={password} onChange={(v) => setPassword(v)} placeholder="Enter password" onKeyDown={handleKey} autoComplete="current-password" className="pr-10" />
74
64
  <button type="button" onClick={() => setShowPwd((v) => !v)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
75
65
  {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
76
66
  </button>
77
67
  </div>
78
68
  </FormField>
79
69
  </div>
80
- <Button className="mt-5 rounded-none" fullWidth size="lg" loading={loading} icon={<LogIn className="w-4 h-4" />} onClick={handleLogin}>Sign in</Button>
70
+ <Button className="mt-5" fullWidth size="lg" loading={loading} icon={<LogIn className="w-4 h-4" />} onClick={handleLogin}>Sign in</Button>
81
71
  </div>
82
72
  </div>
83
73
  </div>
@@ -1,183 +1,92 @@
1
- /**
2
- * Register.jsx – Account creation page.
3
- * Matches Login's split-panel layout.
4
- * Backend: POST /api/auth/signup → { name, email, password }
5
- */
6
-
7
- import React, { useState } from 'react';
8
- import { useNavigate, Link } from 'react-router-dom';
9
- import { Eye, EyeOff, UserPlus } from 'lucide-react';
10
- import { authApi } from '../api/ApiClient';
11
- import Button from '../components/Button';
12
- import FormField from '../components/FormField';
13
- import { useToast } from '../components/Toast';
14
-
15
- export default function Register() {
16
- const [name, setName] = useState('');
17
- const [email, setEmail] = useState('');
18
- const [password, setPassword] = useState('');
19
- const [confirm, setConfirm] = useState('');
20
- const [showPwd, setShowPwd] = useState(false);
21
- const [loading, setLoading] = useState(false);
22
- const [errors, setErrors] = useState({});
23
- const navigate = useNavigate();
24
- const toast = useToast();
25
-
26
- const validate = () => {
27
- const e = {};
28
- if (!name.trim()) e.name = 'Full name is required';
29
- if (!email.trim()) e.email = 'Email is required';
30
- else if (!/\S+@\S+\.\S+/.test(email)) e.email = 'Enter a valid email';
31
- if (!password) e.password = 'Password is required';
32
- else if (password.length < 6) e.password = 'Minimum 6 characters';
33
- if (!confirm) e.confirm = 'Please confirm your password';
34
- else if (confirm !== password) e.confirm = 'Passwords do not match';
35
- setErrors(e);
36
- return Object.keys(e).length === 0;
37
- };
38
-
39
- const handleRegister = async () => {
40
- if (!validate()) return;
41
- try {
42
- setLoading(true);
43
- const data = await authApi.signup({
44
- name: name.trim(),
45
- email: email.trim(),
46
- password: password,
47
- });
48
-
49
- localStorage.setItem('token', data.data?.accessToken ?? '');
50
- localStorage.setItem('user', JSON.stringify(data.data?.user ?? {}));
51
-
52
- toast.success('Account created welcome!');
53
- navigate('/dashboard/overview');
54
- } catch (err) {
55
- toast.error(err.message ?? 'Registration failed. Please try again.');
56
- } finally {
57
- setLoading(false);
58
- }
59
- };
60
-
61
- const handleKey = (e) => { if (e.key === 'Enter') handleRegister(); };
62
-
63
- return (
64
- <div className="min-h-screen flex items-center justify-center p-4">
65
- <div className="w-full max-w-[760px] flex rounded-none h-[540px] overflow-hidden ">
66
-
67
- {/* ── Left panel ── */}
68
- <div className="hidden sm:flex bg-[#008A75] flex-col w-5/12 p-10 text-white">
69
- <div className="mb-auto">
70
- <div className="flex items-center gap-2 mb-1">
71
- <img src="/logo.png" alt="EPMS" className="w-8 h-10" />
72
- <h1 className="text-[22px] font-bold tracking-tight mt-3">EPMS</h1>
73
- </div>
74
- <p className="text-[10px] text-white/60 font-medium uppercase tracking-widest">Employee Payroll Management System</p>
75
- </div>
76
-
77
- <div className="mt-10">
78
- <p className="text-[18px] font-semibold leading-snug">
79
- Get started today.<br />
80
- <span className="text-white/60">Your team awaits.</span>
81
- </p>
82
- <p className="text-[12px] text-white/50 mt-3 leading-relaxed">
83
- Create your admin account and start managing employees, departments, and payroll.
84
- </p>
85
- </div>
86
-
87
- <div className="mt-auto pt-10 border-t border-white/20">
88
- <p className="text-[11px] text-white/40">
89
- © {new Date().getFullYear()} EPMS · All rights reserved
90
- </p>
91
- </div>
92
- </div>
93
-
94
- {/* ── Right panel ── */}
95
- <div className="flex-1 p-8 sm:p-10 flex flex-col justify-center overflow-y-auto">
96
- <div className="mb-6">
97
- <h2 className="text-[20px] font-bold text-gray-800">Create account</h2>
98
- <p className="text-[13px] text-gray-400 mt-1">
99
- Already have an account?{' '}
100
- <Link to="/login" className="text-[#008A75] font-semibold hover:underline">
101
- Sign in
102
- </Link>
103
- </p>
104
- </div>
105
-
106
- <div className="space-y-3">
107
- <FormField label="Full name" required error={errors.name}>
108
- <FormField.Input
109
- type="text"
110
- value={name}
111
- onChange={(v) => setName(v)}
112
- placeholder="Jane Doe"
113
- onKeyDown={handleKey}
114
- autoComplete="name"
115
- className='rounded-none'
116
- />
117
- </FormField>
118
-
119
- <FormField label="Email address" required error={errors.email}>
120
- <FormField.Input
121
- type="email"
122
- value={email}
123
- onChange={(v) => setEmail(v)}
124
- placeholder="you@company.com"
125
- onKeyDown={handleKey}
126
- autoComplete="email"
127
- className='rounded-none'
128
- />
129
- </FormField>
130
-
131
- <FormField label="Password" required error={errors.password}>
132
- <div className="relative">
133
- <FormField.Input
134
- type={showPwd ? 'text' : 'password'}
135
- value={password}
136
- onChange={(v) => setPassword(v)}
137
- placeholder="Min. 6 characters"
138
- onKeyDown={handleKey}
139
- autoComplete="new-password"
140
- className="pr-10 rounded-none"
141
- />
142
- <button
143
- type="button"
144
- onClick={() => setShowPwd((v) => !v)}
145
- className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
146
- >
147
- {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
148
- </button>
149
- </div>
150
- </FormField>
151
-
152
- <FormField label="Confirm password" required error={errors.confirm}>
153
- <FormField.Input
154
- type={showPwd ? 'text' : 'password'}
155
- value={confirm}
156
- onChange={(v) => setConfirm(v)}
157
- placeholder="Repeat your password"
158
- onKeyDown={handleKey}
159
- autoComplete="new-password"
160
- className='rounded-none'
161
- />
162
- </FormField>
163
- </div>
164
-
165
- <Button
166
- className="mt-5 rounded-none"
167
- fullWidth
168
- size="lg"
169
- loading={loading}
170
- icon={<UserPlus className="w-4 h-4" />}
171
- onClick={handleRegister}
172
- >
173
- Create account
174
- </Button>
175
-
176
- <p className="text-[11px] text-gray-400 text-center mt-4">
177
- Protected by JWT authentication
178
- </p>
179
- </div>
180
- </div>
181
- </div>
182
- );
183
- }
1
+ import React, { useState } from 'react';
2
+ import { useNavigate, Link } from 'react-router-dom';
3
+ import { Eye, EyeOff, UserPlus } from 'lucide-react';
4
+ import { authApi } from '../api/ApiClient';
5
+ import Button from '../components/Button';
6
+ import FormField from '../components/FormField';
7
+ import { useToast } from '../components/Toast';
8
+
9
+ export default function Register() {
10
+ const [userName, setUserName] = useState('');
11
+ const [password, setPassword] = useState('');
12
+ const [confirm, setConfirm] = useState('');
13
+ const [showPwd, setShowPwd] = useState(false);
14
+ const [loading, setLoading] = useState(false);
15
+ const [errors, setErrors] = useState({});
16
+ const navigate = useNavigate();
17
+ const toast = useToast();
18
+
19
+ const validate = () => {
20
+ const e = {};
21
+ if (!userName.trim()) e.userName = 'Username is required';
22
+ if (!password) e.password = 'Password is required';
23
+ else if (password.length < 4) e.password = 'Minimum 4 characters';
24
+ if (!confirm) e.confirm = 'Please confirm your password';
25
+ else if (confirm !== password) e.confirm = 'Passwords do not match';
26
+ setErrors(e);
27
+ return Object.keys(e).length === 0;
28
+ };
29
+
30
+ const handleRegister = async () => {
31
+ if (!validate()) return;
32
+ try {
33
+ setLoading(true);
34
+ await authApi.register({ userName: userName.trim(), password });
35
+ toast.success('Account created — please sign in');
36
+ navigate('/login');
37
+ } catch (err) {
38
+ toast.error(err.message ?? 'Registration failed');
39
+ } finally {
40
+ setLoading(false);
41
+ }
42
+ };
43
+
44
+ const handleKey = (e) => { if (e.key === 'Enter') handleRegister(); };
45
+
46
+ return (
47
+ <div className="min-h-screen flex items-center justify-center p-4">
48
+ <div className="w-full max-w-[760px] flex h-[540px] overflow-hidden">
49
+ <div className="hidden sm:flex bg-[#008A75] flex-col w-5/12 p-10 text-white">
50
+ <div className="mb-auto">
51
+ <div className="flex items-center gap-2 mb-1">
52
+ <img src="/logo.png" alt="HRMS" className="w-8 h-10" />
53
+ <h1 className="text-[22px] font-bold tracking-tight mt-3">HRMS</h1>
54
+ </div>
55
+ <p className="text-[10px] text-white/60 font-medium uppercase tracking-widest">Human Resource Management System</p>
56
+ </div>
57
+ <div className="mt-10">
58
+ <p className="text-[18px] font-semibold leading-snug">Get started today.<br /><span className="text-white/60">Your team awaits.</span></p>
59
+ <p className="text-[12px] text-white/50 mt-3 leading-relaxed">Create your account and start managing HR operations.</p>
60
+ </div>
61
+ <div className="mt-auto pt-10 border-t border-white/20">
62
+ <p className="text-[11px] text-white/40">&copy; {new Date().getFullYear()} DAB Enterprise LTD</p>
63
+ </div>
64
+ </div>
65
+ <div className="flex-1 p-8 sm:p-10 flex flex-col justify-center overflow-y-auto">
66
+ <div className="mb-6">
67
+ <h2 className="text-[20px] font-bold text-gray-800">Create account</h2>
68
+ <p className="text-[13px] text-gray-400 mt-1">Already have an account?{' '}<Link to="/login" className="text-[#008A75] font-semibold hover:underline">Sign in</Link></p>
69
+ </div>
70
+ <div className="space-y-3">
71
+ <FormField label="Username" required error={errors.userName}>
72
+ <FormField.Input type="text" value={userName} onChange={(v) => setUserName(v)} placeholder="Choose a username" onKeyDown={handleKey} autoComplete="username" />
73
+ </FormField>
74
+ <FormField label="Password" required error={errors.password}>
75
+ <div className="relative">
76
+ <FormField.Input type={showPwd ? 'text' : 'password'} value={password} onChange={(v) => setPassword(v)} placeholder="Min. 4 characters" onKeyDown={handleKey} autoComplete="new-password" className="pr-10" />
77
+ <button type="button" onClick={() => setShowPwd((v) => !v)} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
78
+ {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
79
+ </button>
80
+ </div>
81
+ </FormField>
82
+ <FormField label="Confirm password" required error={errors.confirm}>
83
+ <FormField.Input type={showPwd ? 'text' : 'password'} value={confirm} onChange={(v) => setConfirm(v)} placeholder="Repeat your password" onKeyDown={handleKey} autoComplete="new-password" />
84
+ </FormField>
85
+ </div>
86
+ <Button className="mt-5" fullWidth size="lg" loading={loading} icon={<UserPlus className="w-4 h-4" />} onClick={handleRegister}>Create account</Button>
87
+ <p className="text-[11px] text-gray-400 text-center mt-4">Session-based authentication</p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ );
92
+ }
@@ -3,29 +3,24 @@ import { useNavigate } from 'react-router-dom'
3
3
 
4
4
  export default function Intro() {
5
5
  const navigate = useNavigate()
6
-
7
6
  useEffect(() => {
8
7
  const timer = setTimeout(() => {
9
- const token = localStorage.getItem('token')
10
- navigate(token ? '/dashboard/overview' : '/login', { replace: true })
8
+ navigate('/login', { replace: true })
11
9
  }, 2800)
12
10
  return () => clearTimeout(timer)
13
11
  }, [navigate])
14
-
15
12
  return (
16
13
  <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white">
17
14
  <div className="flex flex-col items-center gap-6">
18
- <img src="/logo.png" alt="EPMS" className="w-16 h-20" />
19
-
15
+ <img src="/logo.png" alt="HRMS" className="w-16 h-20" />
20
16
  <div className="flex flex-col items-center">
21
17
  <span className="text-4xl font-bold tracking-tight text-zinc-800">
22
- EP<span className="text-[#008A75]">MS</span>
18
+ HR<span className="text-[#008A75]">MS</span>
23
19
  </span>
24
20
  <span className="text-xs text-zinc-800/60 font-medium uppercase tracking-[0.2em] mt-1">
25
- Employee Payroll Management System
21
+ Human Resource Management System
26
22
  </span>
27
23
  </div>
28
-
29
24
  <div className="w-6 h-6 border-2 border-zinc-200 border-t-[#008A75] rounded-full animate-spin mt-2" />
30
25
  </div>
31
26
  </div>
@@ -1,37 +1,24 @@
1
- // ═══════════════════════════════════════════════════════════════════════════
2
- // 🏗️ LAYOUT — The app shell (reads config, picks the right layout)
3
- // ═══════════════════════════════════════════════════════════════════════════
4
- //
5
- // WHAT THIS FILE DOES:
6
- // 1. Reads your config.js settings
7
- // 2. Applies the chosen theme as CSS variables on the root div
8
- // 3. Renders the correct navigation layout (top or bottom)
9
- //
10
- // HOW TO CUSTOMIZE:
11
- // Change config.js values and everything updates automatically.
12
- // - navigation: 'topnav' | 'bottomnav'
13
- // - theme: any theme name from themes.js
14
- // - rounded: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
15
- // - fontSize: 'normal' | 'large'
16
- //
17
- // ═══════════════════════════════════════════════════════════════════════════
18
-
19
1
  import React from 'react';
20
2
  import { config } from './config';
21
3
  import { getDesignTokens } from './design';
22
4
  import TopNav from './layouts/TopNav';
23
5
  import BottomNav from './layouts/BottomNav';
6
+ import { useShell } from './layouts/useShell';
24
7
 
25
8
  export default function Layout() {
26
- // ─── Read config and generate design tokens ───────────────────────────────
9
+ const { loading } = useShell();
27
10
  const tokens = getDesignTokens(config);
28
11
 
29
- // ─── Apply CSS variables as inline styles on the root wrapper ─────────────
30
- // Every child component can use: var(--color-primary), var(--radius), etc.
31
- //
12
+ if (loading) {
13
+ return (
14
+ <div style={tokens.cssVars} className="flex items-center justify-center h-screen">
15
+ <div className="w-8 h-8 border-2 border-zinc-200 border-t-[#008A75] rounded-full animate-spin" />
16
+ </div>
17
+ );
18
+ }
19
+
32
20
  return (
33
21
  <div style={tokens.cssVars}>
34
- {/* Pick the right navigation layout based on config */}
35
22
  {config.navigation === 'bottomnav' ? <BottomNav /> : <TopNav />}
36
23
  </div>
37
24
  );
@@ -5,12 +5,7 @@ const BASE_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
5
5
  const api = axios.create({
6
6
  baseURL: BASE_URL,
7
7
  headers: { 'Content-Type': 'application/json' },
8
- });
9
-
10
- api.interceptors.request.use((config) => {
11
- const token = localStorage.getItem('token');
12
- if (token) config.headers.Authorization = `Bearer ${token}`;
13
- return config;
8
+ withCredentials: true,
14
9
  });
15
10
 
16
11
  api.interceptors.response.use(
@@ -22,71 +17,35 @@ api.interceptors.response.use(
22
17
  );
23
18
 
24
19
  export const authApi = {
25
- login: (body) => api.post('/api/auth/login', body).then(r => r.data),
26
- signup: (body) => api.post('/api/auth/signup', body).then(r => r.data),
27
- refresh:(body) => api.post('/api/auth/refresh', body).then(r => r.data),
28
- me: () => api.get('/api/auth/me').then(r => r.data),
29
- logout: () => api.post('/api/auth/logout').then(r => r.data),
20
+ login: (body) => api.post('/api/auth/login', body).then(r => r.data),
21
+ register: (body) => api.post('/api/auth/register', body).then(r => r.data),
22
+ me: () => api.get('/api/auth/me').then(r => r.data),
23
+ logout: () => api.post('/api/auth/logout').then(r => r.data),
30
24
  };
31
25
 
32
26
  export const employeeApi = {
33
- list: () => api.get('/api/employees').then(r => r.data),
34
- count: () => api.get('/api/employees/count').then(r => r.data),
35
- create: (body) => api.post('/api/employees', body).then(r => r.data),
36
- update: (id, b) => api.put(`/api/employees/${id}`, b).then(r => r.data),
37
- remove: (id) => api.delete(`/api/employees/${id}`).then(r => r.data),
27
+ list: (search) => api.get('/api/employees', { params: { search } }).then(r => r.data),
28
+ create: (body) => api.post('/api/employees', body).then(r => r.data),
29
+ update: (id, b) => api.put(`/api/employees/${id}`, b).then(r => r.data),
30
+ remove: (id) => api.delete(`/api/employees/${id}`).then(r => r.data),
38
31
  };
39
32
 
40
33
  export const departmentApi = {
41
- list: () => api.get('/api/departments').then(r => r.data),
42
- create: (body) => api.post('/api/departments', body).then(r => r.data),
43
- update: (id, b) => api.put(`/api/departments/${id}`, b).then(r => r.data),
44
- remove: (id) => api.delete(`/api/departments/${id}`).then(r => r.data),
34
+ list: () => api.get('/api/departments').then(r => r.data),
35
+ create: (body) => api.post('/api/departments', body).then(r => r.data),
36
+ update: (id, b) => api.put(`/api/departments/${id}`, b).then(r => r.data),
37
+ remove: (id) => api.delete(`/api/departments/${id}`).then(r => r.data),
45
38
  };
46
39
 
47
- export const salaryApi = {
48
- list: () => api.get('/api/salaries').then(r => r.data),
49
- create: (body) => api.post('/api/salaries', body).then(r => r.data),
50
- update: (id, b) => api.put(`/api/salaries/${id}`, b).then(r => r.data),
51
- remove: (id) => api.delete(`/api/salaries/${id}`).then(r => r.data),
52
- average: () => api.get('/api/salaries/avg').then(r => r.data),
40
+ export const positionApi = {
41
+ list: () => api.get('/api/positions').then(r => r.data),
42
+ create: (body) => api.post('/api/positions', body).then(r => r.data),
43
+ update: (id, b) => api.put(`/api/positions/${id}`, b).then(r => r.data),
44
+ remove: (id) => api.delete(`/api/positions/${id}`).then(r => r.data),
53
45
  };
54
46
 
55
47
  export const reportsApi = {
56
- monthlyPayroll: (month) => api.get('/api/reports/payroll', { params: { month } }).then(r => r.data),
57
- };
58
-
59
- export const excelApi = {
60
- async download(path, filename = 'export') {
61
- const token = localStorage.getItem('token');
62
- const res = await fetch(`${BASE_URL}${path}`, {
63
- headers: { ...(token ? { Authorization: `Bearer ${token}` } : {}) },
64
- });
65
- const blob = await res.blob();
66
- const url = URL.createObjectURL(blob);
67
- const a = Object.assign(document.createElement('a'), { href: url, download: `${filename}.xlsx` });
68
- document.body.appendChild(a);
69
- a.click();
70
- a.remove();
71
- URL.revokeObjectURL(url);
72
- },
73
- exportUsers: () => excelApi.download('/api/excel/export/users', 'employees-report'),
74
- exportCustom: async (sheetName, data, filename) => {
75
- const token = localStorage.getItem('token');
76
- const res = await fetch(`${BASE_URL}/api/excel/export/custom`, {
77
- method: 'POST',
78
- headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
79
- body: JSON.stringify({ sheetName, data }),
80
- });
81
- if (!res.ok) throw new Error(await res.text());
82
- const blob = await res.blob();
83
- const url = URL.createObjectURL(blob);
84
- const a = Object.assign(document.createElement('a'), { href: url, download: `${filename ?? sheetName}.xlsx` });
85
- document.body.appendChild(a);
86
- a.click();
87
- a.remove();
88
- URL.revokeObjectURL(url);
89
- },
48
+ employeesOnLeave: () => api.get('/api/reports/employees-on-leave').then(r => r.data),
90
49
  };
91
50
 
92
51
  export default api;