@flamingo-stack/openframe-frontend-core 0.0.352 → 0.0.353-snapshot.20260701190625

package/dist/utils/platform-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platform-config.d.ts","sourceRoot":"","sources":["../../src/utils/platform-config.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,aAAa;;;;;;;;;;;;CAYzB,CAAC;AAGF,eAAO,MAAM,cAAc;;;;;;;;;;;;CAY1B,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;CAYhC,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;CAOhC,CAAC;AAGF,eAAO,MAAM,eAAe;;;;;;;CAO3B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEvE;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,iCAAiC,CAAC,eAAe,EAAE,cAAc,EAAE,GAAG,gBAAgB,EAAE,CASvG;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,qBAEnD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,UAEpD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CA2B1E;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,GAAE,MAAkB,GAAG,KAAK,CAAC,SAAS,CAyB7G"}
+{"version":3,"file":"platform-config.d.ts","sourceRoot":"","sources":["../../src/utils/platform-config.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,aAAa;;;;;;;;;;;;CAYzB,CAAC;AAGF,eAAO,MAAM,cAAc;;;;;;;;;;;;CAY1B,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;CAYhC,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;CAOhC,CAAC;AAGF,eAAO,MAAM,eAAe;;;;;;;CAO3B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEvE;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,iCAAiC,CAAC,eAAe,EAAE,cAAc,EAAE,GAAG,gBAAgB,EAAE,CASvG;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,qBAEnD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,UAEpD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CA2B1E;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,GAAE,MAAkB,GAAG,KAAK,CAAC,SAAS,CA4B7G"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.352",
+  "version": "0.0.353-snapshot.20260701190625",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/time-tracker/index.ts

@@ -13,6 +13,7 @@ export type { UseTrackerClockArgs } from './use-tracker-clock'
 export type {
   TimeTrackerStatus,
   TimeTrackerTicketOption,
+  TimeTrackerCustomerOption,
   TimeTrackerEntry,
   TimeTrackerData,
 } from './types'

package/src/components/features/time-tracker/time-tracker-panel.tsx

@@ -5,11 +5,13 @@ import { cn } from '../../../utils/cn'
 import { Autocomplete, type AutocompleteOption } from '../../ui/autocomplete'
 import { Button } from '../../ui/button/button'
 import { SplitButton } from '../../ui/button/split-button'
+import { SquareAvatar } from '../../ui/square-avatar'
 import { Tag } from '../../ui/tag'
 import { Textarea } from '../../ui/textarea'
 import {
   ArrowRightUpIcon,
   CheckCircleIcon,
+  CheckIcon,
   Chevron02RightIcon,
   ClockHistoryIcon,
   DotsLoaderIcon,
@@ -21,6 +23,25 @@ import {
 import { useTrackerClock } from './use-tracker-clock'
 import type { TimeTrackerData, TimeTrackerEntry, TimeTrackerStatus } from './types'
 
+interface CustomerAutocompleteOption extends AutocompleteOption {
+  imageUrl?: string
+}
+
+function renderCustomerOption(option: AutocompleteOption, isSelected: boolean) {
+  const { label, imageUrl } = option as CustomerAutocompleteOption
+  return (
+    <div className="flex w-full min-w-0 items-center justify-between gap-[var(--spacing-system-xs)]">
+      <div className="flex min-w-0 items-center gap-[var(--spacing-system-xs)]">
+        <SquareAvatar src={imageUrl} alt={label} fallback={label} size="sm" variant="square" />
+        <span className="truncate" title={label}>
+          {label}
+        </span>
+      </div>
+      {isSelected && <CheckIcon className="text-ods-accent" size={20} />}
+    </div>
+  )
+}
+
 export interface TimeTrackerPanelProps extends TimeTrackerData {
   onClose: () => void
   className?: string
@@ -35,6 +56,12 @@ export function TimeTrackerPanel({
   onSelectedTicketChange,
   onTicketSearch,
   ticketsLoading,
+  customerOptions,
+  selectedCustomerId,
+  onSelectedCustomerChange,
+  onCustomerSearch,
+  customersLoading,
+  customerLocked,
   notes,
   onNotesChange,
   lastEntries,
@@ -102,6 +129,23 @@ export function TimeTrackerPanel({
     value: t.id,
   }))
 
+  const showCustomer = !!onSelectedCustomerChange
+  const customerAutocompleteOptions: CustomerAutocompleteOption[] = (customerOptions ?? []).map((c) => ({
+    label: c.label,
+    value: c.id,
+    imageUrl: c.imageUrl,
+  }))
+  const selectedCustomer = customerAutocompleteOptions.find((o) => o.value === selectedCustomerId)
+  const customerStartAdornment = selectedCustomer ? (
+    <SquareAvatar
+      src={selectedCustomer.imageUrl}
+      alt={selectedCustomer.label}
+      fallback={selectedCustomer.label}
+      size="sm"
+      variant="square"
+    />
+  ) : undefined
+
   const visibleEntries = lastEntries.slice(0, 3)
 
   return (
@@ -173,19 +217,37 @@ export function TimeTrackerPanel({
           )}
         </div>
 
-        <Autocomplete
-          value={selectedTicketId}
-          onChange={onSelectedTicketChange}
-          options={ticketAutocompleteOptions}
-          placeholder="Assign Ticket"
-          loading={ticketsLoading}
-          invalid={showFieldError}
-          error={showFieldError ? 'Required if no notes added' : undefined}
-          disableClientFilter={!!onTicketSearch}
-          onInputChange={(value, reason) => {
-            if (reason === 'input') onTicketSearch?.(value)
-          }}
-        />
+        <div className={cn('grid gap-[var(--spacing-system-m)]', showCustomer && 'grid-cols-2')}>
+          <Autocomplete
+            value={selectedTicketId}
+            onChange={onSelectedTicketChange}
+            options={ticketAutocompleteOptions}
+            placeholder="Select Ticket"
+            loading={ticketsLoading}
+            invalid={showFieldError}
+            error={showFieldError ? 'Required if no notes added' : undefined}
+            disableClientFilter={!!onTicketSearch}
+            onInputChange={(value, reason) => {
+              if (reason === 'input') onTicketSearch?.(value)
+            }}
+          />
+          {showCustomer && (
+            <Autocomplete
+              value={selectedCustomerId ?? null}
+              onChange={onSelectedCustomerChange}
+              options={customerAutocompleteOptions}
+              placeholder="Select Customer"
+              loading={customersLoading}
+              disabled={customerLocked}
+              disableClientFilter={!!onCustomerSearch}
+              onInputChange={(value, reason) => {
+                if (reason === 'input') onCustomerSearch?.(value)
+              }}
+              startAdornment={customerStartAdornment}
+              renderOption={renderCustomerOption}
+            />
+          )}
+        </div>
       </div>
 
       <Textarea

package/src/components/features/time-tracker/types.ts

@@ -5,6 +5,13 @@ export interface TimeTrackerTicketOption {
   label: string
 }
 
+export interface TimeTrackerCustomerOption {
+  id: string
+  label: string
+  /** Fully-resolved avatar image URL (the host resolves it). */
+  imageUrl?: string
+}
+
 export interface TimeTrackerEntry {
   id: string
   /** Pre-formatted duration label, e.g. "00:08:17" (host formats it). */
@@ -38,6 +45,20 @@ export interface TimeTrackerData {
   onTicketSearch?: (query: string) => void
   ticketsLoading?: boolean
 
+  /**
+   * Customer (organization) selection. The panel renders a customer autocomplete
+   * beside the ticket field only when `onSelectedCustomerChange` is provided, so
+   * hosts without a customer concept are unaffected.
+   */
+  customerOptions?: TimeTrackerCustomerOption[]
+  selectedCustomerId?: string | null
+  onSelectedCustomerChange?: (id: string | null) => void
+  /** Called as the user types in the customer field; host performs the search. */
+  onCustomerSearch?: (query: string) => void
+  customersLoading?: boolean
+  /** Lock the customer field (e.g. it was derived from the selected ticket). */
+  customerLocked?: boolean
+
   notes: string
   onNotesChange: (value: string) => void
 

package/src/utils/platform-config.tsx

@@ -199,7 +199,10 @@ export function getPlatformIconComponent(platformName: string, className: string
     case 'openframe':
       return <OpenFrameLogo className={className} />;
     case 'openmsp':
-      return <OpenmspLogo className={className} color="#f1f1f1" />;
+      // `OpenmspLogo` ignores `color`; it uses the three bubble props. On a dark
+      // surface the default black front-bubble vanishes — use the canonical dark
+      // treatment (matches getPlatformIcon above + every hub call-site).
+      return <OpenmspLogo className={className} frontBubbleColor="#f1f1f1" innerFrontBubbleColor="#000000" backBubbleColor="#FFC008" />;
     case 'flamingo':
     case 'flamingo-teaser':
       return <FlamingoLogo className={`${className} text-white`} />;