zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify workspace dropdowns; Update layouts (#458)

Browse Source 
Unified Account and Workspace drop-downs; Layout updates, now header lives within the PageBody component; Sidebars now use floating variant
This commit is contained in:
Giancarlo Buomprisco
2026-03-11 14:45:42 +08:00
committed by GitHub
parent ca585e09be
commit 4bc8448a1d
530 changed files with 14398 additions and 11198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/features/admin/src/components/admin-accounts-table.tsx
View File

@@ -7,7 +7,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { ColumnDef } from '@tanstack/react-table';
import { EllipsisVertical } from 'lucide-react';
import { useForm, useWatch } from 'react-hook-form';
import { z } from 'zod';
import * as z from 'zod';
import { Tables } from '@kit/supabase/database';
import { Button } from '@kit/ui/button';
@@ -77,7 +77,7 @@ export function AdminAccountsTable(
}
function AccountsTableFilters(props: {
filters: z.infer<typeof FiltersSchema>;
filters: z.output<typeof FiltersSchema>;
}) {
const form = useForm({
resolver: zodResolver(FiltersSchema),
@@ -92,7 +92,7 @@ function AccountsTableFilters(props: {
const router = useRouter();
const pathName = usePathname();
const onSubmit = ({ type, query }: z.infer<typeof FiltersSchema>) => {
const onSubmit = ({ type, query }: z.output<typeof FiltersSchema>) => {
const params = new URLSearchParams({
account_type: type,
query: query ?? '',
@@ -105,6 +105,12 @@ function AccountsTableFilters(props: {
const type = useWatch({ control: form.control, name: 'type' });
const options = {
all: 'All Accounts',
team: 'Team',
personal: 'Personal',
};
return (
<Form {...form}>
<form
@@ -116,7 +122,7 @@ function AccountsTableFilters(props: {
onValueChange={(value) => {
form.setValue(
'type',
value as z.infer<typeof FiltersSchema>['type'],
value as z.output<typeof FiltersSchema>['type'],
{
shouldValidate: true,
shouldDirty: true,
@@ -128,16 +134,20 @@ function AccountsTableFilters(props: {
}}
>
<SelectTrigger>
<SelectValue placeholder={'Account Type'} />
<SelectValue placeholder={'Account Type'}>
{(value: keyof typeof options) => options[value]}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Account Type</SelectLabel>
<SelectItem value={'all'}>All accounts</SelectItem>
<SelectItem value={'team'}>Team</SelectItem>
<SelectItem value={'personal'}>Personal</SelectItem>
{Object.entries(options).map(([key, value]) => (
<SelectItem key={key} value={key}>
{value}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
@@ -157,6 +167,8 @@ function AccountsTableFilters(props: {
</FormItem>
)}
/>
<button type="submit" hidden />
</form>
</Form>
);
@@ -211,11 +223,13 @@ function getColumns(): ColumnDef<Account>[] {
return (
<div className={'flex justify-end'}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant={'outline'} size={'icon'}>
<EllipsisVertical className={'h-4'} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuTrigger
render={
<Button variant={'outline'} size={'icon'}>
<EllipsisVertical className={'h-4'} />
</Button>
}
/>
<DropdownMenuContent align={'end'}>
<DropdownMenuGroup>

29
packages/features/admin/src/components/admin-ban-user-dialog.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { useState, useTransition } from 'react';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useAction } from 'next-safe-action/hooks';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -41,7 +42,7 @@ export function AdminBanUserDialog(
return (
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
<AlertDialogTrigger render={props.children as React.ReactElement} />
<AlertDialogContent>
<AlertDialogHeader>
@@ -60,8 +61,9 @@ export function AdminBanUserDialog(
}
function BanUserForm(props: { userId: string; onSuccess: () => void }) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const { execute, isPending, hasErrored } = useAction(banUserAction, {
onSuccess: () => props.onSuccess(),
});
const form = useForm({
resolver: zodResolver(BanUserSchema),
@@ -76,18 +78,9 @@ function BanUserForm(props: { userId: string; onSuccess: () => void }) {
<form
data-test={'admin-ban-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
startTransition(async () => {
try {
await banUserAction(data);
props.onSuccess();
} catch {
setError(true);
}
});
})}
onSubmit={form.handleSubmit((data) => execute(data))}
>
<If condition={error}>
<If condition={hasErrored}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
@@ -125,10 +118,10 @@ function BanUserForm(props: { userId: string; onSuccess: () => void }) {
/>
<AlertDialogFooter>
<AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
<AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
<Button disabled={pending} type={'submit'} variant={'destructive'}>
{pending ? 'Banning...' : 'Ban User'}
<Button disabled={isPending} type={'submit'} variant={'destructive'}>
{isPending ? 'Banning...' : 'Ban User'}
</Button>
</AlertDialogFooter>
</form>

40
packages/features/admin/src/components/admin-create-user-dialog.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { useState, useTransition } from 'react';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useAction } from 'next-safe-action/hooks';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -38,8 +39,6 @@ import {
} from '../lib/server/schema/create-user.schema';
export function AdminCreateUserDialog(props: React.PropsWithChildren) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<string | null>(null);
const [open, setOpen] = useState(false);
const form = useForm({
@@ -52,28 +51,19 @@ export function AdminCreateUserDialog(props: React.PropsWithChildren) {
mode: 'onChange',
});
const onSubmit = (data: CreateUserSchemaType) => {
startTransition(async () => {
try {
const result = await createUserAction(data);
const { execute, isPending, result } = useAction(createUserAction, {
onSuccess: () => {
toast.success('User created successfully');
form.reset();
setOpen(false);
},
});
if (result.success) {
toast.success('User creates successfully');
form.reset();
setOpen(false);
}
setError(null);
} catch (e) {
setError(e instanceof Error ? e.message : 'Error');
}
});
};
const error = result.serverError;
return (
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
<AlertDialogTrigger render={props.children as React.ReactElement} />
<AlertDialogContent>
<AlertDialogHeader>
@@ -88,7 +78,9 @@ export function AdminCreateUserDialog(props: React.PropsWithChildren) {
<form
data-test={'admin-create-user-form'}
className={'flex flex-col space-y-4'}
onSubmit={form.handleSubmit(onSubmit)}
onSubmit={form.handleSubmit((data: CreateUserSchemaType) =>
execute(data),
)}
>
<If condition={!!error}>
<Alert variant={'destructive'}>
@@ -166,8 +158,8 @@ export function AdminCreateUserDialog(props: React.PropsWithChildren) {
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button disabled={pending} type={'submit'}>
{pending ? 'Creating...' : 'Create User'}
<Button disabled={isPending} type={'submit'}>
{isPending ? 'Creating...' : 'Create User'}
</Button>
</AlertDialogFooter>
</form>

27
packages/features/admin/src/components/admin-delete-account-dialog.tsx
View File

@@ -1,8 +1,7 @@
'use client';
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useAction } from 'next-safe-action/hooks';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -37,8 +36,7 @@ export function AdminDeleteAccountDialog(
accountId: string;
}>,
) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const { execute, isPending, hasErrored } = useAction(deleteAccountAction);
const form = useForm({
resolver: zodResolver(DeleteAccountSchema),
@@ -50,7 +48,7 @@ export function AdminDeleteAccountDialog(
return (
<AlertDialog>
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
<AlertDialogTrigger render={props.children as React.ReactElement} />
<AlertDialogContent>
<AlertDialogHeader>
@@ -65,20 +63,11 @@ export function AdminDeleteAccountDialog(
<Form {...form}>
<form
data-form={'admin-delete-account-form'}
data-test={'admin-delete-account-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
startTransition(async () => {
try {
await deleteAccountAction(data);
setError(false);
} catch {
setError(true);
}
});
})}
onSubmit={form.handleSubmit((data) => execute(data))}
>
<If condition={error}>
<If condition={hasErrored}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
@@ -120,11 +109,11 @@ export function AdminDeleteAccountDialog(
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button
disabled={pending}
disabled={isPending}
type={'submit'}
variant={'destructive'}
>
{pending ? 'Deleting...' : 'Delete'}
{isPending ? 'Deleting...' : 'Delete'}
</Button>
</AlertDialogFooter>
</form>

32
packages/features/admin/src/components/admin-delete-user-dialog.tsx
View File

@@ -1,10 +1,7 @@
'use client';
import { useState, useTransition } from 'react';
import { isRedirectError } from 'next/dist/client/components/redirect-error';
import { zodResolver } from '@hookform/resolvers/zod';
import { useAction } from 'next-safe-action/hooks';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -39,8 +36,7 @@ export function AdminDeleteUserDialog(
userId: string;
}>,
) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const { execute, isPending, hasErrored } = useAction(deleteUserAction);
const form = useForm({
resolver: zodResolver(DeleteUserSchema),
@@ -52,7 +48,7 @@ export function AdminDeleteUserDialog(
return (
<AlertDialog>
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
<AlertDialogTrigger render={props.children as React.ReactElement} />
<AlertDialogContent>
<AlertDialogHeader>
@@ -69,23 +65,9 @@ export function AdminDeleteUserDialog(
<form
data-test={'admin-delete-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
startTransition(async () => {
try {
await deleteUserAction(data);
setError(false);
} catch {
if (isRedirectError(error)) {
// Do nothing
} else {
setError(true);
}
}
});
})}
onSubmit={form.handleSubmit((data) => execute(data))}
>
<If condition={error}>
<If condition={hasErrored}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
@@ -127,11 +109,11 @@ export function AdminDeleteUserDialog(
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button
disabled={pending}
disabled={isPending}
type={'submit'}
variant={'destructive'}
>
{pending ? 'Deleting...' : 'Delete'}
{isPending ? 'Deleting...' : 'Delete'}
</Button>
</AlertDialogFooter>
</form>

28
packages/features/admin/src/components/admin-impersonate-user-dialog.tsx
View File

@@ -1,9 +1,10 @@
'use client';
import { useState, useTransition } from 'react';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useQuery } from '@tanstack/react-query';
import { useAction } from 'next-safe-action/hooks';
import { useForm } from 'react-hook-form';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
@@ -53,8 +54,13 @@ export function AdminImpersonateUserDialog(
refreshToken: string;
}>();
const [isPending, startTransition] = useTransition();
const [error, setError] = useState<boolean | null>(null);
const { execute, isPending, hasErrored } = useAction(impersonateUserAction, {
onSuccess: ({ data }) => {
if (data) {
setTokens(data);
}
},
});
if (tokens) {
return (
@@ -68,7 +74,7 @@ export function AdminImpersonateUserDialog(
return (
<AlertDialog>
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
<AlertDialogTrigger render={props.children as React.ReactElement} />
<AlertDialogContent>
<AlertDialogHeader>
@@ -91,19 +97,9 @@ export function AdminImpersonateUserDialog(
<form
data-test={'admin-impersonate-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
startTransition(async () => {
try {
const result = await impersonateUserAction(data);
setTokens(result);
} catch {
setError(true);
}
});
})}
onSubmit={form.handleSubmit((data) => execute(data))}
>
<If condition={error}>
<If condition={hasErrored}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>

29
packages/features/admin/src/components/admin-reactivate-user-dialog.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { useState, useTransition } from 'react';
import { useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useAction } from 'next-safe-action/hooks';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -41,7 +42,7 @@ export function AdminReactivateUserDialog(
return (
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
<AlertDialogTrigger render={props.children as React.ReactElement} />
<AlertDialogContent>
<AlertDialogHeader>
@@ -62,8 +63,9 @@ export function AdminReactivateUserDialog(
}
function ReactivateUserForm(props: { userId: string; onSuccess: () => void }) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const { execute, isPending, hasErrored } = useAction(reactivateUserAction, {
onSuccess: () => props.onSuccess(),
});
const form = useForm({
resolver: zodResolver(ReactivateUserSchema),
@@ -78,18 +80,9 @@ function ReactivateUserForm(props: { userId: string; onSuccess: () => void }) {
<form
data-test={'admin-reactivate-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
startTransition(async () => {
try {
await reactivateUserAction(data);
props.onSuccess();
} catch {
setError(true);
}
});
})}
onSubmit={form.handleSubmit((data) => execute(data))}
>
<If condition={error}>
<If condition={hasErrored}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
@@ -127,10 +120,10 @@ function ReactivateUserForm(props: { userId: string; onSuccess: () => void }) {
/>
<AlertDialogFooter>
<AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
<AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
<Button disabled={pending} type={'submit'}>
{pending ? 'Reactivating...' : 'Reactivate User'}
<Button disabled={isPending} type={'submit'}>
{isPending ? 'Reactivating...' : 'Reactivate User'}
</Button>
</AlertDialogFooter>
</form>

45
packages/features/admin/src/components/admin-reset-password-dialog.tsx
View File

@@ -1,10 +1,9 @@
'use client';
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useAction } from 'next-safe-action/hooks';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import * as z from 'zod';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import {
@@ -51,33 +50,22 @@ export function AdminResetPasswordDialog(
},
});
const [isPending, startTransition] = useTransition();
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const onSubmit = form.handleSubmit((data) => {
setError(null);
setSuccess(false);
startTransition(async () => {
try {
await resetPasswordAction(data);
setSuccess(true);
const { execute, isPending, hasErrored, hasSucceeded } = useAction(
resetPasswordAction,
{
onSuccess: () => {
form.reset({ userId: props.userId, confirmation: '' });
toast.success('Password reset email successfully sent');
} catch (e) {
setError(e instanceof Error ? e.message : String(e));
},
onError: () => {
toast.error('We hit an error. Please read the logs.');
}
});
});
},
},
);
return (
<AlertDialog>
<AlertDialogTrigger asChild>{props.children}</AlertDialogTrigger>
<AlertDialogTrigger render={props.children as React.ReactElement} />
<AlertDialogContent>
<AlertDialogHeader>
@@ -90,7 +78,10 @@ export function AdminResetPasswordDialog(
<div className="relative">
<Form {...form}>
<form onSubmit={onSubmit} className="space-y-4">
<form
onSubmit={form.handleSubmit((data) => execute(data))}
className="space-y-4"
>
<FormField
control={form.control}
name="confirmation"
@@ -115,7 +106,7 @@ export function AdminResetPasswordDialog(
)}
/>
<If condition={!!error}>
<If condition={hasErrored}>
<Alert variant="destructive">
<AlertTitle>
We encountered an error while sending the email
@@ -127,7 +118,7 @@ export function AdminResetPasswordDialog(
</Alert>
</If>
<If condition={success}>
<If condition={hasSucceeded}>
<Alert>
<AlertTitle>
Password reset email sent successfully