feat: support server port reuse

apps/webui/src/presentation/routeTree.gen.ts

@@ -34,6 +34,7 @@ import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed'
 import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore'
 import { Route as AppSubscriptionsEditSubscriptionIdImport } from './routes/_app/subscriptions/edit.$subscriptionId'
 import { Route as AppSubscriptionsDetailSubscriptionIdImport } from './routes/_app/subscriptions/detail.$subscriptionId'
+import { Route as AppCredential3rdDetailIdImport } from './routes/_app/credential3rd/detail.$id'
 
 // Create/Update Routes
 
@@ -178,6 +179,12 @@ const AppSubscriptionsDetailSubscriptionIdRoute =
     getParentRoute: () => AppSubscriptionsRouteRoute,
   } as any)
 
+const AppCredential3rdDetailIdRoute = AppCredential3rdDetailIdImport.update({
+  id: '/detail/$id',
+  path: '/detail/$id',
+  getParentRoute: () => AppCredential3rdRouteRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -329,6 +336,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthOidcCallbackImport
       parentRoute: typeof rootRoute
     }
+    '/_app/credential3rd/detail/$id': {
+      id: '/_app/credential3rd/detail/$id'
+      path: '/detail/$id'
+      fullPath: '/credential3rd/detail/$id'
+      preLoaderRoute: typeof AppCredential3rdDetailIdImport
+      parentRoute: typeof AppCredential3rdRouteImport
+    }
     '/_app/subscriptions/detail/$subscriptionId': {
       id: '/_app/subscriptions/detail/$subscriptionId'
       path: '/detail/$subscriptionId'
@@ -363,11 +377,13 @@ const AppBangumiRouteRouteWithChildren = AppBangumiRouteRoute._addFileChildren(
 interface AppCredential3rdRouteRouteChildren {
   AppCredential3rdCreateRoute: typeof AppCredential3rdCreateRoute
   AppCredential3rdManageRoute: typeof AppCredential3rdManageRoute
+  AppCredential3rdDetailIdRoute: typeof AppCredential3rdDetailIdRoute
 }
 
 const AppCredential3rdRouteRouteChildren: AppCredential3rdRouteRouteChildren = {
   AppCredential3rdCreateRoute: AppCredential3rdCreateRoute,
   AppCredential3rdManageRoute: AppCredential3rdManageRoute,
+  AppCredential3rdDetailIdRoute: AppCredential3rdDetailIdRoute,
 }
 
 const AppCredential3rdRouteRouteWithChildren =
@@ -464,6 +480,7 @@ export interface FileRoutesByFullPath {
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
+  '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -490,6 +507,7 @@ export interface FileRoutesByTo {
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
+  '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -517,6 +535,7 @@ export interface FileRoutesById {
   '/_app/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
+  '/_app/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/_app/subscriptions/detail/$subscriptionId': typeof AppSubscriptionsDetailSubscriptionIdRoute
   '/_app/subscriptions/edit/$subscriptionId': typeof AppSubscriptionsEditSubscriptionIdRoute
 }
@@ -545,6 +564,7 @@ export interface FileRouteTypes {
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
+    | '/credential3rd/detail/$id'
     | '/subscriptions/detail/$subscriptionId'
     | '/subscriptions/edit/$subscriptionId'
   fileRoutesByTo: FileRoutesByTo
@@ -570,6 +590,7 @@ export interface FileRouteTypes {
     | '/subscriptions/create'
     | '/subscriptions/manage'
     | '/auth/oidc/callback'
+    | '/credential3rd/detail/$id'
     | '/subscriptions/detail/$subscriptionId'
     | '/subscriptions/edit/$subscriptionId'
   id:
@@ -595,6 +616,7 @@ export interface FileRouteTypes {
     | '/_app/subscriptions/create'
     | '/_app/subscriptions/manage'
     | '/auth/oidc/callback'
+    | '/_app/credential3rd/detail/$id'
     | '/_app/subscriptions/detail/$subscriptionId'
     | '/_app/subscriptions/edit/$subscriptionId'
   fileRoutesById: FileRoutesById
@@ -672,7 +694,8 @@ export const routeTree = rootRoute
       "parent": "/_app",
       "children": [
         "/_app/credential3rd/create",
-        "/_app/credential3rd/manage"
+        "/_app/credential3rd/manage",
+        "/_app/credential3rd/detail/$id"
       ]
     },
     "/_app/playground": {
@@ -744,6 +767,10 @@ export const routeTree = rootRoute
     "/auth/oidc/callback": {
       "filePath": "auth/oidc/callback.tsx"
     },
+    "/_app/credential3rd/detail/$id": {
+      "filePath": "_app/credential3rd/detail.$id.tsx",
+      "parent": "/_app/credential3rd"
+    },
     "/_app/subscriptions/detail/$subscriptionId": {
       "filePath": "_app/subscriptions/detail.$subscriptionId.tsx",
       "parent": "/_app/subscriptions"

apps/webui/src/presentation/routes/_app/credential3rd/create.tsx

@@ -1,9 +1,251 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { FormFieldErrors } from '@/components/ui/form-field-errors';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useAppForm } from '@/components/ui/tanstack-form';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  type Credential3rdInsertDto,
+  Credential3rdInsertSchema,
+  INSERT_CREDENTIAL_3RD,
+} from '@/domains/recorder/schema/credential3rd';
+import { useInject } from '@/infra/di/inject';
+import {
+  Credential3rdTypeEnum,
+  type InsertCredential3rdMutation,
+} from '@/infra/graphql/gql/graphql';
+import { PlatformService } from '@/infra/platform/platform.service';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useMutation } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { Loader2, Save } from 'lucide-react';
+import { toast } from 'sonner';
 
 export const Route = createFileRoute('/_app/credential3rd/create')({
   component: CredentialCreateRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Create' },
+  } satisfies RouteStateDataOption,
 });
 
 function CredentialCreateRouteComponent() {
-  return <div>Hello "/_app/credential/create"!</div>;
+  const navigate = useNavigate();
+  const platformService = useInject(PlatformService);
+
+  const [insertCredential3rd, { loading }] = useMutation<
+    InsertCredential3rdMutation['credential3rdCreateOne']
+  >(INSERT_CREDENTIAL_3RD, {
+    onCompleted(data) {
+      toast.success('Credential created');
+      navigate({
+        to: '/credential3rd/detail/$id',
+        params: { id: `${data.id}` },
+      });
+    },
+    onError(error) {
+      toast.error('Failed to create credential', {
+        description: error.message,
+      });
+    },
+  });
+
+  const form = useAppForm({
+    defaultValues: {
+      credentialType: Credential3rdTypeEnum.Mikan,
+      username: '',
+      password: '',
+      userAgent: '',
+    } as Credential3rdInsertDto,
+    validators: {
+      onBlur: Credential3rdInsertSchema,
+      onSubmit: Credential3rdInsertSchema,
+    },
+    onSubmit: async (form) => {
+      if (form.value.credentialType === Credential3rdTypeEnum.Mikan) {
+        await insertCredential3rd({
+          variables: {
+            data: form.value,
+          },
+        });
+      }
+    },
+  });
+
+  return (
+    <div className="container mx-auto max-w-2xl py-6">
+      <div className="mb-6 flex items-center gap-4">
+        <div>
+          <h1 className="font-bold text-2xl">Create third-party credential</h1>
+          <p className="mt-1 text-muted-foreground">
+            Add new third-party login credential
+          </p>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Credential information</CardTitle>
+          <CardDescription className="mt-2">
+            Please fill in the information of the third-party platform login
+            credential for your subscriptions.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit();
+            }}
+            className="space-y-6"
+          >
+            <form.Field
+              name="credentialType"
+              validators={{
+                onChange: ({ value }) => {
+                  if (!value) {
+                    return 'Please select the credential type';
+                  }
+                },
+              }}
+            >
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Credential type *</Label>
+                  <Select
+                    value={field.state.value}
+                    onValueChange={(value) =>
+                      field.handleChange(value as Credential3rdTypeEnum)
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select credential type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={Credential3rdTypeEnum.Mikan}>
+                        Mikan
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {field.state.meta.errors && (
+                    <p className="text-destructive text-sm">
+                      {field.state.meta.errors[0]?.toString()}
+                    </p>
+                  )}
+                </div>
+              )}
+            </form.Field>
+            <form.Field name="username">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Username *</Label>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Please enter username"
+                    autoComplete="off"
+                  />
+                  {field.state.meta.errors && (
+                    <FormFieldErrors errors={field.state.meta.errors} />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            {/* 密码 */}
+            <form.Field name="password">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Password *</Label>
+                  <Input
+                    id={field.name}
+                    name={field.name}
+                    type="password"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    placeholder="Please enter password"
+                    autoComplete="off"
+                  />
+                  {field.state.meta.errors && (
+                    <FormFieldErrors errors={field.state.meta.errors} />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            {/* User Agent */}
+            <form.Field name="userAgent">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>User Agent</Label>
+                  <Textarea
+                    id={field.name}
+                    name={field.name}
+                    value={field.state.value || ''}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                    rows={3}
+                    className="resize-none"
+                    autoComplete="off"
+                    placeholder="Please enter User Agent (optional), leave it blank to use
+                    the default value"
+                  />
+                  <p className="text-muted-foreground text-sm">
+                    Current user agent: {platformService.userAgent}
+                  </p>
+                  {field.state.meta.errors && (
+                    <FormFieldErrors errors={field.state.meta.errors} />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            <div className="flex gap-3 pt-4">
+              <form.Subscribe
+                selector={(state) => [state.canSubmit, state.isSubmitting]}
+              >
+                {([canSubmit, isSubmitting]) => (
+                  <Button
+                    type="submit"
+                    disabled={!canSubmit || loading}
+                    className="flex-1"
+                  >
+                    {loading || isSubmitting ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Creating...
+                      </>
+                    ) : (
+                      <>
+                        <Save className="mr-2 h-4 w-4" />
+                        Create credential
+                      </>
+                    )}
+                  </Button>
+                )}
+              </form.Subscribe>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
 }

apps/webui/src/presentation/routes/_app/credential3rd/detail.$id.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_app/credential3rd/detail/$id')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_app/credential3rd/detail/$id"!</div>
+}

apps/webui/src/presentation/routes/_app/credential3rd/manage.tsx

@@ -1,9 +1,350 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { DataTableRowActions } from '@/components/ui/data-table-row-actions';
+import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
+import { QueryErrorView } from '@/components/ui/query-error-view';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  type Credential3rdQueryDto,
+  DELETE_CREDENTIAL_3RD,
+  GET_CREDENTIAL_3RD,
+} from '@/domains/recorder/schema/credential3rd';
+import type { GetCredential3rdQuery } from '@/infra/graphql/gql/graphql';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { useDebouncedSkeleton } from '@/presentation/hooks/use-debounded-skeleton';
+import { useEvent } from '@/presentation/hooks/use-event';
+import { useMutation, useQuery } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import {
+  type ColumnDef,
+  type PaginationState,
+  type Row,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { zhCN } from 'date-fns/locale';
+import { Eye, EyeOff, Plus } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
 
 export const Route = createFileRoute('/_app/credential3rd/manage')({
   component: CredentialManageRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Manage' },
+  } satisfies RouteStateDataOption,
 });
 
 function CredentialManageRouteComponent() {
-  return <div>Hello "/_app/credential/manage"!</div>;
+  const navigate = useNavigate();
+
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [showPasswords, setShowPasswords] = useState<Record<number, boolean>>(
+    {}
+  );
+
+  const { loading, error, data, refetch } = useQuery<GetCredential3rdQuery>(
+    GET_CREDENTIAL_3RD,
+    {
+      variables: {
+        filters: {},
+        orderBy: {
+          createdAt: 'DESC',
+        },
+        pagination: {
+          page: {
+            page: pagination.pageIndex,
+            limit: pagination.pageSize,
+          },
+        },
+      },
+      fetchPolicy: 'cache-and-network',
+      nextFetchPolicy: 'network-only',
+    }
+  );
+
+  const [deleteCredential] = useMutation(DELETE_CREDENTIAL_3RD, {
+    onCompleted: async () => {
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Credential deleted');
+    },
+    onError: (error) => {
+      toast.error('Failed to delete credential', {
+        description: error.message,
+      });
+    },
+  });
+  const { showSkeleton } = useDebouncedSkeleton({ loading });
+
+  const credentials = data?.credential3rd;
+
+  const handleDeleteRecord = useEvent(
+    (row: Row<Credential3rdQueryDto>) => async () => {
+      await deleteCredential({
+        variables: {
+          filters: {
+            id: { eq: row.original.id },
+          },
+        },
+      });
+    }
+  );
+
+  const togglePasswordVisibility = useEvent((id: number) => {
+    setShowPasswords((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  });
+
+  const columns = useMemo(() => {
+    const cs: ColumnDef<Credential3rdQueryDto>[] = [
+      {
+        header: 'ID',
+        accessorKey: 'id',
+        enableHiding: false,
+        cell: ({ row }) => {
+          return <div className="font-mono text-sm">{row.original.id}</div>;
+        },
+      },
+      {
+        header: 'Credential Type',
+        accessorKey: 'credentialType',
+        cell: ({ row }) => {
+          const type = row.original.credentialType;
+          return (
+            <Badge variant="secondary" className="capitalize">
+              {type}
+            </Badge>
+          );
+        },
+      },
+      {
+        header: 'Username',
+        accessorKey: 'username',
+        cell: ({ row }) => {
+          const username = row.original.username;
+          return (
+            <div className="whitespace-normal break-words">
+              {username || '-'}
+            </div>
+          );
+        },
+      },
+      {
+        header: 'Password',
+        accessorKey: 'password',
+        cell: ({ row }) => {
+          const password = row.original.password;
+          const isVisible = showPasswords[row.original.id];
+
+          if (!password) {
+            return <div>-</div>;
+          }
+
+          return (
+            <div className="flex items-center gap-2">
+              <div className="font-mono text-sm">
+                {isVisible ? password : '••••••••'}
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => togglePasswordVisibility(row.original.id)}
+              >
+                {isVisible ? (
+                  <EyeOff className="h-3 w-3" />
+                ) : (
+                  <Eye className="h-3 w-3" />
+                )}
+              </Button>
+            </div>
+          );
+        },
+      },
+      {
+        header: 'User Agent',
+        accessorKey: 'userAgent',
+        cell: ({ row }) => {
+          const userAgent = row.original.userAgent;
+          return (
+            <div className="max-w-xs truncate" title={userAgent || undefined}>
+              {userAgent || '-'}
+            </div>
+          );
+        },
+      },
+      {
+        header: 'Created At',
+        accessorKey: 'createdAt',
+        cell: ({ row }) => {
+          const createdAt = row.original.createdAt;
+          return (
+            <div className="text-sm">
+              {format(new Date(createdAt), 'yyyy-MM-dd HH:mm:ss')}
+            </div>
+          );
+        },
+      },
+      {
+        header: 'Updated At',
+        accessorKey: 'updatedAt',
+        cell: ({ row }) => {
+          const updatedAt = row.original.updatedAt;
+          return (
+            <div className="text-sm">
+              {format(new Date(updatedAt), 'yyyy-MM-dd HH:mm:ss', {
+                locale: zhCN,
+              })}
+            </div>
+          );
+        },
+      },
+      {
+        id: 'actions',
+        cell: ({ row }) => (
+          <DataTableRowActions
+            row={row}
+            getId={(row) => row.original.id}
+            showEdit
+            showDelete
+            onEdit={() => {
+              navigate({
+                to: '/credential3rd/detail/$id',
+                params: { id: `${row.original.id}` },
+              });
+            }}
+            onDelete={handleDeleteRecord(row)}
+          />
+        ),
+      },
+    ];
+    return cs;
+  }, [handleDeleteRecord, navigate, showPasswords, togglePasswordVisibility]);
+
+  const table = useReactTable({
+    data: data?.credential3rd?.nodes ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    pageCount: credentials?.paginationInfo?.pages,
+    rowCount: credentials?.paginationInfo?.total,
+    state: {
+      pagination,
+      sorting,
+      columnVisibility,
+    },
+  });
+
+  if (error) {
+    return <QueryErrorView message={error.message} onRetry={refetch} />;
+  }
+
+  return (
+    <div className="container mx-auto space-y-4 rounded-md">
+      <div className="flex items-center justify-between pt-4">
+        <div>
+          <h1 className="font-bold text-2xl">Credential 3rd Management</h1>
+          <p className="text-muted-foreground">
+            Manage your third-party platform login credentials
+          </p>
+        </div>
+        <Button onClick={() => navigate({ to: '/credential3rd/create' })}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Credential
+        </Button>
+      </div>
+      <div className="flex items-center py-2">
+        <DataTableViewOptions table={table} />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {showSkeleton &&
+              Array.from(new Array(pagination.pageSize)).map((_, index) => (
+                <TableRow key={index}>
+                  {table.getVisibleLeafColumns().map((column) => (
+                    <TableCell key={column.id}>
+                      <Skeleton className="h-8" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            {!showSkeleton &&
+              (table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No Results
+                  </TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} showSelectedRowCount={false} />
+    </div>
+  );
 }

apps/webui/src/presentation/routes/_app/subscriptions/detail.$subscriptionId.tsx

@@ -1,7 +1,7 @@
 import type { GetSubscriptionDetailQuery } from '@/infra/graphql/gql/graphql';
 import { useQuery } from '@apollo/client';
 import { createFileRoute } from '@tanstack/react-router';
-import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/graphql/subscriptions.js';
+import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/schema/subscriptions.js';
 
 export const Route = createFileRoute(
   '/_app/subscriptions/detail/$subscriptionId'

apps/webui/src/presentation/routes/_app/subscriptions/manage.tsx

@@ -1,4 +1,6 @@
+import { Button } from '@/components/ui/button';
 import { DataTablePagination } from '@/components/ui/data-table-pagination';
+import { DataTableRowActions } from '@/components/ui/data-table-row-actions';
 import { DataTableViewOptions } from '@/components/ui/data-table-view-options';
 import { QueryErrorView } from '@/components/ui/query-error-view';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -16,7 +18,7 @@ import {
   GET_SUBSCRIPTIONS,
   type SubscriptionDto,
   UPDATE_SUBSCRIPTIONS,
-} from '@/domains/recorder/graphql/subscriptions';
+} from '@/domains/recorder/schema/subscriptions';
 import type {
   GetSubscriptionsQuery,
   SubscriptionsUpdateInput,
@@ -38,9 +40,9 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { Plus } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { DataTableRowActions } from '../../../../components/ui/data-table-row-actions';
 
 export const Route = createFileRoute('/_app/subscriptions/manage')({
   component: SubscriptionManageRouteComponent,
@@ -63,26 +65,58 @@ function SubscriptionManageRouteComponent() {
     GET_SUBSCRIPTIONS,
     {
       variables: {
-        page: {
-          page: pagination.pageIndex,
-          limit: pagination.pageSize,
+        pagination: {
+          page: {
+            page: pagination.pageIndex + 1,
+            limit: pagination.pageSize,
+          },
         },
         filters: {},
-        orderBy: {},
+        orderBy: {
+          updatedAt: 'DESC',
+        },
       },
       refetchWritePolicy: 'overwrite',
       nextFetchPolicy: 'network-only',
     }
   );
-  const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS);
-  const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS);
+  const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS, {
+    onCompleted: async () => {
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Subscription updated');
+    },
+    onError: (error) => {
+      toast.error('Failed to update subscription', {
+        description: error.message,
+      });
+    },
+  });
+  const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS, {
+    onCompleted: async () => {
+      const refetchResult = await refetch();
+      if (refetchResult.errors) {
+        toast.error(refetchResult.errors[0].message);
+        return;
+      }
+      toast.success('Subscription deleted');
+    },
+    onError: (error) => {
+      toast.error('Failed to delete subscription', {
+        description: error.message,
+      });
+    },
+  });
   const { showSkeleton } = useDebouncedSkeleton({ loading });
 
   const subscriptions = data?.subscriptions;
 
   const handleUpdateRecord = useEvent(
     (row: Row<SubscriptionDto>) => async (data: SubscriptionsUpdateInput) => {
-      const result = await updateSubscription({
+      await updateSubscription({
         variables: {
           data,
           filters: {
@@ -92,34 +126,14 @@ function SubscriptionManageRouteComponent() {
           },
         },
       });
-      if (result.errors) {
-        toast.error(result.errors[0].message);
-        return;
-      }
-      const refetchResult = await refetch();
-      if (refetchResult.errors) {
-        toast.error(refetchResult.errors[0].message);
-        return;
-      }
-      toast.success('Subscription updated');
     }
   );
 
   const handleDeleteRecord = useEvent(
     (row: Row<SubscriptionDto>) => async () => {
-      const result = await deleteSubscription({
+      await deleteSubscription({
         variables: { filters: { id: { eq: row.original.id } } },
       });
-      if (result.errors) {
-        toast.error(result.errors[0].message);
-        return;
-      }
-      const refetchResult = await refetch();
-      if (refetchResult.errors) {
-        toast.error(refetchResult.errors[0].message);
-        return;
-      }
-      toast.success('Subscription deleted');
     }
   );
 
@@ -219,7 +233,17 @@ function SubscriptionManageRouteComponent() {
 
   return (
     <div className="container mx-auto space-y-4 rounded-md">
-      <div className="flex items-center py-4">
+      <div className="flex items-center justify-between pt-4">
+        <div>
+          <h1 className="font-bold text-2xl">Subscription Management</h1>
+          <p className="text-muted-foreground">Manage your subscription</p>
+        </div>
+        <Button onClick={() => navigate({ to: '/subscriptions/create' })}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Subscription
+        </Button>
+      </div>
+      <div className="flex items-center py-2">
         <DataTableViewOptions table={table} />
       </div>
       <div className="rounded-md border">