Skip to content

V
VCCI-News
Commit 63303609 authored by Phạm Quang Bảo's avatar Phạm Quang Bảo
Browse files
Options

Merge branch 'refactor/dynamic_page' into 'develop-news' 

fix: dynamic page and add lightbox

See merge request !131
parents f1642091 51ad7fac
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2935 additions and 2253 deletions
src/app/(main)/[...slug]/page.tsx
View file @ 63303609
import type { Metadata } from "next"; import type { Metadata } from "next";
import links from "@links/index"; import links from "@links/index";
import { import {
fetchDynamicPostById,
fetchDynamicPostBySlug,
getDynamicPostSeoImage, getDynamicPostSeoImage,
getDynamicPostExcerpt, getDynamicPostExcerpt,
stripHtml, stripHtml,
} from "./templates/data"; } from "./templates/data";
import { getApiV10Post, getApiV10PostId } from "@/api/vcci-news/endpoints/post";
import type { DynamicPostItem } from "./templates/types";
import { fetchCmsCategories } from "@/lib/api/cms-admin";
import DynamicPageClient from "./DynamicPageClient"; import DynamicPageClient from "./DynamicPageClient";
const STATIC_PAGE_SLUGS = new Set([
"an-pham", "thu-vien-tai-lieu", "ve-vcci-hcm", "dich-vu-cung-cap",
"dang-ky-hoi-vien", "ho-so-thi-truong", "loi-ich-hoi-vien-vcci",
"phap-che", "giay-chung-nhan-gcn-va-chung-tu-thuong-mai-cttm",
"quy-trinh-tiep-nhan-ho-so-cap-gcn-va-xac-nhan-cttm",
"bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm", "phi-cap-gcn-va-xac-nhan-cttm",
"diem-cap-va-thoi-gian-cap-gcn-va-xac-nhan-cttm", "thong-tin-lien-he",
"danh-ba-hoi-vien", "search", "site-map", "video",
]);
const SITE_NAME = "VCCI HCM";
const SITE_TAGLINE = "Liên đoàn Thương mại và Công nghiệp Việt Nam - Chi nhánh khu vực TP.HCM";
const STATIC_PAGE_METADATA: Record<string, { title: string; description: string }> = {
"an-pham": {
title: "Ấn phẩm",
description:
"Tổng hợp các ấn phẩm, báo cáo và ấn phẩm định kỳ do VCCI-HCM phát hành, cập nhật thông tin doanh nghiệp và thị trường.",
},
"thu-vien-tai-lieu": {
title: "Thư viện tài liệu",
description:
"Thư viện tài liệu VCCI-HCM: tài liệu nghiên cứu, báo cáo thị trường, văn bản pháp lý và ấn phẩm hỗ trợ doanh nghiệp.",
},
"ve-vcci-hcm": {
title: "Về VCCI HCM",
description:
"Giới thiệu về Liên đoàn Thương mại và Công nghiệp Việt Nam - Chi nhánh khu vực TP.HCM: tầm nhìn, sứ mệnh, giá trị cốt lõi và lĩnh vực hoạt động.",
},
"dich-vu-cung-cap": {
title: "Dịch vụ cung cấp",
description:
"Các dịch vụ VCCI-HCM cung cấp cho hội viên và doanh nghiệp: sự kiện, đào tạo, xúc tiến thương mại, cho thuê văn phòng và hỗ trợ pháp lý.",
},
"dang-ky-hoi-vien": {
title: "Đăng ký hội viên",
description:
"Hướng dẫn hồ sơ, điều kiện và phí đăng ký trở thành hội viên chính thức của VCCI, cùng các biểu mẫu đính kèm.",
},
"ho-so-thi-truong": {
title: "Hồ sơ thị trường",
description:
"Hồ sơ thị trường các khu vực Đông Nam Á, Đông Bắc Á, Âu - Mỹ, Trung Đông - Châu Phi hỗ trợ doanh nghiệp tiếp cận cơ hội xuất khẩu và đối tác.",
},
"loi-ich-hoi-vien-vcci": {
title: "Lợi ích hội viên VCCI",
description:
"Các lợi ích khi trở thành hội viên VCCI-HCM: tiếng nói đại diện, nhận diện thương hiệu, hỗ trợ pháp lý và ưu đãi dịch vụ.",
},
"phap-che": {
title: "Pháp chế",
description:
"Dịch vụ pháp chế của VCCI-HCM: góp ý xây dựng pháp luật, tư vấn chuyên sâu, dịch vụ thương mại và đào tạo nghiệp vụ pháp lý.",
},
"giay-chung-nhan-gcn-va-chung-tu-thuong-mai-cttm": {
title: "Giấy chứng nhận GCN và chứng từ thương mại CTTM",
description:
"Giới thiệu về Giấy chứng nhận của VCCI và xác nhận Chứng từ thương mại (CTTM): định nghĩa, đơn vị cấp và phạm vi áp dụng.",
},
"quy-trinh-tiep-nhan-ho-so-cap-gcn-va-xac-nhan-cttm": {
title: "Quy trình tiếp nhận hồ sơ cấp GCN và xác nhận CTTM",
description:
"Quy trình 5 bước tiếp nhận hồ sơ cấp Giấy chứng nhận (GCN) và xác nhận Chứng từ thương mại (CTTM) trên hệ thống COVCCI.",
},
"bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm": {
title: "Biểu mẫu GCN và nội dung khai báo GCN, CTTM",
description:
"Biểu mẫu và hướng dẫn nội dung khai báo Giấy chứng nhận (GCN), Chứng từ thương mại (CTTM) do VCCI cấp.",
},
"phi-cap-gcn-va-xac-nhan-cttm": {
title: "Phí cấp GCN và xác nhận CTTM",
description:
"Bảng giá dịch vụ cấp Giấy chứng nhận (GCN) và xác nhận Chứng từ thương mại (CTTM) của VCCI.",
},
"diem-cap-va-thoi-gian-cap-gcn-va-xac-nhan-cttm": {
title: "Điểm cấp và thời gian cấp GCN và xác nhận CTTM",
description:
"Địa chỉ, điện thoại và thời gian làm việc của các điểm cấp Giấy chứng nhận (GCN) và xác nhận Chứng từ thương mại (CTTM).",
},
"thong-tin-lien-he": {
title: "Thông tin liên hệ",
description:
"Thông tin liên hệ Phòng Pháp chế và xác nhận Chứng từ thương mại - VCCI-HCM: địa chỉ, điện thoại và email.",
},
"danh-ba-hoi-vien": {
title: "Danh bạ hội viên",
description:
"Danh bạ hội viên VCCI-HCM: tra cứu thông tin doanh nghiệp hội viên và kết nối đối tác kinh doanh.",
},
"search": {
title: "Tìm kiếm",
description:
"Tìm kiếm tin tức, bài viết và nội dung trên website VCCI-HCM theo từ khóa.",
},
"site-map": {
title: "Sơ đồ site",
description:
"Sơ đồ tổng quan các chuyên mục và trang trên website VCCI-HCM, hỗ trợ điều hướng nhanh.",
},
"video": {
title: "Video",
description:
"Thư viện video VCCI-HCM: các phóng sự, sự kiện, hội thảo và hoạt động xúc tiến thương mại.",
},
};
/** /**
* Build an absolute og:image URL. Relative paths (e.g. "/thumbnail.png") are * Build an absolute og:image URL. Relative paths (e.g. "/thumbnail.png") are
* resolved against the site origin so social crawlers always receive an * resolved against the site origin so social crawlers always receive an
...@@ -61,20 +168,59 @@ export async function generateMetadata({ ...@@ -61,20 +168,59 @@ export async function generateMetadata({
const path = `/${(slug ?? []).join("/")}`; const path = `/${(slug ?? []).join("/")}`;
const postId = id?.trim() ?? ""; const postId = id?.trim() ?? "";
const endingSlug = slug?.length ? String(slug[slug.length - 1] ?? "") : "";
if (STATIC_PAGE_SLUGS.has(endingSlug)) {
const pageMeta = STATIC_PAGE_METADATA[endingSlug] ?? {
title: SITE_NAME,
description: SITE_TAGLINE,
};
return {
title: pageMeta.title,
description: pageMeta.description,
alternates: { canonical: `${links.siteURL.replace(/\/+$/, "")}${path}` },
};
}
let post = null; // Try to find a matching category for non-post routes
let categoryTitle = "";
if (!postId) {
try { try {
post = postId const categories = await fetchCmsCategories();
? await fetchDynamicPostById(postId) const matched = categories.find((item) => item.url === path || `/${item.slug}` === path);
: await fetchDynamicPostBySlug(path); if (matched) categoryTitle = matched.name;
} catch {
// ignore
}
}
let post: DynamicPostItem | null = null;
try {
if (postId) {
const response = await getApiV10PostId(postId).catch(() => null);
post = (response?.responseData ?? null) as unknown as DynamicPostItem | null;
} else {
const slugFromPath = path.split("/").filter(Boolean).pop() ?? "";
if (slugFromPath) {
const response = await getApiV10Post({
page: 1,
pageSize: 1,
filters: `slug==${slugFromPath},is_hidden==false,is_active==true,type==news`,
}).catch(() => null);
const rows = response?.responseData?.rows ?? [];
post = (rows[0] as unknown as DynamicPostItem) ?? null;
}
}
} catch { } catch {
post = null; post = null;
} }
if (!post || !post.title) { if (!post || !post.title) {
const title = categoryTitle || "VCCI HCM";
return { return {
title: "Bài viết không tìm thấy", title,
robots: { index: false, follow: false }, description: "Liên đoàn Thương mại và Công nghiệp Việt Nam - Chi nhánh khu vực TP.HCM",
alternates: { canonical: `${links.siteURL.replace(/\/+$/, "")}${path}` },
}; };
} }
......
src/app/(main)/[...slug]/static-pages/AboutVcciHcm.tsx 0 → 100644
View file @ 63303609
This diff is collapsed.
src/app/(main)/[...slug]/templates/CatalogPage.tsx → src/app/(main)/[...slug]/static-pages/AnPham.tsx
View file @ 63303609
'use client'; "use client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
...@@ -8,24 +8,24 @@ import { Pagination } from "@/components/base/pagination"; ...@@ -8,24 +8,24 @@ import { Pagination } from "@/components/base/pagination";
import { SafeImage } from "@/components/shared/safe-image"; import { SafeImage } from "@/components/shared/safe-image";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import ListCategory from "@/components/base/list-category";
import EventsCalendar from "@/app/(main)/(home)/components/events-calendar"; import EventsCalendar from "@/app/(main)/(home)/components/events-calendar";
import SidebarAdvertisements from "@/components/shared/sidebar-advertisements"; import SidebarAdvertisements from "@/components/shared/sidebar-advertisements";
import ListCategory from "@/components/base/list-category";
import { useGetApiV10Post } from "@/api/vcci-news/endpoints/post";
import { import {
buildDynamicPostHref, buildDynamicPostHref,
buildDynamicCategoryMenu, buildDynamicCategoryMenu,
buildVisibleNewsFilters,
useDynamicPostList,
resolveDynamicPostImage, resolveDynamicPostImage,
} from "./data"; mapPost,
import type { DynamicCategoryRouteItem } from "./types"; } from "../templates/data";
import type { DynamicCategoryRouteItem, DynamicPostItem } from "../templates/types";
type CatalogPageProps = { type AnPhamProps = {
category: DynamicCategoryRouteItem; category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[]; allCategories: DynamicCategoryRouteItem[];
}; };
export default function CatalogPage({ category, allCategories }: CatalogPageProps) { export default function AnPham({ category, allCategories }: AnPhamProps) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
...@@ -64,25 +64,39 @@ export default function CatalogPage({ category, allCategories }: CatalogPageProp ...@@ -64,25 +64,39 @@ export default function CatalogPage({ category, allCategories }: CatalogPageProp
} }
}, [page, pathname, router, searchParamsString]); }, [page, pathname, router, searchParamsString]);
const postsQuery = useDynamicPostList({ const filters = [
category?.id ? `category.id==${category.id}` : null,
keyword ? `title@=${keyword}` : null,
"is_hidden==false",
"is_active==true",
"type==news",
]
.map((item) => item?.trim())
.filter(Boolean)
.join(",");
const { data: postsData, isLoading: postsLoading } = useGetApiV10Post({
page, page,
pageSize, pageSize,
filters: buildVisibleNewsFilters([ sortField: "release_at",
`category.id==${category.id}`, sortOrder: "desc",
keyword ? `title@=${keyword}` : null, filters: filters || undefined,
]),
staleTime: 60 * 1000,
}); });
const totalPages = postsQuery.data?.totalPages ?? 1; const responseData = postsData?.responseData;
const count = Number(responseData?.count ?? 0);
const totalPages = pageSize > 0 ? Math.max(1, Math.ceil(count / pageSize)) : 1;
const currentPage = Math.min(page, totalPages); const currentPage = Math.min(page, totalPages);
const paginatedPosts = postsQuery.data?.rows ?? []; const paginatedPosts = ((responseData?.rows ?? []) as unknown as Parameters<typeof mapPost>[0][])
const categoryMenu = buildDynamicCategoryMenu(category, allCategories); .map(mapPost)
.filter((item: DynamicPostItem) => item.id && item.title);
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null} {categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
{postsQuery.isLoading ? ( {postsLoading ? (
<div className="flex h-64 w-full items-center justify-center"> <div className="flex h-64 w-full items-center justify-center">
<Spinner /> <Spinner />
</div> </div>
...@@ -90,7 +104,7 @@ export default function CatalogPage({ category, allCategories }: CatalogPageProp ...@@ -90,7 +104,7 @@ export default function CatalogPage({ category, allCategories }: CatalogPageProp
<div className="container mx-auto px-4 py-4 lg:pb-6 sm:px-6 lg:px-10"> <div className="container mx-auto px-4 py-4 lg:pb-6 sm:px-6 lg:px-10">
<div className="mb-8"> <div className="mb-8">
<h1 className="text-3xl font-bold leading-tight text-[#111827] md:text-4xl"> <h1 className="text-3xl font-bold leading-tight text-[#111827] md:text-4xl">
{category.name} {category?.name ?? "Ấn phẩm"}
</h1> </h1>
<div className="mt-2 h-[3px] w-16 rounded-full bg-[#f5a400]" /> <div className="mt-2 h-[3px] w-16 rounded-full bg-[#f5a400]" />
</div> </div>
...@@ -103,7 +117,7 @@ export default function CatalogPage({ category, allCategories }: CatalogPageProp ...@@ -103,7 +117,7 @@ export default function CatalogPage({ category, allCategories }: CatalogPageProp
return ( return (
<Link <Link
key={item.id} key={item.id}
href={buildDynamicPostHref(item.slug, item.id, category.id)} href={buildDynamicPostHref(item.slug, item.id, category?.id)}
className="group block" className="group block"
> >
<div className="overflow-hidden bg-white shadow-[0_10px_24px_rgba(17,24,39,0.08)]"> <div className="overflow-hidden bg-white shadow-[0_10px_24px_rgba(17,24,39,0.08)]">
......
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/CertificateTradeDocumentPage.tsx → src/app/(main)/[...slug]/static-pages/CertificateTradeDocument.tsx
View file @ 63303609
'use client'; "use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { import {
BadgeCheck, BadgeCheck,
Building2, Building2,
...@@ -8,7 +11,6 @@ import { ...@@ -8,7 +11,6 @@ import {
Globe2, Globe2,
ShieldCheck, ShieldCheck,
} from "lucide-react"; } from "lucide-react";
import type { LegalTradePageProps } from "./types";
const DEFINITIONS = [ const DEFINITIONS = [
{ {
...@@ -49,8 +51,18 @@ const DEFINITIONS = [ ...@@ -49,8 +51,18 @@ const DEFINITIONS = [
}, },
]; ];
export default function CertificateTradeDocumentPage(_: LegalTradePageProps) { type CertificateTradeDocumentProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function CertificateTradeDocument({ category, allCategories }: CertificateTradeDocumentProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return ( return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className=""> <section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start"> <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0"> <div className="min-w-0">
...@@ -128,5 +140,7 @@ export default function CertificateTradeDocumentPage(_: LegalTradePageProps) { ...@@ -128,5 +140,7 @@ export default function CertificateTradeDocumentPage(_: LegalTradePageProps) {
</aside> </aside>
</div> </div>
</section> </section>
</div>
</div>
); );
} }
src/app/(main)/[...slug]/static-pages/Contact.tsx 0 → 100644
View file @ 63303609
"use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { Mail, MapPin, Phone, UserRound } from "lucide-react";
type ContactProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function Contact({ category, allCategories }: ContactProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="py-2">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Thông tin liên hệ
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 space-y-5">
<article className="rounded-3xl border border-[#edf1f6] bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8">
<h2 className="text-[24px] font-bold leading-tight text-[#1f2a44]">
Phòng Pháp chế và xác nhận Chứng từ thương mại
</h2>
<div className="mt-5 space-y-4 text-[16px] leading-8 text-[#5f6f86]">
<p>Liên đoàn Thương mại và Công nghiệp Việt Nam – Chi nhánh khu vực Thành phố Hồ Chí Minh (VCCI-HCM)</p>
<div className="flex items-start gap-3">
<MapPin className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>Phòng 103, Lầu 1, Tòa nhà VCCI HCM, 171 Võ Thị Sáu, P. Xuân Hòa, TP. HCM</span>
</div>
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>028-3932 6498</span>
</div>
<div className="flex items-start gap-3">
<Mail className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>co@vcci-hcm.org.vn</span>
</div>
</div>
</article>
<article className="rounded-3xl border border-[#edf1f6] bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8">
<h2 className="text-[24px] font-bold leading-tight text-[#1f2a44]">
Xử lý vướng mắc, phản ánh, góp ý trong quá trình làm thủ tục cấp GCN và xác nhận CTTM
</h2>
<div className="mt-5 space-y-5 text-[16px] leading-8 text-[#5f6f86]">
<div>
<p className="font-semibold text-[#1f2a44]">Điểm cấp số 1</p>
<p>Điện thoại: 028-3932 6498</p>
<p>Email: co@vcci-hcm.org.vn</p>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Điểm cấp số 2</p>
<p>Phó Trưởng phòng: Nguyễn Văn Đức</p>
<p>Mobile: 090 949 7155</p>
<p>Email: nvduc1980@gmail.com</p>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Điểm cấp số 3</p>
<p>Trưởng phòng (Cơ sở 2): Bà Ma Thị Hương</p>
<p>Mobile: 039 512 2922</p>
<p>Email: huongmtvccivt@gmail.com</p>
</div>
</div>
</article>
<article className="rounded-3xl border border-[#edf1f6] bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8">
<h2 className="text-[24px] font-bold leading-tight text-[#1f2a44]">
Hướng dẫn hồ sơ và tiếp nhận phản ánh
</h2>
<div className="mt-5 space-y-5 text-[16px] leading-8 text-[#5f6f86]">
<div>
<p className="font-semibold text-[#1f2a44]">Hướng dẫn khai hồ sơ thương nhân, chữ ký số và IT</p>
<p>Điểm cấp số 1, điện thoại: 028-3932 6498</p>
<p>Điểm cấp số 2, điện thoại: 0274-380 0048</p>
<p>Điểm cấp số 3, điện thoại: 025-4385 2710</p>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Tiếp thu, giải quyết phản ánh, khiếu nại, góp ý</p>
<p>Trưởng phòng (Trụ sở chính): Ông Vũ Xuân Hưng</p>
<p>Điện thoại: 028-3932 6929 hoặc Mobile: 0909 170 171 (Đường dây nóng)</p>
<p>Email: vuxuanhung@vcci-hcm.org.vn</p>
</div>
</div>
</article>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Đầu mối hỗ trợ</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<Mail className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>co@vcci-hcm.org.vn</span>
</div>
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>Đường dây nóng: 0909 170 171</span>
</div>
<div className="flex items-start gap-3">
<UserRound className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>Ông Vũ Xuân Hưng</span>
</div>
</div>
</div>
</aside>
</div>
</section>
</div>
</div>
);
}
src/app/(main)/[...slug]/static-pages/Fees.tsx 0 → 100644
View file @ 63303609
"use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { CircleDollarSign, FileStack, Layers3 } from "lucide-react";
const FEE_ITEMS = [
{
title: "Một bộ GCN, CTTM (4 bản)",
value: "100.000đ/bộ",
icon: FileStack,
},
{
title: "Bản làm thêm tính từ bản thứ 5 trở lên",
value: "10.000đ/bản",
icon: Layers3,
},
{
title: "Phôi Giấy chứng nhận",
value: "20.000đ/tờ",
icon: CircleDollarSign,
},
] as const;
type FeesProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function Fees({ category, allCategories }: FeesProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Phí cấp GCN và xác nhận CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-3xl border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#2450b5]">Biểu phí hiện hành</p>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">
Mức phí áp dụng cho việc cấp Giấy chứng nhận và xác nhận Chứng từ thương mại được tính theo từng loại hồ sơ và số lượng bản phát hành.
</p>
</div>
<div className="mt-8 grid gap-4 md:grid-cols-3">
{FEE_ITEMS.map((item, index) => {
const Icon = item.icon;
return (
<article
key={item.title}
className={[
"rounded-[26px] border px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]",
index === 0 ? "border-[#dbe7ff] bg-[#f8fbff]" : "border-[#edf1f6] bg-white",
].join(" ")}
>
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<Icon className="h-5 w-5" />
</div>
<h2 className="mt-4 text-[20px] font-bold leading-tight text-[#1f2a44]">{item.title}</h2>
<p className="mt-4 text-[30px] font-bold leading-none text-[#2450b5]">{item.value}</p>
</article>
);
})}
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Tóm tắt chi phí</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>01 bộ tiêu chuẩn gồm 4 bản</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Có phụ phí cho bản làm thêm từ bản thứ 5</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Phôi Giấy chứng nhận được tính riêng theo từng tờ</span>
</div>
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Lưu ý khi chuẩn bị</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<p>Kiểm tra trước số lượng bản cần cấp để chuẩn bị đúng chi phí thực hiện.</p>
<p>Chuẩn bị lệ phí đầy đủ sẽ giúp quá trình tiếp nhận và xử lý hồ sơ diễn ra nhanh hơn.</p>
</div>
</div>
</aside>
</div>
</section>
</div>
</div>
);
}
src/app/(main)/[...slug]/static-pages/Forms.tsx 0 → 100644
View file @ 63303609
"use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { Download, FileText } from "lucide-react";
type FormsProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function Forms({ category, allCategories }: FormsProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="py-2">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Biểu mẫu GCN và nội dung khai báo GCN, CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-[26px] border border-[#edf1f6] bg-white px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]">
<div className="flex items-start gap-4">
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<FileText className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<h2 className="text-[22px] font-bold leading-tight text-[#1f2a44]">
bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm.docx
</h2>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">
Nhấn tải xuống để xem toàn bộ biểu mẫu và nội dung khai báo.
</p>
<a
href="/bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm.docx"
download
className="mt-5 inline-flex items-center gap-2 rounded-[4px] bg-[#2450b5] px-5 py-3 text-[15px] font-semibold text-white transition-colors hover:bg-[#173f9f]"
>
<Download className="h-4 w-4" />
Tải biểu mẫu
</a>
</div>
</div>
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Lưu ý</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Người dùng có thể tải về để xem biểu mẫu đầy đủ trên máy của mình.</span>
</div>
</div>
</div>
</aside>
</div>
</section>
</div>
</div>
);
}
src/app/(main)/[...slug]/static-pages/Locations.tsx 0 → 100644
View file @ 63303609
"use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { Building2, Clock3, MapPin, Phone } from "lucide-react";
const LOCATIONS = [
{
title: "Điểm cấp số 1",
address:
"Phòng 103, Lầu 1, Tòa nhà VCCI HCM, 171 Võ Thị Sáu, Phường Xuân Hòa, Thành phố Hồ Chí Minh",
phone: "028-3932 6498",
},
{
title: "Điểm cấp số 2",
address:
"Lầu 3, Tòa nhà Công ty CP ICD Tân Cảng Sóng Thần, Số 7/20, Đường ĐT 743, KP. Bình Đáng, Phường Bình Hòa, Thành phố Hồ Chí Minh",
phone: "0274-380 0048",
},
{
title: "Điểm cấp số 3",
address: "155 Nguyễn Thái Học, Phường Tam Thắng, Thành phố Hồ Chí Minh",
phone: "025-4385 2710",
},
] as const;
type LocationsProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function Locations({ category, allCategories }: LocationsProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Điểm cấp và cấp GCN và xác nhận CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-3xl border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Building2 className="h-5 w-5" />
<p className="text-sm font-semibold uppercase tracking-[0.18em]">
1. Các điểm cấp GCN và xác nhận CTTM thuộc VCCI-HCM
</p>
</div>
</div>
<div className="mt-8 grid gap-4">
{LOCATIONS.map((item, index) => (
<article
key={item.title}
className={[
"rounded-[26px] border px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]",
index === 0 ? "border-[#dbe7ff] bg-[#f8fbff]" : "border-[#edf1f6] bg-white",
].join(" ")}
>
<div className="flex items-start gap-4">
<span className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#eff4ff] text-lg font-bold text-[#2450b5]">
{index + 1}
</span>
<div className="min-w-0 flex-1">
<h2 className="text-[22px] font-bold leading-tight text-[#1f2a44]">{item.title}</h2>
<div className="mt-4 space-y-3 text-[16px] leading-8 text-[#5f6f86]">
<div className="flex items-start gap-3">
<MapPin className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>{item.address}</span>
</div>
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>{item.phone}</span>
</div>
</div>
</div>
</div>
</article>
))}
</div>
<div className="mt-8 rounded-3xl border border-[#dbe7ff] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Clock3 className="h-5 w-5" />
<p className="text-sm font-semibold uppercase tracking-[0.18em]">2. Giờ tiếp nhận hồ sơ</p>
</div>
<div className="mt-4 space-y-2 text-[16px] leading-8 text-[#5f6f86]">
<p>– Từ thứ Hai đến thứ Sáu</p>
<p>Buổi sáng: 7h30 – 11h30</p>
<p>Buổi chiều: 13h30 – 16h30</p>
<p>Thời gian cấp: không quá 08 giờ làm việc</p>
</div>
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Liên hệ nhanh</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
{LOCATIONS.map((item) => (
<div key={item.title} className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>
{item.title}: {item.phone}
</span>
</div>
))}
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Khung giờ làm việc</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<p>Từ thứ Hai đến thứ Sáu</p>
<p>Buổi sáng: 7h30 – 11h30</p>
<p>Buổi chiều: 13h30 – 16h30</p>
<p>Thời gian cấp: không quá 08 giờ làm việc</p>
</div>
</div>
</aside>
</div>
</section>
</div>
</div>
);
}
src/app/(main)/[...slug]/templates/information-pages/MarketProfilePage.tsx → src/app/(main)/[...slug]/static-pages/MarketProfile.tsx
View file @ 63303609
'use client'; "use client";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { FileText, Globe2, Newspaper, TrendingUp } from "lucide-react"; import { FileText, Globe2, Newspaper, TrendingUp } from "lucide-react";
import { SafeImage } from "@/components/shared/safe-image"; import { SafeImage } from "@/components/shared/safe-image";
import type { DynamicPostItem } from "../types"; import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
type MarketProfilePageProps = { import type { DynamicCategoryRouteItem, DynamicPostItem } from "../templates/types";
post: DynamicPostItem;
};
type RegionMarketItem = { type RegionMarketItem = {
name: string; name: string;
...@@ -210,7 +208,13 @@ const OVERVIEW_ITEMS = [ ...@@ -210,7 +208,13 @@ const OVERVIEW_ITEMS = [
}, },
] as const; ] as const;
export default function MarketProfilePage({ post }: MarketProfilePageProps) { type MarketProfileProps = {
post: DynamicPostItem | null;
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function MarketProfile({ post, category, allCategories }: MarketProfileProps) {
const [activeRegionKey, setActiveRegionKey] = useState("dong-nam-a"); const [activeRegionKey, setActiveRegionKey] = useState("dong-nam-a");
const activeRegion = useMemo( const activeRegion = useMemo(
...@@ -219,7 +223,12 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) { ...@@ -219,7 +223,12 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) {
[activeRegionKey], [activeRegionKey],
); );
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return ( return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="space-y-8"> <section className="space-y-8">
<div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_300px] xl:items-start"> <div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_300px] xl:items-start">
<div className="min-w-0"> <div className="min-w-0">
...@@ -230,7 +239,7 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) { ...@@ -230,7 +239,7 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) {
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" /> <div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<p className="mt-5 max-w-4xl text-base leading-8 text-[#5b6880] md:text-[17px]"> <p className="mt-5 max-w-4xl text-base leading-8 text-[#5b6880] md:text-[17px]">
{post.summary?.trim() || activeRegion.description} {post?.summary?.trim() || activeRegion.description}
</p> </p>
<div className="mt-7 overflow-hidden rounded-[30px] border border-[#dce7f7] bg-white shadow-[0_18px_42px_rgba(17,24,39,0.06)]"> <div className="mt-7 overflow-hidden rounded-[30px] border border-[#dce7f7] bg-white shadow-[0_18px_42px_rgba(17,24,39,0.06)]">
...@@ -312,5 +321,7 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) { ...@@ -312,5 +321,7 @@ export default function MarketProfilePage({ post }: MarketProfilePageProps) {
})} })}
</div> </div>
</section> </section>
</div>
</div>
); );
} }
src/app/(main)/[...slug]/templates/information-pages/MemberBenefitsPage.tsx → src/app/(main)/[...slug]/static-pages/MemberBenefits.tsx
View file @ 63303609
'use client'; "use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { import {
BadgeCheck, BadgeCheck,
Bell, Bell,
...@@ -82,8 +85,18 @@ const MEMBER_BENEFITS = [ ...@@ -82,8 +85,18 @@ const MEMBER_BENEFITS = [
}, },
] as const; ] as const;
export default function MemberBenefitsPage() { type MemberBenefitsProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function MemberBenefits({ category, allCategories }: MemberBenefitsProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return ( return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start"> <section className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div> <div>
<h1 className="text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]"> <h1 className="text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
...@@ -166,5 +179,7 @@ export default function MemberBenefitsPage() { ...@@ -166,5 +179,7 @@ export default function MemberBenefitsPage() {
</div> </div>
</aside> </aside>
</section> </section>
</div>
</div>
); );
} }
src/app/(main)/[...slug]/static-pages/MemberDirectory.tsx 0 → 100644
View file @ 63303609
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
type MemberDirectoryProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function MemberDirectory({ category, allCategories }: MemberDirectoryProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<>
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container flex justify-center items-center h-full py-20">
Danh bạ hội viên đang được xây dựng
</div>
</>
);
}
src/app/(main)/[...slug]/static-pages/MemberRegistration.tsx 0 → 100644
View file @ 63303609
"use client";
import links from "@/links";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem, DynamicPostItem } from "../templates/types";
const MEMBERSHIP_REQUIREMENTS = [
"Đơn xin gia nhập làm hội viên chính thức VCCI (2 bản theo mẫu của VCCI)",
"Giấy phép đăng ký kinh doanh, hoặc giấy phép thành lập hoặc quyết định thành lập (2 bản sao)",
];
const MEMBERSHIP_FEES = [
"Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm",
"Doanh số từ 10 - 50 tỉ đồng đóng 7 triệu đồng/năm",
"Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm",
];
const ATTACHED_FORMS = [
{
label: "Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp)",
href: "/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx",
download: true,
},
{
label: "Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội)",
href: "/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx",
download: true,
},
{
label: "Hướng dẫn hồ sơ đăng ký Hội viên VCCI",
href: `${links.externalApiOrigin}/dang-ky`,
download: false,
},
] as const;
const DEFAULT_INTRO =
"Điều lệ sửa đổi của Liên đoàn Thương mại và Công nghiệp Việt Nam (VCCI) được Đại hội đại biểu toàn quốc VCCI lần thứ VII thông qua và được Thủ tướng Chính phủ phê duyệt tại Quyết định số 1496/QĐ-TTg ngày 30/11/2022 đã quy định tất cả các doanh nghiệp, các tổ chức sản xuất, kinh doanh, người sử dụng lao động, các hiệp hội doanh nghiệp có đăng ký và hoạt động hợp pháp ở Việt Nam đều có thể trở thành hội viên của VCCI.";
type MemberRegistrationProps = {
post: DynamicPostItem | null;
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function MemberRegistration({ post, category, allCategories }: MemberRegistrationProps) {
const introText = post?.content?.trim() || DEFAULT_INTRO;
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Đăng ký hội viên
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 space-y-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
{introText}
</p>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Để trở thành hội viên chính thức, tổ chức quan tâm cần gửi VCCI tại Hà Nội hoặc các Chi nhánh, Văn phòng đại diện của VCCI hồ sơ gia nhập gồm:
</p>
<ul className="space-y-2 pl-6 text-[18px] leading-9 text-[#1f2a44]">
{MEMBERSHIP_REQUIREMENTS.map((item) => (
<li key={item} className="list-disc">
<strong>{item}</strong>
</li>
))}
</ul>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Khi nhận được đơn, Ban Thường trực sẽ xét và thông báo cho tổ chức liên quan về quyết định kết nạp. Trong vòng 1 tháng kể từ ngày nhận thông báo, tổ chức phải thực hiện đóng lệ phí gia nhập. Chỉ khi nào tổ chức đóng lệ phí gia nhập mới được coi là hội viên chính thức. Theo quyết định của Ban chấp hành VCCI, lệ phí hiện hành được tính như sau:
</p>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Mức lệ phí gia nhập bằng mức hội phí hàng năm, được tính căn cứ vào doanh số của tổ chức trong năm trước theo các mức:
</p>
<ul className="space-y-2 pl-6 text-[18px] leading-9 text-[#1f2a44]">
{MEMBERSHIP_FEES.map((item) => (
<li key={item} className="list-disc">
{item}
</li>
))}
</ul>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Mức lệ phí gia nhập và hội phí trên có thể được điều chỉnh bởi quyết định của Ban chấp hành VCCI trong từng thời gian cụ thể.
</p>
<div>
<p className="font-semibold text-[#2450b5]">Để biết thêm thông tin chi tiết, vui lòng liên hệ:</p>
<div className="mt-4 space-y-1 text-[18px] leading-9 text-[#1f2a44]">
<p className="font-semibold">Phòng Hội viên Đào tạo và Truyền thông:</p>
<p>C. Thúy – ĐD: 0903 909 756</p>
<p>Email: luuthanhthuy72@yahoo.com; hoivien@vcci-hcm.org.vn</p>
<p>Điện thoại: 028. 3932 0611 – Fax: 028. 3932 5472</p>
<p>Địa chỉ: P. 306, Lầu 3, Tòa nhà VCCI, 171 Võ Thị Sáu, Phường Xuân Hoà, TP. Hồ Chí Minh</p>
</div>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Biểu mẫu đính kèm:</p>
<ul className="mt-3 space-y-2 pl-6 text-[#2450b5]">
{ATTACHED_FORMS.map((item) => (
<li key={item.label} className="list-disc italic">
{item.download ? (
<a href={item.href} download className="hover:text-[#173f9f]">
{item.label}
</a>
) : (
<a href={item.href} target="_blank" rel="noreferrer" className="hover:text-[#173f9f]">
{item.label}
</a>
)}
</li>
))}
</ul>
</div>
<div className="flex justify-center pt-4">
<a
href={`https://vccihcm.vn/dang-ky`}
target="_blank"
rel="noreferrer"
className="inline-flex min-w-[220px] items-center justify-center rounded-[4px] bg-[#2450b5] px-6 py-4 text-[18px] font-semibold text-white transition-colors hover:bg-[#173f9f]"
>
Đăng ký Hội viên
</a>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
src/app/(main)/[...slug]/static-pages/PhapChe.tsx 0 → 100644
View file @ 63303609
"use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { BriefcaseBusiness, FileText, GraduationCap, Mail, Phone, Scale } from "lucide-react";
const PHAP_CHE_SERVICES = [
{
title: "Góp ý và hỗ trợ pháp lý",
description:
"Tập hợp ý kiến góp ý xây dựng pháp luật, tiếp nhận các khó khăn, vướng mắc trong hoạt động kinh doanh của doanh nghiệp.",
icon: Scale,
},
{
title: "Tư vấn chuyên sâu",
description:
"Tư vấn, kết nối và cung cấp dịch vụ pháp lý kinh doanh chuyên sâu (Luật sư/ Trọng tài viên).",
icon: FileText,
},
{
title: "Dịch vụ thương mại",
description:
"Dịch vụ xuất khẩu, nhập khẩu; Chứng nhận lãnh sự; Phân loại HS; C/O; Lộ trình thuế quan trong các FTA; …",
icon: BriefcaseBusiness,
},
{
title: "Đào tạo chuyên sâu",
description:
"Tổ chức tập huấn đào tạo chuyên sâu trong các lĩnh vực Thuế; Hải quan; Tài chính kế toán; Phân loại mã số hàng hóa (Mã HS); Xuất xứ hàng hóa; Những vấn đề pháp lý của hợp đồng mua bán hàng hóa trong nước và quốc tế; …",
icon: GraduationCap,
},
];
type PhapCheProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function PhapChe({ category, allCategories }: PhapCheProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Pháp chế
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="grid gap-4 md:grid-cols-2">
<div className="rounded-[24px] border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Phone className="h-5 w-5" />
<span className="text-sm font-semibold uppercase tracking-[0.18em]">Điện thoại</span>
</div>
<p className="mt-3 text-[28px] font-bold text-[#1f2a44]">028-3932 6498</p>
</div>
<div className="rounded-[24px] border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Mail className="h-5 w-5" />
<span className="text-sm font-semibold uppercase tracking-[0.18em]">Email</span>
</div>
<p className="mt-3 break-words text-[22px] font-bold text-[#1f2a44]">co@vcci-hcm.org.vn</p>
</div>
</div>
<div className="mt-8 grid gap-4 xl:grid-cols-2">
{PHAP_CHE_SERVICES.map((item) => {
const Icon = item.icon;
return (
<article
key={item.title}
className="rounded-[26px] border border-[#edf1f6] bg-white px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]"
>
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<Icon className="h-5 w-5" />
</div>
<h2 className="mt-4 text-[22px] font-bold leading-tight text-[#1f2a44]">{item.title}</h2>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">{item.description}</p>
</article>
);
})}
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Phạm vi hỗ trợ</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Góp ý xây dựng pháp luật và tiếp nhận vướng mắc doanh nghiệp</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Tư vấn và kết nối chuyên gia pháp lý kinh doanh</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Đào tạo chuyên sâu về thuế, hải quan, xuất xứ và hợp đồng</span>
</div>
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Liên hệ Pháp chế</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>028-3932 6498</span>
</div>
<div className="flex items-start gap-3">
<Mail className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>co@vcci-hcm.org.vn</span>
</div>
</div>
</div>
</aside>
</div>
</section>
</div>
</div>
);
}
src/app/(main)/[...slug]/static-pages/Procedure.tsx 0 → 100644
View file @ 63303609
"use client";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { Clock3, FileCheck2, FileUp, Landmark, ReceiptText, RotateCcw } from "lucide-react";
const REQUIREMENTS = [
"Đăng ký tài khoản Thương nhân và khai báo các trường thông tin của Thương nhân trên Hệ thống COVCCI.",
"Liên hệ với Đơn vị cấp Giấy chứng nhận, xác nhận Chứng từ thương mại của VCCI kích hoạt tài khoản cho Thương nhân.",
];
const STEPS = [
{
title: "Bước 1. Khai báo trực tuyến",
description:
"Thương nhân truy cập Hệ thống COVCCI, thực hiện khai báo các thông tin theo hướng dẫn, đính kèm hồ sơ dưới dạng điện tử đã được Thương nhân xác nhận bằng chữ ký số do cơ quan có thẩm quyền cấp và nhận số tham chiếu cho bộ hồ sơ.",
icon: FileUp,
},
{
title: "Bước 2. Thanh toán giá dịch vụ và hồ sơ giấy",
description:
"Thương nhân thanh toán giá dịch vụ và bộ hồ sơ giấy đầy đủ theo quy định tại bộ phận tiếp nhận của đơn vị VCCI có thẩm quyền.",
icon: ReceiptText,
},
{
title: "Bước 3. Phân công và thẩm định",
description:
"Bộ phận tiếp nhận hồ sơ kiểm tra tính đầy đủ, hợp lệ ban đầu và phân công cho cán bộ nghiệp vụ xử lý.",
icon: FileCheck2,
},
{
title: "Bước 4. Phê duyệt và cấp",
description:
"Nếu hồ sơ hợp lệ và đầy đủ, cán bộ nghiệp vụ trình hồ sơ lên người có thẩm quyền ký duyệt. Sau khi được ký duyệt, chứng từ sẽ được đóng dấu, tách, lưu trữ (hoặc vào hộp) và trả kết quả cho Thương nhân.",
icon: Landmark,
},
{
title: "Bước 5. Trả hồ sơ hoặc yêu cầu bổ sung",
description:
"Nếu hồ sơ có sai sót, không hợp lệ hoặc vi phạm các quy định, cán bộ nghiệp vụ thông báo rõ lý do cho Thương nhân (thông qua hệ thống hoặc trực tiếp) để yêu cầu sửa đổi, bổ sung hoặc từ chối cấp.",
icon: RotateCcw,
},
];
type ProcedureProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function Procedure({ category, allCategories }: ProcedureProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Quy trình tiếp nhận hồ sơ cấp GCN và xác nhận CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-[24px] border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#2450b5]">
1. Yêu cầu đối với Thương nhân
</p>
<div className="mt-4 space-y-3 text-[16px] leading-8 text-[#5f6f86]">
{REQUIREMENTS.map((item) => (
<div key={item} className="flex items-start gap-3">
<span className="mt-3 h-2 w-2 shrink-0 rounded-full bg-[#f5a400]" />
<span>{item}</span>
</div>
))}
</div>
</div>
<div className="mt-8">
<div className="flex items-center gap-3">
<div className="h-11 w-11 rounded-2xl bg-[#eff4ff] text-[#2450b5] flex items-center justify-center">
<FileCheck2 className="h-5 w-5" />
</div>
<div>
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#2450b5]">
2. Quy trình thực hiện
</p>
<h2 className="mt-1 text-[24px] font-bold leading-tight text-[#1f2a44]">
Các bước xử lý thống nhất
</h2>
</div>
</div>
<div className="mt-6 space-y-4">
{STEPS.map((step, index) => {
const Icon = step.icon;
return (
<article
key={step.title}
className="rounded-[24px] border border-[#edf1f6] bg-white px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]"
>
<div className="flex items-start gap-4">
<div className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<Icon className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-3">
<span className="inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-[#2450b5] px-2 text-sm font-bold text-white">
{index + 1}
</span>
<h3 className="text-[20px] font-bold leading-tight text-[#1f2a44]">{step.title}</h3>
</div>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">{step.description}</p>
</div>
</div>
</article>
);
})}
</div>
</div>
<div className="mt-8 rounded-[24px] border border-[#dbe7ff] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Clock3 className="h-5 w-5" />
<p className="text-sm font-semibold uppercase tracking-[0.18em]">3. Thời gian xử lý</p>
</div>
<p className="mt-4 text-[16px] leading-8 text-[#5f6f86]">
Trường hợp hồ sơ chưa hợp lệ, VCCI sẽ thông báo qua Hệ thống COVCCI các nội dung cần sửa đổi, bổ sung cho Thương nhân trong thời hạn 03 ngày làm việc kể từ ngày tiếp nhận hồ sơ. Thời gian xử lý cho một bộ hồ sơ hợp lệ là không quá 08 giờ làm việc kể từ thời điểm VCCI nhận đủ hồ sơ hợp lệ. Đối với trường hợp cần thẩm tra, xác minh hay trao đổi nội bộ và từ cơ quan chức năng trong và ngoài nước khác, thời gian giải quyết có thể kéo dài hơn so với quy định chung.
</p>
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Mốc thời gian</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Thông báo bổ sung: trong 03 ngày làm việc</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Xử lý hồ sơ hợp lệ: không quá 08 giờ làm việc</span>
</div>
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Kênh xử lý</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<p>Hệ thống COVCCI dùng để khai báo, tiếp nhận và theo dõi hồ sơ trực tuyến.</p>
<p>Thương nhân cần chuẩn bị đầy đủ hồ sơ điện tử, chữ ký số và hồ sơ giấy theo quy định.</p>
</div>
</div>
</aside>
</div>
</section>
</div>
</div>
);
}
src/app/(main)/search/page.tsx → src/app/(main)/[...slug]/static-pages/Search.tsx
View file @ 63303609
...@@ -9,14 +9,17 @@ import { Pagination } from "@components/base/pagination"; ...@@ -9,14 +9,17 @@ import { Pagination } from "@components/base/pagination";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Spinner } from "@components/ui/spinner"; import { Spinner } from "@components/ui/spinner";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { useGetApiV10Post } from "@/api/vcci-news/endpoints/post";
import { import {
buildDynamicPostHref, buildDynamicPostHref,
buildVisibleNewsFilters,
useDynamicPostList,
getDynamicPostExcerpt, getDynamicPostExcerpt,
resolveDynamicPostImage, resolveDynamicPostImage,
} from "@/app/(main)/[...slug]/templates/data"; mapPost,
import type { DynamicPostItem } from "@/app/(main)/[...slug]/templates/types"; } from "../templates/data";
import type { DynamicPostItem } from "../templates/types";
const formatPostDate = (value?: string | null) => { const formatPostDate = (value?: string | null) => {
if (!value) return ""; if (!value) return "";
...@@ -95,15 +98,32 @@ function SearchContent() { ...@@ -95,15 +98,32 @@ function SearchContent() {
const [searchInput, setSearchInput] = useState(query); const [searchInput, setSearchInput] = useState(query);
const pageSize = 10; const pageSize = 10;
const postsQuery = useDynamicPostList({ const filters = [
query ? `title@=${query}` : null,
"is_hidden==false",
"is_active==true",
"type==news",
]
.map((item) => item?.trim())
.filter(Boolean)
.join(",");
const { data: postsData, isLoading: postsLoading } = useGetApiV10Post({
page, page,
pageSize, pageSize,
filters: buildVisibleNewsFilters([ sortField: "release_at",
query ? `title@=${query}` : null, sortOrder: "desc",
]), filters: filters || undefined,
staleTime: 60 * 1000,
}); });
const responseData = postsData?.responseData;
const count = Number(responseData?.count ?? 0);
const totalPages = pageSize > 0 ? Math.max(1, Math.ceil(count / pageSize)) : 1;
const currentPage = Math.min(page, totalPages);
const rows = ((responseData?.rows ?? []) as unknown as Parameters<typeof mapPost>[0][])
.map(mapPost)
.filter((item: DynamicPostItem) => item.id && item.title);
useEffect(() => { useEffect(() => {
const nextPage = pageFromUrl ? Number(pageFromUrl) : 1; const nextPage = pageFromUrl ? Number(pageFromUrl) : 1;
if (Number.isFinite(nextPage)) { if (Number.isFinite(nextPage)) {
...@@ -124,10 +144,6 @@ function SearchContent() { ...@@ -124,10 +144,6 @@ function SearchContent() {
router.push(`/search?${params.toString()}`, { scroll: false }); router.push(`/search?${params.toString()}`, { scroll: false });
}; };
const rows = postsQuery.data?.rows ?? [];
const totalPages = Number(postsQuery.data?.totalPages ?? 1);
const currentPage = Number(postsQuery.data?.page ?? page);
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8 sm:px-6 lg:px-10 lg:py-10"> <div className="container mx-auto px-4 py-8 sm:px-6 lg:px-10 lg:py-10">
...@@ -145,7 +161,7 @@ function SearchContent() { ...@@ -145,7 +161,7 @@ function SearchContent() {
<div className="flex flex-col gap-10 xl:flex-row xl:gap-14"> <div className="flex flex-col gap-10 xl:flex-row xl:gap-14">
<main className="order-2 min-w-0 xl:order-1 xl:flex-1"> <main className="order-2 min-w-0 xl:order-1 xl:flex-1">
{postsQuery.isLoading ? ( {postsLoading ? (
<div className="flex items-center justify-center py-16"> <div className="flex items-center justify-center py-16">
<Spinner className="size-8" /> <Spinner className="size-8" />
<span className="ml-2 text-gray-600">Đang tìm kiếm...</span> <span className="ml-2 text-gray-600">Đang tìm kiếm...</span>
...@@ -232,8 +248,17 @@ function SearchContent() { ...@@ -232,8 +248,17 @@ function SearchContent() {
); );
} }
export default function Page() { type SearchProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function Search({ category, allCategories }: SearchProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return ( return (
<>
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<Suspense <Suspense
fallback={ fallback={
<div className="flex min-h-screen items-center justify-center bg-white"> <div className="flex min-h-screen items-center justify-center bg-white">
...@@ -243,5 +268,6 @@ export default function Page() { ...@@ -243,5 +268,6 @@ export default function Page() {
> >
<SearchContent /> <SearchContent />
</Suspense> </Suspense>
</>
); );
} }
src/app/(main)/[...slug]/templates/information-pages/ServicePage.tsx → src/app/(main)/[...slug]/static-pages/Service.tsx
View file @ 63303609
'use client'; "use client";
import { import {
BriefcaseBusiness, BriefcaseBusiness,
...@@ -12,7 +12,11 @@ import { ...@@ -12,7 +12,11 @@ import {
Store, Store,
Ticket, Ticket,
} from "lucide-react"; } from "lucide-react";
import type { DynamicPostItem } from "../types"; import ListCategory from "@/components/base/list-category";
import {
buildDynamicCategoryMenu,
} from "../templates/data";
import type { DynamicCategoryRouteItem, DynamicPostItem } from "../templates/types";
const SERVICE_SUPPORT_ITEMS = [ const SERVICE_SUPPORT_ITEMS = [
{ {
...@@ -67,16 +71,23 @@ const SERVICE_SUPPORT_ITEMS = [ ...@@ -67,16 +71,23 @@ const SERVICE_SUPPORT_ITEMS = [
}, },
] as const; ] as const;
type ServicePageProps = { type ServiceProps = {
post: DynamicPostItem; post: DynamicPostItem | null;
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
}; };
export default function ServicePage({ post }: ServicePageProps) { export default function Service({ post, category, allCategories }: ServiceProps) {
const introText = const introText =
post.summary?.trim() || post?.summary?.trim() ||
"VCCI-HCM cung cấp đa dạng các dịch vụ hỗ trợ doanh nghiệp phát triển và hội nhập kinh tế quốc tế."; "VCCI-HCM cung cấp đa dạng các dịch vụ hỗ trợ doanh nghiệp phát triển và hội nhập kinh tế quốc tế.";
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return ( return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<section className="grid gap-8 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] lg:items-start"> <section className="grid gap-8 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] lg:items-start">
<div className=""> <div className="">
<h1 className="text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]"> <h1 className="text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
...@@ -130,5 +141,7 @@ export default function ServicePage({ post }: ServicePageProps) { ...@@ -130,5 +141,7 @@ export default function ServicePage({ post }: ServicePageProps) {
</div> </div>
</div> </div>
</section> </section>
</div>
</div>
); );
} }
src/app/(main)/[...slug]/static-pages/SiteMap.tsx 0 → 100644
View file @ 63303609
"use client";
import React from "react";
import Link from "next/link";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { useGetApiV10PageConfig } from "@/api/vcci-news/endpoints/page-config";
import { GetNewsPageConfigResponseType } from "@/api/vcci-news/types/news-page-config";
type SiteMapProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function SiteMap({ category, allCategories }: SiteMapProps) {
const { data: categoriesData, isLoading, isError } = useGetApiV10PageConfig<GetNewsPageConfigResponseType>();
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
if (isLoading) {
return (
<>
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
<div className="text-[#063e8e] text-xl font-semibold">Đang tải...</div>
</div>
</>
);
}
if (isError || !categoriesData?.responseData) {
return (
<>
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
<div className="text-red-600 text-xl font-semibold">Không thể tải dữ liệu</div>
</div>
</>
);
}
const sections = categoriesData.responseData.children || [];
return (
<>
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="min-h-screen bg-gray-50 py-12">
<div className="container mx-auto px-4">
<h1 className="text-3xl font-bold text-center mb-12 text-[#063e8e]">
SƠ ĐỒ TRANG WEB
</h1>
{/* Sitemap Structure */}
<div className="relative flex flex-col items-center">
{/* Homepage - Top Level */}
<div className="relative mb-20">
<Link
href="/"
className="block bg-[#063e8e] text-white px-8 py-4 rounded-lg font-semibold text-center hover:bg-[#0a4fb5] transition shadow-lg min-w-[200px]"
>
TRANG CHỦ
</Link>
{/* Vertical line from homepage down */}
<div className="absolute left-[99px] -translate-x-1/2 top-full h-20 w-0.5 bg-gray-600"></div>
</div>
{/* Main Sections - Second Level */}
<div className="relative w-full max-w-[1400px]">
{/* Horizontal line connecting all sections */}
<div className="absolute top-0 left-[6.3%] right-[6.3%] h-0.5 bg-gray-600 z-0"></div>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-6 relative pt-4">
{sections.map((section, idx) => (
<div key={section.id} className="relative flex flex-col items-center">
{/* Vertical line from horizontal bar down to section */}
<div className="absolute -top-4 left-1/2 -translate-x-1/2 h-4 w-0.5 bg-gray-600 z-10"></div>
{/* Section Box */}
<div className="relative z-20">
<Link
href={section.static_link || "#"}
className="flex bg-[#063e8e] text-white px-4 py-3 rounded-md font-medium text-center hover:bg-[#0a4fb5] transition shadow-md w-full text-sm min-h-20 items-center justify-center"
>
<span className="leading-tight">{section.name.toUpperCase()}</span>
</Link>
{/* Vertical line from section down to children */}
{section.children && section.children.length > 0 && (
<div className="absolute left-1/2 -translate-x-1/2 top-full h-6 w-0.5 bg-gray-600 z-10"></div>
)}
</div>
{/* Children - Third Level */}
{section.children && section.children.length > 0 && (
<div className="mt-6 flex flex-col gap-3 w-full relative">
{/* Vertical spine connecting all children */}
<div
className="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gray-600"
style={{
top: '-24px',
bottom: '0',
}}
></div>
{section.children.map((child, childIdx) => (
<div key={child.id} className="relative">
{/* Horizontal line from spine to child box */}
<div className="absolute right-1/2 top-1/2 -translate-y-1/2 w-1/2 h-0.5 bg-gray-600"></div>
<Link
href={child.static_link || "#"}
className="block bg-gray-400 text-white px-3 py-2.5 rounded text-xs font-medium text-center hover:bg-gray-500 transition shadow-sm leading-tight relative z-10"
>
{child.name.toUpperCase()}
</Link>
</div>
))}
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
<style jsx>{`
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
`}</style>
</div>
</>
);
}
src/app/(main)/[...slug]/static-pages/ThuVienTaiLieu.tsx 0 → 100644
View file @ 63303609
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Spinner } from "@/components/ui";
import { Pagination } from "@/components/base/pagination";
import { SafeImage } from "@/components/shared/safe-image";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import EventsCalendar from "@/app/(main)/(home)/components/events-calendar";
import SidebarAdvertisements from "@/components/shared/sidebar-advertisements";
import ListCategory from "@/components/base/list-category";
import { useGetApiV10Post } from "@/api/vcci-news/endpoints/post";
import {
buildDynamicPostHref,
buildDynamicCategoryMenu,
resolveDynamicPostImage,
mapPost,
} from "../templates/data";
import type { DynamicCategoryRouteItem, DynamicPostItem } from "../templates/types";
type ThuVienTaiLieuProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function ThuVienTaiLieu({ category, allCategories }: ThuVienTaiLieuProps) {
const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();
const searchParamsString = searchParams.toString();
const initialPage = Number(searchParams.get("page") ?? "1");
const [searchInput, setSearchInput] = useState("");
const [submitSearch, setSubmitSearch] = useState("");
const [page, setPage] = useState(initialPage);
const pageSize = 8;
const keyword = submitSearch.trim();
// Auto-search with debounce
useEffect(() => {
const timer = setTimeout(() => {
setSubmitSearch(searchInput);
setPage(1);
}, 500);
return () => clearTimeout(timer);
}, [searchInput]);
useEffect(() => {
const params = new URLSearchParams(searchParamsString);
if (page > 1) {
params.set("page", String(page));
} else {
params.delete("page");
}
const qs = params.toString();
const nextUrl = qs ? `${pathname}?${qs}` : pathname;
const currentUrl = searchParamsString ? `${pathname}?${searchParamsString}` : pathname;
if (nextUrl !== currentUrl) {
router.replace(nextUrl, { scroll: false });
}
}, [page, pathname, router, searchParamsString]);
const filters = [
category?.id ? `category.id==${category.id}` : null,
keyword ? `title@=${keyword}` : null,
"is_hidden==false",
"is_active==true",
"type==news",
]
.map((item) => item?.trim())
.filter(Boolean)
.join(",");
const { data: postsData, isLoading: postsLoading } = useGetApiV10Post({
page,
pageSize,
sortField: "release_at",
sortOrder: "desc",
filters: filters || undefined,
});
const responseData = postsData?.responseData;
const count = Number(responseData?.count ?? 0);
const totalPages = pageSize > 0 ? Math.max(1, Math.ceil(count / pageSize)) : 1;
const currentPage = Math.min(page, totalPages);
const paginatedPosts = ((responseData?.rows ?? []) as unknown as Parameters<typeof mapPost>[0][])
.map(mapPost)
.filter((item: DynamicPostItem) => item.id && item.title);
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return (
<div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
{postsLoading ? (
<div className="flex h-64 w-full items-center justify-center">
<Spinner />
</div>
) : (
<div className="container mx-auto px-4 py-4 lg:pb-6 sm:px-6 lg:px-10">
<div className="mb-8">
<h1 className="text-3xl font-bold leading-tight text-[#111827] md:text-4xl">
{category?.name ?? "Thư viện tài liệu"}
</h1>
<div className="mt-2 h-[3px] w-16 rounded-full bg-[#f5a400]" />
</div>
<div className="flex flex-col gap-10 xl:flex-row xl:gap-14">
<main className="order-2 min-w-0 xl:order-1 xl:flex-1">
{paginatedPosts.length ? (
<div className="grid grid-cols-2 gap-5 sm:grid-cols-3 xl:grid-cols-4 xl:gap-6">
{paginatedPosts.map((item) => {
return (
<Link
key={item.id}
href={buildDynamicPostHref(item.slug, item.id, category?.id)}
className="group block"
>
<div className="overflow-hidden bg-white shadow-[0_10px_24px_rgba(17,24,39,0.08)]">
<div className="relative aspect-3/4 overflow-hidden bg-white">
<SafeImage
src={resolveDynamicPostImage(item.thumbnail)}
alt={item.title}
width={520}
height={693}
className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
/>
</div>
</div>
<div className="px-1 pt-3 text-center">
<h2 className="line-clamp-2 text-[14px] leading-[1.45] text-[#1f2f57]">
{item.title}
</h2>
</div>
</Link>
);
})}
</div>
) : (
<div className="rounded-2xl border border-[#edf1f5] bg-white px-6 py-12 text-center text-gray-600">
Chưa có tài liệu trong danh mục.
</div>
)}
<div className="flex w-full justify-center pt-8">
<Pagination
pageCount={totalPages}
page={currentPage}
onChangePage={setPage}
onGoToPreviousPage={() => setPage(Math.max(1, currentPage - 1))}
onGoToNextPage={() => setPage(Math.min(totalPages, currentPage + 1))}
/>
</div>
</main>
<aside className="contents xl:order-2 xl:block xl:w-[320px] xl:space-y-5 xl:pt-0">
<form
className="order-1 rounded-[22px] border border-[#edf1f5] bg-white p-5 shadow-[0_14px_34px_rgba(17,24,39,0.05)] xl:order-0"
onSubmit={(event) => {
event.preventDefault();
setPage(1);
setSubmitSearch(searchInput);
}}
>
<h2 className="text-lg font-bold text-[#111827]">Tìm kiếm</h2>
<Input
value={searchInput}
onChange={(event) => setSearchInput(event.target.value)}
placeholder="Tên bài viết ..."
className="mt-4 h-11 rounded-xl border-[#edf1f5] bg-[#f8fafc] text-sm placeholder:text-gray-700"
/>
<div className="mt-4 grid grid-cols-2 gap-3">
<Button
type="submit"
className="h-11 rounded-xl bg-[#14519f] text-white hover:bg-[#0f4386]"
>
Tìm kiếm
</Button>
<Button
type="button"
variant="outline"
className="h-11 rounded-xl border-[#edf1f5] bg-white text-[#4b5563]"
onClick={() => {
setSearchInput("");
setPage(1);
setSubmitSearch("");
}}
>
Bỏ tìm
</Button>
</div>
</form>
<EventsCalendar compact className="xl:w-full xl:min-w-0" />
<SidebarAdvertisements count={5} startIndex={0} />
</aside>
</div>
</div>
)}
</div>
);
}
src/app/(main)/video/page.tsx → src/app/(main)/[...slug]/static-pages/Video.tsx
View file @ 63303609
...@@ -6,57 +6,38 @@ import { Play } from "lucide-react"; ...@@ -6,57 +6,38 @@ import { Play } from "lucide-react";
import { SafeImage } from "@/components/shared/safe-image"; import { SafeImage } from "@/components/shared/safe-image";
import { Pagination } from "@/components/base/pagination"; import { Pagination } from "@/components/base/pagination";
import { Spinner } from "@/components/ui/spinner"; import { Spinner } from "@/components/ui/spinner";
import ListCategory from "@/components/base/list-category";
import { buildDynamicCategoryMenu } from "../templates/data";
import type { DynamicCategoryRouteItem } from "../templates/types";
import { useGetApiV10Video } from "@/api/vcci-news/endpoints/video"; import { useGetApiV10Video } from "@/api/vcci-news/endpoints/video";
import type { Video } from "@/api/vcci-news/models/video"; import type { Video } from "@/api/vcci-news/models/video";
import { getVideoThumbnail, normalizeVideoUrl } from "@/lib/utils/video"; import { getVideoThumbnail, normalizeVideoUrl } from "@/lib/utils/video";
const PAGE_SIZE = 10;
type ClientVideoItem = Video & {
thumbnail: string;
watchUrl: string;
};
function VideoPageContent() { function VideoPageContent() {
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const pageFromUrl = Number(searchParams.get("page") ?? "1"); const pageFromUrl = Number(searchParams.get("page") ?? "1");
const page = Number.isFinite(pageFromUrl) && pageFromUrl > 0 ? Math.floor(pageFromUrl) : 1; const page = Number.isFinite(pageFromUrl) && pageFromUrl > 0 ? Math.floor(pageFromUrl) : 1;
const PAGE_SIZE = 10;
const videosQuery = useGetApiV10Video( const { data: videosData, isLoading: videosLoading, isError: videosError } = useGetApiV10Video({
{
page, page,
pageSize: PAGE_SIZE, pageSize: PAGE_SIZE,
sortField: "created_at", sortField: "created_at",
sortOrder: "desc", sortOrder: "desc",
}, });
{
query: { const pageData = videosData?.responseData;
staleTime: 60 * 1000, const count = pageData?.count ?? 0;
select: (response) => { const videoPageSize = pageData?.pageSize ?? PAGE_SIZE;
const pageData = response?.responseData ?? {}; const videos = ((pageData?.rows ?? []) as unknown as Video[]).map((item) => ({
const pageSize = pageData.pageSize ?? PAGE_SIZE;
const count = pageData.count ?? 0;
return {
rows: ((pageData.rows ?? []) as unknown as Video[]).map((item) => ({
...item, ...item,
thumbnail: getVideoThumbnail(item.url ?? ""), thumbnail: getVideoThumbnail(item.url ?? ""),
watchUrl: normalizeVideoUrl(item.url ?? ""), watchUrl: normalizeVideoUrl(item.url ?? ""),
})), }));
count, const totalPages = Math.max(1, Math.ceil(count / videoPageSize));
page: pageData.page ?? page, const currentPage = pageData?.page ?? page;
pageSize,
totalPages: Math.max(1, Math.ceil(count / pageSize)),
};
},
},
},
);
const videos = videosQuery.data?.rows ?? [];
const totalPages = videosQuery.data?.totalPages ?? 1;
const currentPage = videosQuery.data?.page ?? page;
const updatePage = (nextPage: number) => { const updatePage = (nextPage: number) => {
const params = new URLSearchParams(searchParams.toString()); const params = new URLSearchParams(searchParams.toString());
...@@ -81,7 +62,7 @@ function VideoPageContent() { ...@@ -81,7 +62,7 @@ function VideoPageContent() {
<div className="mt-2 h-[3px] w-16 rounded-full bg-[#f5a400]" /> <div className="mt-2 h-[3px] w-16 rounded-full bg-[#f5a400]" />
</div> </div>
{videosQuery.isLoading ? ( {videosLoading ? (
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
{Array.from({ length: 4 }).map((_, index) => ( {Array.from({ length: 4 }).map((_, index) => (
<div <div
...@@ -90,7 +71,7 @@ function VideoPageContent() { ...@@ -90,7 +71,7 @@ function VideoPageContent() {
/> />
))} ))}
</div> </div>
) : videosQuery.isError ? ( ) : videosError ? (
<div className="rounded-2xl border border-[#edf1f5] bg-white px-6 py-12 text-center text-gray-600"> <div className="rounded-2xl border border-[#edf1f5] bg-white px-6 py-12 text-center text-gray-600">
Không thể tải danh sách video. Không thể tải danh sách video.
</div> </div>
...@@ -152,8 +133,17 @@ function VideoPageContent() { ...@@ -152,8 +133,17 @@ function VideoPageContent() {
); );
} }
export default function Page() { type VideoProps = {
category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[];
};
export default function Video({ category, allCategories }: VideoProps) {
const categoryMenu = category ? buildDynamicCategoryMenu(category, allCategories) : [];
return ( return (
<>
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<Suspense <Suspense
fallback={ fallback={
<div className="flex min-h-screen items-center justify-center bg-white"> <div className="flex min-h-screen items-center justify-center bg-white">
...@@ -163,5 +153,6 @@ export default function Page() { ...@@ -163,5 +153,6 @@ export default function Page() {
> >
<VideoPageContent /> <VideoPageContent />
</Suspense> </Suspense>
</>
); );
} }
src/app/(main)/[...slug]/templates/InformationPage.tsx
View file @ 63303609
'use client'; 'use client';
import ListCategory from "@/components/base/list-category"; import ListCategory from "@/components/base/list-category";
import parse from "html-react-parser";
import { buildDynamicCategoryMenu } from "./data"; import { buildDynamicCategoryMenu } from "./data";
import StructuredPostContent from "./StructuredPostContent";
import type { DynamicCategoryRouteItem, DynamicPostItem } from "./types"; import type { DynamicCategoryRouteItem, DynamicPostItem } from "./types";
import {
ABOUT_VCCI_HCM_SLUG,
AboutVcciHcmPage,
DefaultInformationPage,
LEGAL_TRADE_PAGE_SLUGS,
LegalTradePages,
MARKET_PROFILE_PAGE_SLUG,
MarketProfilePage,
MEMBER_REGISTRATION_PAGE_SLUG,
MEMBER_BENEFITS_PAGE_SLUG,
MemberRegistrationPage,
MemberBenefitsPage,
SERVICE_PAGE_SLUG,
ServicePage,
} from "./information-pages";
type InformationPageProps = { type InformationPageProps = {
post: DynamicPostItem; post: DynamicPostItem;
...@@ -25,120 +12,38 @@ type InformationPageProps = { ...@@ -25,120 +12,38 @@ type InformationPageProps = {
allCategories: DynamicCategoryRouteItem[]; allCategories: DynamicCategoryRouteItem[];
}; };
const LEGAL_TRADE_CATEGORY_ID = "69b4c7e7-28ea-41f2-97f4-988fe702a8a3";
const LEGAL_TRADE_CHILD_SLUGS = new Set([
"xuat-xu-hang-hoa-co",
"thu-tuc-cap-co",
"bieu-mau-co-va-cach-khai",
"phi-va-le-phi-cap-co",
"diem-cap-va-thoi-gian-cap-co",
"diem-cap-va-thoi-gian-cap-gcn-va-xac-nhan-cttm",
"thong-tin-lien-he-co",
]);
function resolveInformationVariant(post: DynamicPostItem, category: DynamicCategoryRouteItem) {
if (
category.slug === ABOUT_VCCI_HCM_SLUG ||
post.slug === ABOUT_VCCI_HCM_SLUG ||
post.categories.some((item) => item.url === "/gioi-thieu/ve-vcci-hcm")
) {
return "about-vcci-hcm" as const;
}
if (
category.slug === SERVICE_PAGE_SLUG ||
post.slug === SERVICE_PAGE_SLUG ||
post.categories.some((item) => item.url === "/gioi-thieu/dich-vu-cung-cap")
) {
return "service" as const;
}
if (
category.slug === MEMBER_BENEFITS_PAGE_SLUG ||
post.slug === MEMBER_BENEFITS_PAGE_SLUG ||
post.categories.some((item) => item.url === "/hoi-vien/loi-ich-hoi-vien-vcci")
) {
return "member-benefits" as const;
}
if (
category.slug === MEMBER_REGISTRATION_PAGE_SLUG ||
post.slug === MEMBER_REGISTRATION_PAGE_SLUG ||
post.categories.some((item) => item.url === "/hoi-vien/dang-ky-hoi-vien")
) {
return "member-registration" as const;
}
if (
category.slug === MARKET_PROFILE_PAGE_SLUG ||
post.slug === MARKET_PROFILE_PAGE_SLUG ||
post.categories.some((item) => item.url === "/xuc-tien-thuong-mai/ho-so-thi-truong")
) {
return "market-profile" as const;
}
if (
LEGAL_TRADE_PAGE_SLUGS.has(category.slug) ||
category.parent_id === LEGAL_TRADE_CATEGORY_ID ||
LEGAL_TRADE_CHILD_SLUGS.has(category.slug) ||
LEGAL_TRADE_PAGE_SLUGS.has(post.slug) ||
LEGAL_TRADE_CHILD_SLUGS.has(post.slug) ||
post.categories.some((item) => item.id === LEGAL_TRADE_CATEGORY_ID) ||
post.categories.some(
(item) =>
item.url === "/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai" ||
item.url === "/phap-che-va-cttm" ||
item.url.startsWith("/xuat-xu-hang-hoa/"),
)
) {
return "legal-trade" as const;
}
return "default" as const;
}
function hasRenderablePostData(post: DynamicPostItem) {
if (post.content.trim()) return true;
const sections = post.content_structure?.post_content ?? [];
return sections.some((section) => section.content.trim() || section.images.length > 0);
}
export default function InformationPage({ export default function InformationPage({
post, post,
category, category,
allCategories, allCategories,
}: InformationPageProps) { }: InformationPageProps) {
const categoryMenu = buildDynamicCategoryMenu(category, allCategories); const categoryMenu = buildDynamicCategoryMenu(category, allCategories);
const variant = resolveInformationVariant(post, category);
const useSpecialUi =
variant === "about-vcci-hcm" ||
(variant !== "default" && !hasRenderablePostData(post));
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null} {categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
<div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6"> <div className="container mx-auto px-4 py-4 sm:px-6 lg:px-10 lg:pb-6">
<main className="w-full"> <main className="w-full">
{useSpecialUi ? ( <section className="block">
variant === "about-vcci-hcm" ? ( <div className="min-w-0">
<AboutVcciHcmPage post={post} /> <h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
) : variant === "service" ? ( {post.title}
<ServicePage post={post} /> </h1>
) : variant === "member-benefits" ? ( <div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<MemberBenefitsPage />
) : variant === "member-registration" ? ( {post.summary ? (
<MemberRegistrationPage post={post} /> <p className="mt-5 max-w-6xl text-base font-semibold leading-7 text-[#374151] md:text-lg md:leading-8">
) : variant === "market-profile" ? ( {parse(post.summary)}
<MarketProfilePage post={post} /> </p>
) : variant === "legal-trade" ? ( ) : null}
<LegalTradePages post={post} category={category} />
) : ( <div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<DefaultInformationPage post={post} /> <div className="page-detail-content prose tiptap max-w-none overflow-hidden">
) <StructuredPostContent post={post} />
) : ( </div>
<DefaultInformationPage post={post} /> </div>
)} </div>
</section>
<div className="page-detail-styles"> <div className="page-detail-styles">
<style jsx global>{` <style jsx global>{`
......
src/app/(main)/[...slug]/templates/ArticleDetailPage.tsx → src/app/(main)/[...slug]/templates/NewsDetailPage.tsx
View file @ 63303609
...@@ -110,17 +110,17 @@ const EventInfoCard = ({ post }: { post: DynamicPostItem }) => { ...@@ -110,17 +110,17 @@ const EventInfoCard = ({ post }: { post: DynamicPostItem }) => {
); );
}; };
type ArticleDetailPageProps = { type NewsDetailPageProps = {
post: DynamicPostItem; post: DynamicPostItem;
category: DynamicCategoryRouteItem | null; category: DynamicCategoryRouteItem | null;
allCategories: DynamicCategoryRouteItem[]; allCategories: DynamicCategoryRouteItem[];
}; };
export default function ArticleDetailPage({ export default function NewsDetailPage({
post, post,
category, category,
allCategories, allCategories,
}: ArticleDetailPageProps) { }: NewsDetailPageProps) {
const publishedDate = dayjs( const publishedDate = dayjs(
post.release_at ?? post.published_at ?? post.created_at, post.release_at ?? post.published_at ?? post.created_at,
).format("DD/MM/YYYY"); ).format("DD/MM/YYYY");
......
src/app/(main)/[...slug]/templates/ArticlePage.tsx → src/app/(main)/[...slug]/templates/NewsPage.tsx
View file @ 63303609
...@@ -11,18 +11,17 @@ import { Input } from "@/components/ui/input"; ...@@ -11,18 +11,17 @@ import { Input } from "@/components/ui/input";
import ListCategory from "@/components/base/list-category"; import ListCategory from "@/components/base/list-category";
import EventsCalendar from "@/app/(main)/(home)/components/events-calendar"; import EventsCalendar from "@/app/(main)/(home)/components/events-calendar";
import SidebarAdvertisements from "@/components/shared/sidebar-advertisements"; import SidebarAdvertisements from "@/components/shared/sidebar-advertisements";
import { useGetApiV10Post } from "@/api/vcci-news/endpoints/post";
import { import {
buildDynamicPostHref, buildDynamicPostHref,
buildDynamicCategoryMenu, buildDynamicCategoryMenu,
buildVisibleNewsFilters,
useDynamicPostList,
findDisplayCategoryForPost, findDisplayCategoryForPost,
getDynamicPostExcerpt, getDynamicPostExcerpt,
resolveDynamicPostImage, resolveDynamicPostImage,
} from "./data"; } from "./data";
import type { DynamicCategoryRouteItem } from "./types"; import type { DynamicCategoryRouteItem, DynamicPostItem } from "./types";
type ArticlePageProps = { type NewsPageProps = {
category: DynamicCategoryRouteItem; category: DynamicCategoryRouteItem;
allCategories: DynamicCategoryRouteItem[]; allCategories: DynamicCategoryRouteItem[];
}; };
...@@ -51,7 +50,7 @@ const getTagClassName = (index: number) => { ...@@ -51,7 +50,7 @@ const getTagClassName = (index: number) => {
return classes[index % classes.length]; return classes[index % classes.length];
}; };
export default function ArticlePage({ category, allCategories }: ArticlePageProps) { export default function NewsPage({ category, allCategories }: NewsPageProps) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
...@@ -90,19 +89,22 @@ export default function ArticlePage({ category, allCategories }: ArticlePageProp ...@@ -90,19 +89,22 @@ export default function ArticlePage({ category, allCategories }: ArticlePageProp
} }
}, [page, pathname, router, searchParamsString]); }, [page, pathname, router, searchParamsString]);
const postsQuery = useDynamicPostList({ const filters = `category.id==${category.id}${keyword ? `,title@=${keyword}` : ""},is_hidden==false,is_active==true,type==news`;
const { data: postsData, isLoading: postsLoading } = useGetApiV10Post({
page, page,
pageSize, pageSize,
filters: buildVisibleNewsFilters([ sortField: "release_at",
`category.id==${category.id}`, sortOrder: "desc",
keyword ? `title@=${keyword}` : null, filters: filters || undefined,
]),
staleTime: 60 * 1000,
}); });
const totalPages = postsQuery.data?.totalPages ?? 1; const responseData = postsData?.responseData;
const count = Number(responseData?.count ?? 0);
const totalPages = pageSize > 0 ? Math.max(1, Math.ceil(count / pageSize)) : 1;
const currentPage = Math.min(page, totalPages); const currentPage = Math.min(page, totalPages);
const paginatedPosts = postsQuery.data?.rows ?? []; const paginatedPosts = ((responseData?.rows ?? []) as unknown as DynamicPostItem[])
.filter((item) => item.id && item.title);
const categoryIndexMap = useMemo(() => { const categoryIndexMap = useMemo(() => {
const entries = allCategories.map((item, index) => [item.id, index] as const); const entries = allCategories.map((item, index) => [item.id, index] as const);
...@@ -116,7 +118,7 @@ export default function ArticlePage({ category, allCategories }: ArticlePageProp ...@@ -116,7 +118,7 @@ export default function ArticlePage({ category, allCategories }: ArticlePageProp
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
{categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null} {categoryMenu.length ? <ListCategory categories={categoryMenu} /> : null}
{postsQuery.isLoading ? ( {postsLoading ? (
<div className="flex justify-center items-center w-full h-64"> <div className="flex justify-center items-center w-full h-64">
<Spinner /> <Spinner />
</div> </div>
......
src/app/(main)/[...slug]/templates/StructuredPostContent.tsx
View file @ 63303609
"use client"; "use client";
import { useState } from "react";
import parse from "html-react-parser"; import parse from "html-react-parser";
import { ImageLightbox } from "@/components/shared/image-lightbox";
import { SafeImage } from "@/components/shared/safe-image"; import { SafeImage } from "@/components/shared/safe-image";
import { getDynamicPostBodyHtml } from "./data"; import { getDynamicPostBodyHtml } from "./data";
import type { DynamicPostContentSection, DynamicPostItem } from "./types"; import type { DynamicPostContentSection, DynamicPostItem } from "./types";
...@@ -18,10 +21,16 @@ function getGridClassName(columns: number) { ...@@ -18,10 +21,16 @@ function getGridClassName(columns: number) {
function StructuredImageSection({ section }: { section: DynamicPostContentSection }) { function StructuredImageSection({ section }: { section: DynamicPostContentSection }) {
const images = section.images.filter((item) => item.image?.url); const images = section.images.filter((item) => item.image?.url);
const [activeImage, setActiveImage] = useState<{
src: string;
alt: string;
caption?: string;
} | null>(null);
if (!images.length) return null; if (!images.length) return null;
return ( return (
<>
<div className={`not-prose my-6 grid gap-4 ${getGridClassName(section.image_columns)}`}> <div className={`not-prose my-6 grid gap-4 ${getGridClassName(section.image_columns)}`}>
{images.map((item) => { {images.map((item) => {
const image = item.image; const image = item.image;
...@@ -30,14 +39,21 @@ function StructuredImageSection({ section }: { section: DynamicPostContentSectio ...@@ -30,14 +39,21 @@ function StructuredImageSection({ section }: { section: DynamicPostContentSectio
return ( return (
<figure <figure
key={`${section.id}-${image.id || image.url}-${item.position}`} key={`${section.id}-${image.id || image.url}-${item.position}`}
className="overflow-hidden rounded-[18px] bg-white" className="group cursor-zoom-in overflow-hidden rounded-[18px] bg-white"
onClick={() =>
setActiveImage({
src: image.url,
alt: image.alt || image.name || "Hình ảnh bài viết",
caption: item.caption ?? undefined,
})
}
> >
<SafeImage <SafeImage
src={image.url} src={image.url}
alt={image.alt || image.name || "Hình ảnh bài viết"} alt={image.alt || image.name || "Hình ảnh bài viết"}
width={1200} width={1200}
height={800} height={800}
className="h-auto w-full object-contain" className="h-auto w-full object-contain transition-transform duration-300 group-hover:scale-[1.02]"
/> />
{item.caption ? ( {item.caption ? (
<figcaption className="mt-2 text-center text-sm text-gray-600"> <figcaption className="mt-2 text-center text-sm text-gray-600">
...@@ -48,6 +64,17 @@ function StructuredImageSection({ section }: { section: DynamicPostContentSectio ...@@ -48,6 +64,17 @@ function StructuredImageSection({ section }: { section: DynamicPostContentSectio
); );
})} })}
</div> </div>
<ImageLightbox
src={activeImage?.src ?? ""}
alt={activeImage?.alt}
caption={activeImage?.caption}
open={Boolean(activeImage)}
onOpenChange={(open) => {
if (!open) setActiveImage(null);
}}
/>
</>
); );
} }
......
src/app/(main)/[...slug]/templates/data.ts
View file @ 63303609
import type { Category } from "@/api/vcci-news/models/category"; import { getApiV10Post, getApiV10PostId } from "@/api/vcci-news/endpoints/post";
import { getApiV10Category, useGetApiV10Category } from "@/api/vcci-news/endpoints/category";
import { getApiV10Post, getApiV10PostId, useGetApiV10Post } from "@/api/vcci-news/endpoints/post";
import Links from "@/links"; import Links from "@/links";
import { getCategoryFallbackResponse } from "@/mockdata/categories";
import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
import type { import type {
DynamicCategoryMenuItem, DynamicCategoryMenuItem,
DynamicCategoryRouteItem, DynamicCategoryRouteItem,
...@@ -14,12 +10,6 @@ import type { ...@@ -14,12 +10,6 @@ import type {
DynamicPostUser, DynamicPostUser,
} from "./types"; } from "./types";
type CategoryListResponse = {
responseData?: {
rows?: Category[];
};
};
type RawPostCategory = { type RawPostCategory = {
id?: string | null; id?: string | null;
name?: string | null; name?: string | null;
...@@ -280,36 +270,6 @@ export const buildVisibleNewsFilters = ( ...@@ -280,36 +270,6 @@ export const buildVisibleNewsFilters = (
"type==news", "type==news",
]); ]);
export async function fetchDynamicCategories(): Promise<DynamicCategoryRouteItem[]> {
const response = await getApiV10Category({
page: 1,
pageSize: 200,
sortField: "sort_order",
sortOrder: "asc",
}).catch(() => getCategoryFallbackResponse());
const rows = (response.responseData?.rows ?? []) as unknown as Category[];
return sortCategories(
rows
.map((item) => {
const type = normalizeCategoryType(item.type);
if (!item.id || !item.name || !type) return null;
return {
id: item.id,
name: item.name,
slug: item.slug ?? "",
url: normalizePath(item.url),
type,
parent_id: item.parent_id ?? null,
sort_order: item.sort_order ?? null,
} satisfies DynamicCategoryRouteItem;
})
.filter((item): item is DynamicCategoryRouteItem => Boolean(item)),
);
}
export async function fetchDynamicPostList(params: { export async function fetchDynamicPostList(params: {
filters?: string; filters?: string;
page?: number; page?: number;
...@@ -377,43 +337,6 @@ export async function fetchDynamicPostBySlug(path: string) { ...@@ -377,43 +337,6 @@ export async function fetchDynamicPostBySlug(path: string) {
return result.rows[0] ?? null; return result.rows[0] ?? null;
} }
export async function fetchDynamicSinglePagePost(categoryId: string) {
const result = await fetchDynamicPostList({
page: 1,
pageSize: 1,
filters: buildPostFilters([
`category.id==${categoryId}`,
"is_hidden==false",
"is_active==true",
"type==page",
]),
});
return result.rows[0] ?? null;
}
export function findDynamicCategoryByPath(
categories: DynamicCategoryRouteItem[],
path: string,
) {
const normalizedPath = normalizePath(path);
return categories.find((item) => normalizePath(item.url) === normalizedPath) ?? null;
}
export function findMenuCategoryForPost(
post: DynamicPostItem | null,
categories: DynamicCategoryRouteItem[],
) {
if (!post) return null;
for (const category of post.categories) {
const matched = categories.find((item) => item.id === category.id);
if (matched) return matched;
}
return null;
}
export function findDisplayCategoryForPost( export function findDisplayCategoryForPost(
post: DynamicPostItem | null, post: DynamicPostItem | null,
activeCategory: DynamicCategoryRouteItem | null, activeCategory: DynamicCategoryRouteItem | null,
...@@ -476,13 +399,6 @@ export function buildDynamicCategoryMenu( ...@@ -476,13 +399,6 @@ export function buildDynamicCategoryMenu(
})); }));
} }
export function findFirstChildCategory(
category: DynamicCategoryRouteItem,
categories: DynamicCategoryRouteItem[],
) {
return sortCategories(categories.filter((item) => item.parent_id === category.id))[0] ?? null;
}
export function resolveDynamicPostImage(thumbnail?: DynamicPostThumbnail) { export function resolveDynamicPostImage(thumbnail?: DynamicPostThumbnail) {
const value = thumbnail?.path ?? thumbnail?.original ?? thumbnail?.url ?? ""; const value = thumbnail?.path ?? thumbnail?.original ?? thumbnail?.url ?? "";
...@@ -625,116 +541,3 @@ export function isDynamicPostVisible(post: DynamicPostItem) { ...@@ -625,116 +541,3 @@ export function isDynamicPostVisible(post: DynamicPostItem) {
} }
export { buildPostFilters, normalizePath }; export { buildPostFilters, normalizePath };
export type UseDynamicPostListOptions = {
page?: number;
pageSize?: number;
sortField?: string;
sortOrder?: string;
filters?: string;
enabled?: boolean;
staleTime?: number;
};
export function useDynamicPostList(options: UseDynamicPostListOptions) {
const page = options.page ?? 1;
const pageSize = options.pageSize ?? 5;
return useGetApiV10Post(
{
page,
pageSize,
sortField: options.sortField ?? "release_at",
sortOrder: (options.sortOrder ?? "desc") as "asc" | "desc",
filters: options.filters?.trim() || undefined,
},
{
query: {
enabled: options.enabled !== false,
staleTime: options.staleTime ?? 60 * 1000,
select: (response): DynamicPostListResult => {
const data = response?.responseData;
const count = Number(data?.count ?? 0);
return {
count,
page,
pageSize,
totalPages: pageSize > 0 ? Math.max(1, Math.ceil(count / pageSize)) : 1,
rows: ((data?.rows ?? []) as unknown as RawPostItem[])
.map(mapPost)
.filter((item) => item.id && item.title),
};
},
},
},
);
}
export type UseDynamicCategoriesOptions = {
enabled?: boolean;
staleTime?: number;
};
export function useDynamicCategories(options: UseDynamicCategoriesOptions = {}) {
return useGetApiV10Category(
{
page: 1,
pageSize: 200,
sortField: "sort_order",
sortOrder: "asc",
},
{
query: {
enabled: options.enabled !== false,
staleTime: options.staleTime ?? 5 * 60 * 1000,
select: (response): DynamicCategoryRouteItem[] => {
const rows = (response?.responseData?.rows ?? []) as unknown as Category[];
return sortCategories(
rows
.map((item) => {
const type = normalizeCategoryType(item.type);
if (!item.id || !item.name || !type) return null;
return {
id: item.id,
name: item.name,
slug: item.slug ?? "",
url: normalizePath(item.url),
type,
sort_order: item.sort_order ?? null,
parent_id: item.parent_id ?? null,
} as DynamicCategoryRouteItem;
})
.filter((item): item is DynamicCategoryRouteItem => item !== null),
);
},
},
},
);
}
export function useDynamicPostDetail(postId: string, routePath: string, options: {
enabled?: boolean;
staleTime?: number;
} = {}) {
return useQuery({
queryKey: ["dynamic-post-detail", postId || routePath],
queryFn: () =>
postId
? fetchDynamicPostById(postId)
: fetchDynamicPostBySlug(routePath),
enabled: options.enabled !== false,
staleTime: options.staleTime ?? 60 * 1000,
});
}
export function useDynamicSinglePagePost(categoryId: string | undefined, options: {
enabled?: boolean;
staleTime?: number;
} = {}) {
return useQuery({
queryKey: ["dynamic-single-page-post", categoryId],
queryFn: () => fetchDynamicSinglePagePost(categoryId!),
enabled: (options.enabled !== false) && Boolean(categoryId),
staleTime: options.staleTime ?? 60 * 1000,
});
}
src/app/(main)/[...slug]/templates/information-pages/DefaultInformationPage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import StructuredPostContent from "../StructuredPostContent";
import type { DynamicPostItem } from "../types";
import parse from "html-react-parser";
type DefaultInformationPageProps = {
post: DynamicPostItem;
};
export default function DefaultInformationPage({
post,
}: DefaultInformationPageProps) {
return (
<section className="block">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
{post.title}
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
{post.summary ? (
<p className="mt-5 max-w-6xl text-base font-semibold leading-7 text-[#374151] md:text-lg md:leading-8">
{parse(post.summary)}
</p>
) : null}
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="page-detail-content prose tiptap max-w-none overflow-hidden">
<StructuredPostContent post={post} />
</div>
</div>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/MemberRegistrationPage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import links from "@/links";
import type { DynamicPostItem } from "../types";
type MemberRegistrationPageProps = {
post: DynamicPostItem;
};
const MEMBERSHIP_REQUIREMENTS = [
"Đơn xin gia nhập làm hội viên chính thức VCCI (2 bản theo mẫu của VCCI)",
"Giấy phép đăng ký kinh doanh, hoặc giấy phép thành lập hoặc quyết định thành lập (2 bản sao)",
];
const MEMBERSHIP_FEES = [
"Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm",
"Doanh số từ 10 - 50 tỉ đồng đóng 7 triệu đồng/năm",
"Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm",
];
const ATTACHED_FORMS = [
{
label: "Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp)",
href: "/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx",
download: true,
},
{
label: "Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội)",
href: "/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx",
download: true,
},
{
label: "Hướng dẫn hồ sơ đăng ký Hội viên VCCI",
href: `${links.externalApiOrigin}/dang-ky`,
download: false,
},
] as const;
export default function MemberRegistrationPage({ post }: MemberRegistrationPageProps) {
return (
<section className="">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Đăng ký hội viên
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 space-y-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
{post.content?.trim() ||
"Điều lệ sửa đổi của Liên đoàn Thương mại và Công nghiệp Việt Nam (VCCI) được Đại hội đại biểu toàn quốc VCCI lần thứ VII thông qua và được Thủ tướng Chính phủ phê duyệt tại Quyết định số 1496/QĐ-TTg ngày 30/11/2022 đã quy định tất cả các doanh nghiệp, các tổ chức sản xuất, kinh doanh, người sử dụng lao động, các hiệp hội doanh nghiệp có đăng ký và hoạt động hợp pháp ở Việt Nam đều có thể trở thành hội viên của VCCI."}
</p>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Để trở thành hội viên chính thức, tổ chức quan tâm cần gửi VCCI tại Hà Nội hoặc các Chi nhánh, Văn phòng đại diện của VCCI hồ sơ gia nhập gồm:
</p>
<ul className="space-y-2 pl-6 text-[18px] leading-9 text-[#1f2a44]">
{MEMBERSHIP_REQUIREMENTS.map((item) => (
<li key={item} className="list-disc">
<strong>{item}</strong>
</li>
))}
</ul>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Khi nhận được đơn, Ban Thường trực sẽ xét và thông báo cho tổ chức liên quan về quyết định kết nạp. Trong vòng 1 tháng kể từ ngày nhận thông báo, tổ chức phải thực hiện đóng lệ phí gia nhập. Chỉ khi nào tổ chức đóng lệ phí gia nhập mới được coi là hội viên chính thức. Theo quyết định của Ban chấp hành VCCI, lệ phí hiện hành được tính như sau:
</p>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Mức lệ phí gia nhập bằng mức hội phí hàng năm, được tính căn cứ vào doanh số của tổ chức trong năm trước theo các mức:
</p>
<ul className="space-y-2 pl-6 text-[18px] leading-9 text-[#1f2a44]">
{MEMBERSHIP_FEES.map((item) => (
<li key={item} className="list-disc">
{item}
</li>
))}
</ul>
<p className="text-justify text-[18px] leading-9 text-[#1f2a44]">
Mức lệ phí gia nhập và hội phí trên có thể được điều chỉnh bởi quyết định của Ban chấp hành VCCI trong từng thời gian cụ thể.
</p>
<div>
<p className="font-semibold text-[#2450b5]">Để biết thêm thông tin chi tiết, vui lòng liên hệ:</p>
<div className="mt-4 space-y-1 text-[18px] leading-9 text-[#1f2a44]">
<p className="font-semibold">Phòng Hội viên Đào tạo và Truyền thông:</p>
<p>C. Thúy – ĐD: 0903 909 756</p>
<p>Email: luuthanhthuy72@yahoo.com; hoivien@vcci-hcm.org.vn</p>
<p>Điện thoại: 028. 3932 0611 – Fax: 028. 3932 5472</p>
<p>Địa chỉ: P. 306, Lầu 3, Tòa nhà VCCI, 171 Võ Thị Sáu, Phường Xuân Hòa, TP. Hồ Chí Minh</p>
</div>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Biểu mẫu đính kèm:</p>
<ul className="mt-3 space-y-2 pl-6 text-[#2450b5]">
{ATTACHED_FORMS.map((item) => (
<li key={item.label} className="list-disc italic">
{item.download ? (
<a href={item.href} download className="hover:text-[#173f9f]">
{item.label}
</a>
) : (
<a href={item.href} target="_blank" rel="noreferrer" className="hover:text-[#173f9f]">
{item.label}
</a>
)}
</li>
))}
</ul>
</div>
<div className="flex justify-center pt-4">
<a
href={`https://vccihcm.vn/dang-ky`}
target="_blank"
rel="noreferrer"
className="inline-flex min-w-[220px] items-center justify-center rounded-[4px] bg-[#2450b5] px-6 py-4 text-[18px] font-semibold text-white transition-colors hover:bg-[#173f9f]"
>
Đăng ký Hội viên
</a>
</div>
</div>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/constants.ts deleted 100644 → 0
View file @ f1642091
export const ABOUT_VCCI_HCM_SLUG = "ve-vcci-hcm";
export const SERVICE_PAGE_SLUG = "dich-vu-cung-cap";
export const MEMBER_BENEFITS_PAGE_SLUG = "loi-ich-hoi-vien-vcci";
export const MEMBER_REGISTRATION_PAGE_SLUG = "dang-ky-hoi-vien";
export const MARKET_PROFILE_PAGE_SLUG = "ho-so-thi-truong";
export const LEGAL_TRADE_PAGE_SLUGS = new Set([
"phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai",
"phap-che-va-cttm",
]);
src/app/(main)/[...slug]/templates/information-pages/index.ts deleted 100644 → 0
View file @ f1642091
export { default as AboutVcciHcmPage } from "./AboutVcciHcmPage";
export { default as DefaultInformationPage } from "./DefaultInformationPage";
export { default as LegalTradePages } from "./legal-trade-pages";
export { default as MarketProfilePage } from "./MarketProfilePage";
export { default as MemberBenefitsPage } from "./MemberBenefitsPage";
export { default as MemberRegistrationPage } from "./MemberRegistrationPage";
export { default as ServicePage } from "./ServicePage";
export * from "./constants";
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/ContactPage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import { Mail, MapPin, Phone, UserRound } from "lucide-react";
import type { LegalTradePageProps } from "./types";
export default function ContactPage(_: LegalTradePageProps) {
return (
<section className="py-2">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Thông tin liên hệ
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 space-y-5">
<article className="rounded-3xl border border-[#edf1f6] bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8">
<h2 className="text-[24px] font-bold leading-tight text-[#1f2a44]">
Phòng Pháp chế và xác nhận Chứng từ thương mại
</h2>
<div className="mt-5 space-y-4 text-[16px] leading-8 text-[#5f6f86]">
<p>Liên đoàn Thương mại và Công nghiệp Việt Nam – Chi nhánh khu vực Thành phố Hồ Chí Minh (VCCI-HCM)</p>
<div className="flex items-start gap-3">
<MapPin className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>Phòng 103, Lầu 1, Tòa nhà VCCI HCM, 171 Võ Thị Sáu, P. Xuân Hòa, TP. HCM</span>
</div>
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>028-3932 6498</span>
</div>
<div className="flex items-start gap-3">
<Mail className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>co@vcci-hcm.org.vn</span>
</div>
</div>
</article>
<article className="rounded-3xl border border-[#edf1f6] bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8">
<h2 className="text-[24px] font-bold leading-tight text-[#1f2a44]">
Xử lý vướng mắc, phản ánh, góp ý trong quá trình làm thủ tục cấp GCN và xác nhận CTTM
</h2>
<div className="mt-5 space-y-5 text-[16px] leading-8 text-[#5f6f86]">
<div>
<p className="font-semibold text-[#1f2a44]">Điểm cấp số 1</p>
<p>Điện thoại: 028-3932 6498</p>
<p>Email: co@vcci-hcm.org.vn</p>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Điểm cấp số 2</p>
<p>Phó Trưởng phòng: Nguyễn Văn Đức</p>
<p>Mobile: 090 949 7155</p>
<p>Email: nvduc1980@gmail.com</p>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Điểm cấp số 3</p>
<p>Trưởng phòng (Cơ sở 2): Bà Ma Thị Hương</p>
<p>Mobile: 039 512 2922</p>
<p>Email: huongmtvccivt@gmail.com</p>
</div>
</div>
</article>
<article className="rounded-3xl border border-[#edf1f6] bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8">
<h2 className="text-[24px] font-bold leading-tight text-[#1f2a44]">
Hướng dẫn hồ sơ và tiếp nhận phản ánh
</h2>
<div className="mt-5 space-y-5 text-[16px] leading-8 text-[#5f6f86]">
<div>
<p className="font-semibold text-[#1f2a44]">Hướng dẫn khai hồ sơ thương nhân, chữ ký số và IT</p>
<p>Điểm cấp số 1, điện thoại: 028-3932 6498</p>
<p>Điểm cấp số 2, điện thoại: 0274-380 0048</p>
<p>Điểm cấp số 3, điện thoại: 025-4385 2710</p>
</div>
<div>
<p className="font-semibold text-[#1f2a44]">Tiếp thu, giải quyết phản ánh, khiếu nại, góp ý</p>
<p>Trưởng phòng (Trụ sở chính): Ông Vũ Xuân Hưng</p>
<p>Điện thoại: 028-3932 6929 hoặc Mobile: 0909 170 171 (Đường dây nóng)</p>
<p>Email: vuxuanhung@vcci-hcm.org.vn</p>
</div>
</div>
</article>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Đầu mối hỗ trợ</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<Mail className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>co@vcci-hcm.org.vn</span>
</div>
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>Đường dây nóng: 0909 170 171</span>
</div>
<div className="flex items-start gap-3">
<UserRound className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>Ông Vũ Xuân Hưng</span>
</div>
</div>
</div>
</aside>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/FeesPage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import { CircleDollarSign, FileStack, Layers3 } from "lucide-react";
import type { LegalTradePageProps } from "./types";
const FEE_ITEMS = [
{
title: "Một bộ GCN, CTTM (4 bản)",
value: "100.000đ/bộ",
icon: FileStack,
},
{
title: "Bản làm thêm tính từ bản thứ 5 trở lên",
value: "10.000đ/bản",
icon: Layers3,
},
{
title: "Phôi Giấy chứng nhận",
value: "20.000đ/tờ",
icon: CircleDollarSign,
},
] as const;
export default function FeesPage(_: LegalTradePageProps) {
return (
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Phí cấp GCN và xác nhận CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-3xl border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#2450b5]">Biểu phí hiện hành</p>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">
Mức phí áp dụng cho việc cấp Giấy chứng nhận và xác nhận Chứng từ thương mại được tính theo từng loại hồ sơ và số lượng bản phát hành.
</p>
</div>
<div className="mt-8 grid gap-4 md:grid-cols-3">
{FEE_ITEMS.map((item, index) => {
const Icon = item.icon;
return (
<article
key={item.title}
className={[
"rounded-[26px] border px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]",
index === 0 ? "border-[#dbe7ff] bg-[#f8fbff]" : "border-[#edf1f6] bg-white",
].join(" ")}
>
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<Icon className="h-5 w-5" />
</div>
<h2 className="mt-4 text-[20px] font-bold leading-tight text-[#1f2a44]">{item.title}</h2>
<p className="mt-4 text-[30px] font-bold leading-none text-[#2450b5]">{item.value}</p>
</article>
);
})}
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Tóm tắt chi phí</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>01 bộ tiêu chuẩn gồm 4 bản</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Có phụ phí cho bản làm thêm từ bản thứ 5</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Phôi Giấy chứng nhận được tính riêng theo từng tờ</span>
</div>
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Lưu ý khi chuẩn bị</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<p>Kiểm tra trước số lượng bản cần cấp để chuẩn bị đúng chi phí thực hiện.</p>
<p>Chuẩn bị lệ phí đầy đủ sẽ giúp quá trình tiếp nhận và xử lý hồ sơ diễn ra nhanh hơn.</p>
</div>
</div>
</aside>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/FormsPage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import { Download, FileBadge2, FileText } from "lucide-react";
import type { LegalTradePageProps } from "./types";
export default function FormsPage(_: LegalTradePageProps) {
return (
<section className="py-2">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Biểu mẫu GCN và nội dung khai báo GCN, CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-[26px] border border-[#edf1f6] bg-white px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]">
<div className="flex items-start gap-4">
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<FileText className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<h2 className="text-[22px] font-bold leading-tight text-[#1f2a44]">
bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm.docx
</h2>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">
Nhấn tải xuống để xem toàn bộ biểu mẫu và nội dung khai báo.
</p>
<a
href="/bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm.docx"
download
className="mt-5 inline-flex items-center gap-2 rounded-[4px] bg-[#2450b5] px-5 py-3 text-[15px] font-semibold text-white transition-colors hover:bg-[#173f9f]"
>
<Download className="h-4 w-4" />
Tải biểu mẫu
</a>
</div>
</div>
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Lưu ý</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Người dùng có thể tải về để xem biểu mẫu đầy đủ trên máy của mình.</span>
</div>
</div>
</div>
</aside>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/LegalTradeLayout.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import {
Building2,
CircleDollarSign,
ClipboardList,
FileBadge2,
FileCheck2,
Mail,
MapPin,
Phone,
Scale,
ScrollText,
} from "lucide-react";
import type { LegalTradeTemplate } from "./types";
type LegalTradeLayoutProps = {
template: LegalTradeTemplate;
};
const ICONS = [Scale, FileCheck2, ScrollText, CircleDollarSign, Building2, ClipboardList];
export default function LegalTradeLayout({ template }: LegalTradeLayoutProps) {
return (
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_340px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
{template.pageTitle}
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
{template.intro ? (
<p className="mt-5 max-w-6xl text-base font-semibold leading-7 text-[#374151] md:text-lg md:leading-8">
{template.intro}
</p>
) : null}
<div className="mt-7 space-y-5">
{template.sections.map((section, index) => {
const Icon = ICONS[index % ICONS.length];
return (
<article
key={section.title}
className="rounded-3xl border border-[#edf1f6] bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8"
>
<div className="flex items-start gap-4">
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<Icon className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<h2 className="text-[24px] font-bold leading-tight text-[#1f2a44]">{section.title}</h2>
{section.description ? (
<p className="mt-4 text-[16px] leading-8 text-[#5f6f86]">{section.description}</p>
) : null}
{section.bullets?.length ? (
<ul className="mt-4 space-y-3 text-[16px] leading-8 text-[#5f6f86]">
{section.bullets.map((item) => (
<li key={item} className="flex items-start gap-3">
<span className="mt-3 h-2 w-2 shrink-0 rounded-full bg-[#f5a400]" />
<span>{item}</span>
</li>
))}
</ul>
) : null}
{section.numbered?.length ? (
<ol className="mt-4 space-y-4 text-[16px] leading-8 text-[#5f6f86]">
{section.numbered.map((item, itemIndex) => (
<li key={item} className="flex items-start gap-4">
<span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#2450b5] text-sm font-bold text-white">
{itemIndex + 1}
</span>
<span>{item}</span>
</li>
))}
</ol>
) : null}
</div>
</div>
</article>
);
})}
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
{template.sideCard ? (
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">{template.sideCard.title}</h2>
<div className="mt-5 space-y-4">
{template.sideCard.items.map((item) => (
<div key={item} className="flex items-start gap-3 text-[16px] leading-7 text-[#5f6f86]">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>{item}</span>
</div>
))}
</div>
</div>
) : null}
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Liên hệ hỗ trợ</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>028-3932 6498</span>
</div>
<div className="flex items-start gap-3">
<Mail className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>co@vcci-hcm.org.vn</span>
</div>
<div className="flex items-start gap-3">
<MapPin className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>Phòng 103, Lầu 1, Tòa nhà VCCI HCM, 171 Võ Thị Sáu, P. Xuân Hòa, TP. HCM</span>
</div>
<div className="flex items-start gap-3">
<FileBadge2 className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>Hệ thống trực tuyến: covcci.com.vn</span>
</div>
</div>
</div>
</aside>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/LocationsPage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import { Building2, Clock3, MapPin, Phone } from "lucide-react";
import type { LegalTradePageProps } from "./types";
const LOCATIONS = [
{
title: "Điểm cấp số 1",
address:
"Phòng 103, Lầu 1, Tòa nhà VCCI HCM, 171 Võ Thị Sáu, Phường Xuân Hòa, Thành phố Hồ Chí Minh",
phone: "028-3932 6498",
},
{
title: "Điểm cấp số 2",
address:
"Lầu 3, Tòa nhà Công ty CP ICD Tân Cảng Sóng Thần, Số 7/20, Đường ĐT 743, KP. Bình Đáng, Phường Bình Hòa, Thành phố Hồ Chí Minh",
phone: "0274-380 0048",
},
{
title: "Điểm cấp số 3",
address: "155 Nguyễn Thái Học, Phường Tam Thắng, Thành phố Hồ Chí Minh",
phone: "025-4385 2710",
},
] as const;
export default function LocationsPage(_: LegalTradePageProps) {
return (
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Điểm cấp và cấp GCN và xác nhận CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-3xl border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Building2 className="h-5 w-5" />
<p className="text-sm font-semibold uppercase tracking-[0.18em]">
1. Các điểm cấp GCN và xác nhận CTTM thuộc VCCI-HCM
</p>
</div>
</div>
<div className="mt-8 grid gap-4">
{LOCATIONS.map((item, index) => (
<article
key={item.title}
className={[
"rounded-[26px] border px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]",
index === 0 ? "border-[#dbe7ff] bg-[#f8fbff]" : "border-[#edf1f6] bg-white",
].join(" ")}
>
<div className="flex items-start gap-4">
<span className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#eff4ff] text-lg font-bold text-[#2450b5]">
{index + 1}
</span>
<div className="min-w-0 flex-1">
<h2 className="text-[22px] font-bold leading-tight text-[#1f2a44]">{item.title}</h2>
<div className="mt-4 space-y-3 text-[16px] leading-8 text-[#5f6f86]">
<div className="flex items-start gap-3">
<MapPin className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>{item.address}</span>
</div>
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#2450b5]" />
<span>{item.phone}</span>
</div>
</div>
</div>
</div>
</article>
))}
</div>
<div className="mt-8 rounded-3xl border border-[#dbe7ff] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Clock3 className="h-5 w-5" />
<p className="text-sm font-semibold uppercase tracking-[0.18em]">2. Giờ tiếp nhận hồ sơ</p>
</div>
<div className="mt-4 space-y-2 text-[16px] leading-8 text-[#5f6f86]">
<p>– Từ thứ Hai đến thứ Sáu</p>
<p>Buổi sáng: 7h30 – 11h30</p>
<p>Buổi chiều: 13h30 – 16h30</p>
<p>Thời gian cấp: không quá 08 giờ làm việc</p>
</div>
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Liên hệ nhanh</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
{LOCATIONS.map((item) => (
<div key={item.title} className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>
{item.title}: {item.phone}
</span>
</div>
))}
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Khung giờ làm việc</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<p>Từ thứ Hai đến thứ Sáu</p>
<p>Buổi sáng: 7h30 – 11h30</p>
<p>Buổi chiều: 13h30 – 16h30</p>
<p>Thời gian cấp: không quá 08 giờ làm việc</p>
</div>
</div>
</aside>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/PhapChePage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import { BriefcaseBusiness, FileText, GraduationCap, Mail, Phone, Scale } from "lucide-react";
import type { LegalTradePageProps } from "./types";
const PHAP_CHE_SERVICES = [
{
title: "Góp ý và hỗ trợ pháp lý",
description:
"Tập hợp ý kiến góp ý xây dựng pháp luật, tiếp nhận các khó khăn, vướng mắc trong hoạt động kinh doanh của doanh nghiệp.",
icon: Scale,
},
{
title: "Tư vấn chuyên sâu",
description:
"Tư vấn, kết nối và cung cấp dịch vụ pháp lý kinh doanh chuyên sâu (Luật sư/ Trọng tài viên).",
icon: FileText,
},
{
title: "Dịch vụ thương mại",
description:
"Dịch vụ xuất khẩu, nhập khẩu; Chứng nhận lãnh sự; Phân loại HS; C/O; Lộ trình thuế quan trong các FTA; …",
icon: BriefcaseBusiness,
},
{
title: "Đào tạo chuyên sâu",
description:
"Tổ chức tập huấn đào tạo chuyên sâu trong các lĩnh vực Thuế; Hải quan; Tài chính kế toán; Phân loại mã số hàng hóa (Mã HS); Xuất xứ hàng hóa; Những vấn đề pháp lý của hợp đồng mua bán hàng hóa trong nước và quốc tế; …",
icon: GraduationCap,
},
];
export default function PhapChePage(_: LegalTradePageProps) {
return (
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Pháp chế
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="grid gap-4 md:grid-cols-2">
<div className="rounded-[24px] border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Phone className="h-5 w-5" />
<span className="text-sm font-semibold uppercase tracking-[0.18em]">Điện thoại</span>
</div>
<p className="mt-3 text-[28px] font-bold text-[#1f2a44]">028-3932 6498</p>
</div>
<div className="rounded-[24px] border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Mail className="h-5 w-5" />
<span className="text-sm font-semibold uppercase tracking-[0.18em]">Email</span>
</div>
<p className="mt-3 break-words text-[22px] font-bold text-[#1f2a44]">co@vcci-hcm.org.vn</p>
</div>
</div>
<div className="mt-8 grid gap-4 xl:grid-cols-2">
{PHAP_CHE_SERVICES.map((item) => {
const Icon = item.icon;
return (
<article
key={item.title}
className="rounded-[26px] border border-[#edf1f6] bg-white px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]"
>
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<Icon className="h-5 w-5" />
</div>
<h2 className="mt-4 text-[22px] font-bold leading-tight text-[#1f2a44]">{item.title}</h2>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">{item.description}</p>
</article>
);
})}
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Phạm vi hỗ trợ</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Góp ý xây dựng pháp luật và tiếp nhận vướng mắc doanh nghiệp</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Tư vấn và kết nối chuyên gia pháp lý kinh doanh</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Đào tạo chuyên sâu về thuế, hải quan, xuất xứ và hợp đồng</span>
</div>
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Liên hệ Pháp chế</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<div className="flex items-start gap-3">
<Phone className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>028-3932 6498</span>
</div>
<div className="flex items-start gap-3">
<Mail className="mt-1 h-4 w-4 shrink-0 text-[#f5c21b]" />
<span>co@vcci-hcm.org.vn</span>
</div>
</div>
</div>
</aside>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/ProcedurePage.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import { Clock3, FileCheck2, FileUp, Landmark, ReceiptText, RotateCcw } from "lucide-react";
import type { LegalTradePageProps } from "./types";
const REQUIREMENTS = [
"Đăng ký tài khoản Thương nhân và khai báo các trường thông tin của Thương nhân trên Hệ thống COVCCI.",
"Liên hệ với Đơn vị cấp Giấy chứng nhận, xác nhận Chứng từ thương mại của VCCI kích hoạt tài khoản cho Thương nhân.",
];
const STEPS = [
{
title: "Bước 1. Khai báo trực tuyến",
description:
"Thương nhân truy cập Hệ thống COVCCI, thực hiện khai báo các thông tin theo hướng dẫn, đính kèm hồ sơ dưới dạng điện tử đã được Thương nhân xác nhận bằng chữ ký số do cơ quan có thẩm quyền cấp và nhận số tham chiếu cho bộ hồ sơ.",
icon: FileUp,
},
{
title: "Bước 2. Thanh toán giá dịch vụ và hồ sơ giấy",
description:
"Thương nhân thanh toán giá dịch vụ và bộ hồ sơ giấy đầy đủ theo quy định tại bộ phận tiếp nhận của đơn vị VCCI có thẩm quyền.",
icon: ReceiptText,
},
{
title: "Bước 3. Phân công và thẩm định",
description:
"Bộ phận tiếp nhận hồ sơ kiểm tra tính đầy đủ, hợp lệ ban đầu và phân công cho cán bộ nghiệp vụ xử lý.",
icon: FileCheck2,
},
{
title: "Bước 4. Phê duyệt và cấp",
description:
"Nếu hồ sơ hợp lệ và đầy đủ, cán bộ nghiệp vụ trình hồ sơ lên người có thẩm quyền ký duyệt. Sau khi được ký duyệt, chứng từ sẽ được đóng dấu, tách, lưu trữ (hoặc vào hộp) và trả kết quả cho Thương nhân.",
icon: Landmark,
},
{
title: "Bước 5. Trả hồ sơ hoặc yêu cầu bổ sung",
description:
"Nếu hồ sơ có sai sót, không hợp lệ hoặc vi phạm các quy định, cán bộ nghiệp vụ thông báo rõ lý do cho Thương nhân (thông qua hệ thống hoặc trực tiếp) để yêu cầu sửa đổi, bổ sung hoặc từ chối cấp.",
icon: RotateCcw,
},
];
export default function ProcedurePage(_: LegalTradePageProps) {
return (
<section className="">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-start">
<div className="min-w-0">
<h1 className="max-w-6xl text-3xl font-bold leading-tight text-[#111827] md:text-[38px] md:leading-[1.15]">
Quy trình tiếp nhận hồ sơ cấp GCN và xác nhận CTTM
</h1>
<div className="mt-3 h-[3px] w-16 rounded-full bg-[#f5a400]" />
<div className="mt-7 rounded-3xl bg-white px-5 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.06)] sm:px-8 lg:px-10">
<div className="rounded-[24px] border border-[#e5edf8] bg-[#f8fbff] px-5 py-5">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#2450b5]">
1. Yêu cầu đối với Thương nhân
</p>
<div className="mt-4 space-y-3 text-[16px] leading-8 text-[#5f6f86]">
{REQUIREMENTS.map((item) => (
<div key={item} className="flex items-start gap-3">
<span className="mt-3 h-2 w-2 shrink-0 rounded-full bg-[#f5a400]" />
<span>{item}</span>
</div>
))}
</div>
</div>
<div className="mt-8">
<div className="flex items-center gap-3">
<div className="h-11 w-11 rounded-2xl bg-[#eff4ff] text-[#2450b5] flex items-center justify-center">
<FileCheck2 className="h-5 w-5" />
</div>
<div>
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-[#2450b5]">
2. Quy trình thực hiện
</p>
<h2 className="mt-1 text-[24px] font-bold leading-tight text-[#1f2a44]">
Các bước xử lý thống nhất
</h2>
</div>
</div>
<div className="mt-6 space-y-4">
{STEPS.map((step, index) => {
const Icon = step.icon;
return (
<article
key={step.title}
className="rounded-[24px] border border-[#edf1f6] bg-white px-5 py-5 shadow-[0_14px_34px_rgba(17,24,39,0.06)]"
>
<div className="flex items-start gap-4">
<div className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#eff4ff] text-[#2450b5]">
<Icon className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-3">
<span className="inline-flex h-7 min-w-7 items-center justify-center rounded-full bg-[#2450b5] px-2 text-sm font-bold text-white">
{index + 1}
</span>
<h3 className="text-[20px] font-bold leading-tight text-[#1f2a44]">{step.title}</h3>
</div>
<p className="mt-3 text-[16px] leading-8 text-[#5f6f86]">{step.description}</p>
</div>
</div>
</article>
);
})}
</div>
</div>
<div className="mt-8 rounded-[24px] border border-[#dbe7ff] bg-[#f8fbff] px-5 py-5">
<div className="flex items-center gap-3 text-[#2450b5]">
<Clock3 className="h-5 w-5" />
<p className="text-sm font-semibold uppercase tracking-[0.18em]">3. Thời gian xử lý</p>
</div>
<p className="mt-4 text-[16px] leading-8 text-[#5f6f86]">
Trường hợp hồ sơ chưa hợp lệ, VCCI sẽ thông báo qua Hệ thống COVCCI các nội dung cần sửa đổi, bổ sung cho Thương nhân trong thời hạn 03 ngày làm việc kể từ ngày tiếp nhận hồ sơ. Thời gian xử lý cho một bộ hồ sơ hợp lệ là không quá 08 giờ làm việc kể từ thời điểm VCCI nhận đủ hồ sơ hợp lệ. Đối với trường hợp cần thẩm tra, xác minh hay trao đổi nội bộ và từ cơ quan chức năng trong và ngoài nước khác, thời gian giải quyết có thể kéo dài hơn so với quy định chung.
</p>
</div>
</div>
</div>
<aside className="space-y-5 lg:sticky lg:top-24">
<div className="rounded-[28px] border border-[#edf1f6] bg-[#fbfcff] px-6 py-6 shadow-[0_18px_42px_rgba(17,24,39,0.05)]">
<h2 className="text-[28px] font-bold leading-tight text-[#1f2a44]">Mốc thời gian</h2>
<div className="mt-5 space-y-4 text-[16px] leading-7 text-[#5f6f86]">
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Thông báo bổ sung: trong 03 ngày làm việc</span>
</div>
<div className="flex items-start gap-3">
<span className="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-[#2f6ce5]" />
<span>Xử lý hồ sơ hợp lệ: không quá 08 giờ làm việc</span>
</div>
</div>
</div>
<div className="rounded-[28px] bg-linear-to-br from-[#1d56b7] to-[#21467f] px-6 py-6 text-white shadow-[0_22px_46px_rgba(28,52,120,0.18)]">
<h2 className="text-[26px] font-bold leading-tight">Kênh xử lý</h2>
<div className="mt-5 space-y-4 text-[15px] leading-7 text-white/88">
<p>Hệ thống COVCCI dùng để khai báo, tiếp nhận và theo dõi hồ sơ trực tuyến.</p>
<p>Thương nhân cần chuẩn bị đầy đủ hồ sơ điện tử, chữ ký số và hồ sơ giấy theo quy định.</p>
</div>
</div>
</aside>
</div>
</section>
);
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/Router.tsx deleted 100644 → 0
View file @ f1642091
'use client';
import { useParams } from "next/navigation";
import type { DynamicCategoryRouteItem, DynamicPostItem } from "../../types";
import ContactPage from "./ContactPage";
import CertificateTradeDocumentPage from "./CertificateTradeDocumentPage";
import FeesPage from "./FeesPage";
import FormsPage from "./FormsPage";
import LocationsPage from "./LocationsPage";
import PhapChePage from "./PhapChePage";
import ProcedurePage from "./ProcedurePage";
type LegalTradeRouterProps = {
post: DynamicPostItem;
category: DynamicCategoryRouteItem;
};
function resolveVariant(
post: DynamicPostItem,
category: DynamicCategoryRouteItem,
fullPath: string,
) {
const url = category.url || fullPath;
const slug = category.slug || post.slug;
if (
slug === "phap-che" ||
url === "/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/phap-che"
) {
return "phap-che" as const;
}
if (
slug === "giay-chung-nhan-gcn-va-chung-tu-thuong-mai-cttm" ||
url ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/giay-chung-nhan-gcn-va-chung-tu-thuong-mai-cttm"
) {
return "certificate-trade-document" as const;
}
if (
slug === "quy-trinh-tiep-nhan-ho-so-cap-gcn-va-xac-nhan-cttm" ||
slug === "thu-tuc-cap-co" ||
url ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/quy-trinh-tiep-nhan-ho-so-cap-gcn-va-xac-nhan-cttm" ||
url === "/xuat-xu-hang-hoa/thu-tuc-cap-co"
) {
return "procedure" as const;
}
if (slug === "bieu-mau-co-va-cach-khai" || url === "/xuat-xu-hang-hoa/bieu-mau-co-va-cach-khai") {
return "forms" as const;
}
if (
slug === "bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm" ||
fullPath ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm" ||
url ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/bieu-mau-gcn-va-noi-dung-khai-bao-gcn-cttm"
) {
return "forms" as const;
}
if (
slug === "phi-cap-gcn-va-xac-nhan-cttm" ||
slug === "phi-va-le-phi-cap-co" ||
fullPath ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/phi-cap-gcn-va-xac-nhan-cttm" ||
url ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/phi-cap-gcn-va-xac-nhan-cttm" ||
url === "/xuat-xu-hang-hoa/phi-va-le-phi-cap-co"
) {
return "fees" as const;
}
if (
slug === "diem-cap-va-cap-gcn-va-xac-nhan-cttm" ||
slug === "diem-cap-va-thoi-gian-cap-co" ||
slug === "diem-cap-va-thoi-gian-cap-gcn-va-xac-nhan-cttm" ||
fullPath ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/diem-cap-va-cap-gcn-va-xac-nhan-cttm" ||
fullPath ===
"/phap-che-va-xac-nhan-chung-tu-tm/diem-cap-va-thoi-gian-cap-gcn-va-xac-nhan-cttm" ||
url ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/diem-cap-va-cap-gcn-va-xac-nhan-cttm" ||
url ===
"/phap-che-va-xac-nhan-chung-tu-tm/diem-cap-va-thoi-gian-cap-gcn-va-xac-nhan-cttm" ||
url === "/xuat-xu-hang-hoa/diem-cap-va-thoi-gian-cap-co"
) {
return "locations" as const;
}
if (
slug === "thong-tin-lien-he" ||
slug === "thong-tin-lien-he-co" ||
fullPath ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/thong-tin-lien-he" ||
url ===
"/phap-che-cap-giay-chung-nhan-va-xac-nhan-chung-tu-thuong-mai/thong-tin-lien-he" ||
url === "/xuat-xu-hang-hoa/thong-tin-lien-he-co"
) {
return "contact" as const;
}
return "overview" as const;
}
export default function LegalTradePages({ post, category }: LegalTradeRouterProps) {
const params = useParams();
const pathSegments = Array.isArray(params.slug) ? params.slug : [params.slug];
const currentSlug = pathSegments.at(-1) ?? "";
const fullPath = `/${pathSegments.filter(Boolean).join("/")}`;
const variant = resolveVariant(
{
...post,
slug: currentSlug || post.slug,
},
{
...category,
slug: currentSlug || category.slug,
url: fullPath || category.url,
},
fullPath,
);
if (variant === "phap-che") {
return <PhapChePage post={post} category={category} />;
}
if (variant === "certificate-trade-document") {
return <CertificateTradeDocumentPage post={post} category={category} />;
}
if (variant === "procedure") {
return <ProcedurePage post={post} category={category} />;
}
if (variant === "forms") {
return <FormsPage post={post} category={category} />;
}
if (variant === "fees") {
return <FeesPage post={post} category={category} />;
}
if (variant === "locations") {
return <LocationsPage post={post} category={category} />;
}
if (variant === "contact") {
return <ContactPage post={post} category={category} />;
}
return <PhapChePage post={post} category={category} />;
}
src/app/(main)/[...slug]/templates/information-pages/legal-trade-pages/types.ts deleted 100644 → 0
View file @ f1642091
import type { DynamicCategoryRouteItem, DynamicPostItem } from "../../types";
export type LegalTradePageProps = {
post: DynamicPostItem;
category: DynamicCategoryRouteItem;
};
export type LegalTradeSection = {
title: string;
description?: string;
bullets?: string[];
numbered?: string[];
};
export type LegalTradeTemplate = {
pageTitle: string;
intro?: string;
sections: LegalTradeSection[];
sideCard?: {
title: string;
items: string[];
};
};
src/app/(main)/danh-ba-hoi-vien/page.tsx deleted 100644 → 0
View file @ f1642091
export default function Page() {
return (
<div className="container flex justify-center items-center h-full py-20">
Danh bạ hội viên đang được xây dựng
</div>
);
}
\ No newline at end of file
src/app/(main)/layout.tsx
View file @ 63303609
...@@ -3,11 +3,7 @@ import Footer from "@/components/layout/main/footer"; ...@@ -3,11 +3,7 @@ import Footer from "@/components/layout/main/footer";
import React from "react"; import React from "react";
import ScrollToTopButton from "../../components/layout/main/ScrollToTopButton"; import ScrollToTopButton from "../../components/layout/main/ScrollToTopButton";
export default function Layout({ export default function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return ( return (
<main className="flex flex-col min-h-screen bg-white"> <main className="flex flex-col min-h-screen bg-white">
<Header /> <Header />
......
src/app/(main)/site-map/page.tsx deleted 100644 → 0
View file @ f1642091
"use client";
import React from "react";
import Link from "next/link";
import { useGetApiV10PageConfig } from "@/api/vcci-news/endpoints/page-config";
import { GetNewsPageConfigResponseType } from "@/api/vcci-news/types/news-page-config";
function SiteMapPage() {
const { data: categoriesData, isLoading, isError } = useGetApiV10PageConfig<GetNewsPageConfigResponseType>();
if (isLoading) {
return (
<div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
<div className="text-[#063e8e] text-xl font-semibold">Đang tải...</div>
</div>
);
}
if (isError || !categoriesData?.responseData) {
return (
<div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
<div className="text-red-600 text-xl font-semibold">Không thể tải dữ liệu</div>
</div>
);
}
const sections = categoriesData.responseData.children || [];
return (
<div className="min-h-screen bg-gray-50 py-12">
<div className="container mx-auto px-4">
<h1 className="text-3xl font-bold text-center mb-12 text-[#063e8e]">
SƠ ĐỒ TRANG WEB
</h1>
{/* Sitemap Structure */}
<div className="relative flex flex-col items-center">
{/* Homepage - Top Level */}
<div className="relative mb-20">
<Link
href="/"
className="block bg-[#063e8e] text-white px-8 py-4 rounded-lg font-semibold text-center hover:bg-[#0a4fb5] transition shadow-lg min-w-[200px]"
>
TRANG CHỦ
</Link>
{/* Vertical line from homepage down */}
<div className="absolute left-[99px] -translate-x-1/2 top-full h-20 w-0.5 bg-gray-600"></div>
</div>
{/* Main Sections - Second Level */}
<div className="relative w-full max-w-[1400px]">
{/* Horizontal line connecting all sections */}
<div className="absolute top-0 left-[6.3%] right-[6.3%] h-0.5 bg-gray-600 z-0"></div>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-6 relative pt-4">
{sections.map((section, idx) => (
<div key={section.id} className="relative flex flex-col items-center">
{/* Vertical line from horizontal bar down to section */}
<div className="absolute -top-4 left-1/2 -translate-x-1/2 h-4 w-0.5 bg-gray-600 z-10"></div>
{/* Section Box */}
<div className="relative z-20">
<Link
href={section.static_link || "#"}
className="flex bg-[#063e8e] text-white px-4 py-3 rounded-md font-medium text-center hover:bg-[#0a4fb5] transition shadow-md w-full text-sm min-h-20 items-center justify-center"
>
<span className="leading-tight">{section.name.toUpperCase()}</span>
</Link>
{/* Vertical line from section down to children */}
{section.children && section.children.length > 0 && (
<div className="absolute left-1/2 -translate-x-1/2 top-full h-6 w-0.5 bg-gray-600 z-10"></div>
)}
</div>
{/* Children - Third Level */}
{section.children && section.children.length > 0 && (
<div className="mt-6 flex flex-col gap-3 w-full relative">
{/* Vertical spine connecting all children */}
<div
className="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gray-600"
style={{
top: '-24px',
bottom: '0',
}}
></div>
{section.children.map((child, childIdx) => (
<div key={child.id} className="relative">
{/* Horizontal line from spine to child box */}
<div className="absolute right-1/2 top-1/2 -translate-y-1/2 w-1/2 h-0.5 bg-gray-600"></div>
<Link
href={child.static_link || "#"}
className="block bg-gray-400 text-white px-3 py-2.5 rounded text-xs font-medium text-center hover:bg-gray-500 transition shadow-sm leading-tight relative z-10"
>
{child.name.toUpperCase()}
</Link>
</div>
))}
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
<style jsx>{`
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
`}</style>
</div>
);
}
export default SiteMapPage;
src/components/layout/main/header.tsx
View file @ 63303609
...@@ -3,12 +3,11 @@ ...@@ -3,12 +3,11 @@
import React, { useCallback, useEffect, useMemo, useState } from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Facebook, Linkedin, Menu, Twitter, X, Youtube } from "lucide-react"; import { Facebook, Linkedin, Menu, Twitter, X, Youtube } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { SafeImage } from "@/components/shared/safe-image"; import { SafeImage } from "@/components/shared/safe-image";
import Link from "next/link"; import Link from "next/link";
const fallbackLogo = "/logo.png"; const fallbackLogo = "/logo.png";
import { useGetApiV10Logo } from "@/api/vcci-news/endpoints/logo"; import { useGetApiV10Logo } from "@/api/vcci-news/endpoints/logo";
import { getApiV10SiteInformation } from "@/api/vcci-news/endpoints/site-information"; import { useGetApiV10SiteInformation } from "@/api/vcci-news/endpoints/site-information";
import links from "@/links"; import links from "@/links";
import type { Logo } from "@/api/vcci-news/models/logo"; import type { Logo } from "@/api/vcci-news/models/logo";
import type { import type {
...@@ -209,12 +208,14 @@ function Header() { ...@@ -209,12 +208,14 @@ function Header() {
} }
); );
const { data: siteInformationResponse } = const { data: siteInformationResponse } = useGetApiV10SiteInformation(
useQuery<ApiEnvelope<SiteInformationData> | null>({ undefined,
queryKey: ["site-information"], {
queryFn: () => getApiV10SiteInformation().catch(() => null), query: {
staleTime: 5 * 60 * 1000, staleTime: 5 * 60 * 1000,
}); },
},
);
const menuItems = useMemo( const menuItems = useMemo(
() => buildHeaderMenuTree(categoriesResponse?.responseData?.rows), () => buildHeaderMenuTree(categoriesResponse?.responseData?.rows),
......
src/components/shared/image-lightbox.tsx 0 → 100644
View file @ 63303609
This diff is collapsed.
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