@open-mercato/core 0.5.1-develop.2996.ce62fd491c → 0.5.1-develop.3032.01699048cb

package/src/modules/customers/components/detail/ActivitiesCard.tsx

@@ -0,0 +1,231 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, CalendarClock, Clock, Mail, Phone, StickyNote, Users } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { ActivitiesDayStrip } from './ActivitiesDayStrip'
+import { ActivitiesAddNewMenu, type ActivityKind } from './ActivitiesAddNewMenu'
+import type { InteractionSummary } from './types'
+
+interface ActivitiesCardProps {
+  entityId: string
+  plannedActivities: InteractionSummary[]
+  refreshKey?: number
+  onAddNew: (kind: ActivityKind) => void
+  onEditActivity?: (activity: InteractionSummary) => void
+  /**
+   * Optional company name for the parent entity. When the planned activity has no `dealTitle`,
+   * the row subtitle falls back to "{type} · {company}" to mirror Figma 784:809.
+   */
+  entityCompanyName?: string | null
+}
+
+const TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  call: Phone,
+  email: Mail,
+  meeting: Users,
+  note: StickyNote,
+}
+
+function startOfDay(date: Date): Date {
+  const next = new Date(date)
+  next.setHours(0, 0, 0, 0)
+  return next
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function isOverdue(activity: InteractionSummary, now: Date): boolean {
+  const scheduled = activity.scheduledAt ?? activity.occurredAt
+  if (!scheduled) return false
+  const date = new Date(scheduled)
+  if (Number.isNaN(date.getTime())) return false
+  return date.getTime() < now.getTime() && activity.status !== 'done'
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatRelativeDay(date: Date, t: TranslateFn): string {
+  const now = new Date()
+  const today = startOfDay(now)
+  const target = startOfDay(date)
+  const diff = Math.round((target.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+  if (diff === 0) return t('customers.timeline.date.today', 'today')
+  if (diff === 1) return t('customers.timeline.date.tomorrow', 'tomorrow')
+  if (diff === -1) return t('customers.timeline.date.yesterday', 'yesterday')
+  return target.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })
+}
+
+function formatDuration(minutes: number, t: TranslateFn): string {
+  if (minutes >= 60) {
+    const hours = Math.round((minutes / 60) * 10) / 10
+    return t('customers.activities.calendar.hoursShort', '{hours}h', { hours })
+  }
+  return t('customers.activities.calendar.minutesShort', '{minutes}m', { minutes })
+}
+
+export function ActivitiesCard({
+  entityId,
+  plannedActivities,
+  refreshKey = 0,
+  onAddNew,
+  onEditActivity,
+  entityCompanyName,
+}: ActivitiesCardProps) {
+  const t = useT()
+  const [selectedDate, setSelectedDate] = React.useState<Date>(() => startOfDay(new Date()))
+
+  const eventsForSelectedDay = React.useMemo(() => {
+    const items = plannedActivities.filter((activity) => {
+      const scheduled = activity.scheduledAt ?? activity.occurredAt
+      if (!scheduled) return false
+      const date = new Date(scheduled)
+      if (Number.isNaN(date.getTime())) return false
+      return isSameDay(date, selectedDate)
+    })
+    return items.sort((left, right) => {
+      const leftTime = new Date(left.scheduledAt ?? left.occurredAt ?? left.createdAt).getTime()
+      const rightTime = new Date(right.scheduledAt ?? right.occurredAt ?? right.createdAt).getTime()
+      return leftTime - rightTime
+    })
+  }, [plannedActivities, selectedDate])
+
+  const overdueCount = React.useMemo(() => {
+    const now = new Date()
+    return plannedActivities.filter((activity) => isOverdue(activity, now)).length
+  }, [plannedActivities])
+
+  return (
+    <div className="flex flex-col gap-3 rounded-lg border border-border bg-card pt-4 pb-4 px-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Calendar className="size-4 text-foreground" />
+          <h3 className="text-sm font-semibold leading-none text-foreground">
+            {t('customers.activities.card.title', 'Activities')}
+          </h3>
+          {overdueCount > 0 ? (
+            <span className="inline-flex items-center gap-1 rounded-full bg-status-error-bg px-1.5 py-0.5 text-xs font-medium text-status-error-text">
+              <CalendarClock className="size-3" />
+              {t('customers.activities.card.overdue', '{count} overdue', { count: overdueCount })}
+            </span>
+          ) : null}
+        </div>
+        <ActivitiesAddNewMenu onSelect={onAddNew} />
+      </div>
+
+      <ActivitiesDayStrip
+        entityId={entityId}
+        selectedDate={selectedDate}
+        onSelectDate={setSelectedDate}
+        refreshKey={refreshKey}
+      />
+
+      {eventsForSelectedDay.length > 0 ? (
+        <>
+          <div className="h-px w-full bg-border" />
+          <ul className="flex flex-col">
+            {eventsForSelectedDay.map((activity) => (
+              <PlannedEventRow
+                key={activity.id}
+                activity={activity}
+                onClick={onEditActivity}
+                entityCompanyName={entityCompanyName ?? null}
+                t={t}
+              />
+            ))}
+          </ul>
+        </>
+      ) : (
+        <>
+          <div className="h-px w-full bg-border" />
+          <p className="px-1 py-2 text-xs text-muted-foreground">
+            {t('customers.activities.card.empty', 'Nothing scheduled for this day.')}
+          </p>
+        </>
+      )}
+    </div>
+  )
+}
+
+interface PlannedEventRowProps {
+  activity: InteractionSummary
+  onClick?: (activity: InteractionSummary) => void
+  entityCompanyName: string | null
+  t: TranslateFn
+}
+
+function PlannedEventRow({ activity, onClick, entityCompanyName, t }: PlannedEventRowProps) {
+  const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt
+  const date = new Date(dateStr)
+  const validDate = !Number.isNaN(date.getTime())
+  const Icon = TYPE_ICONS[activity.interactionType] ?? Users
+  const duration = typeof activity.duration === 'number' && activity.duration > 0 ? activity.duration : null
+  const overdue = validDate && date.getTime() < Date.now() && activity.status !== 'done'
+  const typeLabel = labelForType(activity.interactionType, t)
+  const subtitleSuffix = activity.dealTitle ?? entityCompanyName ?? null
+  const subtitle = subtitleSuffix ? `${typeLabel} · ${subtitleSuffix}` : typeLabel
+  const interactive = !!onClick
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={interactive ? () => onClick?.(activity) : undefined}
+        disabled={!interactive}
+        className={cn(
+          'flex w-full items-start gap-[9px] pt-[8px] text-left transition-colors',
+          interactive ? 'cursor-pointer rounded-md hover:bg-accent/30 px-1' : 'px-1',
+        )}
+      >
+        <div className="flex h-[44px] w-[43px] shrink-0 flex-col gap-[2px] pt-[2px]">
+          <span className="text-xs font-semibold leading-none text-foreground">
+            {validDate ? formatTime(date) : ''}
+          </span>
+          <span className="text-[10px] leading-none font-normal text-muted-foreground">
+            {validDate ? formatRelativeDay(date, t) : ''}
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center justify-center rounded-full bg-muted border-4 border-background size-7">
+          <Icon className="size-4 text-muted-foreground" />
+        </div>
+        <div className="min-w-0 flex flex-1 flex-col gap-[4px]">
+          <span className="text-sm leading-5 tracking-[-0.084px] text-foreground">
+            {activity.title ?? activity.body ?? labelForType(activity.interactionType, t)}
+          </span>
+          {duration ? (
+            <span className={cn(
+              'inline-flex w-fit items-center gap-[2px] rounded-full pl-[4px] pr-[8px] py-[2px] text-xs font-medium leading-[16px]',
+              overdue
+                ? 'bg-status-error-bg text-status-error-text'
+                : 'bg-status-warning-bg text-status-warning-text',
+            )}>
+              <Clock className="size-4" />
+              {formatDuration(duration, t)}
+            </span>
+          ) : null}
+          <span className="text-[11px] font-normal text-muted-foreground">{subtitle}</span>
+        </div>
+      </button>
+    </li>
+  )
+}
+
+function labelForType(type: string, t: TranslateFn): string {
+  const map: Record<string, [string, string]> = {
+    meeting: ['customers.timeline.filter.meeting', 'Meeting'],
+    call: ['customers.timeline.filter.call', 'Call'],
+    email: ['customers.timeline.filter.email', 'Email'],
+    note: ['customers.timeline.filter.note', 'Note'],
+    task: ['customers.timeline.filter.task', 'Task'],
+  }
+  const entry = map[type]
+  return entry ? t(entry[0], entry[1]) : type
+}
+
+export default ActivitiesCard

package/src/modules/customers/components/detail/ActivitiesDayStrip.tsx

@@ -0,0 +1,390 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import type { InteractionSummary } from './types'
+
+interface ActivitiesDayStripProps {
+  entityId: string
+  selectedDate: Date
+  onSelectDate: (date: Date) => void
+  refreshKey?: number
+}
+
+const VISIBLE_DAYS = 5
+const BUSYNESS_SLOTS = 10
+const SLOT_START_HOUR = 7
+const SLOT_END_HOUR = 22
+
+const DAY_LABEL_KEYS: Array<[number, string, string]> = [
+  [0, 'customers.calendar.day.sun', 'SUN'],
+  [1, 'customers.calendar.day.mon', 'MON'],
+  [2, 'customers.calendar.day.tue', 'TUE'],
+  [3, 'customers.calendar.day.wed', 'WED'],
+  [4, 'customers.calendar.day.thu', 'THU'],
+  [5, 'customers.calendar.day.fri', 'FRI'],
+  [6, 'customers.calendar.day.sat', 'SAT'],
+]
+
+const MONTH_KEYS: Array<[number, string, string]> = [
+  [0, 'customers.calendar.month.january', 'January'],
+  [1, 'customers.calendar.month.february', 'February'],
+  [2, 'customers.calendar.month.march', 'March'],
+  [3, 'customers.calendar.month.april', 'April'],
+  [4, 'customers.calendar.month.may', 'May'],
+  [5, 'customers.calendar.month.june', 'June'],
+  [6, 'customers.calendar.month.july', 'July'],
+  [7, 'customers.calendar.month.august', 'August'],
+  [8, 'customers.calendar.month.september', 'September'],
+  [9, 'customers.calendar.month.october', 'October'],
+  [10, 'customers.calendar.month.november', 'November'],
+  [11, 'customers.calendar.month.december', 'December'],
+]
+
+function startOfDay(date: Date): Date {
+  const next = new Date(date)
+  next.setHours(0, 0, 0, 0)
+  return next
+}
+
+function endOfDay(date: Date): Date {
+  const next = new Date(date)
+  next.setHours(23, 59, 59, 999)
+  return next
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+}
+
+function isWeekend(date: Date): boolean {
+  const day = date.getDay()
+  return day === 0 || day === 6
+}
+
+function addDays(date: Date, delta: number): Date {
+  const next = new Date(date)
+  next.setDate(date.getDate() + delta)
+  return next
+}
+
+function buildVisibleDays(anchor: Date): Date[] {
+  const start = startOfDay(anchor)
+  return Array.from({ length: VISIBLE_DAYS }, (_, index) => addDays(start, index))
+}
+
+// Anchor the visible window so that the given focal date lands at the center slot
+// (position 2 out of 5). Matches Figma 784:809 where the selected day is centered.
+function anchorCenteredOn(focalDate: Date): Date {
+  return startOfDay(addDays(focalDate, -Math.floor(VISIBLE_DAYS / 2)))
+}
+
+type SlotState = 'empty' | 'partial' | 'full' | 'conflict'
+
+type DayBusyness = {
+  totalMinutes: number
+  eventCount: number
+  slots: SlotState[]
+}
+
+function emptyBusyness(): DayBusyness {
+  return {
+    totalMinutes: 0,
+    eventCount: 0,
+    slots: Array<SlotState>(BUSYNESS_SLOTS).fill('empty'),
+  }
+}
+
+function computeDayBusyness(events: InteractionSummary[], day: Date): DayBusyness {
+  if (events.length === 0) return emptyBusyness()
+  const dayStart = startOfDay(day).getTime()
+  const slotMs = ((SLOT_END_HOUR - SLOT_START_HOUR) * 60 * 60 * 1000) / BUSYNESS_SLOTS
+  const slotMinutes = slotMs / 60000
+  const slotCounts: number[] = Array(BUSYNESS_SLOTS).fill(0)
+  const slotMinutesUsed: number[] = Array(BUSYNESS_SLOTS).fill(0)
+  let totalMinutes = 0
+  let eventCount = 0
+
+  for (const event of events) {
+    const startIso = event.scheduledAt ?? event.occurredAt ?? event.createdAt
+    if (!startIso) continue
+    const start = new Date(startIso)
+    if (Number.isNaN(start.getTime())) continue
+    if (!isSameDay(start, day)) continue
+    eventCount += 1
+    const durationMinutes = typeof event.duration === 'number' && event.duration > 0 ? event.duration : 30
+    totalMinutes += durationMinutes
+    const eventStartMs = start.getTime()
+    const eventEndMs = eventStartMs + durationMinutes * 60000
+    const slotsStartMs = dayStart + SLOT_START_HOUR * 60 * 60 * 1000
+    for (let slot = 0; slot < BUSYNESS_SLOTS; slot += 1) {
+      const slotStart = slotsStartMs + slot * slotMs
+      const slotEnd = slotStart + slotMs
+      const overlapStart = Math.max(slotStart, eventStartMs)
+      const overlapEnd = Math.min(slotEnd, eventEndMs)
+      const overlapMinutes = Math.max(0, (overlapEnd - overlapStart) / 60000)
+      if (overlapMinutes <= 0) continue
+      slotCounts[slot] += 1
+      slotMinutesUsed[slot] += overlapMinutes
+    }
+  }
+
+  const slots: SlotState[] = slotCounts.map((count, index) => {
+    if (count === 0) return 'empty'
+    if (count > 1) return 'conflict'
+    const used = slotMinutesUsed[index]
+    if (used >= slotMinutes * 0.5) return 'full'
+    return 'partial'
+  })
+
+  return { totalMinutes, eventCount, slots }
+}
+
+function formatBusyLabel(busy: DayBusyness, t: TranslateFn): string {
+  if (busy.eventCount === 0) return ''
+  // Match Figma 784:809 label format: "Xm" when under an hour, "Xh" otherwise.
+  // Mixed "Xh Ym" overflows the 101px card and is not part of the visual spec.
+  const durationLabel = busy.totalMinutes < 60
+    ? t('customers.activities.calendar.minutesShort', '{minutes}m', { minutes: Math.max(Math.round(busy.totalMinutes), 1) })
+    : t('customers.activities.calendar.hoursShort', '{hours}h', { hours: Math.floor(busy.totalMinutes / 60) })
+  return t('customers.activities.calendar.eventsSummary', '{count} {countLabel} · {duration}', {
+    count: busy.eventCount,
+    countLabel: busy.eventCount === 1
+      ? t('customers.activities.calendar.eventSingular', 'event')
+      : t('customers.activities.calendar.eventPlural', 'events'),
+    duration: durationLabel,
+  })
+}
+
+function formatMonthLabel(date: Date, t: TranslateFn): string {
+  const monthEntry = MONTH_KEYS.find(([index]) => index === date.getMonth())
+  const monthName = monthEntry ? t(monthEntry[1], monthEntry[2]) : ''
+  return t('customers.activities.calendar.monthYear', '{month} {year}', { month: monthName, year: date.getFullYear() })
+}
+
+function formatDayLabel(date: Date, t: TranslateFn): string {
+  const entry = DAY_LABEL_KEYS.find(([index]) => index === date.getDay())
+  return entry ? t(entry[1], entry[2]) : ''
+}
+
+export function ActivitiesDayStrip({ entityId, selectedDate, onSelectDate, refreshKey = 0 }: ActivitiesDayStripProps) {
+  const t = useT()
+  const [anchor, setAnchor] = React.useState<Date>(() => anchorCenteredOn(selectedDate))
+  const [events, setEvents] = React.useState<InteractionSummary[]>([])
+
+  React.useEffect(() => {
+    setAnchor((current) => {
+      const days = buildVisibleDays(current)
+      const visible = days.some((day) => isSameDay(day, selectedDate))
+      if (visible) return current
+      return anchorCenteredOn(selectedDate)
+    })
+  }, [selectedDate])
+
+  const visibleDays = React.useMemo(() => buildVisibleDays(anchor), [anchor])
+  const headerLabel = React.useMemo(() => formatMonthLabel(visibleDays[0], t), [visibleDays, t])
+
+  React.useEffect(() => {
+    if (!entityId || visibleDays.length === 0) return
+    const controller = new AbortController()
+    const fromIso = startOfDay(visibleDays[0]).toISOString()
+    const toIso = endOfDay(visibleDays[visibleDays.length - 1]).toISOString()
+    const params = new URLSearchParams({
+      entityId,
+      from: fromIso,
+      to: toIso,
+      limit: '100',
+      sortField: 'scheduledAt',
+      sortDir: 'asc',
+      excludeInteractionType: 'task',
+    })
+    void (async () => {
+      try {
+        const payload = await readApiResultOrThrow<{ items?: InteractionSummary[] }>(
+          `/api/customers/interactions?${params.toString()}`,
+          { signal: controller.signal },
+        )
+        setEvents(Array.isArray(payload?.items) ? payload.items : [])
+      } catch (err) {
+        if ((err as { name?: string } | null)?.name !== 'AbortError') {
+          console.warn('[ActivitiesDayStrip] failed to load interactions', err)
+        }
+        setEvents([])
+      }
+    })()
+    return () => controller.abort()
+  }, [entityId, visibleDays, refreshKey])
+
+  const todayDate = React.useMemo(() => startOfDay(new Date()), [])
+
+  const handlePrev = React.useCallback(() => {
+    setAnchor((current) => addDays(current, -VISIBLE_DAYS))
+  }, [])
+  const handleNext = React.useCallback(() => {
+    setAnchor((current) => addDays(current, VISIBLE_DAYS))
+  }, [])
+  const handleHeaderPrev = React.useCallback(() => {
+    setAnchor((current) => {
+      const next = new Date(current)
+      next.setMonth(current.getMonth() - 1)
+      return startOfDay(next)
+    })
+  }, [])
+  const handleHeaderNext = React.useCallback(() => {
+    setAnchor((current) => {
+      const next = new Date(current)
+      next.setMonth(current.getMonth() + 1)
+      return startOfDay(next)
+    })
+  }, [])
+
+  return (
+    <div className="flex flex-col gap-2.5 rounded-md px-3.5 py-3 w-full">
+      <div className="flex items-center justify-center gap-1.5 rounded-md bg-muted px-1.5 py-1.5">
+        <button
+          type="button"
+          onClick={handleHeaderPrev}
+          aria-label={t('customers.activities.calendar.prevMonth', 'Previous month')}
+          className="flex size-6 items-center justify-center rounded-md border border-border bg-card shadow-xs hover:bg-accent/40"
+        >
+          <ChevronLeft className="size-4 text-foreground" />
+        </button>
+        <span className="flex-1 text-center text-sm font-medium leading-5 text-foreground">{headerLabel}</span>
+        <button
+          type="button"
+          onClick={handleHeaderNext}
+          aria-label={t('customers.activities.calendar.nextMonth', 'Next month')}
+          className="flex size-6 items-center justify-center rounded-md border border-border bg-card shadow-xs hover:bg-accent/40"
+        >
+          <ChevronRight className="size-4 text-foreground" />
+        </button>
+      </div>
+      <div className="flex w-full items-center gap-2">
+        <button
+          type="button"
+          onClick={handlePrev}
+          aria-label={t('customers.activities.calendar.prevWindow', 'Previous days')}
+          className="flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-card shadow-xs hover:bg-accent/40"
+        >
+          <ChevronLeft className="size-4 text-foreground" />
+        </button>
+        <div className="flex flex-1 items-stretch justify-center gap-1">
+          {visibleDays.map((day) => {
+            const busy = computeDayBusyness(events, day)
+            const isSelected = isSameDay(day, selectedDate)
+            const isToday = isSameDay(day, todayDate)
+            const weekend = isWeekend(day)
+            const busyLabel = busy.eventCount > 0
+              ? formatBusyLabel(busy, t)
+              : weekend
+                ? t('customers.activities.calendar.weekend', 'Weekend')
+                : ''
+            return (
+              <DayCard
+                key={day.toISOString()}
+                day={day}
+                isActive={isSelected}
+                isToday={isToday}
+                busyness={busy}
+                label={busyLabel}
+                dayName={formatDayLabel(day, t)}
+                onSelect={() => onSelectDate(day)}
+              />
+            )
+          })}
+        </div>
+        <button
+          type="button"
+          onClick={handleNext}
+          aria-label={t('customers.activities.calendar.nextWindow', 'Next days')}
+          className="flex size-6 shrink-0 items-center justify-center rounded-md border border-border bg-card shadow-xs hover:bg-accent/40"
+        >
+          <ChevronRight className="size-4 text-foreground" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+interface DayCardProps {
+  day: Date
+  isActive: boolean
+  isToday: boolean
+  busyness: DayBusyness
+  label: string
+  dayName: string
+  onSelect: () => void
+}
+
+function DayCard({ day, isActive, isToday, busyness, label, dayName, onSelect }: DayCardProps) {
+  const dayNumber = String(day.getDate()).padStart(2, '0')
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      aria-pressed={isActive}
+      aria-label={`${dayName} ${dayNumber}`}
+      className={cn(
+        'flex h-[104px] w-[101px] flex-col items-center gap-[6px] overflow-hidden rounded-[10px] border p-[12px] transition-colors',
+        isActive
+          ? 'border-transparent bg-foreground'
+          : 'border-border bg-card hover:border-foreground/40',
+      )}
+    >
+      <span className="text-[11px] font-medium leading-none tracking-[0.44px] text-muted-foreground">
+        {dayName}
+      </span>
+      <div className="flex items-center gap-[5px]">
+        <span
+          className={cn(
+            'text-2xl font-semibold leading-7',
+            isActive ? 'text-background' : 'text-foreground',
+          )}
+        >
+          {dayNumber}
+        </span>
+        {isToday ? (
+          <span
+            className="inline-block size-1.5 rounded-full bg-status-info-icon"
+            aria-hidden
+          />
+        ) : null}
+      </div>
+      <div className="flex h-4 w-[82px] items-end gap-[1.5px]">
+        {busyness.slots.map((state, index) => (
+          <BusySlot key={index} state={state} active={isActive} />
+        ))}
+      </div>
+      <span className="text-[11px] leading-[14px] font-normal whitespace-nowrap text-muted-foreground">
+        {label}
+      </span>
+    </button>
+  )
+}
+
+function BusySlot({ state, active }: { state: SlotState; active: boolean }) {
+  const heightClass = state === 'empty'
+    ? 'h-0.5'
+    : state === 'partial'
+      ? 'h-2'
+      : 'h-3.5'
+  let bgClass: string
+  if (state === 'conflict') {
+    bgClass = 'bg-status-error-icon'
+  } else if (active) {
+    if (state === 'empty') bgClass = 'bg-background/30'
+    else if (state === 'partial') bgClass = 'bg-background/60'
+    else bgClass = 'bg-background'
+  } else {
+    if (state === 'empty') bgClass = 'bg-border'
+    else if (state === 'partial') bgClass = 'bg-muted-foreground'
+    else bgClass = 'bg-foreground'
+  }
+  return <div className={cn('w-[7px] shrink-0 rounded-[1.5px]', heightClass, bgClass)} aria-hidden />
+}
+
+export default ActivitiesDayStrip