@flamingo-stack/openframe-frontend-core 0.0.312 → 0.0.313

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

@@ -30,8 +30,8 @@ export function TimeTrackerPanel({
   runningSince,
   accumulatedMs,
   ticketOptions,
-  selectedTicketIds,
-  onSelectedTicketsChange,
+  selectedTicketId,
+  onSelectedTicketChange,
   onTicketSearch,
   ticketsLoading,
   notes,
@@ -57,7 +57,7 @@ export function TimeTrackerPanel({
 
   const isRunning = status === 'tracking'
   const isActive = status !== 'ready'
-  const hasContent = selectedTicketIds.length > 0 || notes.trim() !== ''
+  const hasContent = selectedTicketId != null || notes.trim() !== ''
   const showFieldError = isActive && showValidationError && !hasContent
 
   // Reset the validation flag once a session ends so the next one starts clean.
@@ -73,6 +73,25 @@ export function TimeTrackerPanel({
     onSubmit()
   }
 
+  const handleManualEntry = onManualEntry
+    ? () => {
+        onClose()
+        onManualEntry()
+      }
+    : undefined
+  const handleEntryClick = onEntryClick
+    ? (entry: TimeTrackerEntry) => {
+        onClose()
+        onEntryClick(entry)
+      }
+    : undefined
+  const handleOpenMyTime = onOpenMyTime
+    ? () => {
+        onClose()
+        onOpenMyTime()
+      }
+    : undefined
+
   const ticketAutocompleteOptions: AutocompleteOption[] = ticketOptions.map((t) => ({
     label: t.label,
     value: t.id,
@@ -150,9 +169,8 @@ export function TimeTrackerPanel({
         </div>
 
         <Autocomplete
-          multiple
-          value={selectedTicketIds}
-          onChange={onSelectedTicketsChange}
+          value={selectedTicketId}
+          onChange={onSelectedTicketChange}
           options={ticketAutocompleteOptions}
           placeholder="Assign Ticket"
           loading={ticketsLoading}
@@ -185,7 +203,7 @@ export function TimeTrackerPanel({
               </div>
             ) : (
               visibleEntries.map((entry) => (
-                <LastEntryRow key={entry.id} entry={entry} onClick={onEntryClick} />
+                <LastEntryRow key={entry.id} entry={entry} onClick={handleEntryClick} />
               ))
             )}
           </div>
@@ -195,7 +213,7 @@ export function TimeTrackerPanel({
           <Button
             variant="outline"
             className="min-w-0 flex-1"
-            onClick={onManualEntry}
+            onClick={handleManualEntry}
             disabled={!onManualEntry}
             leftIcon={<PlusCircleIcon className="text-ods-text-secondary" />}
           >
@@ -203,7 +221,7 @@ export function TimeTrackerPanel({
           </Button>
           <SplitButton
             variant="outline"
-            onClick={onOpenMyTime}
+            onClick={handleOpenMyTime}
             disabled={!onOpenMyTime && !onOpenMyTimeMenu}
             mainDisabled={!onOpenMyTime}
             groupAriaLabel="Open my time"

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

@@ -32,8 +32,8 @@ export interface TimeTrackerData {
   accumulatedMs?: number
 
   ticketOptions: TimeTrackerTicketOption[]
-  selectedTicketIds: string[]
-  onSelectedTicketsChange: (ids: string[]) => void
+  selectedTicketId: string | null
+  onSelectedTicketChange: (id: string | null) => void
   /** Called as the user types in the ticket field; host performs the search. */
   onTicketSearch?: (query: string) => void
   ticketsLoading?: boolean

package/src/components/ui/dashboard-info-card.tsx

@@ -30,6 +30,8 @@ export interface DashboardInfoCardProps {
   tooltip?: React.ReactNode
   /** Override the value text className (default: text-h2) */
   valueClassName?: string
+  /** Secondary text rendered beside the value (e.g. an entry/item count). */
+  subValue?: React.ReactNode
 }
 
 export function DashboardInfoCard({
@@ -43,7 +45,8 @@ export function DashboardInfoCard({
   className,
   href,
   tooltip,
-  valueClassName
+  valueClassName,
+  subValue
 }: DashboardInfoCardProps) {
   const formattedValue = typeof value === 'number'
     ? value.toLocaleString()
@@ -65,6 +68,11 @@ export function DashboardInfoCard({
           <p className={cn("text-h2 text-ods-text-primary", valueClassName)}>
             {formattedValue}
           </p>
+          {subValue && (
+            <p className="text-h6 text-ods-text-secondary">
+              {subValue}
+            </p>
+          )}
           {percentage !== undefined && (
             progressVariant === 'warning' || progressVariant === 'error' ? (
               <Tag variant={progressVariant} label={`${percentage}%`} />

package/src/stories/TimeTracker.stories.tsx

@@ -78,8 +78,8 @@ const meta = {
   args: {
     status: 'ready',
     ticketOptions: ALL_TICKETS,
-    selectedTicketIds: [],
-    onSelectedTicketsChange: () => {},
+    selectedTicketId: null,
+    onSelectedTicketChange: () => {},
     notes: '',
     onNotesChange: () => {},
     lastEntries: SEED_ENTRIES,
@@ -99,7 +99,7 @@ interface HostInit {
   status?: TimeTrackerStatus
   runningSince?: number | null
   accumulatedMs?: number
-  selectedTicketIds?: string[]
+  selectedTicketId?: string | null
   notes?: string
   lastEntries?: TimeTrackerEntry[]
   /** When true, ticket options are filtered asynchronously (server-search simulation). */
@@ -110,7 +110,7 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
   const [status, setStatus] = React.useState<TimeTrackerStatus>(initial.status ?? 'ready')
   const [runningSince, setRunningSince] = React.useState<number | null>(initial.runningSince ?? null)
   const [accumulatedMs, setAccumulatedMs] = React.useState(initial.accumulatedMs ?? 0)
-  const [selectedTicketIds, setSelectedTicketIds] = React.useState<string[]>(initial.selectedTicketIds ?? [])
+  const [selectedTicketId, setSelectedTicketId] = React.useState<string | null>(initial.selectedTicketId ?? null)
   const [notes, setNotes] = React.useState(initial.notes ?? '')
   const [lastEntries, setLastEntries] = React.useState<TimeTrackerEntry[]>(initial.lastEntries ?? SEED_ENTRIES)
 
@@ -138,8 +138,8 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
     runningSince,
     accumulatedMs,
     ticketOptions,
-    selectedTicketIds,
-    onSelectedTicketsChange: setSelectedTicketIds,
+    selectedTicketId,
+    onSelectedTicketChange: setSelectedTicketId,
     onTicketSearch,
     ticketsLoading: initial.serverSearch ? ticketsLoading : undefined,
     notes,
@@ -163,12 +163,12 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
       setStatus('ready')
       setRunningSince(null)
       setAccumulatedMs(0)
-      setSelectedTicketIds([])
+      setSelectedTicketId(null)
       setNotes('')
     },
     onSubmit: () => {
       const ms = currentElapsedMs()
-      const ticketId = selectedTicketIds[0]
+      const ticketId = selectedTicketId
       const entry: TimeTrackerEntry = {
         id: `entry-${Date.now()}`,
         durationLabel: formatDuration(ms),
@@ -182,7 +182,7 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
       setStatus('ready')
       setRunningSince(null)
       setAccumulatedMs(0)
-      setSelectedTicketIds([])
+      setSelectedTicketId(null)
       setNotes('')
     },
     onManualEntry: () => alert('Host: open the manual-entry form modal'),
@@ -224,7 +224,7 @@ export const PanelTracking: Story = {
     const host = useTimeTrackerHost({
       status: 'tracking',
       runningSince: Date.now() - 5_000,
-      selectedTicketIds: ['TICK-102'],
+      selectedTicketId: 'TICK-102',
     })
     return (
       <div className="max-w-[460px]">