@schandlergarcia/sf-web-components 2.0.0 → 2.1.0

package/brands/engine/global.css

@@ -0,0 +1,234 @@
+@import '@heroui/styles';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}
+
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@source "../components/library";
+@source "../components/pages";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Engine brand palette — official guidelines */
+  --color-engine-black:  #0D1117;
+  --color-engine-cyan:   #7DCBD9;
+  --color-engine-green:  #1E9D6D;
+  --color-engine-blue:   #157DE5;
+  --color-engine-orange: #FD4B23;
+  --color-engine-amber:  #FFB200;
+  --color-engine-bg:     #F3F3F4;
+  --color-engine-border: #B0B1B3;
+  --color-engine-text:   #0D1117;
+  --color-engine-muted:  #616368;
+  --color-engine-label:  #B0B1B3;
+
+  /* Engine Cyan brand ramp */
+  --color-brand-50:  #F0FAFB;
+  --color-brand-100: #D9F2F5;
+  --color-brand-200: #B3E5EB;
+  --color-brand-300: #7DCBD9;
+  --color-brand-400: #5BB8CA;
+  --color-brand-500: #3AA0B5;
+  --color-brand-600: #2D849A;
+  --color-brand-700: #266B7E;
+  --color-brand-800: #235768;
+  --color-brand-900: #1F4858;
+  --color-brand-950: #112E3A;
+
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --radius-pill: 9999px;
+  --radius-card: 10px;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/*
+ * Restore HeroUI theme variables inside the Command Center scope.
+ * Uses Engine brand colors: Cyan #7DCBD9 as secondary, Orange-Red #FD4B23 as danger.
+ */
+.heroui-scope {
+  --primary: #0D1117;
+  --primary-foreground: oklch(0.9911 0 0);
+  --secondary: #7DCBD9;
+  --secondary-foreground: #0D1117;
+  --success: #1E9D6D;
+  --success-foreground: oklch(0.9911 0 0);
+  --warning: #FFB200;
+  --warning-foreground: #0D1117;
+  --danger: #FD4B23;
+  --danger-foreground: oklch(0.9911 0 0);
+
+  --muted: oklch(0.5517 0.0138 285.94);
+  --accent: oklch(0.6204 0.195 253.83);
+  --accent-foreground: oklch(0.9911 0 0);
+  --background: #F3F3F4;
+  --foreground: #0D1117;
+  --default: oklch(94% 0.001 286.375);
+  --default-foreground: #0D1117;
+  --border: #B0B1B3;
+  --separator: oklch(92% 0.004 286.32);
+  --segment: oklch(100% 0 0);
+  --segment-foreground: #0D1117;
+  --surface: oklch(100% 0 0);
+  --surface-foreground: #0D1117;
+  --overlay: oklch(100% 0 0);
+  --overlay-foreground: #0D1117;
+  --focus: #157DE5;
+  --link: #0D1117;
+}
+
+/* ChatBar expanded overlay — horizontal padding so it doesn't hit window edges */
+body > .fixed.inset-x-0.rounded-2xl {
+  left: 1.5rem !important;
+  right: 1.5rem !important;
+}
+
+.dark .heroui-scope,
+.heroui-scope.dark {
+  --muted: oklch(70.5% 0.015 286.067);
+  --background: oklch(12% 0.005 285.823);
+  --foreground: oklch(0.9911 0 0);
+  --default: oklch(27.4% 0.006 286.033);
+  --default-foreground: oklch(0.9911 0 0);
+  --border: oklch(28% 0.006 286.033);
+  --separator: oklch(25% 0.006 286.033);
+  --segment: oklch(0.3964 0.01 285.93);
+  --segment-foreground: oklch(0.9911 0 0);
+  --surface: oklch(0.2103 0.0059 285.89);
+  --surface-foreground: oklch(0.9911 0 0);
+  --overlay: oklch(0.2103 0.0059 285.89);
+  --overlay-foreground: oklch(0.9911 0 0);
+  --warning: oklch(0.8203 0.1388 76.34);
+  --warning-foreground: #0D1117;
+  --danger: oklch(0.594 0.1967 24.63);
+  --danger-foreground: oklch(0.9911 0 0);
+  --focus: #157DE5;
+  --link: oklch(0.9911 0 0);
+}

package/brands/engine/schema.graphql

@@ -0,0 +1,292 @@
+"""
+Generated schema for Engine Travel Command Center
+Source: src/data/engine-sample-data.js field names
+Note: This is a minimal schema for GraphQL tooling when introspection is broken
+"""
+
+schema {
+  query: Query
+}
+
+type Query {
+  uiapi: UIAPI!
+}
+
+type UIAPI {
+  query: UIAPIQuery!
+}
+
+type UIAPIQuery {
+  Contact(first: Int, after: String, where: ContactFilter): ContactConnection
+  Trip__c(first: Int, after: String, where: Trip__cFilter): Trip__cConnection
+  Flight__c(first: Int, after: String, where: Flight__cFilter): Flight__cConnection
+  Booking__c(first: Int, after: String, where: Booking__cFilter): Booking__cConnection
+  Disruption__c(first: Int, after: String, where: Disruption__cFilter): Disruption__cConnection
+  Rebooking_Action__c(first: Int, after: String, where: Rebooking_Action__cFilter): Rebooking_Action__cConnection
+  Travel_Policy__c(first: Int, after: String, where: Travel_Policy__cFilter): Travel_Policy__cConnection
+}
+
+# Field value wrappers for FLS
+type FieldValueString {
+  value: String
+  displayValue: String
+}
+
+type FieldValueFloat {
+  value: Float
+  displayValue: String
+}
+
+type FieldValueBoolean {
+  value: Boolean
+  displayValue: String
+}
+
+type FieldValueID {
+  value: ID
+  displayValue: String
+}
+
+# Contact (Travelers)
+type Contact {
+  Id: ID!
+  FirstName: FieldValueString
+  LastName: FieldValueString
+  Department: FieldValueString
+  Home_Airport__c: FieldValueString
+  Travel_Policy_Tier__c: FieldValueString
+  Is_Active_Traveler__c: FieldValueBoolean
+  Role__c: FieldValueString
+}
+
+type ContactEdge {
+  node: Contact!
+  cursor: String!
+}
+
+type ContactConnection {
+  edges: [ContactEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input ContactFilter {
+  Id: IDFilter
+  FirstName: StringFilter
+  LastName: StringFilter
+  Department: StringFilter
+}
+
+# Trip__c
+type Trip__c {
+  Id: ID!
+  Trip_Name__c: FieldValueString
+  Contact__c: FieldValueString
+  Origin_City__c: FieldValueString
+  Origin_Airport__c: FieldValueString
+  Destination_City__c: FieldValueString
+  Destination_Airport__c: FieldValueString
+  Start_Date__c: FieldValueString
+  End_Date__c: FieldValueString
+  Status__c: FieldValueString
+  Total_Cost__c: FieldValueFloat
+  In_Policy__c: FieldValueBoolean
+  Has_Disruption__c: FieldValueBoolean
+}
+
+type Trip__cEdge {
+  node: Trip__c!
+  cursor: String!
+}
+
+type Trip__cConnection {
+  edges: [Trip__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Trip__cFilter {
+  Id: IDFilter
+  Trip_Name__c: StringFilter
+  Status__c: StringFilter
+}
+
+# Flight__c
+type Flight__c {
+  Id: ID!
+  Flight_Number__c: FieldValueString
+  Airline__c: FieldValueString
+  Departure_Airport__c: FieldValueString
+  Departure_City__c: FieldValueString
+  Departure_Longitude__c: FieldValueFloat
+  Departure_Latitude__c: FieldValueFloat
+  Arrival_Airport__c: FieldValueString
+  Arrival_City__c: FieldValueString
+  Arrival_Longitude__c: FieldValueFloat
+  Arrival_Latitude__c: FieldValueFloat
+  Departure_DateTime__c: FieldValueString
+  Flight_Status__c: FieldValueString
+  Delay_Minutes__c: FieldValueFloat
+  Cabin_Class__c: FieldValueString
+  Contact__c: FieldValueString
+}
+
+type Flight__cEdge {
+  node: Flight__c!
+  cursor: String!
+}
+
+type Flight__cConnection {
+  edges: [Flight__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Flight__cFilter {
+  Id: IDFilter
+  Flight_Number__c: StringFilter
+  Flight_Status__c: StringFilter
+}
+
+# Booking__c
+type Booking__c {
+  Id: ID!
+  Contact__c: FieldValueString
+  Booking_Type__c: FieldValueString
+  Status__c: FieldValueString
+  Cost__c: FieldValueFloat
+  In_Policy__c: FieldValueBoolean
+}
+
+type Booking__cEdge {
+  node: Booking__c!
+  cursor: String!
+}
+
+type Booking__cConnection {
+  edges: [Booking__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Booking__cFilter {
+  Id: IDFilter
+  Status__c: StringFilter
+}
+
+# Disruption__c
+type Disruption__c {
+  Id: ID!
+  Flight_Number__c: FieldValueString
+  Disruption_Type__c: FieldValueString
+  Severity__c: FieldValueString
+  Status__c: FieldValueString
+  Impacted_Flight__c: FieldValueString
+  Trip__c: FieldValueString
+  City__c: FieldValueString
+  Affected_Traveler_Count__c: FieldValueFloat
+  Auto_Rebook_Eligible__c: FieldValueBoolean
+  Recommended_Action__c: FieldValueString
+  Description__c: FieldValueString
+}
+
+type Disruption__cEdge {
+  node: Disruption__c!
+  cursor: String!
+}
+
+type Disruption__cConnection {
+  edges: [Disruption__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Disruption__cFilter {
+  Id: IDFilter
+  Severity__c: StringFilter
+  Status__c: StringFilter
+}
+
+# Rebooking_Action__c
+type Rebooking_Action__c {
+  Id: ID!
+  Action_Type__c: FieldValueString
+  Status__c: FieldValueString
+  Handled_By__c: FieldValueString
+  Contact__c: FieldValueString
+  Original_Flight__c: FieldValueString
+  New_Flight__c: FieldValueString
+  Cost_Difference__c: FieldValueFloat
+  Notes__c: FieldValueString
+  Created_DateTime__c: FieldValueString
+}
+
+type Rebooking_Action__cEdge {
+  node: Rebooking_Action__c!
+  cursor: String!
+}
+
+type Rebooking_Action__cConnection {
+  edges: [Rebooking_Action__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Rebooking_Action__cFilter {
+  Id: IDFilter
+  Status__c: StringFilter
+}
+
+# Travel_Policy__c
+type Travel_Policy__c {
+  Id: ID!
+  Name: FieldValueString
+  Description__c: FieldValueString
+  Active__c: FieldValueBoolean
+  Policy_Tier__c: FieldValueString
+  Max_Flight_Cost__c: FieldValueFloat
+  Max_Hotel_Rate__c: FieldValueFloat
+  Advance_Booking_Days__c: FieldValueFloat
+  Preferred_Airlines__c: FieldValueString
+  Preferred_Hotel_Chains__c: FieldValueString
+}
+
+type Travel_Policy__cEdge {
+  node: Travel_Policy__c!
+  cursor: String!
+}
+
+type Travel_Policy__cConnection {
+  edges: [Travel_Policy__cEdge!]!
+  pageInfo: PageInfo!
+  totalCount: Int
+}
+
+input Travel_Policy__cFilter {
+  Id: IDFilter
+  Policy_Tier__c: StringFilter
+}
+
+# Pagination
+type PageInfo {
+  hasNextPage: Boolean!
+  hasPreviousPage: Boolean!
+  startCursor: String
+  endCursor: String
+}
+
+# Filter input types
+input IDFilter {
+  eq: ID
+  ne: ID
+  in: [ID!]
+  nin: [ID!]
+}
+
+input StringFilter {
+  eq: String
+  ne: String
+  like: String
+  in: [String!]
+  nin: [String!]
+}

package/brands/engine/useEngineLiveData.ts

@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+import * as live from "@/data/engine-live-data";
+
+const SIMULATED_LOAD_MS = 2000;
+
+export interface EngineLiveData {
+  loading: boolean;
+  mapMarkers: typeof live.MAP_MARKERS;
+  mapArcs: typeof live.MAP_ARCS;
+  mapOverlays: typeof live.MAP_OVERLAYS;
+  flightStatusList: typeof live.FLIGHT_STATUS_LIST;
+  travelerCards: typeof live.TRAVELER_CARDS;
+  disruptionCards: typeof live.DISRUPTION_CARDS;
+  escalationCards: typeof live.ESCALATION_CARDS;
+  monthlySpend: typeof live.MONTHLY_SPEND;
+  metrics: typeof live.METRICS;
+}
+
+/**
+ * Provides the live dataset for the Engine Travel Command Center.
+ *
+ * Simulates a 2-second network fetch, then resolves with all live data.
+ * Does NOT control the data mode — that's handled by ENABLE_SAMPLE_DATA_CACHE
+ * in src/lib/dataStrategy.ts. When the flag is false, every useDataSource call
+ * returns its live prop (which this hook provides) instead of its sample prop.
+ */
+export function useEngineLiveData(): EngineLiveData {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, SIMULATED_LOAD_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return {
+    loading,
+    mapMarkers: live.MAP_MARKERS,
+    mapArcs: live.MAP_ARCS,
+    mapOverlays: live.MAP_OVERLAYS,
+    flightStatusList: live.FLIGHT_STATUS_LIST,
+    travelerCards: live.TRAVELER_CARDS,
+    disruptionCards: live.DISRUPTION_CARDS,
+    escalationCards: live.ESCALATION_CARDS,
+    monthlySpend: live.MONTHLY_SPEND,
+    metrics: live.METRICS,
+  };
+}