323 lines
10 KiB
TypeScript
323 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import type { ComponentProps } from 'react';
|
|
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
import { FormField } from '@/components/form';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import type { Client, Plan } from '@/types';
|
|
|
|
import type { TenantFormValues } from '../hooks/useTenantForm';
|
|
|
|
interface TenantSheetProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
tenantId?: number;
|
|
isEditMode: boolean;
|
|
register: UseFormRegister<TenantFormValues>;
|
|
errors: FieldErrors<TenantFormValues>;
|
|
isSubmitted: boolean;
|
|
onSubmit: ComponentProps<'form'>['onSubmit'];
|
|
canSubmit: boolean;
|
|
clientId: string;
|
|
planId: string;
|
|
onClientChange: (clientId: string) => void;
|
|
onPlanChange: (planId: string) => void;
|
|
onNameChange: (name: string) => void;
|
|
clients: Client[];
|
|
plans: Plan[];
|
|
isLookupsLoading: boolean;
|
|
isSaving: boolean;
|
|
adminEmail?: string;
|
|
}
|
|
|
|
export function TenantSheet({
|
|
open,
|
|
onOpenChange,
|
|
tenantId,
|
|
isEditMode,
|
|
register,
|
|
errors,
|
|
isSubmitted,
|
|
onSubmit,
|
|
canSubmit,
|
|
clientId,
|
|
planId,
|
|
onClientChange,
|
|
onPlanChange,
|
|
onNameChange,
|
|
clients,
|
|
plans,
|
|
isLookupsLoading,
|
|
isSaving,
|
|
adminEmail,
|
|
}: TenantSheetProps) {
|
|
const fieldError = (field: keyof TenantFormValues) =>
|
|
isSubmitted ? errors[field]?.message : undefined;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
|
|
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
|
|
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
|
|
{tenantId ? 'Edit Tenant' : 'Create Tenant'}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-sm">
|
|
Bind a client and subscription plan, then invite the tenant
|
|
administrator.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
|
|
<div className="max-h-[50vh] space-y-5 overflow-y-auto px-6 py-4">
|
|
<div className="space-y-1">
|
|
<p>Basic Information</p>
|
|
<p className="text-muted-foreground">
|
|
Tenant identity and subscription binding.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<FormField
|
|
id="tenant-name"
|
|
label="Tenant Name"
|
|
required
|
|
error={fieldError('name')}
|
|
>
|
|
<Input
|
|
id="tenant-name"
|
|
placeholder="Enter tenant name"
|
|
aria-invalid={!!fieldError('name')}
|
|
{...register('name', {
|
|
onChange: (event) => onNameChange(event.target.value),
|
|
})}
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField
|
|
id="tenant-slug"
|
|
label="Slug"
|
|
required
|
|
error={fieldError('slug')}
|
|
>
|
|
<Input
|
|
id="tenant-slug"
|
|
placeholder="acme-corp"
|
|
aria-invalid={!!fieldError('slug')}
|
|
{...register('slug')}
|
|
readOnly={isEditMode}
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<FormField label="Client" required error={fieldError('client_id')}>
|
|
<Select
|
|
value={clientId}
|
|
onValueChange={onClientChange}
|
|
disabled={isLookupsLoading}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue
|
|
placeholder={
|
|
isLookupsLoading
|
|
? 'Loading clients...'
|
|
: 'Select client'
|
|
}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{clients.map((client) => (
|
|
<SelectItem key={client.id} value={String(client.id)}>
|
|
{client.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<input
|
|
type="hidden"
|
|
{...register('client_id')}
|
|
value={clientId}
|
|
readOnly
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField
|
|
label="Subscription Plan"
|
|
required
|
|
error={fieldError('plan_id')}
|
|
>
|
|
<Select
|
|
value={planId}
|
|
onValueChange={onPlanChange}
|
|
disabled={isLookupsLoading}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue
|
|
placeholder={
|
|
isLookupsLoading ? 'Loading plans...' : 'Select plan'
|
|
}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{plans.map((plan) => (
|
|
<SelectItem key={plan.id} value={String(plan.id)}>
|
|
{plan.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<input
|
|
type="hidden"
|
|
{...register('plan_id')}
|
|
value={planId}
|
|
readOnly
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<FormField id="tenant-domain" label="Domain">
|
|
<Input
|
|
id="tenant-domain"
|
|
placeholder="acme.example.com"
|
|
{...register('domain')}
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField
|
|
id="tenant-description"
|
|
label="Description"
|
|
className="md:col-span-2"
|
|
>
|
|
<textarea
|
|
id="tenant-description"
|
|
placeholder="North zone operations"
|
|
{...register('description')}
|
|
className="min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 outline-none focus-visible:border-ring"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
{!isEditMode ? (
|
|
<>
|
|
<div className="space-y-1">
|
|
<p>Tenant Administrator</p>
|
|
<p className="text-muted-foreground">
|
|
Invitation details for the primary tenant admin account.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<FormField
|
|
id="admin-first-name"
|
|
label="First Name"
|
|
required
|
|
error={fieldError('admin_first_name')}
|
|
>
|
|
<Input
|
|
id="admin-first-name"
|
|
placeholder="Enter first name"
|
|
aria-invalid={!!fieldError('admin_first_name')}
|
|
{...register('admin_first_name')}
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField
|
|
id="admin-last-name"
|
|
label="Last Name"
|
|
required
|
|
error={fieldError('admin_last_name')}
|
|
>
|
|
<Input
|
|
id="admin-last-name"
|
|
placeholder="Enter last name"
|
|
aria-invalid={!!fieldError('admin_last_name')}
|
|
{...register('admin_last_name')}
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<FormField
|
|
id="admin-email"
|
|
label="Admin Email"
|
|
required
|
|
error={fieldError('admin_email')}
|
|
>
|
|
<Input
|
|
id="admin-email"
|
|
type="email"
|
|
placeholder="admin@example.com"
|
|
aria-invalid={!!fieldError('admin_email')}
|
|
{...register('admin_email')}
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField
|
|
id="admin-phone"
|
|
label="Phone Number"
|
|
error={fieldError('admin_phone_number')}
|
|
>
|
|
<Input
|
|
id="admin-phone"
|
|
placeholder="+91-9000011111"
|
|
aria-invalid={!!fieldError('admin_phone_number')}
|
|
{...register('admin_phone_number')}
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
</>
|
|
) : adminEmail ? (
|
|
<div className="rounded-md border bg-muted/40 p-4 text-muted-foreground">
|
|
Admin invitation details cannot be changed after tenant
|
|
creation.
|
|
<p className="mt-1 text-foreground">
|
|
Current admin email: <span>{adminEmail}</span>
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<DialogFooter className="shrink-0 border-t px-6 py-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => onOpenChange(false)}
|
|
disabled={isSaving}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={isSaving || isLookupsLoading || !canSubmit}
|
|
>
|
|
{isSaving ? (
|
|
<Loader2 className="mr-2 size-4 animate-spin" />
|
|
) : null}
|
|
{tenantId ? 'Update Tenant' : 'Create Tenant'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|