refactor: Enhance FailedImportJobs component with improved state management and UI updates

package-lock.json

@@ -40,6 +40,7 @@
 				"zod": "^4.1.12"
 			},
 			"devDependencies": {
+				"@biomejs/biome": "2.4.9",
 				"@eslint/js": "^9.36.0",
 				"@types/node": "^24.9.2",
 				"@types/react": "^19.1.16",
@@ -432,6 +433,169 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@biomejs/biome": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.9.tgz",
+			"integrity": "sha512-wvZW92FrwitTcacvCBT8xdAbfbxWfDLwjYMmU3djjqQTh7Ni4ZdiWIT/x5VcZ+RQuxiKzIOzi5D+dcyJDFZMsA==",
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"bin": {
+				"biome": "bin/biome"
+			},
+			"engines": {
+				"node": ">=14.21.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/biome"
+			},
+			"optionalDependencies": {
+				"@biomejs/cli-darwin-arm64": "2.4.9",
+				"@biomejs/cli-darwin-x64": "2.4.9",
+				"@biomejs/cli-linux-arm64": "2.4.9",
+				"@biomejs/cli-linux-arm64-musl": "2.4.9",
+				"@biomejs/cli-linux-x64": "2.4.9",
+				"@biomejs/cli-linux-x64-musl": "2.4.9",
+				"@biomejs/cli-win32-arm64": "2.4.9",
+				"@biomejs/cli-win32-x64": "2.4.9"
+			}
+		},
+		"node_modules/@biomejs/cli-darwin-arm64": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.9.tgz",
+			"integrity": "sha512-d5G8Gf2RpH5pYwiHLPA+UpG3G9TLQu4WM+VK6sfL7K68AmhcEQ9r+nkj/DvR/GYhYox6twsHUtmWWWIKfcfQQA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-darwin-x64": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.9.tgz",
+			"integrity": "sha512-LNCLNgqDMG7BLdc3a8aY/dwKPK7+R8/JXJoXjCvZh2gx8KseqBdFDKbhrr7HCWF8SzNhbTaALhTBoh/I6rf9lA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-arm64": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.9.tgz",
+			"integrity": "sha512-4adnkAUi6K4C/emPRgYznMOcLlUqZdXWM6aIui4VP4LraE764g6Q4YguygnAUoxKjKIXIWPteKMgRbN0wsgwcg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-arm64-musl": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.9.tgz",
+			"integrity": "sha512-8RCww5xnPn2wpK4L/QDGDOW0dq80uVWfppPxHIUg6mOs9B6gRmqPp32h1Ls3T8GnW8Wo5A8u7vpTwz4fExN+sw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-x64": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.9.tgz",
+			"integrity": "sha512-L10na7POF0Ks/cgLFNF1ZvIe+X4onLkTi5oP9hY+Rh60Q+7fWzKDDCeGyiHUFf1nGIa9dQOOUPGe2MyYg8nMSQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-x64-musl": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.9.tgz",
+			"integrity": "sha512-5TD+WS9v5vzXKzjetF0hgoaNFHMcpQeBUwKKVi3JbG1e9UCrFuUK3Gt185fyTzvRdwYkJJEMqglRPjmesmVv4A==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-win32-arm64": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.9.tgz",
+			"integrity": "sha512-aDZr0RBC3sMGJOU10BvG7eZIlWLK/i51HRIfScE2lVhfts2dQTreowLiJJd+UYg/tHKxS470IbzpuKmd0MiD6g==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-win32-x64": {
+			"version": "2.4.9",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.9.tgz",
+			"integrity": "sha512-NS4g/2G9SoQ4ktKtz31pvyc/rmgzlcIDCGU/zWbmHJAqx6gcRj2gj5Q/guXhoWTzCUaQZDIqiCQXHS7BcGYc0w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
 		"node_modules/@commander-js/extra-typings": {
 			"version": "14.0.0",
 			"resolved": "https://registry.npmjs.org/@commander-js/extra-typings/-/extra-typings-14.0.0.tgz",

package.json

@@ -42,6 +42,7 @@
 		"zod": "^4.1.12"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "2.4.9",
 		"@eslint/js": "^9.36.0",
 		"@types/node": "^24.9.2",
 		"@types/react": "^19.1.16",

src/api/generated/api.schemas.ts

@@ -145,9 +145,9 @@ export interface MangaContentImagesDTO {
   contentImageKeys: string[];
 }
 
-export interface DefaultResponseDTOListMangaImportJobDTO {
+export interface DefaultResponseDTOMangaImportJobPageResponseDTO {
   timestamp?: string;
-  data?: MangaImportJobDTO[];
+  data?: MangaImportJobPageResponseDTO;
   message?: string;
 }
 
@@ -175,6 +175,44 @@ export interface MangaImportJobDTO {
   errorStackTrace?: string;
 }
 
+export interface MangaImportJobPageResponseDTO {
+  page?: PageMangaImportJobDTO;
+  totalJobs?: number;
+  pendingJobs?: number;
+  processingJobs?: number;
+  completedJobs?: number;
+  failedJobs?: number;
+}
+
+export interface PageMangaImportJobDTO {
+  totalPages?: number;
+  totalElements?: number;
+  size?: number;
+  content?: MangaImportJobDTO[];
+  number?: number;
+  pageable?: PageableObject;
+  numberOfElements?: number;
+  sort?: SortObject;
+  first?: boolean;
+  last?: boolean;
+  empty?: boolean;
+}
+
+export interface PageableObject {
+  offset?: number;
+  pageNumber?: number;
+  pageSize?: number;
+  paged?: boolean;
+  unpaged?: boolean;
+  sort?: SortObject;
+}
+
+export interface SortObject {
+  empty?: boolean;
+  sorted?: boolean;
+  unsorted?: boolean;
+}
+
 export interface DefaultResponseDTOPageMangaListDTO {
   timestamp?: string;
   data?: PageMangaListDTO;
@@ -222,21 +260,6 @@ export interface PageMangaListDTO {
   empty?: boolean;
 }
 
-export interface PageableObject {
-  offset?: number;
-  pageNumber?: number;
-  pageSize?: number;
-  paged?: boolean;
-  unpaged?: boolean;
-  sort?: SortObject;
-}
-
-export interface SortObject {
-  empty?: boolean;
-  sorted?: boolean;
-  unsorted?: boolean;
-}
-
 export interface DefaultResponseDTOMangaDTO {
   timestamp?: string;
   data?: MangaDTO;
@@ -337,6 +360,36 @@ export type GetContentProvidersParams = {
 manualImport?: boolean;
 };
 
+export type GetMangaImportJobsParams = {
+searchQuery?: string;
+status?: GetMangaImportJobsStatus;
+/**
+ * Zero-based page index (0..N)
+ * @minimum 0
+ */
+page?: number;
+/**
+ * The size of the page to be returned
+ * @minimum 1
+ */
+size?: number;
+/**
+ * Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported.
+ */
+sort?: string[];
+};
+
+export type GetMangaImportJobsStatus = typeof GetMangaImportJobsStatus[keyof typeof GetMangaImportJobsStatus];
+
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const GetMangaImportJobsStatus = {
+  PENDING: 'PENDING',
+  PROCESSING: 'PROCESSING',
+  SUCCESS: 'SUCCESS',
+  FAILED: 'FAILED',
+} as const;
+
 export type GetMangasParams = {
 searchQuery?: string;
 genreIds?: number[];

src/api/generated/content/content.ts

@@ -25,12 +25,13 @@ import type {
 
 import type {
   DefaultResponseDTOListMangaContentDTO,
-  DefaultResponseDTOListMangaImportJobDTO,
   DefaultResponseDTOMangaContentImagesDTO,
+  DefaultResponseDTOMangaImportJobPageResponseDTO,
   DefaultResponseDTOPresignedImportResponseDTO,
   DefaultResponseDTOVoid,
   DownloadContentArchiveParams,
   FileImportRequestDTO,
+  GetMangaImportJobsParams,
   PresignedImportRequestDTO
 } from '../api.schemas';
 
@@ -434,17 +435,18 @@ export function useGetMangaContentImages<TData = Awaited<ReturnType<typeof getMa
 
 
 /**
- * Returns a list of manga import jobs.
+ * Returns a paginated list of manga import jobs with optional filters and global status counts.
- * @summary Get a list of manga import jobs
+ * @summary Get a paginated list of manga import jobs
  */
 export const getMangaImportJobs = (
-    
+    params?: GetMangaImportJobsParams,
  options?: SecondParameter<typeof customInstance>,signal?: AbortSignal
 ) => {
       
       
-      return customInstance<DefaultResponseDTOListMangaImportJobDTO>(
+      return customInstance<DefaultResponseDTOMangaImportJobPageResponseDTO>(
-      {url: `/content/import/jobs`, method: 'GET', signal
+      {url: `/content/import/jobs`, method: 'GET',
+        params, signal
     },
       options);
     }
@@ -452,23 +454,23 @@ export const getMangaImportJobs = (
 
 
 
-export const getGetMangaImportJobsQueryKey = () => {
+export const getGetMangaImportJobsQueryKey = (params?: GetMangaImportJobsParams,) => {
     return [
-    `/content/import/jobs`
+    `/content/import/jobs`, ...(params ? [params]: [])
     ] as const;
     }
 
     
-export const getGetMangaImportJobsQueryOptions = <TData = Awaited<ReturnType<typeof getMangaImportJobs>>, TError = unknown>( options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+export const getGetMangaImportJobsQueryOptions = <TData = Awaited<ReturnType<typeof getMangaImportJobs>>, TError = unknown>(params?: GetMangaImportJobsParams, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
 ) => {
 
 const {query: queryOptions, request: requestOptions} = options ?? {};
 
-  const queryKey =  queryOptions?.queryKey ?? getGetMangaImportJobsQueryKey();
+  const queryKey =  queryOptions?.queryKey ?? getGetMangaImportJobsQueryKey(params);
 
   
 
-    const queryFn: QueryFunction<Awaited<ReturnType<typeof getMangaImportJobs>>> = ({ signal }) => getMangaImportJobs(requestOptions, signal);
+    const queryFn: QueryFunction<Awaited<ReturnType<typeof getMangaImportJobs>>> = ({ signal }) => getMangaImportJobs(params, requestOptions, signal);
 
       
 
@@ -482,7 +484,7 @@ export type GetMangaImportJobsQueryError = unknown
 
 
 export function useGetMangaImportJobs<TData = Awaited<ReturnType<typeof getMangaImportJobs>>, TError = unknown>(
-  options: { query:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>> & Pick<
+ params: undefined |  GetMangaImportJobsParams, options: { query:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>> & Pick<
         DefinedInitialDataOptions<
           Awaited<ReturnType<typeof getMangaImportJobs>>,
           TError,
@@ -492,7 +494,7 @@ export function useGetMangaImportJobs<TData = Awaited<ReturnType<typeof getManga
  , queryClient?: QueryClient
   ):  DefinedUseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
 export function useGetMangaImportJobs<TData = Awaited<ReturnType<typeof getMangaImportJobs>>, TError = unknown>(
-  options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>> & Pick<
+ params?: GetMangaImportJobsParams, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>> & Pick<
         UndefinedInitialDataOptions<
           Awaited<ReturnType<typeof getMangaImportJobs>>,
           TError,
@@ -502,19 +504,19 @@ export function useGetMangaImportJobs<TData = Awaited<ReturnType<typeof getManga
  , queryClient?: QueryClient
   ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
 export function useGetMangaImportJobs<TData = Awaited<ReturnType<typeof getMangaImportJobs>>, TError = unknown>(
-  options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ params?: GetMangaImportJobsParams, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
  , queryClient?: QueryClient
   ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> }
 /**
- * @summary Get a list of manga import jobs
+ * @summary Get a paginated list of manga import jobs
  */
 
 export function useGetMangaImportJobs<TData = Awaited<ReturnType<typeof getMangaImportJobs>>, TError = unknown>(
-  options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
+ params?: GetMangaImportJobsParams, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getMangaImportJobs>>, TError, TData>>, request?: SecondParameter<typeof customInstance>}
  , queryClient?: QueryClient 
  ):  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {
 
-  const queryOptions = getGetMangaImportJobsQueryOptions(options)
+  const queryOptions = getGetMangaImportJobsQueryOptions(params,options)
 
   const query = useQuery(queryOptions, queryClient) as  UseQueryResult<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> };
 

src/components/ui/alert.tsx

@@ -63,4 +63,4 @@ function AlertDescription({
 	);
 }
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertDescription, AlertTitle };

src/components/ui/avatar.tsx

@@ -48,4 +48,4 @@ function AvatarFallback({
 	);
 }
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarFallback, AvatarImage };

src/components/ui/card.tsx

@@ -83,10 +83,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
 
 export {
 	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
 	CardAction,
-	CardDescription,
 	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
 };

src/components/ui/collapsible.tsx

@@ -28,4 +28,4 @@ function CollapsibleContent({
 	);
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

src/components/ui/dropdown-menu.tsx

@@ -238,18 +238,18 @@ function DropdownMenuSubContent({
 
 export {
 	DropdownMenu,
-	DropdownMenuPortal,
+	DropdownMenuCheckboxItem,
-	DropdownMenuTrigger,
 	DropdownMenuContent,
 	DropdownMenuGroup,
-	DropdownMenuLabel,
 	DropdownMenuItem,
-	DropdownMenuCheckboxItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
 	DropdownMenuRadioGroup,
 	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
 	DropdownMenuShortcut,
 	DropdownMenuSub,
-	DropdownMenuSubTrigger,
 	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
 };

src/components/ui/form.tsx

@@ -156,12 +156,12 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
 }
 
 export {
-	useFormField,
 	Form,
-	FormItem,
-	FormLabel,
 	FormControl,
 	FormDescription,
-	FormMessage,
 	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	useFormField,
 };

src/components/ui/progress.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui";
-import { Progress as ProgressPrimitive } from "radix-ui"
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Progress({
 	className,
@@ -13,7 +13,7 @@ function Progress({
 			data-slot="progress"
 			className={cn(
 				"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-        className
+				className,
 			)}
 			{...props}
 		>
@@ -23,7 +23,7 @@ function Progress({
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>
-  )
+	);
 }
 
-export { Progress }
+export { Progress };

src/components/ui/table.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
 	return (
@@ -14,7 +14,7 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
 				{...props}
 			/>
 		</div>
-  )
+	);
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
@@ -24,7 +24,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
 			className={cn("[&_tr]:border-b", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
@@ -34,7 +34,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
 			className={cn("[&_tr:last-child]:border-0", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
@@ -43,11 +43,11 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
 			data-slot="table-footer"
 			className={cn(
 				"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
@@ -56,11 +56,11 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
 			data-slot="table-row"
 			className={cn(
 				"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
@@ -69,11 +69,11 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
 			data-slot="table-head"
 			className={cn(
 				"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
@@ -82,11 +82,11 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
 			data-slot="table-cell"
 			className={cn(
 				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
+				className,
 			)}
 			{...props}
 		/>
-  )
+	);
 }
 
 function TableCaption({
@@ -99,16 +99,16 @@ function TableCaption({
 			className={cn("mt-4 text-sm text-muted-foreground", className)}
 			{...props}
 		/>
-  )
+	);
 }
 
 export {
 	Table,
-  TableHeader,
 	TableBody,
+	TableCaption,
+	TableCell,
 	TableFooter,
 	TableHead,
+	TableHeader,
 	TableRow,
-  TableCell,
+};
-  TableCaption,
-}

src/components/ui/tabs.tsx

@@ -61,4 +61,4 @@ function TabsContent({
 	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsContent, TabsList, TabsTrigger };

src/contexts/AuthContext.tsx

@@ -6,8 +6,8 @@ import {
 	useState,
 } from "react";
 import { toast } from "sonner";
-import {useRegisterUser} from "@/api/generated/user/user.ts";
 import { useLogin } from "@/api/generated/authentication/authentication.ts";
+import { useRegisterUser } from "@/api/generated/user/user.ts";
 
 export interface UserPreferences {
 	theme: "light" | "dark";

src/contexts/UIStateContext.tsx

@@ -1,6 +1,6 @@
 import {
-    type ReactNode,
 	createContext,
+	type ReactNode,
 	useCallback,
 	useContext,
 	useMemo,
@@ -58,8 +58,6 @@ export const UIStateProvider = ({ children }: { children: ReactNode }) => {
 		Record<string, number>
 	>({});
 
-
-
 	const resetFilters = useCallback(() => {
 		setCurrentPage(1);
 		setSelectedGenres([]);

src/features/admin/components/FailedImportJobs.tsx

@@ -1,31 +1,58 @@
-import {useGetMangaImportJobs} from "@/api/generated/content/content.ts";
+import { AlertTriangle, ExternalLink, FileText, Search } from "lucide-react";
-import type {MangaImportJobDTO, MangaImportJobDTOStatus} from "@/api/generated/api.schemas.ts";
-import { Badge } from "@/components/ui/badge";
-import {AlertTriangle, ExternalLink, FileText, RefreshCw} from "lucide-react";
-import {Card} from "@/components/ui/card.tsx";
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table.tsx";
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog.tsx";
 import { useState } from "react";
+import { useDebounce } from "use-debounce";
+import type {
+	MangaImportJobDTO,
+	MangaImportJobDTOStatus,
+} from "@/api/generated/api.schemas.ts";
+import { useGetMangaImportJobs } from "@/api/generated/content/content.ts";
+import { Pagination } from "@/components/Pagination.tsx";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button.tsx";
+import { Card } from "@/components/ui/card.tsx";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select.tsx";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table.tsx";
 
 export const FailedImportJobs = () => {
-    const {data} = useGetMangaImportJobs();
+	const [searchQueryText, setSearchQueryText] = useState("");
-    const importJobs = data?.data;
+	const [searchQuery] = useDebounce(searchQueryText, 500);
+	const [statusFilter, setStatusFilter] = useState<
+		MangaImportJobDTOStatus | undefined
+	>(undefined);
+	const [selectedJob, setSelectedJob] = useState<MangaImportJobDTO | null>(
+		null,
+	);
+	const [errorDialogOpen, setErrorDialogOpen] = useState(false);
+	const [currentPage, setCurrentPage] = useState(1);
 
-    // const [searchQuery, setSearchQuery] = useState("")
+	const { data } = useGetMangaImportJobs({
-    // const [statusFilter, setStatusFilter] = useState<ImportStatus | "ALL">("ALL")
+		status: statusFilter,
-    const [selectedJob, setSelectedJob] = useState<MangaImportJobDTO | null>(null)
+		searchQuery: searchQuery,
-    const [errorDialogOpen, setErrorDialogOpen] = useState(false)
+		page: currentPage - 1,
-
+		size: 12,
-    // const filteredJobs = jobs.filter((job) => {
+	});
-    //     const matchesSearch =
+	const importJobsData = data?.data;
-    //         job.filename.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    //         job.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    //         job.malId?.includes(searchQuery) ||
-    //         job.anilistId?.includes(searchQuery)
-    //     const matchesStatus = statusFilter === "ALL" || job.status === statusFilter
-    //     return matchesSearch && matchesStatus
-    // })
 
 	const formatDate = (dateString: string) => {
 		return new Date(dateString).toLocaleString("en-US", {
@@ -34,22 +61,34 @@ export const FailedImportJobs = () => {
 			day: "numeric",
 			hour: "2-digit",
 			minute: "2-digit",
-        })
+		});
-    }
+	};
 
 	const getStatusBadge = (job: MangaImportJobDTO) => {
-        const variants: Record<MangaImportJobDTOStatus, { variant: "default" | "secondary" | "destructive" | "outline"; className: string }> = {
+		const variants: Record<
-            PENDING: { variant: "secondary", className: "bg-muted text-muted-foreground" },
+			MangaImportJobDTOStatus,
+			{
+				variant: "default" | "secondary" | "destructive" | "outline";
+				className: string;
+			}
+		> = {
+			PENDING: {
+				variant: "secondary",
+				className: "bg-muted text-muted-foreground",
+			},
 			PROCESSING: { variant: "default", className: "bg-blue-500 text-white" },
 			SUCCESS: { variant: "default", className: "bg-green-500 text-white" },
-            FAILED: { variant: "destructive", className: "cursor-pointer hover:bg-destructive/80" },
+			FAILED: {
-        }
+				variant: "destructive",
+				className: "cursor-pointer hover:bg-destructive/80",
+			},
+		};
 
 		if (!job.status) {
 			return null;
 		}
 
-        const config = variants[job.status]
+		const config = variants[job.status];
 
 		if (job.status === "FAILED") {
 			return (
@@ -57,36 +96,25 @@ export const FailedImportJobs = () => {
 					variant={config.variant}
 					className={config.className}
 					onClick={() => {
-                        setSelectedJob(job)
+						setSelectedJob(job);
-                        setErrorDialogOpen(true)
+						setErrorDialogOpen(true);
 					}}
 				>
 					<AlertTriangle className="mr-1 h-3 w-3" />
 					{job.status}
 				</Badge>
-            )
+			);
 		}
 
 		return (
 			<Badge variant={config.variant} className={config.className}>
-                {job.status === "PROCESSING" && (
-                    <RefreshCw className="mr-1 h-3 w-3 animate-spin" />
-                )}
 				{job.status}
 			</Badge>
-        )
+		);
-    }
+	};
-
-    const stats = {
-        total: importJobs?.length,
-        pending: importJobs?.filter((j) => j.status === "PENDING").length,
-        processing: importJobs?.filter((j) => j.status === "PROCESSING").length,
-        completed: importJobs?.filter((j) => j.status === "SUCCESS").length,
-        failed: importJobs?.filter((j) => j.status === "FAILED").length,
-    }
 
 	return (
-        <div className="space-y-6">
+		<div className="space-y-5">
 			<div>
 				<h2 className="text-xl font-semibold text-foreground">
 					Manual Import Jobs
@@ -96,61 +124,72 @@ export const FailedImportJobs = () => {
 				</p>
 			</div>
 
-            {/* Stats */}
+			{importJobsData && (
 				<div className="grid grid-cols-2 gap-4 sm:grid-cols-5">
 					<Card className="p-4">
 						<p className="text-sm text-muted-foreground">Total Jobs</p>
-                    <p className="text-2xl font-bold text-foreground">{stats.total}</p>
+						<p className="text-2xl font-bold text-foreground">
+							{importJobsData.totalJobs}
+						</p>
 					</Card>
 					<Card className="p-4">
 						<p className="text-sm text-muted-foreground">Pending</p>
 						<p className="text-2xl font-bold text-muted-foreground">
-                        {stats.pending}
+							{importJobsData.pendingJobs}
 						</p>
 					</Card>
 					<Card className="p-4">
 						<p className="text-sm text-muted-foreground">Processing</p>
-                    <p className="text-2xl font-bold text-blue-500">{stats.processing}</p>
+						<p className="text-2xl font-bold text-blue-500">
+							{importJobsData.processingJobs}
+						</p>
 					</Card>
 					<Card className="p-4">
 						<p className="text-sm text-muted-foreground">Completed</p>
-                    <p className="text-2xl font-bold text-green-500">{stats.completed}</p>
+						<p className="text-2xl font-bold text-green-500">
+							{importJobsData.completedJobs}
+						</p>
 					</Card>
 					<Card className="p-4">
 						<p className="text-sm text-muted-foreground">Failed</p>
-                    <p className="text-2xl font-bold text-destructive">{stats.failed}</p>
+						<p className="text-2xl font-bold text-destructive">
+							{importJobsData.failedJobs}
+						</p>
 					</Card>
 				</div>
+			)}
 
-            {/* Filters */}
+			<div className="flex flex-wrap items-center gap-4">
-            {/*<div className="flex flex-wrap items-center gap-4">*/}
+				<div className="relative flex-1 min-w-[200px]">
-            {/*    <div className="relative flex-1 min-w-[200px]">*/}
+					<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            {/*        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />*/}
+					<Input
-            {/*        <Input*/}
+						placeholder="Search by ID, filename, MAL ID, or AniList ID..."
-            {/*            placeholder="Search by ID, filename, MAL ID, or AniList ID..."*/}
+						value={searchQueryText}
-            {/*            value={searchQuery}*/}
+						onChange={(e) => setSearchQueryText(e.target.value)}
-            {/*            onChange={(e) => setSearchQuery(e.target.value)}*/}
+						className="pl-10"
-            {/*            className="pl-10"*/}
+					/>
-            {/*        />*/}
+				</div>
-            {/*    </div>*/}
+				<Select
-            {/*    <Select*/}
+					value={statusFilter}
-            {/*        value={statusFilter}*/}
+					onValueChange={(value) =>
-            {/*        onValueChange={(value) => setStatusFilter(value as ImportStatus | "ALL")}*/}
+						setStatusFilter(
-            {/*    >*/}
+							value === "ALL" ? undefined : (value as MangaImportJobDTOStatus),
-            {/*        <SelectTrigger className="w-[150px]">*/}
+						)
-            {/*            <SelectValue placeholder="Filter by status" />*/}
+					}
-            {/*        </SelectTrigger>*/}
+				>
-            {/*        <SelectContent>*/}
+					<SelectTrigger className="w-[150px]">
-            {/*            <SelectItem value="ALL">All Statuses</SelectItem>*/}
+						<SelectValue placeholder="Filter by status" />
-            {/*            <SelectItem value="PENDING">Pending</SelectItem>*/}
+					</SelectTrigger>
-            {/*            <SelectItem value="PROCESSING">Processing</SelectItem>*/}
+					<SelectContent>
-            {/*            <SelectItem value="COMPLETED">Completed</SelectItem>*/}
+						<SelectItem value="ALL">All Statuses</SelectItem>
-            {/*            <SelectItem value="FAILED">Failed</SelectItem>*/}
+						<SelectItem value="PENDING">Pending</SelectItem>
-            {/*        </SelectContent>*/}
+						<SelectItem value="PROCESSING">Processing</SelectItem>
-            {/*    </Select>*/}
+						<SelectItem value="COMPLETED">Completed</SelectItem>
-            {/*</div>*/}
+						<SelectItem value="FAILED">Failed</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
 
-            {/* Table */}
 			<Card>
 				<Table>
 					<TableHeader>
@@ -166,7 +205,8 @@ export const FailedImportJobs = () => {
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-                        {!importJobs || importJobs.length === 0 ? (
+						{!importJobsData?.page?.content ||
+						importJobsData.page?.content.length === 0 ? (
 							<TableRow>
 								<TableCell colSpan={8} className="h-24 text-center">
 									<div className="flex flex-col items-center gap-2 text-muted-foreground">
@@ -176,7 +216,7 @@ export const FailedImportJobs = () => {
 								</TableCell>
 							</TableRow>
 						) : (
-                            importJobs.map((job) => (
+							importJobsData.page.content.map((job) => (
 								<TableRow key={job.id}>
 									<TableCell className="font-mono text-xs">{job.id}</TableCell>
 									<TableCell>{getStatusBadge(job)}</TableCell>
@@ -210,12 +250,15 @@ export const FailedImportJobs = () => {
 											<span className="text-muted-foreground">-</span>
 										)}
 									</TableCell>
-                                    <TableCell className="max-w-[200px] truncate font-medium" title={job.filename}>
+									<TableCell
+										className="max-w-[200px] truncate font-medium"
+										title={job.filename}
+									>
 										{job.filename}
 									</TableCell>
 									<TableCell className="max-w-[200px]">
 										<a
-                                            href={`${import.meta.env.VITE_API_BASE_URL}/${job.s3Key}`}
+											href={`${import.meta.env.VITE_OMV_BASE_URL}/${job.s3Key}`}
 											target="_blank"
 											rel="noopener noreferrer"
 											className="flex items-center gap-1 text-xs text-primary hover:underline truncate"
@@ -236,9 +279,17 @@ export const FailedImportJobs = () => {
 						)}
 					</TableBody>
 				</Table>
+
+				{importJobsData?.page?.totalPages &&
+					importJobsData.page.totalPages > 1 && (
+						<Pagination
+							currentPage={currentPage}
+							totalPages={importJobsData.page.totalPages}
+							onPageChange={setCurrentPage}
+						/>
+					)}
 			</Card>
 
-            {/* Error Details Dialog */}
 			<Dialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
 				<DialogContent className="max-w-2xl">
 					<DialogHeader>
@@ -246,7 +297,7 @@ export const FailedImportJobs = () => {
 							<AlertTriangle className="h-5 w-5" />
 							Import Error Details
 						</DialogTitle>
-                        <DialogDescription>
+						<DialogDescription className="truncate">
 							Job ID: {selectedJob?.id} | File: {selectedJob?.filename}
 						</DialogDescription>
 					</DialogHeader>
@@ -256,7 +307,7 @@ export const FailedImportJobs = () => {
 								<label className="text-sm font-medium text-foreground">
 									Message
 								</label>
-                                <p className="mt-1 text-sm text-muted-foreground">
+								<p className="mt-1 max-h-[100px] overflow-auto wrap-break-word text-sm text-muted-foreground">
 									{selectedJob.errorMessage}
 								</p>
 							</div>
@@ -265,7 +316,7 @@ export const FailedImportJobs = () => {
 									<label className="text-sm font-medium text-foreground">
 										Stack Trace
 									</label>
-                                    <pre className="mt-1 max-h-[200px] overflow-auto rounded-md bg-muted p-3 text-xs font-mono text-muted-foreground">
+									<pre className="mt-1 max-h-[200px] overflow-auto whitespace-pre-wrap wrap-break-word rounded-md bg-muted p-3 text-xs font-mono text-muted-foreground">
 										{selectedJob.errorStackTrace}
 									</pre>
 								</div>
@@ -300,5 +351,5 @@ export const FailedImportJobs = () => {
 				</DialogContent>
 			</Dialog>
 		</div>
-    )
+	);
 };

src/features/admin/components/ProviderManager.tsx

@@ -1,22 +1,28 @@
+import { ExternalLink, Loader2, RefreshCw } from "lucide-react";
 import {
 	useFetchAllContentProviderMangas,
 	useFetchContentProviderMangas,
-    useGetContentProviders
+	useGetContentProviders,
 } from "@/api/generated/ingestion/ingestion.ts";
-import {Card} from "@/components/ui/card.tsx";
 import { Badge } from "@/components/ui/badge.tsx";
-import {ExternalLink, Loader2, RefreshCw} from "lucide-react";
 import { Button } from "@/components/ui/button.tsx";
+import { Card } from "@/components/ui/card.tsx";
 
 export const ProviderManager = () => {
 	const { data } = useGetContentProviders();
 	const providers = data?.data?.providers;
 
-    const { mutate: mutateFetchContentProviderMangas, isPending: isPendingFetchContentProviderMangas } = useFetchContentProviderMangas();
+	const {
+		mutate: mutateFetchContentProviderMangas,
+		isPending: isPendingFetchContentProviderMangas,
+	} = useFetchContentProviderMangas();
 
-    const { mutate: mutateFetchAllContentProviderMangas, isPending: isPendingFetchAllContentProviderMangas } = useFetchAllContentProviderMangas();
+	const {
+		mutate: mutateFetchAllContentProviderMangas,
+		isPending: isPendingFetchAllContentProviderMangas,
+	} = useFetchAllContentProviderMangas();
 
-    const activeCount = providers?.filter((p) => p.active).length
+	const activeCount = providers?.filter((p) => p.active).length;
 
 	return (
 		<div className="space-y-6">
@@ -39,7 +45,9 @@ export const ProviderManager = () => {
 					) : (
 						<RefreshCw className="h-4 w-4" />
 					)}
-                    {isPendingFetchAllContentProviderMangas ? "Updating..." : "Update All Providers"}
+					{isPendingFetchAllContentProviderMangas
+						? "Updating..."
+						: "Update All Providers"}
 				</Button>
 			</div>
 
@@ -61,11 +69,7 @@ export const ProviderManager = () => {
 											{provider.name}
 										</h3>
 										<Badge
-                                            variant={
+											variant={provider?.active ? "default" : "outline"}
-                                                provider?.active
-                                                    ? "default"
-                                                        : "outline"
-                                            }
 											className={
 												provider?.active
 													? "bg-emerald-600 text-white hover:bg-emerald-600"
@@ -76,8 +80,8 @@ export const ProviderManager = () => {
 										</Badge>
 									</div>
 
-                                    {provider?.url &&
+									{provider?.url && (
-                                    (<div className="mt-1 flex items-center gap-2">
+										<div className="mt-1 flex items-center gap-2">
 											<div className="flex items-center gap-1.5">
 												<code className="text-xs text-muted-foreground truncate max-w-[300px]">
 													{provider.url}
@@ -91,7 +95,8 @@ export const ProviderManager = () => {
 													<ExternalLink className="h-3 w-3 text-muted-foreground hover:text-foreground" />
 												</a>
 											</div>
-                                    </div>)}
+										</div>
+									)}
 
 									<p className="mt-1 text-xs text-muted-foreground">
 										{/*{provider.mangaCount} manga indexed | Last updated:{" "}*/}
@@ -102,8 +107,14 @@ export const ProviderManager = () => {
 								<Button
 									variant="outline"
 									size="sm"
-                                    onClick={() => mutateFetchContentProviderMangas({providerId: provider?.id ?? -1})}
+									onClick={() =>
-                                    disabled={!provider.active || isPendingFetchContentProviderMangas}
+										mutateFetchContentProviderMangas({
+											providerId: provider?.id ?? -1,
+										})
+									}
+									disabled={
+										!provider.active || isPendingFetchContentProviderMangas
+									}
 									className="gap-2 shrink-0"
 								>
 									{isPendingFetchContentProviderMangas ? (
@@ -115,9 +126,9 @@ export const ProviderManager = () => {
 								</Button>
 							</div>
 						</Card>
-                    )
+					);
 				})}
 			</div>
 		</div>
-    )
+	);
-}
+};

src/features/home/components/FilterSidebar.tsx

@@ -1,11 +1,11 @@
 import { Star, X } from "lucide-react";
+import { useGetGenres } from "@/api/generated/catalog/catalog.ts";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator.tsx";
 import { Skeleton } from "@/components/ui/skeleton.tsx";
 import { Switch } from "@/components/ui/switch.tsx";
 import { useAuth } from "@/contexts/AuthContext.tsx";
-import {useGetGenres} from "@/api/generated/catalog/catalog.ts";
 
 interface FilterSidebarProps {
 	selectedGenres: number[];

src/features/home/components/MangaCard.tsx

@@ -6,12 +6,15 @@ import type {
 	MangaListDTO,
 	PageMangaListDTO,
 } from "@/api/generated/api.schemas.ts";
+import {
+	useSetFavorite,
+	useSetUnfavorite,
+} from "@/api/generated/user-interaction/user-interaction.ts";
 import { Badge } from "@/components/ui/badge.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Card, CardContent } from "@/components/ui/card.tsx";
 import { useAuth } from "@/contexts/AuthContext.tsx";
 import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
-import {useSetFavorite, useSetUnfavorite} from "@/api/generated/user-interaction/user-interaction.ts";
 
 interface MangaCardProps {
 	manga: MangaListDTO;
@@ -63,8 +66,7 @@ export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
 		(isFavorite: boolean) =>
 			isFavorite
 				? mutateUnfavorite({ mangaId: manga.id })
-				: mutateFavorite({ mangaId: manga.id })
+				: mutateFavorite({ mangaId: manga.id }),
-		,
 		[mutateUnfavorite, manga.id, mutateFavorite],
 	);
 

src/features/home/components/MangaManualImportDialog.tsx

@@ -1,7 +1,9 @@
+import axios from "axios";
 import { FileUp } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
 import { toast } from "sonner";
+import { useRequestPresignedImport } from "@/api/generated/content/content.ts";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -13,8 +15,6 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Progress } from "@/components/ui/progress";
-import axios from "axios";
-import { useRequestPresignedImport } from "@/api/generated/content/content.ts";
 
 interface MangaManualImportDialogProps {
 	fileImportDialogOpen: boolean;
@@ -30,7 +30,9 @@ export const MangaManualImportDialog = ({
 	const [dragActive, setDragActive] = useState(false);
 	const [files, setFiles] = useState<File[] | null>(null);
 	const [isUploading, setIsUploading] = useState(false);
-	const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
+	const [uploadProgress, setUploadProgress] = useState<Record<string, number>>(
+		{},
+	);
 
 	const { mutateAsync: requestPresignedUrl } = useRequestPresignedImport();
 
@@ -140,9 +142,7 @@ export const MangaManualImportDialog = ({
 				</DialogHeader>
 				<div className="space-y-4">
 					<div>
-						<label className="text-sm font-medium">
+						<label className="text-sm font-medium">AniList ID</label>
-							AniList ID
-						</label>
 						<Input
 							placeholder="17"
 							value={aniListId}
@@ -152,9 +152,7 @@ export const MangaManualImportDialog = ({
 						/>
 					</div>
 					<div>
-						<label className="text-sm font-medium">
+						<label className="text-sm font-medium">MyAnimeList ID</label>
-							MyAnimeList ID
-						</label>
 						<Input
 							placeholder="20"
 							value={malId}
@@ -171,7 +169,8 @@ export const MangaManualImportDialog = ({
 								onDragLeave={handleDrag}
 								onDragOver={handleDrag}
 								onDrop={handleDrop}
-								className={`mt-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors ${dragActive
+								className={`mt-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
+									dragActive
 										? "border-primary bg-primary/5"
 										: "border-muted-foreground/25"
 								}`}
@@ -230,7 +229,10 @@ export const MangaManualImportDialog = ({
 								{files.map((file) => (
 									<div key={file.name} className="space-y-1">
 										<div className="flex justify-between text-xs text-muted-foreground">
-											<span className="truncate pr-4 max-w-[200px]" title={file.name}>
+											<span
+												className="truncate pr-4 max-w-[200px]"
+												title={file.name}
+											>
 												{file.name}
 											</span>
 											<span>{uploadProgress[file.name] || 0}%</span>

src/features/home/components/ProviderImportDialog.tsx

@@ -3,6 +3,7 @@ import { useCallback } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useGetContentProviders } from "@/api/generated/ingestion/ingestion.ts";
 import { useImportFromProvider } from "@/api/generated/manga-import/manga-import.ts";
 import { Button } from "@/components/ui/button";
 import {
@@ -30,7 +31,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select.tsx";
-import {useGetContentProviders} from "@/api/generated/ingestion/ingestion.ts";
 
 interface ProviderImportDialogProps {
 	dialogOpen: boolean;

src/features/import-review/ImportReviewCard.tsx

@@ -2,14 +2,14 @@ import { useQueryClient } from "@tanstack/react-query";
 import { ExternalLink, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import type { MangaIngestReviewDTO } from "@/api/generated/api.schemas.ts";
 import {
 	useDeleteMangaIngestReview,
-	useResolveMangaIngestReview
+	useResolveMangaIngestReview,
 } from "@/api/generated/manga-ingest-review/manga-ingest-review.ts";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
 
 interface ImportReviewCardProps {
 	importReview: MangaIngestReviewDTO;
@@ -73,8 +73,10 @@ export function ImportReviewCard({
 						</h3>
 						<p className="text-sm text-muted-foreground">
 							Provider:{" "}
-							<span className="capitalize">{importReview.contentProviderName}</span> •{" "}
+							<span className="capitalize">
-							{importDate}
+								{importReview.contentProviderName}
+							</span>{" "}
+							• {importDate}
 						</p>
 					</div>
 					{importReview.externalUrl && (

src/features/manga/MangaChapter.tsx

@@ -1,11 +1,14 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { Check, Database, Download, Eye, Loader2 } from "lucide-react";
 import { useCallback, useState } from "react";
-import { useNavigate } from "react-router";
-import { Button } from "@/components/ui/button";
 import ReactCountryFlag from "react-country-flag";
-import {useDownloadContentArchive, useGetMangaProviderContent} from "@/api/generated/content/content.ts";
+import { useNavigate } from "react-router";
+import {
+	useDownloadContentArchive,
+	useGetMangaProviderContent,
+} from "@/api/generated/content/content.ts";
 import { useFetchContentProviderContent } from "@/api/generated/ingestion/ingestion.ts";
+import { Button } from "@/components/ui/button";
 
 interface MangaChapterProps {
 	mangaId: number;
@@ -18,7 +21,8 @@ export const MangaChapter = ({
 }: MangaChapterProps) => {
 	const navigate = useNavigate();
 
-	const { isPending, data, queryKey } = useGetMangaProviderContent(mangaProviderId);
+	const { isPending, data, queryKey } =
+		useGetMangaProviderContent(mangaProviderId);
 
 	const queryClient = useQueryClient();
 
@@ -28,7 +32,7 @@ export const MangaChapter = ({
 				const url = window.URL.createObjectURL(data);
 				const link = document.createElement("a");
 				link.href = url;
-				link.setAttribute("download", mangaContentId + ".cbz");
+				link.setAttribute("download", `${mangaContentId}.cbz`);
 				document.body.appendChild(link);
 				link.click();
 				link.remove();
@@ -37,7 +41,8 @@ export const MangaChapter = ({
 		},
 	});
 
-	const { mutate, isPending: isPendingFetchChapter } = useFetchContentProviderContent({
+	const { mutate, isPending: isPendingFetchChapter } =
+		useFetchContentProviderContent({
 			mutation: {
 				onSuccess: () => queryClient.invalidateQueries({ queryKey }),
 				onSettled: () => setFetchingId(null),
@@ -77,7 +82,8 @@ export const MangaChapter = ({
 							>
 								<div className="flex items-center gap-3">
 									<div
-										className={`flex h-8 w-8 items-center justify-center rounded-full ${chapter.isRead ? "bg-primary/20" : "bg-muted"
+										className={`flex h-8 w-8 items-center justify-center rounded-full ${
+											chapter.isRead ? "bg-primary/20" : "bg-muted"
 										}`}
 									>
 										{chapter.isRead ? (
@@ -145,7 +151,7 @@ export const MangaChapter = ({
 										className="gap-2 cursor-pointer"
 									>
 										<Database className="h-4 w-4" />
-										{isPendingFetchChapter && fetchingId == chapter.id
+										{isPendingFetchChapter && fetchingId === chapter.id
 											? "Fetching..."
 											: "Fetch from Provider"}
 									</Button>

src/hooks/useScrollPersistence.ts

@@ -15,5 +15,5 @@ export const useScrollPersistence = (key: string) => {
 		return () => {
 			setScrollPosition(key, window.scrollY);
 		};
-    }, [key, setScrollPosition]); // eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [key, setScrollPosition, scrollPositions]); // eslint-disable-next-line react-hooks/exhaustive-deps
 };

src/pages/Admin.tsx

@@ -1,17 +1,23 @@
-import {useAuth} from "@/contexts/AuthContext.tsx";
+import { ArrowLeft, FileStack, Server, Shield } from "lucide-react";
 import { type ReactNode, useEffect, useState } from "react";
 import { useNavigate } from "react-router";
-import {ArrowLeft, FileStack, Server, Shield} from "lucide-react";
 import { Button } from "@/components/ui/button.tsx";
-import {ProviderManager} from "@/features/admin/components/ProviderManager.tsx";
+import { useAuth } from "@/contexts/AuthContext.tsx";
 import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx";
+import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
 
-type Tab = "import" | "providers" | "manga" | "ingest-review" | "import-jobs" | "users"
+type Tab =
+	| "import"
+	| "providers"
+	| "manga"
+	| "ingest-review"
+	| "import-jobs"
+	| "users";
 
 const Admin = () => {
 	const { isLoading, isAuthenticated } = useAuth();
 	const navigate = useNavigate();
-    const [activeTab, setActiveTab] = useState<Tab>("providers")
+	const [activeTab, setActiveTab] = useState<Tab>("providers");
 
 	useEffect(() => {
 		// TODO: fix this
@@ -21,7 +27,7 @@ const Admin = () => {
 		}
 
 		// TODO: add user role verification
-    }, [isAuthenticated, isLoading, navigate]);
+	}, [isAuthenticated, isLoading]);
 
 	// const { data } = useGetMangaImportJobs();
 	//
@@ -59,7 +65,7 @@ const Admin = () => {
 		//     label: "User Management",
 		//     icon: <Users className="h-4 w-4" />,
 		// },
-    ]
+	];
 
 	return (
 		<main className="min-h-screen bg-background">
@@ -235,7 +241,7 @@ const Admin = () => {
 				</div>
 			</div>
 		</main>
-    )
+	);
-}
+};
 
 export default Admin;

src/pages/Chapter.tsx

@@ -1,11 +1,11 @@
 import { ArrowLeft, ChevronLeft, ChevronRight, Home } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router";
+import { useGetMangaContentImages } from "@/api/generated/content/content.ts";
+import { useMarkContentAsRead } from "@/api/generated/user-interaction/user-interaction.ts";
 import { ThemeToggle } from "@/components/ThemeToggle.tsx";
 import { Button } from "@/components/ui/button";
 import { useReadingTracker } from "@/features/chapter/hooks/useReadingTracker.ts";
-import {useGetMangaContentImages} from "@/api/generated/content/content.ts";
-import {useMarkContentAsRead} from "@/api/generated/user-interaction/user-interaction.ts";
 
 const Chapter = () => {
 	const { setCurrentChapterPage, getCurrentChapterPage } = useReadingTracker();
@@ -35,12 +35,12 @@ const Chapter = () => {
 		if (currentPage === data.data?.contentImageKeys.length) {
 			mutate({ mangaContentId: chapterNumber });
 		}
-	}, [data, mutate, currentPage]);
+	}, [data, mutate, currentPage, chapterNumber, isLoading]);
 
 	/** Persist reading progress */
 	useEffect(() => {
 		setCurrentChapterPage(chapterNumber, currentPage);
-	}, [chapterNumber, currentPage]);
+	}, [chapterNumber, currentPage, setCurrentChapterPage]);
 
 	/** Restore stored page */
 	useEffect(() => {
@@ -51,7 +51,7 @@ const Chapter = () => {
 				setVisibleCount(stored); // for infinite scroll
 			}
 		}
-	}, [isLoading, data?.data]);
+	}, [isLoading, data?.data, chapterNumber, getCurrentChapterPage]);
 
 	/** Infinite scroll observer */
 	useEffect(() => {
@@ -90,7 +90,7 @@ const Chapter = () => {
 
 		imgs.forEach((img) => observer.observe(img));
 		return () => observer.disconnect();
-	}, [infiniteScroll, visibleCount]);
+	}, [infiniteScroll]);
 
 	useEffect(() => {
 		if (!data?.data) return;
@@ -107,7 +107,7 @@ const Chapter = () => {
 			// Single page mode → scroll to top
 			window.scrollTo({ top: 0 });
 		}
-	}, [infiniteScroll]);
+	}, [infiniteScroll, currentPage, data?.data]);
 
 	if (!data?.data) {
 		return (

src/pages/Home.tsx

@@ -1,23 +1,20 @@
 import { BookOpen, Search } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { useDebounce } from "use-debounce";
+import { useGetMangas } from "@/api/generated/catalog/catalog.ts";
 import { AuthHeader } from "@/components/AuthHeader.tsx";
 import { Pagination } from "@/components/Pagination.tsx";
 import { ThemeToggle } from "@/components/ThemeToggle.tsx";
 import { Input } from "@/components/ui/input.tsx";
+import { useUIState } from "@/contexts/UIStateContext.tsx";
 import { FilterSidebar } from "@/features/home/components/FilterSidebar.tsx";
 import { ImportDropdown } from "@/features/home/components/ImportDropdown.tsx";
 import { MangaGrid } from "@/features/home/components/MangaGrid.tsx";
-import {
+import { SortDropdown } from "@/features/home/components/SortDropdown.tsx";
-	SortDropdown,
-} from "@/features/home/components/SortDropdown.tsx";
-import { useUIState } from "@/contexts/UIStateContext.tsx";
 import { useDynamicPageSize } from "@/hooks/useDynamicPageSize.ts";
-import {useGetMangas} from "@/api/generated/catalog/catalog.ts";
 
 const ROWS_PER_PAGE = 4;
 
-
 const Home = () => {
 	const itemsPerPage = useDynamicPageSize(ROWS_PER_PAGE);
 	const {
@@ -60,7 +57,7 @@ const Home = () => {
 			setCurrentPage(1);
 			startSearchRef.current = debouncedSearchText;
 		}
-	}, [debouncedSearchText]);
+	}, [debouncedSearchText, setCurrentPage]);
 
 	const totalPages = mangasData?.data?.totalPages;
 

src/pages/ImportReview.tsx

@@ -3,10 +3,10 @@
 import { AlertCircle } from "lucide-react";
 import { useEffect } from "react";
 import { useNavigate } from "react-router";
+import { useGetMangaIngestReviews } from "@/api/generated/manga-ingest-review/manga-ingest-review.ts";
 import { Card } from "@/components/ui/card";
 import { useAuth } from "@/contexts/AuthContext.tsx";
 import { ImportReviewCard } from "@/features/import-review/ImportReviewCard.tsx";
-import {useGetMangaIngestReviews} from "@/api/generated/manga-ingest-review/manga-ingest-review.ts";
 
 export default function ImportReviewPage() {
 	const navigate = useNavigate();

src/pages/Login.tsx

@@ -44,7 +44,7 @@ const Login = () => {
 		async (values: z.infer<typeof formSchema>) => {
 			await login(values.email, values.password);
 		},
-		[formSchema, login],
+		[login],
 	);
 
 	return (

src/pages/Manga.tsx

@@ -13,6 +13,14 @@ import {
 import { useCallback } from "react";
 import { useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
+import { useGetManga } from "@/api/generated/catalog/catalog.ts";
+import { useFetchContentProviderContentList } from "@/api/generated/ingestion/ingestion.ts";
+import {
+	useFollowManga,
+	useSetFavorite,
+	useSetUnfavorite,
+	useUnfollowManga,
+} from "@/api/generated/user-interaction/user-interaction.ts";
 import { ThemeToggle } from "@/components/ThemeToggle.tsx";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -24,17 +32,9 @@ import {
 } from "@/components/ui/collapsible.tsx";
 import { useAuth } from "@/contexts/AuthContext.tsx";
 import { useUIState } from "@/contexts/UIStateContext.tsx";
-import { useScrollPersistence } from "@/hooks/useScrollPersistence.ts";
 import { MangaChapter } from "@/features/manga/MangaChapter.tsx";
+import { useScrollPersistence } from "@/hooks/useScrollPersistence.ts";
 import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
-import {useGetManga} from "@/api/generated/catalog/catalog.ts";
-import {useFetchContentProviderContentList} from "@/api/generated/ingestion/ingestion.ts";
-import {
-	useFollowManga,
-	useSetFavorite,
-	useSetUnfavorite,
-	useUnfollowManga
-} from "@/api/generated/user-interaction/user-interaction.ts";
 
 const Manga = () => {
 	const { isAuthenticated } = useAuth();
@@ -46,7 +46,8 @@ const Manga = () => {
 
 	const { data: mangaData, queryKey } = useGetManga(mangaId);
 
-	const { mutate, isPending: fetchPending } = useFetchContentProviderContentList({
+	const { mutate, isPending: fetchPending } =
+		useFetchContentProviderContentList({
 			mutation: {
 				onSuccess: () => queryClient.invalidateQueries({ queryKey }),
 			},
@@ -226,7 +227,8 @@ const Manga = () => {
 													disabled={isPendingFavoriteChange}
 												>
 													<Heart
-														className={`h-4 w-4 transition-colors ${mangaData?.data?.favorite
+														className={`h-4 w-4 transition-colors ${
+															mangaData?.data?.favorite
 																? "fill-red-500 text-red-500"
 																: "text-muted-foreground hover:text-red-500"
 														}`}
@@ -364,8 +366,7 @@ const Manga = () => {
 															</p>
 														</div>
 													</div>
-													{provider.supportsChapterFetch &&
+													{provider.supportsChapterFetch && provider.active && (
-														provider.active && (
 														<div className={"flex gap-4 pr-4"}>
 															{/*<Button*/}
 															{/*	size="sm"*/}
@@ -386,7 +387,9 @@ const Manga = () => {
 																variant="outline"
 																disabled={isPending}
 																onClick={() =>
-																		mutate({ mangaContentProviderId: provider.id ?? -1 })
+																	mutate({
+																		mangaContentProviderId: provider.id ?? -1,
+																	})
 																}
 																className="gap-2"
 															>
@@ -397,7 +400,10 @@ const Manga = () => {
 													)}
 												</div>
 												<ChevronDown
-													className={`h-5 w-5 text-muted-foreground transition-transform ${expandedProviderIds.includes(provider.id ?? -1) ? "rotate-180" : ""
+													className={`h-5 w-5 text-muted-foreground transition-transform ${
+														expandedProviderIds.includes(provider.id ?? -1)
+															? "rotate-180"
+															: ""
 													}`}
 												/>
 											</CardContent>

src/pages/Profile.tsx

@@ -118,7 +118,7 @@ const Profile = () => {
 										step="6"
 										value={itemsPerPage}
 										onChange={(e) =>
-											setItemsPerPage(Number.parseInt(e.target.value))
+											setItemsPerPage(Number.parseInt(e.target.value, 10))
 										}
 									/>
 									<p className="text-xs text-muted-foreground">

src/pages/Register.tsx

@@ -55,7 +55,7 @@ const Register = () => {
 		async (data: z.infer<typeof formSchema>) => {
 			await register(data.email, data.password, data.name);
 		},
-		[register, formSchema],
+		[register],
 	);
 
 	return (

src/pages/Router.tsx

@@ -24,7 +24,7 @@ export const Router = createBrowserRouter([
 			},
 			{
 				path: "/admin",
-				element: <Admin />
+				element: <Admin />,
 			},
 			{
 				path: "/login",