+
+ {/* Sidebar */}
+
+
+
+
Editorial Dashboard
+ {isLoading ? (
+
+ ) : (
+
+ Welcome, {user?.displayName || user?.username}
+
+ )}
-
-
- {/* Main content */}
-
-
-
{title}
+
+
- {isLoading ? (
-
-
-
-
- ) : (
- children
- )}
+
+ {/* Main content */}
+
+
+
{title}
+
+ {isLoading ? (
+
+ ) : (
+ children
+ )}
+
-
+
);
}
diff --git a/client/src/hooks/use-toast.ts b/client/src/hooks/use-toast.ts
index 2c14125..b1a4f1b 100644
--- a/client/src/hooks/use-toast.ts
+++ b/client/src/hooks/use-toast.ts
@@ -1,191 +1,48 @@
-import * as React from "react"
+// Basic toast hook for notifications
+import { useState } from "react";
-import type {
- ToastActionElement,
- ToastProps,
-} from "@/components/ui/toast"
+type ToastVariant = "default" | "destructive";
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
- id: string
- title?: React.ReactNode
- description?: React.ReactNode
- action?: ToastActionElement
+interface ToastOptions {
+ title?: string;
+ description?: string;
+ variant?: ToastVariant;
+ duration?: number;
+ id?: number;
}
-const actionTypes = {
- ADD_TOAST: "ADD_TOAST",
- UPDATE_TOAST: "UPDATE_TOAST",
- DISMISS_TOAST: "DISMISS_TOAST",
- REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+export function useToast() {
+ const [toasts, setToasts] = useState
([]);
-let count = 0
-
-function genId() {
- count = (count + 1) % Number.MAX_SAFE_INTEGER
- return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
- | {
- type: ActionType["ADD_TOAST"]
- toast: ToasterToast
- }
- | {
- type: ActionType["UPDATE_TOAST"]
- toast: Partial
- }
- | {
- type: ActionType["DISMISS_TOAST"]
- toastId?: ToasterToast["id"]
- }
- | {
- type: ActionType["REMOVE_TOAST"]
- toastId?: ToasterToast["id"]
- }
-
-interface State {
- toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map>()
-
-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
-
-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,
+ const toast = (options: ToastOptions) => {
+ const id = Date.now();
+ const newToast = {
+ ...options,
id,
- open: true,
- onOpenChange: (open) => {
- if (!open) dismiss()
- },
- },
- })
+ duration: options.duration || 3000,
+ };
+
+ setToasts((prev) => [...prev, newToast]);
+
+ // Auto dismiss
+ setTimeout(() => {
+ dismiss(id);
+ }, newToast.duration);
+
+ return id;
+ };
- return {
- id: id,
- dismiss,
- update,
- }
-}
-
-function useToast() {
- const [state, setState] = React.useState(memoryState)
-
- React.useEffect(() => {
- listeners.push(setState)
- return () => {
- const index = listeners.indexOf(setState)
- if (index > -1) {
- listeners.splice(index, 1)
- }
+ const dismiss = (id?: number) => {
+ if (id) {
+ setToasts((prev) => prev.filter((toast) => toast.id !== id));
+ } else {
+ setToasts([]);
}
- }, [state])
+ };
return {
- ...state,
toast,
- dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
- }
+ dismiss,
+ toasts
+ };
}
-
-export { useToast, toast }
diff --git a/client/src/hooks/useAuth.ts b/client/src/hooks/useAuth.ts
index ec747fa..133e6b1 100644
--- a/client/src/hooks/useAuth.ts
+++ b/client/src/hooks/useAuth.ts
@@ -1 +1,66 @@
-null
\ No newline at end of file
+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>({
+ 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
+ };
+}
diff --git a/client/src/pages/dashboard/BlogManagement.tsx b/client/src/pages/dashboard/BlogManagement.tsx
index ec747fa..1994d71 100644
--- a/client/src/pages/dashboard/BlogManagement.tsx
+++ b/client/src/pages/dashboard/BlogManagement.tsx
@@ -1 +1,258 @@
-null
\ No newline at end of file
+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(null);
+ const queryClient = useQueryClient();
+ const { toast } = useToast();
+
+ // Fetch blog posts
+ const { data: posts, isLoading } = useQuery({
+ 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 (
+
+
+
+
+ setSearchQuery(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+ Title
+ Status
+ Author
+ Date
+ Actions
+
+
+
+ {isLoading ? (
+ Array.from({length: 5}).map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))
+ ) : filteredPosts && filteredPosts.length > 0 ? (
+ filteredPosts.map((post) => (
+
+ {post.title}
+
+ {post.publishedAt ? (
+
+ Published
+
+ ) : (
+
+ Draft
+
+ )}
+
+
+ {post.author?.displayName || 'Anonymous'}
+
+
+ {post.publishedAt ?
+ format(new Date(post.publishedAt), 'MMM d, yyyy') :
+ format(new Date(post.createdAt), 'MMM d, yyyy')}
+
+
+
+
+
+
+
+
+
+
+
+ View
+
+
+
+
+
+
+
+
+ Edit
+
+
+
+
+ {canManageContent && (
+ <>
+
+ setPostToDelete(post.id)}
+ >
+
+ Delete
+
+
+ )}
+
+
+
+
+ ))
+ ) : (
+
+
+
+
+
No blog posts found
+ {searchQuery && (
+
Try adjusting your search query
+ )}
+
+
+
+
+ Total Works
+
+
+
+ {totalWorks}
+
+ Literary works in library
+
+
+
+
+
+
+ Blog Posts
+
+
+
+ {totalPosts}
+
+ Published articles
+
+
+
+
+
+
+ Users
+
+
+
+ {totalUsers}
+
+ Registered accounts
+
+
+
+
+
+
+ Comments
+
+
+
+ {totalComments}
+
+ User discussions
+
+
+
+
+ {/* Quick Actions */}
+
+
+ Quick Actions
+ Common tasks and content management
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Recent Activity */}
+
+
+
+ Recent Content
+ Latest additions to the platform
+
+
+
+
+
+
+
+ {recentWorksLoading ? (
+ Array.from({length: 3}).map((_, i) => (
+
+ ))
+ ) : (
+ recentWorks?.slice(0, 3).map((work: any) => (
+
+
+
+
+
+
+
{work.title}
+
{work.type} - Added recently
+
+
+
+ ))
+ )}
+
+