@fayz-ai/saas 0.8.0 → 0.8.2

package/src/crud/CrudFormPage.tsx

@@ -5,6 +5,7 @@ import { Button } from '@fayz-ai/ui'
 import { Input } from '@fayz-ai/ui'
 import { Checkbox } from '@fayz-ai/ui'
 import { CurrencyInput } from '@fayz-ai/ui'
+import { MarkdownEditor } from '@fayz-ai/ui'
 import { toast } from '@fayz-ai/ui'
 import { useSaveBar, useBackHandler } from '@fayz-ai/ui'
 import { PersonFormLayout } from './archetypes/PersonFormLayout'
@@ -13,9 +14,11 @@ import { ServiceFormLayout } from './archetypes/ServiceFormLayout'
 import { LocationFormLayout } from './archetypes/LocationFormLayout'
 import { SubjectFormLayout } from './archetypes/SubjectFormLayout'
 import { useTranslation } from '@fayz-ai/core'
+import type { EntityImageConfig } from '@fayz-ai/core'
 import type { FieldDef, FieldGroup, EntityDef } from '@fayz-ai/core'
 import type { FormLayout } from '@fayz-ai/core'
 import { RelationSelect } from './relation-field'
+import { useLimitGuard, invalidateLimit } from '../access'
 
 interface CrudFormPageProps {
   entityDef: EntityDef
@@ -134,6 +137,16 @@ function renderField(field: FieldDef, value: any, onChange: (val: any) => void,
           className={`${baseClass} min-h-[60px] py-1.5`}
         />
       )
+    case 'markdown':
+      return (
+        <MarkdownEditor
+          value={value ?? ''}
+          onChange={onChange}
+          placeholder={field.placeholder}
+          minRows={12}
+          defaultMode="edit"
+        />
+      )
     case 'relation':
       return (
         <RelationSelect
@@ -237,16 +250,104 @@ function FormFieldItem({ field, value, onChange, allValues }: { field: FieldDef;
   )
 }
 
+/**
+ * The image slot, wired. Renders the record's current image and, when the entity
+ * supplies an `upload`, lets it be replaced. Upload attaches the file to an
+ * existing record id, so in create mode the slot explains itself instead of
+ * offering an action that cannot work yet.
+ */
+function ImageSlot({
+  image,
+  row,
+  canEdit,
+}: {
+  image: EntityImageConfig
+  row: Record<string, any>
+  canEdit: boolean
+}) {
+  const t = useTranslation()
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [url, setUrl] = React.useState<string | undefined>(() => image.get(row))
+  const [busy, setBusy] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  // The form mounts before the record is loaded in edit mode, so the initial
+  // value can be undefined and arrive later.
+  React.useEffect(() => { setUrl(image.get(row)) }, [image.get(row)])
+
+  const pick = () => { if (canEdit && !busy) inputRef.current?.click() }
+
+  const onFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file || !image.upload) return
+    setBusy(true)
+    setError(null)
+    try {
+      setUrl(await image.upload(file, row))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const editable = canEdit && Boolean(image.upload)
+
+  return (
+    <div className="shrink-0">
+      <div
+        onClick={pick}
+        role={editable ? 'button' : undefined}
+        tabIndex={editable ? 0 : undefined}
+        onKeyDown={(e) => { if (editable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); pick() } }}
+        title={editable ? t('crud.form.changeImage') : undefined}
+        className={`relative flex h-20 w-20 items-center justify-center overflow-hidden rounded-lg border-2 text-muted-foreground transition-colors ${
+          url ? 'border-solid border-border' : 'border-dashed border-muted'
+        } ${editable ? 'cursor-pointer hover:border-primary/30 hover:text-primary/50' : ''}`}
+      >
+        {url
+          ? <img src={url} alt="" className="h-full w-full object-cover" />
+          : <ImagePlus className="h-5 w-5" />}
+        {busy && (
+          <span className="absolute inset-0 flex items-center justify-center bg-background/70 text-[10px]">
+            ...
+          </span>
+        )}
+      </div>
+      {editable && (
+        <input
+          ref={inputRef}
+          type="file"
+          accept={image.accept ?? 'image/*'}
+          className="hidden"
+          onChange={onFile}
+        />
+      )}
+      {!canEdit && (
+        <p className="mt-1 w-20 text-[10px] leading-tight text-muted-foreground">
+          {t('crud.form.imageAfterSave')}
+        </p>
+      )}
+      {error && <p className="mt-1 w-20 text-[10px] leading-tight text-destructive">{error}</p>}
+    </div>
+  )
+}
+
 function FormGroup({
   group,
   fields,
   values,
   onChange,
+  image,
+  canEditImage,
 }: {
   group: FieldGroup
   fields: FieldDef[]
   values: Record<string, any>
   onChange: (key: string, val: any) => void
+  image?: EntityImageConfig
+  canEditImage?: boolean
 }) {
   const cols = group.columns ?? 2
 
@@ -274,12 +375,16 @@ function FormGroup({
         <CardContent className="pt-4">
           {group.imageSlot ? (
             <div className="flex gap-4">
-              {/* Decorative image slot — non-functional placeholder for now. */}
-              <div className="shrink-0">
-                <div className="flex h-20 w-20 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-muted text-muted-foreground transition-colors hover:border-primary/30 hover:text-primary/50">
-                  <ImagePlus className="h-5 w-5" />
-                </div>
-              </div>
+              {image
+                ? <ImageSlot image={image} row={values} canEdit={Boolean(canEditImage)} />
+                : (
+                  // No entity image config: keep the old decorative square.
+                  <div className="shrink-0">
+                    <div className="flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-muted text-muted-foreground">
+                      <ImagePlus className="h-5 w-5" />
+                    </div>
+                  </div>
+                )}
               <div className="flex-1">{grid}</div>
             </div>
           ) : (
@@ -309,7 +414,16 @@ export function CrudFormPage({ entityDef, mode, initialData, onSubmit, onCancel,
 
   const computedKeys = new Set(formFields.filter((f) => f.type === 'computed').map((f) => f.key))
 
+  // Plan quantity guard for CREATE. Hook is called unconditionally (rules of
+  // hooks) with a safe empty key when the entity declares none; the guard then
+  // resolves to 'ok'. Degrades to allow-all outside <AccessProvider>.
+  const limitKey = entityDef.limitKey
+  const guardLimit = useLimitGuard(limitKey ?? '')
+
   const submit = async () => {
+    // Client-side plan cap: block the save (the guard opens the UpgradeModal)
+    // before touching the store. Only CREATE consumes a new slot.
+    if (mode === 'create' && limitKey && (await guardLimit(1)) === 'blocked') return
     setSaving(true)
     try {
       // Sanitize: convert empty strings to null so the DB doesn't choke on e.g. empty date fields.
@@ -320,6 +434,8 @@ export function CrudFormPage({ entityDef, mode, initialData, onSubmit, onCancel,
         sanitized[key] = val === '' ? null : val
       }
       await onSubmit(sanitized)
+      // Refresh the live count so gates/banners reflect the new row immediately.
+      if (mode === 'create' && limitKey) invalidateLimit(limitKey)
     } catch (err: any) {
       const message = err?.message || 'Something went wrong'
       toast.error(t('crud.form.failedToSave', { entity: entityDef.name.toLowerCase() }), { description: message })
@@ -435,6 +551,8 @@ export function CrudFormPage({ entityDef, mode, initialData, onSubmit, onCancel,
                   fields={fields}
                   values={values}
                   onChange={handleChange}
+                  image={entityDef.image}
+                  canEditImage={mode === 'edit'}
                 />
               )
             })}

package/src/crud/CrudListView.tsx

@@ -10,6 +10,7 @@ import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@fayz-
 import { fieldToColumns } from './fieldToColumn'
 import { CrudCardGrid } from './CrudCardGrid'
 import { PermissionGate } from '../permissions/PermissionGate'
+import { LimitGate } from '../shell/components/billing/gates'
 
 /** A resolved facet: a field plus the option pills to render. */
 export interface CrudFacet {
@@ -112,6 +113,20 @@ export function CrudListView<T extends { id: string }>({
     ? <Button onClick={onNew}>{addLabel ?? t('crud.list.addEntity', { entity: entityDef.name })}</Button>
     : null
 
+  // Compose the create action's gates: RBAC (PermissionGate, role axis) then the
+  // plan quantity cap (LimitGate, plan axis). At the cap, LimitGate dims the
+  // button and intercepts the click to open the global UpgradeModal.
+  const gatedNewButton = newButton
+    ? (() => {
+        const roleGated = feature
+          ? <PermissionGate feature={feature} action="create">{newButton}</PermissionGate>
+          : newButton
+        return entityDef.limitKey
+          ? <LimitGate limitKey={entityDef.limitKey}>{roleGated}</LimitGate>
+          : roleGated
+      })()
+    : null
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -124,7 +139,7 @@ export function CrudListView<T extends { id: string }>({
           )}
         </div>
         <div className="flex items-center gap-2">
-          {newButton && (feature ? <PermissionGate feature={feature} action="create">{newButton}</PermissionGate> : newButton)}
+          {gatedNewButton}
           {hasImportExport && (
             <Dropdown>
               <DropdownTrigger asChild>

package/src/crud/CrudPage.tsx

@@ -13,6 +13,7 @@ import { ImportWizard } from './ImportWizard'
 import { exportToCSV } from './csv-export'
 import { fieldToColumns } from './fieldToColumn'
 import { PermissionGate } from '../permissions/PermissionGate'
+import { useLimitGuard, invalidateLimit } from '../access'
 import { useFieldRules } from '../hooks/useFieldRules'
 import { deriveEntityKey } from '@fayz-ai/core'
 import { toast } from '@fayz-ai/ui'
@@ -196,6 +197,7 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
   }, [store])
   const tanColumns = useCrudColumns(entityDef, { basePath: normalizedBasePath, onDelete: readOnly ? undefined : (item) => setDeleteItem(item), onInlineUpdate: handleInlineUpdate, feature, readOnly })
   const currentOrgId = useOrganizationStore((s) => s.currentOrg?.id)
+  const guardImport = useLimitGuard(entityDef.limitKey ?? '')
 
   useEffect(() => {
     if (currentOrgId) store.fetch()
@@ -216,11 +218,25 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
       }
     }
 
+    // Plan quantity guard BEFORE the batch insert: adding `rows.length` rows must
+    // stay within the plan cap. When it would exceed, the guard opens the global
+    // UpgradeModal; we also surface a clear toast + a wizard error row and abort.
+    if (entityDef.limitKey && (await guardImport(rows.length)) === 'blocked') {
+      toast.error(t('crud.import.limitExceeded'))
+      return {
+        success: 0,
+        errors: [{ row: 0, message: t('crud.import.limitExceeded') }],
+      }
+    }
+
     const { success, results } = await store.createMany(rows, {
       batchSize: 10,
       onProgress,
     })
 
+    // Refresh the live count so gates/banners reflect the imported rows.
+    if (success > 0 && entityDef.limitKey) invalidateLimit(entityDef.limitKey)
+
     const errors: ImportRowError[] = []
     for (let i = 0; i < results.length; i++) {
       if (results[i].error) {
@@ -232,7 +248,7 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
       toast.success(t('crud.import.toastSuccess', { count: String(success) }))
     }
     return { success, errors }
-  }, [store, t])
+  }, [store, t, guardImport, entityDef.limitKey])
 
   const handleExport = useCallback(() => {
     const items = store.items
@@ -460,10 +476,16 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
     )
   }
 
-  const handleDeleteConfirm = () => {
-    if (deleteItem) {
-      store.remove((deleteItem as any).id)
-      setDeleteItem(null)
+  const handleDeleteConfirm = async () => {
+    if (!deleteItem) return
+    const id = (deleteItem as any).id
+    setDeleteItem(null)
+    // Await the removal so the (cache-invalidated) list refetch completes and the
+    // deleted row is gone before we settle on the list view — previously this was
+    // fire-and-forget and raced with navigation, leaving a ghost row behind.
+    try {
+      await store.remove(id)
+    } finally {
       navigateToList()
     }
   }

package/src/crud/DeleteConfirmDialog.tsx

@@ -27,7 +27,7 @@ export function DeleteConfirmDialog({ open, onClose, onConfirm, entityName, disp
           <ModalTitle>{t('crud.delete.title', { entity: entityName })}</ModalTitle>
           <ModalDescription>
             {displayValue
-              ? t('crud.delete.confirmNamed', { name: displayValue })
+              ? t('crud.delete.confirmNamed', { displayValue })
               : t('crud.delete.confirmGeneric', { entity: entityName.toLowerCase() })}
           </ModalDescription>
         </ModalHeader>