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 { Button } from "@/components/ui/button.tsx";
-import { Card } from "@/components/ui/card";
+import { Card } from "@/components/ui/card.tsx";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input.tsx";
 
 interface ImportReviewCardProps {
 	importReview: MangaIngestReviewDTO;

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>);
+};

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" && <IngestReview />}
-					{/*{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 === "import-jobs" && <FailedImportJobs />}
 
 					{/*{activeTab === "users" && <AdminUserManager />}*/}

src/pages/ImportReview.tsx

@@ -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>
-	);
-}