oceanhelm 0.0.11 → 0.0.13
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.
- package/dist/oceanhelm.es.js +3211 -1416
- package/dist/oceanhelm.es.js.map +1 -1
- package/dist/oceanhelm.umd.js +9 -1
- package/dist/oceanhelm.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/ActivityLogs.vue +319 -330
- package/src/components/ConfigurableSidebar.vue +55 -8
- package/src/components/CrewManagement.vue +686 -36
- package/src/components/Reports.vue +2985 -428
- package/src/components/RequisitionSystem.vue +97 -67
- package/src/utils/sidebarConfig.js +62 -48
|
@@ -1,476 +1,465 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
placeholder="Search activities, users, or actions..."
|
|
9
|
-
:value="searchTerm"
|
|
10
|
-
@input="$emit('update:searchTerm', $event.target.value)"
|
|
11
|
-
/>
|
|
12
|
-
</div>
|
|
13
|
-
<select
|
|
14
|
-
class="filter-select"
|
|
15
|
-
:value="selectedFilter"
|
|
16
|
-
@change="$emit('update:selectedFilter', $event.target.value)"
|
|
17
|
-
>
|
|
18
|
-
<option value="all">All Activities</option>
|
|
19
|
-
<option value="login">Login</option>
|
|
20
|
-
<option value="logout">Logout</option>
|
|
21
|
-
<option value="create">Create</option>
|
|
22
|
-
<option value="update">Update</option>
|
|
23
|
-
<option value="delete">Delete</option>
|
|
24
|
-
<option value="view">View</option>
|
|
25
|
-
</select>
|
|
26
|
-
<button class="btn btn-primary" @click="$emit('refresh')">🔄 Refresh</button>
|
|
27
|
-
<button class="btn btn-secondary" @click="$emit('download')">📥 Download Report</button>
|
|
2
|
+
<div class="activity-logs">
|
|
3
|
+
<!-- Controls -->
|
|
4
|
+
<div class="a-controls">
|
|
5
|
+
<div class="a-search-box">
|
|
6
|
+
<input type="text" placeholder="Search activities, users, or actions..." :value="searchTerm"
|
|
7
|
+
@input="$emit('update:searchTerm', $event.target.value)" />
|
|
28
8
|
</div>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
9
|
+
<select class="filter-select" :value="selectedFilter"
|
|
10
|
+
@change="$emit('update:selectedFilter', $event.target.value)">
|
|
11
|
+
<option value="all">All Activities</option>
|
|
12
|
+
<option value="login">Login</option>
|
|
13
|
+
<option value="logout">Logout</option>
|
|
14
|
+
<option value="create">Create</option>
|
|
15
|
+
<option value="update">Update</option>
|
|
16
|
+
<option value="delete">Delete</option>
|
|
17
|
+
<option value="view">View</option>
|
|
18
|
+
</select>
|
|
19
|
+
<button class="btn btn-primary" @click="$emit('refresh')">🔄 Refresh</button>
|
|
20
|
+
<button class="btn btn-secondary" @click="$emit('download')">📥 Download Report</button>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<!-- Stats -->
|
|
24
|
+
<div class="stats-grid">
|
|
25
|
+
<div class="stat-card">
|
|
26
|
+
<h3>Total Activities</h3>
|
|
27
|
+
<div class="value">{{ totalActivities }}</div>
|
|
50
28
|
</div>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
29
|
+
<div class="stat-card">
|
|
30
|
+
<h3>Today's Activities</h3>
|
|
31
|
+
<div class="value">{{ todayActivities }}</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="stat-card">
|
|
34
|
+
<h3>Active Users</h3>
|
|
35
|
+
<div class="value">{{ activeUsers }}</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="stat-card">
|
|
38
|
+
<h3>Important</h3>
|
|
39
|
+
<div class="badge-danger">
|
|
40
|
+
Logs are deleted at the end of every month, please download a copy
|
|
62
41
|
</div>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- Logs Table -->
|
|
46
|
+
<div class="logs-container">
|
|
47
|
+
<div v-if="loading" class="loading">
|
|
48
|
+
<div class="spinner"></div>
|
|
49
|
+
<p>Loading activity logs...</p>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div v-else-if="logs.length === 0" class="no-logs">
|
|
53
|
+
<h3>No activities found</h3>
|
|
54
|
+
<p>Try adjusting your search or filter criteria</p>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div v-else>
|
|
58
|
+
<table class="logs-table">
|
|
59
|
+
<thead>
|
|
60
|
+
<tr>
|
|
61
|
+
<th>Timestamp</th>
|
|
62
|
+
<th>User Name</th>
|
|
63
|
+
<th>Action</th>
|
|
64
|
+
<th>Details</th>
|
|
65
|
+
<th>Section</th>
|
|
66
|
+
</tr>
|
|
67
|
+
</thead>
|
|
68
|
+
<tbody>
|
|
69
|
+
<tr v-for="log in paginatedLogs" :key="log.id">
|
|
70
|
+
<td>{{ formatDate(log.timestamp) }}</td>
|
|
71
|
+
<td>
|
|
72
|
+
<div>{{ log.user_name }}</div>
|
|
73
|
+
<small style="color: gray">{{ log.email }}</small>
|
|
74
|
+
</td>
|
|
75
|
+
<td>
|
|
76
|
+
<span class="activity-badge" :class="getBadgeClass(log.action)">
|
|
77
|
+
{{ log.action }}
|
|
78
|
+
</span>
|
|
79
|
+
</td>
|
|
80
|
+
<td>
|
|
81
|
+
{{ log.details.status }}
|
|
82
|
+
<div v-for="(change, key) in log.details.information" :key="key">
|
|
83
|
+
<strong>{{ key }}: </strong>
|
|
84
|
+
<small style="color: gray">
|
|
85
|
+
{{ change?.from ?? "" }} → {{ change?.to ?? change ?? "" }}
|
|
86
|
+
</small>
|
|
87
|
+
</div>
|
|
88
|
+
</td>
|
|
89
|
+
<td>{{ log.table_name }}</td>
|
|
90
|
+
</tr>
|
|
91
|
+
</tbody>
|
|
92
|
+
</table>
|
|
93
|
+
|
|
94
|
+
<!-- Pagination -->
|
|
95
|
+
<div class="pagination">
|
|
96
|
+
<button @click="$emit('change-page', currentPage - 1)" :disabled="currentPage === 1">
|
|
97
|
+
Previous
|
|
98
|
+
</button>
|
|
99
|
+
<button v-for="page in totalPages" :key="page" @click="$emit('change-page', page)"
|
|
100
|
+
:class="{ active: currentPage === page }">
|
|
101
|
+
{{ page }}
|
|
102
|
+
</button>
|
|
103
|
+
<button @click="$emit('change-page', currentPage + 1)" :disabled="currentPage === totalPages">
|
|
104
|
+
Next
|
|
105
|
+
</button>
|
|
118
106
|
</div>
|
|
119
107
|
</div>
|
|
120
108
|
</div>
|
|
121
|
-
</
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
109
|
+
</div>
|
|
110
|
+
</template>
|
|
111
|
+
|
|
112
|
+
<script>
|
|
113
|
+
export default {
|
|
114
|
+
name: "ActivityLogs",
|
|
115
|
+
props: {
|
|
116
|
+
loading: Boolean,
|
|
117
|
+
searchTerm: String,
|
|
118
|
+
selectedFilter: String,
|
|
119
|
+
logs: Array,
|
|
120
|
+
paginatedLogs: Array,
|
|
121
|
+
totalActivities: Number,
|
|
122
|
+
todayActivities: Number,
|
|
123
|
+
activeUsers: Number,
|
|
124
|
+
totalPages: Number,
|
|
125
|
+
currentPage: Number,
|
|
126
|
+
},
|
|
127
|
+
emits: ["update:searchTerm", "update:selectedFilter", "refresh", "download", "change-page"],
|
|
128
|
+
methods: {
|
|
129
|
+
formatDate(timestamp) {
|
|
130
|
+
return new Date(timestamp).toLocaleString();
|
|
137
131
|
},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
update: "badge-update",
|
|
149
|
-
delete: "badge-delete",
|
|
150
|
-
view: "badge-view",
|
|
151
|
-
};
|
|
152
|
-
return classes[action] || "badge-view";
|
|
153
|
-
},
|
|
132
|
+
getBadgeClass(action) {
|
|
133
|
+
const classes = {
|
|
134
|
+
login: "badge-login",
|
|
135
|
+
logout: "badge-logout",
|
|
136
|
+
create: "badge-create",
|
|
137
|
+
update: "badge-update",
|
|
138
|
+
delete: "badge-delete",
|
|
139
|
+
view: "badge-view",
|
|
140
|
+
};
|
|
141
|
+
return classes[action] || "badge-view";
|
|
154
142
|
},
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
|
|
143
|
+
},
|
|
144
|
+
};
|
|
145
|
+
</script>
|
|
146
|
+
|
|
158
147
|
<style>
|
|
159
148
|
.a-header {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
149
|
+
background: linear-gradient(135deg, var(--dashprimary-color), var(--dashsecondary-color));
|
|
150
|
+
color: white;
|
|
151
|
+
padding: 2rem 0;
|
|
152
|
+
margin-bottom: 2rem;
|
|
153
|
+
border-radius: 12px;
|
|
154
|
+
box-shadow: 0 10px 30px rgba(52, 153, 64, 0.3);
|
|
166
155
|
}
|
|
167
156
|
|
|
168
157
|
.a-header h1 {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
158
|
+
font-size: 2.5rem;
|
|
159
|
+
font-weight: 700;
|
|
160
|
+
margin-bottom: 0.5rem;
|
|
161
|
+
text-align: center;
|
|
173
162
|
}
|
|
174
163
|
|
|
175
164
|
.a-header p {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
165
|
+
text-align: center;
|
|
166
|
+
opacity: 0.9;
|
|
167
|
+
font-size: 1.1rem;
|
|
179
168
|
}
|
|
180
169
|
|
|
181
170
|
.a-controls {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
171
|
+
display: flex;
|
|
172
|
+
gap: 1rem;
|
|
173
|
+
margin-bottom: 2rem;
|
|
174
|
+
flex-wrap: wrap;
|
|
175
|
+
align-items: center;
|
|
187
176
|
}
|
|
188
177
|
|
|
189
178
|
.a-search-box {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
179
|
+
flex: 1;
|
|
180
|
+
min-width: 250px;
|
|
181
|
+
position: relative;
|
|
193
182
|
}
|
|
194
183
|
|
|
195
184
|
.a-search-box input {
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
185
|
+
width: 100%;
|
|
186
|
+
padding: 12px 16px;
|
|
187
|
+
border: 2px solid #e0e0e0;
|
|
188
|
+
border-radius: 8px;
|
|
189
|
+
font-size: 1rem;
|
|
190
|
+
transition: all 0.3s ease;
|
|
202
191
|
}
|
|
203
192
|
|
|
204
193
|
.a-search-box input:focus {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
194
|
+
outline: none;
|
|
195
|
+
border-color: var(--dashsecondary-color);
|
|
196
|
+
box-shadow: 0 0 0 3px rgba(52, 153, 64, 0.1);
|
|
208
197
|
}
|
|
209
198
|
|
|
210
199
|
.filter-select {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
200
|
+
padding: 12px 16px;
|
|
201
|
+
border: 2px solid #e0e0e0;
|
|
202
|
+
border-radius: 8px;
|
|
203
|
+
font-size: 1rem;
|
|
204
|
+
background: white;
|
|
205
|
+
cursor: pointer;
|
|
206
|
+
transition: all 0.3s ease;
|
|
218
207
|
}
|
|
219
208
|
|
|
220
209
|
.filter-select:focus {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
210
|
+
outline: none;
|
|
211
|
+
border-color: var(--dashsecondary-color);
|
|
212
|
+
box-shadow: 0 0 0 3px rgba(52, 153, 64, 0.1);
|
|
224
213
|
}
|
|
225
214
|
|
|
226
215
|
.btn {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
}
|
|
216
|
+
padding: 12px 24px;
|
|
217
|
+
border-radius: 8px;
|
|
218
|
+
font-size: 1rem;
|
|
219
|
+
font-weight: 600;
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
transition: all 0.3s ease;
|
|
222
|
+
display: flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
gap: 8px;
|
|
225
|
+
}
|
|
237
226
|
|
|
238
227
|
.btn-primary {
|
|
239
|
-
|
|
240
|
-
|
|
228
|
+
background: var(--primary);
|
|
229
|
+
color: white;
|
|
241
230
|
}
|
|
242
231
|
|
|
243
232
|
.btn-primary:hover {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
233
|
+
background: var(--primary-dark);
|
|
234
|
+
transform: translateY(-1px);
|
|
235
|
+
box-shadow: 0 4px 12px rgba(52, 153, 64, 0.3);
|
|
247
236
|
}
|
|
248
237
|
|
|
249
238
|
.btn-secondary {
|
|
250
|
-
|
|
251
|
-
|
|
239
|
+
background: var(--secondary);
|
|
240
|
+
color: var(--dark);
|
|
252
241
|
}
|
|
253
242
|
|
|
254
243
|
.btn-secondary:hover {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
244
|
+
background: #e6a200;
|
|
245
|
+
transform: translateY(-1px);
|
|
246
|
+
box-shadow: 0 4px 12px rgba(244, 180, 0, 0.3);
|
|
258
247
|
}
|
|
259
248
|
|
|
260
249
|
.stats-grid {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
250
|
+
display: grid;
|
|
251
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
252
|
+
gap: 1.5rem;
|
|
253
|
+
margin-bottom: 2rem;
|
|
265
254
|
}
|
|
266
255
|
|
|
267
256
|
.stat-card {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
257
|
+
background: white;
|
|
258
|
+
padding: 1.5rem;
|
|
259
|
+
border-radius: 12px;
|
|
260
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
261
|
+
transition: transform 0.3s ease;
|
|
273
262
|
}
|
|
274
263
|
|
|
275
264
|
.stat-card:hover {
|
|
276
|
-
|
|
265
|
+
transform: translateY(-2px);
|
|
277
266
|
}
|
|
278
267
|
|
|
279
268
|
.stat-card h3 {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
269
|
+
color: var(--gray);
|
|
270
|
+
font-size: 0.9rem;
|
|
271
|
+
font-weight: 600;
|
|
272
|
+
text-transform: uppercase;
|
|
273
|
+
letter-spacing: 0.5px;
|
|
274
|
+
margin-bottom: 0.5rem;
|
|
286
275
|
}
|
|
287
276
|
|
|
288
277
|
.stat-card .value {
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
278
|
+
font-size: 2rem;
|
|
279
|
+
font-weight: 700;
|
|
280
|
+
color: var(--dashsecondary-color);
|
|
292
281
|
}
|
|
293
282
|
|
|
294
283
|
.logs-container {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
284
|
+
background: white;
|
|
285
|
+
border-radius: 12px;
|
|
286
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
287
|
+
overflow: hidden;
|
|
299
288
|
}
|
|
300
289
|
|
|
301
290
|
.logs-header {
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
291
|
+
background: var(--light);
|
|
292
|
+
padding: 1.5rem;
|
|
293
|
+
border-bottom: 1px solid #e0e0e0;
|
|
305
294
|
}
|
|
306
295
|
|
|
307
296
|
.logs-header h2 {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
297
|
+
color: var(--dark);
|
|
298
|
+
font-size: 1.3rem;
|
|
299
|
+
font-weight: 600;
|
|
311
300
|
}
|
|
312
301
|
|
|
313
302
|
.logs-table {
|
|
314
|
-
|
|
315
|
-
|
|
303
|
+
width: 100%;
|
|
304
|
+
border-collapse: collapse;
|
|
316
305
|
}
|
|
317
306
|
|
|
318
307
|
.logs-table th,
|
|
319
308
|
.logs-table td {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
309
|
+
padding: 1rem;
|
|
310
|
+
text-align: left;
|
|
311
|
+
border-bottom: 1px solid #f0f0f0;
|
|
323
312
|
}
|
|
324
313
|
|
|
325
314
|
.logs-table th {
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
315
|
+
background: var(--light);
|
|
316
|
+
font-weight: 600;
|
|
317
|
+
color: var(--dark);
|
|
318
|
+
font-size: 0.9rem;
|
|
319
|
+
text-transform: uppercase;
|
|
320
|
+
letter-spacing: 0.5px;
|
|
332
321
|
}
|
|
333
322
|
|
|
334
323
|
.logs-table tr:hover {
|
|
335
|
-
|
|
324
|
+
background: #f8f9fa;
|
|
336
325
|
}
|
|
337
326
|
|
|
338
327
|
.activity-badge {
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
328
|
+
padding: 4px 12px;
|
|
329
|
+
border-radius: 20px;
|
|
330
|
+
font-size: 0.8rem;
|
|
331
|
+
font-weight: 600;
|
|
332
|
+
text-transform: uppercase;
|
|
333
|
+
letter-spacing: 0.5px;
|
|
345
334
|
}
|
|
346
335
|
|
|
347
336
|
.badge-login {
|
|
348
|
-
|
|
349
|
-
|
|
337
|
+
background: var(--success);
|
|
338
|
+
color: white;
|
|
350
339
|
}
|
|
351
340
|
|
|
352
341
|
.badge-logout {
|
|
353
|
-
|
|
354
|
-
|
|
342
|
+
background: var(--gray);
|
|
343
|
+
color: white;
|
|
355
344
|
}
|
|
356
345
|
|
|
357
346
|
.badge-create {
|
|
358
|
-
|
|
359
|
-
|
|
347
|
+
background: var(--dashprimary-color);
|
|
348
|
+
color: white;
|
|
360
349
|
}
|
|
361
350
|
|
|
362
351
|
.badge-update {
|
|
363
|
-
|
|
364
|
-
|
|
352
|
+
background: var(--warning);
|
|
353
|
+
color: white;
|
|
365
354
|
}
|
|
366
355
|
|
|
367
356
|
.badge-delete {
|
|
368
|
-
|
|
369
|
-
|
|
357
|
+
background: var(--danger);
|
|
358
|
+
color: white;
|
|
370
359
|
}
|
|
371
360
|
|
|
372
361
|
.badge-danger {
|
|
373
|
-
|
|
362
|
+
color: var(--danger);
|
|
374
363
|
}
|
|
375
364
|
|
|
376
365
|
.badge-view {
|
|
377
|
-
|
|
378
|
-
|
|
366
|
+
background: var(--maitsecondary);
|
|
367
|
+
color: white;
|
|
379
368
|
}
|
|
380
369
|
|
|
381
370
|
.pagination {
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
371
|
+
display: flex;
|
|
372
|
+
justify-content: center;
|
|
373
|
+
align-items: center;
|
|
374
|
+
gap: 0.5rem;
|
|
375
|
+
padding: 1.5rem;
|
|
376
|
+
background: var(--light);
|
|
388
377
|
}
|
|
389
378
|
|
|
390
379
|
.pagination button {
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
380
|
+
padding: 8px 12px;
|
|
381
|
+
border: 1px solid #e0e0e0;
|
|
382
|
+
background: white;
|
|
383
|
+
border-radius: 6px;
|
|
384
|
+
cursor: pointer;
|
|
385
|
+
transition: all 0.3s ease;
|
|
397
386
|
}
|
|
398
387
|
|
|
399
388
|
.pagination button:hover {
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
389
|
+
background: var(--primary);
|
|
390
|
+
color: white;
|
|
391
|
+
border-color: var(--primary);
|
|
403
392
|
}
|
|
404
393
|
|
|
405
394
|
.pagination button.active {
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
395
|
+
background: var(--primary);
|
|
396
|
+
color: white;
|
|
397
|
+
border-color: var(--primary);
|
|
409
398
|
}
|
|
410
399
|
|
|
411
400
|
.pagination button:disabled {
|
|
412
|
-
|
|
413
|
-
|
|
401
|
+
opacity: 0.5;
|
|
402
|
+
cursor: not-allowed;
|
|
414
403
|
}
|
|
415
404
|
|
|
416
405
|
.no-logs {
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
406
|
+
text-align: center;
|
|
407
|
+
padding: 3rem;
|
|
408
|
+
color: var(--gray);
|
|
420
409
|
}
|
|
421
410
|
|
|
422
411
|
.no-logs h3 {
|
|
423
|
-
|
|
424
|
-
|
|
412
|
+
font-size: 1.5rem;
|
|
413
|
+
margin-bottom: 1rem;
|
|
425
414
|
}
|
|
426
415
|
|
|
427
416
|
.loading {
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
417
|
+
text-align: center;
|
|
418
|
+
padding: 3rem;
|
|
419
|
+
color: var(--gray);
|
|
431
420
|
}
|
|
432
421
|
|
|
433
422
|
.spinner {
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
423
|
+
border: 3px solid #f3f3f3;
|
|
424
|
+
border-top: 3px solid var(--primary);
|
|
425
|
+
border-radius: 50%;
|
|
426
|
+
width: 40px;
|
|
427
|
+
height: 40px;
|
|
428
|
+
animation: spin 1s linear infinite;
|
|
429
|
+
margin: 0 auto 1rem;
|
|
441
430
|
}
|
|
442
431
|
|
|
443
432
|
@keyframes spin {
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
433
|
+
0% {
|
|
434
|
+
transform: rotate(0deg);
|
|
435
|
+
}
|
|
447
436
|
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
437
|
+
100% {
|
|
438
|
+
transform: rotate(360deg);
|
|
439
|
+
}
|
|
451
440
|
}
|
|
452
441
|
|
|
453
442
|
@media (max-width: 768px) {
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
443
|
+
.a-controls {
|
|
444
|
+
flex-direction: column;
|
|
445
|
+
align-items: stretch;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.a-search-box {
|
|
449
|
+
min-width: 100%;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.stats-grid {
|
|
453
|
+
grid-template-columns: 1fr;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.logs-table {
|
|
457
|
+
font-size: 0.9rem;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.logs-table th,
|
|
461
|
+
.logs-table td {
|
|
462
|
+
padding: 0.5rem;
|
|
463
|
+
}
|
|
475
464
|
}
|
|
476
465
|
</style>
|