sky-platform

byPriyank Dave

I want to create platform of GE Powerzone Operations is an AI-enabled service operations platform built by Ethical Edge Solutions for Gas Electrical Powerzone. It automates job ingestion from emails and PDFs into ServiceM8, manages inventory across warehouses and vans, and drives smart quote follow-ups and supplier communications. The platform provides full operational visibility through real-time dashboards, YoY analytics, and technician performance tracking — all in one connected system. now i will give how i want page design similar as my requirements # Dashboard Page ## Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ TOPBAR: "Dashboard" [🔍 Search…] [🔔7] [KE Kylie E.] │ ├─────────────────────────────────────────────────────────────┤ │ [KPI Card 1] [KPI Card 2] [KPI Card 3] [KPI Card 4] │ ← 4-col grid ├─────────────────────────────────────────────────────────────┤ │ Job Pipeline strip (8 stage pills, full width) │ ├─────────────────────────────────────────────────────────────┤ │ Recent Jobs table (~72% width) │ Alerts & Actions (~28%) │ └─────────────────────────────────────────────────────────────┘ ``` - Content padding: `24px` - Section gap: `24px` - All cards background: `#1C2A3A`, border `1px solid #263547`, border-radius `12px` --- ## Colors | Element | Hex | |---|---| | Page background | `#0F1923` | | Card / panel background | `#1C2A3A` | | Card border | `#263547` | | Row hover | `#1E2F42` | | Text primary | `#FFFFFF` | | Text secondary / labels | `#8A9BB0` | | Text muted | `#566A7E` | | Positive delta (↑) | `#22C55E` | | Negative delta (↓) | `#EF4444` | | Job number links | `#3B82F6` | | "View All →" link | `#3B82F6` | --- ## Topbar - Height: `56px`, background `#162030`, border-bottom `1px solid #263547` - Left: Page title "Dashboard", `22px`, `700`, `#FFFFFF` - Center-right: Search input - Width `280px`, height `36px`, bg `#1C2A3A`, border `1px solid #263547`, border-radius `8px` - 🔍 icon left, `#566A7E`; placeholder "Search jobs, customers, parts…", `#566A7E`, `14px` - Right side (flex row, gap `12px`): - Notification bell: `36×36px` circle, bg `#1C2A3A`, bell icon `#8A9BB0`; red badge `#EF4444` top-right, white "7" - Avatar: `36×36px` circle, bg `#22C55E`, "KE" bold white `13px` - Name "Kylie E." `13px`, `#FFFFFF`, right of avatar --- ## KPI Cards (4-column grid) - Grid: `repeat(4, 1fr)`, gap `16px` - Card: bg `#1C2A3A`, border `1px solid #263547`, border-radius `12px`, padding `20px` - Top accent bar: `3px solid` per card color, border-radius top `12px` | # | Title | Value | Delta | Icon | Accent Color | |---|---|---|---|---|---| | 1 | Active Jobs | **47** | ↑ +12% vs yesterday | 📄 document | `#3B82F6` | | 2 | Pending Quotes | **8** | ↑ +2 new today | 💬 chat | `#F59E0B` | | 3 | Completed Today | **15** | ↑ +18% this week | ✅ check | `#22C55E` | | 4 | Overdue Jobs | **3** | ↓ 2 critical actions | ⚠️ warning | `#EF4444` | ### Card internals (top → bottom): 1. Large number: `40px`, `800`, `#FFFFFF` — top-left 2. Icon container: `40×40px`, bg `#263547`, border-radius `10px`, icon `22px` — top-right (float right) 3. Label: `13px`, `400`, `#8A9BB0` — below number 4. Delta text: `12px`, `500`, green or red — below label - "↓ 2 critical actions" uses `#EF4444` --- ## Job Pipeline Strip - Full-width card, bg `#1C2A3A`, border-radius `12px`, padding `16px 20px` - Header row: - Left: "Job Pipeline", `14px`, `700`, `#FFFFFF` - Right: "70 active jobs across 8 stages — synced from ServiceM8", `12px`, `#566A7E` - 8 stage pills: horizontal flex, gap `8px`, margin-top `12px` ### Stage Pills Each pill: bg `#0F1923`, border `1.5px solid [stage color]`, border-radius `8px`, padding `12px 16px`, text-align center, min-width `~120px` | Stage | Number | Color | |---|---|---| | Work Orders | 23 | `#3B82F6` | | Quote Required | 8 | `#F59E0B` | | P&A Requested | 6 | `#6366F1` | | Awaiting Approval | 5 | `#F97316` | | Parts on Order | 8 | `#14B8A6` | | Sched. Ready | 4 | `#14B8A6` | | In Progress | 7 | `#3B82F6` | | Awaiting Invoice | 9 | `#22C55E` | - Number: `24px`, `700`, stage color - Label: `11px`, `400`, `#8A9BB0`, margin-top `4px` --- ## Recent Jobs Table - Width: ~72% (left portion of bottom row) - Card: bg `#1C2A3A`, border-radius `12px` - Header bar: padding `16px 20px` - Left: "Recent Jobs", `14px`, `700`, `#FFFFFF` - Right: "View All →", `13px`, `#3B82F6` ### Columns | Column | Width | Style | |---|---|---| | JOB # | `90px` | `#3B82F6`, `600` (link) | | CUSTOMER | `160px` | `#FFFFFF`, `400` | | APPLIANCE | `120px` | `#8A9BB0`, `400` | | TECHNICIAN | `110px` | `#8A9BB0`, `400` | | STATUS | `160px` | Status badge pill | | DAYS | `60px` | Color-coded number, bold | - Column headers: `11px uppercase`, `#566A7E`, `letter-spacing: 0.05em`, padding `10px 20px` - Rows: padding `12px 20px`, border-top `1px solid #263547`, hover bg `#1E2F42` - Row height: `~48px` ### Days Color Coding | Range | Color | |---|---| | 1–2d | `#FFFFFF` | | 3–4d | `#F59E0B` | | 5d+ | `#EF4444` | ### Status Badge Pills Pill: border-radius `20px`, padding `4px 10px`, `11px`, `600`; dot `6px` circle prefix | Status | Background | Text Color | Dot | |---|---|---|---| | P&A Requested | `#6366F120` | `#A5B4FC` | `#6366F1` | | Quote Required | `#F59E0B20` | `#FCD34D` | `#F59E0B` | | In Progress | `#3B82F620` | `#93C5FD` | `#3B82F6` | | Awaiting Approval | `#F9731620` | `#FCA574` | `#F97316` | | Parts on Order | `#14B8A620` | `#5EEAD4` | `#14B8A6` | ### Sample Rows | Job # | Customer | Appliance | Technician | Status | Days | |---|---|---|---|---|---| | 26-0503 | Blue Care Labrador | Dishwasher | Nathan K. | P&A Requested | 3d | | 26-0502 | QT Fuel Mango Hill | Pizza Oven | Kyle N. | Quote Required | 1d | | 26-0501 | Wet N Wild | Combi Oven | Dan R. | In Progress | 2d | | 26-0500 | Stadium Australia | Glass Washer | Kyle N. | Awaiting Approval | 6d | | 26-0499 | McDonald's Strathpine | Deep Fryer | Nathan K. | Parts on Order | 4d | --- ## Alerts & Actions Panel - Width: ~28% (right portion of bottom row) - Card: bg `#1C2A3A`, border-radius `12px`, padding `16px 20px` - Header: "Alerts & Actions" `14px 700 #FFFFFF` left + "5 active" amber pill right - Pill: bg `#F59E0B20`, text `#FCD34D`, `11px 600`, border-radius `10px`, padding `3px 8px` ### Alert Row Structure - Border-radius: `8px`, padding `10px 12px`, margin-bottom `8px` - Left border: `4px solid` (red or amber) - Dot: `10px` circle, top-left of row - Text: `13px`, `#FFFFFF`, 2-line max, margin-left `12px` - Action button: below text, `border-radius: 6px`, bg `#263547`, white `12px 600`, padding `4px 12px` | Priority | Left Border | Dot | Content | Button | |---|---|---|---|---| | 🔴 Critical | `#EF4444` | `#EF4444` | "Hobart Spares — no P&A response in 8 days" | `Follow Up` | | 🔴 Critical | `#EF4444` | `#EF4444` | "Stadium Australia quote pending 6 days" | `Remind` | | 🟡 Warning | `#F59E0B` | `#F59E0B` | "Low stock: Thermocouple K-Type (3 left)" | `Create PO` | | 🟠 Expiry | `#F97316` | `#F97316` | "QT Fuel quote expiring in 2 days" | *(bell icon only)* | --- ## Sidebar (shared across all pages) - Width: `240px`, fixed left, full height, bg `#162030` - Top: logo block (36px icon + app name + subtitle), padding `20px 16px` - Section label "MAIN MENU": `10px uppercase`, `#566A7E`, padding `16px 16px 6px` ### Nav Items - Padding: `10px 16px`, border-radius `8px` (inside sidebar), margin `2px 8px` - Icon: `18px`, left; label: `14px`; badge: right - **Active state**: bg `#1C2A3A`, left border `3px solid #22C55E`, text `#FFFFFF`, icon white - **Inactive state**: bg transparent, text `#8A9BB0` - Badge pill: bg `#263547`, text `#FFFFFF`, `11px 600`, border-radius `10px`, padding `2px 7px` | Icon | Label | Badge | |---|---|---| | 📊 | Dashboard | — (active) | | 📄 | Jobs | 12 | | 💬 | Quotes & Follow-ups | 5 | | 📦 | Inventory | 3 | | 📈 | Analytics | — | - "SYSTEM" section label same style as MAIN MENU - ⚙️ Settings — no badge ### Sidebar Footer (bottom) - Avatar: `32×32px` circle, bg `#22C55E`, "KE" bold white `12px` - Name: "Kylie Ellwood", `13px 600 #FFFFFF` - Role: "Administrator", `11px #8A9BB0` - Padding: `16px`