santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: do inputs design modification

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-17 16:14:50 +05:30
parent 15f54372f4
commit b54242cf7e
49 changed files with 665 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/(modules)/clients/components/ClientColumns.tsx
View File

@@ -2,12 +2,8 @@
import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit, RotateCcw } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { PERMISSIONS } from '@/constants/permissions';
import { usePermissions } from '@/hooks/usePermissions';
import type { Client } from '@/types';
function formatDate(value?: string | null) {
@@ -19,23 +15,9 @@ function formatDate(value?: string | null) {
}).format(new Date(value));
}
interface UseClientColumnsParams {
onEdit: (client: Client) => void;
onToggleStatus: (client: Client) => void;
pendingClientId?: number;
}
export function useClientColumns({
onEdit,
onToggleStatus,
pendingClientId,
}: UseClientColumnsParams): ColumnDef<Client>[] {
const { hasPermission } = usePermissions();
const canEdit = hasPermission(PERMISSIONS.CLIENT.UPDATE);
const canDelete = hasPermission(PERMISSIONS.CLIENT.DELETE);
export function useClientColumns(): ColumnDef<Client>[] {
return useMemo(() => {
const columns: ColumnDef<Client>[] = [
return [
{
accessorKey: 'name',
header: 'Client',
@@ -75,38 +57,5 @@ export function useClientColumns({
),
},
];
if (!canEdit && !canDelete) return columns;
columns.push({
id: 'actions',
header: () => <div className="text-right">Actions</div>,
enableSorting: false,
cell: ({ row }) => {
const client = row.original;
return (
<div className="flex justify-end gap-2">
{canEdit ? (
<Button variant="outline" size="sm" onClick={() => onEdit(client)}>
<Edit className="size-4" />
</Button>
) : null}
{canDelete ? (
<Button
variant="outline"
size="sm"
disabled={pendingClientId === client.id}
onClick={() => onToggleStatus(client)}
>
<RotateCcw className="mr-2 size-4" />
{client.is_active ? 'Deactivate' : 'Activate'}
</Button>
) : null}
</div>
);
},
});
return columns;
}, [canDelete, canEdit, onEdit, onToggleStatus, pendingClientId]);
}, []);
}

23
src/app/(modules)/clients/components/ClientTable.tsx
View File

@@ -2,8 +2,10 @@
import type { ReactNode } from 'react';
import type { ColumnDef, SortingState } from '@tanstack/react-table';
import { Edit, RotateCcw } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { PERMISSIONS } from '@/constants/permissions';
import type { Client } from '@/types';
interface ClientTableProps {
@@ -18,6 +20,9 @@ interface ClientTableProps {
onPageChange: (skip: number) => void;
onLimitChange: (limit: number) => void;
onSortingChange: (sorting: SortingState) => void;
onEdit: (client: Client) => void;
onToggleStatus: (client: Client) => void;
pendingClientId?: number;
}
export function ClientTable({
@@ -32,6 +37,9 @@ export function ClientTable({
onPageChange,
onLimitChange,
onSortingChange,
onEdit,
onToggleStatus,
pendingClientId,
}: ClientTableProps) {
return (
<DataTable
@@ -41,6 +49,21 @@ export function ClientTable({
isLoading={isLoading}
toolbar={toolbar}
emptyTitle="No clients found."
actions={[
{
label: 'Edit',
icon: <Edit className="size-4" />,
permission: PERMISSIONS.CLIENT.UPDATE,
onClick: onEdit,
},
{
label: (client) => (client.is_active ? 'Deactivate' : 'Activate'),
icon: <RotateCcw className="size-4" />,
permission: PERMISSIONS.CLIENT.DELETE,
disabled: (client) => pendingClientId === client.id,
onClick: onToggleStatus,
},
]}
pagination={{
skip,
limit,

9
src/app/(modules)/clients/page.tsx
View File

@@ -69,11 +69,7 @@ export default function ClientsPage() {
[updateClientStatus],
);
const columns = useClientColumns({
onEdit: openEdit,
onToggleStatus: toggleStatus,
pendingClientId,
});
const columns = useClientColumns();
const total = clientsQuery.data?.total ?? 0;
const clients = clientsQuery.data?.items ?? [];
@@ -118,6 +114,9 @@ export default function ClientsPage() {
onPageChange={setSkip}
onLimitChange={setLimit}
onSortingChange={setSorting}
onEdit={openEdit}
onToggleStatus={toggleStatus}
pendingClientId={pendingClientId}
/>
</main>

25
src/app/(modules)/package/components/PackageDialog.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import type { ComponentProps } from 'react';
import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Globe, Loader2, Package as PackageIcon } from 'lucide-react';
import { FormField } from '@/components/form';
@@ -36,7 +36,7 @@ interface PackageDialogProps {
onProjectChange: (projectId: string) => void;
register: UseFormRegister<PackageFormValues>;
errors: FieldErrors<PackageFormValues>;
touchedFields: UseFormReturn<PackageFormValues>['formState']['touchedFields'];
isSubmitted: boolean;
onSubmit: ComponentProps<'form'>['onSubmit'];
canSubmit: boolean;
isSaving: boolean;
@@ -52,19 +52,15 @@ export function PackageDialog({
onProjectChange,
register,
errors,
touchedFields,
isSubmitted,
onSubmit,
canSubmit,
isSaving,
}: PackageDialogProps) {
const projectErrorMessage = touchedFields.project_id ? errors.project_id?.message : undefined;
const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
const startErrorMessage = touchedFields.chainage_start_km
? errors.chainage_start_km?.message
: undefined;
const endErrorMessage = touchedFields.chainage_end_km
? errors.chainage_end_km?.message
: undefined;
const projectErrorMessage = isSubmitted ? errors.project_id?.message : undefined;
const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
const startErrorMessage = isSubmitted ? errors.chainage_start_km?.message : undefined;
const endErrorMessage = isSubmitted ? errors.chainage_end_km?.message : undefined;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@@ -155,7 +151,12 @@ export function PackageDialog({
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={isSaving}
>
Cancel
</Button>
<Button type="submit" disabled={isSaving || !canSubmit}>

16
src/app/(modules)/package/components/PackageTable.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit3, Trash2 } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import type { Package } from '@/types';
@@ -35,8 +36,19 @@ export function PackageTable({
title="Packages"
data={packages}
columns={columns}
onEdit={onEdit}
onDelete={onDelete}
actions={[
{
label: 'Edit',
icon: <Edit3 className="size-4" />,
onClick: onEdit,
},
{
label: 'Delete',
icon: <Trash2 className="size-4" />,
className: 'text-destructive',
onClick: onDelete,
},
]}
isLoading={isLoading}
emptyTitle="No packages found."
pagination={{

6
src/app/(modules)/package/hooks/usePackageForm.ts
View File

@@ -67,10 +67,10 @@ export function usePackageForm({ onSaved }: { onSaved: () => void }) {
reset,
setValue,
control,
formState: { errors, isSubmitting, touchedFields },
formState: { errors, isSubmitting, isSubmitted },
} = useForm<PackageFormValues>({
defaultValues,
mode: 'onTouched',
mode: 'onSubmit',
reValidateMode: 'onChange',
resolver: zodResolver(packageFormSchema),
});
@@ -144,7 +144,7 @@ export function usePackageForm({ onSaved }: { onSaved: () => void }) {
projectId,
setProjectId,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};

4
src/app/(modules)/package/page.tsx
View File

@@ -37,7 +37,7 @@ export default function PackagePage() {
projectId,
setProjectId,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving,
} = packageForm;
@@ -119,7 +119,7 @@ export default function PackagePage() {
onProjectChange={setProjectId}
register={register}
errors={errors}
touchedFields={touchedFields}
isSubmitted={isSubmitted}
onSubmit={onSubmit}
canSubmit={canSubmit}
isSaving={isSaving}

57
src/app/(modules)/plans/components/PlanColumns.tsx
View File

@@ -2,12 +2,8 @@
import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit, RotateCcw } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { PERMISSIONS } from '@/constants/permissions';
import { usePermissions } from '@/hooks/usePermissions';
import type { Plan } from '@/types';
function formatDate(value?: string | null) {
@@ -25,23 +21,9 @@ function formatPrice(value: string, cycle: string) {
return `${price} / ${cycle}`;
}
interface UsePlanColumnsParams {
onEdit: (plan: Plan) => void;
onToggleStatus: (plan: Plan) => void;
pendingPlanId?: number;
}
export function usePlanColumns({
onEdit,
onToggleStatus,
pendingPlanId,
}: UsePlanColumnsParams): ColumnDef<Plan>[] {
const { hasPermission } = usePermissions();
const canEdit = hasPermission(PERMISSIONS.PLAN.UPDATE);
const canDelete = hasPermission(PERMISSIONS.PLAN.DELETE);
export function usePlanColumns(): ColumnDef<Plan>[] {
return useMemo(() => {
const columns: ColumnDef<Plan>[] = [
return [
{
accessorKey: 'name',
header: 'Plan',
@@ -91,38 +73,5 @@ export function usePlanColumns({
),
},
];
if (!canEdit && !canDelete) return columns;
columns.push({
id: 'actions',
header: () => <div className="text-right">Actions</div>,
enableSorting: false,
cell: ({ row }) => {
const plan = row.original;
return (
<div className="flex justify-end gap-2">
{canEdit ? (
<Button variant="outline" size="sm" onClick={() => onEdit(plan)}>
<Edit className="size-4" />
</Button>
) : null}
{canDelete ? (
<Button
variant="outline"
size="sm"
disabled={pendingPlanId === plan.id}
onClick={() => onToggleStatus(plan)}
>
<RotateCcw className="mr-2 size-4" />
{plan.is_active ? 'Deactivate' : 'Activate'}
</Button>
) : null}
</div>
);
},
});
return columns;
}, [canDelete, canEdit, onEdit, onToggleStatus, pendingPlanId]);
}, []);
}

2
src/app/(modules)/plans/components/PlanSheet.tsx
View File

@@ -93,7 +93,7 @@ export function PlanSheet({
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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 outline-none focus-visible:border-ring"
/>
</div>

23
src/app/(modules)/plans/components/PlanTable.tsx
View File

@@ -2,8 +2,10 @@
import type { ReactNode } from 'react';
import type { ColumnDef, SortingState } from '@tanstack/react-table';
import { Edit, RotateCcw } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { PERMISSIONS } from '@/constants/permissions';
import type { Plan } from '@/types';
interface PlanTableProps {
@@ -18,6 +20,9 @@ interface PlanTableProps {
onPageChange: (skip: number) => void;
onLimitChange: (limit: number) => void;
onSortingChange: (sorting: SortingState) => void;
onEdit: (plan: Plan) => void;
onToggleStatus: (plan: Plan) => void;
pendingPlanId?: number;
}
export function PlanTable({
@@ -32,6 +37,9 @@ export function PlanTable({
onPageChange,
onLimitChange,
onSortingChange,
onEdit,
onToggleStatus,
pendingPlanId,
}: PlanTableProps) {
return (
<DataTable
@@ -41,6 +49,21 @@ export function PlanTable({
isLoading={isLoading}
toolbar={toolbar}
emptyTitle="No plans found."
actions={[
{
label: 'Edit',
icon: <Edit className="size-4" />,
permission: PERMISSIONS.PLAN.UPDATE,
onClick: onEdit,
},
{
label: (plan) => (plan.is_active ? 'Deactivate' : 'Activate'),
icon: <RotateCcw className="size-4" />,
permission: PERMISSIONS.PLAN.DELETE,
disabled: (plan) => pendingPlanId === plan.id,
onClick: onToggleStatus,
},
]}
pagination={{
skip,
limit,

20
src/app/(modules)/plans/page.tsx
View File

@@ -57,15 +57,8 @@ export default function PlansPage() {
onSaved: () => handleSheetOpenChange(false),
});
const { openCreate: prepareCreatePlan, openEdit: prepareEditPlan } = planForm;
const {
register,
control,
onSubmit,
planId,
permissionIds,
setPermissionIds,
isSaving,
} = planForm;
const { register, control, onSubmit, planId, permissionIds, setPermissionIds, isSaving } =
planForm;
const statusMutation = usePlanStatusMutation();
const openCreate = useCallback(() => {
@@ -123,11 +116,7 @@ export default function PlansPage() {
[statusMutation],
);
const columns = usePlanColumns({
onEdit: openEdit,
onToggleStatus: toggleStatus,
pendingPlanId: statusMutation.variables?.id,
});
const columns = usePlanColumns();
const plans = plansQuery.data?.items ?? [];
const total = plansQuery.data?.total ?? plansQuery.data?.totalItems ?? 0;
@@ -172,6 +161,9 @@ export default function PlansPage() {
onPageChange={setSkip}
onLimitChange={setLimit}
onSortingChange={setSorting}
onEdit={openEdit}
onToggleStatus={toggleStatus}
pendingPlanId={statusMutation.variables?.id}
/>
</main>

16
src/app/(modules)/project/components/ProjectDialog.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import type { ComponentProps } from 'react';
import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Layers, Loader2, MapPin, Route } from 'lucide-react';
import { FormField } from '@/components/form';
@@ -24,7 +24,7 @@ interface ProjectDialogProps {
projectId?: string;
register: UseFormRegister<ProjectFormValues>;
errors: FieldErrors<ProjectFormValues>;
touchedFields: UseFormReturn<ProjectFormValues>['formState']['touchedFields'];
isSubmitted: boolean;
onSubmit: ComponentProps<'form'>['onSubmit'];
canSubmit: boolean;
isSaving: boolean;
@@ -36,16 +36,16 @@ export function ProjectDialog({
projectId,
register,
errors,
touchedFields,
isSubmitted,
onSubmit,
canSubmit,
isSaving,
}: ProjectDialogProps) {
const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
const startLatErrorMessage = touchedFields.start_lat ? errors.start_lat?.message : undefined;
const startLngErrorMessage = touchedFields.start_lng ? errors.start_lng?.message : undefined;
const endLatErrorMessage = touchedFields.end_lat ? errors.end_lat?.message : undefined;
const endLngErrorMessage = touchedFields.end_lng ? errors.end_lng?.message : undefined;
const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
const startLatErrorMessage = isSubmitted ? errors.start_lat?.message : undefined;
const startLngErrorMessage = isSubmitted ? errors.start_lng?.message : undefined;
const endLatErrorMessage = isSubmitted ? errors.end_lat?.message : undefined;
const endLngErrorMessage = isSubmitted ? errors.end_lng?.message : undefined;
return (
<Dialog open={open} onOpenChange={onOpenChange}>

16
src/app/(modules)/project/components/ProjectTable.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit3, Trash2 } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import type { Project } from '@/types';
@@ -35,8 +36,19 @@ export function ProjectTable({
title="Projects"
data={projects}
columns={columns}
onEdit={onEdit}
onDelete={onDelete}
actions={[
{
label: 'Edit',
icon: <Edit3 className="size-4" />,
onClick: onEdit,
},
{
label: 'Delete',
icon: <Trash2 className="size-4" />,
className: 'text-destructive',
onClick: onDelete,
},
]}
isLoading={isLoading}
emptyTitle="No projects found."
pagination={{

6
src/app/(modules)/project/hooks/useProjectForm.ts
View File

@@ -72,10 +72,10 @@ export function useProjectForm({ onSaved }: { onSaved: () => void }) {
handleSubmit,
reset,
control,
formState: { errors, isSubmitting, touchedFields },
formState: { errors, isSubmitting, isSubmitted },
} = useForm<ProjectFormValues>({
defaultValues,
mode: 'onTouched',
mode: 'onSubmit',
reValidateMode: 'onChange',
resolver: zodResolver(projectFormSchema),
});
@@ -139,7 +139,7 @@ export function useProjectForm({ onSaved }: { onSaved: () => void }) {
resetForm: () => reset(defaultValues),
projectId,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};

4
src/app/(modules)/project/page.tsx
View File

@@ -30,7 +30,7 @@ export default function ProjectPage() {
resetForm,
projectId,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving,
} = projectForm;
@@ -107,7 +107,7 @@ export default function ProjectPage() {
projectId={projectId}
register={register}
errors={errors}
touchedFields={touchedFields}
isSubmitted={isSubmitted}
onSubmit={onSubmit}
canSubmit={canSubmit}
isSaving={isSaving}

57
src/app/(modules)/roles/components/RoleColumns.tsx
View File

@@ -2,31 +2,13 @@
import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit, RotateCcw } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { PERMISSIONS } from '@/constants/permissions';
import { usePermissions } from '@/hooks/usePermissions';
import type { Role } from '@/types';
interface UseRoleColumnsParams {
onEdit: (role: Role) => void;
onToggleStatus: (role: Role) => void;
isStatusPending: boolean;
}
export function useRoleColumns({
onEdit,
onToggleStatus,
isStatusPending,
}: UseRoleColumnsParams): ColumnDef<Role>[] {
const { hasPermission } = usePermissions();
const canEdit = hasPermission(PERMISSIONS.ROLE.UPDATE);
const canDelete = hasPermission(PERMISSIONS.ROLE.DELETE);
export function useRoleColumns(): ColumnDef<Role>[] {
return useMemo(() => {
const columns: ColumnDef<Role>[] = [
return [
{
accessorKey: 'name',
header: 'Name',
@@ -60,38 +42,5 @@ export function useRoleColumns({
),
},
];
if (!canEdit && !canDelete) return columns;
columns.push({
id: 'actions',
header: () => <div className="text-right">Actions</div>,
enableSorting: false,
cell: ({ row }) => {
const role = row.original;
return (
<div className="flex justify-end gap-2">
{canEdit ? (
<Button variant="outline" size="sm" onClick={() => onEdit(role)}>
<Edit className="size-4" />
</Button>
) : null}
{canDelete ? (
<Button
variant="outline"
size="sm"
disabled={isStatusPending}
onClick={() => onToggleStatus(role)}
>
<RotateCcw className="mr-2 size-4" />
{role.effective_status ? 'Deactivate' : 'Activate'}
</Button>
) : null}
</div>
);
},
});
return columns;
}, [canDelete, canEdit, isStatusPending, onEdit, onToggleStatus]);
}, []);
}

21
src/app/(modules)/roles/components/RoleSheet.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import type { ComponentProps } from 'react';
import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Loader2 } from 'lucide-react';
import { FormField } from '@/components/form';
@@ -28,7 +28,7 @@ interface RoleSheetProps {
roleId?: number;
register: UseFormRegister<RoleFormValues>;
errors: FieldErrors<RoleFormValues>;
touchedFields: UseFormReturn<RoleFormValues>['formState']['touchedFields'];
isSubmitted: boolean;
onSubmit: ComponentProps<'form'>['onSubmit'];
permissionTree: PermissionTreeItem[];
permissionIds: number[];
@@ -44,7 +44,7 @@ export function RoleSheet({
roleId,
register,
errors,
touchedFields,
isSubmitted,
onSubmit,
permissionTree,
permissionIds,
@@ -53,10 +53,8 @@ export function RoleSheet({
canSubmit,
isSaving,
}: RoleSheetProps) {
const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
const displayNameErrorMessage = touchedFields.display_name
? errors.display_name?.message
: undefined;
const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
const displayNameErrorMessage = isSubmitted ? errors.display_name?.message : undefined;
return (
<Sheet open={open} onOpenChange={onOpenChange}>
@@ -74,12 +72,7 @@ export function RoleSheet({
<form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
<div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="role-name"
label="Role Name"
required
error={nameErrorMessage}
>
<FormField id="role-name" label="Role Name" required error={nameErrorMessage}>
<Input
id="role-name"
placeholder="Enter role name"
@@ -114,7 +107,7 @@ export function RoleSheet({
<FormField
label="Permissions"
required
error={errors.permission_ids?.message}
error={isSubmitted ? errors.permission_ids?.message : undefined}
className="space-y-3"
labelEnd={
<span className="text-muted-foreground">{permissionIds.length} selected</span>

23
src/app/(modules)/roles/components/RoleTable.tsx
View File

@@ -2,8 +2,10 @@
import type { ColumnDef, SortingState } from '@tanstack/react-table';
import type { ReactNode } from 'react';
import { Edit, RotateCcw } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { PERMISSIONS } from '@/constants/permissions';
import type { Role } from '@/types';
interface RoleTableProps {
@@ -18,6 +20,9 @@ interface RoleTableProps {
onPageChange: (skip: number) => void;
onLimitChange: (limit: number) => void;
onSortingChange: (sorting: SortingState) => void;
onEdit: (role: Role) => void;
onToggleStatus: (role: Role) => void;
isStatusPending: boolean;
}
export function RoleTable({
@@ -32,6 +37,9 @@ export function RoleTable({
onPageChange,
onLimitChange,
onSortingChange,
onEdit,
onToggleStatus,
isStatusPending,
}: RoleTableProps) {
return (
<DataTable
@@ -41,6 +49,21 @@ export function RoleTable({
isLoading={isLoading}
toolbar={toolbar}
emptyTitle="No roles found."
actions={[
{
label: 'Edit',
icon: <Edit className="size-4" />,
permission: PERMISSIONS.ROLE.UPDATE,
onClick: onEdit,
},
{
label: (role) => (role.effective_status ? 'Deactivate' : 'Activate'),
icon: <RotateCcw className="size-4" />,
permission: PERMISSIONS.ROLE.DELETE,
disabled: () => isStatusPending,
onClick: onToggleStatus,
},
]}
pagination={{
skip,
limit,

6
src/app/(modules)/roles/hooks/useRoleForm.ts
View File

@@ -48,10 +48,10 @@ export function useRoleForm({
handleSubmit,
reset,
setValue,
formState: { errors, isSubmitting, touchedFields },
formState: { errors, isSubmitting, isSubmitted },
} = useForm<RoleFormValues>({
defaultValues,
mode: 'onTouched',
mode: 'onSubmit',
reValidateMode: 'onChange',
resolver: zodResolver(roleFormSchema),
});
@@ -136,7 +136,7 @@ export function useRoleForm({
permissionIds,
roleId,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};

13
src/app/(modules)/roles/page.tsx
View File

@@ -61,7 +61,7 @@ export default function RolesPage() {
permissionIds,
setPermissionIds,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving,
} = roleForm;
@@ -88,11 +88,7 @@ export default function RolesPage() {
[updateRoleStatus],
);
const columns = useRoleColumns({
onEdit: openEdit,
onToggleStatus: toggleStatus,
isStatusPending,
});
const columns = useRoleColumns();
const total = rolesQuery.data?.total ?? 0;
const roles = rolesQuery.data?.items ?? [];
@@ -134,6 +130,9 @@ export default function RolesPage() {
onPageChange={setSkip}
onLimitChange={setLimit}
onSortingChange={setSorting}
onEdit={openEdit}
onToggleStatus={toggleStatus}
isStatusPending={isStatusPending}
/>
</main>
@@ -143,7 +142,7 @@ export default function RolesPage() {
roleId={roleId}
register={register}
errors={errors}
touchedFields={touchedFields}
isSubmitted={isSubmitted}
onSubmit={onSubmit}
permissionTree={permissionsQuery.permissionTree}
permissionIds={permissionIds}

19
src/app/(modules)/segment/components/SegmentDialog.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import type { ComponentProps } from 'react';
import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Loader2, MapPin, Milestone } from 'lucide-react';
import { FormField } from '@/components/form';
@@ -42,7 +42,7 @@ interface SegmentDialogProps {
onDirectionChange: (direction: 'UP' | 'DOWN') => void;
register: UseFormRegister<SegmentFormValues>;
errors: FieldErrors<SegmentFormValues>;
touchedFields: UseFormReturn<SegmentFormValues>['formState']['touchedFields'];
isSubmitted: boolean;
onSubmit: ComponentProps<'form'>['onSubmit'];
canSubmit: boolean;
isSaving: boolean;
@@ -64,13 +64,13 @@ export function SegmentDialog({
onDirectionChange,
register,
errors,
touchedFields,
isSubmitted,
onSubmit,
canSubmit,
isSaving,
}: SegmentDialogProps) {
const getError = (field: keyof SegmentFormValues) =>
touchedFields[field] ? errors[field]?.message : undefined;
isSubmitted ? errors[field]?.message : undefined;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@@ -131,7 +131,9 @@ export function SegmentDialog({
Loading...
</span>
) : (
<SelectValue placeholder={projectId ? 'Choose a package' : 'Select project first'} />
<SelectValue
placeholder={projectId ? 'Choose a package' : 'Select project first'}
/>
)}
</SelectTrigger>
<SelectContent>
@@ -278,7 +280,12 @@ export function SegmentDialog({
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={isSaving}
>
Cancel
</Button>
<Button type="submit" disabled={isSaving || !canSubmit}>

16
src/app/(modules)/segment/components/SegmentTable.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit3, Trash2 } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import type { Chainage } from '@/types';
@@ -35,8 +36,19 @@ export function SegmentTable({
title="Segments"
data={segments}
columns={columns}
onEdit={onEdit}
onDelete={onDelete}
actions={[
{
label: 'Edit',
icon: <Edit3 className="size-4" />,
onClick: onEdit,
},
{
label: 'Delete',
icon: <Trash2 className="size-4" />,
className: 'text-destructive',
onClick: onDelete,
},
]}
isLoading={isLoading}
emptyTitle="No segments found."
pagination={{

6
src/app/(modules)/segment/hooks/useSegmentForm.ts
View File

@@ -86,10 +86,10 @@ export function useSegmentForm({ onSaved }: { onSaved: () => void }) {
reset,
setValue,
control,
formState: { errors, isSubmitting, touchedFields },
formState: { errors, isSubmitting, isSubmitted },
} = useForm<SegmentFormValues>({
defaultValues,
mode: 'onTouched',
mode: 'onSubmit',
reValidateMode: 'onChange',
resolver: zodResolver(segmentFormSchema),
});
@@ -200,7 +200,7 @@ export function useSegmentForm({ onSaved }: { onSaved: () => void }) {
direction,
setDirection,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};

4
src/app/(modules)/segment/page.tsx
View File

@@ -44,7 +44,7 @@ export default function SegmentPage() {
direction,
setDirection,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving,
} = segmentForm;
@@ -136,7 +136,7 @@ export default function SegmentPage() {
onDirectionChange={setDirection}
register={register}
errors={errors}
touchedFields={touchedFields}
isSubmitted={isSubmitted}
onSubmit={onSubmit}
canSubmit={canSubmit}
isSaving={isSaving}

56
src/app/(modules)/tenants/components/TenantColumns.tsx
View File

@@ -2,12 +2,8 @@
import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit, Trash2 } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { PERMISSIONS } from '@/constants/permissions';
import { usePermissions } from '@/hooks/usePermissions';
import type { Tenant } from '@/types';
function formatDate(value?: string | null) {
@@ -19,23 +15,9 @@ function formatDate(value?: string | null) {
}).format(new Date(value));
}
interface UseTenantColumnsParams {
onEdit: (tenant: Tenant) => void;
onDelete: (tenant: Tenant) => void;
pendingDeleteId?: number;
}
export function useTenantColumns({
onEdit,
onDelete,
pendingDeleteId,
}: UseTenantColumnsParams): ColumnDef<Tenant>[] {
const { hasPermission } = usePermissions();
const canEdit = hasPermission(PERMISSIONS.TENANT.UPDATE);
const canDelete = hasPermission(PERMISSIONS.TENANT.DELETE);
export function useTenantColumns(): ColumnDef<Tenant>[] {
return useMemo(() => {
const columns: ColumnDef<Tenant>[] = [
return [
{
accessorKey: 'name',
header: 'Tenant',
@@ -76,37 +58,5 @@ export function useTenantColumns({
),
},
];
if (!canEdit && !canDelete) return columns;
columns.push({
id: 'actions',
header: () => <div className="text-right">Actions</div>,
enableSorting: false,
cell: ({ row }) => {
const tenant = row.original;
return (
<div className="flex justify-end gap-2">
{canEdit ? (
<Button variant="outline" size="sm" onClick={() => onEdit(tenant)}>
<Edit className="size-4" />
</Button>
) : null}
{canDelete ? (
<Button
variant="outline"
size="sm"
disabled={pendingDeleteId === tenant.id}
onClick={() => onDelete(tenant)}
>
<Trash2 className="size-4" />
</Button>
) : null}
</div>
);
},
});
return columns;
}, [canDelete, canEdit, onDelete, onEdit, pendingDeleteId]);
}, []);
}

10
src/app/(modules)/tenants/components/TenantSheet.tsx
View File

@@ -108,7 +108,9 @@ export function TenantSheet({
<Label>Client</Label>
<Select value={clientId} onValueChange={onClientChange} disabled={isLookupsLoading}>
<SelectTrigger>
<SelectValue placeholder={isLookupsLoading ? 'Loading clients...' : 'Select client'} />
<SelectValue
placeholder={isLookupsLoading ? 'Loading clients...' : 'Select client'}
/>
</SelectTrigger>
<SelectContent>
{clients.map((client) => (
@@ -123,7 +125,9 @@ export function TenantSheet({
<Label>Subscription Plan</Label>
<Select value={planId} onValueChange={onPlanChange} disabled={isLookupsLoading}>
<SelectTrigger>
<SelectValue placeholder={isLookupsLoading ? 'Loading plans...' : 'Select plan'} />
<SelectValue
placeholder={isLookupsLoading ? 'Loading plans...' : 'Select plan'}
/>
</SelectTrigger>
<SelectContent>
{plans.map((plan) => (
@@ -147,7 +151,7 @@ export function TenantSheet({
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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 outline-none focus-visible:border-ring"
/>
</div>
</div>

24
src/app/(modules)/tenants/components/TenantTable.tsx
View File

@@ -2,8 +2,10 @@
import type { ReactNode } from 'react';
import type { ColumnDef, SortingState } from '@tanstack/react-table';
import { Edit, Trash2 } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { PERMISSIONS } from '@/constants/permissions';
import type { Tenant } from '@/types';
interface TenantTableProps {
@@ -18,6 +20,9 @@ interface TenantTableProps {
onPageChange: (skip: number) => void;
onLimitChange: (limit: number) => void;
onSortingChange: (sorting: SortingState) => void;
onEdit: (tenant: Tenant) => void;
onDelete: (tenant: Tenant) => void;
pendingDeleteId?: number;
}
export function TenantTable({
@@ -32,6 +37,9 @@ export function TenantTable({
onPageChange,
onLimitChange,
onSortingChange,
onEdit,
onDelete,
pendingDeleteId,
}: TenantTableProps) {
return (
<DataTable
@@ -41,6 +49,22 @@ export function TenantTable({
isLoading={isLoading}
toolbar={toolbar}
emptyTitle="No tenants found."
actions={[
{
label: 'Edit',
icon: <Edit className="size-4" />,
permission: PERMISSIONS.TENANT.UPDATE,
onClick: onEdit,
},
{
label: 'Delete',
icon: <Trash2 className="size-4" />,
permission: PERMISSIONS.TENANT.DELETE,
className: 'text-destructive',
disabled: (tenant) => pendingDeleteId === tenant.id,
onClick: onDelete,
},
]}
pagination={{
skip,
limit,

9
src/app/(modules)/tenants/page.tsx
View File

@@ -116,11 +116,7 @@ export default function TenantsPage() {
[deleteMutation],
);
const columns = useTenantColumns({
onEdit: openEdit,
onDelete: handleDelete,
pendingDeleteId: deleteMutation.isPending ? deleteMutation.variables : undefined,
});
const columns = useTenantColumns();
const tenants = tenantsQuery.data?.items ?? [];
const total = tenantsQuery.data?.total ?? 0;
@@ -169,6 +165,9 @@ export default function TenantsPage() {
onPageChange={setSkip}
onLimitChange={setLimit}
onSortingChange={setSorting}
onEdit={openEdit}
onDelete={handleDelete}
pendingDeleteId={deleteMutation.isPending ? deleteMutation.variables : undefined}
/>
</main>

57
src/app/(modules)/users/components/UserColumns.tsx
View File

@@ -2,12 +2,8 @@
import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit, RotateCcw } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { PERMISSIONS } from '@/constants/permissions';
import { usePermissions } from '@/hooks/usePermissions';
import type { AdministrationUser } from '@/types';
function formatDate(value?: string | null) {
@@ -19,23 +15,9 @@ function formatDate(value?: string | null) {
}).format(new Date(value));
}
interface UseUserColumnsParams {
onEdit: (user: AdministrationUser) => void;
onToggleStatus: (user: AdministrationUser) => void;
pendingUserId?: number;
}
export function useUserColumns({
onEdit,
onToggleStatus,
pendingUserId,
}: UseUserColumnsParams): ColumnDef<AdministrationUser>[] {
const { hasPermission } = usePermissions();
const canEdit = hasPermission(PERMISSIONS.USER.UPDATE);
const canDelete = hasPermission(PERMISSIONS.USER.DELETE);
export function useUserColumns(): ColumnDef<AdministrationUser>[] {
return useMemo(() => {
const columns: ColumnDef<AdministrationUser>[] = [
return [
{
accessorKey: 'first_name',
header: 'Name',
@@ -88,38 +70,5 @@ export function useUserColumns({
),
},
];
if (!canEdit && !canDelete) return columns;
columns.push({
id: 'actions',
header: () => <div className="text-right">Actions</div>,
enableSorting: false,
cell: ({ row }) => {
const user = row.original;
return (
<div className="flex justify-end gap-2">
{canEdit ? (
<Button variant="outline" size="sm" onClick={() => onEdit(user)}>
<Edit className="size-4" />
</Button>
) : null}
{canDelete ? (
<Button
variant="outline"
size="sm"
disabled={pendingUserId === user.id || user.effective_status === 'pending'}
onClick={() => onToggleStatus(user)}
>
<RotateCcw className="mr-2 size-4" />
{user.effective_status === 'active' ? 'Deactivate' : 'Activate'}
</Button>
) : null}
</div>
);
},
});
return columns;
}, [canDelete, canEdit, onEdit, onToggleStatus, pendingUserId]);
}, []);
}

50
src/app/(modules)/users/components/UserSheet.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { useRef, type ComponentProps } from 'react';
import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Loader2 } from 'lucide-react';
import { FormField } from '@/components/form';
@@ -24,7 +24,7 @@ interface UserSheetProps {
userId?: number;
register: UseFormRegister<UserFormValues>;
errors: FieldErrors<UserFormValues>;
touchedFields: UseFormReturn<UserFormValues>['formState']['touchedFields'];
isSubmitted: boolean;
onSubmit: ComponentProps<'form'>['onSubmit'];
roleId: string;
onRoleChange: (roleId: string) => void;
@@ -38,7 +38,7 @@ export function UserSheet({
userId,
register,
errors,
touchedFields,
isSubmitted,
onSubmit,
roleId,
onRoleChange,
@@ -46,11 +46,11 @@ export function UserSheet({
isSaving,
}: UserSheetProps) {
const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
const firstNameErrorMessage = touchedFields.first_name ? errors.first_name?.message : undefined;
const lastNameErrorMessage = touchedFields.last_name ? errors.last_name?.message : undefined;
const emailErrorMessage = touchedFields.email ? errors.email?.message : undefined;
const phoneErrorMessage = touchedFields.phone_number ? errors.phone_number?.message : undefined;
const roleErrorMessage = touchedFields.role_id ? errors.role_id?.message : undefined;
const firstNameErrorMessage = isSubmitted ? errors.first_name?.message : undefined;
const lastNameErrorMessage = isSubmitted ? errors.last_name?.message : undefined;
const emailErrorMessage = isSubmitted ? errors.email?.message : undefined;
const phoneErrorMessage = isSubmitted ? errors.phone_number?.message : undefined;
const roleErrorMessage = isSubmitted ? errors.role_id?.message : undefined;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@@ -63,12 +63,7 @@ export function UserSheet({
<form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="first-name"
label="First Name"
required
error={firstNameErrorMessage}
>
<FormField id="first-name" label="First Name" required error={firstNameErrorMessage}>
<Input
id="first-name"
placeholder="Enter first name"
@@ -77,12 +72,7 @@ export function UserSheet({
/>
</FormField>
<FormField
id="last-name"
label="Last Name"
required
error={lastNameErrorMessage}
>
<FormField id="last-name" label="Last Name" required error={lastNameErrorMessage}>
<Input
id="last-name"
placeholder="Enter last name"
@@ -92,12 +82,7 @@ export function UserSheet({
</FormField>
</div>
<FormField
id="email"
label="Email"
required
error={emailErrorMessage}
>
<FormField id="email" label="Email" required error={emailErrorMessage}>
<Input
id="email"
placeholder="name@example.com"
@@ -106,11 +91,7 @@ export function UserSheet({
/>
</FormField>
<FormField
id="phone-number"
label="Phone Number"
error={phoneErrorMessage}
>
<FormField id="phone-number" label="Phone Number" error={phoneErrorMessage}>
<Input
id="phone-number"
placeholder="+919876543210"
@@ -130,12 +111,7 @@ export function UserSheet({
<div ref={roleComboboxPortalRef} />
<input
type="hidden"
{...register('role_id')}
value={roleId}
readOnly
/>
<input type="hidden" {...register('role_id')} value={roleId} readOnly />
</FormField>
<DialogFooter className="px-0">

23
src/app/(modules)/users/components/UserTable.tsx
View File

@@ -2,8 +2,10 @@
import type { ReactNode } from 'react';
import type { ColumnDef, SortingState } from '@tanstack/react-table';
import { Edit, RotateCcw } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { PERMISSIONS } from '@/constants/permissions';
import type { AdministrationUser } from '@/types';
interface UserTableProps {
@@ -18,6 +20,9 @@ interface UserTableProps {
onPageChange: (skip: number) => void;
onLimitChange: (limit: number) => void;
onSortingChange: (sorting: SortingState) => void;
onEdit: (user: AdministrationUser) => void;
onToggleStatus: (user: AdministrationUser) => void;
pendingUserId?: number;
}
export function UserTable({
@@ -32,6 +37,9 @@ export function UserTable({
onPageChange,
onLimitChange,
onSortingChange,
onEdit,
onToggleStatus,
pendingUserId,
}: UserTableProps) {
return (
<DataTable
@@ -41,6 +49,21 @@ export function UserTable({
isLoading={isLoading}
toolbar={toolbar}
emptyTitle="No users found."
actions={[
{
label: 'Edit',
icon: <Edit className="size-4" />,
permission: PERMISSIONS.USER.UPDATE,
onClick: onEdit,
},
{
label: (user) => (user.effective_status === 'active' ? 'Deactivate' : 'Activate'),
icon: <RotateCcw className="size-4" />,
permission: PERMISSIONS.USER.DELETE,
disabled: (user) => pendingUserId === user.id || user.effective_status === 'pending',
onClick: onToggleStatus,
},
]}
pagination={{
skip,
limit,

9
src/app/(modules)/users/hooks/useUserForm.ts
View File

@@ -42,10 +42,10 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
handleSubmit: submitForm,
reset,
setValue,
formState: { errors, isSubmitting, touchedFields },
formState: { errors, isSubmitting, isSubmitted },
} = useForm<UserFormValues>({
defaultValues,
mode: 'onTouched',
mode: 'onSubmit',
reValidateMode: 'onChange',
resolver: zodResolver(userFormSchema),
});
@@ -62,7 +62,8 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
const lastName = useWatch({ control, name: 'last_name' }) || '';
const email = useWatch({ control, name: 'email' }) || '';
const phoneNumber = useWatch({ control, name: 'phone_number' }) || '';
const isPhoneValid = phoneNumber.trim() === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(phoneNumber.trim());
const isPhoneValid =
phoneNumber.trim() === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(phoneNumber.trim());
const canSubmit =
firstName.trim().length > 0 &&
lastName.trim().length > 0 &&
@@ -131,7 +132,7 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
roleId,
userId,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};

13
src/app/(modules)/users/page.tsx
View File

@@ -54,7 +54,7 @@ export default function UsersPage() {
roleId,
setRoleId,
errors,
touchedFields,
isSubmitted,
canSubmit,
isSaving,
} = userForm;
@@ -81,11 +81,7 @@ export default function UsersPage() {
[updateUserStatus],
);
const columns = useUserColumns({
onEdit: openEdit,
onToggleStatus: toggleStatus,
pendingUserId,
});
const columns = useUserColumns();
const total = usersQuery.data?.total ?? 0;
const users = usersQuery.data?.items ?? [];
@@ -137,6 +133,9 @@ export default function UsersPage() {
onPageChange={setSkip}
onLimitChange={setLimit}
onSortingChange={setSorting}
onEdit={openEdit}
onToggleStatus={toggleStatus}
pendingUserId={pendingUserId}
/>
</main>
@@ -146,7 +145,7 @@ export default function UsersPage() {
userId={userId}
register={register}
errors={errors}
touchedFields={touchedFields}
isSubmitted={isSubmitted}
onSubmit={handleSubmit}
roleId={roleId}
onRoleChange={setRoleId}

16
src/app/globals.css
View File

@@ -24,13 +24,13 @@
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.702 0.183 293.541);
--chart-1: oklch(0.65 0.18 25); /* Soft Red/Rose - High Priority */
--chart-2: oklch(0.78 0.12 75); /* Warm Amber - Distinct */
--chart-3: oklch(0.68 0.12 245); /* Azure Blue - Cool Professional */
--chart-4: oklch(0.75 0.1 165); /* Mint Teal - Balanced */
--chart-5: oklch(0.85 0.08 195); /* Soft Cyan - Subdued */
--chart-6: oklch(0.62 0.22 295); /* Deep Violet - Theme Primary */
--chart-8: oklch(0.58 0.2 335); /* Cool Magenta - Distant Accent */
--chart-1: oklch(0.65 0.18 25); /* Soft Red/Rose - High Priority */
--chart-2: oklch(0.78 0.12 75); /* Warm Amber - Distinct */
--chart-3: oklch(0.68 0.12 245); /* Azure Blue - Cool Professional */
--chart-4: oklch(0.75 0.1 165); /* Mint Teal - Balanced */
--chart-5: oklch(0.85 0.08 195); /* Soft Cyan - Subdued */
--chart-6: oklch(0.62 0.22 295); /* Deep Violet - Theme Primary */
--chart-8: oklch(0.58 0.2 335); /* Cool Magenta - Distant Accent */
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.541 0.281 293.009);
@@ -123,7 +123,7 @@
@layer base {
* {
@apply border-border outline-ring/50;
@apply border-border outline-none;
}
body {

48
src/components/data-table/TableActionButton.tsx Normal file
View File

@@ -0,0 +1,48 @@
'use client';
import type { MouseEvent, ReactNode } from 'react';
import { PermissionGuard } from '@/guards';
import type { PermissionInput } from '@/hooks/usePermissions';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
interface TableActionButtonProps {
label: string;
permission?: PermissionInput;
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
disabled?: boolean;
className?: string;
children: ReactNode;
}
export function TableActionButton({
label,
permission,
onClick,
disabled,
className,
children,
}: TableActionButtonProps) {
return (
<PermissionGuard permissions={permission}>
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button"
variant="outline"
size="icon"
className={cn('size-8', className)}
onClick={onClick}
disabled={disabled}
aria-label={label}
>
{children}
</Button>
</TooltipTrigger>
<TooltipContent>{label}</TooltipContent>
</Tooltip>
</PermissionGuard>
);
}

79
src/components/data-table/index.tsx
View File

@@ -12,12 +12,22 @@ import {
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { Edit3, Trash2 } from 'lucide-react';
import { TooltipProvider } from '@/components/ui/tooltip';
import type { PermissionInput } from '@/hooks/usePermissions';
import TopHeader from './Header';
import TableHeader from './TableHeader';
import { TableFooter } from './Footer';
import { TableActionButton } from './TableActionButton';
export interface DataTableAction<TData> {
label: string | ((item: TData) => string);
icon: React.ReactNode;
onClick: (item: TData) => void;
permission?: PermissionInput;
disabled?: (item: TData) => boolean;
className?: string;
}
export interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -26,8 +36,7 @@ export interface DataTableProps<TData, TValue> {
onAddNew?: () => void;
addButtonText?: string;
isLoading?: boolean;
onEdit?: (item: TData) => void;
onDelete?: (item: TData) => void;
actions?: DataTableAction<TData>[];
toolbar?: React.ReactNode;
emptyTitle?: string;
emptyDescription?: string;
@@ -49,8 +58,7 @@ export function DataTable<TData, TValue>({
onAddNew,
addButtonText,
isLoading = false,
onEdit,
onDelete,
actions,
toolbar,
emptyTitle = 'No results found.',
emptyDescription = 'Try adjusting your filters or search terms.',
@@ -77,7 +85,7 @@ export function DataTable<TData, TValue>({
const columns = React.useMemo(() => {
const cols: ColumnDef<TData, TValue>[] = [...initialColumns];
if (onEdit || onDelete) {
if (actions?.length) {
cols.push({
id: 'actions',
header: () => <div className="text-right">Actions</div>,
@@ -85,37 +93,33 @@ export function DataTable<TData, TValue>({
const item = row.original;
return (
<div className="flex justify-end gap-2">
{onEdit && (
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
onEdit(item);
}}
>
<Edit3 className="size-4" />
</Button>
)}
{onDelete && (
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation();
onDelete(item);
}}
>
<Trash2 className="size-4 text-destructive" />
</Button>
)}
{actions.map((action) => {
const label =
typeof action.label === 'function' ? action.label(item) : action.label;
return (
<TableActionButton
key={label}
label={label}
permission={action.permission}
className={action.className}
disabled={action.disabled?.(item)}
onClick={(event) => {
event.stopPropagation();
action.onClick(item);
}}
>
{action.icon}
</TableActionButton>
);
})}
</div>
);
},
});
}
return cols;
}, [initialColumns, onEdit, onDelete]);
}, [actions, initialColumns]);
const table = useReactTable({
data,
@@ -158,7 +162,8 @@ export function DataTable<TData, TValue>({
});
return (
<section className="space-y-4 rounded-lg border bg-card p-4">
<TooltipProvider delayDuration={0}>
<section className="space-y-4 rounded-lg border bg-card p-4">
<TopHeader
title={onAddNew ? title : undefined}
itemCount={pagination?.totalItems ?? data.length}
@@ -186,10 +191,7 @@ export function DataTable<TData, TValue>({
))
) : table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
>
<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -216,6 +218,7 @@ export function DataTable<TData, TValue>({
pageSize={pagination?.limit}
onPageSizeChange={pagination?.onLimitChange}
/>
</section>
</section>
</TooltipProvider>
);
}

4
src/components/ui/badge.tsx
View File

@@ -5,14 +5,14 @@ import { Slot } from 'radix-ui';
import { cn } from '@/lib/utils';
const badgeVariants = cva(
'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] outline-none aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
destructive:
'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
'bg-destructive text-white dark:bg-destructive/60 [a&]:hover:bg-destructive/90',
outline:
'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',

61
src/components/ui/button.tsx
View File

@@ -1,54 +1,51 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { Slot } from 'radix-ui';
import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils';
const buttonVariants = cva(
"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: 'bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60',
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:border-ring dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-8",
"icon-lg": "size-10",
sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: 'size-9',
'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
'icon-sm': 'size-8',
'icon-lg': 'size-10',
},
},
defaultVariants: {
variant: "default",
size: "default",
variant: 'default',
size: 'default',
},
}
)
},
);
function Button({
className,
variant = "default",
size = "default",
variant = 'default',
size = 'default',
asChild = false,
...props
}: React.ComponentProps<"button"> &
}: React.ComponentProps<'button'> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
asChild?: boolean;
}) {
const Comp = asChild ? Slot.Root : "button"
const Comp = asChild ? Slot.Root : 'button';
return (
<Comp
@@ -58,7 +55,7 @@ function Button({
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
);
}
export { Button, buttonVariants }
export { Button, buttonVariants };

158
src/components/ui/combobox.tsx
View File

@@ -1,42 +1,58 @@
"use client"
'use client';
import * as React from "react"
import { Combobox as ComboboxPrimitive } from "@base-ui/react"
import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
import * as React from 'react';
import { Combobox as ComboboxPrimitive } from '@base-ui/react';
import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from "@/components/ui/input-group"
} from '@/components/ui/input-group';
const Combobox = ComboboxPrimitive.Root
const Combobox = ComboboxPrimitive.Root;
function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
}
function ComboboxTrigger({
className,
children,
render,
...props
}: ComboboxPrimitive.Trigger.Props) {
const icon = (
<ChevronDownIcon
data-slot="combobox-trigger-icon"
className="pointer-events-none size-4 text-muted-foreground"
/>
);
const triggerRender = React.isValidElement<{ children?: React.ReactNode }>(render)
? React.cloneElement(render, {
children: (
<>
{render.props.children}
{icon}
</>
),
})
: render;
return (
<ComboboxPrimitive.Trigger
data-slot="combobox-trigger"
className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
render={triggerRender}
{...props}
>
{children}
<ChevronDownIcon
data-slot="combobox-trigger-icon"
className="pointer-events-none size-4 text-muted-foreground"
/>
{render ? null : icon}
</ComboboxPrimitive.Trigger>
)
);
}
function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
@@ -49,7 +65,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
>
<XIcon className="pointer-events-none" />
</ComboboxPrimitive.Clear>
)
);
}
function ComboboxInput({
@@ -60,15 +76,12 @@ function ComboboxInput({
showClear = false,
...props
}: ComboboxPrimitive.Input.Props & {
showTrigger?: boolean
showClear?: boolean
showTrigger?: boolean;
showClear?: boolean;
}) {
return (
<InputGroup className={cn("w-auto", className)}>
<ComboboxPrimitive.Input
render={<InputGroupInput disabled={disabled} />}
{...props}
/>
<InputGroup className={cn('w-auto', className)}>
<ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
<InputGroupAddon align="inline-end">
{showTrigger && (
<InputGroupButton
@@ -86,14 +99,14 @@ function ComboboxInput({
</InputGroupAddon>
{children}
</InputGroup>
)
);
}
function ComboboxContent({
className,
side = "bottom",
side = 'bottom',
sideOffset = 6,
align = "start",
align = 'start',
alignOffset = 0,
anchor,
container,
@@ -101,9 +114,9 @@ function ComboboxContent({
}: ComboboxPrimitive.Popup.Props &
Pick<
ComboboxPrimitive.Positioner.Props,
"side" | "align" | "sideOffset" | "alignOffset" | "anchor"
'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
> & {
container?: ComboboxPrimitive.Portal.Props["container"]
container?: ComboboxPrimitive.Portal.Props['container'];
}) {
return (
<ComboboxPrimitive.Portal container={container}>
@@ -119,14 +132,14 @@ function ComboboxContent({
data-slot="combobox-content"
data-chips={!!anchor}
className={cn(
"group/combobox-content relative max-h-96 w-[var(--anchor-width)] max-w-[var(--available-width)] min-w-[calc(var(--anchor-width)+1.75rem)] origin-[var(--transform-origin)] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-[var(--anchor-width)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
className
'group/combobox-content relative max-h-96 w-[var(--anchor-width)] max-w-[var(--available-width)] min-w-[calc(var(--anchor-width)+1.75rem)] origin-[var(--transform-origin)] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-[var(--anchor-width)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
className,
)}
{...props}
/>
</ComboboxPrimitive.Positioner>
</ComboboxPrimitive.Portal>
)
);
}
function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
@@ -134,25 +147,21 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
<ComboboxPrimitive.List
data-slot="combobox-list"
className={cn(
"max-h-[min(21.75rem,calc(var(--available-height)-2.25rem))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0",
className
'max-h-[min(21.75rem,calc(var(--available-height)-2.25rem))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0',
className,
)}
{...props}
/>
)
);
}
function ComboboxItem({
className,
children,
...props
}: ComboboxPrimitive.Item.Props) {
function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
return (
<ComboboxPrimitive.Item
data-slot="combobox-item"
className={cn(
"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
className,
)}
{...props}
>
@@ -166,39 +175,30 @@ function ComboboxItem({
<CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
</ComboboxPrimitive.ItemIndicator>
</ComboboxPrimitive.Item>
)
);
}
function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
return (
<ComboboxPrimitive.Group
data-slot="combobox-group"
className={cn(className)}
{...props}
/>
)
<ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
);
}
function ComboboxLabel({
className,
...props
}: ComboboxPrimitive.GroupLabel.Props) {
function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
return (
<ComboboxPrimitive.GroupLabel
data-slot="combobox-label"
className={cn(
"px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
className
'px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm',
className,
)}
{...props}
/>
)
);
}
function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
return (
<ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
)
return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
}
function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
@@ -206,42 +206,38 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
<ComboboxPrimitive.Empty
data-slot="combobox-empty"
className={cn(
"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
className
'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
className,
)}
{...props}
/>
)
);
}
function ComboboxSeparator({
className,
...props
}: ComboboxPrimitive.Separator.Props) {
function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
return (
<ComboboxPrimitive.Separator
data-slot="combobox-separator"
className={cn("-mx-1 my-1 h-px bg-border", className)}
className={cn('-mx-1 my-1 h-px bg-border', className)}
{...props}
/>
)
);
}
function ComboboxChips({
className,
...props
}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
ComboboxPrimitive.Chips.Props) {
}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
return (
<ComboboxPrimitive.Chips
data-slot="combobox-chips"
className={cn(
"flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
className
'flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive',
className,
)}
{...props}
/>
)
);
}
function ComboboxChip({
@@ -250,14 +246,14 @@ function ComboboxChip({
showRemove = true,
...props
}: ComboboxPrimitive.Chip.Props & {
showRemove?: boolean
showRemove?: boolean;
}) {
return (
<ComboboxPrimitive.Chip
data-slot="combobox-chip"
className={cn(
"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
className
'flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
className,
)}
{...props}
>
@@ -272,25 +268,21 @@ function ComboboxChip({
</ComboboxPrimitive.ChipRemove>
)}
</ComboboxPrimitive.Chip>
)
);
}
function ComboboxChipsInput({
className,
children,
...props
}: ComboboxPrimitive.Input.Props) {
function ComboboxChipsInput({ className, children, ...props }: ComboboxPrimitive.Input.Props) {
return (
<ComboboxPrimitive.Input
data-slot="combobox-chip-input"
className={cn("min-w-16 flex-1 outline-none", className)}
className={cn('min-w-16 flex-1 outline-none', className)}
{...props}
/>
)
);
}
function useComboboxAnchor() {
return React.useRef<HTMLDivElement | null>(null)
return React.useRef<HTMLDivElement | null>(null);
}
export {
@@ -310,4 +302,4 @@ export {
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
}
};

92
src/components/ui/dialog.tsx
View File

@@ -1,34 +1,26 @@
"use client"
'use client';
import * as React from "react"
import { XIcon } from "lucide-react"
import { Dialog as DialogPrimitive } from "radix-ui"
import * as React from 'react';
import { XIcon } from 'lucide-react';
import { Dialog as DialogPrimitive } from 'radix-ui';
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
}
function DialogOverlay({
@@ -39,12 +31,12 @@ function DialogOverlay({
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/50 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
className
'fixed inset-0 z-50 bg-black/50 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
className,
)}
{...props}
/>
)
);
}
function DialogContent({
@@ -54,7 +46,7 @@ function DialogContent({
onInteractOutside,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean
showCloseButton?: boolean;
}) {
return (
<DialogPortal data-slot="dialog-portal">
@@ -62,12 +54,12 @@ function DialogContent({
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
className
'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
className,
)}
onInteractOutside={(event) => {
event.preventDefault()
onInteractOutside?.(event)
event.preventDefault();
onInteractOutside?.(event);
}}
{...props}
>
@@ -75,7 +67,7 @@ function DialogContent({
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<XIcon />
<span className="sr-only">Close</span>
@@ -83,17 +75,17 @@ function DialogContent({
)}
</DialogPrimitive.Content>
</DialogPortal>
)
);
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
{...props}
/>
)
);
}
function DialogFooter({
@@ -101,16 +93,13 @@ function DialogFooter({
showCloseButton = false,
children,
...props
}: React.ComponentProps<"div"> & {
showCloseButton?: boolean
}: React.ComponentProps<'div'> & {
showCloseButton?: boolean;
}) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
{...props}
>
{children}
@@ -120,20 +109,11 @@ function DialogFooter({
</DialogPrimitive.Close>
)}
</div>
)
);
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn(className)}
{...props}
/>
)
function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
return <DialogPrimitive.Title data-slot="dialog-title" className={cn(className)} {...props} />;
}
function DialogDescription({
@@ -143,10 +123,10 @@ function DialogDescription({
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground", className)}
className={cn('text-muted-foreground', className)}
{...props}
/>
)
);
}
export {
@@ -160,4 +140,4 @@ export {
DialogPortal,
DialogTitle,
DialogTrigger,
}
};

136
src/components/ui/input-group.tsx
View File

@@ -1,39 +1,39 @@
"use client"
'use client';
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="input-group"
role="group"
className={cn(
"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
"h-9 min-w-0 has-[>textarea]:h-auto",
'group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30',
'h-9 min-w-0 has-[>textarea]:h-auto',
// Variants based on alignment.
"has-[>[data-align=inline-start]]:[&>input]:pl-2",
"has-[>[data-align=inline-end]]:[&>input]:pr-2",
"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
'has-[>[data-align=inline-start]]:[&>input]:pl-2',
'has-[>[data-align=inline-end]]:[&>input]:pr-2',
'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
// Focus state.
"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
'has-[[data-slot=input-group-control]:focus-visible]:border-ring',
// Error state.
"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
'has-[[data-slot][aria-invalid=true]]:border-destructive',
className
className,
)}
{...props}
/>
)
);
}
const inputGroupAddonVariants = cva(
@@ -41,27 +41,25 @@ const inputGroupAddonVariants = cva(
{
variants: {
align: {
"inline-start":
"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
"inline-end":
"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
"block-start":
"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
"block-end":
"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
'block-start':
'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
'block-end':
'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
},
},
defaultVariants: {
align: "inline-start",
align: 'inline-start',
},
}
)
},
);
function InputGroupAddon({
className,
align = "inline-start",
align = 'inline-start',
...props
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
return (
<div
role="group"
@@ -69,41 +67,37 @@ function InputGroupAddon({
data-align={align}
className={cn(inputGroupAddonVariants({ align }), className)}
onClick={(e) => {
if ((e.target as HTMLElement).closest("button")) {
return
if ((e.target as HTMLElement).closest('button')) {
return;
}
e.currentTarget.parentElement?.querySelector("input")?.focus()
e.currentTarget.parentElement?.querySelector('input')?.focus();
}}
{...props}
/>
)
);
}
const inputGroupButtonVariants = cva(
"flex items-center gap-2 text-sm shadow-none",
{
variants: {
size: {
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
"icon-xs":
"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
},
const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
variants: {
size: {
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
},
defaultVariants: {
size: "xs",
},
}
)
},
defaultVariants: {
size: 'xs',
},
});
function InputGroupButton({
className,
type = "button",
variant = "ghost",
size = "xs",
type = 'button',
variant = 'ghost',
size = 'xs',
...props
}: Omit<React.ComponentProps<typeof Button>, "size"> &
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
VariantProps<typeof inputGroupButtonVariants>) {
return (
<Button
@@ -113,51 +107,45 @@ function InputGroupButton({
className={cn(inputGroupButtonVariants({ size }), className)}
{...props}
/>
)
);
}
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
return (
<span
className={cn(
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className
className,
)}
{...props}
/>
)
);
}
function InputGroupInput({
className,
...props
}: React.ComponentProps<"input">) {
function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
return (
<Input
data-slot="input-group-control"
className={cn(
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
className
'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
className,
)}
{...props}
/>
)
);
}
function InputGroupTextarea({
className,
...props
}: React.ComponentProps<"textarea">) {
function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
return (
<Textarea
data-slot="input-group-control"
className={cn(
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
className
'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
className,
)}
{...props}
/>
)
);
}
export {
@@ -167,4 +155,4 @@ export {
InputGroupText,
InputGroupInput,
InputGroupTextarea,
}
};

18
src/components/ui/input.tsx
View File

@@ -1,21 +1,21 @@
import * as React from "react"
import * as React from 'react';
import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils';
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
return (
<input
type={type}
data-slot="input"
className={cn(
"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
className
'h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
'focus-visible:border-ring',
'aria-invalid:border-destructive',
className,
)}
{...props}
/>
)
);
}
export { Input }
export { Input };

2
src/components/ui/scroll-area.tsx
View File

@@ -18,7 +18,7 @@ function ScrollArea({
>
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-none"
>
{children}
</ScrollAreaPrimitive.Viewport>

2
src/components/ui/select.tsx
View File

@@ -31,7 +31,7 @@ function SelectTrigger({
data-slot="select-trigger"
data-size={size}
className={cn(
"flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
"flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-placeholder:text-muted-foreground data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
className,
)}
{...props}

93
src/components/ui/sheet.tsx
View File

@@ -1,31 +1,25 @@
"use client"
'use client';
import * as React from "react"
import { XIcon } from "lucide-react"
import { Dialog as SheetPrimitive } from "radix-ui"
import * as React from 'react';
import { XIcon } from 'lucide-react';
import { Dialog as SheetPrimitive } from 'radix-ui';
import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils';
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}
function SheetTrigger({
...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
}
function SheetClose({
...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
}
function SheetPortal({
...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
}
function SheetOverlay({
@@ -36,23 +30,23 @@ function SheetOverlay({
<SheetPrimitive.Overlay
data-slot="sheet-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
className
'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
className,
)}
{...props}
/>
)
);
}
function SheetContent({
className,
children,
side = "right",
side = 'right',
showCloseButton = true,
...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
side?: "top" | "right" | "bottom" | "left"
showCloseButton?: boolean
side?: 'top' | 'right' | 'bottom' | 'left';
showCloseButton?: boolean;
}) {
return (
<SheetPortal>
@@ -60,62 +54,59 @@ function SheetContent({
<SheetPrimitive.Content
data-slot="sheet-content"
className={cn(
"fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
side === "right" &&
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
side === "left" &&
"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
side === "top" &&
"inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
side === "bottom" &&
"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
className
'fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
side === 'right' &&
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
side === 'left' &&
'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
side === 'top' &&
'inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
side === 'bottom' &&
'inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
className,
)}
{...props}
>
{children}
{showCloseButton && (
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
<XIcon className="size-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
)}
</SheetPrimitive.Content>
</SheetPortal>
)
);
}
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="sheet-header"
className={cn("flex flex-col gap-1.5 p-4", className)}
className={cn('flex flex-col gap-1.5 p-4', className)}
{...props}
/>
)
);
}
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="sheet-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
{...props}
/>
)
);
}
function SheetTitle({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn("text-foreground", className)}
className={cn('text-foreground', className)}
{...props}
/>
)
);
}
function SheetDescription({
@@ -125,10 +116,10 @@ function SheetDescription({
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn("text-muted-foreground", className)}
className={cn('text-muted-foreground', className)}
{...props}
/>
)
);
}
export {
@@ -140,4 +131,4 @@ export {
SheetFooter,
SheetTitle,
SheetDescription,
}
};

10
src/components/ui/sidebar.tsx
View File

@@ -387,7 +387,7 @@ function SidebarGroupLabel({
data-slot="sidebar-group-label"
data-sidebar="group-label"
className={cn(
'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'text-sidebar-foreground/70 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear [&>svg]:size-4 [&>svg]:shrink-0',
'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
className,
)}
@@ -408,7 +408,7 @@ function SidebarGroupAction({
data-slot="sidebar-group-action"
data-sidebar="group-action"
className={cn(
'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform [&>svg]:size-4 [&>svg]:shrink-0',
// Increases the hit area of the button on mobile.
'after:absolute after:-inset-2 md:after:hidden',
'group-data-[collapsible=icon]:hidden',
@@ -453,7 +453,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
}
const sidebarMenuButtonVariants = cva(
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
{
variants: {
variant: {
@@ -540,7 +540,7 @@ function SidebarMenuAction({
data-slot="sidebar-menu-action"
data-sidebar="menu-action"
className={cn(
'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform [&>svg]:size-4 [&>svg]:shrink-0',
// Increases the hit area of the button on mobile.
'after:absolute after:-inset-2 md:after:hidden',
'peer-data-[size=sm]/menu-button:top-1',
@@ -652,7 +652,7 @@ function SidebarMenuSubButton({
data-size={size}
data-active={isActive}
className={cn(
'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
size === 'sm' && 'text-xs',
size === 'md' && 'text-sm',

14
src/components/ui/textarea.tsx
View File

@@ -1,18 +1,18 @@
import * as React from "react"
import * as React from 'react';
import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils';
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
return (
<textarea
data-slot="textarea"
className={cn(
"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
className
'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive md:text-sm dark:bg-input/30',
className,
)}
{...props}
/>
)
);
}
export { Textarea }
export { Textarea };