feat: add Settings page with hijri seasons CRUD

- Server: seasons CRUD routes + generic NocoDB helpers
- Client: Settings page at /settings with inline add/edit/delete
- Seasons stored in NocoDB Seasons table
- Vite proxy: /api/seasons routed to Express server
- Nav links added (desktop + mobile)
- Locale keys for EN + AR
- Seasons loaded non-blocking on app mount

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
fahed
2026-03-31 16:03:50 +03:00
parent 1dd216f933
commit ef48372033
11 changed files with 477 additions and 6 deletions

View File

@@ -851,6 +851,102 @@ table tbody tr:hover {
accent-color: var(--accent);
}
/* Settings page */
.settings-page {
padding: 24px;
max-width: 900px;
}
.settings-hint {
color: var(--text-secondary);
font-size: 0.875rem;
margin-bottom: 16px;
}
.season-chip {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 600;
border: 1px solid;
}
.season-edit-name {
display: flex;
gap: 6px;
align-items: center;
}
.season-edit-name input[type="text"] {
flex: 1;
min-width: 80px;
}
.season-edit-name input[type="color"] {
width: 32px;
height: 32px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
}
.season-actions {
display: flex;
gap: 6px;
}
.btn-small {
padding: 4px 10px;
font-size: 0.75rem;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-primary);
cursor: pointer;
}
.btn-small:hover {
background: var(--hover);
}
.btn-small.btn-primary {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.btn-small.btn-danger {
color: var(--danger, #dc2626);
border-color: var(--danger, #dc2626);
}
.btn-small.btn-danger:hover {
background: var(--danger, #dc2626);
color: white;
}
tr.add-row td {
border-top: 2px dashed var(--border);
padding-top: 12px;
}
tr.editing td {
background: var(--hover);
}
.settings-page input[type="text"],
.settings-page input[type="number"],
.settings-page input[type="date"] {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 0.8125rem;
background: var(--surface);
color: var(--text-primary);
}
.period-display {
background: var(--bg);
padding: 16px;