@fayz-ai/saas 0.1.6

package/src/crud/archetypes/ActiveToggle.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface ActiveToggleProps {
+  active: boolean
+  onChange: (active: boolean) => void
+}
+
+export function ActiveToggle({ active, onChange }: ActiveToggleProps) {
+  return (
+    <button type="button" onClick={() => onChange(!active)} className="flex items-center gap-1.5">
+      <div className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+        active ? 'bg-primary' : 'bg-muted-foreground/30'
+      }`}>
+        <span className={`pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
+          active ? 'translate-x-[18px]' : 'translate-x-[2px]'
+        }`} />
+      </div>
+      <span className={`text-xs font-medium ${active ? 'text-foreground' : 'text-muted-foreground'}`}>
+        {active ? 'Active' : 'Inactive'}
+      </span>
+    </button>
+  )
+}

package/src/crud/archetypes/ArchetypeStatusBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Badge } from '@fayz-ai/ui'
+
+interface ArchetypeStatusBarProps {
+  isActive?: boolean
+  status?: string
+  onActiveChange?: (active: boolean) => void
+  onStatusChange?: (status: string) => void
+  statusOptions?: string[]
+}
+
+export function ArchetypeStatusBar({ isActive, status, onActiveChange, onStatusChange, statusOptions }: ArchetypeStatusBarProps) {
+  const hasActive = isActive !== undefined && onActiveChange
+  const hasStatus = status !== undefined && onStatusChange && statusOptions
+
+  if (!hasActive && !hasStatus) return null
+
+  return (
+    <div className="flex items-center gap-3 rounded-lg border bg-muted/30 px-4 py-2.5">
+      {hasActive && (
+        <button
+          type="button"
+          onClick={() => onActiveChange(!isActive)}
+          className="flex items-center gap-2 text-sm"
+        >
+          <div className={`h-2.5 w-2.5 rounded-full transition-colors ${isActive ? 'bg-success' : 'bg-muted-foreground/40'}`} />
+          <span className={`font-medium ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}>
+            {isActive ? 'Active' : 'Inactive'}
+          </span>
+        </button>
+      )}
+
+      {hasActive && hasStatus && (
+        <div className="h-4 w-px bg-border" />
+      )}
+
+      {hasStatus && (
+        <div className="flex items-center gap-2">
+          {statusOptions.map((opt) => (
+            <button
+              key={opt}
+              type="button"
+              onClick={() => onStatusChange(opt)}
+              className="focus:outline-none"
+            >
+              <Badge
+                variant={status === opt ? 'default' : 'secondary'}
+                className={`cursor-pointer transition-all text-xs ${status === opt ? '' : 'opacity-50 hover:opacity-80'}`}
+              >
+                {opt.charAt(0).toUpperCase() + opt.slice(1).replace(/_/g, ' ')}
+              </Badge>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/crud/archetypes/BlockSettingsPopover.tsx

@@ -0,0 +1,322 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { X, ChevronDown } from 'lucide-react'
+import type { BlockSettings } from '../../lib/schedule-service'
+import type { ScheduleBlockConfig } from '../../lib/schedule-config'
+import { useTranslation } from '@fayz-ai/core'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface BlockSettingsPopoverProps {
+  settings: BlockSettings
+  onChange: (settings: BlockSettings) => void
+  config: ScheduleBlockConfig
+  /** Ref to the trigger element for positioning */
+  triggerRef: React.RefObject<HTMLElement | null>
+  open: boolean
+  onClose: () => void
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function BlockSettingsPopover({
+  settings,
+  onChange,
+  config,
+  triggerRef,
+  open,
+  onClose,
+}: BlockSettingsPopoverProps) {
+  const t = useTranslation()
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState({ top: 0, left: 0 })
+
+  useEffect(() => {
+    if (!open || !triggerRef.current) return
+    const rect = triggerRef.current.getBoundingClientRect()
+    const popW = 280
+    let left = rect.left + rect.width / 2 - popW / 2
+    if (left + popW > window.innerWidth - 12) left = window.innerWidth - popW - 12
+    if (left < 8) left = 8
+    setPos({ top: rect.bottom + 6, left })
+  }, [open, triggerRef])
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (popoverRef.current?.contains(e.target as Node)) return
+      if (triggerRef.current?.contains(e.target as Node)) return
+      onClose()
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open, onClose, triggerRef])
+
+  if (!open) return null
+
+  const showServices = config.showServices !== false && config.services && config.services.length > 0
+  const showConcurrent = config.showConcurrent !== false
+  const showBookingWindow = config.showBookingWindow !== false
+  const showLocations = config.showLocations === true && config.locations && config.locations.length > 0
+
+  function update(patch: Partial<BlockSettings>) {
+    onChange({ ...settings, ...patch })
+  }
+
+  return createPortal(
+    <div
+      ref={popoverRef}
+      style={{ position: 'fixed', top: pos.top, left: pos.left, zIndex: 9999 }}
+      className="fayz-glass-surface w-[280px] rounded-xl border bg-popover shadow-xl"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2.5 border-b">
+        <span className="text-xs font-semibold">{t('schedule.blockSettings.title')}</span>
+        <button type="button" onClick={onClose} className="p-0.5 rounded text-muted-foreground hover:text-foreground">
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      <div className="p-3 space-y-3">
+        {/* Location select */}
+        {showLocations && (
+          <LocationSelect
+            locations={config.locations!}
+            value={settings.locationId}
+            onChange={(id) => update({ locationId: id || undefined })}
+          />
+        )}
+
+        {/* Services multi-select */}
+        {showServices && (
+          <ServiceSelect
+            services={config.services!}
+            selected={settings.allowedServiceIds ?? []}
+            onChange={(ids) => update({ allowedServiceIds: ids.length > 0 ? ids : undefined })}
+          />
+        )}
+
+        {/* Max concurrent */}
+        {showConcurrent && (
+          <div>
+            <label className="text-[11px] font-medium text-muted-foreground">{t('schedule.blockSettings.maxConcurrent')}</label>
+            <div className="flex items-center gap-2 mt-1">
+              <button
+                type="button"
+                onClick={() => update({ maxConcurrent: Math.max(1, (settings.maxConcurrent ?? config.defaults.maxConcurrent) - 1) })}
+                className="flex h-7 w-7 items-center justify-center rounded-md border text-sm hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
+              >
+                -
+              </button>
+              <span className="text-sm font-medium w-6 text-center">
+                {settings.maxConcurrent ?? config.defaults.maxConcurrent}
+              </span>
+              <button
+                type="button"
+                onClick={() => update({ maxConcurrent: (settings.maxConcurrent ?? config.defaults.maxConcurrent) + 1 })}
+                className="flex h-7 w-7 items-center justify-center rounded-md border text-sm hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
+              >
+                +
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Booking window */}
+        {showBookingWindow && (
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="text-[11px] font-medium text-muted-foreground">{t('schedule.blockSettings.minAdvance')}</label>
+              <div className="flex items-center gap-1 mt-1">
+                <input
+                  type="number"
+                  min={0}
+                  value={settings.minAdvanceHours ?? config.defaults.minAdvanceHours}
+                  onChange={(e) => update({ minAdvanceHours: Number(e.target.value) || 0 })}
+                  className="w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1 text-xs tabular-nums"
+                />
+                <span className="text-[10px] text-muted-foreground shrink-0">{t('schedule.blockSettings.hrs')}</span>
+              </div>
+            </div>
+            <div>
+              <label className="text-[11px] font-medium text-muted-foreground">{t('schedule.blockSettings.maxAdvance')}</label>
+              <div className="flex items-center gap-1 mt-1">
+                <input
+                  type="number"
+                  min={1}
+                  value={settings.maxAdvanceDays ?? config.defaults.maxAdvanceDays}
+                  onChange={(e) => update({ maxAdvanceDays: Number(e.target.value) || 30 })}
+                  className="w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1 text-xs tabular-nums"
+                />
+                <span className="text-[10px] text-muted-foreground shrink-0">{t('schedule.blockSettings.days')}</span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Label */}
+        <div>
+          <label className="text-[11px] font-medium text-muted-foreground">{t('schedule.blockSettings.label')}</label>
+          <input
+            type="text"
+            value={settings.label ?? ''}
+            onChange={(e) => update({ label: e.target.value || undefined })}
+            placeholder={t('schedule.blockSettings.labelPlaceholder')}
+            className="mt-1 w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1 text-xs placeholder:text-muted-foreground/40"
+          />
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Service multi-select (simple dropdown with checkboxes)
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Location select (custom dropdown)
+// ---------------------------------------------------------------------------
+
+function LocationSelect({
+  locations,
+  value,
+  onChange,
+}: {
+  locations: { id: string; name: string }[]
+  value: string | undefined
+  onChange: (id: string) => void
+}) {
+  const t = useTranslation()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const current = value ? locations.find((l) => l.id === value) : null
+  const label = current ? current.name : t('schedule.blockSettings.noLocation')
+
+  return (
+    <div ref={ref} className="relative">
+      <label className="text-[11px] font-medium text-muted-foreground">{t('schedule.blockSettings.location')}</label>
+      <button
+        type="button"
+        onClick={() => setOpen((p) => !p)}
+        className="mt-1 flex items-center justify-between w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1.5 text-xs hover:bg-muted/30  transition-colors"
+      >
+        <span className={current ? '' : 'text-muted-foreground'}>{label}</span>
+        <ChevronDown className="h-3 w-3 text-muted-foreground" />
+      </button>
+      {open && (
+        <div className="fayz-glass-surface absolute top-full left-0 z-10 mt-1 w-full max-h-40 overflow-y-auto rounded-lg border bg-popover shadow-lg py-1">
+          <button
+            type="button"
+            onClick={() => { onChange(''); setOpen(false) }}
+            className={`block w-full px-2.5 py-1.5 text-xs text-left transition-colors ${!value ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/50'}`}
+          >
+            {t('schedule.blockSettings.noLocation')}
+          </button>
+          {locations.map((l) => (
+            <button
+              key={l.id}
+              type="button"
+              onClick={() => { onChange(l.id); setOpen(false) }}
+              className={`block w-full px-2.5 py-1.5 text-xs text-left transition-colors ${l.id === value ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/50'}`}
+            >
+              {l.name}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Service multi-select (simple dropdown with checkboxes)
+// ---------------------------------------------------------------------------
+
+function ServiceSelect({
+  services,
+  selected,
+  onChange,
+}: {
+  services: { id: string; name: string }[]
+  selected: string[]
+  onChange: (ids: string[]) => void
+}) {
+  const t = useTranslation()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const allSelected = selected.length === 0
+  const label = allSelected
+    ? t('schedule.blockSettings.allServices')
+    : selected.length === 1
+      ? services.find((s) => s.id === selected[0])?.name ?? t('schedule.blockSettings.oneService')
+      : t('schedule.blockSettings.nServices', { count: selected.length })
+
+  function toggle(id: string) {
+    onChange(selected.includes(id) ? selected.filter((s) => s !== id) : [...selected, id])
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <label className="text-[11px] font-medium text-muted-foreground">{t('schedule.blockSettings.allowedServices')}</label>
+      <button
+        type="button"
+        onClick={() => setOpen((p) => !p)}
+        className="mt-1 flex items-center justify-between w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1.5 text-xs hover:bg-muted/30  transition-colors"
+      >
+        <span className={allSelected ? 'text-muted-foreground' : ''}>{label}</span>
+        <ChevronDown className="h-3 w-3 text-muted-foreground" />
+      </button>
+      {open && (
+        <div className="fayz-glass-surface absolute top-full left-0 z-10 mt-1 w-full max-h-40 overflow-y-auto rounded-lg border bg-popover shadow-lg py-1">
+          <button
+            type="button"
+            onClick={() => onChange([])}
+            className={`block w-full px-2.5 py-1.5 text-xs text-left transition-colors ${allSelected ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/50'}`}
+          >
+            {t('schedule.blockSettings.allServices')}
+          </button>
+          {services.map((s) => {
+            const checked = selected.includes(s.id)
+            return (
+              <button
+                key={s.id}
+                type="button"
+                onClick={() => toggle(s.id)}
+                className={`flex items-center gap-2 w-full px-2.5 py-1.5 text-xs text-left transition-colors ${checked ? 'bg-primary/5' : 'hover:bg-muted/50'}`}
+              >
+                <span className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border ${
+                  checked ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground/30'
+                }`}>
+                  {checked && <svg className="h-2.5 w-2.5" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}
+                </span>
+                <span className="truncate">{s.name}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/crud/archetypes/EntityLink.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { ExternalLink } from 'lucide-react'
+
+interface EntityLinkProps {
+  /** The entity ID to link to */
+  entityId: string
+  /** The base path of the CRUD page (e.g. '/registry/tutors') */
+  basePath: string
+  /** Display label */
+  children: React.ReactNode
+  /** Optional className */
+  className?: string
+}
+
+/**
+ * Reusable link to a CRUD entity detail page.
+ * Uses hash-based routing: navigates to `#basePath/entityId`
+ */
+export function EntityLink({ entityId, basePath, children, className }: EntityLinkProps) {
+  const href = `#${basePath}/${entityId}`
+
+  return (
+    <a
+      href={href}
+      className={`inline-flex items-center gap-1 text-primary hover:underline transition-colors ${className ?? ''}`}
+    >
+      {children}
+      <ExternalLink className="h-3 w-3 opacity-50" />
+    </a>
+  )
+}
+
+/**
+ * Registry of known entity paths by person kind.
+ * Projects can extend this via the `registerEntityPath` function.
+ */
+const ENTITY_PATHS: Record<string, string> = {
+  customer: '/registry/tutors',
+  professional: '/registry/veterinarians',
+  organization: '/registry/clinics',
+  supplier: '/registry/suppliers',
+  staff: '/registry/staff',
+}
+
+/** Register a custom path for a person kind */
+export function registerEntityPath(kind: string, basePath: string) {
+  ENTITY_PATHS[kind] = basePath
+}
+
+/** Get the CRUD base path for a person kind */
+export function getPersonPath(kind: string): string | null {
+  return ENTITY_PATHS[kind] ?? null
+}
+
+/**
+ * Smart link that auto-resolves the path based on person kind.
+ * Falls back to non-linked text if no path is registered.
+ */
+export function PersonLink({ personId, kind, children, className }: {
+  personId: string
+  kind: string
+  children: React.ReactNode
+  className?: string
+}) {
+  const basePath = getPersonPath(kind)
+  if (!basePath) {
+    return <span className={className}>{children}</span>
+  }
+  return (
+    <EntityLink entityId={personId} basePath={basePath} className={className}>
+      {children}
+    </EntityLink>
+  )
+}

package/src/crud/archetypes/LocationDetailTabs.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Users, CalendarDays, BarChart3, Clock } from 'lucide-react'
+import { Card, CardContent } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+
+function ComingSoon({ icon: Icon, title, description }: { icon: React.ElementType; title: string; description: string }) {
+  const t = useTranslation()
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-3">
+          <Icon className="h-5 w-5 text-muted-foreground" />
+        </div>
+        <p className="text-sm font-medium">{title}</p>
+        <p className="text-xs text-muted-foreground mt-1 max-w-xs">{description}</p>
+        <Badge variant="secondary" className="mt-3 text-[10px]">{t('crud.archetype.comingSoon')}</Badge>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function MembersTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Users}
+      title={t('crud.archetype.members.title')}
+      description={t('crud.archetype.members.description')}
+    />
+  )
+}
+
+export function LocationScheduleTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={CalendarDays}
+      title={t('crud.archetype.locationSchedule.title')}
+      description={t('crud.archetype.locationSchedule.description')}
+    />
+  )
+}
+
+export function LocationStatsTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={BarChart3}
+      title={t('crud.archetype.locationStats.title')}
+      description={t('crud.archetype.locationStats.description')}
+    />
+  )
+}
+
+export function LocationActivityTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Clock}
+      title={t('crud.archetype.locationActivity.title')}
+      description={t('crud.archetype.locationActivity.description')}
+    />
+  )
+}
+
+export const LOCATION_DETAIL_TABS = [
+  { id: 'members', label: 'Team', component: MembersTab },
+  { id: 'schedule', label: 'Hours', component: LocationScheduleTab },
+  { id: 'stats', label: 'Statistics', component: LocationStatsTab },
+  { id: 'activity', label: 'Activity', component: LocationActivityTab },
+]