import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import InputError from "@/components/input-error"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Badge } from "@/components/ui/badge"; import { Plus, Edit, Trash2, Search, Filter, BookOpen, Eye, Users, Tag } from "lucide-react"; // Added BookOpen, Eye, Users, Tag import { useToast } from "@/hooks/use-toast"; import AppLayout from "@/layouts/app-layout"; import { Head, Link, useForm } from "@inertiajs/react"; import { format } from "date-fns"; // Import date-fns for date formatting import { truncateText } from "@/lib/utils"; // Import truncateText utility import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; // Added Card imports interface Blog { id: string; title: string; content: string; excerpt: string; author: string; category: string; status: "draft" | "published" | "archived"; published_at: string; created_at: string; updated_at: string; featured_image?: string; tags: string[]; read_time: number; user_id: string; } interface BlogsIndexProps { auth: { user: { id: string; name: string; email: string } }; blogs: Blog[]; } export default function BlogsIndex({ auth, blogs: initialBlogs }: BlogsIndexProps) { const [blogs, setBlogs] = useState(initialBlogs); const [searchTerm, setSearchTerm] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [categoryFilter, setCategoryFilter] = useState("all"); const { toast } = useToast(); const { delete: inertiaDelete } = useForm(); const categories = ["Market Analysis", "Buying Guide", "Investment", "Property Management", "Legal"]; const filteredBlogs = blogs.filter((blog) => { const matchesSearch = blog.title.toLowerCase().includes(searchTerm.toLowerCase()) || blog.author.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === "all" || blog.status === statusFilter; const matchesCategory = categoryFilter === "all" || blog.category === categoryFilter; return matchesSearch && matchesStatus && matchesCategory; }); const handleEdit = (blog: Blog) => { window.location.href = route('blogs.edit', blog.id); }; const handleDelete = (id: string) => { if (confirm("Are you sure you want to delete this blog post?")) { inertiaDelete(route('blogs.destroy', id), { onSuccess: () => { toast({ title: "Success", description: "Blog deleted successfully" }); }, onError: () => { toast({ title: "Error", description: "Failed to delete blog", variant: "destructive" }); } }); } }; const getStatusBadge = (status: Blog["status"]) => { const variants = { draft: "secondary", published: "default", archived: "destructive", } as const; return ( {status.charAt(0).toUpperCase() + status.slice(1)} ); }; return (

Blog Management

Manage and publish your blog posts

{/* Stats Overview */}

Total Posts

{filteredBlogs.length}

Total blog posts

Published

{filteredBlogs.filter(blog => blog.status === "published").length}

Live on the site

Total Read Time {/* Using Users as a placeholder for a "time" icon */}

{filteredBlogs.reduce((sum, blog) => sum + (blog.read_time || 0), 0)} min

Combined reading time