refactor: Introduce MangaImport component and update import functionality in Admin

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

@@ -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";
+} 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;

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,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 { 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 +46,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",
@@ -132,73 +134,8 @@ const Admin = () => {
 				{/* Main Content */}
 				<div className="flex-1 px-8 py-8">
 					{activeTab === "providers" && <ProviderManager />}
-
 					{/*{activeTab === "manga" && <AdminMangaTable />}*/}
-
+					{activeTab === "import" && <MangaImport />}
-					{/*{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 === "ingest-review" && (*/}
 					{/*    <div className="space-y-6">*/}

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>