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>

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

src/features/admin/components/MangaManualImportDialog.tsx

@@ -1,10 +1,10 @@
 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";
 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";
+} from "@/components/ui/dialog.tsx";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input.tsx";
-import { Progress } from "@/components/ui/progress";
+import { Progress } from "@/components/ui/progress.tsx";
 
 interface MangaManualImportDialogProps {
 	fileImportDialogOpen: boolean;
@@ -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">
+							<div className="space-y-3 max-h-60 overflow-y-auto pr-2">
-								{files.map((file) => (
+								{files.map((file) => {
-									<div key={file.name} className="space-y-1">
+									const isError = uploadErrors[file.name];
-										<div className="flex justify-between text-xs text-muted-foreground">
+									const progress = uploadProgress[file.name] || 0;
-											<span
+									return (
-												className="truncate pr-4 max-w-[200px]"
+										<div key={file.name} className="space-y-1">
-												title={file.name}
+											<div className="flex justify-between text-xs text-muted-foreground">
-											>
+												<span
-												{file.name}
+													className="truncate pr-4 max-w-[200px]"
-											</span>
+													title={file.name}
-											<span>{uploadProgress[file.name] || 0}%</span>
+												>
+													{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);
 						}}
 					>

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,

src/features/home/components/ImportDropdown.tsx

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

src/pages/Admin.tsx

@@ -1,10 +1,13 @@
-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";
+import {IngestReview} from "@/features/admin/components/IngestReview.tsx";
 
 type Tab =
 	| "import"
@@ -29,9 +32,9 @@ const Admin = () => {
 		// TODO: add user role verification
 	}, [isAuthenticated, isLoading]);
 
-	// const { data } = useGetMangaImportJobs();
+	const { data } = useGetMangaImportJobs();
-	//
+
-	// const failedImports = data?.data?.filter(dto => dto.status === MangaImportJobDTOStatus.FAILED)?.length;
+	const failedImports = data?.data?.failedJobs ?? 0;
 
 	const tabs: { id: Tab; label: string; icon: ReactNode; badge?: number }[] = [
 		{
@@ -44,21 +47,21 @@ const Admin = () => {
 		//     label: "Manga Library",
 		//     icon: <BookOpen className="h-4 w-4" />,
 		// },
-		// {
+		{
-		//     id: "import",
+		    id: "import",
-		//     label: "Import",
+		    label: "Import",
-		//     icon: <Download className="h-4 w-4" />,
+		    icon: <Download className="h-4 w-4" />,
-		// },
+		},
-		// {
+		{
-		//     id: "ingest-review",
+		    id: "ingest-review",
-		//     label: "Ingest Review",
+		    label: "Ingest Review",
-		//     icon: <AlertCircle className="h-4 w-4" />,
+		    icon: <AlertCircle className="h-4 w-4" />,
-		//     badge: failedImports.length > 0 ? failedImports.length : undefined,
+		},
-		// },
 		{
 			id: "import-jobs",
 			label: "Manual Import Jobs",
 			icon: <FileStack className="h-4 w-4" />,
+			badge: failedImports > 0 ? failedImports : undefined,
 		},
 		// {
 		//     id: "users",
@@ -70,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" />
@@ -86,7 +87,6 @@ const Admin = () => {
 							</p>
 						</div>
 
-						{/* Nav */}
 						<nav className="flex-1 space-y-1 px-3 py-4">
 							{tabs.map((tab) => (
 								<button
@@ -115,7 +115,6 @@ const Admin = () => {
 							))}
 						</nav>
 
-						{/* Sidebar Footer */}
 						<div className="border-t border-border px-3 py-4">
 							<Button
 								variant="ghost"
@@ -129,112 +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 === "import" && (*/}
+					{activeTab === "ingest-review" && <IngestReview />}
-					{/*    <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 === "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/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>

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