@fayz-ai/plugin-agenda 0.9.0 → 0.10.0

package/src/calendar-styles.ts

@@ -1,285 +0,0 @@
-/**
- * Injects agenda calendar CSS at runtime.
- * This ensures styles work both in symlinked dev mode and when consumed
- * as a built package (where CSS side-effect imports are extracted by tsup
- * and not automatically loaded).
- */
-
-const STYLE_ID = 'saas-agenda-calendar-styles'
-
-const css = /* css */ `
-/* Dark mode content background — uses the content token */
-.dark .agenda-calendar,
-.dark .agenda-calendar .fc,
-.dark .agenda-calendar .fc-view-harness,
-.dark .agenda-calendar .fc-timegrid,
-.dark .agenda-calendar .fc-scrollgrid,
-.dark .agenda-calendar .fc-timegrid-col,
-.dark .agenda-calendar .fc-daygrid-body,
-.dark .agenda-calendar .fc-timegrid-slot-lane {
-  background-color: hsl(var(--content));
-}
-
-/* FullCalendar — Google Calendar inspired theme */
-
-.agenda-calendar {
-  --fc-border-color: hsl(var(--border));
-  --fc-today-bg-color: transparent;
-  --fc-now-indicator-color: hsl(var(--destructive));
-  --fc-highlight-color: hsl(var(--primary) / 0.06);
-  --fc-non-business-color: hsl(var(--muted) / 0.15);
-  --fc-neutral-bg-color: transparent;
-  --fc-page-bg-color: transparent;
-  --fc-event-border-color: transparent;
-}
-
-.agenda-calendar .fc {
-  font-family: inherit;
-  background: transparent;
-}
-
-.agenda-calendar .fc .fc-view-harness {
-  background: transparent;
-}
-
-/* ── Column headers ── */
-.agenda-calendar .fc-col-header-cell {
-  background: transparent;
-  border-bottom: 1px solid var(--fc-border-color);
-  border-left: none;
-  border-right: none;
-  border-top: none;
-}
-
-.agenda-calendar .fc-col-header-cell-cushion {
-  padding: 8px 4px;
-  font-weight: 400;
-  font-size: 0.7rem;
-  color: hsl(var(--muted-foreground));
-  text-decoration: none;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-/* Today's column header */
-.agenda-calendar .fc-day-today .fc-col-header-cell-cushion {
-  color: hsl(var(--primary));
-  font-weight: 600;
-}
-
-/* Resource header (professional columns) */
-.agenda-calendar .fc .fc-resource-header {
-  background: transparent;
-  border-bottom: 1px solid var(--fc-border-color);
-}
-
-/* ── Time slots — compact ── */
-.agenda-calendar .fc-timegrid-slot {
-  height: 1.5rem;
-  border-bottom: 1px solid hsl(var(--border) / 0.4);
-}
-
-.agenda-calendar .fc-timegrid-slot-label {
-  vertical-align: top;
-  border: none;
-}
-
-.agenda-calendar .fc-timegrid-slot-label-cushion {
-  font-size: 0.65rem;
-  color: hsl(var(--muted-foreground) / 0.7);
-  padding: 1px 8px 0 0;
-}
-
-/* Half-hour lines lighter */
-.agenda-calendar .fc-timegrid-slot-minor {
-  border-bottom-style: none;
-}
-
-/* Column dividers */
-.agenda-calendar .fc-timegrid-col {
-  border-right: 1px solid hsl(var(--border) / 0.5);
-}
-
-/* ── Events ── */
-.agenda-calendar .fc-event {
-  border-radius: 6px;
-  border-width: 0;
-  border-left: 4px solid;
-  cursor: pointer;
-  transition: opacity 0.15s, box-shadow 0.15s, backdrop-filter 0.15s;
-  font-size: 0.7rem;
-  line-height: 1.3;
-  margin: 0 2px;
-  overflow: hidden;
-  backdrop-filter: blur(8px) saturate(140%);
-  -webkit-backdrop-filter: blur(8px) saturate(140%);
-}
-
-.agenda-calendar .fc-event .fc-event-main {
-  background: inherit;
-  border-radius: inherit;
-  overflow: hidden;
-}
-
-.agenda-calendar .fc-event:not(.fc-bg-event):hover {
-  opacity: 0.92;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-  backdrop-filter: blur(12px) saturate(160%);
-  -webkit-backdrop-filter: blur(12px) saturate(160%);
-}
-
-.agenda-calendar .fc-bg-event {
-  pointer-events: none;
-}
-
-/* ── Now indicator ── */
-.agenda-calendar .fc-timegrid-now-indicator-line {
-  border-color: hsl(var(--destructive));
-  border-width: 2px;
-}
-
-.agenda-calendar .fc-timegrid-now-indicator-arrow {
-  border-top-color: hsl(var(--destructive));
-}
-
-/* ── Month view ── */
-.agenda-calendar .fc-daygrid-day-number {
-  font-size: 0.8rem;
-  padding: 4px 8px;
-  text-decoration: none;
-  color: hsl(var(--foreground));
-}
-
-.agenda-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
-  background-color: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
-  border-radius: 50%;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-}
-
-/* ── Selection ── */
-.agenda-calendar .fc-highlight {
-  background: hsl(var(--primary) / 0.08);
-}
-
-/* ── Links ── */
-.agenda-calendar .fc a {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* ── Scrollbar ── */
-.agenda-calendar .fc-scroller {
-  scrollbar-width: thin;
-  scrollbar-color: hsl(var(--muted-foreground) / 0.12) transparent;
-}
-
-.agenda-calendar .fc-scroller::-webkit-scrollbar {
-  width: 6px;
-}
-
-.agenda-calendar .fc-scroller::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.agenda-calendar .fc-scroller::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / 0.12);
-  border-radius: 3px;
-}
-
-/* ── Clean up borders ── */
-.agenda-calendar .fc .fc-timegrid {
-  border: none;
-}
-
-.agenda-calendar .fc-scrollgrid {
-  border: none !important;
-}
-
-.agenda-calendar .fc-scrollgrid td:last-child {
-  border-right: none;
-}
-
-/* ── Unavailable time background — opaque/disabled feel ── */
-.agenda-calendar .fc-unavailable-bg {
-  background: hsl(var(--muted-foreground) / 0.08) !important;
-  background-image: repeating-linear-gradient(
-    45deg,
-    transparent,
-    transparent 4px,
-    hsl(var(--muted-foreground) / 0.04) 4px,
-    hsl(var(--muted-foreground) / 0.04) 8px
-  ) !important;
-  border-radius: 0;
-  border-left: none !important;
-}
-
-/* ── Location label on schedule blocks ── */
-.agenda-calendar .fc-location-label {
-  background: transparent !important;
-  border: none !important;
-  border-left-width: 0 !important;
-  cursor: default !important;
-  pointer-events: none;
-  box-shadow: none !important;
-  z-index: 1 !important;
-  margin: 0 4px !important;
-  font-weight: 500 !important;
-}
-
-.agenda-calendar .fc-location-label .fc-event-main {
-  padding: 0 !important;
-}
-
-/* Week view day header with date */
-.agenda-calendar .fc-timegrid .fc-col-header-cell {
-  padding: 4px 0;
-}
-
-/* ── Alternating resource column backgrounds ── */
-.agenda-calendar .fc-resource-alt {
-  background-color: hsl(var(--muted) / 0.4) !important;
-}
-
-.dark .agenda-calendar .fc-resource-alt {
-  background-color: hsl(var(--muted-foreground) / 0.08) !important;
-}
-
-/* Resource group header separator — stronger border between professionals */
-.agenda-calendar .fc-resource-group {
-  border-left: 2px solid hsl(var(--border));
-}
-
-/* Also stripe the resource header label for the alt group */
-.agenda-calendar th.fc-resource-alt {
-  background-color: hsl(var(--muted) / 0.4) !important;
-}
-
-.dark .agenda-calendar th.fc-resource-alt {
-  background-color: hsl(var(--muted-foreground) / 0.06) !important;
-}
-`
-
-let injected = false
-
-export function injectCalendarStyles(): void {
-  if (injected) return
-  if (typeof document === 'undefined') return
-
-  // Check if already present (e.g. from CSS import in dev mode)
-  if (document.getElementById(STYLE_ID)) {
-    injected = true
-    return
-  }
-
-  const style = document.createElement('style')
-  style.id = STYLE_ID
-  style.textContent = css
-  document.head.appendChild(style)
-  injected = true
-}

package/src/components/AgendaGeneralSettings.tsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import { SettingsGroup, ToggleRow, SelectRow, useTenantPluginSettings } from '@fayz-ai/saas'
-import { useTranslation } from '@fayz-ai/core'
-import { useAgendaSettings } from '../hooks/useAgendaSettings'
-
-const HOUR_OPTIONS = Array.from({ length: 18 }, (_, i) => {
-  const h = (5 + i).toString().padStart(2, '0')
-  return { value: `${h}:00`, label: `${h}:00` }
-})
-
-// Per-tenant toggle defaults = the values that used to be hardcoded here.
-// NOTE: these are persisted + re-hydrated per tenant; actually consuming them to
-// change agenda behaviour is a follow-up (see useTenantPluginSettings docs).
-const AGENDA_TOGGLE_DEFAULTS = {
-  conflictDetection: true,
-  dragDrop: true,
-  autoCreateOrder: true,
-  enableLocation: false,
-  enableWorkingHours: true,
-  blockOutside: false,
-  enableConfirmations: true,
-  autoConfirm: false,
-  reminder: true,
-  showCancelled: false,
-  showNoShow: true,
-  compact: false,
-  newBookingNotif: true,
-  cancelAlerts: true,
-  noShowTracking: false,
-}
-
-export function AgendaGeneralSettings() {
-  const t = useTranslation()
-  const { startTime, endTime, setStartTime, setEndTime } = useAgendaSettings()
-  const s = useTenantPluginSettings('agenda', AGENDA_TOGGLE_DEFAULTS)
-  return (
-    <div className="space-y-4">
-      <SettingsGroup title={t('agenda.settings.scheduling')} description={t('agenda.settings.schedulingDesc')}>
-        <ToggleRow label={t('agenda.settings.conflictDetection')} description={t('agenda.settings.conflictDetectionDesc')} checked={s.get('conflictDetection')} onChange={(v) => s.set('conflictDetection', v)} />
-        <ToggleRow label={t('agenda.settings.dragDrop')} description={t('agenda.settings.dragDropDesc')} checked={s.get('dragDrop')} onChange={(v) => s.set('dragDrop', v)} />
-        <ToggleRow label={t('agenda.settings.autoCreateOrder')} description={t('agenda.settings.autoCreateOrderDesc')} checked={s.get('autoCreateOrder')} onChange={(v) => s.set('autoCreateOrder', v)} />
-      </SettingsGroup>
-
-      <SettingsGroup title={t('agenda.settings.locations')} description={t('agenda.settings.locationsDesc')}>
-        <ToggleRow label={t('agenda.settings.enableLocation')} description={t('agenda.settings.enableLocationDesc')} checked={s.get('enableLocation')} onChange={(v) => s.set('enableLocation', v)} />
-      </SettingsGroup>
-
-      <SettingsGroup title={t('agenda.settings.workingHours')} description={t('agenda.settings.workingHoursDesc')}>
-        <ToggleRow label={t('agenda.settings.enableWorkingHours')} description={t('agenda.settings.enableWorkingHoursDesc')} checked={s.get('enableWorkingHours')} onChange={(v) => s.set('enableWorkingHours', v)} />
-        <ToggleRow label={t('agenda.settings.blockOutside')} description={t('agenda.settings.blockOutsideDesc')} checked={s.get('blockOutside')} onChange={(v) => s.set('blockOutside', v)} />
-      </SettingsGroup>
-
-      <SettingsGroup title={t('agenda.settings.confirmations')} description={t('agenda.settings.confirmationsDesc')}>
-        <ToggleRow label={t('agenda.settings.enableConfirmations')} description={t('agenda.settings.enableConfirmationsDesc')} checked={s.get('enableConfirmations')} onChange={(v) => s.set('enableConfirmations', v)} />
-        <ToggleRow label={t('agenda.settings.autoConfirm')} description={t('agenda.settings.autoConfirmDesc')} checked={s.get('autoConfirm')} onChange={(v) => s.set('autoConfirm', v)} />
-        <ToggleRow label={t('agenda.settings.reminder')} description={t('agenda.settings.reminderDesc')} checked={s.get('reminder')} onChange={(v) => s.set('reminder', v)} />
-      </SettingsGroup>
-
-      <SettingsGroup title={t('agenda.settings.calendarDisplay')} description={t('agenda.settings.calendarDisplayDesc')}>
-        <SelectRow
-          label={t('agenda.settings.dayStartTime')}
-          description={t('agenda.settings.dayStartTimeDesc')}
-          value={startTime}
-          options={HOUR_OPTIONS}
-          onChange={setStartTime}
-        />
-        <SelectRow
-          label={t('agenda.settings.dayEndTime')}
-          description={t('agenda.settings.dayEndTimeDesc')}
-          value={endTime}
-          options={HOUR_OPTIONS}
-          onChange={setEndTime}
-        />
-        <ToggleRow label={t('agenda.settings.showCancelled')} description={t('agenda.settings.showCancelledDesc')} checked={s.get('showCancelled')} onChange={(v) => s.set('showCancelled', v)} />
-        <ToggleRow label={t('agenda.settings.showNoShow')} description={t('agenda.settings.showNoShowDesc')} checked={s.get('showNoShow')} onChange={(v) => s.set('showNoShow', v)} />
-        <ToggleRow label={t('agenda.settings.compact')} description={t('agenda.settings.compactDesc')} checked={s.get('compact')} onChange={(v) => s.set('compact', v)} />
-      </SettingsGroup>
-
-      <SettingsGroup title={t('agenda.settings.notifications')} description={t('agenda.settings.notificationsDesc')}>
-        <ToggleRow label={t('agenda.settings.newBookingNotif')} description={t('agenda.settings.newBookingNotifDesc')} checked={s.get('newBookingNotif')} onChange={(v) => s.set('newBookingNotif', v)} />
-        <ToggleRow label={t('agenda.settings.cancelAlerts')} description={t('agenda.settings.cancelAlertsDesc')} checked={s.get('cancelAlerts')} onChange={(v) => s.set('cancelAlerts', v)} />
-        <ToggleRow label={t('agenda.settings.noShowTracking')} description={t('agenda.settings.noShowTrackingDesc')} checked={s.get('noShowTracking')} onChange={(v) => s.set('noShowTracking', v)} />
-      </SettingsGroup>
-    </div>
-  )
-}

package/src/components/AgendaMobileList.tsx

@@ -1,103 +0,0 @@
-import React, { useMemo } from 'react'
-import { formatCurrency, useTranslation, getCurrentLocale } from '@fayz-ai/core'
-import type { CalendarBooking } from '../types'
-
-// ---------------------------------------------------------------------------
-// Mobile agenda list — a thumb-friendly, date-grouped list of upcoming items.
-// Rendered on <md viewports instead of the FullCalendar grid. Each row shows a
-// category/status dot, the title, the time, and (for finance-style events) the
-// amount. Fed straight from the store bookings so it works for any seeded app.
-// ---------------------------------------------------------------------------
-
-function startOfDay(d: Date): Date {
-  const x = new Date(d)
-  x.setHours(0, 0, 0, 0)
-  return x
-}
-
-function timeLabel(iso: string): string {
-  const d = new Date(iso)
-  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
-}
-
-export interface AgendaMobileListProps {
-  bookings: CalendarBooking[]
-  statusColors: Record<string, string>
-  currencyCode: string
-  onSelect: (booking: CalendarBooking) => void
-}
-
-export function AgendaMobileList({ bookings, statusColors, currencyCode, onSelect }: AgendaMobileListProps) {
-  const t = useTranslation()
-  const locale = getCurrentLocale() === 'pt-BR' ? 'pt-BR' : 'en'
-
-  const groups = useMemo(() => {
-    const todayStart = startOfDay(new Date()).getTime()
-    const sorted = bookings
-      .filter((b) => !!b.startsAt)
-      .slice()
-      .sort((a, b) => (a.startsAt < b.startsAt ? -1 : a.startsAt > b.startsAt ? 1 : 0))
-    const map = new Map<string, CalendarBooking[]>()
-    for (const b of sorted) {
-      const day = startOfDay(new Date(b.startsAt))
-      if (day.getTime() < todayStart) continue // upcoming only
-      const key = day.toISOString().slice(0, 10)
-      const list = map.get(key) ?? []
-      list.push(b)
-      map.set(key, list)
-    }
-    return Array.from(map.entries()).map(([key, items]) => ({ key, date: new Date(key + 'T00:00:00'), items }))
-  }, [bookings])
-
-  function dayLabel(date: Date): string {
-    const today = startOfDay(new Date())
-    const diff = Math.round((startOfDay(date).getTime() - today.getTime()) / 86400000)
-    if (diff === 0) return t('agenda.list.today')
-    if (diff === 1) return t('agenda.list.tomorrow')
-    return date.toLocaleDateString(locale, { weekday: 'long', day: 'numeric', month: 'long' })
-  }
-
-  if (groups.length === 0) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center px-6 py-16 text-center text-muted-foreground">
-        <p className="text-sm">{t('agenda.list.empty')}</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex-1 overflow-y-auto px-3 py-3 space-y-5">
-      {groups.map((g) => (
-        <div key={g.key}>
-          <h3 className="px-1 pb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            {dayLabel(g.date)}
-          </h3>
-          <div className="space-y-1.5">
-            {g.items.map((b) => {
-              const color = statusColors[b.status] ?? '#6b7280'
-              const hasAmount = typeof b.orderTotal === 'number' && b.orderTotal > 0
-              return (
-                <button
-                  key={b.id}
-                  onClick={() => onSelect(b)}
-                  className="flex w-full items-center gap-3 rounded-lg border bg-card px-3 py-2.5 text-left shadow-sm transition-colors active:bg-muted/50"
-                >
-                  <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: color }} />
-                  <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-medium text-foreground">{b.clientName ?? '—'}</p>
-                    <p className="text-xs text-muted-foreground">{timeLabel(b.startsAt)}</p>
-                  </div>
-                  {hasAmount && (
-                    <span className="shrink-0 text-sm font-semibold tabular-nums text-foreground">
-                      {formatCurrency(b.orderTotal, currencyCode)}
-                    </span>
-                  )}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}