feat: add superadmin plan management module
This commit is contained in:
237
src/app/(modules)/plans/components/PlanSheet.tsx
Normal file
237
src/app/(modules)/plans/components/PlanSheet.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import type { Control, UseFormRegister } from 'react-hook-form';
|
||||
import { Controller } from 'react-hook-form';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { PermissionTree } from '@/components/permission-tree';
|
||||
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';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet';
|
||||
import type { PermissionTreeItem } from '@/types';
|
||||
|
||||
import type { PlanFormValues } from '../hooks/usePlanForm';
|
||||
|
||||
interface PlanSheetProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
planId?: number;
|
||||
register: UseFormRegister<PlanFormValues>;
|
||||
control: Control<PlanFormValues>;
|
||||
onSubmit: ComponentProps<'form'>['onSubmit'];
|
||||
permissionTree: PermissionTreeItem[];
|
||||
permissionIds: number[];
|
||||
onPermissionIdsChange: (ids: number[]) => void;
|
||||
isPermissionsLoading: boolean;
|
||||
isSaving: boolean;
|
||||
}
|
||||
|
||||
export function PlanSheet({
|
||||
open,
|
||||
onOpenChange,
|
||||
planId,
|
||||
register,
|
||||
control,
|
||||
onSubmit,
|
||||
permissionTree,
|
||||
permissionIds,
|
||||
onPermissionIdsChange,
|
||||
isPermissionsLoading,
|
||||
isSaving,
|
||||
}: PlanSheetProps) {
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{planId ? 'Edit Plan' : 'Create Plan'}</SheetTitle>
|
||||
<SheetDescription>
|
||||
Configure subscription limits, billing, and permission access.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-name">Name</Label>
|
||||
<Input
|
||||
id="plan-name"
|
||||
placeholder="Starter"
|
||||
{...register('name', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-slug">Slug</Label>
|
||||
<Input
|
||||
id="plan-slug"
|
||||
placeholder="starter"
|
||||
{...register('slug', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-description">Description</Label>
|
||||
<textarea
|
||||
id="plan-description"
|
||||
placeholder="Basic plan for small teams"
|
||||
{...register('description', { required: true })}
|
||||
required
|
||||
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 className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-price">Price</Label>
|
||||
<Input
|
||||
id="plan-price"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="29.99"
|
||||
{...register('price', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Billing Cycle</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="billing_cycle"
|
||||
render={({ field }) => (
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Billing cycle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="monthly">Monthly</SelectItem>
|
||||
<SelectItem value="quarterly">Quarterly</SelectItem>
|
||||
<SelectItem value="yearly">Yearly</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-trial-days">Trial Days</Label>
|
||||
<Input
|
||||
id="plan-trial-days"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('trial_days', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-projects">Projects</Label>
|
||||
<Input
|
||||
id="max-projects"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_projects', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-organizations">Organizations</Label>
|
||||
<Input
|
||||
id="max-organizations"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_organizations', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-users">Users</Label>
|
||||
<Input
|
||||
id="max-users"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_users', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-roles">Roles</Label>
|
||||
<Input
|
||||
id="max-roles"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_roles', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-5">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 rounded border-border accent-primary"
|
||||
{...register('is_active')}
|
||||
/>
|
||||
Active
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 rounded border-border accent-primary"
|
||||
{...register('is_custom')}
|
||||
/>
|
||||
Custom plan
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<Label>Permissions</Label>
|
||||
<span className="text-xs text-muted-foreground">{permissionIds.length} selected</span>
|
||||
</div>
|
||||
{isPermissionsLoading ? (
|
||||
<div className="rounded-md border p-6 text-sm text-muted-foreground">
|
||||
Loading permissions...
|
||||
</div>
|
||||
) : (
|
||||
<PermissionTree
|
||||
items={permissionTree}
|
||||
selectedIds={permissionIds}
|
||||
onChange={onPermissionIdsChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SheetFooter className="px-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSaving}>
|
||||
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
|
||||
{planId ? 'Update Plan' : 'Create Plan'}
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</form>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user