@hypersonic-js/admin 0.2.0

package/dist/templates/ModelForm.tsx

@@ -0,0 +1,288 @@
+import { useState, useRef } from 'react'
+import { useForm, Link } from '@inertiajs/react'
+
+type FieldKind = 'scalar' | 'relation' | 'enum'
+
+interface FieldMeta {
+  name: string
+  prismaType: string
+  kind: FieldKind
+  isRequired: boolean
+  isForeignKey: boolean
+  relatedModelName?: string
+  relatedModelSlug?: string
+  enumValues?: string[]
+}
+
+interface ModelMeta {
+  name: string
+  urlSlug: string
+  displayName: string
+  idField: string
+  formFields: FieldMeta[]
+}
+
+interface FkOption {
+  id: string
+  label: string
+}
+
+type RelatedOptionsMap = Record<string, { options: FkOption[]; hasMore: boolean }>
+
+interface FieldOptionsState {
+  options: FkOption[]
+  hasMore: boolean
+  page: number
+  loading: boolean
+}
+
+interface Props {
+  model: ModelMeta
+  record: Record<string, unknown> | null
+  models: Array<{ name: string; urlSlug: string }>
+  errors: Record<string, string>
+  prefix: string
+  relatedOptions: RelatedOptionsMap
+}
+
+function toLocalDateTimeString(date: Date): string {
+  const pad = (n: number): string => String(n).padStart(2, '0')
+  return (
+    `${date.getFullYear()}-` +
+    `${pad(date.getMonth() + 1)}-` +
+    `${pad(date.getDate())}T` +
+    `${pad(date.getHours())}:` +
+    `${pad(date.getMinutes())}:` +
+    `${pad(date.getSeconds())}`
+  )
+}
+
+function buildInitialData(
+  formFields: FieldMeta[],
+  record: Record<string, unknown> | null,
+  relatedOptions: RelatedOptionsMap = {},
+): Record<string, string> {
+  return Object.fromEntries(
+    formFields.map((f) => {
+      const value = record?.[f.name]
+      if (value instanceof Date) return [f.name, toLocalDateTimeString(value)]
+      if (value !== null && value !== undefined) return [f.name, String(value)]
+
+      // New record — use type-aware defaults only for REQUIRED fields so that
+      // optional columns are left unset rather than silently written with a
+      // synthetic value the user never chose.
+      if (f.prismaType === 'Boolean' && f.isRequired) return [f.name, 'false']
+      if (f.kind === 'enum' && f.isRequired && f.enumValues !== undefined && f.enumValues.length > 0) {
+        return [f.name, f.enumValues[0]!]
+      }
+
+      // For required FK fields on create forms, default to the first available
+      // option so the controlled <select> value matches what the browser renders
+      // as visually selected. Without this the select appears to have a valid
+      // selection but the underlying form value is '', which coerceData converts
+      // to undefined for required fields, causing a Prisma validation error.
+      if (f.isForeignKey && f.isRequired) {
+        const firstOption = relatedOptions[f.name]?.options[0]
+        if (firstOption !== undefined) {
+          return [f.name, String(firstOption.id)]
+        }
+      }
+
+      return [f.name, '']
+    }),
+  )
+}
+
+export default function AdminModelForm({ model, record, errors, prefix, relatedOptions }: Props) {
+  const isEdit = record !== null
+  const { data, setData, post, patch, processing } = useForm(
+    buildInitialData(model.formFields, record, relatedOptions),
+  )
+
+  const [fkOptions, setFkOptions] = useState<Record<string, FieldOptionsState>>(() =>
+    Object.fromEntries(
+      Object.entries(relatedOptions).map(([key, val]) => [
+        key,
+        { options: val.options, hasMore: val.hasMore, page: 1, loading: false },
+      ]),
+    ),
+  )
+
+  // Ref-based guard prevents duplicate in-flight requests for the same field.
+  // A ref is used (not state) so the guard is updated synchronously — two rapid
+  // clicks both read the ref before any setState is committed, ensuring only
+  // the first click proceeds.
+  const inflight = useRef(new Set<string>())
+
+  async function loadMore(fieldName: string, relatedModelSlug: string): Promise<void> {
+    if (inflight.current.has(fieldName)) return
+
+    const current = fkOptions[fieldName]
+    if (current === undefined) return
+
+    inflight.current.add(fieldName)
+    setFkOptions((prev) => ({
+      ...prev,
+      [fieldName]: { ...prev[fieldName]!, loading: true },
+    }))
+
+    try {
+      const nextPage = current.page + 1
+      const res = await fetch(`${prefix}/related-options/${relatedModelSlug}?page=${nextPage}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const payload = (await res.json()) as { options: FkOption[]; hasMore: boolean }
+      setFkOptions((prev) => ({
+        ...prev,
+        [fieldName]: {
+          options: [...prev[fieldName]!.options, ...payload.options],
+          hasMore: payload.hasMore,
+          page: nextPage,
+          loading: false,
+        },
+      }))
+    } catch {
+      setFkOptions((prev) => ({
+        ...prev,
+        [fieldName]: { ...prev[fieldName]!, loading: false },
+      }))
+    } finally {
+      inflight.current.delete(fieldName)
+    }
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (isEdit) {
+      patch(`${prefix}/${model.urlSlug}/${String(record![model.idField])}`)
+    } else {
+      post(`${prefix}/${model.urlSlug}`)
+    }
+  }
+
+  function renderInput(field: FieldMeta) {
+    const value = data[field.name] ?? ''
+    const error = errors[field.name]
+    const baseClass = 'w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
+    const errorClass = error ? ' border-red-500' : ' border-gray-300'
+
+    if (field.isForeignKey) {
+      const state = fkOptions[field.name] ?? { options: [], hasMore: false, page: 1, loading: false }
+      return (
+        <div>
+          <select
+            value={value}
+            onChange={(e) => setData(field.name, e.target.value)}
+            className={baseClass + errorClass}
+          >
+            {!field.isRequired && <option value="">— select —</option>}
+            {state.options.map((opt) => (
+              <option key={String(opt.id)} value={String(opt.id)}>{opt.label}</option>
+            ))}
+          </select>
+          {state.hasMore && (
+            <button
+              type="button"
+              onClick={() => void loadMore(field.name, field.relatedModelSlug!)}
+              disabled={state.loading}
+              className="mt-1 text-xs text-blue-600 hover:underline disabled:opacity-50"
+            >
+              {state.loading ? 'Loading…' : 'Load more'}
+            </button>
+          )}
+        </div>
+      )
+    }
+
+    if (field.kind === 'enum' && field.enumValues) {
+      return (
+        <select
+          value={value}
+          onChange={(e) => setData(field.name, e.target.value)}
+          className={baseClass + errorClass}
+        >
+          {!field.isRequired && <option value="">— select —</option>}
+          {field.enumValues.map((v) => (
+            <option key={v} value={v}>{v}</option>
+          ))}
+        </select>
+      )
+    }
+
+    if (field.prismaType === 'Boolean') {
+      return (
+        <input
+          type="checkbox"
+          checked={value === 'true'}
+          onChange={(e) => setData(field.name, String(e.target.checked))}
+          className="h-4 w-4 text-blue-600 border-gray-300 rounded"
+        />
+      )
+    }
+
+    const inputType =
+      field.prismaType === 'Int' || field.prismaType === 'Float'
+        ? 'number'
+        : field.prismaType === 'DateTime'
+          ? 'datetime-local'
+          : 'text'
+
+    return (
+      <input
+        type={inputType}
+        value={value}
+        onChange={(e) => setData(field.name, e.target.value)}
+        required={field.isRequired}
+        className={baseClass + errorClass}
+      />
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center gap-4 mb-6">
+          <Link
+            href={`${prefix}/${model.urlSlug}`}
+            className="text-blue-600 hover:underline text-sm"
+          >
+            ← {model.displayName}
+          </Link>
+          <h1 className="text-2xl font-bold text-gray-900">
+            {isEdit ? `Edit ${model.name}` : `New ${model.name}`}
+          </h1>
+        </div>
+
+        <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-5">
+          {model.formFields.map((field) => (
+            <div key={field.name}>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {field.name}
+                {field.isRequired && <span className="text-red-500 ml-1">*</span>}
+              </label>
+              {renderInput(field)}
+              {errors[field.name] && (
+                <p className="mt-1 text-xs text-red-600">{errors[field.name]}</p>
+              )}
+            </div>
+          ))}
+
+          <div className="flex items-center gap-3 pt-2">
+            <button
+              type="submit"
+              disabled={processing}
+              className="bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50"
+            >
+              {processing ? 'Saving…' : isEdit ? 'Update' : 'Create'}
+            </button>
+            <Link
+              href={`${prefix}/${model.urlSlug}`}
+              className="text-gray-600 hover:underline text-sm"
+            >
+              Cancel
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/dist/templates/ModelIndex.tsx

@@ -0,0 +1,142 @@
+import { Link, router } from '@inertiajs/react'
+
+interface FieldMeta {
+  name: string
+  isId: boolean
+  prismaType: string
+}
+
+interface ModelMeta {
+  name: string
+  urlSlug: string
+  displayName: string
+  idField: string
+  listFields: FieldMeta[]
+}
+
+interface PaginationMeta {
+  page: number
+  perPage: number
+  total: number
+  totalPages: number
+}
+
+interface Props {
+  model: ModelMeta
+  records: Record<string, unknown>[]
+  pagination: PaginationMeta
+  models: Array<{ name: string; urlSlug: string }>
+  prefix: string
+}
+
+function displayValue(value: unknown, prismaType: string): string {
+  if (value === null || value === undefined) return '—'
+  if (prismaType === 'DateTime') {
+    const date = value instanceof Date ? value : new Date(String(value))
+    return date.toLocaleString()
+  }
+  if (value instanceof Date) return value.toLocaleString()
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+
+export default function AdminModelIndex({ model, records, pagination, prefix }: Props) {
+  function handleDelete(id: unknown) {
+    if (window.confirm(`Delete this ${model.name}?`)) {
+      router.delete(`${prefix}/${model.urlSlug}/${String(id)}`)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-4">
+            <Link href={prefix} className="text-blue-600 hover:underline text-sm">
+              ← Dashboard
+            </Link>
+            <h1 className="text-2xl font-bold text-gray-900">{model.displayName}</h1>
+          </div>
+          <Link
+            href={`${prefix}/${model.urlSlug}/new`}
+            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
+          >
+            New {model.name}
+          </Link>
+        </div>
+
+        {records.length === 0 ? (
+          <div className="bg-white rounded-lg border border-gray-200 p-12 text-center">
+            <p className="text-gray-500">No {model.displayName.toLowerCase()} yet.</p>
+          </div>
+        ) : (
+          <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+            <table className="w-full text-sm">
+              <thead className="bg-gray-50 border-b border-gray-200">
+                <tr>
+                  {model.listFields.map((f) => (
+                    <th key={f.name} className="px-4 py-3 text-left font-medium text-gray-600">
+                      {f.name}
+                    </th>
+                  ))}
+                  <th className="px-4 py-3 text-right font-medium text-gray-600">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100">
+                {records.map((record) => (
+                  <tr key={String(record[model.idField])} className="hover:bg-gray-50">
+                    {model.listFields.map((f) => (
+                      <td key={f.name} className="px-4 py-3 text-gray-800">
+                        {displayValue(record[f.name], f.prismaType)}
+                      </td>
+                    ))}
+                    <td className="px-4 py-3 text-right space-x-2">
+                      <Link
+                        href={`${prefix}/${model.urlSlug}/${String(record[model.idField])}`}
+                        className="text-blue-600 hover:underline"
+                      >
+                        Edit
+                      </Link>
+                      <button
+                        onClick={() => handleDelete(record[model.idField])}
+                        className="text-red-600 hover:underline"
+                      >
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {pagination.totalPages > 1 && (
+          <div className="flex items-center justify-between mt-4 text-sm text-gray-600">
+            <span>
+              Page {pagination.page} of {pagination.totalPages} ({pagination.total} total)
+            </span>
+            <div className="flex gap-2">
+              {pagination.page > 1 && (
+                <Link
+                  href={`${prefix}/${model.urlSlug}?page=${pagination.page - 1}`}
+                  className="px-3 py-1 border rounded hover:bg-gray-50"
+                >
+                  Previous
+                </Link>
+              )}
+              {pagination.page < pagination.totalPages && (
+                <Link
+                  href={`${prefix}/${model.urlSlug}?page=${pagination.page + 1}`}
+                  className="px-3 py-1 border rounded hover:bg-gray-50"
+                >
+                  Next
+                </Link>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/dist/templates/UserCreate.tsx

@@ -0,0 +1,189 @@
+import { useForm, Link } from '@inertiajs/react'
+
+type FieldKind = 'scalar' | 'relation' | 'enum'
+
+interface FieldMeta {
+  name: string
+  prismaType: string
+  kind: FieldKind
+  isRequired: boolean
+  enumValues?: string[]
+}
+
+interface ModelMeta {
+  name: string
+  urlSlug: string
+  displayName: string
+  formFields: FieldMeta[]
+}
+
+interface Props {
+  model: ModelMeta
+  models: Array<{ name: string; urlSlug: string }>
+  errors: Record<string, string>
+  prefix: string
+}
+
+/**
+ * Fields rendered by dedicated hardcoded inputs — excluded from the generic
+ * metadata loop. `password` is also hardcoded but is not a Prisma field and
+ * therefore never appears in model.formFields.
+ */
+const CORE_FIELD_NAMES = new Set(['name', 'email'])
+
+export default function AdminUserCreate({ model, errors, prefix }: Props) {
+  // All formFields except the two that are rendered by dedicated hardcoded
+  // inputs. Includes `role` (if present) and any custom fields.
+  const extraFields = model.formFields.filter((f) => !CORE_FIELD_NAMES.has(f.name))
+
+  const extraInitialValues = Object.fromEntries(
+    extraFields.map((f) => [
+      f.name,
+      f.kind === 'enum' && f.enumValues != null && f.enumValues.length > 0
+        ? (f.enumValues[0] ?? '')
+        : '',
+    ]),
+  )
+
+  const { data, setData, post, processing } = useForm<Record<string, string>>({
+    name: '',
+    email: '',
+    password: '',
+    ...extraInitialValues,
+  })
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    post(`${prefix}/${model.urlSlug}`)
+  }
+
+  const inputClass =
+    'w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
+
+  function borderClass(field: string): string {
+    return errors[field] ? ' border-red-500' : ' border-gray-300'
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center gap-4 mb-6">
+          <Link
+            href={`${prefix}/${model.urlSlug}`}
+            className="text-blue-600 hover:underline text-sm"
+          >
+            ← {model.displayName}
+          </Link>
+          <h1 className="text-2xl font-bold text-gray-900">New {model.name}</h1>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="bg-white rounded-lg border border-gray-200 p-6 space-y-5"
+        >
+          {/* name — hardcoded: always required by the Better Auth createUser API */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={data['name']}
+              onChange={(e) => setData('name', e.target.value)}
+              required
+              className={inputClass + borderClass('name')}
+            />
+            {errors['name'] && (
+              <p className="mt-1 text-xs text-red-600">{errors['name']}</p>
+            )}
+          </div>
+
+          {/* email — hardcoded: always required by the Better Auth createUser API */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              email <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="email"
+              value={data['email']}
+              onChange={(e) => setData('email', e.target.value)}
+              required
+              className={inputClass + borderClass('email')}
+            />
+            {errors['email'] && (
+              <p className="mt-1 text-xs text-red-600">{errors['email']}</p>
+            )}
+          </div>
+
+          {/* password — hardcoded: always required by the Better Auth createUser API.
+              Not a Prisma field so it never appears in model.formFields. */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              password <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="password"
+              value={data['password']}
+              onChange={(e) => setData('password', e.target.value)}
+              required
+              className={inputClass + borderClass('password')}
+            />
+            {errors['password'] && (
+              <p className="mt-1 text-xs text-red-600">{errors['password']}</p>
+            )}
+          </div>
+
+          {/* role and any custom fields — driven from model.formFields metadata */}
+          {extraFields.map((field) => (
+            <div key={field.name}>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {field.name}
+                {field.isRequired && <span className="text-red-500"> *</span>}
+              </label>
+              {field.kind === 'enum' && field.enumValues != null ? (
+                <select
+                  value={data[field.name] ?? ''}
+                  onChange={(e) => setData(field.name, e.target.value)}
+                  className={inputClass + borderClass(field.name)}
+                >
+                  {field.enumValues.map((v) => (
+                    <option key={v} value={v}>
+                      {v}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  type="text"
+                  value={data[field.name] ?? ''}
+                  onChange={(e) => setData(field.name, e.target.value)}
+                  required={field.isRequired}
+                  className={inputClass + borderClass(field.name)}
+                />
+              )}
+              {errors[field.name] && (
+                <p className="mt-1 text-xs text-red-600">{errors[field.name]}</p>
+              )}
+            </div>
+          ))}
+
+          <div className="flex items-center gap-3 pt-2">
+            <button
+              type="submit"
+              disabled={processing}
+              className="bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50"
+            >
+              {processing ? 'Creating…' : 'Create'}
+            </button>
+            <Link
+              href={`${prefix}/${model.urlSlug}`}
+              className="text-gray-600 hover:underline text-sm"
+            >
+              Cancel
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}