sky-platform
Priyank DaveI 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`
Comments (0)
Sign in to leave a comment
Profile Information
Update your personal details and how others see you on sky-platform.
Rajesh Kumar
Platform Administrator
Account Security
Change Password
Update your password to keep your account secure
Two-Factor Authentication
Add an extra layer of security to your sky-platform account
2FA StatusEnabled
Your account is protected with two-factor authentication. Each login requires a second verification step.
Authenticator App
Google Authenticator / Authy
SMS Verification
+91 98xxx xxxx7
Active Sessions
Devices currently signed in to your sky-platform account
Chrome on Windows 11Current
Safari on iPhone 15
Chrome on MacBook Pro
Firefox on Ubuntu
Notification Preferences
Control which events trigger notifications and how often you receive digest emails.
Real-Time Notifications
Job Updates
Receive alerts when jobs are created, updated, or change status in ServiceM8.
Quote Follow-ups
Get notified when quotes require follow-up or customer responses are received.
Inventory Alerts
Be alerted when parts fall below reorder levels across warehouses and vans.
System Alerts
Critical platform alerts including integration failures and sync errors.
Email Digest
Email Digest
Consolidated summary of jobs, quotes, and alerts sent to your registered email.
Digest Frequency
How often would you like to receive the digest email?
Appearance Settings
Customize how sky-platform looks and feels for your workflow.
Theme
Font Size
Table Density
Preview
How your selections affect the interface:
Integrations & API
Connect sky-platform with third-party services and manage API access for external applications.
Connected Services
ServiceM8
Job management — job ingestion, scheduling, invoicing
Email Ingestion
Auto-parse job requests and quotes from incoming email
Slack Notifications
Real-time alerts and job status updates to Slack channels
Google Sheets Export
Sync analytics and reports to Google Sheets automatically
API Access
Platform API Key
ActiveUse this key to authenticate external tools and automation scripts with the sky-platform REST API. Keep it secret — do not expose it in client-side code.
Webhooks
Outbound Webhooks
sky-platform will POST a JSON payload to your endpoint when the specified event fires.
Data Management
Export, backup, retention, and privacy controls for your operational data
Data Usage Summary
Export Data
Backup Settings
Data Retention
Privacy & Compliance
Danger Zone
Irreversible and destructive actions. Proceed with extreme caution.
Deactivate Account
Temporarily suspend this account. All active jobs will be paused and ServiceM8 sync will be disabled. You can reactivate at any time.
Delete All Data
Permanently erase all platform data including jobs, inventory records, analytics history, technician profiles, and supplier contacts. This cannot be undone.
No comments yet. Be the first!