Skip to content

V
VCCI-News
Commit daa7768f authored by Lê Bảo Hồng Đức's avatar Lê Bảo Hồng Đức ☄
Browse files
Options

Merge branch 'feat/duck' into 'develop-news' 

fix

See merge request !51
parents 8d514056 080821e5
Hide whitespace changes
Inline Side-by-side
Showing with 1896 additions and 857 deletions
src/app/admin/categories/page.tsx deleted 100644 → 0
View file @ 8d514056
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
export default function CategoriesPage() {
const router = useRouter();
useEffect(() => {
router.replace('/admin/header-config');
}, [router]);
return null;
}
src/app/admin/dashboard/page.tsx deleted 100644 → 0
View file @ 8d514056
'use client';
import React from 'react';
import Link from 'next/link';
import { useGetNewsAdmin } from '@/api/endpoints/news';
import { useGetOrganizations } from '@/api/endpoints/organizations';
import { useGetContact } from '@/api/endpoints/contact';
import { useGetNewsPageConfigGetHierarchical } from '@/api/endpoints/news-page-config';
import { GetNewsResponseType } from '@/api/types/news';
import { GetNewsPageConfigResponseType } from '@/api/types/news-page-config';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import {
ArrowRight,
BarChart3,
Building2,
FileText,
Layers,
Mail,
Newspaper,
Users,
} from 'lucide-react';
function extractCount(
value: unknown,
): number | undefined {
if (!value || typeof value !== 'object') return undefined;
const source = value as {
responseData?: { count?: number };
data?: { count?: number; responseData?: { count?: number } };
};
return (
source.responseData?.count ??
source.data?.responseData?.count ??
source.data?.count
);
}
interface StatCardProps {
title: string;
value: number | string | undefined;
icon: React.ReactNode;
href: string;
color: string;
isLoading?: boolean;
}
function StatCard({ title, value, icon, href, color, isLoading }: StatCardProps) {
return (
<Link href={href}>
<Card className="cursor-pointer transition-shadow hover:shadow-md">
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-gray-500">{title}</p>
{isLoading ? (
<Skeleton className="mt-2 h-8 w-20" />
) : (
<p className="mt-1 text-3xl font-bold text-gray-900">{value ?? '—'}</p>
)}
</div>
<div
className={`flex h-14 w-14 items-center justify-center rounded-2xl text-white shadow-sm ${color}`}
>
{icon}
</div>
</div>
<div className="mt-4 flex items-center gap-1 text-xs text-[#063e8e] opacity-0 transition-opacity group-hover:opacity-100">
<span>Xem chi tiết</span>
<ArrowRight className="h-3 w-3" />
</div>
</CardContent>
</Card>
</Link>
);
}
export default function DashboardPage() {
const { data: newsData, isLoading: newsLoading } =
useGetNewsAdmin<GetNewsResponseType>({ pageSize: '1' });
const { data: configData, isLoading: configLoading } =
useGetNewsPageConfigGetHierarchical<GetNewsPageConfigResponseType>();
const { data: orgData, isLoading: orgLoading } = useGetOrganizations({ pageSize: '1' });
const { data: contactData, isLoading: contactLoading } = useGetContact();
const stats = [
{
title: 'Tổng bài viết',
value: newsData?.responseData?.count,
icon: <Newspaper className="h-7 w-7" />,
href: '/admin/news',
color: 'bg-[#063e8e]',
isLoading: newsLoading,
},
{
title: 'Cấu hình Danh mục',
value: configData?.responseData ? 'Đã cấu hình' : '—',
icon: <Layers className="h-7 w-7" />,
href: '/admin/header-config',
color: 'bg-violet-500',
isLoading: configLoading,
},
{
title: 'Hội viên',
value: extractCount(orgData),
icon: <Users className="h-7 w-7" />,
href: '/admin/members',
color: 'bg-orange-500',
isLoading: orgLoading,
},
{
title: 'Liên hệ / Email',
value: extractCount(contactData),
icon: <Mail className="h-7 w-7" />,
href: '/admin/emails',
color: 'bg-pink-500',
isLoading: contactLoading,
},
];
const quickLinks = [
{ label: 'Thêm bài viết mới', href: '/admin/news/new', icon: <FileText className="h-4 w-4" /> },
{ label: 'Cấu hình menu Header', href: '/admin/header-config', icon: <Layers className="h-4 w-4" /> },
{ label: 'Quản lý Hội viên', href: '/admin/members', icon: <Users className="h-4 w-4" /> },
{ label: 'Đối tác', href: '/admin/partners', icon: <Building2 className="h-4 w-4" /> },
{ label: 'Thông tin website', href: '/admin/website-config', icon: <BarChart3 className="h-4 w-4" /> },
];
return (
<div className="space-y-8">
<div className="flex items-center justify-between">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900">Tổng quan hệ thống</h2>
<p className="mt-1 text-sm font-medium text-gray-600">
Chào mừng trở lại! Đây là tóm tắt hoạt động của VCCI News.
</p>
</div>
<Badge variant="outline" className="border-[#063e8e]/30 text-[#063e8e]">
Cập nhật: {new Date().toLocaleDateString('vi-VN')}
</Badge>
</div>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
{stats.map((item) => (
<StatCard key={item.href} {...item} />
))}
</div>
<Card>
<CardHeader>
<CardTitle className="text-base font-semibold text-gray-800">Truy cập nhanh</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
{quickLinks.map((item) => (
<Link
key={item.href}
href={item.href}
className="flex flex-col items-center gap-2 rounded-xl border border-[#063e8e]/15 p-4 text-center text-sm text-gray-700 transition-all hover:border-[#063e8e]/40 hover:bg-[#063e8e]/5 hover:text-[#063e8e]"
>
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#063e8e]/10 text-[#063e8e]">
{item.icon}
</div>
<span className="text-xs font-medium leading-tight">{item.label}</span>
</Link>
))}
</div>
</CardContent>
</Card>
</div>
);
}
src/app/admin/emails/page.tsx deleted 100644 → 0
View file @ 8d514056
'use client';
import React, { useState } from 'react';
import { useGetContact } from '@/api/endpoints/contact';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Search, Mail } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import dayjs from 'dayjs';
export default function EmailsPage() {
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const pageSize = 20;
const { data, isLoading } = useGetContact({} as any);
const allRows = (data as any)?.responseData?.rows ?? (data as any)?.data?.rows ?? [];
const filtered = search
? allRows.filter(
(r: any) =>
r.email?.includes(search) ||
r.full_name?.toLowerCase().includes(search.toLowerCase()) ||
r.organization_name?.toLowerCase().includes(search.toLowerCase()),
)
: allRows;
const total = filtered.length;
const totalPages = Math.ceil(total / pageSize);
const rows = filtered.slice((page - 1) * pageSize, page * pageSize);
return (
<div>
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-bold text-gray-800">Quản lý Email nhận thông tin</h2>
<p className="text-sm text-gray-500 mt-1">
Danh sách các địa chỉ email / liên hệ nhận thông tin từ VCCI.
</p>
</div>
<Badge variant="outline" className="border-pink-300 text-pink-600 text-sm px-3 py-1">
<Mail className="h-3.5 w-3.5 mr-1" />
{total} email
</Badge>
</div>
<div className="relative w-72 mb-4">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
<Input
className="pl-9"
placeholder="Tìm email, tên, tổ chức..."
value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
/>
</div>
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-8">#</TableHead>
<TableHead>Email</TableHead>
<TableHead>Họ tên</TableHead>
<TableHead>Tổ chức</TableHead>
<TableHead>Số điện thoại</TableHead>
<TableHead>Nhu cầu</TableHead>
<TableHead>Ngày gửi</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
{Array.from({ length: 7 }).map((_, j) => (
<TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
))}
</TableRow>
))
) : rows.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-center text-gray-400 py-10 text-sm">
Chưa có thông tin email nào.
</TableCell>
</TableRow>
) : rows.map((item: any, idx: number) => (
<TableRow key={item.id ?? idx}>
<TableCell className="text-gray-400 text-sm">{(page - 1) * pageSize + idx + 1}</TableCell>
<TableCell>
<a href={`mailto:${item.email}`} className="text-sm font-medium text-blue-600 hover:underline">
{item.email}
</a>
</TableCell>
<TableCell className="text-sm">{item.full_name || '—'}</TableCell>
<TableCell className="text-sm text-gray-600 max-w-40 truncate">
{item.organization_name || '—'}
</TableCell>
<TableCell className="text-sm text-gray-600">{item.phone || '—'}</TableCell>
<TableCell className="text-sm text-gray-500 max-w-[140px] truncate">
{item.demand || '—'}
</TableCell>
<TableCell className="text-gray-400 text-sm">
{item.created_at ? dayjs(item.created_at).format('DD/MM/YYYY') : '—'}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{totalPages > 1 && (
<div className="flex justify-end gap-2 mt-4">
<Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>Trước</Button>
<span className="text-sm text-gray-500 self-center">{page} / {totalPages}</span>
<Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>Sau</Button>
</div>
)}
</div>
);
}
src/app/admin/header-config/components/header-category-table.tsx
View file @ daa7768f
......@@ -158,7 +158,7 @@ export function HeaderCategoryTable({
</TableRow>
) : (
rows.map((item, index) => {
const hasChildren = rows.some((entry) => entry.parentId === item.id);
const hasChildren = item.children.length > 0;
const isExpanded = expanded[item.id] ?? true;
const canCreateChild = !item.parent_id && item.type === "category";
const canManagePosts = item.type === "page" || item.type === "news";
......
src/app/admin/members/[id]/page.tsx 0 → 100644
View file @ daa7768f
import { AdminMemberForm } from "@/components/admin/member-form";
interface AdminMemberDetailPageProps {
params: Promise<{ id: string }>;
}
export default async function AdminMemberDetailPage({ params }: AdminMemberDetailPageProps) {
const { id } = await params;
return <AdminMemberForm memberId={id} />;
}
src/app/admin/members/fields/page.tsx 0 → 100644
View file @ daa7768f
"use client";
import * as React from "react";
import { Edit, Plus, Save, Trash2, X } from "lucide-react";
import { toast } from "sonner";
import { AdminDeleteDialog } from "@/components/admin/admin-delete-dialog";
import { AdminTableLayout } from "@/components/admin/admin-table-layout";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
type MemberField,
createMemberFieldId,
persistMemberFields,
readMemberFields,
} from "@/mockdata/members";
const fieldClassName =
"border-[#063e8e]/15 bg-white text-gray-700 placeholder:text-gray-700 focus-visible:ring-[#063e8e]/30";
interface FieldFormDialogProps {
open: boolean;
initial: MemberField | null;
onOpenChange: (open: boolean) => void;
onSave: (data: { id?: string; name: string }) => void;
}
function FieldFormDialog({ open, initial, onOpenChange, onSave }: FieldFormDialogProps) {
const [name, setName] = React.useState("");
React.useEffect(() => {
if (open) setName(initial?.name ?? "");
}, [open, initial]);
const handleSave = () => {
const trimmed = name.trim();
if (!trimmed) {
toast.error("Vui lòng nhập tên lĩnh vực");
return;
}
onSave({ id: initial?.id, name: trimmed });
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md border-[#063e8e]/15 bg-white">
<DialogHeader>
<DialogTitle className="text-[#063e8e]">
{initial ? "Chỉnh sửa lĩnh vực" : "Thêm lĩnh vực mới"}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 pt-2">
<div className="space-y-1.5">
<Label className="text-gray-700">
Tên lĩnh vực <span className="text-red-500">*</span>
</Label>
<Input
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="Nhập tên lĩnh vực..."
className={fieldClassName}
onKeyDown={(event) => event.key === "Enter" && handleSave()}
/>
</div>
<div className="flex justify-end gap-2 pt-2">
<Button
type="button"
variant="outline"
className="border-[#063e8e]/15 text-gray-700"
onClick={() => onOpenChange(false)}
>
<X className="mr-2 h-4 w-4" />
Hủy
</Button>
<Button
type="button"
className="bg-[#063e8e] text-white hover:bg-[#063e8e]/90"
onClick={handleSave}
>
<Save className="mr-2 h-4 w-4" />
Lưu
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}
export default function AdminMemberFieldsPage() {
const [items, setItems] = React.useState<MemberField[]>([]);
const [search, setSearch] = React.useState("");
const [dialogOpen, setDialogOpen] = React.useState(false);
const [editTarget, setEditTarget] = React.useState<MemberField | null>(null);
const [deleteTarget, setDeleteTarget] = React.useState<MemberField | null>(null);
const [ready, setReady] = React.useState(false);
React.useEffect(() => {
setItems(readMemberFields());
setReady(true);
}, []);
const filtered = React.useMemo(() => {
const keyword = search.trim().toLowerCase();
if (!keyword) return items;
return items.filter((item) => item.name.toLowerCase().includes(keyword));
}, [items, search]);
const openCreate = () => {
setEditTarget(null);
setDialogOpen(true);
};
const openEdit = (item: MemberField) => {
setEditTarget(item);
setDialogOpen(true);
};
const handleSave = (data: { id?: string; name: string }) => {
let next: MemberField[];
if (data.id) {
next = items.map((item) => (item.id === data.id ? { ...item, name: data.name } : item));
toast.success("Đã cập nhật lĩnh vực");
} else {
next = [...items, { id: createMemberFieldId(), name: data.name }];
toast.success("Đã thêm lĩnh vực mới");
}
setItems(next);
persistMemberFields(next);
setDialogOpen(false);
};
const handleDelete = () => {
if (!deleteTarget) return;
const next = items.filter((item) => item.id !== deleteTarget.id);
setItems(next);
persistMemberFields(next);
toast.success("Đã xóa lĩnh vực");
setDeleteTarget(null);
};
return (
<div className="space-y-8">
<AdminTableLayout
searchValue={search}
searchPlaceholder="Tìm kiếm lĩnh vực..."
actionLabel="Thêm lĩnh vực"
actionIcon={<Plus className="mr-2 h-4 w-4" />}
actionMeta={
<div className="text-sm font-medium text-gray-700">
Tổng lĩnh vực: <span className="font-semibold text-[#063e8e]">{items.length}</span>
</div>
}
onSearchChange={setSearch}
onActionClick={openCreate}
>
<Table>
<TableHeader>
<TableRow className="border-0 bg-[#063e8e] hover:bg-[#063e8e]">
<TableHead className="w-16 py-4 text-center text-white">STT</TableHead>
<TableHead className="py-4 text-white">Tên lĩnh vực</TableHead>
<TableHead className="w-[120px] py-4 text-center text-white">Thao tác</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{!ready ? (
Array.from({ length: 3 }).map((_, index) => (
<TableRow key={`loading-${index}`}>
<TableCell colSpan={3} className="px-4 py-4">
<div className="h-10 animate-pulse rounded-xl bg-[#063e8e]/10" />
</TableCell>
</TableRow>
))
) : filtered.length === 0 ? (
<TableRow>
<TableCell colSpan={3} className="py-16 text-center text-gray-400">
Không có lĩnh vực nào
</TableCell>
</TableRow>
) : (
filtered.map((item, index) => (
<TableRow
key={item.id}
className={index % 2 === 0 ? "bg-white" : "bg-[#063e8e]/3"}
>
<TableCell className="py-3 text-center text-sm text-gray-500">
{index + 1}
</TableCell>
<TableCell className="py-3 text-sm font-medium text-gray-800">
{item.name}
</TableCell>
<TableCell className="py-3 text-center">
<div className="flex items-center justify-center gap-1">
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 hover:bg-[#063e8e]/10 hover:text-[#063e8e]"
onClick={() => openEdit(item)}
>
<Edit className="h-4 w-4" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 hover:bg-red-50 hover:text-red-600"
onClick={() => setDeleteTarget(item)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</AdminTableLayout>
<FieldFormDialog
open={dialogOpen}
initial={editTarget}
onOpenChange={setDialogOpen}
onSave={handleSave}
/>
<AdminDeleteDialog
open={!!deleteTarget}
title="Xóa lĩnh vực"
description={
<>
Bạn có chắc muốn xóa lĩnh vực{" "}
<span className="font-semibold">{deleteTarget?.name}</span>? Hành động này không thể
hoàn tác.
</>
}
onOpenChange={(open) => !open && setDeleteTarget(null)}
onConfirm={handleDelete}
/>
</div>
);
}
src/app/admin/members/page.tsx
View file @ daa7768f
'use client';
"use client";
import React, { useState } from 'react';
import * as React from "react";
import { Edit, MoreHorizontal, Plus, Trash2, Users } from "lucide-react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { AdminDeleteDialog } from "@/components/admin/admin-delete-dialog";
import { AdminStatsGrid } from "@/components/admin/admin-stats-grid";
import { AdminTableLayout } from "@/components/admin/admin-table-layout";
import { SafeNextImage } from "@/components/admin/safe-next-image";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
useGetOrganizations,
getGetOrganizationsQueryKey,
} from '@/api/endpoints/organizations';
import { useQueryClient } from '@tanstack/react-query';
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
......@@ -13,134 +31,283 @@ import {
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Search, ExternalLink } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import dayjs from 'dayjs';
export default function MembersPage() {
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const pageSize = 20;
const { data, isLoading } = useGetOrganizations({
currentPage: String(page),
pageSize: String(pageSize),
filters: search ? `name@=${search}` : undefined,
});
const rows = (data as any)?.responseData?.rows ?? (data as any)?.data?.rows ?? [];
const total = (data as any)?.responseData?.count ?? (data as any)?.data?.count ?? 0;
const totalPages = Math.ceil(total / pageSize);
} from "@/components/ui/table";
import {
type MemberField,
type MemberItem,
type MemberRegion,
persistMembers,
readMemberFields,
readMemberRegions,
readMembers,
} from "@/mockdata/members";
const selectTriggerClassName =
"w-full border-[#063e8e]/15 bg-white text-gray-700 data-[placeholder]:text-gray-700 focus:ring-[#063e8e]/30 lg:w-[200px]";
const selectContentClassName = "border-[#063e8e]/15 bg-white text-gray-700";
const selectItemClassName = "text-gray-700 focus:bg-[#063e8e]/10 focus:text-[#063e8e]";
function MemberTableLoading() {
return Array.from({ length: 3 }).map((_, index) => (
<TableRow
key={`loading-${index}`}
className={index % 2 === 0 ? "bg-white" : "bg-[#063e8e]/3"}
>
<TableCell colSpan={7} className="px-4 py-4">
<div className="h-16 animate-pulse rounded-2xl bg-[#063e8e]/10" />
</TableCell>
</TableRow>
));
}
export default function AdminMembersPage() {
const router = useRouter();
const [items, setItems] = React.useState<MemberItem[]>([]);
const [fields, setFields] = React.useState<MemberField[]>([]);
const [regions, setRegions] = React.useState<MemberRegion[]>([]);
const [search, setSearch] = React.useState("");
const [fieldFilter, setFieldFilter] = React.useState("all");
const [regionFilter, setRegionFilter] = React.useState("all");
const [deleteTarget, setDeleteTarget] = React.useState<MemberItem | null>(null);
const [ready, setReady] = React.useState(false);
React.useEffect(() => {
setItems(readMembers());
setFields(readMemberFields());
setRegions(readMemberRegions());
setReady(true);
}, []);
const filtered = React.useMemo(() => {
const keyword = search.trim().toLowerCase();
return items.filter((item) => {
const matchesKeyword =
!keyword ||
item.name.toLowerCase().includes(keyword) ||
item.email.toLowerCase().includes(keyword) ||
item.address.toLowerCase().includes(keyword);
const matchesField = fieldFilter === "all" || item.field_id === fieldFilter;
const matchesRegion = regionFilter === "all" || item.region_id === regionFilter;
return matchesKeyword && matchesField && matchesRegion;
});
}, [items, search, fieldFilter, regionFilter]);
const stats = React.useMemo(
() => [
{
label: "Tổng hội viên",
value: items.length,
icon: <Users className="h-4 w-4 text-[#063e8e]" />,
},
{
label: "Số lĩnh vực",
value: fields.length,
icon: <Users className="h-4 w-4 text-[#063e8e]" />,
},
{
label: "Số khu vực",
value: regions.length,
icon: <Users className="h-4 w-4 text-[#063e8e]" />,
},
],
[items, fields, regions],
);
const fieldMap = React.useMemo(
() => Object.fromEntries(fields.map((f) => [f.id, f.name])),
[fields],
);
const regionMap = React.useMemo(
() => Object.fromEntries(regions.map((r) => [r.id, r.name])),
[regions],
);
const handleDelete = () => {
if (!deleteTarget) return;
const next = items.filter((m) => m.id !== deleteTarget.id);
setItems(next);
persistMembers(next);
toast.success("Đã xóa hội viên");
setDeleteTarget(null);
};
return (
<div>
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-bold text-gray-800">Quản lý Hội viên</h2>
<p className="text-sm text-gray-500 mt-1">
Danh sách tất cả tổ chức / doanh nghiệp hội viên.
</p>
</div>
<Badge variant="outline" className="border-[#063e8e]/30 text-[#063e8e] text-sm px-3 py-1">
{total} hội viên
</Badge>
</div>
<div className="relative w-72 mb-4">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
<Input
className="pl-9"
placeholder="Tìm theo tên..."
value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
/>
</div>
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-8">#</TableHead>
<TableHead>Tên tổ chức</TableHead>
<TableHead>Mã số thuế</TableHead>
<TableHead>Email</TableHead>
<TableHead>Địa chỉ</TableHead>
<TableHead className="w-24">Trạng thái</TableHead>
<TableHead>Ngày tạo</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
{Array.from({ length: 7 }).map((_, j) => (
<TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
))}
</TableRow>
))
) : rows.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-center text-gray-400 py-10 text-sm">
Chưa có hội viên nào.
</TableCell>
<div className="space-y-8">
<AdminStatsGrid items={stats} />
<AdminTableLayout
searchValue={search}
searchPlaceholder="Tìm kiếm hội viên..."
actionLabel="Thêm hội viên"
actionIcon={<Plus className="mr-2 h-4 w-4" />}
onSearchChange={setSearch}
onActionClick={() => router.push("/admin/members/new")}
filters={
<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
<Select value={fieldFilter} onValueChange={setFieldFilter}>
<SelectTrigger className={selectTriggerClassName}>
<SelectValue placeholder="Lĩnh vực" />
</SelectTrigger>
<SelectContent className={selectContentClassName}>
<SelectItem value="all" className={selectItemClassName}>
Tất cả lĩnh vực
</SelectItem>
{fields.map((f) => (
<SelectItem key={f.id} value={f.id} className={selectItemClassName}>
{f.name}
</SelectItem>
))}
</SelectContent>
</Select>
<Select value={regionFilter} onValueChange={setRegionFilter}>
<SelectTrigger className={selectTriggerClassName}>
<SelectValue placeholder="Khu vực" />
</SelectTrigger>
<SelectContent className={selectContentClassName}>
<SelectItem value="all" className={selectItemClassName}>
Tất cả khu vực
</SelectItem>
{regions.map((r) => (
<SelectItem key={r.id} value={r.id} className={selectItemClassName}>
{r.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
}
>
<div className="overflow-x-auto">
<Table className="min-w-[900px] table-fixed">
<TableHeader>
<TableRow className="border-0 bg-[#063e8e] hover:bg-[#063e8e]">
<TableHead className="w-[200px] py-4 text-center text-white">Tên hội viên</TableHead>
<TableHead className="w-[120px] py-4 text-center text-white">Ảnh</TableHead>
<TableHead className="w-40 py-4 text-center text-white">Khu vực</TableHead>
<TableHead className="w-40 py-4 text-center text-white">Lĩnh vực</TableHead>
<TableHead className="w-[200px] py-4 text-center text-white">Liên hệ</TableHead>
<TableHead className="w-[180px] py-4 text-center text-white">Địa chỉ</TableHead>
<TableHead className="w-[100px] py-4 text-center text-white">Thao tác</TableHead>
</TableRow>
) : rows.map((org: any, idx: number) => (
<TableRow key={org.id ?? idx}>
<TableCell className="text-gray-400 text-sm">{(page - 1) * pageSize + idx + 1}</TableCell>
<TableCell>
<div className="flex items-center gap-3">
<Avatar className="h-8 w-8 shrink-0">
<AvatarImage src={org.avatar} alt={org.name} />
<AvatarFallback className="bg-[#063e8e]/10 text-[#063e8e] text-xs font-bold">
{org.name?.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<div className="min-w-0">
<p className="font-medium text-sm truncate max-w-[200px]">{org.name}</p>
{org.website && (
<a
href={org.website}
target="_blank"
rel="noreferrer"
className="flex items-center gap-1 text-xs text-blue-500 hover:underline"
>
<ExternalLink size={10} />{org.website.replace(/^https?:\/\//, '')}
</a>
</TableHeader>
<TableBody>
{!ready ? (
<MemberTableLoading />
) : filtered.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="py-16 text-center text-gray-400">
Không có hội viên nào
</TableCell>
</TableRow>
) : (
filtered.map((item, index) => (
<TableRow
key={item.id}
className={index % 2 === 0 ? "bg-white" : "bg-[#063e8e]/3"}
>
<TableCell className="px-4 py-3 text-sm font-medium text-gray-800">
<div className="space-y-1">
<div>{item.name}</div>
{item.is_featured ? (
<Badge
variant="outline"
className="border-[#063e8e]/25 bg-[#063e8e]/[0.04] text-[#063e8e]"
>
Hội viên tiêu biểu
</Badge>
) : null}
</div>
</TableCell>
<TableCell className="px-4 py-3 text-center">
{item.image ? (
<div className="mx-auto h-12 w-16 overflow-hidden rounded-lg border border-[#063e8e]/15">
<SafeNextImage
src={item.image.url}
alt={item.image.alt || item.name}
width={64}
height={48}
className="h-full w-full object-cover"
/>
</div>
) : (
<div className="mx-auto flex h-12 w-16 items-center justify-center rounded-lg border border-dashed border-[#063e8e]/20 bg-[#063e8e]/5 text-xs text-gray-400">
Chưa có
</div>
)}
</div>
</div>
</TableCell>
<TableCell className="text-sm text-gray-600">{org.tax_code || '—'}</TableCell>
<TableCell className="text-sm text-gray-600">{org.org_email || '—'}</TableCell>
<TableCell className="text-sm text-gray-500 max-w-40 truncate">{org.address || '—'}</TableCell>
<TableCell>
{org.is_premium ? (
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">Premium</Badge>
) : (
<Badge variant="outline" className="text-gray-500 text-xs">Thường</Badge>
)}
</TableCell>
<TableCell className="text-gray-400 text-sm">
{org.created_at ? dayjs(org.created_at).format('DD/MM/YYYY') : '—'}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{totalPages > 1 && (
<div className="flex justify-end gap-2 mt-4">
<Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>Trước</Button>
<span className="text-sm text-gray-500 self-center">{page} / {totalPages}</span>
<Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>Sau</Button>
</TableCell>
<TableCell className="px-4 py-3 text-center text-sm text-gray-600">
{regionMap[item.region_id] ?? "—"}
</TableCell>
<TableCell className="px-4 py-3 text-center text-sm text-gray-600">
{fieldMap[item.field_id] ?? "—"}
</TableCell>
<TableCell className="px-4 py-3 text-center text-sm text-gray-600">
{item.phone && <div>{item.phone}</div>}
{item.email && (
<div className="truncate text-xs text-[#063e8e]">{item.email}</div>
)}
</TableCell>
<TableCell className="px-4 py-3 text-center text-sm text-gray-600">
<span className="line-clamp-2">{item.address || "—"}</span>
</TableCell>
<TableCell className="px-4 py-3 text-center">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 hover:bg-[#063e8e]/10"
>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="border-[#063e8e]/15">
<DropdownMenuItem
className="cursor-pointer text-gray-700 focus:bg-[#063e8e]/10 focus:text-[#063e8e]"
onClick={() => router.push(`/admin/members/${item.id}`)}
>
<Edit className="mr-2 h-4 w-4" />
Chỉnh sửa
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
className="cursor-pointer text-red-600 focus:bg-red-50 focus:text-red-600"
onClick={() => setDeleteTarget(item)}
>
<Trash2 className="mr-2 h-4 w-4" />
Xóa
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
)}
</AdminTableLayout>
<AdminDeleteDialog
open={!!deleteTarget}
title="Xóa hội viên"
description={
<>
Bạn có chắc muốn xóa hội viên{" "}
<span className="font-semibold">{deleteTarget?.name}</span>? Hành động này không thể
hoàn tác.
</>
}
onOpenChange={(open) => !open && setDeleteTarget(null)}
onConfirm={handleDelete}
/>
</div>
);
}
src/app/admin/members/regions/page.tsx 0 → 100644
View file @ daa7768f
"use client";
import * as React from "react";
import { Edit, Plus, Save, Trash2, X } from "lucide-react";
import { toast } from "sonner";
import { AdminDeleteDialog } from "@/components/admin/admin-delete-dialog";
import { AdminTableLayout } from "@/components/admin/admin-table-layout";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
type MemberRegion,
createMemberRegionId,
persistMemberRegions,
readMemberRegions,
} from "@/mockdata/members";
const fieldClassName =
"border-[#063e8e]/15 bg-white text-gray-700 placeholder:text-gray-700 focus-visible:ring-[#063e8e]/30";
interface RegionFormDialogProps {
open: boolean;
initial: MemberRegion | null;
onOpenChange: (open: boolean) => void;
onSave: (data: { id?: string; name: string }) => void;
}
function RegionFormDialog({ open, initial, onOpenChange, onSave }: RegionFormDialogProps) {
const [name, setName] = React.useState("");
React.useEffect(() => {
if (open) setName(initial?.name ?? "");
}, [open, initial]);
const handleSave = () => {
const trimmed = name.trim();
if (!trimmed) {
toast.error("Vui lòng nhập tên khu vực");
return;
}
onSave({ id: initial?.id, name: trimmed });
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md border-[#063e8e]/15 bg-white">
<DialogHeader>
<DialogTitle className="text-[#063e8e]">
{initial ? "Chỉnh sửa khu vực" : "Thêm khu vực mới"}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 pt-2">
<div className="space-y-1.5">
<Label className="text-gray-700">
Tên khu vực <span className="text-red-500">*</span>
</Label>
<Input
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="Nhập tên khu vực..."
className={fieldClassName}
onKeyDown={(event) => event.key === "Enter" && handleSave()}
/>
</div>
<div className="flex justify-end gap-2 pt-2">
<Button
type="button"
variant="outline"
className="border-[#063e8e]/15 text-gray-700"
onClick={() => onOpenChange(false)}
>
<X className="mr-2 h-4 w-4" />
Hủy
</Button>
<Button
type="button"
className="bg-[#063e8e] text-white hover:bg-[#063e8e]/90"
onClick={handleSave}
>
<Save className="mr-2 h-4 w-4" />
Lưu
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}
export default function AdminMemberRegionsPage() {
const [items, setItems] = React.useState<MemberRegion[]>([]);
const [search, setSearch] = React.useState("");
const [dialogOpen, setDialogOpen] = React.useState(false);
const [editTarget, setEditTarget] = React.useState<MemberRegion | null>(null);
const [deleteTarget, setDeleteTarget] = React.useState<MemberRegion | null>(null);
const [ready, setReady] = React.useState(false);
React.useEffect(() => {
setItems(readMemberRegions());
setReady(true);
}, []);
const filtered = React.useMemo(() => {
const keyword = search.trim().toLowerCase();
if (!keyword) return items;
return items.filter((item) => item.name.toLowerCase().includes(keyword));
}, [items, search]);
const openCreate = () => {
setEditTarget(null);
setDialogOpen(true);
};
const openEdit = (item: MemberRegion) => {
setEditTarget(item);
setDialogOpen(true);
};
const handleSave = (data: { id?: string; name: string }) => {
let next: MemberRegion[];
if (data.id) {
next = items.map((item) => (item.id === data.id ? { ...item, name: data.name } : item));
toast.success("Đã cập nhật khu vực");
} else {
next = [...items, { id: createMemberRegionId(), name: data.name }];
toast.success("Đã thêm khu vực mới");
}
setItems(next);
persistMemberRegions(next);
setDialogOpen(false);
};
const handleDelete = () => {
if (!deleteTarget) return;
const next = items.filter((item) => item.id !== deleteTarget.id);
setItems(next);
persistMemberRegions(next);
toast.success("Đã xóa khu vực");
setDeleteTarget(null);
};
return (
<div className="space-y-8">
<AdminTableLayout
searchValue={search}
searchPlaceholder="Tìm kiếm khu vực..."
actionLabel="Thêm khu vực"
actionIcon={<Plus className="mr-2 h-4 w-4" />}
actionMeta={
<div className="text-sm font-medium text-gray-700">
Tổng khu vực: <span className="font-semibold text-[#063e8e]">{items.length}</span>
</div>
}
onSearchChange={setSearch}
onActionClick={openCreate}
>
<Table>
<TableHeader>
<TableRow className="border-0 bg-[#063e8e] hover:bg-[#063e8e]">
<TableHead className="w-16 py-4 text-center text-white">STT</TableHead>
<TableHead className="py-4 text-white">Tên khu vực</TableHead>
<TableHead className="w-[120px] py-4 text-center text-white">Thao tác</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{!ready ? (
Array.from({ length: 3 }).map((_, index) => (
<TableRow key={`loading-${index}`}>
<TableCell colSpan={3} className="px-4 py-4">
<div className="h-10 animate-pulse rounded-xl bg-[#063e8e]/10" />
</TableCell>
</TableRow>
))
) : filtered.length === 0 ? (
<TableRow>
<TableCell colSpan={3} className="py-16 text-center text-gray-400">
Không có khu vực nào
</TableCell>
</TableRow>
) : (
filtered.map((item, index) => (
<TableRow
key={item.id}
className={index % 2 === 0 ? "bg-white" : "bg-[#063e8e]/3"}
>
<TableCell className="py-3 text-center text-sm text-gray-500">
{index + 1}
</TableCell>
<TableCell className="py-3 text-sm font-medium text-gray-800">
{item.name}
</TableCell>
<TableCell className="py-3 text-center">
<div className="flex items-center justify-center gap-1">
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 hover:bg-[#063e8e]/10 hover:text-[#063e8e]"
onClick={() => openEdit(item)}
>
<Edit className="h-4 w-4" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 hover:bg-red-50 hover:text-red-600"
onClick={() => setDeleteTarget(item)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</AdminTableLayout>
<RegionFormDialog
open={dialogOpen}
initial={editTarget}
onOpenChange={setDialogOpen}
onSave={handleSave}
/>
<AdminDeleteDialog
open={!!deleteTarget}
title="Xóa khu vực"
description={
<>
Bạn có chắc muốn xóa khu vực{" "}
<span className="font-semibold">{deleteTarget?.name}</span>? Hành động này không thể
hoàn tác.
</>
}
onOpenChange={(open) => !open && setDeleteTarget(null)}
onConfirm={handleDelete}
/>
</div>
);
}
src/app/admin/partners/page.tsx deleted 100644 → 0
View file @ 8d514056
'use client';
import React, { useState } from 'react';
import { useGetOrganizations } from '@/api/endpoints/organizations';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Search, ExternalLink } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import dayjs from 'dayjs';
export default function PartnersPage() {
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const pageSize = 20;
// Filter by type = "PARTNER" or use org categories — using filters param
const { data, isLoading } = useGetOrganizations({
currentPage: String(page),
pageSize: String(pageSize),
filters: search ? `name@=${search}` : undefined,
// note: filter by partner type when backend supports it
});
const rows = (data as any)?.responseData?.rows ?? (data as any)?.data?.rows ?? [];
const total = (data as any)?.responseData?.count ?? (data as any)?.data?.count ?? 0;
const totalPages = Math.ceil(total / pageSize);
return (
<div>
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-bold text-gray-800">Quản lý Đối tác</h2>
<p className="text-sm text-gray-500 mt-1">
Danh sách tổ chức / đối tác liên kết với VCCI.
</p>
</div>
<Badge variant="outline" className="border-[#063e8e]/30 text-[#063e8e] text-sm px-3 py-1">
{total} đối tác
</Badge>
</div>
<div className="relative w-72 mb-4">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
<Input
className="pl-9"
placeholder="Tìm theo tên đối tác..."
value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
/>
</div>
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-8">#</TableHead>
<TableHead>Tên tổ chức</TableHead>
<TableHead>Mã số thuế</TableHead>
<TableHead>Website</TableHead>
<TableHead>Email</TableHead>
<TableHead>Địa chỉ</TableHead>
<TableHead>Ngày tạo</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
Array.from({ length: 5 }).map((_, i) => (
<TableRow key={i}>
{Array.from({ length: 7 }).map((_, j) => (
<TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
))}
</TableRow>
))
) : rows.length === 0 ? (
<TableRow>
<TableCell colSpan={7} className="text-center text-gray-400 py-10 text-sm">
Chưa có đối tác nào.
</TableCell>
</TableRow>
) : rows.map((org: any, idx: number) => (
<TableRow key={org.id ?? idx}>
<TableCell className="text-gray-400 text-sm">{(page - 1) * pageSize + idx + 1}</TableCell>
<TableCell>
<div className="flex items-center gap-3">
<Avatar className="h-8 w-8 shrink-0">
<AvatarImage src={org.avatar} alt={org.name} />
<AvatarFallback className="bg-violet-100 text-violet-700 text-xs font-bold">
{org.name?.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<p className="font-medium text-sm truncate max-w-[200px]">{org.name}</p>
</div>
</TableCell>
<TableCell className="text-sm text-gray-600">{org.tax_code || '—'}</TableCell>
<TableCell>
{org.website ? (
<a
href={org.website}
target="_blank"
rel="noreferrer"
className="flex items-center gap-1 text-xs text-blue-500 hover:underline"
>
<ExternalLink size={12} />
{org.website.replace(/^https?:\/\//, '')}
</a>
) : <span className="text-gray-300 text-sm">—</span>}
</TableCell>
<TableCell className="text-sm text-gray-600">{org.org_email || '—'}</TableCell>
<TableCell className="text-sm text-gray-500 max-w-[140px] truncate">{org.address || '—'}</TableCell>
<TableCell className="text-gray-400 text-sm">
{org.created_at ? dayjs(org.created_at).format('DD/MM/YYYY') : '—'}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{totalPages > 1 && (
<div className="flex justify-end gap-2 mt-4">
<Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>Trước</Button>
<span className="text-sm text-gray-500 self-center">{page} / {totalPages}</span>
<Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>Sau</Button>
</div>
)}
</div>
);
}
src/app/admin/videos/page.tsx 0 → 100644
View file @ daa7768f
"use client";
import * as React from "react";
import { Edit, Plus, Save, Trash2, Video, X } from "lucide-react";
import Link from "next/link";
import { toast } from "sonner";
import { AdminDeleteDialog } from "@/components/admin/admin-delete-dialog";
import { AdminTableLayout } from "@/components/admin/admin-table-layout";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
createVideoId,
EMPTY_VIDEO_FORM,
type VideoFormValues,
type VideoItem,
persistVideos,
readVideos,
} from "@/mockdata/videos";
const fieldClassName =
"border-[#063e8e]/15 bg-white text-gray-700 placeholder:text-gray-700 focus-visible:ring-[#063e8e]/30";
interface VideoFormDialogProps {
open: boolean;
initial: VideoItem | null;
onOpenChange: (open: boolean) => void;
onSave: (data: VideoFormValues) => void;
}
function VideoFormDialog({ open, initial, onOpenChange, onSave }: VideoFormDialogProps) {
const [form, setForm] = React.useState<VideoFormValues>(EMPTY_VIDEO_FORM);
React.useEffect(() => {
if (!open) return;
setForm(
initial
? {
id: initial.id,
name: initial.name,
url: initial.url,
}
: EMPTY_VIDEO_FORM,
);
}, [initial, open]);
const handleField = <K extends keyof VideoFormValues>(key: K, value: VideoFormValues[K]) => {
setForm((previous) => ({ ...previous, [key]: value }));
};
const handleSave = () => {
if (!form.name.trim()) {
toast.error("Vui lòng nhập tên video");
return;
}
if (!form.url.trim()) {
toast.error("Vui lòng nhập link URL");
return;
}
onSave({
id: form.id,
name: form.name.trim(),
url: form.url.trim(),
});
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-lg border-[#063e8e]/15 bg-white">
<DialogHeader>
<DialogTitle className="text-[#063e8e]">
{initial ? "Chỉnh sửa video" : "Thêm video mới"}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 pt-2">
<div className="space-y-1.5">
<Label className="text-gray-700">
Tên video <span className="text-red-500">*</span>
</Label>
<Input
value={form.name}
onChange={(event) => handleField("name", event.target.value)}
placeholder="Nhập tên video..."
className={fieldClassName}
/>
</div>
<div className="space-y-1.5">
<Label className="text-gray-700">
Link URL <span className="text-red-500">*</span>
</Label>
<Input
value={form.url}
onChange={(event) => handleField("url", event.target.value)}
placeholder="https://..."
className={fieldClassName}
/>
</div>
<div className="flex justify-end gap-2 pt-2">
<Button
type="button"
variant="outline"
className="border-[#063e8e]/15 text-gray-700"
onClick={() => onOpenChange(false)}
>
<X className="mr-2 h-4 w-4" />
Hủy
</Button>
<Button
type="button"
className="bg-[#063e8e] text-white hover:bg-[#063e8e]/90"
onClick={handleSave}
>
<Save className="mr-2 h-4 w-4" />
Lưu
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}
export default function AdminVideosPage() {
const [items, setItems] = React.useState<VideoItem[]>([]);
const [search, setSearch] = React.useState("");
const [ready, setReady] = React.useState(false);
const [dialogOpen, setDialogOpen] = React.useState(false);
const [editTarget, setEditTarget] = React.useState<VideoItem | null>(null);
const [deleteTarget, setDeleteTarget] = React.useState<VideoItem | null>(null);
React.useEffect(() => {
setItems(readVideos());
setReady(true);
}, []);
const filtered = React.useMemo(() => {
const keyword = search.trim().toLowerCase();
if (!keyword) return items;
return items.filter(
(item) =>
item.name.toLowerCase().includes(keyword) || item.url.toLowerCase().includes(keyword),
);
}, [items, search]);
const openCreate = () => {
setEditTarget(null);
setDialogOpen(true);
};
const openEdit = (item: VideoItem) => {
setEditTarget(item);
setDialogOpen(true);
};
const handleSave = (data: VideoFormValues) => {
let next: VideoItem[];
if (data.id) {
next = items.map((item) => (item.id === data.id ? { ...item, ...data, id: data.id } : item));
toast.success("Đã cập nhật video");
} else {
next = [
...items,
{
id: createVideoId(),
name: data.name,
url: data.url,
},
];
toast.success("Đã thêm video mới");
}
setItems(next);
persistVideos(next);
setDialogOpen(false);
};
const handleDelete = () => {
if (!deleteTarget) return;
const next = items.filter((item) => item.id !== deleteTarget.id);
setItems(next);
persistVideos(next);
toast.success("Đã xóa video");
setDeleteTarget(null);
};
return (
<div className="space-y-8">
<AdminTableLayout
searchValue={search}
searchPlaceholder="Tìm kiếm video..."
actionLabel="Thêm video"
actionIcon={<Plus className="mr-2 h-4 w-4" />}
actionMeta={
<div className="text-sm font-medium text-gray-700">
Tổng video: <span className="font-semibold text-[#063e8e]">{items.length}</span>
</div>
}
onSearchChange={setSearch}
onActionClick={openCreate}
>
<Table>
<TableHeader>
<TableRow className="border-0 bg-[#063e8e] hover:bg-[#063e8e]">
<TableHead className="w-16 py-4 text-center text-white">STT</TableHead>
<TableHead className="py-4 text-center text-white">Tên video</TableHead>
<TableHead className="w-[420px] py-4 text-center text-white">Link URL</TableHead>
<TableHead className="w-[120px] py-4 text-center text-white">Thao tác</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{!ready ? (
Array.from({ length: 3 }).map((_, index) => (
<TableRow key={`loading-${index}`}>
<TableCell colSpan={4} className="px-4 py-4">
<div className="h-10 animate-pulse rounded-xl bg-[#063e8e]/10" />
</TableCell>
</TableRow>
))
) : filtered.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="py-16 text-center text-gray-400">
Không có video nào
</TableCell>
</TableRow>
) : (
filtered.map((item, index) => (
<TableRow
key={item.id}
className={index % 2 === 0 ? "bg-white" : "bg-[#063e8e]/3"}
>
<TableCell className="py-3 text-center text-sm text-gray-500">
{index + 1}
</TableCell>
<TableCell className="py-3 text-sm font-medium text-gray-800">
<div className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-[#063e8e]/10 text-[#063e8e]">
<Video className="h-4 w-4" />
</div>
<span className="line-clamp-1">{item.name}</span>
</div>
</TableCell>
<TableCell className="py-3 text-sm text-gray-700">
<Link
href={item.url}
target="_blank"
rel="noreferrer"
className="block truncate text-center text-[#063e8e] hover:underline"
>
{item.url}
</Link>
</TableCell>
<TableCell className="py-3 text-center">
<div className="flex items-center justify-center gap-1">
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 hover:bg-[#063e8e]/10 hover:text-[#063e8e]"
onClick={() => openEdit(item)}
>
<Edit className="h-4 w-4" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 hover:bg-red-50 hover:text-red-600"
onClick={() => setDeleteTarget(item)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</AdminTableLayout>
<VideoFormDialog
open={dialogOpen}
initial={editTarget}
onOpenChange={setDialogOpen}
onSave={handleSave}
/>
<AdminDeleteDialog
open={!!deleteTarget}
title="Xóa video"
description={
<>
Bạn có chắc muốn xóa video{" "}
<span className="font-semibold">{deleteTarget?.name}</span>? Hành động này không thể
hoàn tác.
</>
}
onOpenChange={(open) => !open && setDeleteTarget(null)}
onConfirm={handleDelete}
/>
</div>
);
}
src/app/admin/website-config/page.tsx deleted 100644 → 0
View file @ 8d514056
'use client';
import React, { useEffect, useState } from 'react';
import {
useGetConfig,
usePutConfig,
getGetConfigQueryKey,
} from '@/api/endpoints/website-config';
import { WebConfig } from '@/api/models/webConfig';
import { useQueryClient } from '@tanstack/react-query';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Skeleton } from '@/components/ui/skeleton';
import { Save, Globe, Phone, Mail, MapPin, Link as LinkIcon } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { toast } from 'sonner';
export default function WebsiteConfigPage() {
const qc = useQueryClient();
const { data, isLoading } = useGetConfig({});
const config: WebConfig | undefined =
(data as any)?.responseData ?? (data as any)?.data ?? undefined;
const [form, setForm] = useState<WebConfig>({
name: '',
name_en: '',
address: '',
address_en: '',
logo: '',
link: '',
phone: '',
email: '',
social: '',
});
useEffect(() => {
if (config) {
setForm({
name: config.name ?? '',
name_en: config.name_en ?? '',
address: config.address ?? '',
address_en: config.address_en ?? '',
logo: config.logo ?? '',
link: config.link ?? '',
phone: config.phone ?? '',
email: config.email ?? '',
social: config.social ?? '',
});
}
}, [config]);
const { mutate: save, isPending } = usePutConfig({
mutation: {
onSuccess: () => {
qc.invalidateQueries({ queryKey: getGetConfigQueryKey() });
toast.success('Đã lưu thông tin website!');
},
onError: () => {
toast.error('Có lỗi khi lưu thông tin. Vui lòng thử lại.');
},
},
});
const setField = <K extends keyof WebConfig>(key: K, value: WebConfig[K]) => {
setForm((prev) => ({ ...prev, [key]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!config?.id) return;
save({ params: { filters: String(config.id) }, data: form });
};
return (
<div className="max-w-2xl space-y-6">
<div>
<h2 className="text-xl font-bold text-gray-800">Thông tin website</h2>
<p className="text-sm text-gray-500 mt-1">
Cập nhật thông tin chung hiển thị trên website VCCI News.
</p>
</div>
{isLoading ? (
<div className="space-y-4">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="space-y-1.5">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-10 w-full" />
</div>
))}
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
{/* Tên website */}
<Card>
<CardHeader>
<CardTitle className="text-base flex items-center gap-2">
<Globe className="h-4 w-4 text-[#063e8e]" /> Tên & Logo
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label htmlFor="name">Tên (Tiếng Việt)</Label>
<Input
id="name"
value={form.name}
onChange={(e) => setField('name', e.target.value)}
placeholder="VCCI HCM"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="name_en">Tên (Tiếng Anh)</Label>
<Input
id="name_en"
value={form.name_en}
onChange={(e) => setField('name_en', e.target.value)}
placeholder="VCCI HCM (English)"
/>
</div>
</div>
<div className="space-y-1.5">
<Label htmlFor="logo">URL Logo</Label>
<div className="flex gap-3 items-start">
<Input
id="logo"
value={form.logo}
onChange={(e) => setField('logo', e.target.value)}
placeholder="https://..."
className="flex-1"
/>
{form.logo && (
<img
src={form.logo}
alt="logo preview"
className="h-10 w-auto border rounded object-contain"
onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
/>
)}
</div>
</div>
<div className="space-y-1.5">
<Label htmlFor="link">
<LinkIcon className="inline h-3.5 w-3.5 mr-1" />
Đường dẫn website
</Label>
<Input
id="link"
value={form.link}
onChange={(e) => setField('link', e.target.value)}
placeholder="https://vccihn.com"
/>
</div>
</CardContent>
</Card>
<Separator />
{/* Liên hệ */}
<Card>
<CardHeader>
<CardTitle className="text-base flex items-center gap-2">
<Phone className="h-4 w-4 text-[#063e8e]" /> Thông tin liên hệ
</CardTitle>
<CardDescription className="text-xs">Hiển thị ở footer và trang liên hệ.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label htmlFor="phone">
<Phone className="inline h-3.5 w-3.5 mr-1" />
Điện thoại
</Label>
<Input
id="phone"
value={form.phone}
onChange={(e) => setField('phone', e.target.value)}
placeholder="028 xxxx xxxx"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="email">
<Mail className="inline h-3.5 w-3.5 mr-1" />
Email
</Label>
<Input
id="email"
type="email"
value={form.email}
onChange={(e) => setField('email', e.target.value)}
placeholder="info@vcci.com.vn"
/>
</div>
</div>
<div className="space-y-1.5">
<Label htmlFor="address">
<MapPin className="inline h-3.5 w-3.5 mr-1" />
Địa chỉ (Tiếng Việt)
</Label>
<Input
id="address"
value={form.address}
onChange={(e) => setField('address', e.target.value)}
placeholder="171 Võ Thị Sáu, Quận 3, TP.HCM"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="address_en">
<MapPin className="inline h-3.5 w-3.5 mr-1" />
Địa chỉ (Tiếng Anh)
</Label>
<Input
id="address_en"
value={form.address_en}
onChange={(e) => setField('address_en', e.target.value)}
placeholder="171 Vo Thi Sau, District 3, HCMC"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="social">Mạng xã hội (URL Facebook / Fanpage)</Label>
<Input
id="social"
value={form.social}
onChange={(e) => setField('social', e.target.value)}
placeholder="https://facebook.com/vccihn"
/>
</div>
</CardContent>
</Card>
<div className="flex justify-end">
<Button type="submit" disabled={isPending || !config?.id} className="bg-[#063e8e] hover:bg-[#063e8e]/90">
<Save size={15} className="mr-2" />
{isPending ? 'Đang lưu...' : 'Lưu thay đổi'}
</Button>
</div>
</form>
)}
</div>
);
}
src/components/admin/admin-table-layout.tsx
View file @ daa7768f
......@@ -10,6 +10,7 @@ interface AdminTableLayoutProps {
searchPlaceholder?: string;
actionLabel?: string;
actionIcon?: React.ReactNode;
actionMeta?: React.ReactNode;
actionDisabled?: boolean;
children: React.ReactNode;
filters?: React.ReactNode;
......@@ -22,6 +23,7 @@ export function AdminTableLayout({
searchPlaceholder = "Tìm kiếm...",
actionLabel,
actionIcon,
actionMeta,
actionDisabled = false,
children,
filters,
......@@ -41,20 +43,25 @@ export function AdminTableLayout({
{filters}
</div>
{actionLabel ? (
<Button
type="button"
disabled={actionDisabled}
onClick={onActionClick}
className="bg-[#063e8e] text-white hover:bg-[#063e8e]/90"
>
{actionIcon ?? <Plus className="mr-2 h-4 w-4" />}
{actionLabel}
</Button>
{actionLabel || actionMeta ? (
<div className="flex items-center gap-3 self-start sm:self-auto">
{actionMeta}
{actionLabel ? (
<Button
type="button"
disabled={actionDisabled}
onClick={onActionClick}
className="bg-[#063e8e] text-white hover:bg-[#063e8e]/90"
>
{actionIcon ?? <Plus className="mr-2 h-4 w-4" />}
{actionLabel}
</Button>
) : null}
</div>
) : null}
</div>
<div className="overflow-hidden rounded-xl border border-[#063e8e]/15 bg-white shadow-sm">
<div className="overflow-hidden rounded-xl border border-[#063e8e]/20 bg-white shadow-sm [&_tbody_td:not(:last-child)]:border-r [&_tbody_td:not(:last-child)]:border-[#063e8e]/20 [&_thead_th:not(:last-child)]:border-r [&_thead_th:not(:last-child)]:border-white/15">
{children}
</div>
</div>
......
src/components/admin/member-form.tsx 0 → 100644
View file @ daa7768f
"use client";
import * as React from "react";
import { ArrowLeft, Save, Upload, X } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { AdminImagePicker } from "@/components/admin/image-picker";
import { AdminPostContentEditor } from "@/components/admin/post-content-editor";
import { SafeNextImage } from "@/components/admin/safe-next-image";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
type AdminMediaItem,
type AdminNewsContentSection,
} from "@/mockdata/admin-news";
import {
type MemberField,
type MemberFormValues,
type MemberImageRef,
type MemberItem,
type MemberRegion,
EMPTY_MEMBER_FORM,
cloneMemberFormValues,
createMemberId,
persistMembers,
readMemberFields,
readMemberRegions,
readMembers,
} from "@/mockdata/members";
interface AdminMemberFormProps {
memberId?: string;
}
const fieldClassName =
"border-[#063e8e]/15 bg-white text-gray-700 placeholder:text-gray-700 focus-visible:ring-[#063e8e]/30";
const selectTriggerClassName =
"border-[#063e8e]/15 bg-white text-gray-700 data-[placeholder]:text-gray-700 focus:ring-[#063e8e]/30";
const selectContentClassName = "border-[#063e8e]/15 bg-white text-gray-700";
const selectItemClassName =
"text-gray-700 focus:bg-[#063e8e]/10 focus:text-[#063e8e]";
function toImageRef(item: AdminMediaItem): MemberImageRef {
return { id: item.id, name: item.name, alt: item.alt, url: item.url };
}
export function AdminMemberForm({ memberId }: AdminMemberFormProps) {
const router = useRouter();
const isNew = !memberId || memberId === "new";
const [form, setForm] = React.useState<MemberFormValues>(EMPTY_MEMBER_FORM);
const [fields, setFields] = React.useState<MemberField[]>([]);
const [regions, setRegions] = React.useState<MemberRegion[]>([]);
const [imagePickerOpen, setImagePickerOpen] = React.useState(false);
const [saving, setSaving] = React.useState(false);
const [ready, setReady] = React.useState(false);
React.useEffect(() => {
const allFields = readMemberFields();
const allRegions = readMemberRegions();
setFields(allFields);
setRegions(allRegions);
if (!isNew) {
const all = readMembers();
const found = all.find((m) => m.id === memberId);
if (found) {
setForm(cloneMemberFormValues(found));
}
}
setReady(true);
}, [isNew, memberId]);
const set = <K extends keyof MemberFormValues>(key: K, value: MemberFormValues[K]) => {
setForm((previous) => ({ ...previous, [key]: value }));
};
const handleImageSelect = (item: AdminMediaItem) => {
set("image", toImageRef(item));
setImagePickerOpen(false);
};
const handleIntroductionChange = (sections: AdminNewsContentSection[]) => {
set("introduction", sections);
};
const handleSave = () => {
if (!form.name.trim()) {
toast.error("Vui lòng nhập tên hội viên");
return;
}
setSaving(true);
try {
const now = new Date().toISOString();
const all = readMembers();
if (isNew) {
const newItem: MemberItem = {
id: createMemberId(),
name: form.name.trim(),
is_featured: form.is_featured,
image: form.image,
region_id: form.region_id,
field_id: form.field_id,
address: form.address,
phone: form.phone,
fax: form.fax,
email: form.email,
website: form.website,
introduction: form.introduction,
created_at: now,
updated_at: now,
};
persistMembers([...all, newItem]);
toast.success("Đã thêm hội viên mới");
} else {
const nextAll = all.map((m) => {
if (m.id !== memberId) return m;
return {
...m,
name: form.name.trim(),
is_featured: form.is_featured,
image: form.image,
region_id: form.region_id,
field_id: form.field_id,
address: form.address,
phone: form.phone,
fax: form.fax,
email: form.email,
website: form.website,
introduction: form.introduction,
updated_at: now,
} satisfies MemberItem;
});
persistMembers(nextAll);
toast.success("Đã lưu thay đổi");
}
router.push("/admin/members");
} finally {
setSaving(false);
}
};
if (!ready) {
return (
<div className="flex h-64 items-center justify-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-[#063e8e] border-t-transparent" />
</div>
);
}
return (
<div className="space-y-8">
{/* Header */}
<div className="flex items-center gap-4">
<Link href="/admin/members">
<Button type="button" variant="outline" size="icon" className="border-[#063e8e]/15">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-2xl font-bold text-[#063e8e]">
{isNew ? "Thêm hội viên mới" : "Chỉnh sửa hội viên"}
</h1>
<p className="text-sm text-gray-500">
{isNew ? "Điền thông tin hội viên mới" : `Chỉnh sửa: ${form.name}`}
</p>
</div>
</div>
<div className="grid grid-cols-1 gap-8 xl:grid-cols-3">
{/* Main info */}
<div className="space-y-6 xl:col-span-2">
<div className="rounded-2xl border border-[#063e8e]/15 bg-white p-6 shadow-sm">
<h2 className="mb-4 text-base font-semibold text-[#063e8e]">Thông tin cơ bản</h2>
<div className="space-y-4">
{/* Name */}
<div className="space-y-1.5">
<Label className="text-gray-700">
Tên hội viên <span className="text-red-500">*</span>
</Label>
<Input
value={form.name}
onChange={(e) => set("name", e.target.value)}
placeholder="Nhập tên hội viên..."
className={fieldClassName}
/>
</div>
{/* Region & Field */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="space-y-1.5">
<Label className="text-gray-700">Khu vực</Label>
<Select value={form.region_id} onValueChange={(v) => set("region_id", v)}>
<SelectTrigger className={selectTriggerClassName}>
<SelectValue placeholder="Chọn khu vực" />
</SelectTrigger>
<SelectContent className={selectContentClassName}>
{regions.map((r) => (
<SelectItem key={r.id} value={r.id} className={selectItemClassName}>
{r.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-1.5">
<Label className="text-gray-700">Lĩnh vực</Label>
<Select value={form.field_id} onValueChange={(v) => set("field_id", v)}>
<SelectTrigger className={selectTriggerClassName}>
<SelectValue placeholder="Chọn lĩnh vực" />
</SelectTrigger>
<SelectContent className={selectContentClassName}>
{fields.map((f) => (
<SelectItem key={f.id} value={f.id} className={selectItemClassName}>
{f.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{/* Address */}
<div className="space-y-1.5">
<Label className="text-gray-700">Địa chỉ</Label>
<Input
value={form.address}
onChange={(e) => set("address", e.target.value)}
placeholder="Nhập địa chỉ..."
className={fieldClassName}
/>
</div>
{/* Phone & Fax */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="space-y-1.5">
<Label className="text-gray-700">Điện thoại</Label>
<Input
value={form.phone}
onChange={(e) => set("phone", e.target.value)}
placeholder="Nhập số điện thoại..."
className={fieldClassName}
/>
</div>
<div className="space-y-1.5">
<Label className="text-gray-700">Fax</Label>
<Input
value={form.fax}
onChange={(e) => set("fax", e.target.value)}
placeholder="Nhập số fax..."
className={fieldClassName}
/>
</div>
</div>
{/* Email & Website */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="space-y-1.5">
<Label className="text-gray-700">Email</Label>
<Input
type="email"
value={form.email}
onChange={(e) => set("email", e.target.value)}
placeholder="Nhập email..."
className={fieldClassName}
/>
</div>
<div className="space-y-1.5">
<Label className="text-gray-700">Website</Label>
<Input
value={form.website}
onChange={(e) => set("website", e.target.value)}
placeholder="https://..."
className={fieldClassName}
/>
</div>
</div>
<div className="rounded-xl border border-[#063e8e]/15 bg-[#063e8e]/[0.02] px-4 py-3">
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-sm font-medium text-gray-700">Hội viên tiêu biểu</p>
<p className="mt-1 text-sm text-gray-700">
Đánh dấu để ưu tiên hiển thị như một hội viên tiêu biểu.
</p>
</div>
<Switch
checked={form.is_featured}
onCheckedChange={(checked) => set("is_featured", Boolean(checked))}
/>
</div>
</div>
</div>
</div>
{/* Introduction (CMS) */}
<div className="rounded-2xl border border-[#063e8e]/15 bg-white p-6 shadow-sm">
<h2 className="mb-4 text-base font-semibold text-[#063e8e]">Giới thiệu</h2>
<AdminPostContentEditor
sections={form.introduction}
onChange={handleIntroductionChange}
/>
</div>
</div>
{/* Side panel */}
<div className="space-y-6">
{/* Actions */}
<div className="rounded-2xl border border-[#063e8e]/15 bg-white p-6 shadow-sm">
<h2 className="mb-4 text-base font-semibold text-[#063e8e]">Thao tác</h2>
<div className="flex flex-col gap-3">
<Button
type="button"
disabled={saving}
onClick={handleSave}
className="w-full bg-[#063e8e] text-white hover:bg-[#063e8e]/90"
>
<Save className="mr-2 h-4 w-4" />
{saving ? "Đang lưu..." : "Lưu hội viên"}
</Button>
<Link href="/admin/members" className="w-full">
<Button type="button" variant="outline" className="w-full border-[#063e8e]/15">
Hủy
</Button>
</Link>
</div>
</div>
{/* Image */}
<div className="rounded-2xl border border-[#063e8e]/15 bg-white p-6 shadow-sm">
<h2 className="mb-4 text-base font-semibold text-[#063e8e]">Ảnh đại diện</h2>
{form.image ? (
<div className="space-y-3">
<div className="relative aspect-video overflow-hidden rounded-xl border border-[#063e8e]/15">
<SafeNextImage
src={form.image.url}
alt={form.image.alt || form.image.name}
fill
className="object-cover"
/>
</div>
<div className="flex gap-2">
<Button
type="button"
variant="outline"
size="sm"
className="flex-1 border-[#063e8e]/15 text-xs"
onClick={() => setImagePickerOpen(true)}
>
<Upload className="mr-1.5 h-3.5 w-3.5" />
Đổi ảnh
</Button>
<Button
type="button"
variant="outline"
size="icon"
className="border-red-200 text-red-500 hover:bg-red-50"
onClick={() => set("image", null)}
>
<X className="h-4 w-4" />
</Button>
</div>
</div>
) : (
<Button
type="button"
variant="outline"
className="w-full border-dashed border-[#063e8e]/25 text-[#063e8e]/60 hover:border-[#063e8e]/50 hover:text-[#063e8e]"
onClick={() => setImagePickerOpen(true)}
>
<Upload className="mr-2 h-4 w-4" />
Chọn ảnh
</Button>
)}
</div>
</div>
</div>
<AdminImagePicker
open={imagePickerOpen}
selectedId={form.image?.id ?? null}
onOpenChange={setImagePickerOpen}
onSelect={handleImageSelect}
/>
</div>
);
}
src/components/admin/rich-text-editor.tsx
View file @ daa7768f
......@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
import { useMemo, useRef } from "react";
import type { JoditEditorProps } from "jodit-react";
const JoditEditor = dynamic(() => import("jodit-react"), {
const JoditEditor = dynamic(() => import("jodit-react").then((mod) => mod.default), {
ssr: false,
loading: () => (
<div className="flex min-h-[260px] items-center justify-center rounded-2xl border border-[#063e8e]/15 bg-white text-sm text-gray-500">
......
src/components/shared/admin-header.tsx
View file @ daa7768f
......@@ -2,14 +2,15 @@
import React from 'react';
import { usePathname } from 'next/navigation';
import { Menu } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useSidebarStore } from '@/hooks/use-admin-sidebar';
import { Menu } from 'lucide-react';
const routeLabels: Record<string, string> = {
'/admin/dashboard': 'Dashboard',
'/admin/header-config': 'Cấu hình Danh mục',
'/admin/news': 'Quản lý bài viết',
'/admin/videos': 'Quản lý video',
'/admin/members': 'Quản lý Hội viên',
'/admin/partners': 'Quản lý Đối tác',
'/admin/emails': 'Email nhận thông tin',
......@@ -20,7 +21,7 @@ function getTitle(pathname: string): string {
if (routeLabels[pathname]) return routeLabels[pathname];
for (const [prefix, label] of Object.entries(routeLabels)) {
if (pathname.startsWith(prefix + '/')) return label;
if (pathname.startsWith(`${prefix}/`)) return label;
}
return 'Quản trị';
......
src/components/shared/admin-sidebar.tsx
View file @ daa7768f
......@@ -5,15 +5,12 @@ import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
BarChart3,
Building2,
ChevronDown,
Globe,
Layers,
Mail,
Newspaper,
Settings,
Users,
Video,
} from 'lucide-react';
import logo from '@/assets/VCCI-HCM-logo-VN-2025.png';
import { useSidebarStore } from '@/hooks/use-admin-sidebar';
......@@ -28,27 +25,43 @@ type NavItem = {
};
const navigation: NavItem[] = [
// { name: 'Dashboard', href: '/admin/dashboard', icon: BarChart3 },
{ name: 'Cấu hình danh mục', href: '/admin/header-config', icon: Layers },
{ name: 'Quản lý bài viết', href: '/admin/news', icon: Newspaper },
// { name: 'Quản lý hội viên', href: '/admin/members', icon: Users },
// { name: 'Quản lý đối tác', href: '/admin/partners', icon: Building2 },
// { name: 'Email thông tin', href: '/admin/emails', icon: Mail },
// {
// name: 'Thiết lập',
// icon: Settings,
// children: [{ name: 'Thông tin website', href: '/admin/website-config' }],
// },
{ name: 'Quản lý video', href: '/admin/videos', icon: Video },
{
name: 'Quản lý hội viên',
icon: Users,
children: [
{ name: 'Danh sách hội viên', href: '/admin/members' },
{ name: 'Quản lý lĩnh vực', href: '/admin/members/fields' },
{ name: 'Quản lý khu vực', href: '/admin/members/regions' },
],
},
];
const membersReservedSegments = new Set(['fields', 'regions']);
export function AdminSidebar() {
const pathname = usePathname();
const { isOpen } = useSidebarStore();
const [expandedGroups, setExpandedGroups] = React.useState<Record<string, boolean>>({
'Thiết lập': true,
'Quản lý hội viên': true,
});
const isItemActive = (href: string) => pathname === href || pathname.startsWith(`${href}/`);
const isItemActive = React.useCallback(
(href: string) => {
if (href === '/admin/members') {
if (pathname === href) return true;
if (!pathname.startsWith(`${href}/`)) return false;
const nextSegment = pathname.slice(`${href}/`.length).split('/')[0];
return Boolean(nextSegment) && !membersReservedSegments.has(nextSegment);
}
return pathname === href || pathname.startsWith(`${href}/`);
},
[pathname],
);
const isGroupActive = (children: NavChild[]) => children.some((child) => isItemActive(child.href));
......
src/mockdata/members.ts 0 → 100644
View file @ daa7768f
"use client";
// ---------------------------------------------------------------------------
// Storage keys
// ---------------------------------------------------------------------------
export const MEMBER_STORAGE_KEY = "vcci-news.admin-members.data.v1";
export const MEMBER_FIELD_STORAGE_KEY = "vcci-news.admin-member-fields.data.v1";
export const MEMBER_REGION_STORAGE_KEY = "vcci-news.admin-member-regions.data.v1";
// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------
export interface MemberField {
id: string;
name: string;
}
export interface MemberRegion {
id: string;
name: string;
}
export interface MemberImageRef {
id: string;
name: string;
alt: string;
url: string;
}
import type { AdminNewsContentSection } from "@/mockdata/admin-news";
export interface MemberItem {
id: string;
name: string;
is_featured: boolean;
image: MemberImageRef | null;
region_id: string;
field_id: string;
address: string;
phone: string;
fax: string;
email: string;
website: string;
introduction: AdminNewsContentSection[];
created_at: string;
updated_at: string;
}
export interface MemberFormValues {
id?: string;
name: string;
is_featured: boolean;
image: MemberImageRef | null;
region_id: string;
field_id: string;
address: string;
phone: string;
fax: string;
email: string;
website: string;
introduction: AdminNewsContentSection[];
}
// ---------------------------------------------------------------------------
// ID generators
// ---------------------------------------------------------------------------
export function createMemberId(): string {
return `member-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
}
export function createMemberFieldId(): string {
return `field-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
}
export function createMemberRegionId(): string {
return `region-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
}
// ---------------------------------------------------------------------------
// Seed data
// ---------------------------------------------------------------------------
const SEED_FIELDS: MemberField[] = [
{ id: "field-1", name: "Công nghiệp" },
{ id: "field-2", name: "Thương mại" },
{ id: "field-3", name: "Dịch vụ" },
{ id: "field-4", name: "Nông nghiệp" },
{ id: "field-5", name: "Công nghệ thông tin" },
];
const SEED_REGIONS: MemberRegion[] = [
{ id: "region-1", name: "TP. Hồ Chí Minh" },
{ id: "region-2", name: "Hà Nội" },
{ id: "region-3", name: "Đà Nẵng" },
{ id: "region-4", name: "Cần Thơ" },
{ id: "region-5", name: "Bình Dương" },
];
const SEED_MEMBERS: MemberItem[] = [
{
id: "member-1",
name: "Công ty TNHH ABC",
is_featured: true,
image: null,
region_id: "region-1",
field_id: "field-2",
address: "123 Nguyễn Văn Linh, Quận 7, TP. HCM",
phone: "028 1234 5678",
fax: "028 1234 5679",
email: "contact@abc.vn",
website: "https://abc.vn",
introduction: [],
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
},
];
// ---------------------------------------------------------------------------
// Field helpers
// ---------------------------------------------------------------------------
export function getMemberFieldSeed(): MemberField[] {
return SEED_FIELDS;
}
export function readMemberFields(): MemberField[] {
if (typeof window === "undefined") return getMemberFieldSeed();
const raw = window.localStorage.getItem(MEMBER_FIELD_STORAGE_KEY);
if (!raw) return getMemberFieldSeed();
try {
const parsed = JSON.parse(raw) as MemberField[];
return Array.isArray(parsed) && parsed.length > 0 ? parsed : getMemberFieldSeed();
} catch {
return getMemberFieldSeed();
}
}
export function persistMemberFields(fields: MemberField[]): void {
if (typeof window === "undefined") return;
window.localStorage.setItem(MEMBER_FIELD_STORAGE_KEY, JSON.stringify(fields));
}
// ---------------------------------------------------------------------------
// Region helpers
// ---------------------------------------------------------------------------
export function getMemberRegionSeed(): MemberRegion[] {
return SEED_REGIONS;
}
export function readMemberRegions(): MemberRegion[] {
if (typeof window === "undefined") return getMemberRegionSeed();
const raw = window.localStorage.getItem(MEMBER_REGION_STORAGE_KEY);
if (!raw) return getMemberRegionSeed();
try {
const parsed = JSON.parse(raw) as MemberRegion[];
return Array.isArray(parsed) && parsed.length > 0 ? parsed : getMemberRegionSeed();
} catch {
return getMemberRegionSeed();
}
}
export function persistMemberRegions(regions: MemberRegion[]): void {
if (typeof window === "undefined") return;
window.localStorage.setItem(MEMBER_REGION_STORAGE_KEY, JSON.stringify(regions));
}
// ---------------------------------------------------------------------------
// Member helpers
// ---------------------------------------------------------------------------
export function getMemberSeed(): MemberItem[] {
return SEED_MEMBERS;
}
export function readMembers(): MemberItem[] {
if (typeof window === "undefined") return getMemberSeed();
const raw = window.localStorage.getItem(MEMBER_STORAGE_KEY);
if (!raw) return getMemberSeed();
try {
const parsed = JSON.parse(raw) as MemberItem[];
return Array.isArray(parsed) && parsed.length > 0 ? parsed : getMemberSeed();
} catch {
return getMemberSeed();
}
}
export function persistMembers(members: MemberItem[]): void {
if (typeof window === "undefined") return;
window.localStorage.setItem(MEMBER_STORAGE_KEY, JSON.stringify(members));
}
export function cloneMemberFormValues(item: MemberItem): MemberFormValues {
return {
id: item.id,
name: item.name,
is_featured: Boolean(item.is_featured),
image: item.image ? { ...item.image } : null,
region_id: item.region_id,
field_id: item.field_id,
address: item.address,
phone: item.phone,
fax: item.fax,
email: item.email,
website: item.website,
introduction: item.introduction.map((section) => ({
...section,
images: section.images.map((img) => ({ ...img })),
})),
};
}
export const EMPTY_MEMBER_FORM: MemberFormValues = {
name: "",
is_featured: false,
image: null,
region_id: "",
field_id: "",
address: "",
phone: "",
fax: "",
email: "",
website: "",
introduction: [],
};
src/mockdata/videos.ts 0 → 100644
View file @ daa7768f
"use client";
export const VIDEO_STORAGE_KEY = "vcci-news.admin-videos.data.v1";
export interface VideoItem {
id: string;
name: string;
url: string;
}
export interface VideoFormValues {
id?: string;
name: string;
url: string;
}
const VIDEO_SEED: VideoItem[] = [
{
id: "video-1",
name: "Giới thiệu VCCI News",
url: "https://www.youtube.com/watch?v=example001",
},
{
id: "video-2",
name: "Bản tin hoạt động hội viên",
url: "https://www.youtube.com/watch?v=example002",
},
];
export function createVideoId(): string {
return `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
}
export function getVideoSeed(): VideoItem[] {
return VIDEO_SEED;
}
export function readVideos(): VideoItem[] {
if (typeof window === "undefined") return getVideoSeed();
const raw = window.localStorage.getItem(VIDEO_STORAGE_KEY);
if (!raw) return getVideoSeed();
try {
const parsed = JSON.parse(raw) as VideoItem[];
return Array.isArray(parsed) && parsed.length > 0 ? parsed : getVideoSeed();
} catch {
return getVideoSeed();
}
}
export function persistVideos(items: VideoItem[]): void {
if (typeof window === "undefined") return;
window.localStorage.setItem(VIDEO_STORAGE_KEY, JSON.stringify(items));
}
export const EMPTY_VIDEO_FORM: VideoFormValues = {
name: "",
url: "",
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment