@fayz-ai/saas 0.1.6

package/src/crud/archetypes/ServiceDetailTabs.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { CalendarDays, Tag, 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 AvailabilityTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={CalendarDays}
+      title={t('crud.archetype.availability.title')}
+      description={t('crud.archetype.availability.description')}
+    />
+  )
+}
+
+export function ServicePricingTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Tag}
+      title={t('crud.archetype.servicePricing.title')}
+      description={t('crud.archetype.servicePricing.description')}
+    />
+  )
+}
+
+export function ServiceActivityTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Clock}
+      title={t('crud.archetype.serviceActivity.title')}
+      description={t('crud.archetype.serviceActivity.description')}
+    />
+  )
+}
+
+export const SERVICE_DETAIL_TABS = [
+  { id: 'availability', label: 'Availability', component: AvailabilityTab },
+  { id: 'pricing', label: 'Pricing', component: ServicePricingTab },
+  { id: 'activity', label: 'Activity', component: ServiceActivityTab },
+]

package/src/crud/archetypes/ServiceFormLayout.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import { Briefcase } from 'lucide-react'
+import { Card, CardContent } from '@fayz-ai/ui'
+import { ActiveToggle } from './ActiveToggle'
+import type { FieldDef, FieldGroup } from '@fayz-ai/core'
+
+interface ServiceFormLayoutProps {
+  fields: FieldDef[]
+  fieldGroups: FieldGroup[]
+  values: Record<string, any>
+  onChange: (key: string, val: any) => void
+  renderField: (field: FieldDef, value: any, onChange: (val: any) => void) => React.ReactNode
+}
+
+const IDENTITY_FIELDS = new Set(['name', 'description', 'imageUrl', 'category'])
+const PRICING_FIELDS = new Set(['price', 'cost', 'currency', 'durationMinutes'])
+const SKIP_FIELDS = new Set(['status', 'isActive', 'tags'])
+
+function FieldItem({ field, value, onChange, renderField, colSpan }: {
+  field: FieldDef; value: any; onChange: (val: any) => void
+  renderField: ServiceFormLayoutProps['renderField']; colSpan?: boolean
+}) {
+  return (
+    <div className={`space-y-1.5 ${colSpan ? 'md:col-span-2' : ''}`}>
+      <label className="text-sm font-medium">
+        {field.label}{field.required && <span className="text-destructive ml-0.5">*</span>}
+      </label>
+      {renderField(field, value, onChange)}
+    </div>
+  )
+}
+
+export function ServiceFormLayout({ fields, fieldGroups, values, onChange, renderField }: ServiceFormLayoutProps) {
+  const nameField = fields.find((f) => f.key === 'name')
+  const descField = fields.find((f) => f.key === 'description')
+  const otherIdentity = fields.filter((f) => IDENTITY_FIELDS.has(f.key) && f.key !== 'name' && f.key !== 'description')
+  const pricingFields = fields.filter((f) => PRICING_FIELDS.has(f.key))
+  const statusField = fields.find((f) => f.key === 'status')
+  const hasActive = fields.some((f) => f.key === 'isActive')
+
+  const allKnown = new Set([...IDENTITY_FIELDS, ...PRICING_FIELDS, ...SKIP_FIELDS])
+  const projectFields = fields.filter((f) => !allKnown.has(f.key))
+
+  const groupFieldMap = new Map<string, FieldDef[]>()
+  const ungroupedProject: FieldDef[] = []
+  for (const field of projectFields) {
+    if (field.group) {
+      const existing = groupFieldMap.get(field.group) ?? []
+      existing.push(field)
+      groupFieldMap.set(field.group, existing)
+    } else {
+      ungroupedProject.push(field)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Identity */}
+      <Card>
+        <CardContent className="pt-5">
+          <div className="flex gap-5">
+            <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+              <Briefcase className="h-8 w-8" />
+            </div>
+            <div className="flex-1 space-y-4">
+              {/* Name + active toggle */}
+              <div className="flex items-start gap-4">
+                {nameField && (
+                  <div className="flex-1 space-y-1.5">
+                    <label className="text-sm font-medium">{nameField.label}{nameField.required && <span className="text-destructive ml-0.5">*</span>}</label>
+                    {renderField(nameField, values[nameField.key], (val) => onChange(nameField.key, val))}
+                  </div>
+                )}
+                {(hasActive || statusField) && (
+                  <div className="mt-6 shrink-0">
+                    <ActiveToggle
+                      active={hasActive ? (values.isActive ?? true) : statusField ? values[statusField.key] === 'active' : true}
+                      onChange={(v) => {
+                        if (hasActive) onChange('isActive', v)
+                        if (statusField) onChange(statusField.key, v ? 'active' : 'inactive')
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+              {/* Description */}
+              {descField && <FieldItem field={descField} value={values[descField.key]} onChange={(val) => onChange(descField.key, val)} renderField={renderField} colSpan />}
+              {/* Other identity */}
+              {otherIdentity.length > 0 && (
+                <div className="grid gap-4 sm:grid-cols-2">
+                  {otherIdentity.map((field) => (
+                    <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} />
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Pricing & Duration */}
+      {pricingFields.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Pricing & Duration</h3>
+          <Card className="mt-1">
+            <CardContent className="pt-5">
+              <div className="grid gap-4 md:grid-cols-2">
+                {pricingFields.map((field) => (
+                  <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Project-specific grouped fields */}
+      {fieldGroups.map((group) => {
+        const gFields = groupFieldMap.get(group.id)
+        if (!gFields || gFields.length === 0) return null
+        const cols = group.columns ?? 2
+        return (
+          <div key={group.id}>
+            <h3 className="text-sm font-semibold text-foreground">{group.label}</h3>
+            <Card className="mt-1">
+              <CardContent className="pt-5">
+                <div className={`grid gap-4 ${cols >= 2 ? 'md:grid-cols-2' : ''}`}>
+                  {gFields.map((field) => (
+                    <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} colSpan={field.span === 2} />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )
+      })}
+
+      {/* Ungrouped project fields */}
+      {ungroupedProject.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Details</h3>
+          <Card className="mt-1">
+            <CardContent className="pt-5">
+              <div className="grid gap-4 md:grid-cols-2">
+                {ungroupedProject.map((field) => (
+                  <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} colSpan={field.span === 2} />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/crud/archetypes/SubjectDetailTabs.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from 'react'
+import { User, Clock, FileText } from 'lucide-react'
+import { Card, CardContent } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { PersonLink } from './EntityLink'
+import { getSupabaseClientOptional } from '@fayz-ai/core'
+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 OwnerTab({ item }: { item: any }) {
+  const t = useTranslation()
+  const [person, setPerson] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const tutorId = item?.tutorId
+    if (!tutorId) { setLoading(false); return }
+
+    const supabase = getSupabaseClientOptional() as any
+    if (!supabase) { setLoading(false); return }
+
+    supabase.schema('saas_core')
+      .from('persons')
+      .select('*')
+      .eq('id', tutorId)
+      .single()
+      .then(({ data }: any) => {
+        setPerson(data)
+        setLoading(false)
+      }, () => setLoading(false))
+  }, [item?.tutorId])
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="py-8 flex justify-center">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-muted border-t-primary" />
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!person) {
+    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">
+            <User className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <p className="text-sm font-medium">{t('crud.archetype.owner.noOwner')}</p>
+          <p className="text-xs text-muted-foreground mt-1">{t('crud.archetype.owner.assignHint')}</p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const fields = [
+    { label: t('crud.archetype.owner.name'), value: person.name },
+    { label: t('crud.archetype.owner.phone'), value: person.phone, href: person.phone ? `tel:${person.phone}` : undefined },
+    { label: t('crud.archetype.owner.email'), value: person.email, href: person.email ? `mailto:${person.email}` : undefined },
+    { label: t('crud.archetype.owner.document'), value: person.document_number },
+    { label: t('crud.archetype.owner.address'), value: [person.address, person.city, person.state].filter(Boolean).join(', ') },
+  ].filter((f) => f.value)
+
+  return (
+    <Card>
+      <CardContent className="pt-5">
+        <div className="flex items-start gap-4 mb-4">
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <User className="h-5 w-5" />
+          </div>
+          <div className="flex-1">
+            <PersonLink personId={person.id} kind={person.kind} className="text-base font-semibold">
+              {person.name}
+            </PersonLink>
+            <div className="flex items-center gap-2 mt-0.5">
+              <Badge variant="secondary" className="text-[10px] capitalize">{person.kind}</Badge>
+              <Badge variant={person.is_active ? 'default' : 'secondary'} className="text-[10px]">
+                {person.is_active ? t('crud.archetype.owner.active') : t('crud.archetype.owner.inactive')}
+              </Badge>
+            </div>
+          </div>
+        </div>
+        <dl className="divide-y">
+          {fields.map((f) => (
+            <div key={f.label} className="grid grid-cols-3 gap-4 py-2.5">
+              <dt className="text-sm text-muted-foreground">{f.label}</dt>
+              <dd className="col-span-2 text-sm">
+                {f.href ? (
+                  <a href={f.href} className="text-primary hover:underline">{f.value}</a>
+                ) : f.value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function SubjectHistoryTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Clock}
+      title={t('crud.archetype.history.title')}
+      description={t('crud.archetype.history.description')}
+    />
+  )
+}
+
+export function SubjectDocumentsTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={FileText}
+      title={t('crud.archetype.subjectDocuments.title')}
+      description={t('crud.archetype.subjectDocuments.description')}
+    />
+  )
+}
+
+export const SUBJECT_DETAIL_TABS = [
+  { id: 'owner', label: 'Owner', component: OwnerTab },
+  { id: 'history', label: 'History', component: SubjectHistoryTab },
+  { id: 'documents', label: 'Documents', component: SubjectDocumentsTab },
+]

package/src/crud/archetypes/SubjectFormLayout.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+import * as LucideIcons from 'lucide-react'
+import { Card, CardContent } from '@fayz-ai/ui'
+import { ActiveToggle } from './ActiveToggle'
+import { PersonPicker } from './PersonPicker'
+import type { FieldDef, FieldGroup } from '@fayz-ai/core'
+
+interface SubjectFormLayoutProps {
+  fields: FieldDef[]
+  allFields?: FieldDef[]
+  fieldGroups: FieldGroup[]
+  values: Record<string, any>
+  onChange: (key: string, val: any) => void
+  renderField: (field: FieldDef, value: any, onChange: (val: any) => void) => React.ReactNode
+  entityIcon?: string
+}
+
+const OWNER_FIELDS = new Set(['tutorName', 'tutorPhone', 'tutorId'])
+const REFERRAL_FIELDS = new Set(['referringVetId', 'referringClinicId'])
+const SKIP_FIELDS = new Set(['isActive', 'notes', 'tags', 'metadata'])
+
+function FieldItem({ field, value, onChange, renderField, colSpan }: {
+  field: FieldDef; value: any; onChange: (val: any) => void
+  renderField: SubjectFormLayoutProps['renderField']; colSpan?: boolean
+}) {
+  return (
+    <div className={`space-y-1.5 ${colSpan ? 'md:col-span-2' : ''}`}>
+      <label className="text-sm font-medium">
+        {field.label}{field.required && <span className="text-destructive ml-0.5">*</span>}
+      </label>
+      {renderField(field, value, onChange)}
+    </div>
+  )
+}
+
+export function SubjectFormLayout({ fields, allFields, fieldGroups, values, onChange, renderField, entityIcon }: SubjectFormLayoutProps) {
+  const all = allFields ?? fields
+  const nameField = fields.find((f) => f.key === 'name')
+  const hasActive = fields.some((f) => f.key === 'isActive')
+  const notesField = fields.find((f) => f.key === 'notes')
+  const hasOwnerPicker = all.some((f) => f.key === 'tutorId' || f.key === 'tutorName')
+  const referralFields = fields.filter((f) => REFERRAL_FIELDS.has(f.key))
+
+  // Main subject fields = everything except name, owner, referral, skip
+  const allSkip = new Set([...OWNER_FIELDS, ...REFERRAL_FIELDS, ...SKIP_FIELDS, 'name'])
+  const subjectFields = fields.filter((f) => !allSkip.has(f.key))
+
+  // Group subject fields
+  const groupFieldMap = new Map<string, FieldDef[]>()
+  const ungrouped: FieldDef[] = []
+  for (const field of subjectFields) {
+    if (field.group) {
+      const existing = groupFieldMap.get(field.group) ?? []
+      existing.push(field)
+      groupFieldMap.set(field.group, existing)
+    } else {
+      ungrouped.push(field)
+    }
+  }
+
+  const IconComponent = (LucideIcons as any)[entityIcon ?? 'Heart'] ?? LucideIcons.Heart
+
+  return (
+    <div className="space-y-6">
+      {/* Identity — icon + name + active */}
+      <Card>
+        <CardContent className="pt-5">
+          <div className="flex gap-5">
+            <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+              {React.createElement(IconComponent, { className: 'h-8 w-8' })}
+            </div>
+            <div className="flex-1 space-y-4">
+              <div className="flex items-start gap-4">
+                {nameField && (
+                  <div className="flex-1 space-y-1.5">
+                    <label className="text-sm font-medium">{nameField.label}{nameField.required && <span className="text-destructive ml-0.5">*</span>}</label>
+                    {renderField(nameField, values[nameField.key], (val) => onChange(nameField.key, val))}
+                  </div>
+                )}
+                {hasActive && (
+                  <div className="mt-6 shrink-0">
+                    <ActiveToggle active={values.isActive ?? true} onChange={(v) => onChange('isActive', v)} />
+                  </div>
+                )}
+              </div>
+              {/* Ungrouped fields inline */}
+              {ungrouped.length > 0 && (
+                <div className="grid gap-4 sm:grid-cols-3">
+                  {ungrouped.map((field) => (
+                    <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} />
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Grouped subject fields */}
+      {fieldGroups.map((group) => {
+        const gFields = groupFieldMap.get(group.id)
+        if (!gFields || gFields.length === 0) return null
+        const cols = group.columns ?? 2
+        return (
+          <div key={group.id}>
+            <h3 className="text-sm font-semibold text-foreground">{group.label}</h3>
+            <Card className="mt-1">
+              <CardContent className="pt-5">
+                <div className={`grid gap-4 ${cols >= 2 ? 'md:grid-cols-2' : ''} ${cols >= 3 ? 'lg:grid-cols-3' : ''}`}>
+                  {gFields.map((field) => (
+                    <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} colSpan={field.span === 2} />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )
+      })}
+
+      {/* Owner / Tutor — person picker */}
+      {hasOwnerPicker && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Owner / Tutor</h3>
+          <Card className="mt-1">
+            <CardContent className="pt-5">
+              <PersonPicker
+                value={values.tutorId}
+                onChange={(personId) => onChange('tutorId', personId)}
+                personKind="customer"
+                label="Tutor"
+                placeholder="Search or type a name to add..."
+              />
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Referral */}
+      {referralFields.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Referral</h3>
+          <Card className="mt-1">
+            <CardContent className="pt-5">
+              <div className="grid gap-4 md:grid-cols-2">
+                {referralFields.map((field) => (
+                  <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Notes */}
+      {notesField && (
+        <Card>
+          <CardContent className="pt-5">
+            <FieldItem field={notesField} value={values[notesField.key]} onChange={(val) => onChange(notesField.key, val)} renderField={renderField} />
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

package/src/crud/createCrudPage.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react'
+import { CrudPage } from './CrudPage'
+import { createCrudStore } from '../stores/createCrudStore'
+import { resolveDataProvider } from '@fayz-ai/core'
+import { registerEntity, deriveEntityKey } from '@fayz-ai/core'
+import type { EntityDef } from '@fayz-ai/core'
+import type { DataProvider } from '@fayz-ai/core'
+
+interface CreateCrudPageOptions<T extends { id: string }> {
+  mockData?: T[]
+  dataProvider?: DataProvider<T>
+  /** List display mode: 'table' (default) or 'cards' */
+  display?: 'table' | 'cards'
+  /** Feature ID for permission gating on CRUD actions */
+  feature?: string
+}
+
+export function createCrudPage<T extends { id: string }>(
+  entityDef: EntityDef<T>,
+  options?: CreateCrudPageOptions<T>,
+): React.ComponentType & { __crudBasePath?: string } {
+  const display = options?.display ?? 'table'
+
+  // If an explicit dataProvider was given, use it eagerly (no lazy resolution needed)
+  let eagerStore: ReturnType<typeof createCrudStore<T>> | null = null
+  if (options?.dataProvider) {
+    eagerStore = createCrudStore(options.dataProvider)
+  }
+
+  const GeneratedCrudPage: React.FC & { __crudBasePath?: string } = () => {
+    // Lazy provider resolution — runs at render time when Supabase is already initialized
+    const useStore = useMemo(() => {
+      if (eagerStore) return eagerStore
+      const provider = resolveDataProvider(entityDef, options?.mockData)
+      return createCrudStore(provider)
+    }, [])
+
+    const basePath = GeneratedCrudPage.__crudBasePath ?? '/'
+    return (
+      <CrudPage
+        entityDef={entityDef as EntityDef<any>}
+        useStore={useStore as any}
+        basePath={basePath}
+        display={display}
+        feature={options?.feature}
+      />
+    )
+  }
+
+  GeneratedCrudPage.displayName = `CrudPage(${entityDef.name})`
+  ;(GeneratedCrudPage as any).__isCrudPage = true
+  ;(GeneratedCrudPage as any).__entityDef = entityDef
+
+  registerEntity({
+    entityKey: deriveEntityKey(entityDef),
+    label: entityDef.name,
+    labelPlural: entityDef.namePlural ?? entityDef.name,
+    icon: entityDef.icon,
+    fields: entityDef.fields,
+    source: 'app',
+    archetype: entityDef.data?.archetype,
+  })
+
+  return GeneratedCrudPage
+}

package/src/crud/csv-export.ts

@@ -0,0 +1,17 @@
+import { exportCSV } from '@fayz-ai/core'
+import type { CSVColumn } from '@fayz-ai/core'
+import type { EntityDef } from '@fayz-ai/core'
+
+export function exportToCSV<T extends Record<string, any>>(
+  items: T[],
+  entityDef: EntityDef,
+): void {
+  const columns: CSVColumn[] = entityDef.fields
+    .filter((f) => f.showInTable !== false)
+    .map((f) => ({ key: f.key, label: f.label }))
+
+  const namePlural = entityDef.namePlural ?? entityDef.name + 's'
+  const filename = `${namePlural.toLowerCase().replace(/\s+/g, '-')}-export`
+
+  exportCSV(columns, items, filename)
+}