Merge pull request 'refactor' (#27) from refactor into main
Reviewed-on: #27
This commit is contained in:
commit
9f14732143
@ -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>
|
||||
|
||||
@ -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;
|
||||
45
src/features/admin/components/IngestReview.tsx
Normal file
45
src/features/admin/components/IngestReview.tsx
Normal file
@ -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>);
|
||||
};
|
||||
80
src/features/admin/components/MangaImport.tsx
Normal file
80
src/features/admin/components/MangaImport.tsx
Normal file
@ -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>);
|
||||
}
|
||||
@ -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";
|
||||
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;
|
||||
@ -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);
|
||||
}}
|
||||
>
|
||||
@ -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,
|
||||
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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 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 +47,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",
|
||||
@ -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" && (*/}
|
||||
{/* <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" && <MangaImport />}
|
||||
{activeTab === "ingest-review" && <IngestReview />}
|
||||
{activeTab === "import-jobs" && <FailedImportJobs />}
|
||||
|
||||
{/*{activeTab === "users" && <AdminUserManager />}*/}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user