Add accounts UI with list, create, edit, detail tabs for all sub-entities

Accounts list with paginated table, search, sort. Account detail page with
tabs for members, payment methods, tax exemptions, and processor links.
All sub-entities have create/edit dialogs and delete actions. Forms use
shared Zod schemas via react-hook-form.

packages/admin/src/components/accounts/payment-method-form.tsx

@@ -0,0 +1,84 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { PaymentMethodCreateSchema } from '@forte/shared/schemas'
+import type { PaymentMethodCreateInput } from '@forte/shared/schemas'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+interface PaymentMethodFormProps {
+  accountId: string
+  onSubmit: (data: Record<string, unknown>) => void
+  loading?: boolean
+}
+
+export function PaymentMethodForm({ accountId, onSubmit, loading }: PaymentMethodFormProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<PaymentMethodCreateInput>({
+    resolver: zodResolver(PaymentMethodCreateSchema),
+    defaultValues: {
+      accountId,
+      processor: 'stripe',
+      processorPaymentMethodId: '',
+      isDefault: false,
+    },
+  })
+
+  const processor = watch('processor')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label>Processor</Label>
+        <Select
+          value={processor}
+          onValueChange={(v) => setValue('processor', v as 'stripe' | 'global_payments')}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="stripe">Stripe</SelectItem>
+            <SelectItem value="global_payments">Global Payments</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="pmId">Payment Method ID *</Label>
+        <Input id="pmId" {...register('processorPaymentMethodId')} placeholder="pm_..." />
+        {errors.processorPaymentMethodId && (
+          <p className="text-sm text-destructive">{errors.processorPaymentMethodId.message}</p>
+        )}
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="cardBrand">Card Brand</Label>
+          <Input id="cardBrand" {...register('cardBrand')} placeholder="visa" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="lastFour">Last Four</Label>
+          <Input id="lastFour" {...register('lastFour')} placeholder="4242" maxLength={4} />
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="expMonth">Exp Month</Label>
+          <Input id="expMonth" type="number" {...register('expMonth', { valueAsNumber: true })} min={1} max={12} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="expYear">Exp Year</Label>
+          <Input id="expYear" type="number" {...register('expYear', { valueAsNumber: true })} min={2024} max={2100} />
+        </div>
+      </div>
+      <Button type="submit" disabled={loading}>
+        {loading ? 'Saving...' : 'Add Payment Method'}
+      </Button>
+    </form>
+  )
+}