Update admin and marketing layouts, add new admin components

Refined both admin and marketing layouts for a clearer design. Newly added components for the admin page include admin-account-page, admin-members-table and admin-memberships-table. Also included in this update are route renaming, minor text edits and corrections in the code.
2024-04-08 20:00:52 +08:00
parent 767e2f21b5
commit 13308194ec
18 changed files with 426 additions and 103 deletions
--- a/packages/features/admin/src/components/admin-accounts-table.tsx
+++ b/packages/features/admin/src/components/admin-accounts-table.tsx
@@ -0,0 +1,230 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ColumnDef } from '@tanstack/react-table';
+import { EllipsisVertical } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Database } from '@kit/supabase/database';
+import { Button } from '@kit/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { DataTable } from '@kit/ui/enhanced-data-table';
+import { Form, FormControl, FormField, FormItem } from '@kit/ui/form';
+import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@kit/ui/select';
+
+type Account = Database['public']['Tables']['accounts']['Row'];
+
+const FiltersSchema = z.object({
+  type: z.enum(['all', 'team', 'personal']),
+  query: z.string().optional(),
+});
+
+export function AdminAccountsTable(
+  props: React.PropsWithChildren<{
+    data: Account[];
+    pageCount: number;
+    pageSize: number;
+    page: number;
+    filters: {
+      type: 'all' | 'team' | 'personal';
+    };
+  }>,
+) {
+  return (
+    <div className={'flex flex-col space-y-4'}>
+      <AccountsTableFilters filters={props.filters} />
+
+      <DataTable
+        pageSize={props.pageSize}
+        pageIndex={props.page - 1}
+        pageCount={props.pageCount}
+        data={props.data}
+        columns={getColumns()}
+      />
+    </div>
+  );
+}
+
+function AccountsTableFilters(props: {
+  filters: z.infer<typeof FiltersSchema>;
+}) {
+  const form = useForm({
+    resolver: zodResolver(FiltersSchema),
+    defaultValues: {
+      type: props.filters?.type ?? 'all',
+      query: '',
+    },
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+  });
+
+  const router = useRouter();
+  const pathName = usePathname();
+
+  const onSubmit = ({ type, query }: z.infer<typeof FiltersSchema>) => {
+    const params = new URLSearchParams({
+      account_type: type,
+      query: query ?? '',
+    });
+
+    const url = `${pathName}?${params.toString()}`;
+
+    router.push(url);
+  };
+
+  return (
+    <div className={'flex justify-end space-x-4'}>
+      <Form {...form}>
+        <form
+          className={'flex space-x-4'}
+          onSubmit={form.handleSubmit((data) => onSubmit(data))}
+        >
+          <Select
+            value={form.watch('type')}
+            onValueChange={(value) => {
+              form.setValue(
+                'type',
+                value as z.infer<typeof FiltersSchema>['type'],
+                {
+                  shouldValidate: true,
+                  shouldDirty: true,
+                  shouldTouch: true,
+                },
+              );
+
+              return onSubmit(form.getValues());
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={'Account Type'} />
+            </SelectTrigger>
+
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Account Type</SelectLabel>
+
+                <SelectItem value={'all'}>All accounts</SelectItem>
+                <SelectItem value={'team'}>Team</SelectItem>
+                <SelectItem value={'personal'}>Personal</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+
+          <FormField
+            name={'query'}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl className={'min-w-72'}>
+                  <Input
+                    className={'w-full'}
+                    placeholder={`Search account...`}
+                    {...field}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+function getColumns(): ColumnDef<Account>[] {
+  return [
+    {
+      id: 'name',
+      header: 'Name',
+      cell: ({ row }) => {
+        return (
+          <Link
+            className={'hover:underline'}
+            href={`/admin/accounts/${row.original.id}`}
+          >
+            {row.original.name}
+          </Link>
+        );
+      },
+    },
+    {
+      id: 'email',
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      id: 'type',
+      header: 'Type',
+      cell: ({ row }) => {
+        return row.original.is_personal_account ? 'Personal' : 'Team';
+      },
+    },
+    {
+      id: 'created_at',
+      header: 'Created At',
+      accessorKey: 'created_at',
+    },
+    {
+      id: 'updated_at',
+      header: 'Updated At',
+      accessorKey: 'updated_at',
+    },
+    {
+      id: 'actions',
+      header: '',
+      cell: ({ row }) => {
+        const isPersonalAccount = row.original.is_personal_account;
+
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant={'ghost'}>
+                <EllipsisVertical className={'h-4'} />
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align={'end'}>
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                <DropdownMenuItem>
+                  <Link href={`/admin/accounts/${row.original.id}`}>View</Link>
+                </DropdownMenuItem>
+
+                <If condition={isPersonalAccount}>
+                  <DropdownMenuItem className={'text-orange-800'}>
+                    Ban
+                  </DropdownMenuItem>
+                </If>
+
+                <DropdownMenuItem className={'text-destructive'}>
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+}