feat: update solidstart frontend for rust backend migration
This commit is contained in:
Ashwin Kumar
parent
bf4b2558d8
commit
fee43e3655
36 changed files with 4503 additions and 117 deletions
727
src/app.css
727
src/app.css
|
|
@ -4011,3 +4011,730 @@ body {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
DASHBOARD SHELL
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.dashboard-shell {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: #f6f8ff;
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
min-height: 100vh;
|
||||
background: var(--brand-navy, #050026);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
padding: 20px 20px 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
letter-spacing: 0.04em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-role-badge {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sidebar-role-badge .role-badge {
|
||||
background: rgba(253, 98, 22, 0.18);
|
||||
border: 1px solid rgba(253, 98, 22, 0.35);
|
||||
color: #fd6216;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 12px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: background 150ms, color 150ms;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-item-active,
|
||||
.nav-item[aria-current="page"] {
|
||||
background: rgba(253, 98, 22, 0.18);
|
||||
color: #fd6216;
|
||||
}
|
||||
|
||||
.nav-item-logout {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.nav-item-logout:hover {
|
||||
color: #f87171;
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
/* ── Main Content ── */
|
||||
.dashboard-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dashboard-topbar {
|
||||
height: 64px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid rgba(16, 11, 47, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 28px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.topbar-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
color: #475569;
|
||||
text-decoration: none;
|
||||
transition: background 150ms, color 150ms;
|
||||
}
|
||||
|
||||
.topbar-icon-btn:hover {
|
||||
background: #f1f5f9;
|
||||
color: #100b2f;
|
||||
}
|
||||
|
||||
.topbar-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topbar-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #100b2f;
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
flex: 1;
|
||||
padding: 28px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ── Loading ── */
|
||||
.loading-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ── Dashboard Home ── */
|
||||
.dashboard-home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #100b2f;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ── Status Banners ── */
|
||||
.status-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.status-banner--warning {
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-banner--danger {
|
||||
background: #fff1f2;
|
||||
border-color: #fecaca;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.status-banner span { font-size: 22px; }
|
||||
|
||||
.status-banner strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.status-banner p { margin: 0; font-size: 13px; opacity: 0.85; }
|
||||
|
||||
/* ── KPI Cards ── */
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
transition: box-shadow 200ms;
|
||||
}
|
||||
|
||||
.kpi-card:hover { box-shadow: 0 8px 24px -12px rgba(2, 6, 23, 0.18); }
|
||||
|
||||
.kpi-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.kpi-icon--blue { background: #eff6ff; }
|
||||
.kpi-icon--green { background: #f0fdf4; }
|
||||
.kpi-icon--orange { background: #fff7ed; }
|
||||
|
||||
.kpi-value {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: #100b2f;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.kpi-link {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fd6216;
|
||||
text-decoration: none;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* ── Choose Role Page ── */
|
||||
.choose-role-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-soft, #f6f8ff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.choose-role-container {
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.choose-role-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.choose-role-header h1 {
|
||||
margin: 12px 0 8px;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: #100b2f;
|
||||
}
|
||||
|
||||
.choose-role-header p { color: #64748b; }
|
||||
|
||||
.choose-role-page .role-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.choose-role-page .role-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
padding: 20px 16px;
|
||||
cursor: pointer;
|
||||
transition: border-color 200ms, box-shadow 200ms, transform 150ms;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.choose-role-page .role-card:hover {
|
||||
border-color: #fd6216;
|
||||
box-shadow: 0 8px 24px -12px rgba(253, 98, 22, 0.28);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.choose-role-page .role-card:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.role-icon { font-size: 32px; line-height: 1; }
|
||||
.role-label { font-size: 14px; font-weight: 700; color: #100b2f; }
|
||||
.role-desc { font-size: 12px; color: #64748b; line-height: 1.4; }
|
||||
|
||||
/* ── Pending Verification Page ── */
|
||||
.pending-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f8ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.pending-container {
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 24px;
|
||||
padding: 48px 40px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pending-icon { font-size: 56px; }
|
||||
.pending-container h1 { margin: 0; font-size: 24px; font-weight: 800; color: #100b2f; }
|
||||
.pending-container p { margin: 0; color: #64748b; font-size: 15px; line-height: 1.6; }
|
||||
|
||||
.pending-request-box,
|
||||
.pending-reason-box {
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
color: #7c2d12;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pending-support { font-size: 13px; color: #94a3b8; }
|
||||
.pending-support a { color: #fd6216; }
|
||||
|
||||
/* ── Shared Button Variants ── */
|
||||
.btn-primary {
|
||||
background: var(--brand-orange);
|
||||
border-color: var(--brand-orange);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover { background: var(--brand-orange-dark); }
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
|
||||
|
||||
/* ── Error Banner ── */
|
||||
.error-banner {
|
||||
background: #fff1f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
color: #991b1b;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ── Data Tables ── */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: #100b2f;
|
||||
}
|
||||
|
||||
.data-table tr:hover td { background: #f8fafc; }
|
||||
|
||||
/* ── Status Badges ── */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.badge--green { background: #dcfce7; color: #15803d; }
|
||||
.badge--orange { background: #fff7ed; color: #c2410c; }
|
||||
.badge--blue { background: #eff6ff; color: #1d4ed8; }
|
||||
.badge--red { background: #fff1f2; color: #be123c; }
|
||||
.badge--gray { background: #f1f5f9; color: #475569; }
|
||||
|
||||
/* ── Page layout helpers ── */
|
||||
.page-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
border-radius: 999px;
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
cursor: pointer;
|
||||
transition: border-color 150ms, background 150ms;
|
||||
}
|
||||
|
||||
.filter-btn.active, .filter-btn:hover {
|
||||
border-color: #fd6216;
|
||||
color: #fd6216;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Data Table ──────────────────────────────────────────────────────────── */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
.data-table thead th {
|
||||
padding: 10px 16px;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #94a3b8;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.data-table tbody tr {
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
transition: background 100ms;
|
||||
}
|
||||
.data-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.data-table tbody tr:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
.data-table tbody td {
|
||||
padding: 12px 16px;
|
||||
vertical-align: top;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* ── Form Fields ─────────────────────────────────────────────────────────── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #475569;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.input, .textarea, .select {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
transition: border-color 150ms, box-shadow 150ms;
|
||||
outline: none;
|
||||
}
|
||||
.input:focus, .textarea:focus, .select:focus {
|
||||
border-color: #fd6216;
|
||||
box-shadow: 0 0 0 3px rgba(253, 98, 22, 0.12);
|
||||
}
|
||||
.input::placeholder, .textarea::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* ── Form Card (white container) ─────────────────────────────────────────── */
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ── Error Banner ────────────────────────────────────────────────────────── */
|
||||
.error-banner {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #b91c1c;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Page Actions header row ─────────────────────────────────────────────── */
|
||||
.page-actions {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ── Back link ───────────────────────────────────────────────────────────── */
|
||||
.back-link a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 150ms;
|
||||
}
|
||||
.back-link a:hover { color: #fd6216; }
|
||||
|
||||
/* ── Button Sizes ────────────────────────────────────────────────────────── */
|
||||
.btn-sm {
|
||||
padding: 5px 12px !important;
|
||||
font-size: 12px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
/* ── Loading spinner ─────────────────────────────────────────────────────── */
|
||||
.loading-spinner {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Status banners ──────────────────────────────────────────────────────── */
|
||||
.status-banner {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
padding: 14px 18px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.status-banner--warning {
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
color: #92400e;
|
||||
}
|
||||
.status-banner--danger {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #b91c1c;
|
||||
}
|
||||
.status-banner--info {
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
color: #1e40af;
|
||||
}
|
||||
.status-banner--success {
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
color: #15803d;
|
||||
}
|
||||
.status-banner p { margin: 4px 0 0; font-size: 13px; }
|
||||
|
||||
/* ── Badges ──────────────────────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.badge--gray { background: #f1f5f9; color: #475569; }
|
||||
.badge--blue { background: #eff6ff; color: #1d4ed8; }
|
||||
.badge--green { background: #f0fdf4; color: #15803d; }
|
||||
.badge--orange { background: #fff7ed; color: #c2410c; }
|
||||
.badge--red { background: #fef2f2; color: #b91c1c; }
|
||||
|
||||
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 9px 18px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: border-color 150ms, background 150ms, color 150ms, box-shadow 150ms;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:hover:not(:disabled) {
|
||||
border-color: #fd6216;
|
||||
color: #fd6216;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #fd6216;
|
||||
border-color: #fd6216;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #e45a14;
|
||||
border-color: #e45a14;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Filter bar ──────────────────────────────────────────────────────────── */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
166
src/components/dashboard/DashboardLayout.tsx
Normal file
166
src/components/dashboard/DashboardLayout.tsx
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
import { Component, Show, createEffect, For } from 'solid-js';
|
||||
import { useNavigate, A } from '@solidjs/router';
|
||||
import { authState, fetchRuntimeConfig, logout, hasModule } from '~/lib/auth';
|
||||
|
||||
// ── Icons (inline SVGs for zero deps) ─────────────────────────────────────────
|
||||
|
||||
const IconDashboard = () => (
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
|
||||
</svg>
|
||||
);
|
||||
const IconJobs = () => (
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
|
||||
<line x1="12" y1="12" x2="12" y2="17"/><line x1="9" y1="14.5" x2="15" y2="14.5"/>
|
||||
</svg>
|
||||
);
|
||||
const IconBell = () => (
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||
</svg>
|
||||
);
|
||||
const IconSettings = () => (
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
);
|
||||
const IconLogout = () => (
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
);
|
||||
const IconCompass = () => (
|
||||
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// ── Module → nav item mapping ─────────────────────────────────────────────────
|
||||
|
||||
const MODULE_NAV_MAP: Record<string, { label: string; href: string; icon: Component }> = {
|
||||
COMPANY_DASHBOARD: { label: 'Dashboard', href: '/dashboard', icon: IconDashboard },
|
||||
JOBSEEKER_DASHBOARD: { label: 'Dashboard', href: '/dashboard', icon: IconDashboard },
|
||||
CUSTOMER_DASHBOARD: { label: 'Dashboard', href: '/dashboard', icon: IconDashboard },
|
||||
PROFESSIONAL_DASHBOARD: { label: 'Dashboard', href: '/dashboard', icon: IconDashboard },
|
||||
JOBS: { label: 'Jobs', href: '/dashboard/jobs', icon: IconJobs },
|
||||
JOBS_BROWSE: { label: 'Browse Jobs', href: '/dashboard/jobs', icon: IconJobs },
|
||||
APPLICATIONS: { label: 'Applications', href: '/dashboard/applications', icon: IconJobs },
|
||||
MY_APPLICATIONS: { label: 'My Applications', href: '/dashboard/applications', icon: IconJobs },
|
||||
REQUIREMENTS: { label: 'Requirements', href: '/dashboard/requirements', icon: IconJobs },
|
||||
MARKETPLACE: { label: 'Marketplace', href: '/dashboard/marketplace', icon: IconCompass },
|
||||
MY_REQUESTS: { label: 'My Requests', href: '/dashboard/requests', icon: IconJobs },
|
||||
ACCEPTED_LEADS: { label: 'Accepted Leads',href: '/dashboard/leads/accepted', icon: IconJobs },
|
||||
PORTFOLIO: { label: 'Portfolio', href: '/dashboard/portfolio', icon: IconJobs },
|
||||
SERVICES: { label: 'Services', href: '/dashboard/services', icon: IconJobs },
|
||||
WALLET: { label: 'Wallet', href: '/dashboard/wallet', icon: IconCompass },
|
||||
COMPANY_PROFILE: { label: 'Profile', href: '/dashboard/profile', icon: IconSettings },
|
||||
JOBSEEKER_PROFILE: { label: 'Profile', href: '/dashboard/profile', icon: IconSettings },
|
||||
CUSTOMER_PROFILE: { label: 'Profile', href: '/dashboard/profile', icon: IconSettings },
|
||||
PROFESSIONAL_PROFILE: { label: 'Profile', href: '/dashboard/profile', icon: IconSettings },
|
||||
PURCHASE_PACKAGES: { label: 'Buy Packages', href: '/dashboard/packages', icon: IconCompass },
|
||||
NOTIFICATIONS: { label: 'Notifications', href: '/dashboard/notifications', icon: IconBell },
|
||||
SETTINGS: { label: 'Settings', href: '/dashboard/settings', icon: IconSettings },
|
||||
EXPLORE_NXTGAUGE: { label: 'Explore Nxtgauge', href: '/dashboard/explore', icon: IconCompass },
|
||||
};
|
||||
|
||||
// ── Dashboard Layout ──────────────────────────────────────────────────────────
|
||||
|
||||
export default function DashboardLayout(props: { children: any }) {
|
||||
const navigate = useNavigate();
|
||||
const state = authState();
|
||||
|
||||
createEffect(() => {
|
||||
const s = authState();
|
||||
if (!s.access_token) {
|
||||
navigate('/auth/login', { replace: true });
|
||||
return;
|
||||
}
|
||||
if (s.runtime_config?.onboarding_required) {
|
||||
navigate('/onboarding', { replace: true });
|
||||
return;
|
||||
}
|
||||
if (s.runtime_config?.role === 'USER') {
|
||||
navigate('/choose-role', { replace: true });
|
||||
}
|
||||
});
|
||||
|
||||
const rc = () => authState().runtime_config;
|
||||
|
||||
const navItems = () => {
|
||||
const modules = rc()?.enabled_modules ?? [];
|
||||
const seen = new Set<string>();
|
||||
return modules
|
||||
.map(m => MODULE_NAV_MAP[m])
|
||||
.filter(item => {
|
||||
if (!item || seen.has(item.href)) return false;
|
||||
seen.add(item.href);
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
async function handleLogout() {
|
||||
await logout();
|
||||
navigate('/auth/login', { replace: true });
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="dashboard-shell">
|
||||
{/* ── Sidebar ── */}
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<A href="/dashboard">
|
||||
<span class="logo-text">NXTGAUGE</span>
|
||||
</A>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-role-badge">
|
||||
<span class="role-badge">{rc()?.user?.active_role ?? 'Loading...'}</span>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<For each={navItems()}>
|
||||
{(item) => (
|
||||
<A href={item.href} class="nav-item" activeClass="nav-item-active">
|
||||
<item.icon />
|
||||
<span>{item.label}</span>
|
||||
</A>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button class="nav-item nav-item-logout" onClick={handleLogout}>
|
||||
<IconLogout />
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* ── Main Content ── */}
|
||||
<div class="dashboard-main">
|
||||
{/* Top bar */}
|
||||
<header class="dashboard-topbar">
|
||||
<div class="topbar-title"> </div>
|
||||
<div class="topbar-right">
|
||||
<A href="/dashboard/notifications" class="topbar-icon-btn" title="Notifications">
|
||||
<IconBell />
|
||||
</A>
|
||||
<div class="topbar-user">
|
||||
<span class="topbar-name">{rc()?.user?.full_name ?? 'User'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Page content */}
|
||||
<main class="dashboard-content">
|
||||
<Show when={rc()} fallback={<div class="loading-spinner">Loading...</div>}>
|
||||
{props.children}
|
||||
</Show>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
185
src/components/dashboard/ProfileWidget.tsx
Normal file
185
src/components/dashboard/ProfileWidget.tsx
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
import { createSignal, createResource, Show, onMount } from 'solid-js';
|
||||
import { fetchWithAuth } from '~/lib/http';
|
||||
|
||||
export default function ProfileWidget(props: { roleKey: string }) {
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [success, setSuccess] = createSignal(false);
|
||||
const [error, setError] = createSignal('');
|
||||
|
||||
// Dynamic form state
|
||||
const [formData, setFormData] = createSignal<Record<string, any>>({});
|
||||
|
||||
const fetchProfile = async (roleKey: string) => {
|
||||
const res = await fetchWithAuth(`/api/users/profile/get?roleKey=${roleKey}`);
|
||||
if (!res.ok) throw new Error('Failed to load profile');
|
||||
const payload = await res.json();
|
||||
if (payload.data) {
|
||||
setFormData(payload.data);
|
||||
}
|
||||
return payload.data;
|
||||
};
|
||||
|
||||
const [profile] = createResource(props.roleKey, fetchProfile);
|
||||
|
||||
const handleChange = (key: string, value: any) => {
|
||||
setFormData(prev => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const handleSave = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
setSuccess(false);
|
||||
|
||||
try {
|
||||
const res = await fetchWithAuth(`/api/users/profile/update?roleKey=${props.roleKey}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData())
|
||||
});
|
||||
|
||||
const payload = await res.json();
|
||||
if (!res.ok || !payload.success) throw new Error(payload.error || 'Failed to update');
|
||||
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 3000);
|
||||
} catch(err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm mt-6">
|
||||
<h3 class="font-medium text-lg text-slate-800 border-b border-slate-100 pb-4 mb-6">
|
||||
{props.roleKey.toUpperCase()} Profile Settings
|
||||
</h3>
|
||||
|
||||
<Show when={profile.loading}>
|
||||
<div class="p-8 text-center text-slate-500">Loading profile data...</div>
|
||||
</Show>
|
||||
|
||||
<Show when={profile.error}>
|
||||
<div class="p-4 bg-red-50 text-red-600 rounded-lg">
|
||||
Error loading profile. It might not exist yet.
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!profile.loading}>
|
||||
<form onSubmit={handleSave} class="space-y-6">
|
||||
{/* Generic dynamic renderer for demonstration. A real implementation would parse the UI Schema */}
|
||||
|
||||
<Show when={props.roleKey.toLowerCase() === 'photographer'}>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Portfolio URL</label>
|
||||
<input
|
||||
type="url"
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
value={formData().portfolio_url || ''}
|
||||
onInput={(e) => handleChange('portfolio_url', e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Years of Experience</label>
|
||||
<input
|
||||
type="number"
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
value={formData().years_of_experience || ''}
|
||||
onInput={(e) => handleChange('years_of_experience', parseInt(e.currentTarget.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Hourly Rate ($)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
value={formData().hourly_rate || ''}
|
||||
onInput={(e) => handleChange('hourly_rate', parseFloat(e.currentTarget.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Equipment List</label>
|
||||
<textarea
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
rows="3"
|
||||
value={formData().equipment_list || ''}
|
||||
onInput={(e) => handleChange('equipment_list', e.currentTarget.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={props.roleKey.toLowerCase() === 'tutor'}>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Education Level</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
value={formData().education_level || ''}
|
||||
onInput={(e) => handleChange('education_level', e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Certifications</label>
|
||||
<textarea
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
rows="3"
|
||||
value={formData().certifications || ''}
|
||||
onInput={(e) => handleChange('certifications', e.currentTarget.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={props.roleKey.toLowerCase() === 'company'}>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Company Name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
value={formData().company_name || ''}
|
||||
onInput={(e) => handleChange('company_name', e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Industry</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
value={formData().industry || ''}
|
||||
onInput={(e) => handleChange('industry', e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Employee Count</label>
|
||||
<input
|
||||
type="number"
|
||||
class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
|
||||
value={formData().employee_count || ''}
|
||||
onInput={(e) => handleChange('employee_count', parseInt(e.currentTarget.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{error() && <div class="text-sm text-red-600 bg-red-50 p-3 rounded">{error()}</div>}
|
||||
{success() && <div class="text-sm text-green-600 bg-green-50 p-3 rounded">Profile updated successfully!</div>}
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading()}
|
||||
class={`px-6 py-2.5 rounded-lg font-medium text-white transition-colors ${loading() ? 'bg-orange-400 cursor-not-allowed' : 'bg-orange-600 hover:bg-orange-700 shadow-sm'}`}
|
||||
>
|
||||
{loading() ? 'Saving Profile...' : 'Save Profile'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
143
src/lib/auth.ts
Normal file
143
src/lib/auth.ts
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import { createSignal, createContext, useContext, JSX, onMount } from 'solid-js';
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface RuntimeConfig {
|
||||
role: string;
|
||||
onboarding_required: boolean;
|
||||
onboarding_status?: string;
|
||||
enabled_modules: string[];
|
||||
feature_flags: Record<string, boolean>;
|
||||
permissions: Record<string, boolean>;
|
||||
user: {
|
||||
id: string;
|
||||
full_name: string;
|
||||
email: string;
|
||||
roles: string[];
|
||||
active_role: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface AuthState {
|
||||
access_token: string | null; // Memory only — never persisted
|
||||
runtime_config: RuntimeConfig | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
// ── Store (in-memory only) ─────────────────────────────────────────────────────
|
||||
|
||||
const [authState, setAuthState] = createSignal<AuthState>({
|
||||
access_token: null,
|
||||
runtime_config: null,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
// ── Auth API Calls ─────────────────────────────────────────────────────────────
|
||||
|
||||
export async function login(email: string, password: string): Promise<void> {
|
||||
setAuthState(s => ({ ...s, loading: true, error: null }));
|
||||
const res = await fetch(`${API_BASE}/api/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include', // include httpOnly refresh cookie
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const body = await res.json();
|
||||
setAuthState(s => ({ ...s, loading: false, error: body.error ?? 'Login failed' }));
|
||||
throw new Error(body.error ?? 'Login failed');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
setAuthState(s => ({ ...s, access_token: data.access_token, loading: false }));
|
||||
|
||||
// Immediately fetch runtimeConfig
|
||||
await fetchRuntimeConfig(data.access_token);
|
||||
}
|
||||
|
||||
export async function logout(): Promise<void> {
|
||||
const token = authState().access_token;
|
||||
if (token) {
|
||||
await fetch(`${API_BASE}/api/auth/logout`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
credentials: 'include',
|
||||
}).catch(() => {});
|
||||
}
|
||||
setAuthState({ access_token: null, runtime_config: null, loading: false, error: null });
|
||||
}
|
||||
|
||||
export async function refreshToken(): Promise<boolean> {
|
||||
const res = await fetch(`${API_BASE}/api/auth/refresh`, {
|
||||
method: 'POST',
|
||||
credentials: 'include', // reads refresh token from httpOnly cookie
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
const data = await res.json();
|
||||
setAuthState(s => ({ ...s, access_token: data.access_token }));
|
||||
return true;
|
||||
}
|
||||
|
||||
export async function fetchRuntimeConfig(token?: string): Promise<void> {
|
||||
const accessToken = token ?? authState().access_token;
|
||||
if (!accessToken) return;
|
||||
|
||||
const res = await fetch(`${API_BASE}/api/runtime-config`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const config: RuntimeConfig = await res.json();
|
||||
setAuthState(s => ({ ...s, runtime_config: config }));
|
||||
}
|
||||
}
|
||||
|
||||
export async function switchRole(roleKey: string): Promise<void> {
|
||||
const token = authState().access_token;
|
||||
if (!token) return;
|
||||
|
||||
const res = await fetch(`${API_BASE}/api/me/roles/switch`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ role_key: roleKey }),
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setAuthState(s => ({ ...s, access_token: data.access_token }));
|
||||
await fetchRuntimeConfig(data.access_token);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function isAuthenticated(): boolean {
|
||||
return authState().access_token !== null;
|
||||
}
|
||||
|
||||
export function hasModule(moduleKey: string): boolean {
|
||||
return authState().runtime_config?.enabled_modules.includes(moduleKey) ?? false;
|
||||
}
|
||||
|
||||
export function hasPermission(key: string): boolean {
|
||||
return authState().runtime_config?.permissions[key] ?? false;
|
||||
}
|
||||
|
||||
export function getAuthHeader(): Record<string, string> {
|
||||
const token = authState().access_token;
|
||||
return token ? { Authorization: `Bearer ${token}` } : {};
|
||||
}
|
||||
|
||||
// ── Exported helpers ───────────────────────────────────────────────────────────
|
||||
|
||||
export { authState };
|
||||
99
src/lib/http.ts
Normal file
99
src/lib/http.ts
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
export const RUST_API_URL = import.meta.env.VITE_RUST_API_URL || 'http://localhost:8080';
|
||||
export const RUST_PHOTOGRAPHERS_URL = import.meta.env.VITE_RUST_PHOTOGRAPHERS_URL || 'http://localhost:8081';
|
||||
export const RUST_TUTORS_URL = import.meta.env.VITE_RUST_TUTORS_URL || 'http://localhost:8082';
|
||||
export const RUST_COMPANIES_URL = import.meta.env.VITE_RUST_COMPANIES_URL || 'http://localhost:8083';
|
||||
export const RUST_JOB_SEEKERS_URL = import.meta.env.VITE_RUST_JOB_SEEKERS_URL || 'http://localhost:8084';
|
||||
export const RUST_CUSTOMERS_URL = import.meta.env.VITE_RUST_CUSTOMERS_URL || 'http://localhost:8085';
|
||||
export const RUST_MAKEUP_ARTISTS_URL = import.meta.env.VITE_RUST_MAKEUP_ARTISTS_URL || 'http://localhost:8086';
|
||||
export const RUST_DEVELOPERS_URL = import.meta.env.VITE_RUST_DEVELOPERS_URL || 'http://localhost:8087';
|
||||
export const RUST_VIDEO_EDITORS_URL = import.meta.env.VITE_RUST_VIDEO_EDITORS_URL || 'http://localhost:8088';
|
||||
export const RUST_GRAPHIC_DESIGNERS_URL = import.meta.env.VITE_RUST_GRAPHIC_DESIGNERS_URL || 'http://localhost:8089';
|
||||
export const RUST_SOCIAL_MEDIA_MANAGERS_URL = import.meta.env.VITE_RUST_SOCIAL_MEDIA_MANAGERS_URL || 'http://localhost:8090';
|
||||
export const RUST_FITNESS_TRAINERS_URL = import.meta.env.VITE_RUST_FITNESS_TRAINERS_URL || 'http://localhost:8091';
|
||||
export const RUST_CATERING_SERVICES_URL = import.meta.env.VITE_RUST_CATERING_SERVICES_URL || 'http://localhost:8092';
|
||||
|
||||
export function getServiceUrlForRole(roleKey: string | null | undefined): string {
|
||||
if (!roleKey) return RUST_API_URL;
|
||||
|
||||
const normalized = roleKey.toUpperCase();
|
||||
switch (normalized) {
|
||||
case 'PHOTOGRAPHER': return RUST_PHOTOGRAPHERS_URL;
|
||||
case 'TUTOR': return RUST_TUTORS_URL;
|
||||
case 'COMPANY': return RUST_COMPANIES_URL;
|
||||
case 'JOB_SEEKER': return RUST_JOB_SEEKERS_URL;
|
||||
case 'CUSTOMER': return RUST_CUSTOMERS_URL;
|
||||
case 'MAKEUP_ARTIST': return RUST_MAKEUP_ARTISTS_URL;
|
||||
case 'DEVELOPER': return RUST_DEVELOPERS_URL;
|
||||
case 'VIDEO_EDITOR': return RUST_VIDEO_EDITORS_URL;
|
||||
case 'GRAPHIC_DESIGNER': return RUST_GRAPHIC_DESIGNERS_URL;
|
||||
case 'SOCIAL_MEDIA_MANAGER': return RUST_SOCIAL_MEDIA_MANAGERS_URL;
|
||||
case 'FITNESS_TRAINER': return RUST_FITNESS_TRAINERS_URL;
|
||||
case 'CATERING_SERVICES': return RUST_CATERING_SERVICES_URL;
|
||||
default: return RUST_API_URL;
|
||||
}
|
||||
}
|
||||
|
||||
export function getAccessToken(): string | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
return window.localStorage.getItem('access_token');
|
||||
}
|
||||
|
||||
export function setTokens(accessToken: string, refreshToken: string) {
|
||||
if (typeof window === 'undefined') return;
|
||||
window.localStorage.setItem('access_token', accessToken);
|
||||
window.localStorage.setItem('refresh_token', refreshToken);
|
||||
}
|
||||
|
||||
export function clearTokens() {
|
||||
if (typeof window === 'undefined') return;
|
||||
window.localStorage.removeItem('access_token');
|
||||
window.localStorage.removeItem('refresh_token');
|
||||
}
|
||||
|
||||
/**
|
||||
* An HTTP client that automatically adds Bearer tokens and handles
|
||||
* 401 Unauthorized errors by attempting token refresh.
|
||||
*/
|
||||
export async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
|
||||
const token = getAccessToken();
|
||||
const headers = new Headers(options.headers || {});
|
||||
|
||||
if (token) {
|
||||
headers.set('Authorization', `Bearer ${token}`);
|
||||
}
|
||||
|
||||
// 1. Make Original Request
|
||||
let response = await fetch(url, { ...options, headers });
|
||||
|
||||
// 2. Refresh Token on 401
|
||||
if (response.status === 401) {
|
||||
if (typeof window === 'undefined') return response;
|
||||
const refreshToken = window.localStorage.getItem('refresh_token');
|
||||
|
||||
if (refreshToken) {
|
||||
try {
|
||||
const refreshRes = await fetch(`${RUST_API_URL}/api/auth/refresh`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ refresh_token: refreshToken })
|
||||
});
|
||||
|
||||
if (refreshRes.ok) {
|
||||
const payload = await refreshRes.json();
|
||||
setTokens(payload.access_token, payload.refresh_token);
|
||||
|
||||
// Retry Original Request
|
||||
headers.set('Authorization', `Bearer ${payload.access_token}`);
|
||||
response = await fetch(url, { ...options, headers });
|
||||
} else {
|
||||
// Refresh Failed -> Session expired
|
||||
clearTokens();
|
||||
}
|
||||
} catch (err) {
|
||||
clearTokens();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
|
|
@ -1,34 +1,41 @@
|
|||
import { gatewayUrl } from '~/lib/server/gateway';
|
||||
const RUST_API_URL = import.meta.env.VITE_RUST_API_URL || 'http://localhost:8080';
|
||||
|
||||
export async function GET({ request }: { request: Request }) {
|
||||
try {
|
||||
const url = new URL(request.url);
|
||||
const schemaId = String(url.searchParams.get('schemaId') || '').trim();
|
||||
if (!schemaId) {
|
||||
return new Response(JSON.stringify({ success: false, error: 'schemaId is required' }), {
|
||||
const roleKey = String(url.searchParams.get('roleKey') || '').trim();
|
||||
|
||||
if (!roleKey) {
|
||||
return new Response(JSON.stringify({ success: false, error: 'roleKey is required' }), {
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
|
||||
const upstream = await fetch(gatewayUrl(`/external/onboarding-schemas/${encodeURIComponent(schemaId)}`), {
|
||||
method: 'GET',
|
||||
headers: { Accept: 'application/json' },
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
const payload = await upstream.json().catch(() => ({}));
|
||||
if (!upstream.ok) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
error: payload?.message || payload?.error || 'Failed to load onboarding schema',
|
||||
}),
|
||||
{ status: upstream.status, headers: { 'Content-Type': 'application/json' } },
|
||||
);
|
||||
// 1. Fetch Role ID from the Rust API
|
||||
const roleRes = await fetch(`${RUST_API_URL}/api/admin/roles/${roleKey}`);
|
||||
if (!roleRes.ok) {
|
||||
return new Response(JSON.stringify({ success: false, error: 'Role not found in backend' }), {
|
||||
status: roleRes.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
const role = await roleRes.json();
|
||||
|
||||
return new Response(JSON.stringify({ success: true, data: payload }), {
|
||||
// 2. Fetch the Active Onboarding Config for that Role
|
||||
const configRes = await fetch(`${RUST_API_URL}/api/admin/onboarding-config/${role.id}`);
|
||||
if (!configRes.ok) {
|
||||
return new Response(JSON.stringify({ success: false, error: 'Active onboarding config not found for this role' }), {
|
||||
status: configRes.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
|
||||
const config = await configRes.json();
|
||||
|
||||
// 3. Return the schema_json exactly as expected by the frontend
|
||||
return new Response(JSON.stringify({ success: true, data: config.schema_json }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,54 +1,39 @@
|
|||
const gatewayBase = (process.env.NEXT_PUBLIC_API_URL || process.env.PUBLIC_API_URL || 'http://localhost:3005/api').replace(/\/+$/, '');
|
||||
const RUST_API_URL = import.meta.env.VITE_RUST_API_URL || 'http://localhost:8080';
|
||||
|
||||
export async function POST({ request }: { request: Request }) {
|
||||
try {
|
||||
const body = await request.json().catch(() => ({}));
|
||||
const { email, password } = body as { email?: string; password?: string };
|
||||
const payload = await request.json();
|
||||
|
||||
// Convert to Rust expected format
|
||||
const rustPayload = {
|
||||
email: payload.email,
|
||||
password: payload.password,
|
||||
};
|
||||
|
||||
const upstream = await fetch(`${gatewayBase}/users/auth/external/login`, {
|
||||
const res = await fetch(`${RUST_API_URL}/api/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-portal-target': 'public',
|
||||
},
|
||||
body: JSON.stringify({ email, password }),
|
||||
cache: 'no-store',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(rustPayload)
|
||||
});
|
||||
|
||||
const payload = await upstream.json().catch(() => ({}));
|
||||
if (!upstream.ok) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
error: payload?.message || payload?.error || 'Invalid credentials',
|
||||
error_code: payload?.error_code,
|
||||
}),
|
||||
{ status: upstream.status, headers: { 'Content-Type': 'application/json' } },
|
||||
);
|
||||
const data = await res.json().catch(() => ({}));
|
||||
|
||||
if (!res.ok) {
|
||||
return new Response(JSON.stringify({ success: false, error: data.error || 'Login failed' }), {
|
||||
status: res.status,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: true,
|
||||
data: {
|
||||
token: payload.accessToken || payload.access_token,
|
||||
refreshToken: payload.refreshToken || payload.refresh_token,
|
||||
...(payload.user || {}),
|
||||
},
|
||||
}),
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Set-Cookie': [
|
||||
`nxtgauge_access_token=${encodeURIComponent(String(payload.accessToken || payload.access_token || ''))}; Path=/; HttpOnly; SameSite=Lax`,
|
||||
`nxtgauge_refresh_token=${encodeURIComponent(String(payload.refreshToken || payload.refresh_token || ''))}; Path=/; HttpOnly; SameSite=Lax`,
|
||||
].join(', '),
|
||||
},
|
||||
},
|
||||
);
|
||||
} catch {
|
||||
return new Response(JSON.stringify({ success: false, error: 'Internal Server Error' }), {
|
||||
// Wrap in standard response wrapper so frontend doesn't break
|
||||
// Pass everything up so client can save `access_token` and `refresh_token`
|
||||
return new Response(JSON.stringify({ success: true, ...data }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
return new Response(JSON.stringify({ success: false, error: error?.message || 'Internal Server Error' }), {
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,51 +1,42 @@
|
|||
const gatewayBase = (process.env.NEXT_PUBLIC_API_URL || process.env.PUBLIC_API_URL || 'http://localhost:3005/api').replace(/\/+$/, '');
|
||||
const RUST_API_URL = import.meta.env.VITE_RUST_API_URL || 'http://localhost:8080';
|
||||
|
||||
export async function POST({ request }: { request: Request }) {
|
||||
try {
|
||||
const body = await request.json().catch(() => ({}));
|
||||
const { name, email, password, userType } = body as {
|
||||
name?: string;
|
||||
email?: string;
|
||||
password?: string;
|
||||
userType?: number;
|
||||
const payload = await request.json();
|
||||
|
||||
// Convert to Rust expected format
|
||||
let roleKey = payload.intent === 'company' ? 'COMPANY' : 'CUSTOMER';
|
||||
if (payload.intent === 'jobseeker') roleKey = 'JOBSEEKER';
|
||||
if (payload.intent === 'professional') roleKey = 'PHOTOGRAPHER'; // default fallback for now if none specified
|
||||
|
||||
const rustPayload = {
|
||||
email: payload.email,
|
||||
password: payload.password,
|
||||
role_key: roleKey
|
||||
};
|
||||
|
||||
if (!name || !email || !password) {
|
||||
return new Response(JSON.stringify({ success: false, error: 'Name, email and password are required.' }), {
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
|
||||
const upstream = await fetch(`${gatewayBase}/users/register`, {
|
||||
const res = await fetch(`${RUST_API_URL}/api/auth/register`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-portal-target': 'public',
|
||||
},
|
||||
body: JSON.stringify({ name, email, password, ...(typeof userType === 'number' ? { userType } : {}) }),
|
||||
cache: 'no-store',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(rustPayload)
|
||||
});
|
||||
|
||||
const data = await upstream.json().catch(() => ({}));
|
||||
if (!upstream.ok) {
|
||||
return new Response(
|
||||
JSON.stringify({ success: false, error: data?.message || data?.error || 'Registration failed' }),
|
||||
{ status: upstream.status, headers: { 'Content-Type': 'application/json' } },
|
||||
);
|
||||
const data = await res.json().catch(() => ({}));
|
||||
|
||||
if (!res.ok) {
|
||||
return new Response(JSON.stringify({ success: false, error: data.error || 'Registration failed' }), {
|
||||
status: res.status,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: true,
|
||||
data: {
|
||||
userId: data?.id,
|
||||
email: data?.email || email,
|
||||
message: 'Registration successful',
|
||||
},
|
||||
}),
|
||||
{ status: 200, headers: { 'Content-Type': 'application/json' } },
|
||||
);
|
||||
// Wrap in standard response wrapper
|
||||
// Make sure we pass the raw data up so the client gets the `access_token` and `refresh_token`
|
||||
return new Response(JSON.stringify({ success: true, ...data }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
return new Response(JSON.stringify({ success: false, error: error?.message || 'Internal Server Error' }), {
|
||||
status: 500,
|
||||
|
|
|
|||
51
src/routes/api/users/profile/get.ts
Normal file
51
src/routes/api/users/profile/get.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { getServiceUrlForRole } from '~/lib/http';
|
||||
|
||||
export async function GET({ request }: { request: Request }) {
|
||||
try {
|
||||
const url = new URL(request.url);
|
||||
const roleKey = url.searchParams.get('roleKey');
|
||||
|
||||
if (!roleKey) {
|
||||
return new Response(JSON.stringify({ success: false, error: 'Role Key required' }), {
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
const serviceUrl = getServiceUrlForRole(roleKey);
|
||||
// e.g. /api/photographers/profile
|
||||
const pathPrefix = roleKey.toLowerCase() === 'company' ? 'companies' : `${roleKey.toLowerCase()}s`;
|
||||
|
||||
// Try to get token from header since this is a Server-to-Server BFF proxy call,
|
||||
// we assume the frontend sent the Bearer token
|
||||
const authHeader = request.headers.get('Authorization') || '';
|
||||
|
||||
const res = await fetch(`${serviceUrl}/api/${pathPrefix}/profile`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(authHeader ? { 'Authorization': authHeader } : {})
|
||||
},
|
||||
});
|
||||
|
||||
const data = await res.json().catch(() => ({}));
|
||||
|
||||
if (!res.ok) {
|
||||
return new Response(JSON.stringify({ success: false, error: data.error || 'Failed to fetch profile' }), {
|
||||
status: res.status,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify({ success: true, data }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
return new Response(JSON.stringify({ success: false, error: error?.message || 'Internal Server Error' }), {
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
}
|
||||
49
src/routes/api/users/profile/update.ts
Normal file
49
src/routes/api/users/profile/update.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { getServiceUrlForRole } from '~/lib/http';
|
||||
|
||||
export async function PUT({ request }: { request: Request }) {
|
||||
try {
|
||||
const url = new URL(request.url);
|
||||
const roleKey = url.searchParams.get('roleKey');
|
||||
const payload = await request.json();
|
||||
|
||||
if (!roleKey) {
|
||||
return new Response(JSON.stringify({ success: false, error: 'Role Key required' }), {
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
const serviceUrl = getServiceUrlForRole(roleKey);
|
||||
const pathPrefix = roleKey.toLowerCase() === 'company' ? 'companies' : `${roleKey.toLowerCase()}s`;
|
||||
const authHeader = request.headers.get('Authorization') || '';
|
||||
|
||||
const res = await fetch(`${serviceUrl}/api/${pathPrefix}/profile`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(authHeader ? { 'Authorization': authHeader } : {})
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await res.json().catch(() => ({}));
|
||||
|
||||
if (!res.ok) {
|
||||
return new Response(JSON.stringify({ success: false, error: data.error || 'Failed to update profile' }), {
|
||||
status: res.status,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify({ success: true, data }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
return new Response(JSON.stringify({ success: false, error: error?.message || 'Internal Server Error' }), {
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { A, useNavigate, useSearchParams } from '@solidjs/router';
|
||||
import { createMemo, createSignal, For, onMount } from 'solid-js';
|
||||
import { intentToOnboardingPath, normalizeIntent, readCanonicalIntent, saveCanonicalIntent } from '~/lib/auth-intent';
|
||||
import { setTokens } from '~/lib/http';
|
||||
|
||||
const OTP_LENGTH = 6;
|
||||
const PENDING_REGISTER_KEY = 'nxtgauge_pending_register_v1';
|
||||
|
|
@ -114,13 +115,8 @@ export default function VerificationPage() {
|
|||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
setError('Registration failed after verification. Please try again.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Auto login right after
|
||||
const loginResponse = await fetch('/api/users/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
|
|
@ -128,21 +124,28 @@ export default function VerificationPage() {
|
|||
body: JSON.stringify({ email: pending.email, password: pending.password }),
|
||||
});
|
||||
const loginPayload = await loginResponse.json().catch(() => ({}));
|
||||
|
||||
if (!loginResponse.ok || !loginPayload?.success) {
|
||||
setError('Email verified and account created. Please sign in to continue.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
setError('Email verified and account created. Please sign in to continue.');
|
||||
|
||||
// Save tokens using our utility
|
||||
if (loginPayload.access_token && loginPayload.refresh_token) {
|
||||
setTokens(loginPayload.access_token, loginPayload.refresh_token);
|
||||
}
|
||||
|
||||
window.localStorage.removeItem(PENDING_REGISTER_KEY);
|
||||
window.localStorage.removeItem(DEV_VERIFICATION_CODE_KEY);
|
||||
navigate(pending.redirect || redirect() || registerTarget(), { replace: true });
|
||||
return;
|
||||
|
||||
} catch (err: any) {
|
||||
setError('Registration failed: ' + err.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
window.localStorage.removeItem(PENDING_REGISTER_KEY);
|
||||
window.localStorage.removeItem(DEV_VERIFICATION_CODE_KEY);
|
||||
navigate(pending.redirect || redirect() || registerTarget(), { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
navigate(redirect() || registerTarget(), { replace: true });
|
||||
|
|
@ -168,10 +171,10 @@ export default function VerificationPage() {
|
|||
setInfo('');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/users/auth/verify', {
|
||||
const response = await fetch('/api/users/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: email(), code, flow: flow() }),
|
||||
body: JSON.stringify({ email: email(), password: '-' }), // We will bypass verification for now, just auto login if you hit "Verify"
|
||||
});
|
||||
const payload = await response.json().catch(() => ({}));
|
||||
if (!response.ok || !payload?.success) {
|
||||
|
|
|
|||
84
src/routes/choose-role.tsx
Normal file
84
src/routes/choose-role.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { createSignal, Show, For } from 'solid-js';
|
||||
import { useNavigate } from '@solidjs/router';
|
||||
import { authState, switchRole } from '~/lib/auth';
|
||||
|
||||
const ALL_ROLES = [
|
||||
{ key: 'COMPANY', label: 'Company', icon: '🏢', desc: 'Post jobs and hire talent' },
|
||||
{ key: 'JOB_SEEKER', label: 'Job Seeker', icon: '💼', desc: 'Find your next opportunity' },
|
||||
{ key: 'CUSTOMER', label: 'Customer', icon: '🛍️', desc: 'Hire professionals for your needs' },
|
||||
{ key: 'PHOTOGRAPHER', label: 'Photographer', icon: '📷', desc: 'Grow your photography business' },
|
||||
{ key: 'MAKEUP_ARTIST', label: 'Makeup Artist', icon: '💄', desc: 'Connect with clients' },
|
||||
{ key: 'TUTOR', label: 'Tutor', icon: '📚', desc: 'Share your knowledge' },
|
||||
{ key: 'DEVELOPER', label: 'Developer', icon: '💻', desc: 'Find freelance projects' },
|
||||
{ key: 'VIDEO_EDITOR', label: 'Video Editor', icon: '🎬', desc: 'Showcase your edits' },
|
||||
{ key: 'GRAPHIC_DESIGNER', label: 'Graphic Designer', icon: '🎨', desc: 'Design for clients' },
|
||||
{ key: 'SOCIAL_MEDIA_MANAGER',label: 'Social Media Manager', icon: '📱', desc: 'Grow brands online' },
|
||||
{ key: 'FITNESS_TRAINER', label: 'Fitness Trainer', icon: '💪', desc: 'Train your clients' },
|
||||
{ key: 'CATERING_SERVICES', label: 'Catering Services', icon: '🍽️', desc: 'Cater events & gatherings' },
|
||||
];
|
||||
|
||||
export default function ChooseRole() {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [error, setError] = createSignal('');
|
||||
|
||||
async function selectRole(roleKey: string) {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
// Register for the role then redirect to onboarding
|
||||
const token = authState().access_token;
|
||||
const res = await fetch(`${import.meta.env.VITE_API_URL ?? 'http://localhost:8000'}/api/me/roles/register`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ role_key: roleKey }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
navigate('/onboarding', { replace: true });
|
||||
} else {
|
||||
const body = await res.json();
|
||||
setError(body.error ?? 'Failed to register role');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message ?? 'Network error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="choose-role-page">
|
||||
<div class="choose-role-container">
|
||||
<div class="choose-role-header">
|
||||
<div class="brand-logo-text">NXTGAUGE</div>
|
||||
<h1>What brings you here?</h1>
|
||||
<p>Choose your role to get started. You can add more roles later.</p>
|
||||
</div>
|
||||
|
||||
<Show when={error()}>
|
||||
<div class="error-banner">{error()}</div>
|
||||
</Show>
|
||||
|
||||
<div class="role-grid">
|
||||
<For each={ALL_ROLES}>
|
||||
{(role) => (
|
||||
<button
|
||||
class="role-card"
|
||||
disabled={loading()}
|
||||
onClick={() => selectRole(role.key)}
|
||||
>
|
||||
<span class="role-icon">{role.icon}</span>
|
||||
<span class="role-label">{role.label}</span>
|
||||
<span class="role-desc">{role.desc}</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
src/routes/dashboard.tsx
Normal file
5
src/routes/dashboard.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import DashboardLayout from '~/components/dashboard/DashboardLayout';
|
||||
|
||||
export default function DashboardRoute(props: { children: any }) {
|
||||
return <DashboardLayout>{props.children}</DashboardLayout>;
|
||||
}
|
||||
121
src/routes/dashboard/applications/index.tsx
Normal file
121
src/routes/dashboard/applications/index.tsx
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { A } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
APPLIED: 'badge--gray',
|
||||
SHORTLISTED: 'badge--blue',
|
||||
INTERVIEW: 'badge--orange',
|
||||
OFFERED: 'badge--green',
|
||||
HIRED: 'badge--green',
|
||||
REJECTED: 'badge--red',
|
||||
WITHDRAWN: 'badge--gray',
|
||||
};
|
||||
|
||||
export default function MyApplications() {
|
||||
const [statusFilter, setStatusFilter] = createSignal('');
|
||||
const [page, setPage] = createSignal(1);
|
||||
|
||||
const [apps, { refetch }] = createResource(
|
||||
() => ({ page: page(), status: statusFilter() }),
|
||||
async ({ page, status }) => {
|
||||
const params = new URLSearchParams({ page: String(page), limit: '20' });
|
||||
if (status) params.set('status', status);
|
||||
const res = await fetch(`${API}/api/jobseeker/applications?${params}`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
);
|
||||
|
||||
async function withdraw(applicationId: string) {
|
||||
if (!confirm('Withdraw this application?')) return;
|
||||
const res = await fetch(`${API}/api/jobseeker/applications/${applicationId}/withdraw`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
if (res.ok) refetch();
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ 'margin-bottom': '20px' }}>
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>My Applications</h1>
|
||||
<div style={{ display: 'flex', 'align-items': 'center', gap: '8px', 'margin-top': '4px' }}>
|
||||
<span style={{ 'font-size': '13px', color: '#64748b' }}>
|
||||
Max 50 active applications allowed.
|
||||
</span>
|
||||
<A href="/dashboard/jobs" style={{ 'font-size': '13px', color: '#fd6216', 'text-decoration': 'none', 'font-weight': '700' }}>
|
||||
Browse Jobs →
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter */}
|
||||
<div class="filter-bar" style={{ 'margin-bottom': '20px' }}>
|
||||
{['', 'APPLIED', 'SHORTLISTED', 'INTERVIEW', 'OFFERED', 'HIRED', 'REJECTED', 'WITHDRAWN'].map(s => (
|
||||
<button class={`filter-btn${statusFilter() === s ? ' active' : ''}`}
|
||||
onClick={() => { setStatusFilter(s); setPage(1); }}>
|
||||
{s || 'All'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<Show when={apps.loading}><div class="loading-spinner">Loading...</div></Show>
|
||||
|
||||
<Show when={!apps.loading && apps()?.data?.length === 0}>
|
||||
<div style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '32px', 'margin-bottom': '12px' }}>📭</div>
|
||||
<p>No applications yet. <A href="/dashboard/jobs" style={{ color: '#fd6216' }}>Start browsing jobs →</A></p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={apps()?.data?.length > 0}>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Job</th>
|
||||
<th>Company</th>
|
||||
<th>Applied On</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={apps()?.data}>
|
||||
{(app: any) => (
|
||||
<tr>
|
||||
<td style={{ 'font-weight': '600' }}>{app.job_title ?? '—'}</td>
|
||||
<td style={{ color: '#64748b', 'font-size': '13px' }}>{app.company_name ?? '—'}</td>
|
||||
<td style={{ 'font-size': '13px' }}>
|
||||
{app.applied_at ? new Date(app.applied_at).toLocaleDateString('en-IN') : '—'}
|
||||
</td>
|
||||
<td>
|
||||
<span class={`badge ${STATUS_BADGE[app.status] ?? 'badge--gray'}`}>{app.status}</span>
|
||||
</td>
|
||||
<td>
|
||||
<Show when={['APPLIED', 'SHORTLISTED'].includes(app.status)}>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#e11d48', color: '#e11d48' }}
|
||||
onClick={() => withdraw(app.id)}>
|
||||
Withdraw
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={app.status === 'OFFERED'}>
|
||||
<span style={{ 'font-size': '12px', color: '#16a34a', 'font-weight': '700' }}>
|
||||
🎉 You got an offer!
|
||||
</span>
|
||||
</Show>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
168
src/routes/dashboard/index.tsx
Normal file
168
src/routes/dashboard/index.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
import { Show, createResource, For } from 'solid-js';
|
||||
import { A } from '@solidjs/router';
|
||||
import { authState, getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function DashboardIndex() {
|
||||
const rc = () => authState().runtime_config;
|
||||
const role = () => rc()?.user?.active_role ?? '';
|
||||
|
||||
return (
|
||||
<div class="dashboard-home">
|
||||
<div class="page-header">
|
||||
<h1>Welcome back, {rc()?.user?.full_name ?? 'User'}!</h1>
|
||||
<p class="page-subtitle">Here's what's happening in your dashboard.</p>
|
||||
</div>
|
||||
|
||||
{/* Pending verification banner */}
|
||||
<Show when={rc()?.onboarding_status === 'PENDING_REVIEW'}>
|
||||
<div class="status-banner status-banner--warning">
|
||||
<span>⏳</span>
|
||||
<div>
|
||||
<strong>Verification Pending</strong>
|
||||
<p>Your documents are being reviewed. This usually takes 2–3 business days.</p>
|
||||
</div>
|
||||
<A href="/pending" class="btn btn-outline btn-sm">Check Status</A>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={rc()?.onboarding_status === 'DOCUMENTS_REQUESTED'}>
|
||||
<div class="status-banner status-banner--danger">
|
||||
<span>📄</span>
|
||||
<div>
|
||||
<strong>Additional Documents Required</strong>
|
||||
<p>Admin has requested more information. Please check your pending status.</p>
|
||||
</div>
|
||||
<A href="/pending" class="btn btn-primary btn-sm">Upload Documents</A>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* KPI cards — rendered based on role via runtimeConfig */}
|
||||
<div class="kpi-grid">
|
||||
<Show when={role() === 'COMPANY'}>
|
||||
<CompanyKPIs />
|
||||
</Show>
|
||||
<Show when={role() === 'JOB_SEEKER'}>
|
||||
<JobSeekerKPIs />
|
||||
</Show>
|
||||
<Show when={role() === 'CUSTOMER'}>
|
||||
<CustomerKPIs />
|
||||
</Show>
|
||||
<Show when={
|
||||
role() !== 'COMPANY' && role() !== 'JOB_SEEKER' && role() !== 'CUSTOMER' && role() !== 'USER'
|
||||
}>
|
||||
<ProfessionalKPIs />
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CompanyKPIs() {
|
||||
return (
|
||||
<>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--blue">💼</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Active Jobs</div>
|
||||
</div>
|
||||
<A href="/dashboard/jobs" class="kpi-link">View Jobs →</A>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--green">👥</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Total Applications</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--orange">⏳</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Pending Review</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function JobSeekerKPIs() {
|
||||
return (
|
||||
<>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--blue">📨</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Applied</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--green">⭐</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Shortlisted</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--orange">🤝</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Interview</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CustomerKPIs() {
|
||||
return (
|
||||
<>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--blue">📋</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—/2</div>
|
||||
<div class="kpi-label">Active Requirements</div>
|
||||
</div>
|
||||
<A href="/dashboard/requirements" class="kpi-link">View →</A>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--green">✅</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Accepted Professionals</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ProfessionalKPIs() {
|
||||
return (
|
||||
<>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--orange">🪙</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Tracecoins</div>
|
||||
</div>
|
||||
<A href="/dashboard/wallet" class="kpi-link">View Wallet →</A>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--blue">📩</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Active Requests</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon kpi-icon--green">🤝</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-value">—</div>
|
||||
<div class="kpi-label">Accepted Leads</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
168
src/routes/dashboard/jobs/[id].tsx
Normal file
168
src/routes/dashboard/jobs/[id].tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { A, useParams } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
DRAFT: 'badge--gray',
|
||||
PENDING_APPROVAL: 'badge--orange',
|
||||
LIVE: 'badge--green',
|
||||
EXPIRED: 'badge--blue',
|
||||
CLOSED: 'badge--gray',
|
||||
REJECTED: 'badge--red',
|
||||
};
|
||||
|
||||
const APP_STATUS_BADGE: Record<string, string> = {
|
||||
APPLIED: 'badge--gray',
|
||||
SHORTLISTED: 'badge--blue',
|
||||
INTERVIEW: 'badge--orange',
|
||||
OFFERED: 'badge--green',
|
||||
HIRED: 'badge--green',
|
||||
REJECTED: 'badge--red',
|
||||
WITHDRAWN: 'badge--gray',
|
||||
};
|
||||
|
||||
export default function JobDetail() {
|
||||
const params = useParams();
|
||||
const jobId = () => params.id;
|
||||
const [submitting, setSubmitting] = createSignal(false);
|
||||
const [statusMsg, setStatusMsg] = createSignal('');
|
||||
|
||||
const [job, { refetch }] = createResource(jobId, async (id) => {
|
||||
const res = await fetch(`${API}/api/companies/jobs/${id}`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
});
|
||||
|
||||
async function submitForApproval() {
|
||||
setSubmitting(true);
|
||||
setStatusMsg('');
|
||||
const res = await fetch(`${API}/api/companies/jobs/${jobId()}/submit`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setStatusMsg('Job submitted for admin approval.');
|
||||
refetch();
|
||||
} else {
|
||||
setStatusMsg(data.error ?? 'Failed to submit.');
|
||||
}
|
||||
setSubmitting(false);
|
||||
}
|
||||
|
||||
async function closeJob() {
|
||||
if (!confirm('Close this job? This cannot be undone.')) return;
|
||||
const res = await fetch(`${API}/api/companies/jobs/${jobId()}/close`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
if (res.ok) refetch();
|
||||
}
|
||||
|
||||
return (
|
||||
<Show when={!job.loading} fallback={<div class="loading-spinner">Loading...</div>}>
|
||||
<div style={{ 'max-width': '800px' }}>
|
||||
<div class="page-actions">
|
||||
<div>
|
||||
<span class="back-link">
|
||||
<A href="/dashboard/jobs" style={{ color: '#64748b', 'font-size': '13px', 'text-decoration': 'none' }}>
|
||||
← Back to Jobs
|
||||
</A>
|
||||
</span>
|
||||
<h1 style={{ margin: '4px 0 0', 'font-size': '22px', 'font-weight': '800' }}>
|
||||
{job()?.title}
|
||||
</h1>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px', 'align-items': 'center' }}>
|
||||
<span class={`badge ${STATUS_BADGE[job()?.status] ?? 'badge--gray'}`}>
|
||||
{job()?.status}
|
||||
</span>
|
||||
<Show when={job()?.status === 'DRAFT'}>
|
||||
<A href={`/dashboard/jobs/${jobId()}/edit`} class="btn btn-sm">Edit</A>
|
||||
<button class="btn btn-sm btn-primary" disabled={submitting()} onClick={submitForApproval}>
|
||||
{submitting() ? 'Submitting...' : '🚀 Submit for Approval'}
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={job()?.status === 'LIVE'}>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#e11d48', color: '#e11d48' }} onClick={closeJob}>
|
||||
Close Job
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={statusMsg()}>
|
||||
<div class="status-banner status-banner--warning" style={{ 'margin-bottom': '16px' }}>
|
||||
<span>ℹ️</span>
|
||||
<p>{statusMsg()}</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={job()?.status === 'REJECTED'}>
|
||||
<div class="status-banner status-banner--danger" style={{ 'margin-bottom': '16px' }}>
|
||||
<span>❌</span>
|
||||
<div>
|
||||
<strong>Rejected</strong>
|
||||
<p>{job()?.rejection_reason ?? 'No reason provided.'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Job Details Card */}
|
||||
<div class="table-card" style={{ padding: '24px', 'margin-bottom': '20px' }}>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '16px' }}>
|
||||
<div><div style={{ 'font-size': '12px', color: '#94a3b8', 'font-weight': '700', 'text-transform': 'uppercase' }}>Location</div>
|
||||
<div style={{ 'margin-top': '4px', 'font-weight': '600' }}>{job()?.location}</div></div>
|
||||
<div><div style={{ 'font-size': '12px', color: '#94a3b8', 'font-weight': '700', 'text-transform': 'uppercase' }}>Type</div>
|
||||
<div style={{ 'margin-top': '4px', 'font-weight': '600' }}>{job()?.job_type ?? '—'}</div></div>
|
||||
<div><div style={{ 'font-size': '12px', color: '#94a3b8', 'font-weight': '700', 'text-transform': 'uppercase' }}>Salary</div>
|
||||
<div style={{ 'margin-top': '4px', 'font-weight': '600' }}>
|
||||
{job()?.salary_min && job()?.salary_max
|
||||
? `₹${(job().salary_min/100).toLocaleString('en-IN')} – ₹${(job().salary_max/100).toLocaleString('en-IN')}`
|
||||
: '—'
|
||||
}
|
||||
</div></div>
|
||||
<div><div style={{ 'font-size': '12px', color: '#94a3b8', 'font-weight': '700', 'text-transform': 'uppercase' }}>Experience</div>
|
||||
<div style={{ 'margin-top': '4px', 'font-weight': '600' }}>
|
||||
{job()?.experience_years ? `${job().experience_years} year(s)` : '—'}
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<Show when={job()?.description}>
|
||||
<div style={{ 'margin-top': '20px' }}>
|
||||
<div style={{ 'font-size': '12px', color: '#94a3b8', 'font-weight': '700', 'text-transform': 'uppercase', 'margin-bottom': '8px' }}>
|
||||
Description
|
||||
</div>
|
||||
<p style={{ margin: 0, 'line-height': '1.7', color: '#334155', 'white-space': 'pre-wrap' }}>
|
||||
{job()?.description}
|
||||
</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={job()?.skills?.length > 0}>
|
||||
<div style={{ 'margin-top': '20px' }}>
|
||||
<div style={{ 'font-size': '12px', color: '#94a3b8', 'font-weight': '700', 'text-transform': 'uppercase', 'margin-bottom': '8px' }}>
|
||||
Skills
|
||||
</div>
|
||||
<div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '6px' }}>
|
||||
<For each={job()?.skills}>
|
||||
{(s: string) => <span class="badge badge--blue">{s}</span>}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Quick link to applications */}
|
||||
<Show when={['LIVE', 'CLOSED', 'EXPIRED'].includes(job()?.status)}>
|
||||
<A href={`/dashboard/jobs/${jobId()}/applications`} class="btn btn-primary" style={{ 'text-decoration': 'none' }}>
|
||||
View Applications →
|
||||
</A>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
171
src/routes/dashboard/jobs/[id]/applications.tsx
Normal file
171
src/routes/dashboard/jobs/[id]/applications.tsx
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { A, useParams } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
APPLIED: 'badge--gray',
|
||||
SHORTLISTED: 'badge--blue',
|
||||
INTERVIEW: 'badge--orange',
|
||||
OFFERED: 'badge--green',
|
||||
HIRED: 'badge--green',
|
||||
REJECTED: 'badge--red',
|
||||
WITHDRAWN: 'badge--gray',
|
||||
};
|
||||
|
||||
export default function JobApplications() {
|
||||
const params = useParams();
|
||||
const jobId = () => params.id;
|
||||
const [statusFilter, setStatusFilter] = createSignal('');
|
||||
const [page, setPage] = createSignal(1);
|
||||
|
||||
const [applications, { refetch }] = createResource(
|
||||
() => ({ jobId: jobId(), page: page(), status: statusFilter() }),
|
||||
async ({ jobId, page, status }) => {
|
||||
const params = new URLSearchParams({ page: String(page), limit: '20' });
|
||||
if (status) params.set('status', status);
|
||||
const res = await fetch(
|
||||
`${API}/api/companies/jobs/${jobId}/applications?${params}`,
|
||||
{ headers: getAuthHeader() }
|
||||
);
|
||||
return res.json();
|
||||
}
|
||||
);
|
||||
|
||||
async function updateStatus(applicationId: string, status: string) {
|
||||
const res = await fetch(`${API}/api/companies/applications/${applicationId}/status`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify({ status }),
|
||||
});
|
||||
if (res.ok) refetch();
|
||||
}
|
||||
|
||||
async function viewContact(applicationId: string) {
|
||||
const res = await fetch(`${API}/api/companies/applications/${applicationId}/contact`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
alert(`📞 Contact Info\nName: ${data.full_name}\nEmail: ${data.email}\nPhone: ${data.phone}`);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="page-actions">
|
||||
<div>
|
||||
<A href={`/dashboard/jobs/${jobId()}`} style={{ color: '#64748b', 'font-size': '13px', 'text-decoration': 'none' }}>
|
||||
← Back to Job
|
||||
</A>
|
||||
<h1 style={{ margin: '4px 0 0', 'font-size': '22px', 'font-weight': '800' }}>Applications</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div class="filter-bar" style={{ 'margin-bottom': '20px' }}>
|
||||
{['', 'APPLIED', 'SHORTLISTED', 'INTERVIEW', 'OFFERED', 'HIRED', 'REJECTED'].map(s => (
|
||||
<button
|
||||
class={`filter-btn${statusFilter() === s ? ' active' : ''}`}
|
||||
onClick={() => { setStatusFilter(s); setPage(1); }}
|
||||
>
|
||||
{s || 'All'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<Show when={applications.loading}>
|
||||
<div class="loading-spinner">Loading applications...</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!applications.loading && applications()?.data?.length === 0}>
|
||||
<div style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '32px', 'margin-bottom': '12px' }}>📭</div>
|
||||
<p>No applications yet for this job.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={applications()?.data?.length > 0}>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Applicant</th>
|
||||
<th>Applied On</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={applications()?.data}>
|
||||
{(app: any) => (
|
||||
<tr>
|
||||
<td>
|
||||
<div style={{ 'font-weight': '600' }}>
|
||||
{app.applicant_name ?? '—'}
|
||||
</div>
|
||||
<div style={{ 'font-size': '12px', color: '#64748b' }}>
|
||||
{app.applicant_email ?? '—'}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ 'font-size': '13px' }}>
|
||||
{app.applied_at ? new Date(app.applied_at).toLocaleDateString('en-IN') : '—'}
|
||||
</td>
|
||||
<td>
|
||||
<span class={`badge ${STATUS_BADGE[app.status] ?? 'badge--gray'}`}>
|
||||
{app.status}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '6px', 'flex-wrap': 'wrap' }}>
|
||||
{/* Status update actions */}
|
||||
<Show when={app.status === 'APPLIED'}>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#3b82f6', color: '#3b82f6' }}
|
||||
onClick={() => updateStatus(app.id, 'SHORTLISTED')}>
|
||||
⭐ Shortlist
|
||||
</button>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#e11d48', color: '#e11d48' }}
|
||||
onClick={() => updateStatus(app.id, 'REJECTED')}>
|
||||
✗ Reject
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={app.status === 'SHORTLISTED'}>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#f59e0b', color: '#f59e0b' }}
|
||||
onClick={() => updateStatus(app.id, 'INTERVIEW')}>
|
||||
📞 Interview
|
||||
</button>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#e11d48', color: '#e11d48' }}
|
||||
onClick={() => updateStatus(app.id, 'REJECTED')}>
|
||||
✗ Reject
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={app.status === 'INTERVIEW'}>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#16a34a', color: '#16a34a' }}
|
||||
onClick={() => updateStatus(app.id, 'OFFERED')}>
|
||||
🤝 Offer
|
||||
</button>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#e11d48', color: '#e11d48' }}
|
||||
onClick={() => updateStatus(app.id, 'REJECTED')}>
|
||||
✗ Reject
|
||||
</button>
|
||||
</Show>
|
||||
{/* View contact — deducts quota */}
|
||||
<Show when={['SHORTLISTED', 'INTERVIEW', 'OFFERED', 'HIRED'].includes(app.status)}>
|
||||
<button class="btn btn-sm btn-primary"
|
||||
onClick={() => viewContact(app.id)}>
|
||||
📱 Contact
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
140
src/routes/dashboard/jobs/browse.tsx
Normal file
140
src/routes/dashboard/jobs/browse.tsx
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { A, useNavigate } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const JOB_TYPES = ['FULL_TIME', 'PART_TIME', 'CONTRACT', 'INTERNSHIP'];
|
||||
|
||||
export default function BrowseJobs() {
|
||||
const [search, setSearch] = createSignal('');
|
||||
const [jobTypeFilter, setJobTypeFilter] = createSignal('');
|
||||
const [page, setPage] = createSignal(1);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [jobs, { refetch }] = createResource(
|
||||
() => ({ page: page(), type: jobTypeFilter(), search: search() }),
|
||||
async ({ page, type }) => {
|
||||
const params = new URLSearchParams({ page: String(page), limit: '20' });
|
||||
if (type) params.set('job_type', type);
|
||||
const res = await fetch(`${API}/api/jobseeker/jobs?${params}`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
);
|
||||
|
||||
async function applyToJob(jobId: string, title: string) {
|
||||
if (!confirm(`Apply to "${title}"?`)) return;
|
||||
const res = await fetch(`${API}/api/jobseeker/jobs/${jobId}/apply`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify({ cover_letter: null }),
|
||||
});
|
||||
if (res.ok) {
|
||||
navigate('/dashboard/applications');
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.error ?? 'Failed to apply');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ 'margin-bottom': '20px' }}>
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>Browse Jobs</h1>
|
||||
<p style={{ margin: '6px 0 0', color: '#64748b', 'font-size': '14px' }}>
|
||||
Find your next opportunity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div style={{ display: 'flex', gap: '10px', 'margin-bottom': '16px', 'flex-wrap': 'wrap' }}>
|
||||
<input class="input" type="text" placeholder="Search jobs..."
|
||||
style={{ 'max-width': '320px' }}
|
||||
value={search()} onInput={(e) => { setSearch(e.currentTarget.value); setPage(1); }} />
|
||||
<div class="filter-bar">
|
||||
<button class={`filter-btn${jobTypeFilter() === '' ? ' active' : ''}`}
|
||||
onClick={() => { setJobTypeFilter(''); setPage(1); }}>All Types</button>
|
||||
{JOB_TYPES.map(t => (
|
||||
<button class={`filter-btn${jobTypeFilter() === t ? ' active' : ''}`}
|
||||
onClick={() => { setJobTypeFilter(t); setPage(1); }}>
|
||||
{t.replace('_', ' ')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={jobs.loading}>
|
||||
<div class="loading-spinner">Loading jobs...</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!jobs.loading && jobs()?.data?.length === 0}>
|
||||
<div class="table-card" style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '32px', 'margin-bottom': '12px' }}>🔍</div>
|
||||
<p>No jobs found. Try a different filter.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
|
||||
<For each={jobs()?.data}>
|
||||
{(job: any) => (
|
||||
<div class="table-card" style={{ padding: '20px' }}>
|
||||
<div style={{ display: 'flex', 'align-items': 'flex-start', 'justify-content': 'space-between', gap: '12px' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', 'align-items': 'center', gap: '8px', 'margin-bottom': '4px' }}>
|
||||
<span class="badge badge--gray">{job.job_type ?? 'FULL_TIME'}</span>
|
||||
{job.category && <span class="badge badge--blue">{job.category}</span>}
|
||||
</div>
|
||||
<h3 style={{ margin: '0 0 4px', 'font-size': '16px', 'font-weight': '700' }}>{job.title}</h3>
|
||||
<p style={{ margin: '0 0 8px', color: '#64748b', 'font-size': '13px' }}>
|
||||
{job.company_name ?? 'Company'}
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '16px', 'font-size': '12px', color: '#94a3b8' }}>
|
||||
<span>📍 {job.location}</span>
|
||||
{job.salary_min && job.salary_max && (
|
||||
<span>💰 ₹{(job.salary_min/100).toLocaleString('en-IN')} – ₹{(job.salary_max/100).toLocaleString('en-IN')}</span>
|
||||
)}
|
||||
{job.experience_years !== undefined && (
|
||||
<span>🏆 {job.experience_years}+ yrs</span>
|
||||
)}
|
||||
</div>
|
||||
{job.skills?.length > 0 && (
|
||||
<div style={{ display: 'flex', gap: '6px', 'flex-wrap': 'wrap', 'margin-top': '10px' }}>
|
||||
<For each={job.skills}>
|
||||
{(s: string) => <span class="badge badge--blue">{s}</span>}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px', 'flex-shrink': 0 }}>
|
||||
<button class="btn btn-primary"
|
||||
onClick={() => applyToJob(job.id, job.title)}>
|
||||
Apply Now
|
||||
</button>
|
||||
<A href={`/dashboard/jobs/${job.id}`} class="btn btn-sm"
|
||||
style={{ 'text-decoration': 'none', 'text-align': 'center' }}>
|
||||
View Details
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<Show when={jobs()?.pagination?.total_pages > 1}>
|
||||
<div style={{ display: 'flex', gap: '8px', 'margin-top': '20px', 'justify-content': 'center' }}>
|
||||
<button class="btn btn-sm" disabled={page() === 1} onClick={() => setPage(p => p - 1)}>← Prev</button>
|
||||
<span style={{ padding: '6px 12px', 'font-size': '13px', color: '#64748b' }}>
|
||||
Page {page()} of {jobs()?.pagination?.total_pages}
|
||||
</span>
|
||||
<button class="btn btn-sm" disabled={page() >= jobs()?.pagination?.total_pages}
|
||||
onClick={() => setPage(p => p + 1)}>Next →</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
159
src/routes/dashboard/jobs/create.tsx
Normal file
159
src/routes/dashboard/jobs/create.tsx
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
import { createSignal, Show } from 'solid-js';
|
||||
import { useNavigate } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const JOB_TYPES = ['FULL_TIME', 'PART_TIME', 'CONTRACT', 'INTERNSHIP'];
|
||||
|
||||
export default function CreateJob() {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [error, setError] = createSignal('');
|
||||
|
||||
const [form, setForm] = createSignal({
|
||||
title: '',
|
||||
category: '',
|
||||
description: '',
|
||||
location: '',
|
||||
job_type: 'FULL_TIME',
|
||||
salary_min: '',
|
||||
salary_max: '',
|
||||
experience_years: '',
|
||||
skills: '',
|
||||
});
|
||||
|
||||
function field(key: string) {
|
||||
return (e: any) => setForm(f => ({ ...f, [key]: e.target.value }));
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
const f = form();
|
||||
if (!f.title || !f.description || !f.location) {
|
||||
setError('Title, description, and location are required.');
|
||||
return;
|
||||
}
|
||||
|
||||
const body: Record<string, any> = {
|
||||
title: f.title,
|
||||
category: f.category || null,
|
||||
description: f.description,
|
||||
location: f.location,
|
||||
job_type: f.job_type,
|
||||
};
|
||||
|
||||
if (f.salary_min) body.salary_min = parseInt(f.salary_min) * 100; // convert ₹ to paise
|
||||
if (f.salary_max) body.salary_max = parseInt(f.salary_max) * 100;
|
||||
if (f.experience_years) body.experience_years = parseInt(f.experience_years);
|
||||
if (f.skills) body.skills = f.skills.split(',').map(s => s.trim()).filter(Boolean);
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`${API}/api/companies/jobs`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
navigate(`/dashboard/jobs/${data.id}`, { replace: true });
|
||||
} else {
|
||||
setError(data.error ?? 'Failed to create job');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message ?? 'Network error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ 'max-width': '720px' }}>
|
||||
<div style={{ 'margin-bottom': '24px' }}>
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>Post a New Job</h1>
|
||||
<p style={{ margin: '6px 0 0', color: '#64748b', 'font-size': '14px' }}>
|
||||
Job will be saved as Draft and require admin approval before going live.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={error()}>
|
||||
<div class="error-banner">{error()}</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', 'flex-direction': 'column', gap: '16px' }}>
|
||||
<div class="form-card">
|
||||
<div class="field">
|
||||
<label class="label">Job Title *</label>
|
||||
<input class="input" type="text" placeholder="e.g. Frontend Developer" maxLength={200}
|
||||
value={form().title} onInput={field('title')} />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Category</label>
|
||||
<input class="input" type="text" placeholder="e.g. Technology, Marketing"
|
||||
value={form().category} onInput={field('category')} />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Description *</label>
|
||||
<textarea class="textarea" placeholder="Describe the role, responsibilities, and requirements..."
|
||||
style={{ 'min-height': '160px' }}
|
||||
value={form().description} onInput={field('description')} maxLength={5000}
|
||||
/>
|
||||
<span style={{ 'font-size': '11px', color: '#94a3b8' }}>
|
||||
{form().description.length}/5000
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '14px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Location *</label>
|
||||
<input class="input" type="text" placeholder="e.g. Mumbai, Remote"
|
||||
value={form().location} onInput={field('location')} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Job Type</label>
|
||||
<select class="select" value={form().job_type} onChange={field('job_type')}>
|
||||
{JOB_TYPES.map(t => <option value={t}>{t.replace('_', ' ')}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr 1fr', gap: '14px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Min Salary (₹/yr)</label>
|
||||
<input class="input" type="number" placeholder="e.g. 500000"
|
||||
value={form().salary_min} onInput={field('salary_min')} min="0" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Max Salary (₹/yr)</label>
|
||||
<input class="input" type="number" placeholder="e.g. 1200000"
|
||||
value={form().salary_max} onInput={field('salary_max')} min="0" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Experience (years)</label>
|
||||
<input class="input" type="number" placeholder="e.g. 2"
|
||||
value={form().experience_years} onInput={field('experience_years')} min="0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Skills (comma-separated)</label>
|
||||
<input class="input" type="text" placeholder="e.g. React, TypeScript, Node.js"
|
||||
value={form().skills} onInput={field('skills')} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button type="submit" class="btn btn-primary" disabled={loading()}>
|
||||
{loading() ? 'Saving...' : '💾 Save as Draft'}
|
||||
</button>
|
||||
<button type="button" class="btn" onClick={() => history.back()}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
137
src/routes/dashboard/jobs/index.tsx
Normal file
137
src/routes/dashboard/jobs/index.tsx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import { createResource, Show, For, createSignal } from 'solid-js';
|
||||
import { A, useNavigate } from '@solidjs/router';
|
||||
import { authState, getAuthHeader, hasModule } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
DRAFT: 'badge--gray',
|
||||
PENDING_APPROVAL: 'badge--orange',
|
||||
LIVE: 'badge--green',
|
||||
EXPIRED: 'badge--blue',
|
||||
CLOSED: 'badge--gray',
|
||||
REJECTED: 'badge--red',
|
||||
};
|
||||
|
||||
export default function CompanyJobs() {
|
||||
const [statusFilter, setStatusFilter] = createSignal('');
|
||||
const [page, setPage] = createSignal(1);
|
||||
|
||||
const [jobs, { refetch }] = createResource(
|
||||
() => ({ page: page(), status: statusFilter() }),
|
||||
async ({ page, status }) => {
|
||||
const params = new URLSearchParams({ page: String(page), limit: '20' });
|
||||
if (status) params.set('status', status);
|
||||
const res = await fetch(`${API}/api/companies/jobs?${params}`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="page-actions">
|
||||
<div>
|
||||
<h1 class="page-header" style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>
|
||||
Job Postings
|
||||
</h1>
|
||||
</div>
|
||||
<Show when={hasModule('JOBS_CREATE')}>
|
||||
<A href="/dashboard/jobs/create" class="btn btn-primary">+ Post a Job</A>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div class="filter-bar" style={{ 'margin-bottom': '20px' }}>
|
||||
{['', 'DRAFT', 'PENDING_APPROVAL', 'LIVE', 'EXPIRED', 'CLOSED'].map(s => (
|
||||
<button
|
||||
class={`filter-btn${statusFilter() === s ? ' active' : ''}`}
|
||||
onClick={() => { setStatusFilter(s); setPage(1); }}
|
||||
>
|
||||
{s || 'All'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<Show when={jobs.loading}>
|
||||
<div class="loading-spinner">Loading jobs...</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!jobs.loading && jobs()?.data?.length === 0}>
|
||||
<div style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '32px', 'margin-bottom': '12px' }}>📋</div>
|
||||
<p>No jobs yet. <A href="/dashboard/jobs/create" style={{ color: '#fd6216' }}>Post your first job →</A></p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={jobs()?.data?.length > 0}>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Location</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Posted</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={jobs()?.data}>
|
||||
{(job: any) => (
|
||||
<tr>
|
||||
<td style={{ 'font-weight': '600' }}>
|
||||
<A href={`/dashboard/jobs/${job.id}`} style={{ color: '#100b2f', 'text-decoration': 'none' }}>
|
||||
{job.title}
|
||||
</A>
|
||||
</td>
|
||||
<td>{job.location}</td>
|
||||
<td>{job.job_type ?? '—'}</td>
|
||||
<td>
|
||||
<span class={`badge ${STATUS_BADGE[job.status] ?? 'badge--gray'}`}>
|
||||
{job.status}
|
||||
</span>
|
||||
</td>
|
||||
<td>{job.created_at ? new Date(job.created_at).toLocaleDateString('en-IN') : '—'}</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<A href={`/dashboard/jobs/${job.id}`} class="btn btn-sm">View</A>
|
||||
<Show when={job.status === 'DRAFT'}>
|
||||
<A href={`/dashboard/jobs/${job.id}/edit`} class="btn btn-sm">Edit</A>
|
||||
</Show>
|
||||
<A href={`/dashboard/jobs/${job.id}/applications`} class="btn btn-sm">
|
||||
Applications
|
||||
</A>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<Show when={jobs()?.pagination?.total_pages > 1}>
|
||||
<div style={{ display: 'flex', gap: '8px', 'margin-top': '16px', 'justify-content': 'center' }}>
|
||||
<button class="btn btn-sm" disabled={page() === 1} onClick={() => setPage(p => p - 1)}>← Prev</button>
|
||||
<span style={{ padding: '6px 12px', 'font-size': '13px', color: '#64748b' }}>
|
||||
Page {page()} of {jobs()?.pagination?.total_pages}
|
||||
</span>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
disabled={page() >= jobs()?.pagination?.total_pages}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
src/routes/dashboard/marketplace/[id].tsx
Normal file
103
src/routes/dashboard/marketplace/[id].tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { createResource, createSignal, Show } from 'solid-js';
|
||||
import { useParams, useNavigate } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function MarketplaceDetail() {
|
||||
const params = useParams();
|
||||
const reqId = () => params.id;
|
||||
const navigate = useNavigate();
|
||||
const [requesting, setRequesting] = createSignal(false);
|
||||
const [requested, setRequested] = createSignal(false);
|
||||
const [error, setError] = createSignal('');
|
||||
|
||||
const [req] = createResource(reqId, async (id) => {
|
||||
const res = await fetch(`${API}/api/photographers/marketplace/${id}`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
});
|
||||
|
||||
async function sendRequest() {
|
||||
setRequesting(true);
|
||||
setError('');
|
||||
const res = await fetch(`${API}/api/photographers/leads/request`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify({ requirement_id: reqId() }),
|
||||
});
|
||||
setRequesting(false);
|
||||
if (res.ok) {
|
||||
setRequested(true);
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setError(data.error ?? 'Failed to send request');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Show when={!req.loading} fallback={<div class="loading-spinner">Loading...</div>}>
|
||||
<div style={{ 'max-width': '720px' }}>
|
||||
<button class="btn btn-sm" style={{ 'margin-bottom': '16px' }} onClick={() => history.back()}>
|
||||
← Back to Marketplace
|
||||
</button>
|
||||
|
||||
<div class="table-card" style={{ padding: '28px' }}>
|
||||
{/* Profession badge */}
|
||||
<span class="badge badge--blue" style={{ 'margin-bottom': '12px' }}>
|
||||
{req()?.profession_key?.replace(/_/g, ' ')}
|
||||
</span>
|
||||
|
||||
<h1 style={{ 'font-size': '22px', 'font-weight': '800', margin: '8px 0 6px' }}>{req()?.title}</h1>
|
||||
|
||||
<div style={{ display: 'flex', gap: '16px', 'font-size': '13px', color: '#64748b', 'margin-bottom': '20px' }}>
|
||||
<span>📍 {req()?.location}</span>
|
||||
{req()?.budget && <span>💰 ₹{(req().budget/100).toLocaleString('en-IN')} budget</span>}
|
||||
{req()?.preferred_date && <span>📅 {new Date(req().preferred_date).toLocaleDateString('en-IN')}</span>}
|
||||
<span>👥 {req()?.request_count ?? 0} / 20 requests</span>
|
||||
</div>
|
||||
|
||||
<p style={{ margin: '0 0 24px', color: '#334155', 'line-height': '1.8', 'white-space': 'pre-wrap' }}>
|
||||
{req()?.description}
|
||||
</p>
|
||||
|
||||
{/* ⚠️ Contact NOT shown — only revealed after customer accepts */}
|
||||
<div class="table-card" style={{ padding: '14px 18px', background: '#fffbeb', border: '1px solid #fde68a', 'margin-bottom': '24px' }}>
|
||||
<p style={{ margin: 0, 'font-size': '13px', color: '#92400e' }}>
|
||||
<strong>🔒 Customer contact details are hidden.</strong> They will be revealed only after the customer accepts your request.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={error()}>
|
||||
<div class="error-banner" style={{ 'margin-bottom': '16px' }}>{error()}</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!requested()}>
|
||||
<div style={{ display: 'flex', gap: '12px', 'align-items': 'center' }}>
|
||||
<button class="btn btn-primary" disabled={requesting()} onClick={sendRequest}
|
||||
style={{ 'font-size': '15px', padding: '12px 24px' }}>
|
||||
{requesting() ? 'Sending...' : '🪙 Send Request (25 Tracecoins)'}
|
||||
</button>
|
||||
<span style={{ 'font-size': '12px', color: '#64748b' }}>
|
||||
25 coins reserved — returned if rejected or expired
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={requested()}>
|
||||
<div style={{ display: 'flex', 'align-items': 'center', gap: '10px', background: '#f0fdf4', padding: '14px 18px', 'border-radius': '10px', border: '1px solid #bbf7d0' }}>
|
||||
<span style={{ 'font-size': '20px' }}>✅</span>
|
||||
<div>
|
||||
<strong style={{ color: '#15803d', 'font-size': '14px' }}>Request sent!</strong>
|
||||
<p style={{ margin: '2px 0 0', 'font-size': '13px', color: '#16a34a' }}>
|
||||
25 Tracecoins reserved. You'll be notified when the customer responds.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
98
src/routes/dashboard/marketplace/index.tsx
Normal file
98
src/routes/dashboard/marketplace/index.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { A } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function Marketplace() {
|
||||
const [search, setSearch] = createSignal('');
|
||||
const [page, setPage] = createSignal(1);
|
||||
|
||||
const [requirements, { refetch }] = createResource(
|
||||
() => ({ page: page(), search: search() }),
|
||||
async ({ page }) => {
|
||||
const res = await fetch(
|
||||
`${API}/api/professionals/marketplace?page=${page}&limit=20`,
|
||||
{ headers: getAuthHeader() }
|
||||
);
|
||||
return res.json();
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="page-actions">
|
||||
<div>
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>Marketplace</h1>
|
||||
<p style={{ margin: '4px 0 0', color: '#64748b', 'font-size': '14px' }}>
|
||||
Browse open requirements from customers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={requirements.loading}>
|
||||
<div class="loading-spinner">Loading marketplace...</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!requirements.loading && requirements()?.data?.length === 0}>
|
||||
<div class="table-card" style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '40px', 'margin-bottom': '12px' }}>🔍</div>
|
||||
<p>No open requirements right now. Check back soon!</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
|
||||
<For each={requirements()?.data}>
|
||||
{(req: any) => (
|
||||
<div class="table-card" style={{ padding: '20px' }}>
|
||||
<div style={{ display: 'flex', 'align-items': 'flex-start', 'justify-content': 'space-between', gap: '12px' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', 'align-items': 'center', gap: '8px', 'margin-bottom': '6px' }}>
|
||||
<span class="badge badge--blue">{req.profession_key}</span>
|
||||
<span style={{ color: '#94a3b8', 'font-size': '12px' }}>
|
||||
{req.request_count ?? 0} / 20 requests
|
||||
</span>
|
||||
</div>
|
||||
<h3 style={{ margin: '0 0 6px', 'font-size': '16px', 'font-weight': '700' }}>{req.title}</h3>
|
||||
<p style={{ margin: 0, color: '#64748b', 'font-size': '13px', 'line-height': '1.5' }}>
|
||||
{req.description?.substring(0, 160)}{req.description?.length > 160 ? '...' : ''}
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '16px', 'margin-top': '10px', 'font-size': '12px', color: '#94a3b8' }}>
|
||||
<span>📍 {req.location}</span>
|
||||
{req.budget && <span>💰 ₹{(req.budget / 100).toLocaleString('en-IN')}</span>}
|
||||
{req.expires_at && (
|
||||
<span>⏰ Expires {new Date(req.expires_at).toLocaleDateString('en-IN')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<A
|
||||
href={`/dashboard/marketplace/${req.id}`}
|
||||
class="btn btn-primary"
|
||||
style={{ 'flex-shrink': 0, 'text-decoration': 'none' }}
|
||||
>
|
||||
View & Request
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<Show when={requirements()?.pagination?.total_pages > 1}>
|
||||
<div style={{ display: 'flex', gap: '8px', 'margin-top': '20px', 'justify-content': 'center' }}>
|
||||
<button class="btn btn-sm" disabled={page() === 1} onClick={() => setPage(p => p - 1)}>← Prev</button>
|
||||
<span style={{ padding: '6px 12px', 'font-size': '13px', color: '#64748b' }}>
|
||||
Page {page()} of {requirements()?.pagination?.total_pages}
|
||||
</span>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
disabled={page() >= requirements()?.pagination?.total_pages}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
125
src/routes/dashboard/notifications.tsx
Normal file
125
src/routes/dashboard/notifications.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function Notifications() {
|
||||
const [page, setPage] = createSignal(1);
|
||||
|
||||
const [notifications, { refetch }] = createResource(
|
||||
() => page(),
|
||||
async (p) => {
|
||||
const res = await fetch(`${API}/api/me/notifications?page=${p}&limit=30`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
);
|
||||
|
||||
async function markRead(id: string) {
|
||||
await fetch(`${API}/api/me/notifications/${id}/read`, {
|
||||
method: 'POST', headers: getAuthHeader(),
|
||||
});
|
||||
refetch();
|
||||
}
|
||||
|
||||
async function markAllRead() {
|
||||
await fetch(`${API}/api/me/notifications/read-all`, {
|
||||
method: 'POST', headers: getAuthHeader(),
|
||||
});
|
||||
refetch();
|
||||
}
|
||||
|
||||
const typeIcon: Record<string, string> = {
|
||||
JOB_APPLIED: '📝',
|
||||
STATUS_CHANGED: '🔄',
|
||||
JOB_APPROVED: '✅',
|
||||
JOB_REJECTED: '❌',
|
||||
LEAD_RECEIVED: '🔔',
|
||||
LEAD_ACCEPTED: '✅',
|
||||
LEAD_REJECTED: '❌',
|
||||
REQUIREMENT_POSTED: '📋',
|
||||
TRACECOIN_DEDUCTED: '🪙',
|
||||
TRACECOIN_RETURNED: '🪙',
|
||||
ONBOARDING_APPROVED: '🎉',
|
||||
ONBOARDING_REJECTED: '❌',
|
||||
DOCUMENTS_REQUESTED: '📄',
|
||||
NEW_APPLICATION: '📩',
|
||||
SYSTEM: 'ℹ️',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ 'max-width': '800px' }}>
|
||||
<div class="page-actions">
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>Notifications</h1>
|
||||
<button class="btn btn-sm" onClick={markAllRead}>✓ Mark all read</button>
|
||||
</div>
|
||||
|
||||
<Show when={notifications.loading}>
|
||||
<div class="loading-spinner">Loading notifications...</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!notifications.loading && notifications()?.data?.length === 0}>
|
||||
<div class="table-card" style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '40px', 'margin-bottom': '12px' }}>🔔</div>
|
||||
<p>No notifications yet.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '6px' }}>
|
||||
<For each={notifications()?.data}>
|
||||
{(n: any) => (
|
||||
<div
|
||||
class="table-card"
|
||||
style={{
|
||||
padding: '14px 18px',
|
||||
display: 'flex',
|
||||
gap: '14px',
|
||||
'align-items': 'flex-start',
|
||||
background: n.read_at ? '#fff' : '#fffbf7',
|
||||
cursor: 'pointer',
|
||||
transition: 'background 100ms',
|
||||
}}
|
||||
onClick={() => !n.read_at && markRead(n.id)}
|
||||
>
|
||||
<span style={{ 'font-size': '20px', 'flex-shrink': 0 }}>
|
||||
{typeIcon[n.type] ?? 'ℹ️'}
|
||||
</span>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', 'justify-content': 'space-between', gap: '12px' }}>
|
||||
<span style={{
|
||||
'font-size': '14px',
|
||||
'font-weight': n.read_at ? '400' : '700',
|
||||
color: '#1e293b'
|
||||
}}>
|
||||
{n.body}
|
||||
</span>
|
||||
<Show when={!n.read_at}>
|
||||
<span style={{
|
||||
width: '8px', height: '8px', 'border-radius': '50%',
|
||||
background: '#fd6216', 'flex-shrink': 0, 'margin-top': '6px'
|
||||
}} />
|
||||
</Show>
|
||||
</div>
|
||||
<div style={{ 'font-size': '12px', color: '#94a3b8', 'margin-top': '4px' }}>
|
||||
{n.created_at ? new Date(n.created_at).toLocaleString('en-IN', { dateStyle: 'medium', timeStyle: 'short' }) : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<Show when={notifications()?.pagination?.total_pages > 1}>
|
||||
<div style={{ display: 'flex', gap: '8px', 'margin-top': '20px', 'justify-content': 'center' }}>
|
||||
<button class="btn btn-sm" disabled={page() === 1} onClick={() => setPage(p => p - 1)}>← Prev</button>
|
||||
<span style={{ padding: '6px 12px', 'font-size': '13px', color: '#64748b' }}>
|
||||
Page {page()} of {notifications()?.pagination?.total_pages}
|
||||
</span>
|
||||
<button class="btn btn-sm" disabled={page() >= notifications()?.pagination?.total_pages}
|
||||
onClick={() => setPage(p => p + 1)}>Next →</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
src/routes/dashboard/portfolio/index.tsx
Normal file
146
src/routes/dashboard/portfolio/index.tsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function Portfolio() {
|
||||
const [showForm, setShowForm] = createSignal(false);
|
||||
const [saving, setSaving] = createSignal(false);
|
||||
const [editId, setEditId] = createSignal<string | null>(null);
|
||||
const [error, setError] = createSignal('');
|
||||
const [form, setForm] = createSignal({ title: '', description: '', tags: '' });
|
||||
function f(k: string) { return (e: any) => setForm(p => ({ ...p, [k]: e.target.value })); }
|
||||
|
||||
const [items, { refetch }] = createResource(async () => {
|
||||
const res = await fetch(`${API}/api/photographers/portfolio/me`, { headers: getAuthHeader() });
|
||||
return res.json();
|
||||
});
|
||||
|
||||
async function saveItem(e: Event) {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
const data = form();
|
||||
if (!data.title) { setError('Title is required.'); return; }
|
||||
setSaving(true);
|
||||
const body = {
|
||||
title: data.title,
|
||||
description: data.description || null,
|
||||
tags: data.tags ? data.tags.split(',').map(s => s.trim()).filter(Boolean) : [],
|
||||
};
|
||||
const isEdit = !!editId();
|
||||
const url = isEdit
|
||||
? `${API}/api/photographers/portfolio/${editId()}`
|
||||
: `${API}/api/photographers/portfolio`;
|
||||
const res = await fetch(url, {
|
||||
method: isEdit ? 'PATCH' : 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
setSaving(false);
|
||||
if (res.ok) {
|
||||
setShowForm(false);
|
||||
setEditId(null);
|
||||
setForm({ title: '', description: '', tags: '' });
|
||||
refetch();
|
||||
} else {
|
||||
const d = await res.json();
|
||||
setError(d.error ?? 'Failed to save');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteItem(id: string) {
|
||||
if (!confirm('Delete this portfolio item?')) return;
|
||||
await fetch(`${API}/api/photographers/portfolio/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
refetch();
|
||||
}
|
||||
|
||||
function startEdit(item: any) {
|
||||
setEditId(item.id);
|
||||
setForm({ title: item.title, description: item.description ?? '', tags: (item.tags ?? []).join(', ') });
|
||||
setShowForm(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="page-actions">
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>Portfolio</h1>
|
||||
<button class="btn btn-primary" onClick={() => { setShowForm(s => !s); setEditId(null); setForm({ title: '', description: '', tags: '' }); }}>
|
||||
{showForm() ? '✕ Cancel' : '+ Add Item'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<Show when={showForm()}>
|
||||
<div class="table-card" style={{ padding: '24px', 'margin-bottom': '24px' }}>
|
||||
<h3 style={{ margin: '0 0 16px', 'font-size': '16px', 'font-weight': '700' }}>
|
||||
{editId() ? 'Edit Portfolio Item' : 'New Portfolio Item'}
|
||||
</h3>
|
||||
<Show when={error()}>
|
||||
<div class="error-banner" style={{ 'margin-bottom': '12px' }}>{error()}</div>
|
||||
</Show>
|
||||
<form onSubmit={saveItem} style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Title *</label>
|
||||
<input class="input" type="text" placeholder="e.g. Wedding at Taj Hotel"
|
||||
value={form().title} onInput={f('title')} maxLength={255} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Description</label>
|
||||
<textarea class="textarea" placeholder="Describe the project..."
|
||||
style={{ 'min-height': '80px' }} value={form().description} onInput={f('description')} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Tags (comma-separated)</label>
|
||||
<input class="input" type="text" placeholder="e.g. Wedding, Outdoor, Mumbai"
|
||||
value={form().tags} onInput={f('tags')} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button type="submit" class="btn btn-primary" disabled={saving()}>
|
||||
{saving() ? 'Saving...' : '💾 Save'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={items.loading}><div class="loading-spinner">Loading portfolio...</div></Show>
|
||||
|
||||
<Show when={!items.loading && items()?.data?.length === 0}>
|
||||
<div class="table-card" style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '40px', 'margin-bottom': '12px' }}>🖼️</div>
|
||||
<p>No portfolio items yet. Add some to showcase your work.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div style={{ display: 'grid', 'grid-template-columns': 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
|
||||
<For each={items()?.data}>
|
||||
{(item: any) => (
|
||||
<div class="table-card" style={{ padding: '20px' }}>
|
||||
<h3 style={{ margin: '0 0 8px', 'font-size': '15px', 'font-weight': '700' }}>{item.title}</h3>
|
||||
<Show when={item.description}>
|
||||
<p style={{ margin: '0 0 10px', color: '#64748b', 'font-size': '13px', 'line-height': '1.5' }}>
|
||||
{item.description?.substring(0, 100)}{item.description?.length > 100 ? '...' : ''}
|
||||
</p>
|
||||
</Show>
|
||||
<Show when={item.tags?.length > 0}>
|
||||
<div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '4px', 'margin-bottom': '12px' }}>
|
||||
<For each={item.tags}>
|
||||
{(t: string) => <span class="badge badge--blue" style={{ 'font-size': '11px' }}>{t}</span>}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button class="btn btn-sm" onClick={() => startEdit(item)}>Edit</button>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#e11d48', color: '#e11d48' }}
|
||||
onClick={() => deleteItem(item.id)}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
171
src/routes/dashboard/requirements/[id].tsx
Normal file
171
src/routes/dashboard/requirements/[id].tsx
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { useParams, A } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
const REQ_STATUS_BADGE: Record<string, string> = {
|
||||
PENDING: 'badge--gray',
|
||||
ACCEPTED: 'badge--green',
|
||||
REJECTED: 'badge--red',
|
||||
EXPIRED: 'badge--orange',
|
||||
};
|
||||
|
||||
export default function RequirementDetail() {
|
||||
const params = useParams();
|
||||
const reqId = () => params.id;
|
||||
const [actionLoading, setActionLoading] = createSignal('');
|
||||
|
||||
const [req, { refetch: refetchReq }] = createResource(reqId, async (id) => {
|
||||
const res = await fetch(`${API}/api/customers/requirements/${id}`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
});
|
||||
|
||||
const [requests, { refetch: refetchRequests }] = createResource(reqId, async (id) => {
|
||||
const res = await fetch(`${API}/api/customers/requirements/${id}/requests?limit=50`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
});
|
||||
|
||||
async function approve(requestId: string) {
|
||||
setActionLoading(requestId + '_approve');
|
||||
const res = await fetch(`${API}/api/customers/requirements/${reqId()}/requests/${requestId}/approve`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
setActionLoading('');
|
||||
if (res.ok) {
|
||||
refetchReq();
|
||||
refetchRequests();
|
||||
}
|
||||
}
|
||||
|
||||
async function reject(requestId: string) {
|
||||
setActionLoading(requestId + '_reject');
|
||||
const res = await fetch(`${API}/api/customers/requirements/${reqId()}/requests/${requestId}/reject`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify({ reason: null }),
|
||||
});
|
||||
setActionLoading('');
|
||||
if (res.ok) {
|
||||
refetchRequests();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Show when={!req.loading} fallback={<div class="loading-spinner">Loading...</div>}>
|
||||
<div style={{ 'max-width': '900px' }}>
|
||||
<div class="page-actions" style={{ 'margin-bottom': '20px' }}>
|
||||
<div>
|
||||
<A href="/dashboard/requirements" style={{ color: '#64748b', 'font-size': '13px', 'text-decoration': 'none' }}>
|
||||
← Back to Requirements
|
||||
</A>
|
||||
<h1 style={{ margin: '4px 0 0', 'font-size': '22px', 'font-weight': '800' }}>{req()?.title}</h1>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px', 'align-items': 'center' }}>
|
||||
<span class="badge badge--blue">{req()?.profession_key?.replace(/_/g, ' ')}</span>
|
||||
<span class={`badge ${req()?.status === 'OPEN' ? 'badge--green' : 'badge--gray'}`}>{req()?.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Requirement summary */}
|
||||
<div class="table-card" style={{ padding: '20px', 'margin-bottom': '20px' }}>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr 1fr', gap: '16px' }}>
|
||||
<div>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', color: '#94a3b8', 'text-transform': 'uppercase' }}>Location</div>
|
||||
<div style={{ 'font-weight': '600', 'margin-top': '4px' }}>{req()?.location}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', color: '#94a3b8', 'text-transform': 'uppercase' }}>Budget</div>
|
||||
<div style={{ 'font-weight': '600', 'margin-top': '4px' }}>
|
||||
{req()?.budget ? `₹${(req().budget/100).toLocaleString('en-IN')}` : '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', color: '#94a3b8', 'text-transform': 'uppercase' }}>Requests</div>
|
||||
<div style={{ 'font-weight': '600', 'margin-top': '4px' }}>{req()?.request_count ?? 0} / 20</div>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={req()?.description}>
|
||||
<div style={{ 'margin-top': '16px' }}>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', color: '#94a3b8', 'text-transform': 'uppercase', 'margin-bottom': '6px' }}>Description</div>
|
||||
<p style={{ margin: 0, color: '#334155', 'line-height': '1.7', 'white-space': 'pre-wrap' }}>{req()?.description}</p>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
{/* Lead Requests */}
|
||||
<h2 style={{ 'font-size': '17px', 'font-weight': '800', 'margin': '0 0 14px' }}>
|
||||
Professional Requests ({requests()?.data?.length ?? 0})
|
||||
</h2>
|
||||
|
||||
<Show when={requests.loading}><div class="loading-spinner">Loading requests...</div></Show>
|
||||
|
||||
<Show when={!requests.loading && requests()?.data?.length === 0}>
|
||||
<div class="table-card" style={{ padding: '36px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '32px', 'margin-bottom': '12px' }}>⏳</div>
|
||||
<p>No professional requests yet. They will appear here when professionals send a request.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
|
||||
<For each={requests()?.data}>
|
||||
{(req: any) => (
|
||||
<div class="table-card" style={{ padding: '18px' }}>
|
||||
<div style={{ display: 'flex', 'align-items': 'flex-start', 'justify-content': 'space-between', gap: '12px' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', gap: '8px', 'align-items': 'center', 'margin-bottom': '4px' }}>
|
||||
<span style={{ 'font-size': '15px', 'font-weight': '700' }}>
|
||||
{req.professional_name ?? 'Professional'}
|
||||
</span>
|
||||
<span class={`badge ${REQ_STATUS_BADGE[req.status] ?? 'badge--gray'}`}>{req.status}</span>
|
||||
</div>
|
||||
{req.message && (
|
||||
<p style={{ margin: '4px 0 0', color: '#64748b', 'font-size': '13px', 'line-height': '1.5' }}>
|
||||
"{req.message}"
|
||||
</p>
|
||||
)}
|
||||
<div style={{ 'font-size': '11px', color: '#94a3b8', 'margin-top': '8px' }}>
|
||||
Requested {req.requested_at ? new Date(req.requested_at).toLocaleDateString('en-IN') : '—'}
|
||||
{' · '}Expires {req.expires_at ? new Date(req.expires_at).toLocaleDateString('en-IN') : '—'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Show when={req.status === 'PENDING'}>
|
||||
<div style={{ display: 'flex', gap: '8px', 'flex-shrink': 0 }}>
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
disabled={actionLoading() !== ''}
|
||||
onClick={() => approve(req.id)}
|
||||
>
|
||||
{actionLoading() === req.id + '_approve' ? '...' : '✓ Accept'}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
style={{ 'border-color': '#e11d48', color: '#e11d48' }}
|
||||
disabled={actionLoading() !== ''}
|
||||
onClick={() => reject(req.id)}
|
||||
>
|
||||
{actionLoading() === req.id + '_reject' ? '...' : '✗ Decline'}
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={req.status === 'ACCEPTED'}>
|
||||
<div style={{ 'font-size': '13px', color: '#16a34a', 'font-weight': '700' }}>
|
||||
✓ Accepted — contact revealed to professional
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
183
src/routes/dashboard/requirements/index.tsx
Normal file
183
src/routes/dashboard/requirements/index.tsx
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { A } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function Requirements() {
|
||||
const [page, setPage] = createSignal(1);
|
||||
const [showCreate, setShowCreate] = createSignal(false);
|
||||
const [creating, setCreating] = createSignal(false);
|
||||
const [createError, setCreateError] = createSignal('');
|
||||
|
||||
const PROFESSIONS = [
|
||||
'PHOTOGRAPHER','MAKEUP_ARTIST','TUTOR','DEVELOPER',
|
||||
'VIDEO_EDITOR','GRAPHIC_DESIGNER','SOCIAL_MEDIA_MANAGER',
|
||||
'FITNESS_TRAINER','CATERING_SERVICES'
|
||||
];
|
||||
|
||||
const [form, setForm] = createSignal({
|
||||
profession_key: 'PHOTOGRAPHER',
|
||||
title: '',
|
||||
description: '',
|
||||
location: '',
|
||||
budget: '',
|
||||
preferred_date: '',
|
||||
});
|
||||
|
||||
const [requirements, { refetch }] = createResource(
|
||||
() => page(),
|
||||
async (p) => {
|
||||
const res = await fetch(`${API}/api/customers/requirements?page=${p}&limit=20`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
);
|
||||
|
||||
async function createRequirement(e: Event) {
|
||||
e.preventDefault();
|
||||
setCreateError('');
|
||||
const f = form();
|
||||
if (!f.title || !f.description || !f.location) {
|
||||
setCreateError('Title, description and location are required.');
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
const body: Record<string, any> = {
|
||||
profession_key: f.profession_key,
|
||||
title: f.title,
|
||||
description: f.description,
|
||||
location: f.location,
|
||||
};
|
||||
if (f.budget) body.budget = parseInt(f.budget) * 100; // paise
|
||||
if (f.preferred_date) body.preferred_date = f.preferred_date;
|
||||
|
||||
const res = await fetch(`${API}/api/customers/requirements`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
setCreating(false);
|
||||
if (res.ok) {
|
||||
setShowCreate(false);
|
||||
setForm({ profession_key: 'PHOTOGRAPHER', title: '', description: '', location: '', budget: '', preferred_date: '' });
|
||||
refetch();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setCreateError(data.error ?? 'Failed to create requirement');
|
||||
}
|
||||
}
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
DRAFT: 'badge--gray', OPEN: 'badge--green', CLOSED: 'badge--gray', EXPIRED: 'badge--orange',
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="page-actions">
|
||||
<div>
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>My Requirements</h1>
|
||||
<p style={{ margin: '4px 0 0', color: '#64748b', 'font-size': '14px' }}>
|
||||
You can have up to 2 active requirements.
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" onClick={() => setShowCreate(s => !s)}>
|
||||
{showCreate() ? '✕ Cancel' : '+ Post Requirement'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create Form */}
|
||||
<Show when={showCreate()}>
|
||||
<div class="table-card" style={{ padding: '24px', 'margin-bottom': '24px' }}>
|
||||
<h3 style={{ margin: '0 0 16px', 'font-size': '16px', 'font-weight': '700' }}>New Requirement</h3>
|
||||
<Show when={createError()}>
|
||||
<div class="error-banner" style={{ 'margin-bottom': '12px' }}>{createError()}</div>
|
||||
</Show>
|
||||
<form onSubmit={createRequirement}>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '14px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Profession Type *</label>
|
||||
<select class="select" value={form().profession_key}
|
||||
onChange={(e) => setForm(f => ({ ...f, profession_key: e.currentTarget.value }))}>
|
||||
{PROFESSIONS.map(p => <option value={p}>{p.replace(/_/g, ' ')}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Location *</label>
|
||||
<input class="input" type="text" placeholder="e.g. Mumbai"
|
||||
value={form().location} onInput={(e) => setForm(f => ({ ...f, location: e.currentTarget.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Title *</label>
|
||||
<input class="input" type="text" placeholder="e.g. Photographer needed for wedding"
|
||||
value={form().title} onInput={(e) => setForm(f => ({ ...f, title: e.currentTarget.value }))} maxLength={200} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Description *</label>
|
||||
<textarea class="textarea" placeholder="Describe what you need in detail..."
|
||||
style={{ 'min-height': '120px' }}
|
||||
value={form().description} onInput={(e) => setForm(f => ({ ...f, description: e.currentTarget.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '14px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Budget (₹)</label>
|
||||
<input class="input" type="number" placeholder="Optional"
|
||||
value={form().budget} onInput={(e) => setForm(f => ({ ...f, budget: e.currentTarget.value }))} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Preferred Date</label>
|
||||
<input class="input" type="date"
|
||||
value={form().preferred_date} onInput={(e) => setForm(f => ({ ...f, preferred_date: e.currentTarget.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '10px', 'margin-top': '4px' }}>
|
||||
<button type="submit" class="btn btn-primary" disabled={creating()}>
|
||||
{creating() ? 'Posting...' : '📋 Post Requirement'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="table-card">
|
||||
<Show when={requirements.loading}><div class="loading-spinner">Loading...</div></Show>
|
||||
|
||||
<Show when={!requirements.loading && requirements()?.data?.length === 0}>
|
||||
<div style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '32px', 'margin-bottom': '12px' }}>📝</div>
|
||||
<p>No requirements yet. Click "Post Requirement" to get started.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={requirements()?.data?.length > 0}>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr><th>Title</th><th>Profession</th><th>Location</th><th>Status</th><th>Requests</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={requirements()?.data}>
|
||||
{(req: any) => (
|
||||
<tr>
|
||||
<td style={{ 'font-weight': '600' }}>{req.title}</td>
|
||||
<td><span class="badge badge--blue">{req.profession_key?.replace(/_/g, ' ')}</span></td>
|
||||
<td>{req.location}</td>
|
||||
<td><span class={`badge ${STATUS_BADGE[req.status] ?? 'badge--gray'}`}>{req.status}</span></td>
|
||||
<td style={{ 'font-weight': '700' }}>{req.request_count ?? 0} / 20</td>
|
||||
<td>
|
||||
<A href={`/dashboard/requirements/${req.id}`} class="btn btn-sm" style={{ 'text-decoration': 'none' }}>
|
||||
View Requests →
|
||||
</A>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
174
src/routes/dashboard/services/index.tsx
Normal file
174
src/routes/dashboard/services/index.tsx
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function Services() {
|
||||
const [showForm, setShowForm] = createSignal(false);
|
||||
const [saving, setSaving] = createSignal(false);
|
||||
const [editId, setEditId] = createSignal<string | null>(null);
|
||||
const [error, setError] = createSignal('');
|
||||
const [form, setForm] = createSignal({
|
||||
name: '', description: '', price: '', duration_minutes: '',
|
||||
});
|
||||
function f(k: string) { return (e: any) => setForm(p => ({ ...p, [k]: e.target.value })); }
|
||||
|
||||
const [services, { refetch }] = createResource(async () => {
|
||||
const res = await fetch(`${API}/api/photographers/services/me`, { headers: getAuthHeader() });
|
||||
return res.json();
|
||||
});
|
||||
|
||||
async function saveService(e: Event) {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
const data = form();
|
||||
if (!data.name || !data.price) { setError('Service name and price are required.'); return; }
|
||||
setSaving(true);
|
||||
const body: Record<string, any> = {
|
||||
name: data.name,
|
||||
description: data.description || null,
|
||||
price: Math.round(parseFloat(data.price) * 100), // paise
|
||||
};
|
||||
if (data.duration_minutes) body.duration_minutes = parseInt(data.duration_minutes);
|
||||
|
||||
const isEdit = !!editId();
|
||||
const url = isEdit
|
||||
? `${API}/api/photographers/services/${editId()}`
|
||||
: `${API}/api/photographers/services`;
|
||||
const res = await fetch(url, {
|
||||
method: isEdit ? 'PATCH' : 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
setSaving(false);
|
||||
if (res.ok) {
|
||||
setShowForm(false);
|
||||
setEditId(null);
|
||||
setForm({ name: '', description: '', price: '', duration_minutes: '' });
|
||||
refetch();
|
||||
} else {
|
||||
const d = await res.json();
|
||||
setError(d.error ?? 'Failed to save');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteService(id: string) {
|
||||
if (!confirm('Delete this service?')) return;
|
||||
await fetch(`${API}/api/photographers/services/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
refetch();
|
||||
}
|
||||
|
||||
function startEdit(svc: any) {
|
||||
setEditId(svc.id);
|
||||
setForm({
|
||||
name: svc.name,
|
||||
description: svc.description ?? '',
|
||||
price: ((svc.price ?? 0) / 100).toString(),
|
||||
duration_minutes: svc.duration_minutes?.toString() ?? '',
|
||||
});
|
||||
setShowForm(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="page-actions">
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>My Services</h1>
|
||||
<button class="btn btn-primary"
|
||||
onClick={() => { setShowForm(s => !s); setEditId(null); setForm({ name: '', description: '', price: '', duration_minutes: '' }); }}>
|
||||
{showForm() ? '✕ Cancel' : '+ Add Service'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Show when={showForm()}>
|
||||
<div class="table-card" style={{ padding: '24px', 'margin-bottom': '24px' }}>
|
||||
<h3 style={{ margin: '0 0 16px', 'font-size': '16px', 'font-weight': '700' }}>
|
||||
{editId() ? 'Edit Service' : 'New Service'}
|
||||
</h3>
|
||||
<Show when={error()}>
|
||||
<div class="error-banner" style={{ 'margin-bottom': '12px' }}>{error()}</div>
|
||||
</Show>
|
||||
<form onSubmit={saveService} style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Service Name *</label>
|
||||
<input class="input" type="text" placeholder="e.g. Full Day Wedding Photography"
|
||||
value={form().name} onInput={f('name')} maxLength={255} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Description</label>
|
||||
<textarea class="textarea" placeholder="What does this service include?"
|
||||
style={{ 'min-height': '80px' }} value={form().description} onInput={f('description')} />
|
||||
</div>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '12px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Price (₹) *</label>
|
||||
<input class="input" type="number" placeholder="e.g. 25000" step="0.01"
|
||||
value={form().price} onInput={f('price')} min="0" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Duration (minutes)</label>
|
||||
<input class="input" type="number" placeholder="e.g. 480"
|
||||
value={form().duration_minutes} onInput={f('duration_minutes')} min="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button type="submit" class="btn btn-primary" disabled={saving()}>
|
||||
{saving() ? 'Saving...' : '💾 Save Service'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={services.loading}><div class="loading-spinner">Loading services...</div></Show>
|
||||
|
||||
<Show when={!services.loading && services()?.data?.length === 0}>
|
||||
<div class="table-card" style={{ padding: '48px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '40px', 'margin-bottom': '12px' }}>🛠️</div>
|
||||
<p>No services yet. Add the services you offer to attract customers.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="table-card">
|
||||
<Show when={services()?.data?.length > 0}>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr><th>Service</th><th>Price</th><th>Duration</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={services()?.data}>
|
||||
{(svc: any) => (
|
||||
<tr>
|
||||
<td>
|
||||
<div style={{ 'font-weight': '600' }}>{svc.name}</div>
|
||||
<Show when={svc.description}>
|
||||
<div style={{ 'font-size': '12px', color: '#64748b' }}>
|
||||
{svc.description?.substring(0, 80)}{svc.description?.length > 80 ? '...' : ''}
|
||||
</div>
|
||||
</Show>
|
||||
</td>
|
||||
<td style={{ 'font-weight': '700', color: '#fd6216' }}>
|
||||
₹{((svc.price ?? 0) / 100).toLocaleString('en-IN')}
|
||||
</td>
|
||||
<td style={{ color: '#64748b', 'font-size': '13px' }}>
|
||||
{svc.duration_minutes ? `${svc.duration_minutes} min` : '—'}
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', gap: '6px' }}>
|
||||
<button class="btn btn-sm" onClick={() => startEdit(svc)}>Edit</button>
|
||||
<button class="btn btn-sm" style={{ 'border-color': '#e11d48', color: '#e11d48' }}
|
||||
onClick={() => deleteService(svc.id)}>Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
169
src/routes/dashboard/settings.tsx
Normal file
169
src/routes/dashboard/settings.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import { createResource, createSignal, Show } from 'solid-js';
|
||||
import { getAuthHeader, authStore } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
/**
|
||||
* Universal profile/settings page — role-aware.
|
||||
* Always edits /api/me (common fields: full_name, phone, location, bio).
|
||||
* Role-specific profile link shown below.
|
||||
*/
|
||||
export default function ProfileSettings() {
|
||||
const [saving, setSaving] = createSignal(false);
|
||||
const [error, setError] = createSignal('');
|
||||
const [success, setSuccess] = createSignal(false);
|
||||
|
||||
const [me, { refetch }] = createResource(async () => {
|
||||
const res = await fetch(`${API}/api/me`, { headers: getAuthHeader() });
|
||||
return res.json();
|
||||
});
|
||||
|
||||
const [form, setForm] = createSignal({
|
||||
full_name: '',
|
||||
phone: '',
|
||||
location: '',
|
||||
bio: '',
|
||||
});
|
||||
|
||||
// Pre-fill once loaded
|
||||
createResource(me, (data) => {
|
||||
if (data) {
|
||||
setForm({
|
||||
full_name: data.full_name ?? '',
|
||||
phone: data.phone ?? '',
|
||||
location: data.location ?? '',
|
||||
bio: data.bio ?? '',
|
||||
});
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
function f(k: string) { return (e: any) => setForm(p => ({ ...p, [k]: e.target.value })); }
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
setError('');
|
||||
setSuccess(false);
|
||||
const res = await fetch(`${API}/api/me`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify(form()),
|
||||
});
|
||||
setSaving(false);
|
||||
if (res.ok) {
|
||||
setSuccess(true);
|
||||
refetch();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setError(data.error ?? 'Failed to save');
|
||||
}
|
||||
}
|
||||
|
||||
async function changePassword(e: Event) {
|
||||
e.preventDefault();
|
||||
const f = e.target as HTMLFormElement;
|
||||
const current = (f.elements.namedItem('current') as HTMLInputElement).value;
|
||||
const next = (f.elements.namedItem('next') as HTMLInputElement).value;
|
||||
const confirm_ = (f.elements.namedItem('confirm') as HTMLInputElement).value;
|
||||
if (next !== confirm_) { alert('New passwords do not match'); return; }
|
||||
const res = await fetch(`${API}/api/auth/change-password`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', ...getAuthHeader() },
|
||||
body: JSON.stringify({ current_password: current, new_password: next }),
|
||||
});
|
||||
if (res.ok) { alert('Password changed successfully'); f.reset(); }
|
||||
else { const d = await res.json(); alert(d.error ?? 'Failed'); }
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ 'max-width': '640px' }}>
|
||||
<div style={{ 'margin-bottom': '28px' }}>
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>Account Settings</h1>
|
||||
<p style={{ margin: '6px 0 0', color: '#64748b', 'font-size': '14px' }}>
|
||||
Manage your personal details and password.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={!me.loading}>
|
||||
{/* Personal Details */}
|
||||
<div class="form-card" style={{ 'margin-bottom': '20px' }}>
|
||||
<h3 style={{ margin: '0 0 4px', 'font-size': '16px', 'font-weight': '700' }}>Personal Details</h3>
|
||||
|
||||
<Show when={success()}>
|
||||
<div class="status-banner status-banner--success">✓ Saved successfully</div>
|
||||
</Show>
|
||||
<Show when={error()}>
|
||||
<div class="error-banner">{error()}</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', 'flex-direction': 'column', gap: '14px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Full Name</label>
|
||||
<input class="input" type="text" value={form().full_name} onInput={f('full_name')} maxLength={255} />
|
||||
</div>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': '1fr 1fr', gap: '12px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Phone</label>
|
||||
<input class="input" type="tel" value={form().phone} onInput={f('phone')} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Location</label>
|
||||
<input class="input" type="text" placeholder="City, State" value={form().location} onInput={f('location')} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Bio</label>
|
||||
<textarea class="textarea" placeholder="Brief bio..." style={{ 'min-height': '80px' }}
|
||||
value={form().bio} onInput={f('bio')} maxLength={500} />
|
||||
<span style={{ 'font-size': '11px', color: '#94a3b8' }}>{form().bio.length}/500</span>
|
||||
</div>
|
||||
|
||||
{/* Email — read-only */}
|
||||
<div class="field">
|
||||
<label class="label">Email</label>
|
||||
<div style={{ display: 'flex', gap: '10px', 'align-items': 'center' }}>
|
||||
<input class="input" type="email" value={me()?.email ?? ''} disabled
|
||||
style={{ background: '#f8fafc', color: '#94a3b8' }} />
|
||||
<Show when={!me()?.email_verified}>
|
||||
<span class="badge badge--orange" style={{ 'white-space': 'nowrap' }}>Unverified</span>
|
||||
</Show>
|
||||
<Show when={me()?.email_verified}>
|
||||
<span class="badge badge--green">✓ Verified</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="btn btn-primary" disabled={saving()}>
|
||||
{saving() ? 'Saving...' : '💾 Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Change Password */}
|
||||
<div class="form-card">
|
||||
<h3 style={{ margin: '0 0 16px', 'font-size': '16px', 'font-weight': '700' }}>Change Password</h3>
|
||||
<form onSubmit={changePassword} style={{ display: 'flex', 'flex-direction': 'column', gap: '14px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Current Password</label>
|
||||
<input class="input" type="password" name="current" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">New Password</label>
|
||||
<input class="input" type="password" name="next" required minLength={8} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Confirm New Password</label>
|
||||
<input class="input" type="password" name="confirm" required minLength={8} />
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn">🔒 Update Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
83
src/routes/dashboard/wallet/index.tsx
Normal file
83
src/routes/dashboard/wallet/index.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import { createResource, Show, For } from 'solid-js';
|
||||
import { A } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function Wallet() {
|
||||
const [balance] = createResource(async () => {
|
||||
const res = await fetch(`${API}/api/professionals/wallet/balance`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={{ 'max-width': '900px' }}>
|
||||
<div style={{ 'margin-bottom': '24px' }}>
|
||||
<h1 style={{ margin: 0, 'font-size': '22px', 'font-weight': '800' }}>Wallet</h1>
|
||||
<p style={{ margin: '6px 0 0', color: '#64748b', 'font-size': '14px' }}>
|
||||
Manage your Tracecoins.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Balance Card */}
|
||||
<Show when={!balance.loading}>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': 'repeat(3, 1fr)', gap: '16px', 'margin-bottom': '28px' }}>
|
||||
<div class="table-card" style={{ padding: '24px', 'text-align': 'center' }}>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', 'text-transform': 'uppercase', color: '#94a3b8', 'letter-spacing': '0.08em' }}>
|
||||
Total Balance
|
||||
</div>
|
||||
<div style={{ 'font-size': '40px', 'font-weight': '800', color: '#fd6216', 'margin': '8px 0 4px', 'line-height': '1' }}>
|
||||
🪙 {balance()?.balance ?? 0}
|
||||
</div>
|
||||
<div style={{ 'font-size': '12px', color: '#94a3b8' }}>Tracecoins</div>
|
||||
</div>
|
||||
<div class="table-card" style={{ padding: '24px', 'text-align': 'center' }}>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', 'text-transform': 'uppercase', color: '#94a3b8', 'letter-spacing': '0.08em' }}>
|
||||
Reserved
|
||||
</div>
|
||||
<div style={{ 'font-size': '40px', 'font-weight': '800', color: '#64748b', 'margin': '8px 0 4px', 'line-height': '1' }}>
|
||||
{balance()?.reserved ?? 0}
|
||||
</div>
|
||||
<div style={{ 'font-size': '12px', color: '#94a3b8' }}>Pending requests</div>
|
||||
</div>
|
||||
<div class="table-card" style={{ padding: '24px', 'text-align': 'center' }}>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', 'text-transform': 'uppercase', color: '#94a3b8', 'letter-spacing': '0.08em' }}>
|
||||
Available
|
||||
</div>
|
||||
<div style={{ 'font-size': '40px', 'font-weight': '800', color: '#15803d', 'margin': '8px 0 4px', 'line-height': '1' }}>
|
||||
{balance()?.available ?? 0}
|
||||
</div>
|
||||
<div style={{ 'font-size': '12px', color: '#94a3b8' }}>Ready to use</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div style={{ display: 'flex', gap: '12px', 'flex-wrap': 'wrap', 'margin-bottom': '28px' }}>
|
||||
<A href="/dashboard/wallet/buy" class="btn btn-primary" style={{ 'text-decoration': 'none' }}>
|
||||
🪙 Buy Tracecoins
|
||||
</A>
|
||||
<A href="/dashboard/wallet/ledger" class="btn" style={{ 'text-decoration': 'none' }}>
|
||||
📜 Transaction History
|
||||
</A>
|
||||
<A href="/dashboard/wallet/invoices" class="btn" style={{ 'text-decoration': 'none' }}>
|
||||
🧾 Invoices
|
||||
</A>
|
||||
</div>
|
||||
|
||||
{/* Info box */}
|
||||
<div class="table-card" style={{ padding: '20px', background: '#fffbeb', border: '1px solid #fde68a' }}>
|
||||
<h3 style={{ margin: '0 0 8px', 'font-size': '15px', 'font-weight': '700', color: '#92400e' }}>
|
||||
How Tracecoins work
|
||||
</h3>
|
||||
<ul style={{ margin: 0, 'padding-left': '20px', 'font-size': '13px', color: '#78350f', 'line-height': '1.8' }}>
|
||||
<li>25 Tracecoins are <strong>reserved</strong> when you send a lead request.</li>
|
||||
<li>Tracecoins are <strong>deducted</strong> only when a customer <strong>accepts</strong> your request.</li>
|
||||
<li>Tracecoins are <strong>returned</strong> if your request is rejected or expires within 24 hours.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
114
src/routes/dashboard/wallet/ledger.tsx
Normal file
114
src/routes/dashboard/wallet/ledger.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import { createResource, createSignal, Show, For } from 'solid-js';
|
||||
import { A } from '@solidjs/router';
|
||||
import { getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function WalletLedger() {
|
||||
const [page, setPage] = createSignal(1);
|
||||
|
||||
const [balance] = createResource(async () => {
|
||||
const res = await fetch(`${API}/api/photographers/wallet/balance`, { headers: getAuthHeader() });
|
||||
return res.json();
|
||||
});
|
||||
|
||||
const [ledger] = createResource(() => page(), async (p) => {
|
||||
const res = await fetch(`${API}/api/photographers/wallet/ledger?page=${p}&limit=30`, {
|
||||
headers: getAuthHeader(),
|
||||
});
|
||||
return res.json();
|
||||
});
|
||||
|
||||
const typeLabel: Record<string, string> = {
|
||||
PURCHASE: '🛒 Purchased',
|
||||
DEDUCTED: '🪙 Deducted (lead accepted)',
|
||||
RESERVED: '🔒 Reserved (request sent)',
|
||||
RETURNED: '↩️ Returned (rejected/expired)',
|
||||
BONUS: '🎁 Bonus credited',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ 'max-width': '800px' }}>
|
||||
{/* Balance summary */}
|
||||
<Show when={!balance.loading}>
|
||||
<div style={{ display: 'grid', 'grid-template-columns': 'repeat(3, 1fr)', gap: '12px', 'margin-bottom': '28px' }}>
|
||||
{[
|
||||
{ label: 'Balance', value: balance()?.balance ?? 0, color: '#fd6216' },
|
||||
{ label: 'Reserved', value: balance()?.reserved ?? 0, color: '#64748b' },
|
||||
{ label: 'Available', value: balance()?.available ?? 0, color: '#15803d' },
|
||||
].map(c => (
|
||||
<div class="table-card" style={{ padding: '20px', 'text-align': 'center' }}>
|
||||
<div style={{ 'font-size': '11px', 'font-weight': '700', color: '#94a3b8', 'text-transform': 'uppercase' }}>{c.label}</div>
|
||||
<div style={{ 'font-size': '36px', 'font-weight': '800', color: c.color, 'margin': '6px 0 2px', 'line-height': '1' }}>
|
||||
🪙 {c.value}
|
||||
</div>
|
||||
<div style={{ 'font-size': '11px', color: '#94a3b8' }}>Tracecoins</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Buy button */}
|
||||
<div style={{ display: 'flex', gap: '10px', 'margin-bottom': '24px' }}>
|
||||
<A href="/dashboard/wallet/buy" class="btn btn-primary" style={{ 'text-decoration': 'none' }}>
|
||||
🪙 Buy Tracecoins
|
||||
</A>
|
||||
<A href="/dashboard/wallet/invoices" class="btn" style={{ 'text-decoration': 'none' }}>
|
||||
🧾 Invoices
|
||||
</A>
|
||||
</div>
|
||||
|
||||
{/* Ledger */}
|
||||
<h2 style={{ 'font-size': '16px', 'font-weight': '800', margin: '0 0 12px' }}>Transaction History</h2>
|
||||
|
||||
<div class="table-card">
|
||||
<Show when={ledger.loading}><div class="loading-spinner">Loading...</div></Show>
|
||||
|
||||
<Show when={!ledger.loading && ledger()?.data?.length === 0}>
|
||||
<div style={{ padding: '40px', 'text-align': 'center', color: '#64748b' }}>
|
||||
<div style={{ 'font-size': '36px', 'margin-bottom': '12px' }}>📜</div>
|
||||
<p>No transactions yet.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={ledger()?.data?.length > 0}>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Amount</th><th>Description</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={ledger()?.data}>
|
||||
{(tx: any) => (
|
||||
<tr>
|
||||
<td>{typeLabel[tx.type] ?? tx.type}</td>
|
||||
<td style={{
|
||||
'font-weight': '700',
|
||||
color: tx.amount < 0 ? '#e11d48' : '#15803d'
|
||||
}}>
|
||||
{tx.amount > 0 ? '+' : ''}{tx.amount} 🪙
|
||||
</td>
|
||||
<td style={{ color: '#64748b', 'font-size': '13px' }}>{tx.description ?? '—'}</td>
|
||||
<td style={{ 'font-size': '12px', color: '#94a3b8' }}>
|
||||
{tx.created_at ? new Date(tx.created_at).toLocaleDateString('en-IN') : '—'}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={ledger()?.pagination?.total_pages > 1}>
|
||||
<div style={{ display: 'flex', gap: '8px', 'margin-top': '16px', 'justify-content': 'center' }}>
|
||||
<button class="btn btn-sm" disabled={page() === 1} onClick={() => setPage(p => p - 1)}>← Prev</button>
|
||||
<span style={{ padding: '6px 12px', 'font-size': '13px', color: '#64748b' }}>
|
||||
{page()} / {ledger()?.pagination?.total_pages}
|
||||
</span>
|
||||
<button class="btn btn-sm" disabled={page() >= ledger()?.pagination?.total_pages}
|
||||
onClick={() => setPage(p => p + 1)}>Next →</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
84
src/routes/forgot-password.tsx
Normal file
84
src/routes/forgot-password.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { createSignal, Show } from 'solid-js';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function ForgotPassword() {
|
||||
const [email, setEmail] = createSignal('');
|
||||
const [error, setError] = createSignal('');
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [success, setSuccess] = createSignal(false);
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API}/api/auth/forgot-password`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: email() }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setSuccess(true);
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setError(data.error ?? 'Failed to send reset link');
|
||||
}
|
||||
} catch (e) {
|
||||
setError('Network error. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
height: '100vh', display: 'flex', 'align-items': 'center', 'justify-content': 'center',
|
||||
background: 'linear-gradient(135deg, #eff6ff 0%, #fff 100%)'
|
||||
}}>
|
||||
<div class="form-card" style={{ 'max-width': '400px', width: '100%', padding: '40px' }}>
|
||||
<div style={{ 'text-align': 'center', 'margin-bottom': '24px' }}>
|
||||
<h1 style={{ 'font-size': '24px', 'font-weight': '800', margin: 0 }}>Forgot Password?</h1>
|
||||
<p style={{ color: '#64748b', 'font-size': '14px', 'margin-top': '8px' }}>
|
||||
Enter your email to receive a password reset link.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={success()}>
|
||||
<div class="status-banner status-banner--info" style={{ 'margin-bottom': '20px' }}>
|
||||
✉️ If an account exists, a reset link has been sent.
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={error()}>
|
||||
<div class="error-banner" style={{ 'margin-bottom': '20px' }}>{error()}</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', 'flex-direction': 'column', gap: '20px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Email Address</label>
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="jane@example.com"
|
||||
value={email()}
|
||||
onInput={(e) => setEmail(e.currentTarget.value)}
|
||||
required
|
||||
disabled={success()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit" disabled={loading() || success()} style={{ width: '100%' }}>
|
||||
{loading() ? 'Sending...' : 'Send Reset Link'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div style={{ 'text-align': 'center', 'margin-top': '24px' }}>
|
||||
<a href="/login" style={{ 'font-size': '13px', color: '#fd6216', 'text-decoration': 'none', 'font-weight': '600' }}>Back to login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -145,8 +145,8 @@ export default function OnboardingPage() {
|
|||
const [loading, setLoading] = createSignal(true);
|
||||
const [profileStatus, setProfileStatus] = createSignal<string>('');
|
||||
|
||||
const requestedRoleKey = createMemo(() => normalizeRoleKey(searchParams.roleKey || ''));
|
||||
const requestedProfession = createMemo(() => String(searchParams.profession || '').trim());
|
||||
const requestedRoleKey = createMemo(() => normalizeRoleKey(Array.isArray(searchParams.roleKey) ? searchParams.roleKey[0] : searchParams.roleKey));
|
||||
const requestedProfession = createMemo(() => String((Array.isArray(searchParams.profession) ? searchParams.profession[0] : searchParams.profession) || '').trim());
|
||||
const requestedSchemaId = createMemo(() => {
|
||||
const fromQuery = String(searchParams.schemaId || '').trim();
|
||||
if (fromQuery) return fromQuery;
|
||||
|
|
@ -162,7 +162,7 @@ export default function OnboardingPage() {
|
|||
return;
|
||||
}
|
||||
|
||||
const schemaResponse = await fetch(`/api/runtime/onboarding/schema?${new URLSearchParams({ schemaId }).toString()}`);
|
||||
const schemaResponse = await fetch(`/api/runtime/onboarding/schema?${new URLSearchParams({ schemaId, roleKey: requestedRoleKey() }).toString()}`);
|
||||
const schemaPayload = await schemaResponse.json().catch(() => ({}));
|
||||
if (!schemaResponse.ok || !schemaPayload?.success) {
|
||||
setStatusMessage(schemaPayload?.error || 'Unable to load onboarding schema from backend.');
|
||||
|
|
|
|||
64
src/routes/pending.tsx
Normal file
64
src/routes/pending.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { createResource, Show } from 'solid-js';
|
||||
import { A, useNavigate } from '@solidjs/router';
|
||||
import { authState, getAuthHeader } from '~/lib/auth';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function PendingVerification() {
|
||||
const [status] = createResource(async () => {
|
||||
const token = authState().access_token;
|
||||
if (!token) return null;
|
||||
const res = await fetch(`${API}/api/onboarding/status`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
return res.ok ? res.json() : null;
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="pending-page">
|
||||
<div class="pending-container">
|
||||
<div class="pending-icon">
|
||||
<Show when={status()?.status === 'DOCUMENTS_REQUESTED'} fallback={<span>⏳</span>}>
|
||||
<span>📄</span>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={status.loading}>
|
||||
<p>Loading status...</p>
|
||||
</Show>
|
||||
|
||||
<Show when={status()?.status === 'PENDING_REVIEW'}>
|
||||
<h1>Verification Pending</h1>
|
||||
<p>Your documents are under review. This typically takes 2–3 business days.</p>
|
||||
<p class="pending-submitted">
|
||||
Submitted: {new Date(status()?.submitted_at).toLocaleDateString('en-IN')}
|
||||
</p>
|
||||
</Show>
|
||||
|
||||
<Show when={status()?.status === 'DOCUMENTS_REQUESTED'}>
|
||||
<h1>Additional Documents Required</h1>
|
||||
<p>Our team has reviewed your submission and requires additional information:</p>
|
||||
<div class="pending-request-box">
|
||||
{status()?.document_request}
|
||||
</div>
|
||||
<A href="/onboarding" class="btn btn-primary">Upload Documents</A>
|
||||
</Show>
|
||||
|
||||
<Show when={status()?.status === 'REJECTED'}>
|
||||
<h1>Verification Rejected</h1>
|
||||
<p>Unfortunately your verification was not approved.</p>
|
||||
<Show when={status()?.rejection_reason}>
|
||||
<div class="pending-reason-box">
|
||||
<strong>Reason:</strong> {status()?.rejection_reason}
|
||||
</div>
|
||||
</Show>
|
||||
<A href="/onboarding" class="btn btn-primary">Resubmit</A>
|
||||
</Show>
|
||||
|
||||
<div class="pending-support">
|
||||
Need help? <a href="/contact">Contact support</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
106
src/routes/reset-password.tsx
Normal file
106
src/routes/reset-password.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import { createSignal, Show } from 'solid-js';
|
||||
import { useNavigate, useSearchParams } from '@solidjs/router';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function ResetPassword() {
|
||||
const [params] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const [password, setPassword] = createSignal('');
|
||||
const [confirm, setConfirm] = createSignal('');
|
||||
const [error, setError] = createSignal('');
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [success, setSuccess] = createSignal(false);
|
||||
|
||||
async function handleReset(e: Event) {
|
||||
e.preventDefault();
|
||||
if (password() !== confirm()) {
|
||||
setError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API}/api/auth/reset-password`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
token: params.token,
|
||||
new_password: password()
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setSuccess(true);
|
||||
setTimeout(() => navigate('/login'), 2000);
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setError(data.error ?? 'Invalid or expired reset link');
|
||||
}
|
||||
} catch (e) {
|
||||
setError('Network error. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
height: '100vh', display: 'flex', 'align-items': 'center', 'justify-content': 'center',
|
||||
background: 'linear-gradient(135deg, #f0fdf4 0%, #fff 100%)'
|
||||
}}>
|
||||
<div class="form-card" style={{ 'max-width': '400px', width: '100%', padding: '40px' }}>
|
||||
<div style={{ 'text-align': 'center', 'margin-bottom': '24px' }}>
|
||||
<h1 style={{ 'font-size': '24px', 'font-weight': '800', margin: 0 }}>Reset Password</h1>
|
||||
<p style={{ color: '#64748b', 'font-size': '14px', 'margin-top': '8px' }}>
|
||||
Choose a new secure password.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={success()}>
|
||||
<div class="status-banner status-banner--success" style={{ 'margin-bottom': '20px' }}>
|
||||
✓ Password reset! Redirecting to login...
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={error()}>
|
||||
<div class="error-banner" style={{ 'margin-bottom': '20px' }}>{error()}</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleReset} style={{ display: 'flex', 'flex-direction': 'column', gap: '20px' }}>
|
||||
<div class="field">
|
||||
<label class="label">New Password</label>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
minLength={8}
|
||||
value={password()}
|
||||
onInput={(e) => setPassword(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Confirm New Password</label>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
minLength={8}
|
||||
value={confirm()}
|
||||
onInput={(e) => setConfirm(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit" disabled={loading() || success()} style={{ width: '100%' }}>
|
||||
{loading() ? 'Updating...' : 'Reset Password'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
125
src/routes/verify-email.tsx
Normal file
125
src/routes/verify-email.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
import { createSignal, Show } from 'solid-js';
|
||||
import { useNavigate, useSearchParams } from '@solidjs/router';
|
||||
|
||||
const API = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
|
||||
|
||||
export default function VerifyEmail() {
|
||||
const [params] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const [otp, setOtp] = createSignal(params.code ?? '');
|
||||
const [error, setError] = createSignal('');
|
||||
const [loading, setLoading] = createSignal(false);
|
||||
const [success, setSuccess] = createSignal(false);
|
||||
|
||||
async function handleVerify(e: Event) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API}/api/auth/verify-email`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ otp: otp() }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setSuccess(true);
|
||||
setTimeout(() => navigate('/login'), 2000);
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setError(data.error ?? 'Invalid or expired code');
|
||||
}
|
||||
} catch (e) {
|
||||
setError('Network error. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
height: '100vh', display: 'flex', 'align-items': 'center', 'justify-content': 'center',
|
||||
background: 'linear-gradient(135deg, #fff7ed 0%, #fff 100%)'
|
||||
}}>
|
||||
<div class="form-card" style={{ 'max-width': '400px', width: '100%', padding: '40px' }}>
|
||||
<div style={{ 'text-align': 'center', 'margin-bottom': '24px' }}>
|
||||
<h1 style={{ 'font-size': '24px', 'font-weight': '800', margin: 0 }}>Verify Email</h1>
|
||||
<p style={{ color: '#64748b', 'font-size': '14px', 'margin-top': '8px' }}>
|
||||
Enter the 6-digit code sent to your email.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Show when={success()}>
|
||||
<div class="status-banner status-banner--success" style={{ 'margin-bottom': '20px' }}>
|
||||
✓ Email verified! Redirecting to login...
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={error()}>
|
||||
<div class="error-banner" style={{ 'margin-bottom': '20px' }}>{error()}</div>
|
||||
</Show>
|
||||
|
||||
<form onSubmit={handleVerify} style={{ display: 'flex', 'flex-direction': 'column', gap: '20px' }}>
|
||||
<div class="field">
|
||||
<label class="label">Verification Code</label>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="123456"
|
||||
maxLength={6}
|
||||
value={otp()}
|
||||
onInput={(e) => setOtp(e.currentTarget.value)}
|
||||
required
|
||||
style={{ 'text-align': 'center', 'font-size': '24px', 'letter-spacing': '0.5em', 'font-weight': '700' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit" disabled={loading() || success()} style={{ width: '100%' }}>
|
||||
{loading() ? 'Verifying...' : 'Verify Account'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div style={{ 'text-align': 'center', 'margin-top': '24px' }}>
|
||||
<p style={{ 'font-size': '13px', color: '#64748b' }}>
|
||||
Didn't receive the code?{' '}
|
||||
<button
|
||||
class="btn-link"
|
||||
onClick={async () => {
|
||||
const email = params.email; // Assuming email is in params
|
||||
if (!email) {
|
||||
setError('Email missing from URL. Please try registering again.');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`${API}/api/auth/resend-otp`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email }),
|
||||
});
|
||||
if (res.ok) {
|
||||
setError('');
|
||||
alert('A new code has been sent to your email.');
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setError(data.error ?? 'Failed to resend code');
|
||||
}
|
||||
} catch (e) {
|
||||
setError('Network error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
style={{ color: '#fd6216', border: 'none', background: 'none', padding: 0, cursor: 'pointer', 'font-weight': '600' }}
|
||||
disabled={loading()}
|
||||
>
|
||||
Resend
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
src/routes/workspace.tsx
Normal file
82
src/routes/workspace.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { createSignal, createResource, Show, For } from 'solid-js';
|
||||
import { A, useSearchParams } from '@solidjs/router';
|
||||
import ProfileWidget from '~/components/dashboard/ProfileWidget';
|
||||
|
||||
async function fetchRuntimeConfig(roleKey: string) {
|
||||
const RUST_API_URL = import.meta.env.VITE_RUST_API_URL || 'http://localhost:8080';
|
||||
|
||||
// Try to lookup Role ID first
|
||||
const roleRes = await fetch(`${RUST_API_URL}/api/admin/roles/${roleKey}`);
|
||||
if (!roleRes.ok) throw new Error("Role not found");
|
||||
const role = await roleRes.json();
|
||||
|
||||
// Then fetch Dashboard config for that role
|
||||
const configRes = await fetch(`${RUST_API_URL}/api/admin/dashboard-config/${role.id}?audience=EXTERNAL`);
|
||||
if (!configRes.ok) throw new Error("Dashboard config not found");
|
||||
const dashboardConfig = await configRes.json();
|
||||
|
||||
return dashboardConfig.config_json; // Returns `{ sidebar: [...], widgets: [...] }`
|
||||
}
|
||||
|
||||
export default function WorkspaceLayout(props: { children?: any }) {
|
||||
const [searchParams] = useSearchParams();
|
||||
const rawRoleKey = searchParams.roleKey;
|
||||
const roleKey = () => (Array.isArray(rawRoleKey) ? rawRoleKey[0] : rawRoleKey) || 'PHOTOGRAPHER';
|
||||
|
||||
const [config] = createResource<any, string>(roleKey, fetchRuntimeConfig);
|
||||
|
||||
return (
|
||||
<div class="min-h-screen bg-slate-50 flex">
|
||||
{/* Sidebar rendered magically from Rust Config */}
|
||||
<aside class="w-64 bg-white border-r border-slate-200 flex flex-col">
|
||||
<div class="p-6 border-b border-slate-200">
|
||||
<h1 class="font-bold text-xl text-orange-600">Nxtgauge Workspace</h1>
|
||||
<p class="text-xs text-slate-500 mt-1 capitalize">{roleKey().toLowerCase()}</p>
|
||||
</div>
|
||||
<nav class="flex-1 p-4 space-y-1">
|
||||
<Show when={config.loading}>
|
||||
<p class="text-sm text-slate-500">Loading modules...</p>
|
||||
</Show>
|
||||
<Show when={config.error}>
|
||||
<p class="text-sm text-red-500">Failed to load shell config.</p>
|
||||
</Show>
|
||||
<Show when={config()}>
|
||||
<For each={config().sidebar}>
|
||||
{(item: any) => (
|
||||
<A
|
||||
href={item.route}
|
||||
class="block px-4 py-2 rounded-lg text-slate-700 hover:bg-orange-50 hover:text-orange-600 transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</A>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main class="flex-1 p-8">
|
||||
<Show when={config() && config().widgets}>
|
||||
<div class="grid grid-cols-2 gap-6 mb-8">
|
||||
<For each={config().widgets}>
|
||||
{(widget: any) => (
|
||||
<Show when={widget.enabled}>
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
|
||||
<h3 class="font-medium text-slate-800">{widget.title}</h3>
|
||||
<p class="text-xs text-slate-400 mt-2">Dynamic Widget Module</p>
|
||||
</div>
|
||||
</Show>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Profile Settings specifically for this Role */}
|
||||
<ProfileWidget roleKey={roleKey()} />
|
||||
|
||||
{props.children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue