feat(portal): jobs-forward dashboard layout SCSS

Welcome strip + 4-tile KPI row + jobs hero + secondary 3-panel strip.
Responsive at 768px (KPI grid -> 2x2, secondary -> stacked).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-17 02:40:04 -04:00
parent a6ff3054bc
commit 1780b383b9

View File

@@ -0,0 +1,169 @@
// ============================================================================
// Fusion Plating — Portal · Dashboard layout
// Jobs-forward grid: welcome strip → KPI tile row → hero jobs section →
// secondary panel strip.
// ============================================================================
.o_fp_dashboard {
background: $fp-page-bg;
padding: $fp-space-6;
border-radius: $fp-radius-card;
border: 1px solid $fp-card-border;
font-family: $fp-font;
}
.o_fp_welcome {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: $fp-space-4;
flex-wrap: wrap;
gap: $fp-space-3;
.o_fp_welcome_title {
font-size: 1.15rem;
font-weight: 600;
color: $fp-text;
margin-bottom: .18rem;
}
.o_fp_welcome_sub {
font-size: .82rem;
color: $fp-muted;
}
}
.o_fp_kpi_row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: $fp-space-3;
margin-bottom: $fp-space-5;
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
}
.o_fp_jobs_hero {
margin-bottom: $fp-space-5;
.o_fp_section_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $fp-space-3;
.o_fp_section_title {
font-weight: 600;
font-size: 1rem;
color: $fp-text;
}
}
// Status filter tabs on the jobs hero
.o_fp_status_tabs {
display: flex;
gap: .35rem;
font-size: .74rem;
align-items: center;
background: $fp-card-bg;
border: 1px solid $fp-card-border;
border-radius: $fp-radius-button;
padding: .2rem;
.o_fp_status_tab {
padding: .25rem .6rem;
border-radius: 6px;
color: $fp-muted;
cursor: pointer;
text-decoration: none;
&.active {
background: $fp-gradient-tab;
color: $fp-teal-dark;
font-weight: 600;
}
}
}
.o_fp_view_all {
text-align: center;
padding: .45rem;
a { @extend .o_fp_btn_mint; }
}
}
.o_fp_job_card {
@extend .o_fp_card;
padding: $fp-space-4;
border-radius: $fp-radius-tile;
margin-bottom: $fp-space-3;
box-shadow: $fp-shadow-card;
.o_fp_job_header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $fp-space-3;
.o_fp_job_ref {
font-weight: 600;
color: $fp-text;
font-size: .98rem;
}
.o_fp_job_meta {
color: $fp-muted;
font-size: .8rem;
margin-left: .65rem;
}
}
.o_fp_job_docs {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: $fp-space-3;
padding-top: .6rem;
border-top: 1px solid $fp-section-bg;
}
}
.o_fp_secondary_panels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: $fp-space-3;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
.o_fp_panel {
@extend .o_fp_card_compact;
.o_fp_panel_title {
font-weight: 600;
font-size: .82rem;
color: $fp-text;
margin-bottom: .5rem;
display: flex;
align-items: center;
gap: .4rem;
.o_fp_panel_icon {
background: $fp-gradient-icon;
color: $fp-teal-dark;
width: 24px;
height: 24px;
border-radius: $fp-radius-icon;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .78rem;
}
}
.o_fp_panel_row {
font-size: .72rem;
color: $fp-muted;
margin-top: .2rem;
&:first-of-type { margin-top: 0; }
}
}
}