@open-mercato/core 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6126.1.0b9392fdae

package/src/modules/customers/components/calendar/CalendarSettingsModal.tsx

@@ -0,0 +1,207 @@
+"use client"
+
+import * as React from 'react'
+import { Info, X } from 'lucide-react'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { TagInput } from '@open-mercato/ui/primitives/tag-input'
+import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
+import { useDialogKeyHandler } from '@open-mercato/ui/hooks/useDialogKeyHandler'
+import {
+  CalendarPreferences,
+  ConflictScope,
+  MAX_ACTIVITY_TYPES,
+  MAX_EVENT_CATEGORIES,
+} from '../../lib/calendar/preferences'
+import { SegmentGroup } from './editor/SegmentGroup'
+
+export type CalendarSettingsModalProps = {
+  open: boolean
+  preferences: CalendarPreferences
+  seedActivityTypes: string[]
+  onOpenChange(open: boolean): void
+  onSave(next: CalendarPreferences): void
+}
+
+type ToggleKey = 'showCrmActivities' | 'aiSummaries' | 'conflictWarnings' | 'showWeekends'
+
+// An empty Activity Types list is an intentional floor meaning "surface all
+// dictionary types" (see buildEditorCategoryOptions) rather than "surface none" —
+// it keeps the editor's category picker usable. So when the stored list is empty
+// the modal seeds the dictionary types for display; curating a non-empty subset
+// persists and filters the editor as expected.
+function buildDraft(preferences: CalendarPreferences, seedActivityTypes: string[]): CalendarPreferences {
+  return {
+    ...preferences,
+    eventCategories: [...preferences.eventCategories],
+    activityTypes:
+      preferences.activityTypes.length > 0
+        ? [...preferences.activityTypes]
+        : seedActivityTypes.slice(0, MAX_ACTIVITY_TYPES),
+  }
+}
+
+export function CalendarSettingsModal({
+  open,
+  preferences,
+  seedActivityTypes,
+  onOpenChange,
+  onSave,
+}: CalendarSettingsModalProps) {
+  const t = useT()
+  const [draft, setDraft] = React.useState<CalendarPreferences>(() => buildDraft(preferences, seedActivityTypes))
+  const openRef = React.useRef(false)
+
+  React.useEffect(() => {
+    if (open && !openRef.current) setDraft(buildDraft(preferences, seedActivityTypes))
+    openRef.current = open
+  }, [open, preferences, seedActivityTypes])
+
+  const handleSave = React.useCallback(() => {
+    onSave(draft)
+    onOpenChange(false)
+  }, [draft, onOpenChange, onSave])
+
+  const handleKeyDown = useDialogKeyHandler({ onConfirm: handleSave })
+
+  const toggle = (key: ToggleKey) => (checked: boolean) => setDraft((current) => ({ ...current, [key]: checked }))
+
+  const toggleRows: Array<{ key: ToggleKey; label: string }> = [
+    { key: 'showCrmActivities', label: t('customers.calendar.settings.showCrmActivities', 'Show CRM activities on calendar') },
+    { key: 'aiSummaries', label: t('customers.calendar.settings.aiSummaries', 'AI summaries & quick actions') },
+    { key: 'conflictWarnings', label: t('customers.calendar.settings.conflictWarnings', 'Conflict warnings') },
+    { key: 'showWeekends', label: t('customers.calendar.settings.showWeekends', 'Show weekends') },
+  ]
+
+  const title = t('customers.calendar.settings.title', 'Customization')
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        onKeyDown={handleKeyDown}
+        aria-describedby={undefined}
+        dismissible={false}
+        className="flex w-full max-w-[400px] flex-col gap-0 overflow-hidden rounded-2xl border-0 bg-card p-0 shadow-xl"
+      >
+        <VisuallyHidden>
+          <DialogTitle>{title}</DialogTitle>
+        </VisuallyHidden>
+        <div className="flex shrink-0 items-start gap-3.5 border-b border-border py-4 pl-5 pr-4">
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <p className="text-sm font-medium leading-5 text-foreground">{title}</p>
+            <p className="text-xs leading-4 text-muted-foreground">
+              {t('customers.calendar.settings.subtitle', 'Customise your calendar module.')}
+            </p>
+          </div>
+          <IconButton
+            variant="ghost"
+            size="sm"
+            onClick={() => onOpenChange(false)}
+            aria-label={t('customers.calendar.settings.close', 'Close')}
+            className="shrink-0 text-muted-foreground"
+          >
+            <X aria-hidden className="size-5" />
+          </IconButton>
+        </div>
+
+        <div className="flex flex-col gap-4 p-5">
+          <SettingsTagInput
+            label={t('customers.calendar.settings.eventCategories', 'Event Categories')}
+            maxLabel={t('customers.calendar.settings.max', '(max. {count})', { count: MAX_EVENT_CATEGORIES })}
+            hint={t(
+              'customers.calendar.settings.eventCategoriesHint',
+              'Your own grouping labels (e.g. Team Meeting, Sales Call). Offered when creating an event.',
+            )}
+            placeholder={t('customers.calendar.settings.addCategory', 'Add a category…')}
+            value={draft.eventCategories}
+            maxTags={MAX_EVENT_CATEGORIES}
+            onChange={(eventCategories) => setDraft((current) => ({ ...current, eventCategories }))}
+          />
+          <SettingsTagInput
+            label={t('customers.calendar.settings.activityTypes', 'Activity Types')}
+            maxLabel={t('customers.calendar.settings.max', '(max. {count})', { count: MAX_ACTIVITY_TYPES })}
+            hint={t(
+              'customers.calendar.settings.activityTypesHint',
+              'The activity types your calendar surfaces when creating an event. Seeded from your workspace dictionary.',
+            )}
+            placeholder={t('customers.calendar.settings.addType', 'Add a type…')}
+            value={draft.activityTypes}
+            maxTags={MAX_ACTIVITY_TYPES}
+            onChange={(activityTypes) => setDraft((current) => ({ ...current, activityTypes }))}
+          />
+          {toggleRows.map((row) => (
+            <React.Fragment key={row.key}>
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={draft[row.key]}
+                  onCheckedChange={toggle(row.key)}
+                  aria-label={row.label}
+                />
+                <span className="text-sm leading-5 text-foreground">{row.label}</span>
+              </div>
+              {row.key === 'conflictWarnings' && draft.conflictWarnings ? (
+                <div className="flex flex-col gap-1.5 pl-11">
+                  <span className="text-xs leading-4 text-muted-foreground">
+                    {t(
+                      'customers.calendar.settings.conflictScopeHint',
+                      'Choose whose overlaps the calendar flags as conflicts.',
+                    )}
+                  </span>
+                  <SegmentGroup<ConflictScope>
+                    ariaLabel={t('customers.calendar.settings.conflictScope', 'Conflict scope')}
+                    value={draft.conflictScope}
+                    onChange={(conflictScope) => setDraft((current) => ({ ...current, conflictScope }))}
+                    options={[
+                      { value: 'mine', label: t('customers.calendar.settings.conflictScopeMine', 'My meetings only') },
+                      { value: 'all', label: t('customers.calendar.settings.conflictScopeAll', 'All org meetings') },
+                    ]}
+                  />
+                </div>
+              ) : null}
+            </React.Fragment>
+          ))}
+        </div>
+
+        <div className="flex shrink-0 items-center gap-3 border-t border-border px-5 py-4">
+          <Button type="button" variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>
+            {t('customers.calendar.settings.cancel', 'Cancel')}
+          </Button>
+          <Button type="button" className="flex-1" onClick={handleSave}>
+            {t('customers.calendar.settings.save', 'Save Changes')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+type SettingsTagInputProps = {
+  label: string
+  maxLabel: string
+  hint: string
+  placeholder: string
+  value: string[]
+  maxTags: number
+  onChange(value: string[]): void
+}
+
+function SettingsTagInput({ label, maxLabel, hint, placeholder, value, maxTags, onChange }: SettingsTagInputProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-1">
+        <span className="text-sm font-medium leading-5 text-foreground">{label}</span>
+        <span className="text-sm leading-5 text-muted-foreground">{maxLabel}</span>
+        <SimpleTooltip content={hint}>
+          <span className="inline-flex text-muted-foreground" tabIndex={0} role="img" aria-label={hint}>
+            <Info aria-hidden className="size-4" />
+          </span>
+        </SimpleTooltip>
+      </div>
+      <TagInput value={value} onChange={onChange} placeholder={placeholder} maxTags={maxTags} aria-label={label} />
+    </div>
+  )
+}

package/src/modules/customers/components/calendar/CalendarTabs.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from 'react'
+import { Clock, LayoutGrid, List } from 'lucide-react'
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '@open-mercato/ui/primitives/segmented-control'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { CalendarTab, CalendarTabsProps, CalendarView } from './types'
+
+function TabCount({ value }: { value: number }) {
+  return <span className="text-xs font-medium text-muted-foreground">({value})</span>
+}
+
+export function CalendarTabs({ tab, counts, view, onTabChange, onViewChange }: CalendarTabsProps) {
+  const t = useT()
+
+  return (
+    <Tabs
+      value={tab}
+      onValueChange={(value) => onTabChange(value as CalendarTab)}
+      variant="underline"
+    >
+      <div className="flex flex-wrap items-stretch justify-between gap-x-3 gap-y-2">
+        <div className="min-w-0 max-w-full overflow-x-auto">
+          <TabsList className="shrink-0">
+            <TabsTrigger value="all" leading={<LayoutGrid className="size-4" />}>
+              {t('customers.calendar.tabs.all', 'All Scheduled')}
+            </TabsTrigger>
+            <TabsTrigger value="meetings" leading={<List className="size-4" />}>
+              {t('customers.calendar.tabs.meetings', 'Meetings')} <TabCount value={counts.meetings} />
+            </TabsTrigger>
+            <TabsTrigger value="events" leading={<Clock className="size-4" />}>
+              {t('customers.calendar.tabs.events', 'Events')} <TabCount value={counts.events} />
+            </TabsTrigger>
+          </TabsList>
+        </div>
+        <div className="flex min-w-0 flex-1 items-center justify-end border-b border-input">
+          <SegmentedControl
+            value={view}
+            onValueChange={(value) => onViewChange(value as CalendarView)}
+            aria-label={t('customers.calendar.views.label', 'Calendar view')}
+          >
+            <SegmentedControlItem value="day">
+              {t('customers.calendar.views.day', 'Day')}
+            </SegmentedControlItem>
+            <SegmentedControlItem value="week">
+              {t('customers.calendar.views.week', 'Week')}
+            </SegmentedControlItem>
+            <SegmentedControlItem value="month">
+              {t('customers.calendar.views.month', 'Month')}
+            </SegmentedControlItem>
+            <SegmentedControlItem value="agenda">
+              {t('customers.calendar.views.agenda', 'Agenda')}
+            </SegmentedControlItem>
+          </SegmentedControl>
+        </div>
+      </div>
+    </Tabs>
+  )
+}

package/src/modules/customers/components/calendar/CalendarToolbar.tsx

@@ -0,0 +1,295 @@
+"use client"
+
+import * as React from 'react'
+import { format } from 'date-fns/format'
+import { CalendarRange, ListFilter, Settings } from 'lucide-react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Calendar } from '@open-mercato/ui/primitives/calendar'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Kbd } from '@open-mercato/ui/primitives/kbd'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type {
+  CalendarFiltersValue,
+  CalendarRangePreset,
+  CalendarToolbarProps,
+} from './types'
+
+const RANGE_PRESETS: CalendarRangePreset[] = ['thisWeek', 'next7', 'thisMonth', 'next30']
+
+const STATUS_OPTIONS = ['planned', 'done', 'canceled'] as const
+
+const ALL_OPTION = 'all'
+
+const EMPTY_FILTERS: CalendarFiltersValue = { types: [], status: null, ownerUserId: null }
+
+function formatRangeLabel(from: Date, to: Date): string {
+  return `${format(from, 'MMM dd')} – ${format(to, 'MMM dd, yyyy')}`
+}
+
+export function CalendarToolbar(props: CalendarToolbarProps) {
+  const {
+    anchor,
+    range,
+    preset,
+    search,
+    filters,
+    typeOptions,
+    ownerOptions,
+    onToday,
+    onPresetChange,
+    onAnchorChange,
+    onSearchChange,
+    onFiltersChange,
+    onOpenSettings,
+  } = props
+  const t = useT()
+  const [rangeOpen, setRangeOpen] = React.useState(false)
+  const [filtersOpen, setFiltersOpen] = React.useState(false)
+  const [pendingFilters, setPendingFilters] = React.useState<CalendarFiltersValue>(filters)
+
+  const presetLabels: Record<CalendarRangePreset, string> = {
+    thisWeek: t('customers.calendar.toolbar.presets.thisWeek', 'This week'),
+    next7: t('customers.calendar.toolbar.presets.next7', 'Next 7 days'),
+    thisMonth: t('customers.calendar.toolbar.presets.thisMonth', 'This month'),
+    next30: t('customers.calendar.toolbar.presets.next30', 'Next 30 days'),
+  }
+
+  const activeFilterCount =
+    filters.types.length + (filters.status ? 1 : 0) + (filters.ownerUserId ? 1 : 0)
+
+  const handleFiltersOpenChange = (open: boolean) => {
+    if (open) setPendingFilters(filters)
+    setFiltersOpen(open)
+  }
+
+  const applyFilters = () => {
+    onFiltersChange(pendingFilters)
+    setFiltersOpen(false)
+  }
+
+  const clearFilters = () => {
+    setPendingFilters(EMPTY_FILTERS)
+    onFiltersChange(EMPTY_FILTERS)
+    setFiltersOpen(false)
+  }
+
+  const togglePendingType = (value: string, checked: boolean) => {
+    setPendingFilters((current) => ({
+      ...current,
+      types: checked
+        ? [...current.types, value]
+        : current.types.filter((entry) => entry !== value),
+    }))
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+      <div className="flex min-w-0 flex-wrap items-center gap-2 sm:gap-3">
+        <Button type="button" variant="outline" onClick={onToday}>
+          {t('customers.calendar.toolbar.today', 'Today')}
+        </Button>
+        <div className="flex min-w-0 items-center">
+          <Select
+            value={preset ?? ''}
+            onValueChange={(value) => onPresetChange(value as CalendarRangePreset)}
+          >
+            <SelectTrigger
+              className="hidden w-auto min-w-32 rounded-r-none sm:flex"
+              aria-label={t('customers.calendar.toolbar.presetLabel', 'Date range preset')}
+            >
+              <SelectValue
+                placeholder={t('customers.calendar.toolbar.presetPlaceholder', 'Custom range')}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {RANGE_PRESETS.map((value) => (
+                <SelectItem key={value} value={value}>
+                  {presetLabels[value]}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Popover open={rangeOpen} onOpenChange={setRangeOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                className="min-w-0 text-muted-foreground sm:-ml-px sm:rounded-l-none"
+              >
+                <CalendarRange aria-hidden="true" />
+                <span className="truncate">{formatRangeLabel(range.from, range.to)}</span>
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-auto min-w-0 p-2">
+              <Calendar
+                mode="single"
+                selected={anchor}
+                defaultMonth={anchor}
+                onSelect={(date) => {
+                  if (!date) return
+                  onAnchorChange(date)
+                  setRangeOpen(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+      <div className="flex w-full min-w-0 items-center gap-2 sm:ml-auto sm:w-auto sm:flex-none sm:gap-3">
+        <div className="relative min-w-0 flex-1 sm:w-72 sm:flex-none">
+          <SearchInput
+            value={search}
+            onChange={onSearchChange}
+            placeholder={t('customers.calendar.toolbar.searchPlaceholder', 'Search…')}
+            aria-label={t('customers.calendar.toolbar.searchPlaceholder', 'Search…')}
+            data-calendar-search=""
+          />
+          {search.length === 0 ? (
+            <Kbd className="pointer-events-none absolute right-2 top-1/2 hidden -translate-y-1/2 sm:inline-flex">/</Kbd>
+          ) : null}
+        </div>
+        <Popover open={filtersOpen} onOpenChange={handleFiltersOpenChange}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              aria-label={t('customers.calendar.toolbar.filters.label', 'Filter')}
+            >
+              <ListFilter aria-hidden="true" />
+              <span className="hidden sm:inline">
+                {t('customers.calendar.toolbar.filters.label', 'Filter')}
+              </span>
+              {activeFilterCount > 0 ? (
+                <Badge variant="secondary" size="sm">
+                  {activeFilterCount}
+                </Badge>
+              ) : null}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="w-72 p-3"
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault()
+                applyFilters()
+              }
+            }}
+          >
+            <div className="flex flex-col gap-4">
+              {typeOptions.length > 0 ? (
+                <fieldset className="flex flex-col gap-2">
+                  <legend className="pb-1 text-overline font-semibold uppercase tracking-widest text-muted-foreground">
+                    {t('customers.calendar.toolbar.filters.types', 'Type')}
+                  </legend>
+                  {typeOptions.map((option) => (
+                    <CheckboxField
+                      key={option.value}
+                      label={option.label}
+                      size="sm"
+                      checked={pendingFilters.types.includes(option.value)}
+                      onCheckedChange={(checked) =>
+                        togglePendingType(option.value, checked === true)
+                      }
+                    />
+                  ))}
+                </fieldset>
+              ) : null}
+              <div className="flex flex-col gap-1.5">
+                <span className="text-overline font-semibold uppercase tracking-widest text-muted-foreground">
+                  {t('customers.calendar.toolbar.filters.status', 'Status')}
+                </span>
+                <Select
+                  value={pendingFilters.status ?? ALL_OPTION}
+                  onValueChange={(value) =>
+                    setPendingFilters((current) => ({
+                      ...current,
+                      status: value === ALL_OPTION ? null : value,
+                    }))
+                  }
+                >
+                  <SelectTrigger
+                    size="sm"
+                    aria-label={t('customers.calendar.toolbar.filters.status', 'Status')}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={ALL_OPTION}>
+                      {t('customers.calendar.toolbar.filters.allStatuses', 'All statuses')}
+                    </SelectItem>
+                    {STATUS_OPTIONS.map((status) => (
+                      <SelectItem key={status} value={status}>
+                        {t(`customers.calendar.toolbar.filters.statuses.${status}`, status)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              {ownerOptions.length > 0 ? (
+                <div className="flex flex-col gap-1.5">
+                  <span className="text-overline font-semibold uppercase tracking-widest text-muted-foreground">
+                    {t('customers.calendar.toolbar.filters.owner', 'Owner')}
+                  </span>
+                  <Select
+                    value={pendingFilters.ownerUserId ?? ALL_OPTION}
+                    onValueChange={(value) =>
+                      setPendingFilters((current) => ({
+                        ...current,
+                        ownerUserId: value === ALL_OPTION ? null : value,
+                      }))
+                    }
+                  >
+                    <SelectTrigger
+                      size="sm"
+                      aria-label={t('customers.calendar.toolbar.filters.owner', 'Owner')}
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={ALL_OPTION}>
+                        {t('customers.calendar.toolbar.filters.allOwners', 'All owners')}
+                      </SelectItem>
+                      {ownerOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : null}
+              <div className="flex items-center justify-end gap-2 border-t pt-3">
+                <Button type="button" variant="ghost" size="sm" onClick={clearFilters}>
+                  {t('customers.calendar.toolbar.filters.clear', 'Clear')}
+                </Button>
+                <Button type="button" size="sm" onClick={applyFilters}>
+                  {t('customers.calendar.toolbar.filters.apply', 'Apply')}
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+        <IconButton
+          type="button"
+          variant="outline"
+          aria-label={t('customers.calendar.toolbar.settings', 'Calendar settings')}
+          onClick={onOpenSettings}
+        >
+          <Settings aria-hidden />
+        </IconButton>
+      </div>
+    </div>
+  )
+}