first commit
This commit is contained in:
301
app/admin/categories/page.tsx
Normal file
301
app/admin/categories/page.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { Search, Plus, Edit, Trash2, MoreHorizontal, Download } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { CategoryFormDialog } from '@/components/admin/CategoryFormDialog'
|
||||
|
||||
interface Category {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
image: string | null
|
||||
isActive: boolean
|
||||
createdAt: string
|
||||
_count: {
|
||||
products: number
|
||||
}
|
||||
}
|
||||
|
||||
export default function AdminCategoriesPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [search, setSearch] = useState('')
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([])
|
||||
const [bulkActionLoading, setBulkActionLoading] = useState(false)
|
||||
|
||||
const fetchCategories = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (search) params.append('search', search)
|
||||
|
||||
const response = await fetch(`/api/admin/categories?${params}`)
|
||||
const data = await response.json()
|
||||
setCategories(data || [])
|
||||
} catch (error) {
|
||||
console.error('Error fetching categories:', error)
|
||||
toast.error('Failed to load categories')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [search])
|
||||
|
||||
useEffect(() => {
|
||||
fetchCategories()
|
||||
}, [fetchCategories])
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedCategories(categories.map(c => c.id))
|
||||
} else {
|
||||
setSelectedCategories([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectCategory = (categoryId: string, checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedCategories(prev => [...prev, categoryId])
|
||||
} else {
|
||||
setSelectedCategories(prev => prev.filter(id => id !== categoryId))
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkAction = async (action: 'activate' | 'deactivate' | 'delete') => {
|
||||
if (selectedCategories.length === 0) {
|
||||
toast.error('Please select at least one category')
|
||||
return
|
||||
}
|
||||
|
||||
setBulkActionLoading(true)
|
||||
try {
|
||||
const response = await fetch('/api/admin/categories/bulk', {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
categoryIds: selectedCategories,
|
||||
action
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Bulk action failed')
|
||||
|
||||
toast.success(`Successfully ${action}d ${selectedCategories.length} categories`)
|
||||
setSelectedCategories([])
|
||||
fetchCategories()
|
||||
} catch (error) {
|
||||
toast.error(`Failed to ${action} categories`)
|
||||
} finally {
|
||||
setBulkActionLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteCategory = async (categoryId: string) => {
|
||||
if (!confirm('Are you sure you want to delete this category?')) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/categories/${categoryId}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
|
||||
if (!response.ok) throw new Error('Delete failed')
|
||||
|
||||
toast.success('Category deleted successfully')
|
||||
fetchCategories()
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete category')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Categories</h1>
|
||||
<p className="text-gray-600">Manage your product categories</p>
|
||||
</div>
|
||||
<CategoryFormDialog onSuccess={fetchCategories} />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>All Categories</CardTitle>
|
||||
<div className="flex items-center space-x-2">
|
||||
{selectedCategories.length > 0 && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-gray-500">
|
||||
{selectedCategories.length} selected
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleBulkAction('activate')}
|
||||
disabled={bulkActionLoading}
|
||||
>
|
||||
Activate
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleBulkAction('deactivate')}
|
||||
disabled={bulkActionLoading}
|
||||
>
|
||||
Deactivate
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleBulkAction('delete')}
|
||||
disabled={bulkActionLoading}
|
||||
className="text-red-600"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search categories..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10 w-64"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="text-center py-8">Loading...</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={selectedCategories.length === categories.length && categories.length > 0}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead>Category</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Products</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{categories.map((category) => (
|
||||
<TableRow key={category.id}>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedCategories.includes(category.id)}
|
||||
onCheckedChange={(checked) => handleSelectCategory(category.id, !!checked)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-3">
|
||||
{category.image ? (
|
||||
<Image
|
||||
src={category.image}
|
||||
alt={category.name}
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-lg object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400 text-xs">No Image</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium">{category.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<p className="text-sm text-gray-600 max-w-xs truncate">
|
||||
{category.description || 'No description'}
|
||||
</p>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">
|
||||
{category._count.products} products
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={category.isActive ? 'default' : 'secondary'}>
|
||||
{category.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(category.createdAt).toLocaleDateString()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<CategoryFormDialog
|
||||
category={category}
|
||||
mode="edit"
|
||||
onSuccess={fetchCategories}
|
||||
trigger={
|
||||
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
}
|
||||
/>
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteCategory(category.id)}
|
||||
className="text-red-600"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user