Merge pull request 'feat/admin' (#33) from feat/admin into main

Reviewed-on: #33

src/api/generated/api.schemas.ts

@@ -117,6 +117,7 @@ export interface ContentProviderDTO {
   name: string;
   url?: string;
   active?: boolean;
+  supportsContentFetch?: boolean;
 }
 
 export interface ContentProviderListDTO {
@@ -214,9 +215,9 @@ export interface PageMangaImportJobDTO {
   number?: number;
   pageable?: PageableObject;
   numberOfElements?: number;
+  sort?: SortObject;
   first?: boolean;
   last?: boolean;
-  sort?: SortObject;
   empty?: boolean;
 }
 
@@ -277,9 +278,9 @@ export interface PageMangaListDTO {
   number?: number;
   pageable?: PageableObject;
   numberOfElements?: number;
+  sort?: SortObject;
   first?: boolean;
   last?: boolean;
-  sort?: SortObject;
   empty?: boolean;
 }
 

src/features/admin/components/FailedImportJobs.tsx

@@ -18,6 +18,8 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog.tsx";
 import { Input } from "@/components/ui/input.tsx";
+import { Skeleton } from "@/components/ui/skeleton.tsx";
+import { Spinner } from "@/components/ui/spinner.tsx";
 import {
 	Select,
 	SelectContent,
@@ -46,7 +48,7 @@ export const FailedImportJobs = () => {
 	const [errorDialogOpen, setErrorDialogOpen] = useState(false);
 	const [currentPage, setCurrentPage] = useState(1);
 
-	const { data } = useGetMangaImportJobs({
+	const { data, isPending } = useGetMangaImportJobs({
 		status: statusFilter,
 		searchQuery: searchQuery,
 		page: currentPage - 1,
@@ -54,6 +56,41 @@ export const FailedImportJobs = () => {
 	});
 	const importJobsData = data?.data;
 
+	if (isPending) {
+		return (
+			<div className="space-y-5">
+				<div>
+					<Skeleton className="h-7 w-52" />
+					<Skeleton className="mt-2 h-4 w-72" />
+				</div>
+
+				<div className="grid grid-cols-2 gap-4 sm:grid-cols-5">
+					{Array.from({ length: 5 }).map((_, i) => (
+						<Card key={i} className="p-4">
+							<Skeleton className="h-4 w-20" />
+							<Skeleton className="mt-2 h-8 w-16" />
+						</Card>
+					))}
+				</div>
+
+				<div className="flex flex-wrap items-center gap-4">
+					<div className="relative flex-1 min-w-[200px]">
+						<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+						<Skeleton className="h-10 w-full pl-10" />
+					</div>
+					<Skeleton className="h-10 w-[150px]" />
+				</div>
+
+				<Card>
+					<div className="p-6 flex flex-col items-center justify-center">
+						<Spinner className="size-12 text-primary" />
+						<Skeleton className="mt-4 h-4 w-48" />
+					</div>
+				</Card>
+			</div>
+		);
+	}
+
 	const formatDate = (dateString: string) => {
 		return new Date(dateString).toLocaleString("en-US", {
 			year: "numeric",
@@ -328,23 +365,6 @@ export const FailedImportJobs = () => {
 								>
 									Close
 								</Button>
-								{/*<Button*/}
-								{/*    variant="default"*/}
-								{/*    onClick={() => {*/}
-								{/*        // Mock retry action*/}
-								{/*        setJobs((prev) =>*/}
-								{/*            prev.map((j) =>*/}
-								{/*                j.id === selectedJob.id*/}
-								{/*                    ? { ...j, status: "PENDING" as ImportStatus, updatedAt: new Date().toISOString() }*/}
-								{/*                    : j*/}
-								{/*            )*/}
-								{/*        )*/}
-								{/*        setErrorDialogOpen(false)*/}
-								{/*    }}*/}
-								{/*>*/}
-								{/*    <RefreshCw className="mr-2 h-4 w-4" />*/}
-								{/*    Retry Import*/}
-								{/*</Button>*/}
 							</div>
 						</div>
 					)}

src/features/admin/components/IngestReview.tsx

@@ -2,9 +2,60 @@ 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";
+import {Skeleton} from "@/components/ui/skeleton.tsx";
+import {Spinner} from "@/components/ui/spinner.tsx";
 
 export const IngestReview = () => {
-    const { data: importReviewData, queryKey } = useGetMangaIngestReviews();
+    const { data: importReviewData, queryKey, isPending } = useGetMangaIngestReviews();
+
+    if (isPending) {
+        return (
+            <div className="space-y-6">
+                <div>
+                    <Skeleton className="h-7 w-40" />
+                    <Skeleton className="mt-2 h-4 w-72" />
+                </div>
+
+                <div className="flex flex-col items-center justify-center py-12">
+                    <Spinner className="size-12 text-primary" />
+                    <Skeleton className="mt-4 h-4 w-48" />
+                </div>
+
+                {Array.from({ length: 2 }).map((_, i) => (
+                    <Card key={i} className="p-4">
+                        <div className="space-y-4">
+                            <div className="flex items-start justify-between">
+                                <div className="flex-1 space-y-2">
+                                    <Skeleton className="h-5 w-48" />
+                                    <Skeleton className="h-4 w-32" />
+                                </div>
+                            </div>
+
+                            <Skeleton className="h-16 w-full rounded-md" />
+
+                            <div className="space-y-3">
+                                <div className="flex flex-row gap-4 w-full">
+                                    <div className="w-full space-y-2">
+                                        <Skeleton className="h-4 w-32" />
+                                        <Skeleton className="h-10 w-full" />
+                                    </div>
+                                    <div className="w-full space-y-2">
+                                        <Skeleton className="h-4 w-32" />
+                                        <Skeleton className="h-10 w-full" />
+                                    </div>
+                                </div>
+
+                                <div className="flex gap-2">
+                                    <Skeleton className="h-10 flex-1" />
+                                    <Skeleton className="h-10 w-10" />
+                                </div>
+                            </div>
+                        </div>
+                    </Card>
+                ))}
+            </div>
+        );
+    }
 
     return (<div className="space-y-6">
         <div>

src/features/admin/components/ProviderManager.tsx

@@ -7,6 +7,7 @@ import {
 import { Badge } from "@/components/ui/badge.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Card } from "@/components/ui/card.tsx";
+import {toast} from "sonner";
 
 export const ProviderManager = () => {
 	const { data } = useGetContentProviders();
@@ -15,12 +16,26 @@ export const ProviderManager = () => {
 	const {
 		mutate: mutateFetchContentProviderMangas,
 		isPending: isPendingFetchContentProviderMangas,
-	} = useFetchContentProviderMangas();
+	} = useFetchContentProviderMangas({
+		mutation: {
+			onSuccess: () => {
+				toast.success("Content Provider mangas update queued successfully!");
+			},
+		},
+	});
 
 	const {
 		mutate: mutateFetchAllContentProviderMangas,
 		isPending: isPendingFetchAllContentProviderMangas,
-	} = useFetchAllContentProviderMangas();
+	} = useFetchAllContentProviderMangas(
+		{
+			mutation: {
+				onSuccess: () => {
+					toast.success("All Content Provider mangas update queued successfully!");
+				},
+			},
+		}
+	);
 
 	const activeCount = providers?.filter((p) => p.active).length;
 
@@ -104,6 +119,7 @@ export const ProviderManager = () => {
 									</p>
 								</div>
 
+								{provider.supportsContentFetch && (
 									<Button
 										variant="outline"
 										size="sm"
@@ -124,6 +140,7 @@ export const ProviderManager = () => {
 										)}
 										Update
 									</Button>
+								)}
 							</div>
 						</Card>
 					);

src/pages/Admin.tsx

@@ -2,6 +2,8 @@ import {AlertCircle, ArrowLeft, Download, FileStack, Server, Shield} from "lucid
 import { type ReactNode, useEffect, useState } from "react";
 import { useNavigate } from "react-router";
 import { Button } from "@/components/ui/button.tsx";
+import { Skeleton } from "@/components/ui/skeleton.tsx";
+import { Spinner } from "@/components/ui/spinner.tsx";
 import { useAuth } from "@/contexts/AuthContext.tsx";
 import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx";
 import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
@@ -70,6 +72,52 @@ const Admin = () => {
 		// },
 	];
 
+	if (isLoading) {
+		return (
+			<main className="min-h-screen bg-background">
+				<div className="flex">
+					<aside className="sticky top-0 h-screen w-64 shrink-0 border-r border-border bg-card">
+						<div className="flex h-full flex-col">
+							<div className="border-b border-border px-6 py-5">
+								<div className="flex items-center gap-2">
+									<Skeleton className="h-5 w-5" />
+									<Skeleton className="h-5 w-28" />
+								</div>
+								<Skeleton className="mt-2 h-3 w-40" />
+							</div>
+
+							<nav className="flex-1 space-y-1 px-3 py-4">
+								{Array.from({ length: 4 }).map((_, i) => (
+									<div
+										key={i}
+										className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5"
+									>
+										<Skeleton className="h-4 w-4" />
+										<Skeleton className="h-4 w-24" />
+									</div>
+								))}
+							</nav>
+
+							<div className="border-t border-border px-3 py-4">
+								<div className="flex items-center gap-2 px-3 py-2">
+									<Skeleton className="h-4 w-4" />
+									<Skeleton className="h-4 w-20" />
+								</div>
+							</div>
+						</div>
+					</aside>
+
+					<div className="flex-1 flex items-center justify-center px-8 py-8">
+						<div className="flex flex-col items-center gap-4">
+							<Spinner className="size-12 text-primary" />
+							<Skeleton className="h-4 w-48" />
+						</div>
+					</div>
+				</div>
+			</main>
+		);
+	}
+
 	return (
 		<main className="min-h-screen bg-background">
 			<div className="flex">

src/pages/Manga.tsx

@@ -249,7 +249,8 @@ const Manga = () => {
 					{/* Manga Info Section */}
 					<div className="grid gap-8 lg:grid-cols-[300px_1fr]">
 						{/* Cover */}
-						<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted lg:sticky lg:top-8 lg:h-fit">
+						<div className="lg:sticky lg:top-24">
+							<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted">
 								<img
 									src={
 										(mangaData.data?.coverImageKey &&
@@ -262,6 +263,7 @@ const Manga = () => {
 									className="absolute inset-0 w-full h-full object-cover"
 								/>
 							</div>
+						</div>
 
 						{/* Details */}
 						<div className="space-y-6">
@@ -359,9 +361,10 @@ const Manga = () => {
 									</div>
 								)}
 
-							<p className="text-pretty text-justify leading-relaxed text-foreground">
+							<p
-								{mangaData.data?.synopsis}
+								className="text-pretty text-justify leading-relaxed text-foreground"
-							</p>
+								dangerouslySetInnerHTML={{ __html: mangaData.data?.synopsis ?? "" }}
+							/>
 
 							<div className="grid gap-4 sm:grid-cols-2">
 								<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">