feat: Add bulletin board system
- Add BoardCategory and BoardPost models with multi-language support - Add bulletin API endpoints (CRUD, notice toggle, pin toggle) - Add board_enabled setting to control menu visibility - Create frontend board pages (list, detail, write, edit) - Create admin board management and category management pages - Update Header.tsx with conditional Board menu between Inquiry and Contact Us - Update admin settings with board_enabled toggle - Add Board menu to admin sidebar Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
AutonetSellCar Deploy
403
frontend/src/app/admin/board/categories/page.tsx
Normal file
403
frontend/src/app/admin/board/categories/page.tsx
Normal file
@@ -0,0 +1,403 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { boardApi, BoardCategory } from '@/lib/api';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
|
||||
interface CategoryFormData {
|
||||
name: string;
|
||||
name_en: string;
|
||||
name_mn: string;
|
||||
name_ru: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
sort_order: number;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
const initialFormData: CategoryFormData = {
|
||||
name: '',
|
||||
name_en: '',
|
||||
name_mn: '',
|
||||
name_ru: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
sort_order: 0,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
export default function AdminBoardCategoriesPage() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuthStore();
|
||||
|
||||
const [categories, setCategories] = useState<BoardCategory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingCategory, setEditingCategory] = useState<BoardCategory | null>(null);
|
||||
const [formData, setFormData] = useState<CategoryFormData>(initialFormData);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user?.is_admin) {
|
||||
router.push('/admin');
|
||||
return;
|
||||
}
|
||||
fetchCategories();
|
||||
}, [user]);
|
||||
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const res = await boardApi.getCategories(true);
|
||||
setCategories(res.categories);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch categories:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const generateSlug = (name: string) => {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9가-힣]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '');
|
||||
};
|
||||
|
||||
const handleOpenModal = (category?: BoardCategory) => {
|
||||
if (category) {
|
||||
setEditingCategory(category);
|
||||
setFormData({
|
||||
name: category.name,
|
||||
name_en: category.name_en || '',
|
||||
name_mn: category.name_mn || '',
|
||||
name_ru: category.name_ru || '',
|
||||
slug: category.slug,
|
||||
description: category.description || '',
|
||||
sort_order: category.sort_order,
|
||||
is_active: category.is_active,
|
||||
});
|
||||
} else {
|
||||
setEditingCategory(null);
|
||||
setFormData(initialFormData);
|
||||
}
|
||||
setError(null);
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowModal(false);
|
||||
setEditingCategory(null);
|
||||
setFormData(initialFormData);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
setError('Category name is required');
|
||||
return;
|
||||
}
|
||||
if (!formData.slug.trim()) {
|
||||
setError('Slug is required');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
if (editingCategory) {
|
||||
await boardApi.updateCategory(editingCategory.id, formData);
|
||||
} else {
|
||||
await boardApi.createCategory(formData);
|
||||
}
|
||||
handleCloseModal();
|
||||
fetchCategories();
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to save category');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (categoryId: number) => {
|
||||
const category = categories.find(c => c.id === categoryId);
|
||||
if (!category) return;
|
||||
|
||||
if (category.post_count > 0) {
|
||||
alert(`Cannot delete category with ${category.post_count} posts. Please delete or move posts first.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm('Are you sure you want to delete this category?')) return;
|
||||
|
||||
try {
|
||||
await boardApi.deleteCategory(categoryId);
|
||||
fetchCategories();
|
||||
} catch (err: any) {
|
||||
alert(err.response?.data?.detail || 'Failed to delete category');
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleActive = async (category: BoardCategory) => {
|
||||
try {
|
||||
await boardApi.updateCategory(category.id, { is_active: !category.is_active });
|
||||
fetchCategories();
|
||||
} catch (err) {
|
||||
console.error('Failed to toggle category:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
href="/admin/board"
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Board Categories</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleOpenModal()}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
Add Category
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Categories Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : categories.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
No categories yet. Create one to get started.
|
||||
</div>
|
||||
) : (
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-16">Order</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name (KO)</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name (EN)</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-32">Slug</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Posts</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Active</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-32">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{categories.map((category) => (
|
||||
<tr key={category.id} className={`hover:bg-gray-50 ${!category.is_active ? 'opacity-50' : ''}`}>
|
||||
<td className="px-4 py-3 text-sm text-gray-500">{category.sort_order}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-900 font-medium">{category.name}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500">{category.name_en || '-'}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 font-mono">{category.slug}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 text-center">{category.post_count}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<button
|
||||
onClick={() => handleToggleActive(category)}
|
||||
className={`relative inline-flex items-center h-6 w-11 rounded-full transition-colors ${
|
||||
category.is_active ? 'bg-green-500' : 'bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block w-4 h-4 transform bg-white rounded-full transition-transform ${
|
||||
category.is_active ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<div className="flex justify-center gap-2">
|
||||
<button
|
||||
onClick={() => handleOpenModal(category)}
|
||||
className="p-1 text-blue-600 hover:bg-blue-50 rounded"
|
||||
title="Edit"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(category.id)}
|
||||
disabled={category.post_count > 0}
|
||||
className="p-1 text-red-600 hover:bg-red-50 rounded disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title={category.post_count > 0 ? 'Cannot delete: has posts' : 'Delete'}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4">
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<h2 className="text-lg font-bold text-gray-900">
|
||||
{editingCategory ? 'Edit Category' : 'Add Category'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name (Korean) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
name: e.target.value,
|
||||
slug: formData.slug || generateSlug(e.target.value),
|
||||
});
|
||||
}}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name (English)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name_en}
|
||||
onChange={(e) => setFormData({ ...formData, name_en: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name (Mongolian)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name_mn}
|
||||
onChange={(e) => setFormData({ ...formData, name_mn: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name (Russian)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name_ru}
|
||||
onChange={(e) => setFormData({ ...formData, name_ru: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Slug <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.slug}
|
||||
onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
|
||||
placeholder="category-slug"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Sort Order
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.sort_order}
|
||||
onChange={(e) => setFormData({ ...formData, sort_order: parseInt(e.target.value) || 0 })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||
placeholder="Brief description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="is_active"
|
||||
checked={formData.is_active}
|
||||
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
|
||||
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="is_active" className="text-sm text-gray-700">
|
||||
Active (visible to users)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4 border-t border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloseModal}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
330
frontend/src/app/admin/board/page.tsx
Normal file
330
frontend/src/app/admin/board/page.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { boardApi, BoardPostListItem, BoardCategory, BoardPostListResponse, BoardCategoryListResponse } from '@/lib/api';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
|
||||
export default function AdminBoardPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { user } = useAuthStore();
|
||||
|
||||
const [posts, setPosts] = useState<BoardPostListItem[]>([]);
|
||||
const [notices, setNotices] = useState<BoardPostListItem[]>([]);
|
||||
const [categories, setCategories] = useState<BoardCategory[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const page = parseInt(searchParams.get('page') || '1');
|
||||
const categoryId = searchParams.get('category') ? parseInt(searchParams.get('category')!) : undefined;
|
||||
const search = searchParams.get('search') || '';
|
||||
|
||||
useEffect(() => {
|
||||
if (!user?.is_admin) {
|
||||
router.push('/admin');
|
||||
return;
|
||||
}
|
||||
fetchData();
|
||||
}, [page, categoryId, search, user]);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [postsRes, categoriesRes] = await Promise.all([
|
||||
boardApi.getAdminPosts({ page, page_size: 20, category_id: categoryId, search }),
|
||||
boardApi.getCategories(true),
|
||||
]);
|
||||
setPosts(postsRes.posts);
|
||||
setNotices(postsRes.notices);
|
||||
setTotal(postsRes.total);
|
||||
setTotalPages(postsRes.total_pages);
|
||||
setCategories(categoriesRes.categories);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch board data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleNotice = async (postId: number) => {
|
||||
try {
|
||||
await boardApi.toggleNotice(postId);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle notice:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTogglePin = async (postId: number) => {
|
||||
try {
|
||||
await boardApi.togglePin(postId);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle pin:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (postId: number) => {
|
||||
if (!confirm('Are you sure you want to delete this post?')) return;
|
||||
try {
|
||||
await boardApi.deletePost(postId);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete post:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const searchValue = formData.get('search') as string;
|
||||
const params = new URLSearchParams();
|
||||
if (categoryId) params.set('category', categoryId.toString());
|
||||
if (searchValue) params.set('search', searchValue);
|
||||
router.push(`/admin/board?${params.toString()}`);
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString();
|
||||
};
|
||||
|
||||
const allPosts = [...notices, ...posts];
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Board Management</h1>
|
||||
<div className="flex gap-3">
|
||||
<Link
|
||||
href="/admin/board/categories"
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
Manage Categories
|
||||
</Link>
|
||||
<Link
|
||||
href="/board/write"
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
New Post
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm">
|
||||
<div className="text-sm text-gray-500">Total Posts</div>
|
||||
<div className="text-2xl font-bold text-gray-900">{total}</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm">
|
||||
<div className="text-sm text-gray-500">Notices</div>
|
||||
<div className="text-2xl font-bold text-red-600">{notices.length}</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm">
|
||||
<div className="text-sm text-gray-500">Categories</div>
|
||||
<div className="text-2xl font-bold text-blue-600">{categories.length}</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm">
|
||||
<div className="text-sm text-gray-500">Active Categories</div>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{categories.filter(c => c.is_active).length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white rounded-lg shadow-sm p-4 mb-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
{/* Category Filter */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set('search', search);
|
||||
router.push(`/admin/board?${params.toString()}`);
|
||||
}}
|
||||
className={`px-3 py-1.5 text-sm rounded-full transition-colors ${
|
||||
!categoryId
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set('category', cat.id.toString());
|
||||
if (search) params.set('search', search);
|
||||
router.push(`/admin/board?${params.toString()}`);
|
||||
}}
|
||||
className={`px-3 py-1.5 text-sm rounded-full transition-colors ${
|
||||
categoryId === cat.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: cat.is_active
|
||||
? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
: 'bg-gray-50 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{cat.name} ({cat.post_count})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<form onSubmit={handleSearch} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
defaultValue={search}
|
||||
placeholder="Search..."
|
||||
className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Posts Table */}
|
||||
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-600 border-t-transparent"></div>
|
||||
</div>
|
||||
) : allPosts.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
No posts found
|
||||
</div>
|
||||
) : (
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-16">ID</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Title</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-32">Category</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-32">Author</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Views</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-24">Status</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-28">Date</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-32">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{allPosts.map((post) => (
|
||||
<tr key={post.id} className={`hover:bg-gray-50 ${post.is_notice ? 'bg-amber-50' : ''}`}>
|
||||
<td className="px-4 py-3 text-sm text-gray-500">{post.id}</td>
|
||||
<td className="px-4 py-3">
|
||||
<Link
|
||||
href={`/board/${post.id}`}
|
||||
className="text-sm text-gray-900 hover:text-blue-600"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500">{post.category_name || '-'}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500">{post.author_name || 'Unknown'}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 text-center">{post.view_count}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<div className="flex justify-center gap-1">
|
||||
{post.is_notice && (
|
||||
<span className="px-1.5 py-0.5 text-xs bg-red-100 text-red-700 rounded">Notice</span>
|
||||
)}
|
||||
{post.is_pinned && (
|
||||
<span className="px-1.5 py-0.5 text-xs bg-amber-100 text-amber-700 rounded">Pinned</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-500 text-center">{formatDate(post.created_at)}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<div className="flex justify-center gap-1">
|
||||
<button
|
||||
onClick={() => handleToggleNotice(post.id)}
|
||||
className={`p-1 rounded ${post.is_notice ? 'text-red-600 hover:bg-red-50' : 'text-gray-400 hover:bg-gray-100'}`}
|
||||
title={post.is_notice ? 'Remove Notice' : 'Set as Notice'}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTogglePin(post.id)}
|
||||
className={`p-1 rounded ${post.is_pinned ? 'text-amber-600 hover:bg-amber-50' : 'text-gray-400 hover:bg-gray-100'}`}
|
||||
title={post.is_pinned ? 'Unpin' : 'Pin'}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
|
||||
</svg>
|
||||
</button>
|
||||
<Link
|
||||
href={`/board/edit/${post.id}`}
|
||||
className="p-1 text-blue-600 hover:bg-blue-50 rounded"
|
||||
title="Edit"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => handleDelete(post.id)}
|
||||
className="p-1 text-red-600 hover:bg-red-50 rounded"
|
||||
title="Delete"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-6 flex justify-center">
|
||||
<nav className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('page', (page - 1).toString());
|
||||
router.push(`/admin/board?${params.toString()}`);
|
||||
}}
|
||||
disabled={page <= 1}
|
||||
className="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<span className="px-4 py-2 text-sm text-gray-700">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('page', (page + 1).toString());
|
||||
router.push(`/admin/board?${params.toString()}`);
|
||||
}}
|
||||
disabled={page >= totalPages}
|
||||
className="px-3 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -20,6 +20,7 @@ const menuItems = [
|
||||
{ href: '/admin/dealer-translations', label: 'Dealer Descriptions', icon: '📝' },
|
||||
{ href: '/admin/users', label: 'Users', icon: '👥' },
|
||||
{ href: '/admin/inquiries', label: 'Inquiries', icon: '💬' },
|
||||
{ href: '/admin/board', label: 'Board', icon: '📌' },
|
||||
{ href: '/admin/settings', label: 'Settings', icon: '⚙️' },
|
||||
];
|
||||
|
||||
|
||||
@@ -33,6 +33,8 @@ interface SystemSettings {
|
||||
event_cc_validity_months: number;
|
||||
withdrawal_enabled: boolean;
|
||||
min_withdrawal_usd: number;
|
||||
// Board settings
|
||||
board_enabled: boolean;
|
||||
// Car availability check settings
|
||||
car_availability_check_enabled: boolean;
|
||||
car_availability_check_hour: number;
|
||||
@@ -103,6 +105,8 @@ export default function SettingsPage() {
|
||||
event_cc_validity_months: 6,
|
||||
withdrawal_enabled: true,
|
||||
min_withdrawal_usd: 10.0,
|
||||
// Board settings
|
||||
board_enabled: true,
|
||||
// Car availability check
|
||||
car_availability_check_enabled: true,
|
||||
car_availability_check_hour: 6,
|
||||
@@ -146,6 +150,8 @@ export default function SettingsPage() {
|
||||
event_cc_validity_months: data.event_cc_validity_months ?? 6,
|
||||
withdrawal_enabled: data.withdrawal_enabled ?? true,
|
||||
min_withdrawal_usd: data.min_withdrawal_usd ?? 10.0,
|
||||
// Board settings
|
||||
board_enabled: data.board_enabled ?? true,
|
||||
// Car availability check
|
||||
car_availability_check_enabled: data.car_availability_check_enabled ?? true,
|
||||
car_availability_check_hour: data.car_availability_check_hour ?? 6,
|
||||
@@ -367,6 +373,22 @@ export default function SettingsPage() {
|
||||
<p className="text-sm text-gray-500">차량 상세 페이지에서 딜러 코멘트 표시 여부</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.board_enabled}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, board_enabled: e.target.checked }))}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
|
||||
</label>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-700">Show Board Menu</span>
|
||||
<p className="text-sm text-gray-500">상단 네비게이션에 게시판 메뉴 표시 여부</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user