Hugging Face's logo

Spaces:
karytan
/
web-persuratan
Running

App Files Community
karytan commited on
Commit
98d4bd5
·
verified ·
1 Parent(s): b0953fc

Buat website pengajuan surat (cuti, dinas, sakit, dll) dengan: 1. Dua Jenis Pengguna: Admin: • Kelola akun pegawai • Approve/tolak surat • Kelola template dokumen Pegawai: • Ajukan surat dengan cara: a. Download template (format DOC/PDF) b. Unggah dokumen yang sudah diisi • Lacak status pengajuan 2. Fitur Tambahan: Login terpisah admin/pegawai Akun demo: • Admin: admin@demo.com / admin123 • Pegawai: pegawai@demo.com / pegawai123 Notifikasi email saat: • Template diupdate admin • Surat disetujui/ditolak Fitur Template Dokumen: Admin bisa upload template resmi Pegawai bisa download template kosong Format standar (logo kop surat, nomor otomatis) - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1127 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Web Persuratan
3
- emoji: 📚
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: web-persuratan
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1127 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sistem Pengajuan Surat</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that can't be easily styled with Tailwind */
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .sidebar.collapsed {
15
+ width: 70px;
16
+ }
17
+ .sidebar.collapsed .sidebar-text {
18
+ display: none;
19
+ }
20
+ .sidebar.collapsed .nav-item {
21
+ justify-content: center;
22
+ }
23
+ .main-content {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .sidebar.collapsed + .main-content {
27
+ margin-left: 70px;
28
+ }
29
+ .dropdown:hover .dropdown-menu {
30
+ display: block;
31
+ }
32
+ .notification-badge {
33
+ position: absolute;
34
+ top: -5px;
35
+ right: -5px;
36
+ }
37
+ .file-input-wrapper {
38
+ position: relative;
39
+ overflow: hidden;
40
+ display: inline-block;
41
+ }
42
+ .file-input-wrapper input[type=file] {
43
+ position: absolute;
44
+ left: 0;
45
+ top: 0;
46
+ opacity: 0;
47
+ }
48
+ .document-preview {
49
+ height: 200px;
50
+ background-size: contain;
51
+ background-repeat: no-repeat;
52
+ background-position: center;
53
+ }
54
+ @media (max-width: 768px) {
55
+ .sidebar {
56
+ position: fixed;
57
+ z-index: 50;
58
+ transform: translateX(-100%);
59
+ }
60
+ .sidebar.show {
61
+ transform: translateX(0);
62
+ }
63
+ .main-content {
64
+ margin-left: 0 !important;
65
+ }
66
+ }
67
+ </style>
68
+ </head>
69
+ <body class="bg-gray-100 font-sans">
70
+ <!-- Login Page -->
71
+ <div id="login-page" class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-blue-700 p-4">
72
+ <div class="bg-white rounded-lg shadow-xl overflow-hidden w-full max-w-md">
73
+ <div class="bg-blue-600 py-4 px-6">
74
+ <h2 class="text-white text-2xl font-bold text-center">Sistem Pengajuan Surat</h2>
75
+ </div>
76
+ <div class="p-6">
77
+ <div id="login-error" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"></div>
78
+ <form id="login-form">
79
+ <div class="mb-4">
80
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
81
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Masukkan email Anda">
82
+ </div>
83
+ <div class="mb-6">
84
+ <label for="password" class="block text-gray-700 font-medium mb-2">Password</label>
85
+ <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Masukkan password Anda">
86
+ </div>
87
+ <div class="mb-4">
88
+ <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-300">
89
+ Masuk
90
+ </button>
91
+ </div>
92
+ <div class="text-center text-sm text-gray-600">
93
+ <p>Gunakan akun demo:</p>
94
+ <p class="font-medium">Admin: admin@demo.com / admin123</p>
95
+ <p class="font-medium">Pegawai: pegawai@demo.com / pegawai123</p>
96
+ </div>
97
+ </form>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Main App Container (hidden initially) -->
103
+ <div id="app-container" class="hidden min-h-screen">
104
+ <!-- Mobile Header -->
105
+ <div class="bg-white shadow-md py-3 px-4 flex items-center justify-between lg:hidden">
106
+ <button id="mobile-menu-button" class="text-gray-600 focus:outline-none">
107
+ <i class="fas fa-bars text-xl"></i>
108
+ </button>
109
+ <div class="flex items-center space-x-4">
110
+ <div class="relative">
111
+ <button id="notification-button-mobile" class="text-gray-600 focus:outline-none">
112
+ <i class="fas fa-bell text-xl"></i>
113
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
114
+ </button>
115
+ </div>
116
+ <div class="relative">
117
+ <button id="profile-button-mobile" class="flex items-center focus:outline-none">
118
+ <img src="https://ui-avatars.com/api/?name=Admin+Demo&background=3b82f6&color=fff" alt="Profile" class="h-8 w-8 rounded-full">
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Sidebar -->
125
+ <div id="sidebar" class="sidebar bg-blue-800 text-white h-screen fixed lg:relative w-64 shadow-lg">
126
+ <div class="flex items-center justify-between p-4 border-b border-blue-700">
127
+ <div class="flex items-center">
128
+ <div class="bg-white p-2 rounded-lg mr-3">
129
+ <i class="fas fa-envelope text-blue-600 text-xl"></i>
130
+ </div>
131
+ <span class="sidebar-text font-bold text-lg">SuratKu</span>
132
+ </div>
133
+ <button id="toggle-sidebar" class="hidden lg:block text-white focus:outline-none">
134
+ <i class="fas fa-chevron-left"></i>
135
+ </button>
136
+ </div>
137
+
138
+ <div class="p-4">
139
+ <div class="flex items-center mb-6">
140
+ <img src="https://ui-avatars.com/api/?name=Admin+Demo&background=3b82f6&color=fff" alt="Profile" class="h-10 w-10 rounded-full mr-3">
141
+ <div class="sidebar-text">
142
+ <p class="font-medium" id="user-name">Admin Demo</p>
143
+ <p class="text-blue-200 text-sm" id="user-role">Administrator</p>
144
+ </div>
145
+ </div>
146
+
147
+ <nav>
148
+ <ul class="space-y-2">
149
+ <li>
150
+ <a href="#" id="dashboard-link" class="nav-item flex items-center px-3 py-2 rounded-lg bg-blue-700 text-white">
151
+ <i class="fas fa-tachometer-alt mr-3"></i>
152
+ <span class="sidebar-text">Dashboard</span>
153
+ </a>
154
+ </li>
155
+ <li id="employee-submission-link-container">
156
+ <a href="#" id="employee-submission-link" class="nav-item flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-white">
157
+ <i class="fas fa-paper-plane mr-3"></i>
158
+ <span class="sidebar-text">Pengajuan Surat</span>
159
+ </a>
160
+ </li>
161
+ <li id="track-submission-link-container">
162
+ <a href="#" id="track-submission-link" class="nav-item flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-white">
163
+ <i class="fas fa-search mr-3"></i>
164
+ <span class="sidebar-text">Lacak Pengajuan</span>
165
+ </a>
166
+ </li>
167
+ <li id="manage-employees-link-container" class="hidden">
168
+ <a href="#" id="manage-employees-link" class="nav-item flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-white">
169
+ <i class="fas fa-users mr-3"></i>
170
+ <span class="sidebar-text">Kelola Pegawai</span>
171
+ </a>
172
+ </li>
173
+ <li id="manage-templates-link-container" class="hidden">
174
+ <a href="#" id="manage-templates-link" class="nav-item flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-white">
175
+ <i class="fas fa-file-alt mr-3"></i>
176
+ <span class="sidebar-text">Kelola Template</span>
177
+ </a>
178
+ </li>
179
+ <li id="approval-link-container" class="hidden">
180
+ <a href="#" id="approval-link" class="nav-item flex items-center px-3 py-2 rounded-lg hover:bg-blue-700 text-white">
181
+ <i class="fas fa-check-circle mr-3"></i>
182
+ <span class="sidebar-text">Persetujuan</span>
183
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
184
+ </a>
185
+ </li>
186
+ </ul>
187
+ </nav>
188
+ </div>
189
+
190
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-blue-700">
191
+ <button id="logout-button" class="nav-item flex items-center w-full px-3 py-2 rounded-lg hover:bg-blue-700 text-white focus:outline-none">
192
+ <i class="fas fa-sign-out-alt mr-3"></i>
193
+ <span class="sidebar-text">Keluar</span>
194
+ </button>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Main Content -->
199
+ <div class="main-content ml-0 lg:ml-64 min-h-screen">
200
+ <!-- Header -->
201
+ <header class="bg-white shadow-sm hidden lg:block">
202
+ <div class="flex items-center justify-between px-6 py-4">
203
+ <h1 class="text-2xl font-bold text-gray-800" id="page-title">Dashboard</h1>
204
+ <div class="flex items-center space-x-6">
205
+ <div class="relative">
206
+ <button id="notification-button" class="flex items-center text-gray-600 hover:text-gray-800 focus:outline-none">
207
+ <i class="fas fa-bell text-xl"></i>
208
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
209
+ </button>
210
+ <!-- Notification Dropdown -->
211
+ <div id="notification-dropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-50">
212
+ <div class="px-4 py-2 border-b border-gray-200">
213
+ <p class="font-medium text-gray-800">Notifikasi</p>
214
+ </div>
215
+ <div class="max-h-60 overflow-y-auto">
216
+ <a href="#" class="block px-4 py-3 hover:bg-gray-100 border-b border-gray-100">
217
+ <div class="flex items-start">
218
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
219
+ <i class="fas fa-file-alt text-blue-600"></i>
220
+ </div>
221
+ <div class="ml-3">
222
+ <p class="text-sm font-medium text-gray-900">Template baru diupload</p>
223
+ <p class="text-xs text-gray-500">Template surat dinas telah diperbarui</p>
224
+ <p class="text-xs text-gray-400 mt-1">2 jam yang lalu</p>
225
+ </div>
226
+ </div>
227
+ </a>
228
+ <a href="#" class="block px-4 py-3 hover:bg-gray-100 border-b border-gray-100">
229
+ <div class="flex items-start">
230
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
231
+ <i class="fas fa-check-circle text-green-600"></i>
232
+ </div>
233
+ <div class="ml-3">
234
+ <p class="text-sm font-medium text-gray-900">Pengajuan disetujui</p>
235
+ <p class="text-xs text-gray-500">Surat cuti Anda telah disetujui</p>
236
+ <p class="text-xs text-gray-400 mt-1">1 hari yang lalu</p>
237
+ </div>
238
+ </div>
239
+ </a>
240
+ <a href="#" class="block px-4 py-3 hover:bg-gray-100">
241
+ <div class="flex items-start">
242
+ <div class="flex-shrink-0 bg-red-100 p-2 rounded-full">
243
+ <i class="fas fa-times-circle text-red-600"></i>
244
+ </div>
245
+ <div class="ml-3">
246
+ <p class="text-sm font-medium text-gray-900">Pengajuan ditolak</p>
247
+ <p class="text-xs text-gray-500">Surat dinas Anda memerlukan revisi</p>
248
+ <p class="text-xs text-gray-400 mt-1">3 hari yang lalu</p>
249
+ </div>
250
+ </div>
251
+ </a>
252
+ </div>
253
+ <div class="px-4 py-2 border-t border-gray-200">
254
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Lihat semua notifikasi</a>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ <div class="relative">
259
+ <button id="profile-button" class="flex items-center focus:outline-none">
260
+ <img src="https://ui-avatars.com/api/?name=Admin+Demo&background=3b82f6&color=fff" alt="Profile" class="h-8 w-8 rounded-full">
261
+ <span class="ml-2 text-gray-700 font-medium hidden md:inline">Admin Demo</span>
262
+ <i class="fas fa-chevron-down ml-1 text-gray-500 text-xs hidden md:inline"></i>
263
+ </button>
264
+ <!-- Profile Dropdown -->
265
+ <div id="profile-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
266
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profil Saya</a>
267
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Pengaturan</a>
268
+ <div class="border-t border-gray-200"></div>
269
+ <a href="#" id="logout-button-header" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Keluar</a>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </header>
275
+
276
+ <!-- Content Area -->
277
+ <main class="p-4 lg:p-6">
278
+ <!-- Dashboard Page -->
279
+ <div id="dashboard-page">
280
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
281
+ <div class="bg-white rounded-lg shadow p-6">
282
+ <div class="flex items-center justify-between">
283
+ <div>
284
+ <p class="text-gray-500">Total Pengajuan</p>
285
+ <h3 class="text-2xl font-bold mt-1">24</h3>
286
+ </div>
287
+ <div class="bg-blue-100 p-3 rounded-full">
288
+ <i class="fas fa-paper-plane text-blue-600 text-xl"></i>
289
+ </div>
290
+ </div>
291
+ <p class="text-sm text-gray-500 mt-3"><span class="text-green-500 font-medium">+2.5%</span> dari bulan lalu</p>
292
+ </div>
293
+ <div class="bg-white rounded-lg shadow p-6">
294
+ <div class="flex items-center justify-between">
295
+ <div>
296
+ <p class="text-gray-500">Disetujui</p>
297
+ <h3 class="text-2xl font-bold mt-1">18</h3>
298
+ </div>
299
+ <div class="bg-green-100 p-3 rounded-full">
300
+ <i class="fas fa-check-circle text-green-600 text-xl"></i>
301
+ </div>
302
+ </div>
303
+ <p class="text-sm text-gray-500 mt-3"><span class="text-green-500 font-medium">+5%</span> dari bulan lalu</p>
304
+ </div>
305
+ <div class="bg-white rounded-lg shadow p-6">
306
+ <div class="flex items-center justify-between">
307
+ <div>
308
+ <p class="text-gray-500">Ditolak</p>
309
+ <h3 class="text-2xl font-bold mt-1">3</h3>
310
+ </div>
311
+ <div class="bg-red-100 p-3 rounded-full">
312
+ <i class="fas fa-times-circle text-red-600 text-xl"></i>
313
+ </div>
314
+ </div>
315
+ <p class="text-sm text-gray-500 mt-3"><span class="text-red-500 font-medium">-1.2%</span> dari bulan lalu</p>
316
+ </div>
317
+ <div class="bg-white rounded-lg shadow p-6">
318
+ <div class="flex items-center justify-between">
319
+ <div>
320
+ <p class="text-gray-500">Menunggu</p>
321
+ <h3 class="text-2xl font-bold mt-1">3</h3>
322
+ </div>
323
+ <div class="bg-yellow-100 p-3 rounded-full">
324
+ <i class="fas fa-clock text-yellow-600 text-xl"></i>
325
+ </div>
326
+ </div>
327
+ <p class="text-sm text-gray-500 mt-3"><span class="text-green-500 font-medium">+0.8%</span> dari bulan lalu</p>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
332
+ <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
333
+ <div class="flex items-center justify-between mb-4">
334
+ <h3 class="text-lg font-bold text-gray-800">Statistik Pengajuan</h3>
335
+ <div class="flex items-center space-x-2">
336
+ <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-full">Bulan Ini</button>
337
+ <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-full">Tahun Ini</button>
338
+ </div>
339
+ </div>
340
+ <div class="h-64">
341
+ <!-- Chart placeholder -->
342
+ <div class="flex items-center justify-center h-full bg-gray-50 rounded-lg">
343
+ <p class="text-gray-500">Grafik statistik pengajuan surat</p>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ <div class="bg-white rounded-lg shadow p-6">
348
+ <div class="flex items-center justify-between mb-4">
349
+ <h3 class="text-lg font-bold text-gray-800">Aktivitas Terkini</h3>
350
+ <a href="#" class="text-sm text-blue-600 hover:text-blue-800">Lihat Semua</a>
351
+ </div>
352
+ <div class="space-y-4">
353
+ <div class="flex items-start">
354
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
355
+ <i class="fas fa-file-alt text-blue-600"></i>
356
+ </div>
357
+ <div class="ml-3">
358
+ <p class="text-sm font-medium text-gray-900">Template baru diupload</p>
359
+ <p class="text-xs text-gray-500">Template surat dinas telah diperbarui</p>
360
+ <p class="text-xs text-gray-400 mt-1">2 jam yang lalu</p>
361
+ </div>
362
+ </div>
363
+ <div class="flex items-start">
364
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
365
+ <i class="fas fa-check-circle text-green-600"></i>
366
+ </div>
367
+ <div class="ml-3">
368
+ <p class="text-sm font-medium text-gray-900">Pengajuan disetujui</p>
369
+ <p class="text-xs text-gray-500">Surat cuti Anda telah disetujui</p>
370
+ <p class="text-xs text-gray-400 mt-1">1 hari yang lalu</p>
371
+ </div>
372
+ </div>
373
+ <div class="flex items-start">
374
+ <div class="flex-shrink-0 bg-red-100 p-2 rounded-full">
375
+ <i class="fas fa-times-circle text-red-600"></i>
376
+ </div>
377
+ <div class="ml-3">
378
+ <p class="text-sm font-medium text-gray-900">Pengajuan ditolak</p>
379
+ <p class="text-xs text-gray-500">Surat dinas Anda memerlukan revisi</p>
380
+ <p class="text-xs text-gray-400 mt-1">3 hari yang lalu</p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Employee Submission Page -->
389
+ <div id="employee-submission-page" class="hidden">
390
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
391
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Ajukan Surat</h2>
392
+
393
+ <div class="mb-8">
394
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Pilih Jenis Surat</h3>
395
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
396
+ <button class="letter-type-btn flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition duration-200" data-type="cuti">
397
+ <i class="fas fa-umbrella-beach text-blue-500 text-3xl mb-2"></i>
398
+ <span class="font-medium">Surat Cuti</span>
399
+ </button>
400
+ <button class="letter-type-btn flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition duration-200" data-type="dinas">
401
+ <i class="fas fa-briefcase text-blue-500 text-3xl mb-2"></i>
402
+ <span class="font-medium">Surat Dinas</span>
403
+ </button>
404
+ <button class="letter-type-btn flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition duration-200" data-type="sakit">
405
+ <i class="fas fa-procedures text-blue-500 text-3xl mb-2"></i>
406
+ <span class="font-medium">Surat Sakit</span>
407
+ </button>
408
+ <button class="letter-type-btn flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition duration-200" data-type="lainnya">
409
+ <i class="fas fa-envelope text-blue-500 text-3xl mb-2"></i>
410
+ <span class="font-medium">Surat Lainnya</span>
411
+ </button>
412
+ </div>
413
+ </div>
414
+
415
+ <div id="letter-form-container" class="hidden">
416
+ <form id="letter-form">
417
+ <div class="mb-6">
418
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Template Surat</h3>
419
+ <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
420
+ <div class="flex items-center justify-between mb-3">
421
+ <div>
422
+ <p class="font-medium" id="template-name">Template_Surat_Cuti.docx</p>
423
+ <p class="text-sm text-gray-500">Format standar dengan kop surat</p>
424
+ </div>
425
+ <button type="button" id="download-template-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-200">
426
+ <i class="fas fa-download mr-2"></i>Download Template
427
+ </button>
428
+ </div>
429
+ <div class="document-preview bg-gray-100 rounded-lg flex items-center justify-center">
430
+ <p class="text-gray-500">Pratinjau dokumen akan muncul di sini</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="mb-6">
436
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Unggah Dokumen</h3>
437
+ <div class="file-input-wrapper">
438
+ <button type="button" id="upload-document-btn" class="w-full bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-12 text-center hover:border-blue-500 hover:bg-blue-50 transition duration-200">
439
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
440
+ <p class="font-medium text-gray-700">Klik untuk mengunggah dokumen</p>
441
+ <p class="text-sm text-gray-500 mt-1">Format DOC, DOCX atau PDF (Maks. 5MB)</p>
442
+ </button>
443
+ <input type="file" id="document-file" accept=".doc,.docx,.pdf" class="hidden">
444
+ </div>
445
+ <div id="uploaded-file-info" class="hidden mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
446
+ <div class="flex items-center justify-between">
447
+ <div class="flex items-center">
448
+ <i class="fas fa-file-word text-blue-600 text-2xl mr-3"></i>
449
+ <div>
450
+ <p class="font-medium" id="uploaded-file-name">surat_cuti_saya.docx</p>
451
+ <p class="text-sm text-gray-500">1.2 MB</p>
452
+ </div>
453
+ </div>
454
+ <button type="button" id="remove-file-btn" class="text-red-500 hover:text-red-700">
455
+ <i class="fas fa-times"></i>
456
+ </button>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="mb-6">
462
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Informasi Tambahan</h3>
463
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
464
+ <div>
465
+ <label for="letter-number" class="block text-sm font-medium text-gray-700 mb-1">Nomor Surat</label>
466
+ <input type="text" id="letter-number" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nomor akan diisi otomatis" readonly>
467
+ </div>
468
+ <div>
469
+ <label for="letter-date" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Surat</label>
470
+ <input type="date" id="letter-date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
471
+ </div>
472
+ </div>
473
+ <div class="mb-4">
474
+ <label for="letter-subject" class="block text-sm font-medium text-gray-700 mb-1">Perihal</label>
475
+ <input type="text" id="letter-subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Masukkan perihal surat">
476
+ </div>
477
+ <div>
478
+ <label for="letter-notes" class="block text-sm font-medium text-gray-700 mb-1">Catatan (Opsional)</label>
479
+ <textarea id="letter-notes" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Tambahkan catatan jika diperlukan"></textarea>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="flex justify-end space-x-3">
484
+ <button type="button" id="cancel-submission-btn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition duration-200">
485
+ Batal
486
+ </button>
487
+ <button type="submit" id="submit-letter-btn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
488
+ Ajukan Surat
489
+ </button>
490
+ </div>
491
+ </form>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Track Submission Page -->
497
+ <div id="track-submission-page" class="hidden">
498
+ <div class="bg-white rounded-lg shadow p-6">
499
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Lacak Pengajuan Surat</h2>
500
+
501
+ <div class="mb-6">
502
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
503
+ <div class="mb-4 md:mb-0">
504
+ <div class="relative max-w-xs">
505
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
506
+ <i class="fas fa-search text-gray-400"></i>
507
+ </div>
508
+ <input type="text" id="search-submission" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Cari pengajuan...">
509
+ </div>
510
+ </div>
511
+ <div class="flex space-x-2">
512
+ <div class="relative">
513
+ <select id="filter-status" class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
514
+ <option value="all">Semua Status</option>
515
+ <option value="pending">Menunggu</option>
516
+ <option value="approved">Disetujui</option>
517
+ <option value="rejected">Ditolak</option>
518
+ </select>
519
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
520
+ <i class="fas fa-chevron-down"></i>
521
+ </div>
522
+ </div>
523
+ <div class="relative">
524
+ <select id="filter-type" class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
525
+ <option value="all">Semua Jenis</option>
526
+ <option value="cuti">Cuti</option>
527
+ <option value="dinas">Dinas</option>
528
+ <option value="sakit">Sakit</option>
529
+ <option value="lainnya">Lainnya</option>
530
+ </select>
531
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
532
+ <i class="fas fa-chevron-down"></i>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="overflow-x-auto">
540
+ <table class="min-w-full divide-y divide-gray-200">
541
+ <thead class="bg-gray-50">
542
+ <tr>
543
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nomor Surat</th>
544
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jenis</th>
545
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
546
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Perihal</th>
547
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
548
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
549
+ </tr>
550
+ </thead>
551
+ <tbody class="bg-white divide-y divide-gray-200">
552
+ <tr>
553
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2023/001/CUTI</td>
554
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cuti</td>
555
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jun 2023</td>
556
+ <td class="px-6 py-4 text-sm text-gray-500">Permohonan Cuti Tahunan</td>
557
+ <td class="px-6 py-4 whitespace-nowrap">
558
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Disetujui</span>
559
+ </td>
560
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
561
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Lihat</button>
562
+ <button class="text-gray-600 hover:text-gray-900">Download</button>
563
+ </td>
564
+ </tr>
565
+ <tr>
566
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2023/002/DINAS</td>
567
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dinas</td>
568
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20 Jun 2023</td>
569
+ <td class="px-6 py-4 text-sm text-gray-500">Perjalanan Dinas ke Bandung</td>
570
+ <td class="px-6 py-4 whitespace-nowrap">
571
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Menunggu</span>
572
+ </td>
573
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
574
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Lihat</button>
575
+ <button class="text-gray-600 hover:text-gray-900">Download</button>
576
+ </td>
577
+ </tr>
578
+ <tr>
579
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2023/003/SAKIT</td>
580
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sakit</td>
581
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25 Jun 2023</td>
582
+ <td class="px-6 py-4 text-sm text-gray-500">Surat Keterangan Sakit</td>
583
+ <td class="px-6 py-4 whitespace-nowrap">
584
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Ditolak</span>
585
+ </td>
586
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
587
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Lihat</button>
588
+ <button class="text-gray-600 hover:text-gray-900">Download</button>
589
+ </td>
590
+ </tr>
591
+ </tbody>
592
+ </table>
593
+ </div>
594
+
595
+ <div class="flex items-center justify-between mt-6">
596
+ <div class="text-sm text-gray-500">
597
+ Menampilkan <span class="font-medium">1</span> sampai <span class="font-medium">3</span> dari <span class="font-medium">3</span> pengajuan
598
+ </div>
599
+ <div class="flex space-x-1">
600
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
601
+ Sebelumnya
602
+ </button>
603
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
604
+ 1
605
+ </button>
606
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
607
+ Selanjutnya
608
+ </button>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Manage Employees Page -->
615
+ <div id="manage-employees-page" class="hidden">
616
+ <div class="bg-white rounded-lg shadow p-6">
617
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
618
+ <h2 class="text-xl font-bold text-gray-800">Kelola Data Pegawai</h2>
619
+ <button id="add-employee-btn" class="mt-4 md:mt-0 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
620
+ <i class="fas fa-plus mr-2"></i>Tambah Pegawai
621
+ </button>
622
+ </div>
623
+
624
+ <div class="mb-6">
625
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
626
+ <div class="mb-4 md:mb-0">
627
+ <div class="relative max-w-xs">
628
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
629
+ <i class="fas fa-search text-gray-400"></i>
630
+ </div>
631
+ <input type="text" id="search-employee" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Cari pegawai...">
632
+ </div>
633
+ </div>
634
+ <div class="flex space-x-2">
635
+ <div class="relative">
636
+ <select id="filter-department" class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
637
+ <option value="all">Semua Departemen</option>
638
+ <option value="hrd">HRD</option>
639
+ <option value="finance">Keuangan</option>
640
+ <option value="it">IT</option>
641
+ <option value="marketing">Pemasaran</option>
642
+ </select>
643
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
644
+ <i class="fas fa-chevron-down"></i>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+
651
+ <div class="overflow-x-auto">
652
+ <table class="min-w-full divide-y divide-gray-200">
653
+ <thead class="bg-gray-50">
654
+ <tr>
655
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama</th>
656
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
657
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Departemen</th>
658
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jabatan</th>
659
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
660
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
661
+ </tr>
662
+ </thead>
663
+ <tbody class="bg-white divide-y divide-gray-200">
664
+ <tr>
665
+ <td class="px-6 py-4 whitespace-nowrap">
666
+ <div class="flex items-center">
667
+ <div class="flex-shrink-0 h-10 w-10">
668
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=John+Doe&background=3b82f6&color=fff" alt="">
669
+ </div>
670
+ <div class="ml-4">
671
+ <div class="text-sm font-medium text-gray-900">John Doe</div>
672
+ <div class="text-sm text-gray-500">NIP. 12345</div>
673
+ </div>
674
+ </div>
675
+ </td>
676
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">john.doe@example.com</td>
677
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HRD</td>
678
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Manager</td>
679
+ <td class="px-6 py-4 whitespace-nowrap">
680
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Aktif</span>
681
+ </td>
682
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
683
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
684
+ <button class="text-red-600 hover:text-red-900">Nonaktifkan</button>
685
+ </td>
686
+ </tr>
687
+ <tr>
688
+ <td class="px-6 py-4 whitespace-nowrap">
689
+ <div class="flex items-center">
690
+ <div class="flex-shrink-0 h-10 w-10">
691
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Jane+Smith&background=3b82f6&color=fff" alt="">
692
+ </div>
693
+ <div class="ml-4">
694
+ <div class="text-sm font-medium text-gray-900">Jane Smith</div>
695
+ <div class="text-sm text-gray-500">NIP. 12346</div>
696
+ </div>
697
+ </div>
698
+ </td>
699
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">jane.smith@example.com</td>
700
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Keuangan</td>
701
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Staff</td>
702
+ <td class="px-6 py-4 whitespace-nowrap">
703
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Aktif</span>
704
+ </td>
705
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
706
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
707
+ <button class="text-red-600 hover:text-red-900">Nonaktifkan</button>
708
+ </td>
709
+ </tr>
710
+ <tr>
711
+ <td class="px-6 py-4 whitespace-nowrap">
712
+ <div class="flex items-center">
713
+ <div class="flex-shrink-0 h-10 w-10">
714
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Robert+Johnson&background=3b82f6&color=fff" alt="">
715
+ </div>
716
+ <div class="ml-4">
717
+ <div class="text-sm font-medium text-gray-900">Robert Johnson</div>
718
+ <div class="text-sm text-gray-500">NIP. 12347</div>
719
+ </div>
720
+ </div>
721
+ </td>
722
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">robert.johnson@example.com</td>
723
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">IT</td>
724
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Supervisor</td>
725
+ <td class="px-6 py-4 whitespace-nowrap">
726
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Cuti</span>
727
+ </td>
728
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
729
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
730
+ <button class="text-red-600 hover:text-red-900">Nonaktifkan</button>
731
+ </td>
732
+ </tr>
733
+ </tbody>
734
+ </table>
735
+ </div>
736
+
737
+ <div class="flex items-center justify-between mt-6">
738
+ <div class="text-sm text-gray-500">
739
+ Menampilkan <span class="font-medium">1</span> sampai <span class="font-medium">3</span> dari <span class="font-medium">3</span> pegawai
740
+ </div>
741
+ <div class="flex space-x-1">
742
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
743
+ Sebelumnya
744
+ </button>
745
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
746
+ 1
747
+ </button>
748
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
749
+ Selanjutnya
750
+ </button>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <!-- Manage Templates Page -->
757
+ <div id="manage-templates-page" class="hidden">
758
+ <div class="bg-white rounded-lg shadow p-6">
759
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
760
+ <h2 class="text-xl font-bold text-gray-800">Kelola Template Dokumen</h2>
761
+ <button id="add-template-btn" class="mt-4 md:mt-0 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
762
+ <i class="fas fa-plus mr-2"></i>Tambah Template
763
+ </button>
764
+ </div>
765
+
766
+ <div class="mb-6">
767
+ <div class="relative max-w-xs">
768
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
769
+ <i class="fas fa-search text-gray-400"></i>
770
+ </div>
771
+ <input type="text" id="search-template" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Cari template...">
772
+ </div>
773
+ </div>
774
+
775
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
776
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition duration-200">
777
+ <div class="bg-gray-100 h-48 flex items-center justify-center">
778
+ <i class="fas fa-file-word text-5xl text-blue-600"></i>
779
+ </div>
780
+ <div class="p-4">
781
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Template Surat Cuti</h3>
782
+ <p class="text-sm text-gray-500 mb-3">Format standar untuk pengajuan cuti tahunan, sakit, dll.</p>
783
+ <div class="flex justify-between items-center">
784
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">DOCX</span>
785
+ <div class="flex space-x-2">
786
+ <button class="text-blue-600 hover:text-blue-800">
787
+ <i class="fas fa-download"></i>
788
+ </button>
789
+ <button class="text-yellow-600 hover:text-yellow-800">
790
+ <i class="fas fa-edit"></i>
791
+ </button>
792
+ <button class="text-red-600 hover:text-red-800">
793
+ <i class="fas fa-trash"></i>
794
+ </button>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition duration-200">
800
+ <div class="bg-gray-100 h-48 flex items-center justify-center">
801
+ <i class="fas fa-file-word text-5xl text-blue-600"></i>
802
+ </div>
803
+ <div class="p-4">
804
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Template Surat Dinas</h3>
805
+ <p class="text-sm text-gray-500 mb-3">Format standar untuk pengajuan perjalanan dinas.</p>
806
+ <div class="flex justify-between items-center">
807
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">DOCX</span>
808
+ <div class="flex space-x-2">
809
+ <button class="text-blue-600 hover:text-blue-800">
810
+ <i class="fas fa-download"></i>
811
+ </button>
812
+ <button class="text-yellow-600 hover:text-yellow-800">
813
+ <i class="fas fa-edit"></i>
814
+ </button>
815
+ <button class="text-red-600 hover:text-red-800">
816
+ <i class="fas fa-trash"></i>
817
+ </button>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition duration-200">
823
+ <div class="bg-gray-100 h-48 flex items-center justify-center">
824
+ <i class="fas fa-file-word text-5xl text-blue-600"></i>
825
+ </div>
826
+ <div class="p-4">
827
+ <h3 class="font-bold text-lg text-gray-800 mb-1">Template Surat Sakit</h3>
828
+ <p class="text-sm text-gray-500 mb-3">Format standar untuk pengajuan surat keterangan sakit.</p>
829
+ <div class="flex justify-between items-center">
830
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">DOCX</span>
831
+ <div class="flex space-x-2">
832
+ <button class="text-blue-600 hover:text-blue-800">
833
+ <i class="fas fa-download"></i>
834
+ </button>
835
+ <button class="text-yellow-600 hover:text-yellow-800">
836
+ <i class="fas fa-edit"></i>
837
+ </button>
838
+ <button class="text-red-600 hover:text-red-800">
839
+ <i class="fas fa-trash"></i>
840
+ </button>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+
847
+ <div class="flex items-center justify-between mt-6">
848
+ <div class="text-sm text-gray-500">
849
+ Menampilkan <span class="font-medium">1</span> sampai <span class="font-medium">3</span> dari <span class="font-medium">3</span> template
850
+ </div>
851
+ <div class="flex space-x-1">
852
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
853
+ Sebelumnya
854
+ </button>
855
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
856
+ 1
857
+ </button>
858
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
859
+ Selanjutnya
860
+ </button>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ </div>
865
+
866
+ <!-- Approval Page -->
867
+ <div id="approval-page" class="hidden">
868
+ <div class="bg-white rounded-lg shadow p-6">
869
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Persetujuan Pengajuan Surat</h2>
870
+
871
+ <div class="mb-6">
872
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
873
+ <div class="mb-4 md:mb-0">
874
+ <div class="relative max-w-xs">
875
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
876
+ <i class="fas fa-search text-gray-400"></i>
877
+ </div>
878
+ <input type="text" id="search-approval" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Cari pengajuan...">
879
+ </div>
880
+ </div>
881
+ <div class="flex space-x-2">
882
+ <div class="relative">
883
+ <select id="filter-approval-type" class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
884
+ <option value="all">Semua Jenis</option>
885
+ <option value="cuti">Cuti</option>
886
+ <option value="dinas">Dinas</option>
887
+ <option value="sakit">Sakit</option>
888
+ <option value="lainnya">Lainnya</option>
889
+ </select>
890
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
891
+ <i class="fas fa-chevron-down"></i>
892
+ </div>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+
898
+ <div class="overflow-x-auto">
899
+ <table class="min-w-full divide-y divide-gray-200">
900
+ <thead class="bg-gray-50">
901
+ <tr>
902
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pengaju</th>
903
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jenis</th>
904
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
905
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Perihal</th>
906
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
907
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
908
+ </tr>
909
+ </thead>
910
+ <tbody class="bg-white divide-y divide-gray-200">
911
+ <tr>
912
+ <td class="px-6 py-4 whitespace-nowrap">
913
+ <div class="flex items-center">
914
+ <div class="flex-shrink-0 h-10 w-10">
915
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=John+Doe&background=3b82f6&color=fff" alt="">
916
+ </div>
917
+ <div class="ml-4">
918
+ <div class="text-sm font-medium text-gray-900">John Doe</div>
919
+ <div class="text-sm text-gray-500">HRD</div>
920
+ </div>
921
+ </div>
922
+ </td>
923
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cuti</td>
924
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jun 2023</td>
925
+ <td class="px-6 py-4 text-sm text-gray-500">Permohonan Cuti Tahunan</td>
926
+ <td class="px-6 py-4 whitespace-nowrap">
927
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Menunggu</span>
928
+ </td>
929
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
930
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Review</button>
931
+ </td>
932
+ </tr>
933
+ <tr>
934
+ <td class="px-6 py-4 whitespace-nowrap">
935
+ <div class="flex items-center">
936
+ <div class="flex-shrink-0 h-10 w-10">
937
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Jane+Smith&background=3b82f6&color=fff" alt="">
938
+ </div>
939
+ <div class="ml-4">
940
+ <div class="text-sm font-medium text-gray-900">Jane Smith</div>
941
+ <div class="text-sm text-gray-500">Keuangan</div>
942
+ </div>
943
+ </div>
944
+ </td>
945
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dinas</td>
946
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20 Jun 2023</td>
947
+ <td class="px-6 py-4 text-sm text-gray-500">Perjalanan Dinas ke Bandung</td>
948
+ <td class="px-6 py-4 whitespace-nowrap">
949
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Menunggu</span>
950
+ </td>
951
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
952
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Review</button>
953
+ </td>
954
+ </tr>
955
+ <tr>
956
+ <td class="px-6 py-4 whitespace-nowrap">
957
+ <div class="flex items-center">
958
+ <div class="flex-shrink-0 h-10 w-10">
959
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Robert+Johnson&background=3b82f6&color=fff" alt="">
960
+ </div>
961
+ <div class="ml-4">
962
+ <div class="text-sm font-medium text-gray-900">Robert Johnson</div>
963
+ <div class="text-sm text-gray-500">IT</div>
964
+ </div>
965
+ </div>
966
+ </td>
967
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sakit</td>
968
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25 Jun 2023</td>
969
+ <td class="px-6 py-4 text-sm text-gray-500">Surat Keterangan Sakit</td>
970
+ <td class="px-6 py-4 whitespace-nowrap">
971
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Menunggu</span>
972
+ </td>
973
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
974
+ <button class="text-blue-600 hover:text-blue-900 mr-3">Review</button>
975
+ </td>
976
+ </tr>
977
+ </tbody>
978
+ </table>
979
+ </div>
980
+
981
+ <div class="flex items-center justify-between mt-6">
982
+ <div class="text-sm text-gray-500">
983
+ Menampilkan <span class="font-medium">1</span> sampai <span class="font-medium">3</span> dari <span class="font-medium">3</span> pengajuan
984
+ </div>
985
+ <div class="flex space-x-1">
986
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
987
+ Sebelumnya
988
+ </button>
989
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
990
+ 1
991
+ </button>
992
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
993
+ Selanjutnya
994
+ </button>
995
+ </div>
996
+ </div>
997
+ </div>
998
+ </div>
999
+
1000
+ <!-- Review Modal -->
1001
+ <div id="review-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50">
1002
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto">
1003
+ <div class="p-6">
1004
+ <div class="flex justify-between items-center mb-4">
1005
+ <h3 class="text-xl font-bold text-gray-800">Review Pengajuan Surat</h3>
1006
+ <button id="close-review-modal" class="text-gray-500 hover:text-gray-700">
1007
+ <i class="fas fa-times"></i>
1008
+ </button>
1009
+ </div>
1010
+
1011
+ <div class="mb-6">
1012
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
1013
+ <div>
1014
+ <p class="text-sm text-gray-500">Nomor Surat</p>
1015
+ <p class="font-medium">2023/001/CUTI</p>
1016
+ </div>
1017
+ <div>
1018
+ <p class="text-sm text-gray-500">Tanggal Pengajuan</p>
1019
+ <p class="font-medium">15 Juni 2023</p>
1020
+ </div>
1021
+ <div>
1022
+ <p class="text-sm text-gray-500">Jenis Surat</p>
1023
+ <p class="font-medium">Cuti</p>
1024
+ </div>
1025
+ <div>
1026
+ <p class="text-sm text-gray-500">Pengaju</p>
1027
+ <p class="font-medium">John Doe (HRD)</p>
1028
+ </div>
1029
+ </div>
1030
+
1031
+ <div class="mb-4">
1032
+ <p class="text-sm text-gray-500">Perihal</p>
1033
+ <p class="font-medium">Permohonan Cuti Tahunan</p>
1034
+ </div>
1035
+
1036
+ <div>
1037
+ <p class="text-sm text-gray-500">Catatan Pengaju</p>
1038
+ <p class="font-medium">Mohon persetujuan cuti tahunan selama 5 hari dari tanggal 20-24 Juni 2023</p>
1039
+ </div>
1040
+ </div>
1041
+
1042
+ <div class="mb-6">
1043
+ <h4 class="text-lg font-medium text-gray-800 mb-3">Dokumen Surat</h4>
1044
+ <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
1045
+ <div class="document-preview bg-gray-100 rounded-lg flex items-center justify-center">
1046
+ <p class="text-gray-500">Pratinjau dokumen akan muncul di sini</p>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+
1051
+ <div class="mb-6">
1052
+ <h4 class="text-lg font-medium text-gray-800 mb-3">Status Persetujuan</h4>
1053
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1054
+ <button class="approval-option bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg hover:bg-green-100 transition duration-200" data-status="approved">
1055
+ <i class="fas fa-check-circle mr-2"></i> Setujui
1056
+ </button>
1057
+ <button class="approval-option bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg hover:bg-red-100 transition duration-200" data-status="rejected">
1058
+ <i class="fas fa-times-circle mr-2"></i> Tolak
1059
+ </button>
1060
+ <button class="approval-option bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg hover:bg-yellow-100 transition duration-200" data-status="pending">
1061
+ <i class="fas fa-clock mr-2"></i> Tunda
1062
+ </button>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <div id="rejection-reason-container" class="hidden mb-6">
1067
+ <label for="rejection-reason" class="block text-sm font-medium text-gray-700 mb-2">Alasan Penolakan</label>
1068
+ <textarea id="rejection-reason" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Berikan alasan penolakan pengajuan"></textarea>
1069
+ </div>
1070
+
1071
+ <div class="flex justify-end space-x-3">
1072
+ <button id="cancel-approval-btn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition duration-200">
1073
+ Batal
1074
+ </button>
1075
+ <button id="submit-approval-btn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
1076
+ Simpan
1077
+ </button>
1078
+ </div>
1079
+ </div>
1080
+ </div>
1081
+ </div>
1082
+
1083
+ <!-- Add Employee Modal -->
1084
+ <div id="add-employee-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50">
1085
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
1086
+ <div class="p-6">
1087
+ <div class="flex justify-between items-center mb-4">
1088
+ <h3 class="text-xl font-bold text-gray-800">Tambah Pegawai Baru</h3>
1089
+ <button id="close-add-employee-modal" class="text-gray-500 hover:text-gray-700">
1090
+ <i class="fas fa-times"></i>
1091
+ </button>
1092
+ </div>
1093
+
1094
+ <form id="add-employee-form">
1095
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
1096
+ <div>
1097
+ <label for="employee-name" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>
1098
+ <input type="text" id="employee-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Masukkan nama lengkap">
1099
+ </div>
1100
+ <div>
1101
+ <label for="employee-nip" class="block text-sm font-medium text-gray-700 mb-1">NIP</label>
1102
+ <input type="text" id="employee-nip" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Masukkan NIP">
1103
+ </div>
1104
+ <div>
1105
+ <label for="employee-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
1106
+ <input type="email" id="employee-email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Masukkan email">
1107
+ </div>
1108
+ <div>
1109
+ <label for="employee-department" class="block text-sm font-medium text-gray-700 mb-1">Departemen</label>
1110
+ <select id="employee-department" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
1111
+ <option value="">Pilih Departemen</option>
1112
+ <option value="hrd">HRD</option>
1113
+ <option value="finance">Keuangan</option>
1114
+ <option value="it">IT</option>
1115
+ <option value="marketing">Pemasaran</option>
1116
+ </select>
1117
+ </div>
1118
+ <div>
1119
+ <label for="employee-position" class="block text-sm font-medium text-gray-700 mb-1">Jabatan</label>
1120
+ <input type="text" id="employee-position" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Masukkan jabatan">
1121
+ </div>
1122
+ <div>
1123
+ <label for="employee-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
1124
+ <select id="employee-status" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
1125
+
1126
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=karytan/web-persuratan" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1127
+ </html>