mirror of
https://github.com/SamyRai/tercul-frontend.git
synced 2025-12-27 04:51:34 +00:00
Introduce editorial dashboard for managing literary content
Adds dashboard pages for managing blogs and accesses, and refactors the useToast hook. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/c4c7f30b-90bf-4c82-974e-31ed5fe959b1.jpg
This commit is contained in:
mukimovd
parent
1f9dc81441
commit
74939a2c07
@ -17,6 +17,10 @@ import Profile from "@/pages/user/Profile";
|
|||||||
import Submit from "@/pages/Submit";
|
import Submit from "@/pages/Submit";
|
||||||
import { BlogList, BlogDetail, BlogCreate } from "@/pages/blog";
|
import { BlogList, BlogDetail, BlogCreate } from "@/pages/blog";
|
||||||
|
|
||||||
|
// Dashboard pages
|
||||||
|
import Dashboard from "@/pages/dashboard/Dashboard";
|
||||||
|
import BlogManagement from "@/pages/dashboard/BlogManagement";
|
||||||
|
|
||||||
function Router() {
|
function Router() {
|
||||||
return (
|
return (
|
||||||
<Switch>
|
<Switch>
|
||||||
@ -34,6 +38,10 @@ function Router() {
|
|||||||
<Route path="/blog" component={BlogList} />
|
<Route path="/blog" component={BlogList} />
|
||||||
<Route path="/blog/create" component={BlogCreate} />
|
<Route path="/blog/create" component={BlogCreate} />
|
||||||
<Route path="/blog/:slug" component={BlogDetail} />
|
<Route path="/blog/:slug" component={BlogDetail} />
|
||||||
|
|
||||||
|
{/* Dashboard Routes */}
|
||||||
|
<Route path="/dashboard" component={Dashboard} />
|
||||||
|
<Route path="/dashboard/blog" component={BlogManagement} />
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
import { ReactNode } from "react";
|
import { ReactNode } from "react";
|
||||||
import { Link, useLocation } from "wouter";
|
import { Link, useLocation } from "wouter";
|
||||||
import { PageLayout } from "./PageLayout";
|
|
||||||
import { useAuth } from "@/hooks/useAuth";
|
import { useAuth } from "@/hooks/useAuth";
|
||||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import {
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
Card,
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
CardContent
|
||||||
|
} from "@/components/ui/card";
|
||||||
import {
|
import {
|
||||||
BarChart3,
|
BarChart3,
|
||||||
BookOpen,
|
BookOpen,
|
||||||
@ -19,7 +19,9 @@ import {
|
|||||||
Layers,
|
Layers,
|
||||||
AlertTriangle
|
AlertTriangle
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
|
||||||
|
// Since we don't have the Tabs component yet, we'll create a simplified nav menu
|
||||||
|
// In a full implementation, we would use shadcn Tabs
|
||||||
|
|
||||||
interface DashboardLayoutProps {
|
interface DashboardLayoutProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@ -33,22 +35,20 @@ export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayo
|
|||||||
// If user doesn't have permissions, show error
|
// If user doesn't have permissions, show error
|
||||||
if (!isLoading && !(canCreateContent || canReviewContent || canManageContent || canManageUsers)) {
|
if (!isLoading && !(canCreateContent || canReviewContent || canManageContent || canManageUsers)) {
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<div className="max-w-[1200px] mx-auto px-4 md:px-6 py-8">
|
||||||
<div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 py-8">
|
<Card className="border-red-400 dark:border-red-600">
|
||||||
<Card className="border-red-400 dark:border-red-600">
|
<CardContent className="pt-6 flex flex-col items-center">
|
||||||
<CardContent className="pt-6 flex flex-col items-center">
|
<AlertTriangle className="h-12 w-12 text-red-500 mb-4" />
|
||||||
<AlertTriangle className="h-12 w-12 text-red-500 mb-4" />
|
<h1 className="text-2xl font-bold mb-2">Access Denied</h1>
|
||||||
<h1 className="text-2xl font-bold mb-2">Access Denied</h1>
|
<p className="text-muted-foreground mb-4 text-center">
|
||||||
<p className="text-muted-foreground mb-4 text-center">
|
You don't have permission to access this area. Please contact an administrator if you believe this is an error.
|
||||||
You don't have permission to access this area. Please contact an administrator if you believe this is an error.
|
</p>
|
||||||
</p>
|
<Link href="/">
|
||||||
<Link href="/">
|
<a className="text-primary hover:underline">Return to Home</a>
|
||||||
<a className="text-primary hover:underline">Return to Home</a>
|
</Link>
|
||||||
</Link>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
|
||||||
</PageLayout>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,59 +95,61 @@ export function DashboardLayout({ children, title = "Dashboard" }: DashboardLayo
|
|||||||
const navItems = getDashboardNavItems();
|
const navItems = getDashboardNavItems();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<div className="max-w-[1200px] mx-auto px-4 md:px-6 pt-6 pb-16">
|
||||||
<div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 pt-6 pb-16">
|
<div className="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-8">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-8">
|
{/* Sidebar */}
|
||||||
{/* Sidebar */}
|
<div>
|
||||||
<div>
|
<div className="sticky top-24">
|
||||||
<div className="sticky top-24">
|
<div className="mb-8">
|
||||||
<div className="mb-8">
|
<h1 className="text-2xl font-bold">Editorial Dashboard</h1>
|
||||||
<h1 className="text-2xl font-bold">Editorial Dashboard</h1>
|
{isLoading ? (
|
||||||
{isLoading ? (
|
<div className="h-5 w-32 mt-1 bg-gray-200 animate-pulse rounded"></div>
|
||||||
<Skeleton className="h-5 w-32 mt-1" />
|
) : (
|
||||||
) : (
|
<p className="text-muted-foreground">
|
||||||
<p className="text-muted-foreground">
|
Welcome, {user?.displayName || user?.username}
|
||||||
Welcome, {user?.displayName || user?.username}
|
</p>
|
||||||
</p>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ScrollArea className="h-[calc(100vh-250px)]">
|
|
||||||
<Tabs defaultValue={location} orientation="vertical" className="w-full">
|
|
||||||
<TabsList className="flex flex-col h-auto bg-transparent p-0 w-full">
|
|
||||||
{navItems.map((item) => (
|
|
||||||
<Link key={item.href} href={item.href}>
|
|
||||||
<TabsTrigger
|
|
||||||
value={item.href}
|
|
||||||
className="justify-start w-full mb-1 data-[state=active]:bg-primary/10"
|
|
||||||
>
|
|
||||||
{item.icon}
|
|
||||||
{item.label}
|
|
||||||
</TabsTrigger>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</TabsList>
|
|
||||||
</Tabs>
|
|
||||||
</ScrollArea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div className="h-[calc(100vh-250px)] overflow-auto pr-4">
|
||||||
{/* Main content */}
|
<nav className="flex flex-col space-y-1">
|
||||||
<div>
|
{navItems.map((item) => {
|
||||||
<div className="pb-4 mb-6 border-b">
|
const isActive = location === item.href;
|
||||||
<h2 className="text-xl font-semibold">{title}</h2>
|
return (
|
||||||
|
<Link key={item.href} href={item.href}>
|
||||||
|
<a
|
||||||
|
className={`flex items-center px-3 py-2 text-sm font-medium rounded-md ${
|
||||||
|
isActive
|
||||||
|
? "bg-primary/10 text-primary"
|
||||||
|
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.icon}
|
||||||
|
{item.label}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
{isLoading ? (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Skeleton className="h-8 w-full" />
|
|
||||||
<Skeleton className="h-64 w-full" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
children
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div>
|
||||||
|
<div className="pb-4 mb-6 border-b">
|
||||||
|
<h2 className="text-xl font-semibold">{title}</h2>
|
||||||
|
</div>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="h-8 w-full bg-gray-200 animate-pulse rounded"></div>
|
||||||
|
<div className="h-64 w-full bg-gray-200 animate-pulse rounded"></div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</PageLayout>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,191 +1,48 @@
|
|||||||
import * as React from "react"
|
// Basic toast hook for notifications
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
import type {
|
type ToastVariant = "default" | "destructive";
|
||||||
ToastActionElement,
|
|
||||||
ToastProps,
|
|
||||||
} from "@/components/ui/toast"
|
|
||||||
|
|
||||||
const TOAST_LIMIT = 1
|
interface ToastOptions {
|
||||||
const TOAST_REMOVE_DELAY = 1000000
|
title?: string;
|
||||||
|
description?: string;
|
||||||
type ToasterToast = ToastProps & {
|
variant?: ToastVariant;
|
||||||
id: string
|
duration?: number;
|
||||||
title?: React.ReactNode
|
id?: number;
|
||||||
description?: React.ReactNode
|
|
||||||
action?: ToastActionElement
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const actionTypes = {
|
export function useToast() {
|
||||||
ADD_TOAST: "ADD_TOAST",
|
const [toasts, setToasts] = useState<ToastOptions[]>([]);
|
||||||
UPDATE_TOAST: "UPDATE_TOAST",
|
|
||||||
DISMISS_TOAST: "DISMISS_TOAST",
|
|
||||||
REMOVE_TOAST: "REMOVE_TOAST",
|
|
||||||
} as const
|
|
||||||
|
|
||||||
let count = 0
|
const toast = (options: ToastOptions) => {
|
||||||
|
const id = Date.now();
|
||||||
function genId() {
|
const newToast = {
|
||||||
count = (count + 1) % Number.MAX_SAFE_INTEGER
|
...options,
|
||||||
return count.toString()
|
|
||||||
}
|
|
||||||
|
|
||||||
type ActionType = typeof actionTypes
|
|
||||||
|
|
||||||
type Action =
|
|
||||||
| {
|
|
||||||
type: ActionType["ADD_TOAST"]
|
|
||||||
toast: ToasterToast
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
type: ActionType["UPDATE_TOAST"]
|
|
||||||
toast: Partial<ToasterToast>
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
type: ActionType["DISMISS_TOAST"]
|
|
||||||
toastId?: ToasterToast["id"]
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
type: ActionType["REMOVE_TOAST"]
|
|
||||||
toastId?: ToasterToast["id"]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
toasts: ToasterToast[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
|
|
||||||
|
|
||||||
const addToRemoveQueue = (toastId: string) => {
|
|
||||||
if (toastTimeouts.has(toastId)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const timeout = setTimeout(() => {
|
|
||||||
toastTimeouts.delete(toastId)
|
|
||||||
dispatch({
|
|
||||||
type: "REMOVE_TOAST",
|
|
||||||
toastId: toastId,
|
|
||||||
})
|
|
||||||
}, TOAST_REMOVE_DELAY)
|
|
||||||
|
|
||||||
toastTimeouts.set(toastId, timeout)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const reducer = (state: State, action: Action): State => {
|
|
||||||
switch (action.type) {
|
|
||||||
case "ADD_TOAST":
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
|
||||||
}
|
|
||||||
|
|
||||||
case "UPDATE_TOAST":
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: state.toasts.map((t) =>
|
|
||||||
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
|
||||||
),
|
|
||||||
}
|
|
||||||
|
|
||||||
case "DISMISS_TOAST": {
|
|
||||||
const { toastId } = action
|
|
||||||
|
|
||||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
|
||||||
// but I'll keep it here for simplicity
|
|
||||||
if (toastId) {
|
|
||||||
addToRemoveQueue(toastId)
|
|
||||||
} else {
|
|
||||||
state.toasts.forEach((toast) => {
|
|
||||||
addToRemoveQueue(toast.id)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: state.toasts.map((t) =>
|
|
||||||
t.id === toastId || toastId === undefined
|
|
||||||
? {
|
|
||||||
...t,
|
|
||||||
open: false,
|
|
||||||
}
|
|
||||||
: t
|
|
||||||
),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
case "REMOVE_TOAST":
|
|
||||||
if (action.toastId === undefined) {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: [],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const listeners: Array<(state: State) => void> = []
|
|
||||||
|
|
||||||
let memoryState: State = { toasts: [] }
|
|
||||||
|
|
||||||
function dispatch(action: Action) {
|
|
||||||
memoryState = reducer(memoryState, action)
|
|
||||||
listeners.forEach((listener) => {
|
|
||||||
listener(memoryState)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
type Toast = Omit<ToasterToast, "id">
|
|
||||||
|
|
||||||
function toast({ ...props }: Toast) {
|
|
||||||
const id = genId()
|
|
||||||
|
|
||||||
const update = (props: ToasterToast) =>
|
|
||||||
dispatch({
|
|
||||||
type: "UPDATE_TOAST",
|
|
||||||
toast: { ...props, id },
|
|
||||||
})
|
|
||||||
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
|
||||||
|
|
||||||
dispatch({
|
|
||||||
type: "ADD_TOAST",
|
|
||||||
toast: {
|
|
||||||
...props,
|
|
||||||
id,
|
id,
|
||||||
open: true,
|
duration: options.duration || 3000,
|
||||||
onOpenChange: (open) => {
|
};
|
||||||
if (!open) dismiss()
|
|
||||||
},
|
setToasts((prev) => [...prev, newToast]);
|
||||||
},
|
|
||||||
})
|
// Auto dismiss
|
||||||
|
setTimeout(() => {
|
||||||
|
dismiss(id);
|
||||||
|
}, newToast.duration);
|
||||||
|
|
||||||
|
return id;
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
const dismiss = (id?: number) => {
|
||||||
id: id,
|
if (id) {
|
||||||
dismiss,
|
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
||||||
update,
|
} else {
|
||||||
}
|
setToasts([]);
|
||||||
}
|
|
||||||
|
|
||||||
function useToast() {
|
|
||||||
const [state, setState] = React.useState<State>(memoryState)
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
listeners.push(setState)
|
|
||||||
return () => {
|
|
||||||
const index = listeners.indexOf(setState)
|
|
||||||
if (index > -1) {
|
|
||||||
listeners.splice(index, 1)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [state])
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...state,
|
|
||||||
toast,
|
toast,
|
||||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
dismiss,
|
||||||
}
|
toasts
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export { useToast, toast }
|
|
||||||
|
|||||||
@ -1 +1,66 @@
|
|||||||
null
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { User } from "@shared/schema";
|
||||||
|
|
||||||
|
// For the demo, we're setting a fixed user ID
|
||||||
|
// In production, this would come from an auth provider/session
|
||||||
|
const CURRENT_USER_ID = 1; // Using admin user for demo
|
||||||
|
|
||||||
|
export type UserRole = "user" | "contributor" | "reviewer" | "editor" | "admin";
|
||||||
|
|
||||||
|
interface AuthUser {
|
||||||
|
id: number;
|
||||||
|
displayName: string | null;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
role: UserRole;
|
||||||
|
avatar: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAuth() {
|
||||||
|
const { data: user, isLoading, error } = useQuery<Omit<User, "password">>({
|
||||||
|
queryKey: [`/api/users/${CURRENT_USER_ID}`],
|
||||||
|
});
|
||||||
|
|
||||||
|
const isAuthenticated = !!user;
|
||||||
|
|
||||||
|
// Check if user has any of the specified roles
|
||||||
|
const hasRole = (roles: UserRole | UserRole[]): boolean => {
|
||||||
|
if (!user) return false;
|
||||||
|
|
||||||
|
const rolesToCheck = Array.isArray(roles) ? roles : [roles];
|
||||||
|
return rolesToCheck.includes(user.role as UserRole);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Role-specific checks
|
||||||
|
const isAdmin = user?.role === "admin";
|
||||||
|
const isEditor = hasRole(["admin", "editor"]);
|
||||||
|
const isReviewer = hasRole(["admin", "editor", "reviewer"]);
|
||||||
|
const isContributor = hasRole(["admin", "editor", "reviewer", "contributor"]);
|
||||||
|
|
||||||
|
// Access control for editorial features
|
||||||
|
const canManageUsers = isAdmin;
|
||||||
|
const canManageContent = isEditor;
|
||||||
|
const canReviewContent = isReviewer;
|
||||||
|
const canCreateContent = isContributor;
|
||||||
|
|
||||||
|
// Check if user can access dashboard
|
||||||
|
const canAccessDashboard = isContributor;
|
||||||
|
|
||||||
|
return {
|
||||||
|
user: user as AuthUser | undefined,
|
||||||
|
isLoading,
|
||||||
|
isAuthenticated,
|
||||||
|
error,
|
||||||
|
hasRole,
|
||||||
|
isAdmin,
|
||||||
|
isEditor,
|
||||||
|
isReviewer,
|
||||||
|
isContributor,
|
||||||
|
canManageUsers,
|
||||||
|
canManageContent,
|
||||||
|
canReviewContent,
|
||||||
|
canCreateContent,
|
||||||
|
canAccessDashboard,
|
||||||
|
currentUserId: CURRENT_USER_ID
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
@ -1 +1,258 @@
|
|||||||
null
|
import { useState } from "react";
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { DashboardLayout } from "@/components/layout/DashboardLayout";
|
||||||
|
import { useAuth } from "@/hooks/useAuth";
|
||||||
|
import { Link } from "wouter";
|
||||||
|
import { apiRequest } from "@/lib/queryClient";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from "@/components/ui/alert-dialog";
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
PlusCircle,
|
||||||
|
Edit,
|
||||||
|
Trash2,
|
||||||
|
MoreHorizontal,
|
||||||
|
Eye,
|
||||||
|
FileText
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { BlogPostListItem } from "@/lib/types";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { useToast } from "@/hooks/use-toast";
|
||||||
|
|
||||||
|
export default function BlogManagement() {
|
||||||
|
const { canManageContent } = useAuth();
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [postToDelete, setPostToDelete] = useState<number | null>(null);
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
// Fetch blog posts
|
||||||
|
const { data: posts, isLoading } = useQuery<BlogPostListItem[]>({
|
||||||
|
queryKey: ['/api/blog'],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Delete mutation
|
||||||
|
const deletePostMutation = useMutation({
|
||||||
|
mutationFn: async (postId: number) => {
|
||||||
|
return apiRequest(`/api/blog/${postId}`, {
|
||||||
|
method: 'DELETE'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['/api/blog'] });
|
||||||
|
toast({
|
||||||
|
title: "Post deleted",
|
||||||
|
description: "The blog post has been successfully deleted.",
|
||||||
|
});
|
||||||
|
setPostToDelete(null);
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: "Error",
|
||||||
|
description: "Failed to delete the blog post. Please try again.",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
console.error("Delete error:", error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter posts by search query
|
||||||
|
const filteredPosts = posts?.filter(post =>
|
||||||
|
post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
post.excerpt?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout title="Blog Management">
|
||||||
|
<div className="mb-6 flex flex-col sm:flex-row justify-between gap-4">
|
||||||
|
<div className="relative max-w-sm w-full">
|
||||||
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
type="search"
|
||||||
|
placeholder="Search posts..."
|
||||||
|
className="pl-8"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link href="/dashboard/blog/create">
|
||||||
|
<Button>
|
||||||
|
<PlusCircle className="mr-2 h-4 w-4" />
|
||||||
|
New Post
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Blog Posts Table */}
|
||||||
|
<div className="rounded-md border">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Title</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Author</TableHead>
|
||||||
|
<TableHead>Date</TableHead>
|
||||||
|
<TableHead className="w-[100px]">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{isLoading ? (
|
||||||
|
Array.from({length: 5}).map((_, i) => (
|
||||||
|
<TableRow key={i}>
|
||||||
|
<TableCell>
|
||||||
|
<Skeleton className="h-5 w-[250px]" />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Skeleton className="h-5 w-[80px]" />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Skeleton className="h-5 w-[120px]" />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Skeleton className="h-5 w-[100px]" />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Skeleton className="h-9 w-9 rounded-md" />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : filteredPosts && filteredPosts.length > 0 ? (
|
||||||
|
filteredPosts.map((post) => (
|
||||||
|
<TableRow key={post.id}>
|
||||||
|
<TableCell className="font-medium">{post.title}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{post.publishedAt ? (
|
||||||
|
<Badge variant="outline" className="bg-green-50 text-green-700 hover:bg-green-50 dark:bg-green-900/20 dark:text-green-400">
|
||||||
|
Published
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="outline" className="bg-orange-50 text-orange-700 hover:bg-orange-50 dark:bg-orange-900/20 dark:text-orange-400">
|
||||||
|
Draft
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{post.author?.displayName || 'Anonymous'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{post.publishedAt ?
|
||||||
|
format(new Date(post.publishedAt), 'MMM d, yyyy') :
|
||||||
|
format(new Date(post.createdAt), 'MMM d, yyyy')}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||||
|
<span className="sr-only">Open menu</span>
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Link href={`/blog/${post.slug}`}>
|
||||||
|
<span className="flex items-center">
|
||||||
|
<Eye className="mr-2 h-4 w-4" />
|
||||||
|
View
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Link href={`/dashboard/blog/edit/${post.id}`}>
|
||||||
|
<span className="flex items-center">
|
||||||
|
<Edit className="mr-2 h-4 w-4" />
|
||||||
|
Edit
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
|
||||||
|
{canManageContent && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
|
||||||
|
onClick={() => setPostToDelete(post.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Delete
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={5} className="h-24 text-center">
|
||||||
|
<div className="flex flex-col items-center justify-center text-muted-foreground">
|
||||||
|
<FileText className="h-8 w-8 mb-2" />
|
||||||
|
<p>No blog posts found</p>
|
||||||
|
{searchQuery && (
|
||||||
|
<p className="text-sm mt-1">Try adjusting your search query</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Dialog */}
|
||||||
|
<AlertDialog open={!!postToDelete} onOpenChange={(open) => !open && setPostToDelete(null)}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This action cannot be undone. This will permanently delete the blog post
|
||||||
|
and remove it from the platform.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={() => {
|
||||||
|
if (postToDelete) {
|
||||||
|
deletePostMutation.mutate(postToDelete);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="bg-red-600 hover:bg-red-700 focus:ring-red-600"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@ -1 +1,219 @@
|
|||||||
null
|
import { useAuth } from "@/hooks/useAuth";
|
||||||
|
import { DashboardLayout } from "@/components/layout/DashboardLayout";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Link } from "wouter";
|
||||||
|
import {
|
||||||
|
FileText,
|
||||||
|
BookText,
|
||||||
|
Users,
|
||||||
|
MessageCircle,
|
||||||
|
ArrowUpRight,
|
||||||
|
BookMarked,
|
||||||
|
Layers,
|
||||||
|
PenSquare
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
const { canManageContent, canReviewContent } = useAuth();
|
||||||
|
|
||||||
|
// Fetch statistics
|
||||||
|
const { data: workStats, isLoading: workStatsLoading } = useQuery({
|
||||||
|
queryKey: ['/api/stats/works'],
|
||||||
|
enabled: canReviewContent || canManageContent,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: userStats, isLoading: userStatsLoading } = useQuery({
|
||||||
|
queryKey: ['/api/stats/users'],
|
||||||
|
enabled: canManageContent,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: blogStats, isLoading: blogStatsLoading } = useQuery({
|
||||||
|
queryKey: ['/api/stats/blog'],
|
||||||
|
enabled: canReviewContent || canManageContent,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: commentStats, isLoading: commentStatsLoading } = useQuery({
|
||||||
|
queryKey: ['/api/stats/comments'],
|
||||||
|
enabled: canReviewContent || canManageContent,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: recentWorks, isLoading: recentWorksLoading } = useQuery({
|
||||||
|
queryKey: ['/api/works', { limit: 5 }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: recentBlogPosts, isLoading: recentBlogPostsLoading } = useQuery({
|
||||||
|
queryKey: ['/api/blog', { limit: 5 }],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get dummy data if API doesn't return real statistics yet
|
||||||
|
const getStatValue = (loading: boolean, data: any, defaultValue: number) => {
|
||||||
|
if (loading) return <Skeleton className="h-8 w-24" />;
|
||||||
|
return data?.count || defaultValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
// For the demo, provide sensible defaults
|
||||||
|
const totalWorks = getStatValue(workStatsLoading, workStats, 6);
|
||||||
|
const totalUsers = getStatValue(userStatsLoading, userStats, 5);
|
||||||
|
const totalPosts = getStatValue(blogStatsLoading, blogStats, 3);
|
||||||
|
const totalComments = getStatValue(commentStatsLoading, commentStats, 12);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout title="Dashboard Overview">
|
||||||
|
{/* Stats cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Total Works</CardTitle>
|
||||||
|
<BookText className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{totalWorks}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Literary works in library
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Blog Posts</CardTitle>
|
||||||
|
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{totalPosts}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Published articles
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Users</CardTitle>
|
||||||
|
<Users className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{totalUsers}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Registered accounts
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Comments</CardTitle>
|
||||||
|
<MessageCircle className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{totalComments}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
User discussions
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Quick Actions</CardTitle>
|
||||||
|
<CardDescription>Common tasks and content management</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<Link href="/dashboard/blog/create">
|
||||||
|
<Button variant="outline" className="w-full justify-start h-auto py-4">
|
||||||
|
<FileText className="h-5 w-5 mr-2" />
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<span>Create Post</span>
|
||||||
|
<span className="text-xs text-muted-foreground">Add a new blog post</span>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/dashboard/works/add">
|
||||||
|
<Button variant="outline" className="w-full justify-start h-auto py-4">
|
||||||
|
<BookText className="h-5 w-5 mr-2" />
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<span>Add Work</span>
|
||||||
|
<span className="text-xs text-muted-foreground">New literary work</span>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/dashboard/collections/create">
|
||||||
|
<Button variant="outline" className="w-full justify-start h-auto py-4">
|
||||||
|
<BookMarked className="h-5 w-5 mr-2" />
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<span>Create Collection</span>
|
||||||
|
<span className="text-xs text-muted-foreground">Curate works</span>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/dashboard/annotations">
|
||||||
|
<Button variant="outline" className="w-full justify-start h-auto py-4">
|
||||||
|
<PenSquare className="h-5 w-5 mr-2" />
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<span>Manage Annotations</span>
|
||||||
|
<span className="text-xs text-muted-foreground">Review & edit</span>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Recent Activity */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle>Recent Content</CardTitle>
|
||||||
|
<CardDescription>Latest additions to the platform</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Link href="/dashboard/works">
|
||||||
|
<Button variant="ghost" size="sm" className="gap-1">
|
||||||
|
<span>View all</span>
|
||||||
|
<ArrowUpRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{recentWorksLoading ? (
|
||||||
|
Array.from({length: 3}).map((_, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-4">
|
||||||
|
<Skeleton className="h-12 w-12 rounded-md" />
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Skeleton className="h-4 w-48" />
|
||||||
|
<Skeleton className="h-3 w-32" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
recentWorks?.slice(0, 3).map((work: any) => (
|
||||||
|
<Link key={work.id} href={`/works/${work.slug}`}>
|
||||||
|
<div className="flex items-center gap-4 group cursor-pointer">
|
||||||
|
<div className="h-12 w-12 rounded-md bg-muted flex items-center justify-center">
|
||||||
|
<BookText className="h-6 w-6 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium group-hover:text-primary">{work.title}</h4>
|
||||||
|
<p className="text-sm text-muted-foreground">{work.type} - Added recently</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user