From 32c3d4ad3bf3d033b7bef6d7796fb2006f106f45 Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Sat, 28 Mar 2026 19:27:53 -0300
Subject: [PATCH 1/3] refactor: Improve upload error handling and progress
 display in MangaManualImportDialog

---
 src/components/ui/progress.tsx                | 10 ++-
 .../components/MangaManualImportDialog.tsx    | 64 ++++++++++++++-----
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 93349bb..6451efe 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -6,8 +6,11 @@ import { cn } from "@/lib/utils";
 function Progress({
 	className,
 	value,
+	indicatorClassName,
 	...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+	indicatorClassName?: string;
+}) {
 	return (
 		<ProgressPrimitive.Root
 			data-slot="progress"
@@ -19,7 +22,10 @@ function Progress({
 		>
 			<ProgressPrimitive.Indicator
 				data-slot="progress-indicator"
-				className="h-full w-full flex-1 bg-primary transition-all"
+				className={cn(
+					"h-full w-full flex-1 bg-primary transition-all",
+					indicatorClassName,
+				)}
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>
diff --git a/src/features/home/components/MangaManualImportDialog.tsx b/src/features/home/components/MangaManualImportDialog.tsx
index 65e8e7f..9660ceb 100644
--- a/src/features/home/components/MangaManualImportDialog.tsx
+++ b/src/features/home/components/MangaManualImportDialog.tsx
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { FileUp } from "lucide-react";
+import { FileUp, XCircle } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -33,6 +33,7 @@ export const MangaManualImportDialog = ({
 	const [uploadProgress, setUploadProgress] = useState<Record<string, number>>(
 		{},
 	);
+	const [uploadErrors, setUploadErrors] = useState<Record<string, boolean>>({});
 
 	const { mutateAsync: requestPresignedUrl } = useRequestPresignedImport();
 
@@ -49,6 +50,7 @@ export const MangaManualImportDialog = ({
 
 		setIsUploading(true);
 		setUploadProgress({});
+		setUploadErrors({});
 		let hasError = false;
 
 		for (const file of files) {
@@ -85,6 +87,7 @@ export const MangaManualImportDialog = ({
 			} catch (error) {
 				console.error(`Error uploading ${file.name}:`, error);
 				hasError = true;
+				setUploadErrors((prev) => ({ ...prev, [file.name]: true }));
 				toast.error(`Failed to import ${file.name}`);
 			}
 		}
@@ -96,6 +99,7 @@ export const MangaManualImportDialog = ({
 			setMalId("");
 			setAniListId("");
 			setUploadProgress({});
+			setUploadErrors({});
 			onFileImportDialogOpenChange(false);
 			toast.success("Manga imported successfully! Backend will process it.");
 		}
@@ -223,23 +227,52 @@ export const MangaManualImportDialog = ({
 											0,
 										) / files.length
 									}
+									indicatorClassName={
+										Math.round(
+											files.reduce(
+												(acc, file) => acc + (uploadProgress[file.name] || 0),
+												0,
+											) / files.length,
+										) === 100
+											? "bg-green-500"
+											: ""
+									}
 								/>
 							</div>
-							<div className="space-y-3">
-								{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}
-											>
-												{file.name}
-											</span>
-											<span>{uploadProgress[file.name] || 0}%</span>
+							<div className="space-y-3 max-h-60 overflow-y-auto pr-2">
+								{files.map((file) => {
+									const isError = uploadErrors[file.name];
+									const progress = uploadProgress[file.name] || 0;
+									return (
+										<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}
+												>
+													{file.name}
+												</span>
+												{isError ? (
+													<span className="flex items-center gap-1 font-medium text-destructive">
+														<XCircle className="h-3 w-3" /> Failed
+													</span>
+												) : (
+													<span>{progress}%</span>
+												)}
+											</div>
+											<Progress
+												value={isError ? 100 : progress}
+												indicatorClassName={
+													isError
+														? "bg-destructive"
+														: progress === 100
+															? "bg-green-500"
+															: ""
+												}
+											/>
 										</div>
-										<Progress value={uploadProgress[file.name] || 0} />
-									</div>
-								))}
+									);
+								})}
 							</div>
 						</div>
 					)}
@@ -251,6 +284,7 @@ export const MangaManualImportDialog = ({
 						onClick={() => {
 							setFiles(null);
 							setUploadProgress({});
+							setUploadErrors({});
 							onFileImportDialogOpenChange(false);
 						}}
 					>
-- 
2.49.1


From 096412cfb228a65c0efa31dbcfa848361eb0ee10 Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Sat, 28 Mar 2026 19:38:10 -0300
Subject: [PATCH 2/3] refactor: Introduce MangaImport component and update
 import functionality in Admin

---
 src/features/admin/components/MangaImport.tsx | 80 +++++++++++++++
 .../components/MangaManualImportDialog.tsx    |  8 +-
 .../components/ProviderImportDialog.tsx       |  4 +-
 .../home/components/ImportDropdown.tsx        | 69 -------------
 src/pages/Admin.tsx                           | 99 ++++---------------
 src/pages/Home.tsx                            |  2 -
 6 files changed, 104 insertions(+), 158 deletions(-)
 create mode 100644 src/features/admin/components/MangaImport.tsx
 rename src/features/{home => admin}/components/MangaManualImportDialog.tsx (97%)
 rename src/features/{home => admin}/components/ProviderImportDialog.tsx (98%)
 delete mode 100644 src/features/home/components/ImportDropdown.tsx

diff --git a/src/features/admin/components/MangaImport.tsx b/src/features/admin/components/MangaImport.tsx
new file mode 100644
index 0000000..e5a905c
--- /dev/null
+++ b/src/features/admin/components/MangaImport.tsx
@@ -0,0 +1,80 @@
+import {Card} from "@/components/ui/card.tsx";
+import {Download, FileUp} from "lucide-react";
+import {Button} from "@/components/ui/button.tsx";
+import {useState} from "react";
+import {ProviderImportDialog} from "@/features/admin/components/ProviderImportDialog.tsx";
+import {MangaManualImportDialog} from "@/features/admin/components/MangaManualImportDialog.tsx";
+
+export const MangaImport = () => {
+    const [providerDialogOpen, setProviderDialogOpen] = useState(false);
+    const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
+
+    return (<div className="space-y-6">
+        <div>
+            <h2 className="text-xl font-semibold text-foreground">
+                Import Manga
+            </h2>
+            <p className="text-sm text-muted-foreground">
+                Import manga from external providers or upload files directly.
+            </p>
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+            <Card className="p-6">
+                <div className="flex flex-col items-center gap-4 text-center">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+                        <Download className="h-6 w-6 text-primary" />
+                    </div>
+                    <div>
+                        <h3 className="font-semibold text-foreground">
+                            Import from Provider
+                        </h3>
+                        <p className="mt-1 text-sm text-muted-foreground">
+                            Import manga from MangaDex or other supported providers.
+                        </p>
+                    </div>
+                    <Button
+                        variant="outline"
+                        className="gap-2"
+                        onClick={() => setProviderDialogOpen(true)}
+                    >
+                        <Download className="mr-2 h-4 w-4" />
+                        Import from Provider</Button>
+                </div>
+            </Card>
+            <Card className="p-6">
+                <div className="flex flex-col items-center gap-4 text-center">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+                        <FileUp className="h-6 w-6 text-primary" />
+                    </div>
+                    <div>
+                        <h3 className="font-semibold text-foreground">
+                            File Upload
+                        </h3>
+                        <p className="mt-1 text-sm text-muted-foreground">
+                            Upload CBZ or CBR files to import manga data in
+                            bulk.
+                        </p>
+                    </div>
+                    <Button
+                        variant="outline"
+                        className="gap-2"
+                        onClick={() => setFileImportDialogOpen(true)}
+                    >
+                        <FileUp className="h-4 w-4" />
+                        Upload Files
+                    </Button>
+                </div>
+            </Card>
+
+            <ProviderImportDialog
+                dialogOpen={providerDialogOpen}
+                onDialogOpenChange={setProviderDialogOpen}
+            />
+
+            <MangaManualImportDialog
+                fileImportDialogOpen={fileImportDialogOpen}
+                onFileImportDialogOpenChange={setFileImportDialogOpen}
+            />
+        </div>
+    </div>);
+}
\ No newline at end of file
diff --git a/src/features/home/components/MangaManualImportDialog.tsx b/src/features/admin/components/MangaManualImportDialog.tsx
similarity index 97%
rename from src/features/home/components/MangaManualImportDialog.tsx
rename to src/features/admin/components/MangaManualImportDialog.tsx
index 9660ceb..b75ab00 100644
--- a/src/features/home/components/MangaManualImportDialog.tsx
+++ b/src/features/admin/components/MangaManualImportDialog.tsx
@@ -4,7 +4,7 @@ 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 { Button } from "@/components/ui/button.tsx";
 import {
 	Dialog,
 	DialogContent,
@@ -12,9 +12,9 @@ import {
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Progress } from "@/components/ui/progress";
+} from "@/components/ui/dialog.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Progress } from "@/components/ui/progress.tsx";
 
 interface MangaManualImportDialogProps {
 	fileImportDialogOpen: boolean;
diff --git a/src/features/home/components/ProviderImportDialog.tsx b/src/features/admin/components/ProviderImportDialog.tsx
similarity index 98%
rename from src/features/home/components/ProviderImportDialog.tsx
rename to src/features/admin/components/ProviderImportDialog.tsx
index 0db083e..7710c9f 100644
--- a/src/features/home/components/ProviderImportDialog.tsx
+++ b/src/features/admin/components/ProviderImportDialog.tsx
@@ -5,7 +5,7 @@ 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 { Button } from "@/components/ui/button.tsx";
 import {
 	Dialog,
 	DialogContent,
@@ -23,7 +23,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form.tsx";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input.tsx";
 import {
 	Select,
 	SelectContent,
diff --git a/src/features/home/components/ImportDropdown.tsx b/src/features/home/components/ImportDropdown.tsx
deleted file mode 100644
index b966aff..0000000
--- a/src/features/home/components/ImportDropdown.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { AlertCircle, Download, FileUp } from "lucide-react";
-import { useState } from "react";
-import { Link } from "react-router";
-import { Button } from "@/components/ui/button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useAuth } from "@/contexts/AuthContext.tsx";
-import { MangaManualImportDialog } from "@/features/home/components/MangaManualImportDialog.tsx";
-import { ProviderImportDialog } from "@/features/home/components/ProviderImportDialog.tsx";
-
-export function ImportDropdown() {
-	const { isAuthenticated } = useAuth();
-
-	const [providerDialogOpen, setProviderDialogOpen] = useState(false);
-	const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
-
-	if (!isAuthenticated) {
-		return null;
-	}
-
-	return (
-		<>
-			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<Button variant="outline" size="sm" className="gap-2 bg-transparent">
-						<Download className="h-4 w-4" />
-						Import
-					</Button>
-				</DropdownMenuTrigger>
-				<DropdownMenuContent align="start" className="">
-					<DropdownMenuItem onClick={() => setProviderDialogOpen(true)}>
-						<Download className="mr-2 h-4 w-4" />
-						Import from Provider
-					</DropdownMenuItem>
-					<DropdownMenuItem onClick={() => setFileImportDialogOpen(true)}>
-						<FileUp className="mr-2 h-4 w-4" />
-						Import from File
-					</DropdownMenuItem>
-
-					<DropdownMenuSeparator />
-					<DropdownMenuItem asChild>
-						<Link
-							to="/import-review"
-							className="cursor-pointer gap-2 text-amber-600 dark:text-amber-500"
-						>
-							<AlertCircle className="h-4 w-4" />
-							<span>Import Review</span>
-						</Link>
-					</DropdownMenuItem>
-				</DropdownMenuContent>
-			</DropdownMenu>
-
-			<ProviderImportDialog
-				dialogOpen={providerDialogOpen}
-				onDialogOpenChange={setProviderDialogOpen}
-			/>
-
-			<MangaManualImportDialog
-				fileImportDialogOpen={fileImportDialogOpen}
-				onFileImportDialogOpenChange={setFileImportDialogOpen}
-			/>
-		</>
-	);
-}
diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
index ed78971..75ddf60 100644
--- a/src/pages/Admin.tsx
+++ b/src/pages/Admin.tsx
@@ -1,10 +1,12 @@
-import { ArrowLeft, FileStack, Server, Shield } from "lucide-react";
+import {AlertCircle, ArrowLeft, Download, FileStack, Server, Shield} from "lucide-react";
 import { type ReactNode, useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 import { Button } from "@/components/ui/button.tsx";
 import { useAuth } from "@/contexts/AuthContext.tsx";
 import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx";
 import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
+import {MangaImport} from "@/features/admin/components/MangaImport.tsx";
+import {useGetMangaImportJobs} from "@/api/generated/content/content.ts";
 
 type Tab =
 	| "import"
@@ -29,9 +31,9 @@ const Admin = () => {
 		// TODO: add user role verification
 	}, [isAuthenticated, isLoading]);
 
-	// const { data } = useGetMangaImportJobs();
-	//
-	// const failedImports = data?.data?.filter(dto => dto.status === MangaImportJobDTOStatus.FAILED)?.length;
+	const { data } = useGetMangaImportJobs();
+
+	const failedImports = data?.data?.failedJobs ?? 0;
 
 	const tabs: { id: Tab; label: string; icon: ReactNode; badge?: number }[] = [
 		{
@@ -44,21 +46,21 @@ const Admin = () => {
 		//     label: "Manga Library",
 		//     icon: <BookOpen className="h-4 w-4" />,
 		// },
-		// {
-		//     id: "import",
-		//     label: "Import",
-		//     icon: <Download className="h-4 w-4" />,
-		// },
-		// {
-		//     id: "ingest-review",
-		//     label: "Ingest Review",
-		//     icon: <AlertCircle className="h-4 w-4" />,
-		//     badge: failedImports.length > 0 ? failedImports.length : undefined,
-		// },
+		{
+		    id: "import",
+		    label: "Import",
+		    icon: <Download className="h-4 w-4" />,
+		},
+		{
+		    id: "ingest-review",
+		    label: "Ingest Review",
+		    icon: <AlertCircle className="h-4 w-4" />,
+		},
 		{
 			id: "import-jobs",
 			label: "Manual Import Jobs",
 			icon: <FileStack className="h-4 w-4" />,
+			badge: failedImports > 0 ? failedImports : undefined,
 		},
 		// {
 		//     id: "users",
@@ -132,73 +134,8 @@ const Admin = () => {
 				{/* Main Content */}
 				<div className="flex-1 px-8 py-8">
 					{activeTab === "providers" && <ProviderManager />}
-
 					{/*{activeTab === "manga" && <AdminMangaTable />}*/}
-
-					{/*{activeTab === "import" && (*/}
-					{/*    <div className="space-y-6">*/}
-					{/*        <div>*/}
-					{/*            <h2 className="text-xl font-semibold text-foreground">*/}
-					{/*                Import Manga*/}
-					{/*            </h2>*/}
-					{/*            <p className="text-sm text-muted-foreground">*/}
-					{/*                Import manga from external providers or upload files directly.*/}
-					{/*            </p>*/}
-					{/*        </div>*/}
-
-					{/*        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">*/}
-					{/*            /!* Import from Provider *!/*/}
-					{/*            <Card className="p-6">*/}
-					{/*                <div className="flex flex-col items-center gap-4 text-center">*/}
-					{/*                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">*/}
-					{/*                        <Download className="h-6 w-6 text-primary" />*/}
-					{/*                    </div>*/}
-					{/*                    <div>*/}
-					{/*                        <h3 className="font-semibold text-foreground">*/}
-					{/*                            Import from Provider*/}
-					{/*                        </h3>*/}
-					{/*                        <p className="mt-1 text-sm text-muted-foreground">*/}
-					{/*                            Import manga from MangaDex, MangaPlus, Bato.to, or*/}
-					{/*                            other supported providers.*/}
-					{/*                        </p>*/}
-					{/*                    </div>*/}
-					{/*                    <ImportDropdown />*/}
-					{/*                </div>*/}
-					{/*            </Card>*/}
-
-					{/*            /!* Import from File *!/*/}
-					{/*            <Card className="p-6">*/}
-					{/*                <div className="flex flex-col items-center gap-4 text-center">*/}
-					{/*                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">*/}
-					{/*                        <FileUp className="h-6 w-6 text-primary" />*/}
-					{/*                    </div>*/}
-					{/*                    <div>*/}
-					{/*                        <h3 className="font-semibold text-foreground">*/}
-					{/*                            Bulk File Upload*/}
-					{/*                        </h3>*/}
-					{/*                        <p className="mt-1 text-sm text-muted-foreground">*/}
-					{/*                            Upload JSON, CSV, or text files to import manga data in*/}
-					{/*                            bulk.*/}
-					{/*                        </p>*/}
-					{/*                    </div>*/}
-					{/*                    <Button*/}
-					{/*                        variant="outline"*/}
-					{/*                        className="gap-2"*/}
-					{/*                        onClick={() => {*/}
-					{/*                            const importBtn = document.querySelector(*/}
-					{/*                                '[data-import-dropdown]'*/}
-					{/*                            ) as HTMLButtonElement*/}
-					{/*                            if (importBtn) importBtn.click()*/}
-					{/*                        }}*/}
-					{/*                    >*/}
-					{/*                        <FileUp className="h-4 w-4" />*/}
-					{/*                        Upload Files*/}
-					{/*                    </Button>*/}
-					{/*                </div>*/}
-					{/*            </Card>*/}
-					{/*        </div>*/}
-					{/*    </div>*/}
-					{/*)}*/}
+					{activeTab === "import" && <MangaImport />}
 
 					{/*{activeTab === "ingest-review" && (*/}
 					{/*    <div className="space-y-6">*/}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 1a4c10f..97a586e 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -8,7 +8,6 @@ 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 { SortDropdown } from "@/features/home/components/SortDropdown.tsx";
 import { useDynamicPageSize } from "@/hooks/useDynamicPageSize.ts";
@@ -93,7 +92,6 @@ const Home = () => {
 									</div>
 								</div>
 								<div className="flex items-center gap-4">
-									<ImportDropdown />
 									<ThemeToggle />
 									<AuthHeader />
 								</div>
-- 
2.49.1


From d57987845973325d41172ab8121cfc36a19bfd8b Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Sat, 28 Mar 2026 19:45:39 -0300
Subject: [PATCH 3/3] refactor: Add IngestReview component and integrate it
 into Admin layout

---
 .../components}/ImportReviewCard.tsx          |  6 +-
 .../admin/components/IngestReview.tsx         | 45 ++++++++++++
 src/pages/Admin.tsx                           | 43 +-----------
 src/pages/ImportReview.tsx                    | 70 -------------------
 4 files changed, 50 insertions(+), 114 deletions(-)
 rename src/features/{import-review => admin/components}/ImportReviewCard.tsx (95%)
 create mode 100644 src/features/admin/components/IngestReview.tsx
 delete mode 100644 src/pages/ImportReview.tsx

diff --git a/src/features/import-review/ImportReviewCard.tsx b/src/features/admin/components/ImportReviewCard.tsx
similarity index 95%
rename from src/features/import-review/ImportReviewCard.tsx
rename to src/features/admin/components/ImportReviewCard.tsx
index 3e95575..57b9958 100644
--- a/src/features/import-review/ImportReviewCard.tsx
+++ b/src/features/admin/components/ImportReviewCard.tsx
@@ -7,9 +7,9 @@ import {
 	useDeleteMangaIngestReview,
 	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";
+import { Button } from "@/components/ui/button.tsx";
+import { Card } from "@/components/ui/card.tsx";
+import { Input } from "@/components/ui/input.tsx";
 
 interface ImportReviewCardProps {
 	importReview: MangaIngestReviewDTO;
diff --git a/src/features/admin/components/IngestReview.tsx b/src/features/admin/components/IngestReview.tsx
new file mode 100644
index 0000000..ad66fd4
--- /dev/null
+++ b/src/features/admin/components/IngestReview.tsx
@@ -0,0 +1,45 @@
+import {Card} from "@/components/ui/card.tsx";
+import {AlertCircle} from "lucide-react";
+import {useGetMangaIngestReviews} from "@/api/generated/manga-ingest-review/manga-ingest-review.ts";
+import {ImportReviewCard} from "@/features/admin/components/ImportReviewCard.tsx";
+
+export const IngestReview = () => {
+    const { data: importReviewData, queryKey } = useGetMangaIngestReviews();
+
+    return (<div className="space-y-6">
+        <div>
+            <h2 className="text-xl font-semibold text-foreground">
+                Ingest Review
+            </h2>
+            <p className="text-sm text-muted-foreground">
+                Review and resolve imports that need manual matching.
+            </p>
+        </div>
+
+        {!importReviewData?.data || importReviewData.data.length === 0 ? (
+            <Card className="p-8 text-center">
+                <AlertCircle className="mx-auto h-12 w-12 text-muted-foreground" />
+                <h2 className="mt-4 text-lg font-semibold text-foreground">
+                    No Imports to Review
+                </h2>
+                <p className="mt-2 text-muted-foreground">
+                    All your imports have been processed successfully!
+                </p>
+            </Card>
+        ) : (
+            <div className="space-y-4">
+                <div className="text-sm text-muted-foreground">
+                    {importReviewData.data.length} import
+                    {importReviewData.data.length !== 1 ? "s" : ""} to review
+                </div>
+                {importReviewData.data.map((importReview) => (
+                    <ImportReviewCard
+                        key={importReview.id}
+                        importReview={importReview}
+                        queryKey={queryKey}
+                    />
+                ))}
+            </div>
+        )}
+    </div>);
+};
\ No newline at end of file
diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
index 75ddf60..8b8f74e 100644
--- a/src/pages/Admin.tsx
+++ b/src/pages/Admin.tsx
@@ -7,6 +7,7 @@ import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.t
 import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
 import {MangaImport} from "@/features/admin/components/MangaImport.tsx";
 import {useGetMangaImportJobs} from "@/api/generated/content/content.ts";
+import {IngestReview} from "@/features/admin/components/IngestReview.tsx";
 
 type Tab =
 	| "import"
@@ -72,10 +73,8 @@ const Admin = () => {
 	return (
 		<main className="min-h-screen bg-background">
 			<div className="flex">
-				{/* Sidebar */}
 				<aside className="sticky top-0 h-screen w-64 shrink-0 border-r border-border bg-card">
 					<div className="flex h-full flex-col">
-						{/* Sidebar Header */}
 						<div className="border-b border-border px-6 py-5">
 							<div className="flex items-center gap-2">
 								<Shield className="h-5 w-5 text-primary" />
@@ -88,7 +87,6 @@ const Admin = () => {
 							</p>
 						</div>
 
-						{/* Nav */}
 						<nav className="flex-1 space-y-1 px-3 py-4">
 							{tabs.map((tab) => (
 								<button
@@ -117,7 +115,6 @@ const Admin = () => {
 							))}
 						</nav>
 
-						{/* Sidebar Footer */}
 						<div className="border-t border-border px-3 py-4">
 							<Button
 								variant="ghost"
@@ -131,47 +128,11 @@ const Admin = () => {
 					</div>
 				</aside>
 
-				{/* Main Content */}
 				<div className="flex-1 px-8 py-8">
 					{activeTab === "providers" && <ProviderManager />}
 					{/*{activeTab === "manga" && <AdminMangaTable />}*/}
 					{activeTab === "import" && <MangaImport />}
-
-					{/*{activeTab === "ingest-review" && (*/}
-					{/*    <div className="space-y-6">*/}
-					{/*        <div>*/}
-					{/*            <h2 className="text-xl font-semibold text-foreground">*/}
-					{/*                Ingest Review*/}
-					{/*            </h2>*/}
-					{/*            <p className="text-sm text-muted-foreground">*/}
-					{/*                Review and resolve imports that need manual matching.*/}
-					{/*            </p>*/}
-					{/*        </div>*/}
-
-					{/*        {failedImports.length === 0 ? (*/}
-					{/*            <Card className="p-8 text-center">*/}
-					{/*                <AlertCircle className="mx-auto h-12 w-12 text-muted-foreground" />*/}
-					{/*                <h3 className="mt-4 text-lg font-semibold text-foreground">*/}
-					{/*                    No Pending Reviews*/}
-					{/*                </h3>*/}
-					{/*                <p className="mt-2 text-muted-foreground">*/}
-					{/*                    All imports have been processed successfully.*/}
-					{/*                </p>*/}
-					{/*            </Card>*/}
-					{/*        ) : (*/}
-					{/*            <div className="space-y-4">*/}
-					{/*                <p className="text-sm text-muted-foreground">*/}
-					{/*                    {failedImports.length} import*/}
-					{/*                    {failedImports.length !== 1 ? "s" : ""} to review*/}
-					{/*                </p>*/}
-					{/*                {failedImports.map((fi) => (*/}
-					{/*                    <FailedImportCard key={fi.id} failedImport={fi} />*/}
-					{/*                ))}*/}
-					{/*            </div>*/}
-					{/*        )}*/}
-					{/*    </div>*/}
-					{/*)}*/}
-
+					{activeTab === "ingest-review" && <IngestReview />}
 					{activeTab === "import-jobs" && <FailedImportJobs />}
 
 					{/*{activeTab === "users" && <AdminUserManager />}*/}
diff --git a/src/pages/ImportReview.tsx b/src/pages/ImportReview.tsx
deleted file mode 100644
index 8e92738..0000000
--- a/src/pages/ImportReview.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-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";
-
-export default function ImportReviewPage() {
-	const navigate = useNavigate();
-	const { user, isAuthenticated } = useAuth();
-
-	const { data: importReviewData, queryKey } = useGetMangaIngestReviews();
-
-	useEffect(() => {
-		if (!user) {
-			return;
-		}
-
-		if (!isAuthenticated) {
-			navigate("/login");
-		}
-	}, [isAuthenticated, navigate, user]);
-
-	if (!user) {
-		return null;
-	}
-
-	return (
-		<main className="min-h-screen bg-background">
-			<div className="container mx-auto px-4 py-8">
-				<div className="mb-8">
-					<h1 className="text-3xl font-bold text-foreground">Import Review</h1>
-					<p className="mt-2 text-muted-foreground">
-						Review and resolve manga imports by manually matching them with
-						MyAnimeList entries.
-					</p>
-				</div>
-
-				{!importReviewData?.data || importReviewData.data.length === 0 ? (
-					<Card className="p-8 text-center">
-						<AlertCircle className="mx-auto h-12 w-12 text-muted-foreground" />
-						<h2 className="mt-4 text-lg font-semibold text-foreground">
-							No Imports to Review
-						</h2>
-						<p className="mt-2 text-muted-foreground">
-							All your imports have been processed successfully!
-						</p>
-					</Card>
-				) : (
-					<div className="space-y-4">
-						<div className="text-sm text-muted-foreground">
-							{importReviewData.data.length} import
-							{importReviewData.data.length !== 1 ? "s" : ""} to review
-						</div>
-						{importReviewData.data.map((importReview) => (
-							<ImportReviewCard
-								key={importReview.id}
-								importReview={importReview}
-								queryKey={queryKey}
-							/>
-						))}
-					</div>
-				)}
-			</div>
-		</main>
-	);
-}
-- 
2.49.1