feat: add superadmin tenant module
This commit is contained in:
233
src/app/(modules)/tenants/components/TenantSheet.tsx
Normal file
233
src/app/(modules)/tenants/components/TenantSheet.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import type { UseFormRegister } from 'react-hook-form';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
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>;
|
||||
onSubmit: ComponentProps<'form'>['onSubmit'];
|
||||
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,
|
||||
onSubmit,
|
||||
clientId,
|
||||
planId,
|
||||
onClientChange,
|
||||
onPlanChange,
|
||||
onNameChange,
|
||||
clients,
|
||||
plans,
|
||||
isLookupsLoading,
|
||||
isSaving,
|
||||
adminEmail,
|
||||
}: TenantSheetProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{tenantId ? 'Edit Tenant' : 'Create Tenant'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Bind a client and subscription plan, then invite the tenant administrator.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">Basic Information</p>
|
||||
<p className="text-xs text-muted-foreground">Tenant identity and subscription binding.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tenant-name">Tenant Name</Label>
|
||||
<Input
|
||||
id="tenant-name"
|
||||
placeholder="Acme Corp"
|
||||
{...register('name', {
|
||||
required: true,
|
||||
onChange: (event) => onNameChange(event.target.value),
|
||||
})}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tenant-slug">Slug</Label>
|
||||
<Input
|
||||
id="tenant-slug"
|
||||
placeholder="acme-corp"
|
||||
{...register('slug', { required: true })}
|
||||
required
|
||||
readOnly={isEditMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>Client</Label>
|
||||
<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>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Subscription Plan</Label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tenant-domain">Domain</Label>
|
||||
<Input id="tenant-domain" placeholder="acme.example.com" {...register('domain')} />
|
||||
</div>
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="tenant-description">Description</Label>
|
||||
<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 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isEditMode ? (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">Tenant Administrator</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Invitation details for the primary tenant admin account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="admin-first-name">First Name</Label>
|
||||
<Input
|
||||
id="admin-first-name"
|
||||
placeholder="Jane"
|
||||
{...register('admin_first_name', { required: !isEditMode })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="admin-last-name">Last Name</Label>
|
||||
<Input
|
||||
id="admin-last-name"
|
||||
placeholder="Doe"
|
||||
{...register('admin_last_name', { required: !isEditMode })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="admin-email">Admin Email</Label>
|
||||
<Input
|
||||
id="admin-email"
|
||||
type="email"
|
||||
placeholder="jane@acme.com"
|
||||
{...register('admin_email', { required: !isEditMode })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="admin-phone">Phone Number</Label>
|
||||
<Input
|
||||
id="admin-phone"
|
||||
placeholder="+91-9000011111"
|
||||
{...register('admin_phone_number')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : adminEmail ? (
|
||||
<div className="rounded-md border bg-muted/40 p-4 text-sm text-muted-foreground">
|
||||
Admin invitation details cannot be changed after tenant creation.
|
||||
<p className="mt-1 text-foreground">
|
||||
Current admin email: <span className="font-medium">{adminEmail}</span>
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<DialogFooter className="px-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSaving || isLookupsLoading}>
|
||||
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
|
||||
{tenantId ? 'Update Tenant' : 'Create Tenant'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user