feat: add subscription detail & edit page

apps/webui/src/domains/recorder/schema/mikan.ts

@@ -179,14 +179,3 @@ export function extractMikanSubscriptionSubscriberSourceUrl(
     ),
   });
 }
-
-export function extractMikanSubscriptionSourceUrl(
-  sourceUrl: string
-): MikanSubscriptionSourceUrl | ArkErrors {
-  const u = new URL(sourceUrl);
-  return MikanSubscriptionSourceUrlSchema({
-    category: SubscriptionCategoryEnum.MikanBangumi,
-    mikanBangumiId: u.searchParams.get(MIKAN_BANGUMI_ID_QUERY_KEY),
-    mikanFansubId: u.searchParams.get(MIKAN_FANSUB_ID_QUERY_KEY),
-  });
-}

apps/webui/src/domains/recorder/schema/subscriptions.ts

@@ -96,6 +96,7 @@ query GetSubscriptionDetail ($id: Int!) {
       enabled
       credential3rd {
          id
+         username
       }
       bangumi {
         nodes {

apps/webui/src/domains/recorder/services/subscription.service.ts

@@ -3,8 +3,17 @@ import {
   type SubscriptionsInsertInput,
 } from '@/infra/graphql/gql/graphql';
 import { Injectable, inject } from '@outposts/injection-js';
+import { ArkErrors } from 'arktype';
 import { omit } from 'lodash-es';
-import { buildMikanSubscriptionSeasonSourceUrl } from '../schema/mikan';
+import {
+  type MikanSubscriptionBangumiSourceUrl,
+  type MikanSubscriptionSeasonSourceUrl,
+  type MikanSubscriptionSubscriberSourceUrl,
+  buildMikanSubscriptionSeasonSourceUrl,
+  extractMikanSubscriptionBangumiSourceUrl,
+  extractMikanSubscriptionSeasonSourceUrl,
+  extractMikanSubscriptionSubscriberSourceUrl,
+} from '../schema/mikan';
 import type { SubscriptionInsertForm } from '../schema/subscriptions';
 import { MikanService } from './mikan.service';
 
@@ -26,4 +35,28 @@ export class SubscriptionService {
     }
     return form;
   }
+
+  extractSourceUrlMeta(
+    category: SubscriptionCategoryEnum,
+    sourceUrl: string
+  ):
+    | MikanSubscriptionSeasonSourceUrl
+    | MikanSubscriptionBangumiSourceUrl
+    | MikanSubscriptionSubscriberSourceUrl
+    | null {
+    let meta:
+      | MikanSubscriptionSeasonSourceUrl
+      | MikanSubscriptionBangumiSourceUrl
+      | MikanSubscriptionSubscriberSourceUrl
+      | null
+      | ArkErrors = null;
+    if (category === SubscriptionCategoryEnum.MikanSeason) {
+      meta = extractMikanSubscriptionSeasonSourceUrl(sourceUrl);
+    } else if (category === SubscriptionCategoryEnum.MikanBangumi) {
+      meta = extractMikanSubscriptionBangumiSourceUrl(sourceUrl);
+    } else if (category === SubscriptionCategoryEnum.MikanSubscriber) {
+      meta = extractMikanSubscriptionSubscriberSourceUrl(sourceUrl);
+    }
+    return meta instanceof ArkErrors ? null : meta;
+  }
 }

apps/webui/src/infra/graphql/gql/gql.ts

@@ -23,7 +23,7 @@ type Documents = {
     "\n    mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $data) {\n            id\n            createdAt\n            updatedAt\n            displayName\n            category\n            sourceUrl\n            enabled\n            credentialId\n        }\n    }\n": typeof types.InsertSubscriptionDocument,
     "\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n": typeof types.UpdateSubscriptionsDocument,
     "\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n": typeof types.DeleteSubscriptionsDocument,
-    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": typeof types.GetSubscriptionDetailDocument,
+    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n         username\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": typeof types.GetSubscriptionDetailDocument,
 };
 const documents: Documents = {
     "\n  query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n    credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n      nodes {\n        id\n        cookies\n        username\n        password\n        userAgent\n        createdAt\n        updatedAt\n        credentialType\n      }\n      paginationInfo {\n        total\n        pages\n      }\n    }\n  }\n": types.GetCredential3rdDocument,
@@ -35,7 +35,7 @@ const documents: Documents = {
     "\n    mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n        subscriptionsCreateOne(data: $data) {\n            id\n            createdAt\n            updatedAt\n            displayName\n            category\n            sourceUrl\n            enabled\n            credentialId\n        }\n    }\n": types.InsertSubscriptionDocument,
     "\n    mutation UpdateSubscriptions(\n    $data: SubscriptionsUpdateInput!,\n    $filters: SubscriptionsFilterInput!,\n    ) {\n    subscriptionsUpdate (\n        data: $data\n        filter: $filters\n    ) {\n        id\n        createdAt\n        updatedAt\n        displayName\n        category\n        sourceUrl\n        enabled\n    }\n}\n": types.UpdateSubscriptionsDocument,
     "\n    mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n        subscriptionsDelete(filter: $filters)\n    }\n": types.DeleteSubscriptionsDocument,
-    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": types.GetSubscriptionDetailDocument,
+    "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n         username\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n": types.GetSubscriptionDetailDocument,
 };
 
 /**
@@ -91,7 +91,7 @@ export function gql(source: "\n    mutation DeleteSubscriptions($filters: Subscr
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n"): (typeof documents)["\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n"];
+export function gql(source: "\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n         username\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n"): (typeof documents)["\nquery GetSubscriptionDetail ($id: Int!) {\n  subscriptions(filters: { id: {\n    eq: $id\n  } }) {\n    nodes {\n      id\n      displayName\n      createdAt\n      updatedAt\n      category\n      sourceUrl\n      enabled\n      credential3rd {\n         id\n         username\n      }\n      bangumi {\n        nodes {\n          createdAt\n          updatedAt\n          id\n          mikanBangumiId\n          displayName\n          rawName\n          season\n          seasonRaw\n          fansub\n          mikanFansubId\n          rssLink\n          posterLink\n          savePath\n          homepage\n        }\n      }\n    }\n  }\n}\n"];
 
 export function gql(source: string) {
   return (documents as any)[source] ?? {};

apps/webui/src/infra/graphql/gql/graphql.ts

@@ -1714,7 +1714,7 @@ export type GetSubscriptionDetailQueryVariables = Exact<{
 }>;
 
 
-export type GetSubscriptionDetailQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, displayName: string, createdAt: string, updatedAt: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, credential3rd?: { __typename?: 'Credential3rd', id: number } | null, bangumi: { __typename?: 'BangumiConnection', nodes: Array<{ __typename?: 'Bangumi', createdAt: string, updatedAt: string, id: number, mikanBangumiId?: string | null, displayName: string, rawName: string, season: number, seasonRaw?: string | null, fansub?: string | null, mikanFansubId?: string | null, rssLink?: string | null, posterLink?: string | null, savePath?: string | null, homepage?: string | null }> } }> } };
+export type GetSubscriptionDetailQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, displayName: string, createdAt: string, updatedAt: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, credential3rd?: { __typename?: 'Credential3rd', id: number, username?: string | null } | null, bangumi: { __typename?: 'BangumiConnection', nodes: Array<{ __typename?: 'Bangumi', createdAt: string, updatedAt: string, id: number, mikanBangumiId?: string | null, displayName: string, rawName: string, season: number, seasonRaw?: string | null, fansub?: string | null, mikanFansubId?: string | null, rssLink?: string | null, posterLink?: string | null, savePath?: string | null, homepage?: string | null }> } }> } };
 
 
 export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdOrderInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"paginationInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"pages"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdQuery, GetCredential3rdQueryVariables>;
@@ -1726,4 +1726,4 @@ export const GetSubscriptionsDocument = {"kind":"Document","definitions":[{"kind
 export const InsertSubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InsertSubscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"credentialId"}}]}}]}}]} as unknown as DocumentNode<InsertSubscriptionMutation, InsertSubscriptionMutationVariables>;
 export const UpdateSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}}]}}]} as unknown as DocumentNode<UpdateSubscriptionsMutation, UpdateSubscriptionsMutationVariables>;
 export const DeleteSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteSubscriptionsMutation, DeleteSubscriptionsMutationVariables>;
-export const GetSubscriptionDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptionDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"bangumi"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mikanBangumiId"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"rawName"}},{"kind":"Field","name":{"kind":"Name","value":"season"}},{"kind":"Field","name":{"kind":"Name","value":"seasonRaw"}},{"kind":"Field","name":{"kind":"Name","value":"fansub"}},{"kind":"Field","name":{"kind":"Name","value":"mikanFansubId"}},{"kind":"Field","name":{"kind":"Name","value":"rssLink"}},{"kind":"Field","name":{"kind":"Name","value":"posterLink"}},{"kind":"Field","name":{"kind":"Name","value":"savePath"}},{"kind":"Field","name":{"kind":"Name","value":"homepage"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionDetailQuery, GetSubscriptionDetailQueryVariables>;
+export const GetSubscriptionDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptionDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"Field","name":{"kind":"Name","value":"bangumi"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mikanBangumiId"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"rawName"}},{"kind":"Field","name":{"kind":"Name","value":"season"}},{"kind":"Field","name":{"kind":"Name","value":"seasonRaw"}},{"kind":"Field","name":{"kind":"Name","value":"fansub"}},{"kind":"Field","name":{"kind":"Name","value":"mikanFansubId"}},{"kind":"Field","name":{"kind":"Name","value":"rssLink"}},{"kind":"Field","name":{"kind":"Name","value":"posterLink"}},{"kind":"Field","name":{"kind":"Name","value":"savePath"}},{"kind":"Field","name":{"kind":"Name","value":"homepage"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionDetailQuery, GetSubscriptionDetailQueryVariables>;

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

@@ -104,7 +104,8 @@ function CredentialCreateRouteComponent() {
       userAgent: '',
     },
     validators: {
-      onBlur: Credential3rdInsertSchema,
+      onChangeAsync: Credential3rdInsertSchema,
+      onChangeAsyncDebounceMs: 300,
       onSubmit: Credential3rdInsertSchema,
     },
     onSubmit: async (form) => {

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

@@ -125,9 +125,7 @@ function Credential3rdDetailRouteComponent() {
                 View credential detail
               </CardDescription>
             </div>
-            <Badge variant="secondary" className="capitalize">
+            <Badge variant="secondary">{credential.credentialType}</Badge>
-              {credential.credentialType}
-            </Badge>
           </div>
         </CardHeader>
         <CardContent>
@@ -143,9 +141,7 @@ function Credential3rdDetailRouteComponent() {
               <div className="space-y-2">
                 <Label className="font-medium text-sm">Credential type</Label>
                 <div className="rounded-md bg-muted p-3">
-                  <Badge variant="secondary" className="capitalize">
+                  <Badge variant="secondary">{credential.credentialType}</Badge>
-                    {credential.credentialType}
-                  </Badge>
                 </div>
               </div>
 

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

@@ -1,36 +1,346 @@
-import type { GetSubscriptionDetailQuery } from '@/infra/graphql/gql/graphql';
+import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { DetailEmptyView } from '@/components/ui/detail-empty-view';
+import { Label } from '@/components/ui/label';
+import { QueryErrorView } from '@/components/ui/query-error-view';
+import { Separator } from '@/components/ui/separator';
+import { GET_SUBSCRIPTION_DETAIL } from '@/domains/recorder/schema/subscriptions';
+import { SubscriptionService } from '@/domains/recorder/services/subscription.service';
+import { useInject } from '@/infra/di/inject';
+import {
+  type GetSubscriptionDetailQuery,
+  SubscriptionCategoryEnum,
+} from '@/infra/graphql/gql/graphql';
 import { useQuery } from '@apollo/client';
-import { createFileRoute } from '@tanstack/react-router';
+import {
-import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/schema/subscriptions.js';
+  createFileRoute,
+  useCanGoBack,
+  useNavigate,
+  useRouter,
+} from '@tanstack/react-router';
+import { format } from 'date-fns';
+import { ArrowLeft, Edit, ExternalLink } from 'lucide-react';
+import { useMemo } from 'react';
 
 export const Route = createFileRoute('/_app/subscriptions/detail/$id')({
-  component: DetailRouteComponent,
+  component: SubscriptionDetailRouteComponent,
 });
 
-function DetailRouteComponent() {
+function SubscriptionDetailRouteComponent() {
   const { id } = Route.useParams();
+  const navigate = useNavigate();
+  const router = useRouter();
+  const canGoBack = useCanGoBack();
+  const subscriptionService = useInject(SubscriptionService);
+
+  const handleBack = () => {
+    if (canGoBack) {
+      router.history.back();
+    } else {
+      navigate({
+        to: '/subscriptions/manage',
+      });
+    }
+  };
+
   const { data, loading, error } = useQuery<GetSubscriptionDetailQuery>(
     GET_SUBSCRIPTION_DETAIL,
     {
       variables: {
         id: Number.parseInt(id),
       },
+      fetchPolicy: 'cache-and-network',
     }
   );
 
+  const handleEnterEditMode = () => {
+    navigate({
+      to: '/subscriptions/edit/$id',
+      params: {
+        id,
+      },
+    });
+  };
+  const subscription = data?.subscriptions?.nodes?.[0];
+
+  const sourceUrlMeta = useMemo(
+    () =>
+      subscription
+        ? subscriptionService.extractSourceUrlMeta(
+            subscription?.category,
+            subscription?.sourceUrl
+          )
+        : null,
+    [
+      subscription,
+      subscription?.category,
+      subscription?.sourceUrl,
+      subscriptionService.extractSourceUrlMeta,
+    ]
+  );
+
   if (loading) {
-    return <div>Loading...</div>;
+    return <DetailCardSkeleton />;
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <QueryErrorView message={error.message} />;
   }
 
-  const detail = data?.subscriptions?.nodes?.[0];
+  if (!subscription) {
+    return <DetailEmptyView message="Not found certain subscription" />;
+  }
 
   return (
-    <div
+    <div className="container mx-auto max-w-4xl py-6">
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(detail, null, 2) }}
+      <div className="mb-6 flex items-center justify-between">
-    />
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            className="h-8 w-8 p-0"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="font-bold text-2xl">Subscription detail</h1>
+            <p className="mt-1 text-muted-foreground">
+              View subscription #{subscription.id}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button onClick={handleEnterEditMode}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </Button>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Subscription information</CardTitle>
+              <CardDescription className="mt-2">
+                View subscription detail
+              </CardDescription>
+            </div>
+            <div className="flex gap-2">
+              <Badge variant={subscription.enabled ? 'default' : 'secondary'}>
+                {subscription.enabled ? 'Enabled' : 'Disabled'}
+              </Badge>
+              <Badge variant="outline">{subscription.category}</Badge>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">ID</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <code className="text-sm">{subscription.id}</code>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Category</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <Badge variant="outline">{subscription.category}</Badge>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Display Name</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <span className="text-sm">
+                    {subscription.displayName || 'Not set'}
+                  </span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Enabled</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <Badge
+                    variant={subscription.enabled ? 'default' : 'secondary'}
+                  >
+                    {subscription.enabled ? 'Enabled' : 'Disabled'}
+                  </Badge>
+                </div>
+              </div>
+
+              {subscription.credential3rd && (
+                <>
+                  <div className="space-y-2">
+                    <Label className="font-medium text-sm">Credential ID</Label>
+                    <div className="rounded-md bg-muted p-3">
+                      <code className="text-sm">
+                        {subscription.credential3rd.id}
+                      </code>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label className="font-medium text-sm">
+                      Credential Username
+                    </Label>
+                    <div className="rounded-md bg-muted p-3">
+                      <code className="text-sm">
+                        {subscription.credential3rd.username}
+                      </code>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+            <Separator />
+            <div className="space-y-2">
+              <Label className="font-medium text-sm">Source URL</Label>
+              <div className="flex items-center justify-between rounded-md bg-muted p-3">
+                <span className="break-all text-sm">
+                  {subscription.sourceUrl || '-'}
+                </span>
+                {subscription.sourceUrl && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="ml-2 h-6 w-6 p-0"
+                    onClick={() =>
+                      window.open(subscription.sourceUrl, '_blank')
+                    }
+                  >
+                    <ExternalLink className="h-3 w-3" />
+                  </Button>
+                )}
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              {sourceUrlMeta?.category ===
+                SubscriptionCategoryEnum.MikanSeason && (
+                <>
+                  <div className="space-y-2">
+                    <Label className="font-medium text-sm">Year</Label>
+                    <div className="rounded-md bg-muted p-3">
+                      <code className="text-sm">{sourceUrlMeta.year}</code>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label className="font-medium text-sm">Season</Label>
+                    <div className="rounded-md bg-muted p-3">
+                      <code className="text-sm">{sourceUrlMeta.seasonStr}</code>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+            <Separator />
+
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Created at</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <span className="text-sm">
+                    {format(
+                      new Date(subscription.createdAt),
+                      'yyyy-MM-dd HH:mm:ss'
+                    )}
+                  </span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="font-medium text-sm">Updated at</Label>
+                <div className="rounded-md bg-muted p-3">
+                  <span className="text-sm">
+                    {format(
+                      new Date(subscription.updatedAt),
+                      'yyyy-MM-dd HH:mm:ss'
+                    )}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {subscription.bangumi?.nodes &&
+              subscription.bangumi.nodes.length > 0 && (
+                <>
+                  <Separator />
+                  <div className="space-y-4">
+                    <Label className="font-medium text-sm">
+                      Associated Bangumi
+                    </Label>
+                    <div className="space-y-3">
+                      {subscription.bangumi.nodes.map((bangumi) => (
+                        <Card key={bangumi.id} className="p-4">
+                          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                            <div className="space-y-2">
+                              <Label className="font-medium text-muted-foreground text-xs">
+                                Display Name
+                              </Label>
+                              <div className="text-sm">
+                                {bangumi.displayName}
+                              </div>
+                            </div>
+                            <div className="space-y-2">
+                              <Label className="font-medium text-muted-foreground text-xs">
+                                Season
+                              </Label>
+                              <div className="text-sm">
+                                {bangumi.season || '-'}
+                              </div>
+                            </div>
+                            <div className="space-y-2">
+                              <Label className="font-medium text-muted-foreground text-xs">
+                                Fansub
+                              </Label>
+                              <div className="text-sm">
+                                {bangumi.fansub || '-'}
+                              </div>
+                            </div>
+                            <div className="space-y-2">
+                              <Label className="font-medium text-muted-foreground text-xs">
+                                Save Path
+                              </Label>
+                              <div className="font-mono text-sm">
+                                {bangumi.savePath || '-'}
+                              </div>
+                            </div>
+                          </div>
+                          {bangumi.homepage && (
+                            <div className="mt-3 border-t pt-3">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() =>
+                                  window.open(bangumi.homepage!, '_blank')
+                                }
+                              >
+                                <ExternalLink className="mr-2 h-3 w-3" />
+                                Homepage
+                              </Button>
+                            </div>
+                          )}
+                        </Card>
+                      ))}
+                    </div>
+                  </div>
+                </>
+              )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 }

apps/webui/src/presentation/routes/_app/subscriptions/edit.$id.tsx

@@ -1,14 +1,414 @@
+import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { DetailEmptyView } from '@/components/ui/detail-empty-view';
+import { FormFieldErrors } from '@/components/ui/form-field-errors';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { QueryErrorView } from '@/components/ui/query-error-view';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useAppForm } from '@/components/ui/tanstack-form';
+import { MikanSeasonEnum } from '@/domains/recorder/schema/mikan';
+import {
+  GET_SUBSCRIPTION_DETAIL,
+  type SubscriptionInsertForm,
+  SubscriptionInsertFormSchema,
+  UPDATE_SUBSCRIPTIONS,
+} from '@/domains/recorder/schema/subscriptions';
+import { SubscriptionService } from '@/domains/recorder/services/subscription.service';
+import { useInject } from '@/infra/di/inject';
+import {
+  Credential3rdTypeEnum,
+  type GetSubscriptionDetailQuery,
+  SubscriptionCategoryEnum,
+  type UpdateSubscriptionsMutation,
+  type UpdateSubscriptionsMutationVariables,
+} from '@/infra/graphql/gql/graphql';
 import type { RouteStateDataOption } from '@/infra/routes/traits';
-import { createFileRoute } from '@tanstack/react-router';
+import { useMutation, useQuery } from '@apollo/client';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { ArrowLeft, Save, X } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { toast } from 'sonner';
+import { Credential3rdSelectContent } from './-credential3rd-select';
 
 export const Route = createFileRoute('/_app/subscriptions/edit/$id')({
-  component: RouteComponent,
+  component: SubscriptionEditRouteComponent,
   staticData: {
     breadcrumb: { label: 'Edit' },
   } satisfies RouteStateDataOption,
 });
 
-function RouteComponent() {
+type SubscriptionDetailDto = NonNullable<
-  const { id } = Route.useParams();
+  GetSubscriptionDetailQuery['subscriptions']['nodes'][0]
-  return <div>Hello "/subscriptions/edit/$id"!</div>;
+>;
+
+function FormView({
+  subscription,
+  onCompleted,
+}: {
+  subscription: SubscriptionDetailDto;
+  onCompleted: VoidFunction;
+}) {
+  const navigate = useNavigate();
+  const subscriptionService = useInject(SubscriptionService);
+
+  const handleBack = () => {
+    navigate({
+      to: '/subscriptions/detail/$id',
+      params: { id: subscription.id.toString() },
+    });
+  };
+
+  const [updateSubscription, { loading: updating }] = useMutation<
+    UpdateSubscriptionsMutation,
+    UpdateSubscriptionsMutationVariables
+  >(UPDATE_SUBSCRIPTIONS, {
+    onCompleted,
+    onError: (error) => {
+      toast.error('Update subscription failed', {
+        description: error.message,
+      });
+    },
+  });
+
+  // Extract source URL metadata for form initialization
+  const sourceUrlMeta = useMemo(
+    () =>
+      subscriptionService.extractSourceUrlMeta(
+        subscription.category,
+        subscription.sourceUrl
+      ),
+    [subscription.category, subscription.sourceUrl, subscriptionService]
+  );
+
+  // Initialize form with current subscription data
+  const defaultValues = useMemo(() => {
+    const base = {
+      displayName: subscription.displayName,
+      category: subscription.category,
+      enabled: subscription.enabled,
+      sourceUrl: subscription.sourceUrl,
+      credentialId: subscription.credential3rd?.id || '',
+    };
+
+    if (
+      subscription.category === SubscriptionCategoryEnum.MikanSeason &&
+      sourceUrlMeta?.category === SubscriptionCategoryEnum.MikanSeason
+    ) {
+      return {
+        ...base,
+        year: sourceUrlMeta.year,
+        seasonStr: sourceUrlMeta.seasonStr,
+      };
+    }
+
+    return base;
+  }, [subscription, sourceUrlMeta]);
+
+  const form = useAppForm({
+    defaultValues: defaultValues as unknown as SubscriptionInsertForm,
+    validators: {
+      onChangeAsync: SubscriptionInsertFormSchema,
+      onChangeAsyncDebounceMs: 300,
+      onSubmit: SubscriptionInsertFormSchema,
+    },
+    onSubmit: async (form) => {
+      const input = subscriptionService.transformInsertFormToInput(form.value);
+
+      await updateSubscription({
+        variables: {
+          data: input,
+          filters: {
+            id: {
+              eq: subscription.id,
+            },
+          },
+        },
+      });
+    },
+  });
+
+  return (
+    <div className="container mx-auto max-w-4xl py-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            className="h-8 w-8 p-0"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="font-bold text-2xl">Subscription edit</h1>
+            <p className="mt-1 text-muted-foreground">
+              Edit subscription #{subscription.id}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={handleBack} disabled={updating}>
+            <X className="mr-2 h-4 w-4" />
+            Cancel
+          </Button>
+          <Button onClick={() => form.handleSubmit()} disabled={updating}>
+            <Save className="mr-2 h-4 w-4" />
+            {updating ? 'Saving...' : 'Save'}
+          </Button>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Subscription information</CardTitle>
+              <CardDescription className="mt-2">
+                Edit subscription information
+              </CardDescription>
+            </div>
+            <Badge variant="outline">{subscription.category}</Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit();
+            }}
+            className="space-y-6"
+          >
+            <form.Field name="displayName">
+              {(field) => (
+                <div className="space-y-2">
+                  <Label htmlFor={field.name}>Display Name *</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 display name"
+                    autoComplete="off"
+                  />
+                  {field.state.meta.errors && (
+                    <FormFieldErrors
+                      errors={field.state.meta.errors}
+                      isDirty={field.state.meta.isDirty}
+                      submissionAttempts={form.state.submissionAttempts}
+                    />
+                  )}
+                </div>
+              )}
+            </form.Field>
+
+            {/* Category is read-only in edit mode */}
+            <div className="space-y-2">
+              <Label>Category</Label>
+              <div className="rounded-md bg-muted p-3">
+                <Badge variant="outline">{subscription.category}</Badge>
+              </div>
+            </div>
+
+            {/* Conditional fields based on category */}
+            {subscription.category === SubscriptionCategoryEnum.MikanSeason ? (
+              <>
+                <form.Field name="credentialId">
+                  {(field) => (
+                    <div className="space-y-2">
+                      <Label htmlFor={field.name}>Credential ID *</Label>
+                      <Select
+                        value={field.state.value.toString()}
+                        onValueChange={(value) =>
+                          field.handleChange(Number.parseInt(value))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select credential" />
+                        </SelectTrigger>
+                        <Credential3rdSelectContent
+                          credentialType={Credential3rdTypeEnum.Mikan}
+                        />
+                      </Select>
+                      {field.state.meta.errors && (
+                        <FormFieldErrors
+                          errors={field.state.meta.errors}
+                          isDirty={field.state.meta.isDirty}
+                          submissionAttempts={form.state.submissionAttempts}
+                        />
+                      )}
+                    </div>
+                  )}
+                </form.Field>
+                <form.Field name="year">
+                  {(field) => (
+                    <div className="space-y-2">
+                      <Label htmlFor={field.name}>Year *</Label>
+                      <Input
+                        id={field.name}
+                        name={field.name}
+                        value={field.state.value}
+                        type="number"
+                        min={1970}
+                        onBlur={field.handleBlur}
+                        onChange={(e) =>
+                          field.handleChange(Number.parseInt(e.target.value))
+                        }
+                        placeholder={`Please enter full year (e.g. ${new Date().getFullYear()})`}
+                        autoComplete="off"
+                      />
+                      {field.state.meta.errors && (
+                        <FormFieldErrors
+                          errors={field.state.meta.errors}
+                          isDirty={field.state.meta.isDirty}
+                          submissionAttempts={form.state.submissionAttempts}
+                        />
+                      )}
+                    </div>
+                  )}
+                </form.Field>
+                <form.Field name="seasonStr">
+                  {(field) => (
+                    <div className="space-y-2">
+                      <Label htmlFor={field.name}>Season *</Label>
+                      <Select
+                        value={field.state.value}
+                        onValueChange={(value) =>
+                          field.handleChange(value as MikanSeasonEnum)
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select season" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value={MikanSeasonEnum.Spring}>
+                            Spring
+                          </SelectItem>
+                          <SelectItem value={MikanSeasonEnum.Summer}>
+                            Summer
+                          </SelectItem>
+                          <SelectItem value={MikanSeasonEnum.Autumn}>
+                            Autumn
+                          </SelectItem>
+                          <SelectItem value={MikanSeasonEnum.Winter}>
+                            Winter
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {field.state.meta.errors && (
+                        <FormFieldErrors
+                          errors={field.state.meta.errors}
+                          isDirty={field.state.meta.isDirty}
+                          submissionAttempts={form.state.submissionAttempts}
+                        />
+                      )}
+                    </div>
+                  )}
+                </form.Field>
+              </>
+            ) : (
+              <form.Field name="sourceUrl">
+                {(field) => (
+                  <div className="space-y-2">
+                    <Label htmlFor={field.name}>Source URL *</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 source URL"
+                      autoComplete="off"
+                    />
+                    {field.state.meta.errors && (
+                      <FormFieldErrors
+                        errors={field.state.meta.errors}
+                        isDirty={field.state.meta.isDirty}
+                        submissionAttempts={form.state.submissionAttempts}
+                      />
+                    )}
+                  </div>
+                )}
+              </form.Field>
+            )}
+
+            <form.Field name="enabled">
+              {(field) => (
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor={field.name}>Enabled</Label>
+                    <div className="text-muted-foreground text-sm">
+                      Enable this subscription
+                    </div>
+                  </div>
+                  <Switch
+                    id={field.name}
+                    checked={field.state.value}
+                    onCheckedChange={(checked) => field.handleChange(checked)}
+                  />
+                </div>
+              )}
+            </form.Field>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function SubscriptionEditRouteComponent() {
+  const { id } = Route.useParams();
+
+  const { loading, error, data, refetch } =
+    useQuery<GetSubscriptionDetailQuery>(GET_SUBSCRIPTION_DETAIL, {
+      variables: {
+        id: Number.parseInt(id),
+      },
+      fetchPolicy: 'cache-and-network',
+    });
+
+  const subscription = data?.subscriptions?.nodes?.[0];
+
+  const onCompleted = useCallback(async () => {
+    const refetchResult = await refetch();
+    if (refetchResult.errors) {
+      toast.error('Update subscription failed', {
+        description: refetchResult.errors[0].message,
+      });
+    } else {
+      toast.success('Update subscription successfully');
+    }
+  }, [refetch]);
+
+  if (loading) {
+    return <DetailCardSkeleton />;
+  }
+
+  if (error) {
+    return <QueryErrorView message={error.message} />;
+  }
+
+  if (!subscription) {
+    return <DetailEmptyView message="Not found certain subscription" />;
+  }
+
+  return <FormView subscription={subscription} onCompleted={onCompleted} />;
 }

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

@@ -72,7 +72,7 @@ function SubscriptionManageRouteComponent() {
       variables: {
         pagination: {
           page: {
-            page: pagination.pageIndex + 1,
+            page: pagination.pageIndex,
             limit: pagination.pageSize,
           },
         },