Skip to content

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

update/responsive home page and members page

parent 5dc31199
Expand all Show whitespace changes
Inline Side-by-side
Showing with 359 additions and 329 deletions
src/app/(main)/(home)/components/news-content/NewsContent.tsx → src/app/(main)/(home)/components/card-news/index.tsx
View file @ e0c56a2e
...@@ -3,16 +3,16 @@ import BASE_URL from '@/links' ...@@ -3,16 +3,16 @@ import BASE_URL from '@/links'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content'; import AppEditorContent from '@/components/shared/editor-content';
function NewsContent({ news }: { news: NewsAdminItem }) { function CardNews({ news }: { news: NewsAdminItem }) {
return ( return (
<a <a
href={`${news.id}`} href={`${news.id}`}
className='flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3' className='flex flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3'
> >
<img <img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title} alt={news.title}
className='w-full sm:w-[120px] h-20 object-cover rounded-sm' className='w-[120px] h-20 object-cover rounded-sm'
/> />
<div className='flex-1'> <div className='flex-1'>
<p className='text-[#0056b3] font-bold text-sm line-clamp-2'> <p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
...@@ -27,4 +27,4 @@ function NewsContent({ news }: { news: NewsAdminItem }) { ...@@ -27,4 +27,4 @@ function NewsContent({ news }: { news: NewsAdminItem }) {
); );
} }
export default NewsContent; export default CardNews;
\ No newline at end of file \ No newline at end of file
src/app/(main)/(home)/components/news-content/index.tsx deleted 100644 → 0
View file @ 5dc31199
export { default } from './NewsContent';
\ No newline at end of file
src/app/(main)/(home)/page.tsx
View file @ e0c56a2e
This diff is collapsed.
src/app/(main)/hoi-vien/components/card-news/index.tsx
View file @ e0c56a2e
import { NewsAdminItem } from '@/api/types/news'
import { NewsItem } from '@app/dai-dien-gioi-chu/lib/types/NewsPage.type'; import BASE_URL from '@/links'
import Links from '@links/index'
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content';
import parse from 'html-react-parser' import parse from 'html-react-parser'
function NewsContent({ news }: { news: NewsItem }) {
function CardNews({ news }: { news: NewsAdminItem }) {
return ( return (
<a <a
href={`/tin-tuc/${news.id}`} href={`${news.id}`}
className="flex flex-col hover:no-underline sm:flex-row gap-2 mb-6 bg-white rounded-lg shadow-sm p-4 border items-start min-w-0" className="flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3 hover:shadow-md transition"
> >
<img <img
src={`${Links.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title} alt={news.title}
className="w-full sm:w-56 md:w-64 h-40 md:h-36 object-cover shrink-0" className="w-full sm:w-40 h-40 sm:h-28 object-cover rounded-md"
/> />
<div className="flex-1 min-w-0 pl-0 sm:pl-4"> <div className="flex-1">
<p className="text-primary font-semibold text-base md:text-lg hover:underline line-clamp-2 wrap-break-word hover:no-underline"> <p className="text-[#0056b3] font-bold text-sm sm:text-base line-clamp-2">
{news.title} {news.title}
</p> </p>
<p className="text-gray-500 text-xs sm:text-sm my-1">
<div className="text-sm my-2 text-[#00AED5]">{dayjs(news.release_at).format('DD/MM/YYYY')}</div> {dayjs(news.release_at).format('DD/MM/YYYY')}
</p>
<div className="text-sm text-[#777] line-clamp-3"> <div className="text-xs sm:text-sm text-[#777] line-clamp-3 prose tiptap">
<div className="text-sm prose tiptap">{parse(news.description)}</div> {parse(news.description)}
</div> </div>
</div> </div>
</a> </a>
) );
} }
export default NewsContent; export default CardNews;
\ No newline at end of file \ No newline at end of file
src/app/(main)/hoi-vien/components/list-category/index.tsx
View file @ e0c56a2e
"use client" "use client"
import Link from "next/link" import Link from "next/link"
import { usePathname } from "next/navigation" import { usePathname, useRouter } from "next/navigation"
import React from "react" import React from "react"
type Category = { type Category = {
...@@ -18,17 +18,23 @@ const CATEGORIES: Category[] = [ ...@@ -18,17 +18,23 @@ const CATEGORIES: Category[] = [
const ListCategory: React.FC = () => { const ListCategory: React.FC = () => {
const pathname = usePathname() || "" const pathname = usePathname() || ""
const router = useRouter()
const isActive = (href: string) => { const isActive = (href: string) => {
if (href === "/hoi-vien") return pathname === "/hoi-vien" if (href === "/hoi-vien") return pathname === "/hoi-vien"
return pathname === href return pathname === href
} }
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
router.push(e.target.value)
}
return ( return (
<div className="border-t border-gray-200 bg-white p-2.5"> <div className="border-t border-gray-200 bg-white p-2.5">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<nav aria-label="Danh mục" className="py-3"> <nav aria-label="Danh mục" className="py-3">
<ul className="flex items-center"> {/* --- Desktop view --- */}
<ul className="hidden sm:flex items-center">
{CATEGORIES.map((c) => { {CATEGORIES.map((c) => {
const active = isActive(c.href) const active = isActive(c.href)
return ( return (
...@@ -38,8 +44,8 @@ const ListCategory: React.FC = () => { ...@@ -38,8 +44,8 @@ const ListCategory: React.FC = () => {
className={ className={
"text-sm font-bold py-3.5 px-5 transition-colors duration-150 " + "text-sm font-bold py-3.5 px-5 transition-colors duration-150 " +
(active (active
? "text-yellow-500 font-semibold decoration-yellow-300 " ? "text-yellow-500 font-semibold decoration-yellow-300"
: "text-gray-600 hover:text-yellow-500 ") : "text-gray-600 hover:text-yellow-500")
} }
> >
{c.title} {c.title}
...@@ -48,6 +54,21 @@ const ListCategory: React.FC = () => { ...@@ -48,6 +54,21 @@ const ListCategory: React.FC = () => {
) )
})} })}
</ul> </ul>
{/* --- Mobile view (Dropdown) --- */}
<div className="sm:hidden">
<select
value={pathname}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400"
>
{CATEGORIES.map((c) => (
<option key={c.href} value={c.href}>
{c.title}
</option>
))}
</select>
</div>
</nav> </nav>
</div> </div>
</div> </div>
......
src/app/(main)/hoi-vien/dang-ky-hoi-vien/page.tsx
View file @ e0c56a2e
'use client' 'use client'
import React from "react"; import React from "react";
import ListCategory from "./../components/list-category"; import ListCategory from "./../components/list-category";
const Page = () => { const Page = () => {
return ( return (
<div className="min-h-screen container mx-auto pb-4"> <div className="min-h-screen container mx-auto px-4 sm:px-6 lg:px-8 pb-6">
<div className="w-full flex flex-col gap-5"> <div className="flex flex-col gap-5">
<ListCategory /> <ListCategory />
<div className="gap-6"> <main className="bg-white border rounded-md p-5 sm:p-7 lg:py-10 lg:px-40">
{/* Main content */} <h1 className="text-center mb-4 text-xl sm:text-2xl font-bold text-[#153e8e]">
<main className="lg:col-span-2 bg-white border rounded-md p-7 px-40"> THỦ TỤC GIA NHẬP HỘI VIÊN CHÍNH THỨC
<div> </h1>
<h1 className="text-center mb-4 text-2xl font-bold text-[#153e8e]">THỦ TỤC GIA NHẬP HỘI VIÊN CHÍNH THỨC</h1>
<p className="text-justify leading-7 mb3"> <p className="text-justify leading-7 mb-3">
Đ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. Đ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>
<p className="text-justify leading-7 mb-3"> <p className="text-justify leading-7 mb-3">
Để 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: Để 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> </p>
<ul className="list-disc pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Đơ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)</li> <ul className="list-disc pl-6 sm:pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">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).</li> <li className="text-justify leading-7">
Đơ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)
</li>
<li className="text-justify leading-7">
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).
</li>
</ul> </ul>
<p className="text-justify leading-7 my-3"> <p className="text-justify leading-7 my-3">
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: 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.
</p> </p>
<p className="text-justify leading-7 my-3"> <p className="text-justify leading-7 my-3">
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: 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> </p>
<ul className="list-disc pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm</li> <ul className="list-disc pl-6 sm:pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Doanh số từ 10 {`-`} 50 tỉ đồng đóng 7 triệu đồng/năm</li> <li className="text-justify leading-7">
<li className="text-justify leading-7">Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm</li> Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm
</li>
<li className="text-justify leading-7">
Doanh số từ 10 - 50 tỉ đồng đóng 7 triệu đồng/năm
</li>
<li className="text-justify leading-7">
Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm
</li>
</ul> </ul>
<p className="text-justify leading-7 my-3"> <p className="text-justify leading-7 my-3">
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ể. 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> </p>
<div>
<div className="my-4">
<p className="text-[#063e8e] mb-3"> <p className="text-[#063e8e] mb-3">
Để biết thêm thông tin chi tiết, vui lòng liên hệ: Để biết thêm thông tin chi tiết, vui lòng liên hệ:
</p> </p>
<p className="text-[#063e8e]"> <p className="text-[#063e8e]">
<b>Phòng Hội viên Đào tạo và Truyền thông</b> <b>Phòng Hội viên Đào tạo và Truyền thông</b>
<br /> <br />
<b>C. Thúy {`-`} DĐ: 0903 909 756</b> <b>C. Thúy - ĐĐ: 0903 909 756</b>
<span className="block"> <span className="block">
Email: luuthanhthuy72@yahoo.com; hoivien@vcci-hcm.org.vn; Email: luuthanhthuy72@yahoo.com; hoivien@vcci-hcm.org.vn;
</span> </span>
<span className="block"> <span className="block">
Điện thoại: 028.3932.0611 {`-`} Fax: 028.3932.5472 Điện thoại: 028.3932.0611 - Fax: 028.3932.5472
</span> </span>
<span className="block"> <span className="block">
Đị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 </span> Đị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
</span>
</p> </p>
</div> </div>
<p className="text-justify leading-7 my-3">
Biểu mẫu đính kèm <p className="text-justify leading-7 my-3 font-semibold">
Biểu mẫu đính kèm:
</p> </p>
<ul className="list-disc pl-10 space-y-1">
<li className="text-justify leading-7 "> <ul className="list-disc pl-6 sm:pl-10 space-y-1">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download> <li className="text-justify leading-7">
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp) <a
href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp)
</a> </a>
</li> </li>
<li className="text-justify leading-7"> <li className="text-justify leading-7">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download> <a
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội) href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội)
</a> </a>
</li> </li>
<li className="text-justify leading-7"> <li className="text-justify leading-7">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Huong-dan-ho-so-dang-ky-Hoi-vien-VCCI.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download> <a
Hướng dẫn hồ sơ đăng ký Hội viên VCCI href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Huong-dan-ho-so-dang-ky-Hoi-vien-VCCI.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Hướng dẫn hồ sơ đăng ký Hội viên VCCI
</a> </a>
</li> </li>
</ul> </ul>
</div >
</main> </main>
</div > </div>
</div > </div>
</div >
); );
}; };
......
src/app/(main)/hoi-vien/ket-noi-hoi-vien/page.tsx
View file @ e0c56a2e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import ListCategory from "./../components/list-category"; import ListCategory from "./../components/list-category";
import ListFilter from "./../components/list-filter"; import ListFilter from "./../components/list-filter";
import NewsContent from "./../components/card-news"; import CardNews from "./../components/card-news";
import { Pagination } from '@components/base/pagination' import { Pagination } from '@components/base/pagination'
import Image from "next/image"; import Image from "next/image";
import { useGetNews } from '@api/endpoints/news' import { useGetNews } from '@api/endpoints/news'
...@@ -27,7 +27,7 @@ export default function Page() { ...@@ -27,7 +27,7 @@ export default function Page() {
<main className="lg:col-span-2 bg-background"> <main className="lg:col-span-2 bg-background">
<div className='pb-5 overflow-hidden'> <div className='pb-5 overflow-hidden'>
{allData?.responseData.rows.map((news) => ( {allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} /> <CardNews key={news.id} news={news} />
))} ))}
<div className='w-full flex justify-center mt-4'> <div className='w-full flex justify-center mt-4'>
......
src/app/(main)/hoi-vien/tin-hoi-vien/page.tsx
View file @ e0c56a2e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import ListCategory from "./../components/list-category"; import ListCategory from "./../components/list-category";
import ListFilter from "./../components/list-filter"; import ListFilter from "./../components/list-filter";
import NewsContent from "./../components/card-news"; import CardNews from "./../components/card-news";
import { Pagination } from '@components/base/pagination' import { Pagination } from '@components/base/pagination'
import Image from "next/image"; import Image from "next/image";
import { useGetNews } from '@api/endpoints/news' import { useGetNews } from '@api/endpoints/news'
...@@ -27,7 +27,7 @@ export default function Page() { ...@@ -27,7 +27,7 @@ export default function Page() {
<main className="lg:col-span-2 bg-background"> <main className="lg:col-span-2 bg-background">
<div className='pb-5 overflow-hidden'> <div className='pb-5 overflow-hidden'>
{allData?.responseData.rows.map((news) => ( {allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} /> <CardNews key={news.id} news={news} />
))} ))}
<div className='w-full flex justify-center mt-4'> <div className='w-full flex justify-center mt-4'>
......
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