97:I[903690,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3h4dxz6j9vrb9.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2ak79vkcuz1ia.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1qvyjk5p58sle.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/296n5x9xr-_1t.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2gyta6jpl0xuw.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2k7q8cwjrh5v9.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2x0r6v1gm-sbg.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1nep_-vv8ldmi.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0ws07icczx8x9.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh"],"ExplicitChatIdProvider"] 98:I[838238,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3h4dxz6j9vrb9.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2ak79vkcuz1ia.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1qvyjk5p58sle.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/296n5x9xr-_1t.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2gyta6jpl0xuw.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2k7q8cwjrh5v9.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/2x0r6v1gm-sbg.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/1nep_-vv8ldmi.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh","/chat-static/_next/static/chunks/0ws07icczx8x9.js?dpl=dpl_DR81h1GYRPjyfohpJrqJPdbbayvh"],"SWRDataProvider"] 9b:[] 9c:[["b_Jkd9amJaVEu",null],["b_fCX7GqeZCag",null],["b_qUZzoTrkubJ",null],["b_7d6nZGEbMEY",null],["b_xsO34U2tE5b",null],["b_sJWSF585OTA",null],["b_rZPjaKOlouA",null],["b_T3XiWvlNkWp",null],["b_68vIjOURnSC",null],["b_1ve06fm8BTO",null],["b_1uOPH9ryKNj",null],["b_TCa5OghcR3R",null],["b_0eF3KWUI3u3",null]] 9d:[["b_Jkd9amJaVEu",{"templateVersionId":null,"templateCanonId":null}],["b_fCX7GqeZCag",{"templateVersionId":null,"templateCanonId":null}],["b_qUZzoTrkubJ",{"templateVersionId":null,"templateCanonId":null}],["b_7d6nZGEbMEY",{"templateVersionId":null,"templateCanonId":null}],["b_xsO34U2tE5b",{"templateVersionId":null,"templateCanonId":null}],["b_sJWSF585OTA",{"templateVersionId":null,"templateCanonId":null}],["b_rZPjaKOlouA",{"templateVersionId":null,"templateCanonId":null}],["b_T3XiWvlNkWp",{"templateVersionId":null,"templateCanonId":null}],["b_68vIjOURnSC",{"templateVersionId":null,"templateCanonId":null}],["b_1ve06fm8BTO",{"templateVersionId":null,"templateCanonId":null}],["b_1uOPH9ryKNj",{"templateVersionId":null,"templateCanonId":null}],["b_TCa5OghcR3R",{"templateVersionId":null,"templateCanonId":null}],["b_0eF3KWUI3u3",{"templateVersionId":null,"templateCanonId":null}]] 9e:[["b_Jkd9amJaVEu","$D2025-11-18T08:16:06.553Z"],["b_fCX7GqeZCag","$D2025-11-18T08:16:52.247Z"],["b_qUZzoTrkubJ","$D2025-11-18T08:17:14.668Z"],["b_7d6nZGEbMEY","$D2025-11-18T08:18:40.677Z"],["b_xsO34U2tE5b","$D2025-11-18T08:19:45.534Z"],["b_sJWSF585OTA","$D2025-11-18T08:20:52.777Z"],["b_rZPjaKOlouA","$D2025-11-18T08:21:29.494Z"],["b_T3XiWvlNkWp","$D2025-11-18T08:25:09.338Z"],["b_68vIjOURnSC","$D2025-11-18T08:25:34.794Z"],["b_1ve06fm8BTO","$D2025-11-18T08:26:04.839Z"],["b_1uOPH9ryKNj","$D2025-11-18T08:26:25.076Z"],["b_TCa5OghcR3R","$D2025-11-18T08:26:46.220Z"],["b_0eF3KWUI3u3","$D2025-11-18T08:29:38.766Z"]] 9f:[["b_Jkd9amJaVEu",false],["b_fCX7GqeZCag",false],["b_qUZzoTrkubJ",false],["b_7d6nZGEbMEY",false],["b_xsO34U2tE5b",false],["b_sJWSF585OTA",false],["b_rZPjaKOlouA",false],["b_T3XiWvlNkWp",false],["b_68vIjOURnSC",false],["b_1ve06fm8BTO",false],["b_1uOPH9ryKNj",false],["b_TCa5OghcR3R",false],["b_0eF3KWUI3u3",false]] a0:[["b_Jkd9amJaVEu","$undefined"],["b_fCX7GqeZCag","$undefined"],["b_qUZzoTrkubJ","$undefined"],["b_7d6nZGEbMEY","$undefined"],["b_xsO34U2tE5b","$undefined"],["b_sJWSF585OTA","$undefined"],["b_rZPjaKOlouA","$undefined"],["b_T3XiWvlNkWp","$undefined"],["b_68vIjOURnSC","$undefined"],["b_1ve06fm8BTO","$undefined"],["b_1uOPH9ryKNj","$undefined"],["b_TCa5OghcR3R","$undefined"],["b_0eF3KWUI3u3",{"git":{"ref":"main","sha":"efb0e47a5231ecd036e1917879ebc1f0a1b1fc6b","type":"github","repoId":0,"repoName":"v0-1-EB5GGpPfKMSPpqeSD1zrnAkm-ny2eA3CL5aK","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"},"deploymentId":"dpl_91BeKkSK26WuZ6cTs525X76uKYUg"}]] a1:[["b_Jkd9amJaVEu",null],["b_fCX7GqeZCag",null],["b_qUZzoTrkubJ",null],["b_7d6nZGEbMEY",null],["b_xsO34U2tE5b",null],["b_sJWSF585OTA",null],["b_rZPjaKOlouA",null],["b_T3XiWvlNkWp",null],["b_68vIjOURnSC",null],["b_1ve06fm8BTO",null],["b_1uOPH9ryKNj",null],["b_TCa5OghcR3R",null],["b_0eF3KWUI3u3",null]] a2:[["b_Jkd9amJaVEu",true],["b_fCX7GqeZCag",true],["b_qUZzoTrkubJ",true],["b_7d6nZGEbMEY",true],["b_xsO34U2tE5b",true],["b_sJWSF585OTA",true],["b_rZPjaKOlouA",true],["b_T3XiWvlNkWp",true],["b_68vIjOURnSC",true],["b_1ve06fm8BTO",true],["b_1uOPH9ryKNj",true],["b_TCa5OghcR3R",true],["b_0eF3KWUI3u3",true]] a3:[["b_Jkd9amJaVEu",true],["b_fCX7GqeZCag",true],["b_qUZzoTrkubJ",true],["b_7d6nZGEbMEY",true],["b_xsO34U2tE5b",true],["b_sJWSF585OTA",true],["b_rZPjaKOlouA",true],["b_T3XiWvlNkWp",true],["b_68vIjOURnSC",true],["b_1ve06fm8BTO",true],["b_1uOPH9ryKNj",true],["b_TCa5OghcR3R",true],["b_0eF3KWUI3u3",true]] a4:[] a5:T5e5,Người dùng đã cung cấp một dự án rất chi tiết: **Tên dự án:** Hệ thống Quản lý Thực tập và Hỗ trợ Tuyển dụng cho Khoa thống kê - tin học **Các tệp đính kèm:** 1. Một tệp văn bản mô tả chi tiết tất cả các luồng màn hình và giao diện 2. Một tệp gợi ý cấu trúc dự án và dữ liệu giả **Yêu cầu chính:** - Tạo ứng dụng ReactJS - Sử dụng Ant Design (AntD) để tạo giao diện - Sử dụng react-router-dom v6 cho routing - Dùng mock data (không cần backend) - Có 4 vai trò: Sinh viên (Student), Doanh nghiệp (Company), Admin (Khoa), Public (Login) - Cấu trúc thư mục cụ thể: src/api, src/assets, src/components, src/context, src/hooks, src/pages, src/routes, src/utils, src/_mock **Bước tiếp theo:** 1. Tôi sẽ tạo một todo list để theo dõi các milestone chính 2. Sử dụng GenerateDesignInspiration để có cảm hứng thiết kế 3. Bắt đầu xây dựng project với các file cơ sở Đây là một dự án có 4 hệ thống riêng biệt (Login, Student, Company, Admin) nên cần TodoManager để theo dõi. Tôi sẽ tập trung vào việc xây dựng cơ sở hạ tầng dự án một cách có hệ thống. Bắt đầu bằng việc lập kế hoạch chi tiết, tạo khung dự án với các thành phần cốt lõi như routes, context và mock data để đảm bảo tính linh hoạt và mở rộng của ứng dụng.a6:T4be,Người dùng muốn tôi: 1. Tiếp tục hoàn thành hệ thống 2. Thêm các màn hình còn thiếu (AppliedJobs, JobDetails cho sinh viên; SearchCVs, AppliedCVs cho doanh nghiệp; ManageStudents, ManageAllJDs, Statistics cho admin) 3. Sau đó hướng dẫn cách cài đặt và chạy web Từ file pasted-text được cung cấp, tôi cần: **Sinh viên:** - AppliedJobs.tsx - Table với sắp xếp và lọc theo trạng thái - JobDetails.tsx - PageHeader + 2 Col (Tabs bên trái, Thông tin công ty bên phải) **Doanh nghiệp:** - SearchCVs.tsx - Bộ lọc bên trái + List CVCard bên phải - AppliedCVs.tsx (hoặc ManageApplications) - Select JD + Table CV với status dropdown **Admin:** - ManageStudents.tsx - Search + Table + Lock button - ManageAllJDs.tsx - Tabs + Table + Switch - Statistics.tsx - 4 card + Line Chart + Pie Chart + Bar Chart + Table Tôi cần: 1. Đọc các file hiện tại để hiểu cấu trúc 2. Thêm các component còn thiếu 3. Cập nhật mock data nếu cần 4. Cập nhật routing nếu cần 5. Cuối cùng là hướng dẫn setup Hãy bắt đầu bằng cách đọc cấu trúc hiện tại và thêm các trang còn thiếu.a7:T2cbf4,[V0_FILE]typescriptreact:file="src/main.tsx" isMerged="true" import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import { AuthProvider } from './context/AuthContext' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( , ) [V0_FILE]typescriptreact:file="src/App.tsx" isMerged="true" import { BrowserRouter as Router } from 'react-router-dom' import AppRoutes from './routes/AppRoutes' import './App.css' function App() { return ( ) } export default App [V0_FILE]typescriptreact:file="src/index.css" isMerged="true" * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } [V0_FILE]typescriptreact:file="src/App.css" isMerged="true" :root { --primary-color: #1890ff; --primary-dark: #0050b3; --secondary-color: #13c2c2; --success-color: #52c41a; --warning-color: #faad14; --error-color: #ff4d4f; --background-light: #f5f5f5; --background-white: #ffffff; --border-color: #d9d9d9; --text-primary: #000000d9; --text-secondary: #00000073; } html[data-theme='dark'] { --primary-color: #1890ff; --background-light: #141414; --background-white: #1f1f1f; --border-color: #434343; --text-primary: #ffffffd9; --text-secondary: #ffffff73; } body { background-color: var(--background-light); color: var(--text-primary); transition: background-color 0.3s, color 0.3s; } [V0_FILE]typescriptreact:file="src/_mock/cvs.ts" isMerged="true" export interface StudentCV { id: string; name: string; email: string; phone: string; gpa: number; school: string; major: string; skills: string[]; projects: Array<{ name: string; description: string; role: string; skills: string[]; }>; experience: string; graduationYear: number; submittedDate: string; } export const mockCVs: StudentCV[] = [ { id: '101', name: 'Nguyễn Văn A', email: 'nguyenvan.a@student.edu.vn', phone: '0912345678', gpa: 3.8, school: 'Đại học Khoa học Tự nhiên', major: 'Công nghệ Thông tin', skills: ['React', 'Node.js', 'MongoDB', 'Python'], projects: [ { name: 'E-commerce Platform', description: 'Xây dựng website bán hàng online', role: 'Fullstack Developer', skills: ['React', 'Node.js', 'MongoDB'] } ], experience: 'Thực tập tại Tech Company 6 tháng', graduationYear: 2024, submittedDate: '2024-01-10' } ]; export const mockCompanies = [ { id: '1', name: 'Tech Solutions Corp', email: 'hr@techsolutions.vn', phone: '0243 123 4567', taxId: '0123456789', address: 'Tòa nhà CBD, Hà Nội', description: 'Công ty chuyên về giải pháp công nghệ thông tin', status: 'approved', registeredDate: '2024-01-01' }, { id: '2', name: 'Cloud Systems Inc', email: 'contact@cloudsys.vn', phone: '0834 567 8901', taxId: '0987654321', address: '456 Lê Lợi, TP.HCM', description: 'Chuyên cung cấp dịch vụ cloud computing', status: 'pending', registeredDate: '2024-01-15' } ]; [V0_FILE]typescriptreact:file="src/types/index.ts" isMerged="true" export type UserRole = 'student' | 'company' | 'admin' | 'public'; export interface User { id: string; email: string; name: string; role: UserRole; avatar?: string; } export interface AuthContextType { user: User | null; loading: boolean; login: (email: string, password: string) => Promise; logout: () => void; isAuthenticated: boolean; } [V0_FILE]typescriptreact:file="src/routes/AppRoutes.tsx" isEdit="true" isMerged="true" import { Routes, Route, Navigate } from 'react-router-dom' import ProtectedRoute from './ProtectedRoute' // Pages import LoginPage from '../pages/auth/LoginPage' import StudentDashboard from '../pages/student/StudentDashboard' import MyProfile from '../pages/student/MyProfile' import JobSearch from '../pages/student/JobSearch' import JobDetails from '../pages/student/JobDetails' import AppliedJobs from '../pages/student/AppliedJobs' import CompanyDashboard from '../pages/company/CompanyDashboard' import PostJob from '../pages/company/PostJob' import ManageJDs from '../pages/company/ManageJDs' import SearchCVs from '../pages/company/SearchCVs' import ManageApplications from '../pages/company/ManageApplications' import AdminDashboard from '../pages/admin/AdminDashboard' import ManageCompanies from '../pages/admin/ManageCompanies' import ManageStudents from '../pages/admin/ManageStudents' import ManageJobs from '../pages/admin/ManageJobs' import Statistics from '../pages/admin/Statistics' export default function AppRoutes() { return ( {/* Public Routes */} } /> } /> {/* Student Routes */} } />} /> } />} /> } />} /> } />} /> } />} /> {/* Company Routes */} } />} /> } />} /> } />} /> } />} /> } />} /> {/* Admin Routes */} } />} /> } />} /> } />} /> } />} /> } />} /> {/* Fallback */} } /> ) } [V0_FILE]typescriptreact:file="src/routes/ProtectedRoute.tsx" isMerged="true" import { Navigate } from 'react-router-dom' import { useAuth } from '../hooks/useAuth' import { UserRole } from '../types' interface ProtectedRouteProps { role: UserRole; element: React.ReactElement; } export default function ProtectedRoute({ role, element }: ProtectedRouteProps) { const { user, loading } = useAuth() if (loading) { return

} if (!user) { return } if (user.role !== role) { return } return element } [V0_FILE]typescriptreact:file="src/context/AuthContext.tsx" isMerged="true" import { createContext, useState, useEffect, ReactNode } from 'react' import { User, AuthContextType } from '../types' export const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) // Check if user is already logged in (from localStorage) useEffect(() => { const savedUser = localStorage.getItem('user') if (savedUser) { try { setUser(JSON.parse(savedUser)) } catch (error) { console.error('Error parsing saved user:', error) } } setLoading(false) }, []) const login = async (email: string, password: string) => { // Mock login logic - replace with actual API call later let role: User['role'] = 'public' let name = 'User' if (email === 'student') { role = 'student' name = 'Sinh viên' } else if (email === 'company') { role = 'company' name = 'Công ty' } else if (email === 'admin') { role = 'admin' name = 'Quản trị viên' } const newUser: User = { id: Math.random().toString(36).substr(2, 9), email, name, role, } setUser(newUser) localStorage.setItem('user', JSON.stringify(newUser)) } const logout = () => { setUser(null) localStorage.removeItem('user') } const value: AuthContextType = { user, loading, login, logout, isAuthenticated: !!user, } return {children} } [V0_FILE]typescriptreact:file="src/hooks/useAuth.ts" isMerged="true" import { useContext } from 'react' import { AuthContext } from '../context/AuthContext' import { AuthContextType } from '../types' export function useAuth(): AuthContextType { const context = useContext(AuthContext) if (context === undefined) { throw new Error('useAuth must be used within an AuthProvider') } return context } [V0_FILE]typescriptreact:file="src/utils/formatDate.ts" isMerged="true" export function formatDate(date: string | Date): string { const d = typeof date === 'string' ? new Date(date) : date const day = String(d.getDate()).padStart(2, '0') const month = String(d.getMonth() + 1).padStart(2, '0') const year = d.getFullYear() return `${day}/${month}/${year}` } export function formatCurrency(amount: number): string { return new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND', }).format(amount) } [V0_FILE]typescriptreact:file="src/utils/validators.ts" isMerged="true" export function isValidEmail(email: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } export function isValidPhone(phone: string): boolean { const phoneRegex = /^0\d{9}$/ return phoneRegex.test(phone) } export function isValidTaxId(taxId: string): boolean { return taxId.length === 10 && /^\d+$/.test(taxId) } [V0_FILE]typescriptreact:file="src/components/common/Spinner.tsx" isMerged="true" export default function Spinner() { return (

) } [V0_FILE]typescriptreact:file="src/components/layout/MainLayout.tsx" isMerged="true" import { useState } from 'react' import { useNavigate, useLocation } from 'react-router-dom' import { useAuth } from '../../hooks/useAuth' import { DashboardOutlined, ProfileOutlined, SearchOutlined, CheckCircleOutlined, PlusCircleOutlined, AppstoreOutlined, SolutionOutlined, UsergroupAddOutlined, AuditOutlined, TeamOutlined, NotificationOutlined, BarChartOutlined, LogoutOutlined, MenuOutlined, CloseOutlined, } from '@ant-design/icons' import './MainLayout.css' interface MainLayoutProps { children: React.ReactNode; } export default function MainLayout({ children }: MainLayoutProps) { const { user, logout } = useAuth() const navigate = useNavigate() const location = useLocation() const [sidebarOpen, setSidebarOpen] = useState(true) const getMenuItems = () => { const baseItems = [ { label: 'Dashboard', icon: DashboardOutlined, path: `/${user?.role}/dashboard` }, ] if (user?.role === 'student') { return [ ...baseItems, { label: 'CV & Hồ sơ', icon: ProfileOutlined, path: '/student/profile' }, { label: 'Tìm Kiếm Việc Làm', icon: SearchOutlined, path: '/student/jobs' }, { label: 'Việc Làm Đã Nộp', icon: CheckCircleOutlined, path: '/student/applied' }, ] } else if (user?.role === 'company') { return [ ...baseItems, { label: 'Đăng Tin Tuyển Dụng', icon: PlusCircleOutlined, path: '/company/post-job' }, { label: 'Quản Lý Tin Đăng', icon: AppstoreOutlined, path: '/company/manage-jobs' }, { label: 'Tìm Kiếm CV', icon: SolutionOutlined, path: '/company/search-cv' }, { label: 'Quản Lý Ứng Viên', icon: UsergroupAddOutlined, path: '/company/applications' }, ] } else if (user?.role === 'admin') { return [ ...baseItems, { label: 'Duyệt Doanh Nghiệp', icon: AuditOutlined, path: '/admin/companies' }, { label: 'Quản Lý Sinh Viên', icon: TeamOutlined, path: '/admin/students' }, { label: 'Quản Lý Tin Đăng', icon: NotificationOutlined, path: '/admin/jobs' }, { label: 'Thống Kê', icon: BarChartOutlined, path: '/admin/statistics' }, ] } return baseItems } const menuItems = getMenuItems() const handleLogout = () => { logout() navigate('/login') } return (

Hệ thống Cầu nối Việc làm

{user?.name}

{children}

) } [V0_FILE]css:file="src/components/layout/MainLayout.css" isMerged="true" .main-layout { display: flex; flex-direction: column; min-height: 100vh; background-color: var(--background-light); } .main-layout-header { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 24px; background-color: var(--background-white); border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .header-left { display: flex; align-items: center; gap: 16px; } .sidebar-toggle { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-primary); } .header-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); } .header-right { display: flex; align-items: center; gap: 16px; } .user-info { font-size: 14px; color: var(--text-primary); } .logout-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-primary); transition: color 0.3s; } .logout-btn:hover { color: var(--error-color); } .main-layout-container { display: flex; flex: 1; } .main-layout-sidebar { width: 250px; background-color: var(--background-white); border-right: 1px solid var(--border-color); overflow-y: auto; transition: transform 0.3s; } .main-layout-sidebar.closed { display: none; } .sidebar-menu { display: flex; flex-direction: column; gap: 0; padding: 16px 0; list-style: none; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; transition: all 0.3s; width: 100%; text-align: left; } .menu-item:hover { background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color); } .menu-item.active { background-color: rgba(24, 144, 255, 0.15); color: var(--primary-color); border-left: 3px solid var(--primary-color); padding-left: 17px; } .menu-icon { font-size: 16px; } .menu-label { font-weight: 500; } .main-layout-content { flex: 1; padding: 24px; overflow-y: auto; } @media (max-width: 768px) { .sidebar-toggle { display: block; } .main-layout-sidebar { position: absolute; left: 0; top: 64px; height: calc(100vh - 64px); z-index: 999; transform: translateX(-100%); } .main-layout-sidebar.open { transform: translateX(0); } .main-layout-content { padding: 16px; } } [V0_FILE]typescriptreact:file="vite.config.ts" isMerged="true" import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], server: { port: 3000, }, }) [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "target": "ES2020", "useDefineForModule": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "resolveJsonModule": true, "moduleResolution": "bundler" }, "include": ["src"], "references": [{ "path": "./tsconfig.app.json" }] } [V0_FILE]png:file="public/interconnected-tech.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/interconnected-tech-c3J1zzIAaOYEwY1TuaEmohaRWJ4F9L.png" isMerged="true" [V0_FILE]png:file="public/single-cumulus-cloud.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/single-cumulus-cloud-DiSOAuvuJd35i0723Yx3kaLDXYeqlw.png" isMerged="true" [V0_FILE]png:file="public/modern-smartphone-display.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-smartphone-display-ZNlQYpE9h2nG24rFaOP3JdmARvd8YK.png" isMerged="true" [V0_FILE]png:file="public/abstract-ai-network.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-ai-network-AUVznTZ8jNZf0rd8CgPxKIoj2jxrzK.png" isMerged="true" [V0_FILE]png:file="public/fullstack-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fullstack-concept-Q1XYU4wfI8UJTnYy5Wal1bD66ZoKFE.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "react-router-dom": "7.9.6", "@ant-design/icons": "6.1.0", "vite": "7.2.2", "@vitejs/plugin-react": "5.1.1", "axios": "1.13.2", "antd": "5.29.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="src/pages/auth/LoginPage.tsx" isMerged="true" import { useState } from 'react' import { useNavigate } from 'react-router-dom' import { useAuth } from '../../hooks/useAuth' import { UserOutlined, LockOutlined } from '@ant-design/icons' import './LoginPage.css' export default function LoginPage() { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [error, setError] = useState('') const [loading, setLoading] = useState(false) const { login } = useAuth() const navigate = useNavigate() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setError('') if (!email.trim() || !password.trim()) { setError('Vui lòng nhập email và mật khẩu') return } setLoading(true) try { await login(email, password) // Redirect based on role (mock) if (email === 'student') { navigate('/student/dashboard') } else if (email === 'company') { navigate('/company/dashboard') } else if (email === 'admin') { navigate('/admin/dashboard') } } catch (err) { setError('Đăng nhập thất bại') console.error(err) } finally { setLoading(false) } } return (

Hệ thống Cầu nối Việc làm

Đăng nhập để tiếp tục

Chưa có tài khoản?

Đăng ký Doanh nghiệp | Đăng ký Sinh viên

Demo: Nhập "student", "company" hoặc "admin" để kiểm tra

) } [V0_FILE]css:file="src/pages/auth/LoginPage.css" isMerged="true" .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; } .login-container { width: 100%; max-width: 400px; } .login-card { background: var(--background-white); border-radius: 8px; padding: 40px 32px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } .login-logo { text-align: center; margin-bottom: 24px; } .login-logo img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; } .login-title { text-align: center; font-size: 24px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px 0; } .login-subtitle { text-align: center; font-size: 14px; color: var(--text-secondary); margin: 0 0 24px 0; } .login-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-size: 14px; font-weight: 500; color: var(--text-primary); } .input-wrapper { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--background-white); transition: all 0.3s; } .input-wrapper:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1); } .input-icon { font-size: 16px; color: var(--text-secondary); } .input-field { flex: 1; border: none; outline: none; font-size: 14px; background: none; color: var(--text-primary); } .input-field::placeholder { color: var(--text-secondary); } .form-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-secondary); } .checkbox input { cursor: pointer; } .forgot-password { color: var(--primary-color); text-decoration: none; transition: opacity 0.3s; } .forgot-password:hover { opacity: 0.8; } .login-button { padding: 10px 16px; font-size: 14px; font-weight: 600; color: white; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s; min-height: 40px; } .login-button:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3); } .login-button:disabled { opacity: 0.6; cursor: not-allowed; } .login-footer { text-align: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 14px; color: var(--text-secondary); } .signup-links { margin-top: 8px; } .signup-link { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: opacity 0.3s; } .signup-link:hover { opacity: 0.8; } .demo-info { text-align: center; margin-top: 16px; padding: 12px; background-color: rgba(24, 144, 255, 0.1); border-radius: 4px; font-size: 12px; color: var(--primary-color); } @media (max-width: 480px) { .login-card { padding: 32px 20px; } .login-title { font-size: 20px; } .login-logo img { width: 60px; height: 60px; } } [V0_FILE]typescriptreact:file="src/api/apiConfig.ts" isMerged="true" import axios, { AxiosInstance, AxiosConfig } from 'axios' const apiConfig: AxiosConfig = { baseURL: 'http://localhost:8000/api', timeout: 10000, headers: { 'Content-Type': 'application/json', }, } const apiClient: AxiosInstance = axios.create(apiConfig) // Add token to requests if available apiClient.interceptors.request.use((config) => { const token = localStorage.getItem('authToken') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // Handle response errors apiClient.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { localStorage.removeItem('authToken') window.location.href = '/login' } return Promise.reject(error) } ) export default apiClient [V0_FILE]typescriptreact:file="src/api/authApi.ts" isMerged="true" import apiClient from './apiConfig' import { User } from '../types' export const authApi = { login: (email: string, password: string) => apiClient.post<{ user: User; token: string }>('/auth/login', { email, password }), register: (data: Record) => apiClient.post<{ user: User; token: string }>('/auth/register', data), logout: () => apiClient.post('/auth/logout'), getCurrentUser: () => apiClient.get('/auth/me'), updateProfile: (data: Record) => apiClient.put('/auth/profile', data), } [V0_FILE]typescriptreact:file="src/api/jobApi.ts" isMerged="true" import apiClient from './apiConfig' import { Job } from '../_mock/jobs' export const jobApi = { getJobs: (params?: Record) => apiClient.get('/jobs', { params }), getJobById: (id: string) => apiClient.get(`/jobs/${id}`), postJob: (data: Record) => apiClient.post('/jobs', data), updateJob: (id: string, data: Record) => apiClient.put(`/jobs/${id}`, data), deleteJob: (id: string) => apiClient.delete(`/jobs/${id}`), applyJob: (jobId: string) => apiClient.post(`/jobs/${jobId}/apply`), getApplications: (params?: Record) => apiClient.get('/applications', { params }), } [V0_FILE]typescriptreact:file="src/api/cvApi.ts" isMerged="true" import apiClient from './apiConfig' import { StudentCV } from '../_mock/cvs' export const cvApi = { getCVs: (params?: Record) => apiClient.get('/cvs', { params }), getCVById: (id: string) => apiClient.get(`/cvs/${id}`), uploadCV: (file: File) => { const formData = new FormData() formData.append('file', file) return apiClient.post('/cvs/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' }, }) }, updateProfile: (data: Partial) => apiClient.put('/cvs/profile', data), createProfile: (data: StudentCV) => apiClient.post('/cvs', data), } [V0_FILE]typescriptreact:file="src/pages/student/StudentDashboard.tsx" isMerged="true" import { useState, useMemo } from 'react' import MainLayout from '../../components/layout/MainLayout' import { mockJobs } from '../../_mock/jobs' import { BellOutlined, FileTextOutlined, EyeOutlined, HeartOutlined } from '@ant-design/icons' import './StudentDashboard.css' export default function StudentDashboard() { const [likedJobs, setLikedJobs] = useState>(new Set()) const stats = useMemo(() => [ { label: 'Việc làm đã nộp', value: '5', icon: FileTextOutlined, color: 'blue' }, { label: 'Việc làm phù hợp', value: '12', icon: HeartOutlined, color: 'red' }, { label: 'Lượt xem hồ sơ', value: '8', icon: EyeOutlined, color: 'green' }, ], []) const recentJobs = mockJobs.slice(0, 5) return (

Chào mừng, Sinh viên!

{/* Alert */}

Hồ sơ của bạn đã hoàn thành 80%. Hoàn thành ngay!

{/* Statistics Cards */}

{stats.map((stat, index) => { const IconComponent = stat.icon return (

{stat.value}

{stat.label}

) })}

{/* Recent Jobs */}

Gợi ý Việc làm Mới nhất

Xem tất cả

{recentJobs.map((job) => (

{job.title}

{job.company}

{job.salary} {job.location} {job.type}

{job.skills.slice(0, 3).map((skill) => ( {skill} ))}

))}

) } [V0_FILE]css:file="src/pages/student/StudentDashboard.css" isMerged="true" .student-dashboard { display: flex; flex-direction: column; gap: 24px; } .page-title { font-size: 28px; font-weight: 600; color: var(--text-primary); margin: 0; } .alert-info { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background-color: rgba(24, 144, 255, 0.1); border-left: 4px solid var(--primary-color); border-radius: 4px; } .alert-icon { font-size: 16px; color: var(--primary-color); flex-shrink: 0; margin-top: 2px; } .alert-content { display: flex; align-items: center; gap: 8px; flex: 1; } .alert-text { font-size: 14px; color: var(--text-secondary); } .alert-link { color: var(--primary-color); text-decoration: none; font-weight: 600; white-space: nowrap; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .stat-card { display: flex; align-items: center; gap: 16px; padding: 16px; background-color: var(--background-white); border-radius: 8px; border-left: 4px solid; } .stat-card.stat-blue { border-left-color: var(--primary-color); } .stat-card.stat-red { border-left-color: var(--error-color); } .stat-card.stat-green { border-left-color: var(--success-color); } .stat-icon { font-size: 28px; color: var(--primary-color); min-width: 40px; } .stat-card.stat-red .stat-icon { color: var(--error-color); } .stat-card.stat-green .stat-icon { color: var(--success-color); } .stat-info { display: flex; flex-direction: column; } .stat-value { font-size: 20px; font-weight: 700; color: var(--text-primary); } .stat-label { font-size: 12px; color: var(--text-secondary); } .recent-jobs-card { background-color: var(--background-white); border-radius: 8px; padding: 24px; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } .card-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; } .view-all-link { color: var(--primary-color); text-decoration: none; font-size: 14px; font-weight: 500; } .jobs-list { display: flex; flex-direction: column; gap: 16px; } .job-item { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.3s; } .job-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .job-header { display: flex; align-items: flex-start; gap: 12px; } .job-logo { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .job-main-info { flex: 1; } .job-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px 0; } .job-company { font-size: 13px; color: var(--text-secondary); margin: 0; } .like-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-secondary); transition: all 0.3s; padding: 4px; } .like-btn:hover { color: var(--error-color); } .like-btn.liked { color: var(--error-color); } .job-details { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; } .job-salary { color: var(--success-color); font-weight: 600; } .job-location { color: var(--text-secondary); } .job-type { padding: 2px 8px; background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color); border-radius: 2px; font-size: 12px; font-weight: 500; } .job-type.remote { background-color: rgba(19, 194, 194, 0.1); color: var(--secondary-color); } .job-type.part-time { background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color); } .job-skills { display: flex; gap: 8px; flex-wrap: wrap; } .skill-tag { padding: 4px 10px; background-color: var(--background-light); border: 1px solid var(--border-color); border-radius: 3px; font-size: 12px; color: var(--text-secondary); } @media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } .job-header { flex-wrap: wrap; } } [V0_FILE]typescriptreact:file="src/pages/student/MyProfile.tsx" isMerged="true" import { useState } from 'react' import MainLayout from '../../components/layout/MainLayout' import { PlusOutlined, DeleteOutlined, SaveOutlined } from '@ant-design/icons' import './MyProfile.css' export default function MyProfile() { const [activeTab, setActiveTab] = useState<'online' | 'upload'>('online') const [activeStep, setActiveStep] = useState(1) const [profileData, setProfileData] = useState({ fullName: 'Nguyễn Văn A', dateOfBirth: '2002-05-15', gender: 'male', email: 'nguyenvan.a@student.edu.vn', phone: '0912345678', objective: 'Tìm kiếm vị trí Frontend Developer', school: 'Đại học Khoa học Tự nhiên', major: 'Công nghệ Thông tin', gpa: '3.8', startYear: '2020', endYear: '2024', skills: ['React', 'TypeScript', 'Node.js', 'MongoDB'], projects: [ { name: 'E-commerce Platform', description: 'Website bán hàng online', role: 'Fullstack Developer', projectSkills: 'React, Node.js, MongoDB', } ], }) const [uploadedFile, setUploadedFile] = useState(null) const steps = [ { id: 1, label: 'Thông tin cá nhân' }, { id: 2, label: 'Học vấn' }, { id: 3, label: 'Kỹ năng' }, { id: 4, label: 'Dự án & Kinh nghiệm' }, ] const handleFileUpload = (e: React.ChangeEvent) => { if (e.target.files?.[0]) { setUploadedFile(e.target.files[0]) } } const handleAddProject = () => { setProfileData({ ...profileData, projects: [ ...profileData.projects, { name: '', description: '', role: '', projectSkills: '' } ] }) } const handleRemoveProject = (index: number) => { setProfileData({ ...profileData, projects: profileData.projects.filter((_, i) => i !== index) }) } const handleSave = () => { console.log('Saving profile:', profileData) alert('Hồ sơ đã được lưu thành công!') } return (

CV & Hồ sơ

{activeTab === 'online' ? ( // Online CV Builder

{steps.map((step, idx) => (

= step.id ? 'active' : ''} ${activeStep === step.id ? 'current' : ''}`} onClick={() => setActiveStep(step.id)} >

{step.id}

{step.label}

))}

{/* Step 1: Personal Info */} {activeStep === 1 && (

Thông tin cá nhân

Họ tên * setProfileData({ ...profileData, fullName: e.target.value })} placeholder="Nhập họ tên" />

Ngày sinh setProfileData({ ...profileData, dateOfBirth: e.target.value })} />

Giới tính

Email setProfileData({ ...profileData, email: e.target.value })} placeholder="Email" />

Số điện thoại setProfileData({ ...profileData, phone: e.target.value })} placeholder="Số điện thoại" />

Mục tiêu nghề nghiệp

setProfileData({ ...profileData, objective: e.target.value })}
                          placeholder="Viết về mục tiêu nghề nghiệp của bạn"
                        />
                      </div>
                    </div>
                  </div>
                )}

{/* Step 2: Education */}
                {activeStep === 2 && (
                  <div className="step-content">
                    <h3 className="step-title">Học vấn</h3>
                    <div className="form-grid">
                      <div className="form-group">
                        <label>Trường học *</label>
                        <input
                          type="text"
                          value={profileData.school}
                          onChange={(e) => setProfileData({ ...profileData, school: e.target.value })}
                          placeholder="Tên trường"
                        />
                      </div>
                      <div className="form-group">
                        <label>Chuyên ngành *</label>
                        <input
                          type="text"
                          value={profileData.major}
                          onChange={(e) => setProfileData({ ...profileData, major: e.target.value })}
                          placeholder="Chuyên ngành"
                        />
                      </div>
                      <div className="form-group">
                        <label>GPA</label>
                        <input
                          type="number"
                          step="0.1"
                          max="4"
                          value={profileData.gpa}
                          onChange={(e) => setProfileData({ ...profileData, gpa: e.target.value })}
                          placeholder="GPA"
                        />
                      </div>
                      <div className="form-group">
                        <label>Năm bắt đầu</label>
                        <input
                          type="number"
                          value={profileData.startYear}
                          onChange={(e) => setProfileData({ ...profileData, startYear: e.target.value })}
                        />
                      </div>
                      <div className="form-group">
                        <label>Năm kết thúc</label>
                        <input
                          type="number"
                          value={profileData.endYear}
                          onChange={(e) => setProfileData({ ...profileData, endYear: e.target.value })}
                        />
                      </div>
                    </div>
                  </div>
                )}

{/* Step 3: Skills */}
                {activeStep === 3 && (
                  <div className="step-content">
                    <h3 className="step-title">Kỹ năng</h3>
                    <div className="form-group full-width">
                      <label>Thêm kỹ năng</label>
                      <div className="skills-input">
                        <input
                          type="text"
                          placeholder="React, Node.js, Python... (Nhấn Enter để thêm)"
                          onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                              const value = e.currentTarget.value.trim()
                              if (value && !profileData.skills.includes(value)) {
                                setProfileData({
                                  ...profileData,
                                  skills: [...profileData.skills, value]
                                })
                                e.currentTarget.value = ''
                              }
                            }
                          }}
                        />
                      </div>
                      <div className="skills-list">
                        {profileData.skills.map((skill, idx) => (
                          <div key={idx} className="skill-item">
                            <span>{skill}</span>
                            <button
                              onClick={() => setProfileData({
                                ...profileData,
                                skills: profileData.skills.filter((_, i) => i !== idx)
                              })}
                              className="skill-remove"
                            >
                              ×
                            </button>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

{/* Step 4: Projects & Experience */}
                {activeStep === 4 && (
                  <div className="step-content">
                    <h3 className="step-title">Dự án & Kinh nghiệm</h3>
                    <div className="projects-section">
                      {profileData.projects.map((project, idx) => (
                        <div key={idx} className="project-form">
                          <div className="project-header">
                            <h4>Dự án {idx + 1}</h4>
                            <button
                              className="delete-project"
                              onClick={() => handleRemoveProject(idx)}
                            >
                              <DeleteOutlined />
                            </button>
                          </div>
                          <div className="form-grid">
                            <div className="form-group full-width">
                              <label>Tên dự án</label>
                              <input
                                type="text"
                                value={project.name}
                                onChange={(e) => {
                                  const newProjects = [...profileData.projects]
                                  newProjects[idx].name = e.target.value
                                  setProfileData({ ...profileData, projects: newProjects })
                                }}
                                placeholder="Tên dự án"
                              />
                            </div>
                            <div className="form-group full-width">
                              <label>Mô tả</label>
                              <textarea
                                rows={3}
                                value={project.description}
                                onChange={(e) => {
                                  const newProjects = [...profileData.projects]
                                  newProjects[idx].description = e.target.value
                                  setProfileData({ ...profileData, projects: newProjects })
                                }}
                                placeholder="Mô tả dự án"
                              />
                            </div>
                            <div className="form-group">
                              <label>Vai trò</label>
                              <input
                                type="text"
                                value={project.role}
                                onChange={(e) => {
                                  const newProjects = [...profileData.projects]
                                  newProjects[idx].role = e.target.value
                                  setProfileData({ ...profileData, projects: newProjects })
                                }}
                                placeholder="Vai trò"
                              />
                            </div>
                            <div className="form-group">
                              <label>Kỹ năng sử dụng</label>
                              <input
                                type="text"
                                value={project.projectSkills}
                                onChange={(e) => {
                                  const newProjects = [...profileData.projects]
                                  newProjects[idx].projectSkills = e.target.value
                                  setProfileData({ ...profileData, projects: newProjects })
                                }}
                                placeholder="React, Node.js..."
                              />
                            </div>
                          </div>
                        </div>
                      ))}
                      <button className="add-project-btn" onClick={handleAddProject}>
                        <PlusOutlined /> Thêm dự án
                      </button>
                    </div>
                  </div>
                )}

<div className="step-actions">
                  <button
                    className="btn-secondary"
                    onClick={() => setActiveStep(Math.max(1, activeStep - 1))}
                    disabled={activeStep === 1}
                  >
                    Quay lại
                  </button>
                  {activeStep < 4 ? (
                    <button className="btn-primary" onClick={() => setActiveStep(activeStep + 1)}>
                      Tiếp tục
                    </button>
                  ) : (
                    <button className="btn-primary" onClick={handleSave}>
                      <SaveOutlined /> Hoàn tất & Công khai
                    </button>
                  )}
                </div>
              </div>
            ) : (
              // File Upload
              <div className="upload-cv">
                <div className="upload-area">
                  <input
                    type="file"
                    id="file-input"
                    accept=".pdf,.docx,.doc"
                    onChange={handleFileUpload}
                    hidden
                  />
                  <label htmlFor="file-input" className="upload-label">
                    <div className="upload-icon">📄</div>
                    <p className="upload-text">Kéo thả file hoặc bấm để chọn</p>
                    <p className="upload-hint">Hỗ trợ: PDF, DOCX, DOC (Tối đa 10MB)</p>
                  </label>
                </div>

{uploadedFile && (
                  <div className="uploaded-file">
                    <h4>File đã tải lên:</h4>
                    <div className="file-info">
                      <span className="file-name">{uploadedFile.name}</span>
                      <button
                        className="delete-file"
                        onClick={() => setUploadedFile(null)}
                      >
                        Xóa
                      </button>
                    </div>
                  </div>
                )}

<div className="upload-actions">
                  <button className="btn-secondary">Hủy</button>
                  <button className="btn-primary" disabled={!uploadedFile}>
                    Lưu CV
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/student/MyProfile.css" isMerged="true"
.my-profile {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.tabs-container {
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.tab {
  flex: 1;
  padding: 16px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.tab-content {
  padding: 24px;
}

/* Online CV */
.steps-container {
  margin-bottom: 24px;
}

.steps {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: fit-content;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.step.active {
  opacity: 1;
}

.step-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--border-color);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
}

.step.active .step-number {
  background-color: var(--primary-color);
  color: white;
}

.step.current .step-number {
  background-color: var(--primary-color);
  color: white;
  box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.1);
}

.step-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.step.active .step-label {
  color: var(--text-primary);
  font-weight: 500;
}

.step-content {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 20px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--background-white);
  color: var(--text-primary);
  transition: border-color 0.3s;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.skills-input {
  display: flex;
  gap: 8px;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.skill-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: rgba(24, 144, 255, 0.1);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  font-size: 13px;
  color: var(--primary-color);
}

.skill-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}

.projects-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-form {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.project-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.delete-project {
  background: none;
  border: none;
  color: var(--error-color);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}

.add-project-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px dashed var(--border-color);
  border-radius: 4px;
  background: none;
  color: var(--primary-color);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
  width: 100%;
  justify-content: center;
}

.add-project-btn:hover {
  border-color: var(--primary-color);
  background-color: rgba(24, 144, 255, 0.05);
}

.step-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: var(--background-light);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--border-color);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* File Upload */
.upload-cv {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.upload-area {
  padding: 40px;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: var(--primary-color);
  background-color: rgba(24, 144, 255, 0.05);
}

.upload-label {
  display: block;
  cursor: pointer;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.upload-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.upload-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.uploaded-file {
  padding: 16px;
  background-color: var(--background-light);
  border-radius: 6px;
}

.uploaded-file h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.file-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background-color: var(--background-white);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.file-name {
  font-size: 14px;
  color: var(--text-primary);
}

.delete-file {
  padding: 4px 12px;
  background-color: var(--error-color);
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.delete-file:hover {
  opacity: 0.8;
}

.upload-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

.upload-area {
    padding: 24px;
  }
}
[V0_FILE]typescriptreact:file="src/pages/student/JobSearch.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { useState, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import MainLayout from '../../components/layout/MainLayout'
import { mockJobs } from '../../_mock/jobs'
import { SearchOutlined, FilterOutlined, ClearOutlined } from '@ant-design/icons'
import './JobSearch.css'

export default function JobSearch() {
  const [searchKeyword, setSearchKeyword] = useState('')
  const [filterIndustry, setFilterIndustry] = useState('')
  const [filterLocation, setFilterLocation] = useState('')
  const [filterType, setFilterType] = useState<string[]>([])
  const navigate = useNavigate()

const filteredJobs = useMemo(() => {
    return mockJobs.filter(job => {
      const matchKeyword = job.title.toLowerCase().includes(searchKeyword.toLowerCase()) ||
                          job.company.toLowerCase().includes(searchKeyword.toLowerCase())
      const matchIndustry = !filterIndustry || job.industry === filterIndustry
      const matchLocation = !filterLocation || job.location === filterLocation
      const matchType = filterType.length === 0 || filterType.includes(job.type)
      return matchKeyword && matchIndustry && matchLocation && matchType
    })
  }, [searchKeyword, filterIndustry, filterLocation, filterType])

const handleClearFilters = () => {
    setSearchKeyword('')
    setFilterIndustry('')
    setFilterLocation('')
    setFilterType([])
  }

const handleTypeChange = (type: string) => {
    setFilterType(prev =>
      prev.includes(type)
        ? prev.filter(t => t !== type)
        : [...prev, type]
    )
  }

return (
    <MainLayout>
      <div className="job-search">
        <h1 className="page-title">Tìm Kiếm Việc Làm</h1>

<div className="search-container">
          {/* Left Sidebar - Filters */}
          <div className="filters-sidebar">
            <div className="filters-card">
              <h3 className="filters-title">
                <FilterOutlined /> Bộ Lọc
              </h3>

{/* Search */}
              <div className="filter-group">
                <label>Tìm kiếm</label>
                <div className="search-input">
                  <SearchOutlined />
                  <input
                    type="text"
                    placeholder="Từ khóa..."
                    value={searchKeyword}
                    onChange={(e) => setSearchKeyword(e.target.value)}
                  />
                </div>
              </div>

{/* Industry */}
              <div className="filter-group">
                <label>Ngành nghề</label>
                <select
                  value={filterIndustry}
                  onChange={(e) => setFilterIndustry(e.target.value)}
                >
                  <option value="">Tất cả</option>
                  <option value="Web">Web</option>
                  <option value="AI">AI/ML</option>
                  <option value="Mobile">Mobile</option>
                </select>
              </div>

{/* Location */}
              <div className="filter-group">
                <label>Địa điểm</label>
                <select
                  value={filterLocation}
                  onChange={(e) => setFilterLocation(e.target.value)}
                >
                  <option value="">Tất cả</option>
                  <option value="Hà Nội">Hà Nội</option>
                  <option value="TP.HCM">TP.HCM</option>
                  <option value="Đà Nẵng">Đà Nẵng</option>
                  <option value="Remote">Remote</option>
                </select>
              </div>

{/* Job Type */}
              <div className="filter-group">
                <label>Loại hình</label>
                <div className="checkbox-list">
                  {['Full-time', 'Part-time', 'Remote'].map(type => (
                    <label key={type} className="checkbox-label">
                      <input
                        type="checkbox"
                        checked={filterType.includes(type)}
                        onChange={() => handleTypeChange(type)}
                      />
                      <span>{type}</span>
                    </label>
                  ))}
                </div>
              </div>

{/* Right Content - Search Results */}
          <div className="search-results">
            <div className="results-header">
              <h2>Tìm thấy {filteredJobs.length} kết quả</h2>
              <select defaultValue="newest" className="sort-select">
                <option value="newest">Mới nhất</option>
                <option value="oldest">Cũ nhất</option>
                <option value="salary-high">Lương cao nhất</option>
                <option value="salary-low">Lương thấp nhất</option>
              </select>
            </div>

{filteredJobs.length > 0 ? (
              <div className="jobs-grid">
                {filteredJobs.map(job => (
                  <div key={job.id} className="job-card">
                    <div className="job-card-header">
                      <img src={job.logo || "/placeholder.svg"} alt={job.company} className="job-card-logo" />
                      <div className="job-card-main">
                        <h3 className="job-card-title">{job.title}</h3>
                        <p className="job-card-company">{job.company}</p>
                      </div>
                    </div>
                    <div className="job-card-details">
                      <span className="detail-item">
                        <span className="label">Lương:</span>
                        <span className="value salary">{job.salary}</span>
                      </span>
                      <span className="detail-item">
                        <span className="label">Địa điểm:</span>
                        <span className="value">{job.location}</span>
                      </span>
                      <span className="detail-item">
                        <span className="label">Loại:</span>
                        <span className={`value type ${job.type.toLowerCase()}`}>{job.type}</span>
                      </span>
                    </div>
                    <p className="job-description">{job.description}</p>
                    <div className="job-skills">
                      {job.skills.map(skill => (
                        <span key={skill} className="skill-badge">{skill}</span>
                      ))}
                    </div>
                    <div className="job-card-footer">
                      <small className="posted-date">Đăng {Math.floor(Math.random() * 30 + 1)} ngày trước</small>
                      <button 
                        className="apply-btn"
                        onClick={() => navigate(`/student/jobs/${job.id}`)}
                      >
                        Xem chi tiết
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="no-results">
                <p>Không tìm thấy việc làm phù hợp với tiêu chí của bạn.</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/student/JobSearch.css" isMerged="true"
.job-search {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.search-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
}

.filters-sidebar {
  height: fit-content;
  position: sticky;
  top: 24px;
}

.filters-card {
  background-color: var(--background-white);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.filters-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-white);
}

.search-input input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  background: none;
  color: var(--text-primary);
}

.search-input input::placeholder {
  color: var(--text-secondary);
}

.filter-group select {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
  background-color: var(--background-white);
  color: var(--text-primary);
  cursor: pointer;
}

.filter-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}

.checkbox-label input {
  cursor: pointer;
  accent-color: var(--primary-color);
}

.checkbox-label:hover {
  color: var(--text-primary);
}

.clear-filters-btn {
  width: 100%;
  padding: 8px;
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-light);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.clear-filters-btn:hover {
  background-color: var(--border-color);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.results-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.sort-select {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
  background-color: var(--background-white);
  color: var(--text-primary);
  cursor: pointer;
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.job-card {
  background-color: var(--background-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.job-card-header {
  display: flex;
  gap: 10px;
}

.job-card-logo {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.job-card-main {
  flex: 1;
}

.job-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px 0;
  line-height: 1.4;
}

.job-card-company {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

.job-card-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.detail-item {
  display: flex;
  gap: 6px;
}

.detail-item .label {
  color: var(--text-secondary);
  font-weight: 500;
}

.detail-item .value {
  color: var(--text-primary);
  font-weight: 500;
}

.detail-item .value.salary {
  color: var(--success-color);
}

.detail-item .value.type {
  padding: 2px 6px;
  background-color: rgba(24, 144, 255, 0.1);
  border-radius: 2px;
  width: fit-content;
}

.job-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-badge {
  padding: 3px 8px;
  background-color: var(--background-light);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

.job-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.posted-date {
  color: var(--text-secondary);
  font-size: 11px;
}

.apply-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.apply-btn:hover {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .search-container {
    grid-template-columns: 1fr;
  }

.filters-sidebar {
    position: static;
  }

.filters-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    padding: 16px;
  }

.filter-group {
    margin-bottom: 0;
  }

.clear-filters-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .jobs-grid {
    grid-template-columns: 1fr;
  }

.results-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

.filters-card {
    grid-template-columns: 1fr;
  }
}
[V0_FILE]typescriptreact:file="src/pages/student/AppliedJobs.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { mockStudentJobs } from '../../_mock/jobs'
import { CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, EyeOutlined } from '@ant-design/icons'
import './AppliedJobs.css'

export default function AppliedJobs() {
  const [applications] = useState(mockStudentJobs)

const getStatusInfo = (status: string) => {
    switch (status) {
      case 'Đã qua vòng CV':
        return { label: 'Đã qua vòng CV', icon: CheckCircleOutlined, color: 'success' }
      case 'Doanh nghiệp đã xem':
        return { label: 'Doanh nghiệp đã xem', icon: EyeOutlined, color: 'processing' }
      case 'Không phù hợp':
        return { label: 'Không phù hợp', icon: CloseCircleOutlined, color: 'error' }
      case 'Đã nộp':
        return { label: 'Đã nộp', icon: ClockCircleOutlined, color: 'warning' }
      default:
        return { label: 'Không xác định', icon: ClockCircleOutlined, color: 'default' }
    }
  }

return (
    <MainLayout>
      <div className="applied-jobs">
        <h1 className="page-title">Quản lý Việc Làm Đã Nộp</h1>

<div className="applications-table-container">
          <table className="applications-table">
            <thead>
              <tr>
                <th>Vị trí tuyển dụng</th>
                <th>Công ty</th>
                <th>Ngày nộp</th>
                <th>Trạng thái</th>
                <th>Hành động</th>
              </tr>
            </thead>
            <tbody>
              {applications.map(app => {
                const statusInfo = getStatusInfo(app.status)
                const StatusIcon = statusInfo.icon
                return (
                  <tr key={app.id}>
                    <td className="job-title-cell">{app.jobTitle}</td>
                    <td>{app.company}</td>
                    <td>{new Date(app.submittedDate).toLocaleDateString('vi-VN')}</td>
                    <td>
                      <span className={`status-badge status-${statusInfo.color}`}>
                        <StatusIcon />
                        <span>{statusInfo.label}</span>
                      </span>
                    </td>
                    <td>
                      <button className="action-btn">Xem chi tiết JD</button>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/student/AppliedJobs.css" isMerged="true"
.applied-jobs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.applications-table-container {
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
}

.applications-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.applications-table thead {
  background-color: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

.applications-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.applications-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.applications-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.job-title-cell {
  font-weight: 600;
}

.salary-cell {
  color: var(--success-color);
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.status-badge.status-success {
  background-color: rgba(82, 196, 26, 0.1);
  color: var(--success-color);
}

.status-badge.status-warning {
  background-color: rgba(250, 173, 20, 0.1);
  color: var(--warning-color);
}

.status-badge.status-error {
  background-color: rgba(255, 77, 79, 0.1);
  color: var(--error-color);
}

.action-btn {
  padding: 6px 12px;
  background-color: var(--background-light);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

@media (max-width: 768px) {
  .applications-table {
    font-size: 12px;
  }

.applications-table th,
  .applications-table td {
    padding: 10px 12px;
  }
}
[V0_FILE]typescriptreact:file="src/pages/company/CompanyDashboard.tsx" isMerged="true"
import { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { mockJobs, mockCompanies } from '../../_mock/jobs'
import { BellOutlined, EyeOutlined, FileTextOutlined, UsergroupAddOutlined } from '@ant-design/icons'
import './CompanyDashboard.css'

export default function CompanyDashboard() {
  const [expandedRow, setExpandedRow] = useState<number | null>(null)

const stats = [
    { label: 'Tổng tin đang đăng', value: '4', icon: FileTextOutlined, color: 'blue' },
    { label: 'CV ứng tuyển mới', value: '15', icon: FileTextOutlined, color: 'green' },
    { label: 'Tổng CV trong hệ thống', value: '250', icon: UsergroupAddOutlined, color: 'purple' },
    { label: 'Lượt xem tin (24h)', value: '120', icon: EyeOutlined, color: 'orange' },
  ]

const pendingApplications = [
    {
      id: 1,
      studentName: 'Nguyễn Văn A',
      position: 'Frontend Developer',
      submittedDate: '2024-01-15',
      email: 'a@student.edu.vn'
    },
    {
      id: 2,
      studentName: 'Trần Thị B',
      position: 'Frontend Developer',
      submittedDate: '2024-01-14',
      email: 'b@student.edu.vn'
    },
    {
      id: 3,
      studentName: 'Lê Văn C',
      position: 'Backend Engineer',
      submittedDate: '2024-01-13',
      email: 'c@student.edu.vn'
    },
  ]

const recentActivities = [
    'Công ty ABC vừa đăng tin mới "ReactJS Developer"',
    'SV Nguyễn Văn A vừa cập nhật CV',
    'Bạn có 5 ứng viên mới cho vị trí Frontend Developer',
    'Tin "Backend Engineer" của bạn hết hạn vào 2024-02-01',
  ]

return (
    <MainLayout>
      <div className="company-dashboard">
        <h1 className="page-title">Chào mừng, Công ty!</h1>

{/* Statistics */}
        <div className="stats-grid">
          {stats.map((stat, index) => {
            const IconComponent = stat.icon
            return (
              <div key={index} className={`stat-card stat-${stat.color}`}>
                <div className="stat-icon">
                  <IconComponent />
                </div>
                <div className="stat-info">
                  <div className="stat-value">{stat.value}</div>
                  <div className="stat-label">{stat.label}</div>
                </div>
              </div>
            )
          })}
        </div>

<div className="dashboard-content">
          {/* Pending Applications */}
          <div className="content-card">
            <div className="card-header">
              <h2 className="card-title">Ứng viên Mới nhất</h2>
              <a href="/company/applications" className="view-all-link">Xem tất cả</a>
            </div>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Tên Sinh viên</th>
                    <th>Vị trí Ứng tuyển</th>
                    <th>Ngày nộp</th>
                    <th>Hành động</th>
                  </tr>
                </thead>
                <tbody>
                  {pendingApplications.map((app) => (
                    <tr key={app.id}>
                      <td>{app.studentName}</td>
                      <td>{app.position}</td>
                      <td>{new Date(app.submittedDate).toLocaleDateString('vi-VN')}</td>
                      <td>
                        <button className="action-btn">Xem CV</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

{/* Recent Activity */}
          <div className="content-card">
            <div className="card-header">
              <h2 className="card-title">Hoạt động gần đây</h2>
            </div>
            <div className="activity-list">
              {recentActivities.map((activity, idx) => (
                <div key={idx} className="activity-item">
                  <div className="activity-dot"></div>
                  <p className="activity-text">{activity}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/company/CompanyDashboard.css" isMerged="true"
.company-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--background-white);
  border-radius: 8px;
  border-left: 4px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-blue {
  border-left-color: #1890ff;
}

.stat-card.stat-green {
  border-left-color: #52c41a;
}

.stat-card.stat-purple {
  border-left-color: #722ed1;
}

.stat-card.stat-orange {
  border-left-color: #faad14;
}

.stat-icon {
  font-size: 32px;
  color: #1890ff;
  min-width: 44px;
}

.stat-card.stat-green .stat-icon {
  color: #52c41a;
}

.stat-card.stat-purple .stat-icon {
  color: #722ed1;
}

.stat-card.stat-orange .stat-icon {
  color: #faad14;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.content-card {
  background-color: var(--background-white);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.view-all-link {
  color: #1890ff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background-color: var(--background-light);
}

.data-table th {
  padding: 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.data-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.data-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.action-btn {
  padding: 4px 10px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #0050b3;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  background-color: var(--background-light);
  border-radius: 4px;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1890ff;
  flex-shrink: 0;
  margin-top: 4px;
}

.activity-text {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
}
[V0_FILE]typescriptreact:file="src/pages/company/PostJob.tsx" isMerged="true"
import { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { SaveOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import './PostJob.css'

export default function PostJob() {
  const [formData, setFormData] = useState({
    position: '',
    industry: '',
    type: 'Full-time',
    salary: 'Thỏa thuận',
    location: '',
    description: '',
    requirements: '',
    benefits: '',
    skills: '',
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Posting job:', formData)
    alert('Tin tuyển dụng đã được đăng thành công!')
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

return (
    <MainLayout>
      <div className="post-job">
        <div className="page-header">
          <button className="back-btn">
            <ArrowLeftOutlined /> Quay lại
          </button>
          <h1 className="page-title">Tạo Tin Tuyển Dụng Mới</h1>
        </div>

<div className="post-job-card">
          <form onSubmit={handleSubmit} className="job-form">
            <div className="form-section">
              <h2 className="section-title">Thông tin cơ bản</h2>
              
              <div className="form-grid">
                <div className="form-group">
                  <label>Vị trí tuyển dụng *</label>
                  <input
                    type="text"
                    name="position"
                    value={formData.position}
                    onChange={handleChange}
                    placeholder="VD: Frontend Developer"
                    required
                  />
                </div>

<div className="form-group">
                  <label>Ngành nghề</label>
                  <select name="industry" value={formData.industry} onChange={handleChange}>
                    <option value="">-- Chọn ngành --</option>
                    <option value="Web">Web</option>
                    <option value="AI">AI/ML</option>
                    <option value="Mobile">Mobile</option>
                    <option value="Khác">Khác</option>
                  </select>
                </div>

<div className="form-group">
                  <label>Loại hình</label>
                  <select name="type" value={formData.type} onChange={handleChange}>
                    <option value="Full-time">Full-time</option>
                    <option value="Part-time">Part-time</option>
                    <option value="Remote">Remote</option>
                  </select>
                </div>

<div className="form-group">
                  <label>Mức lương</label>
                  <select name="salary" value={formData.salary} onChange={handleChange}>
                    <option value="Thỏa thuận">Thỏa thuận</option>
                    <option value="10-15 triệu">10-15 triệu</option>
                    <option value="15-20 triệu">15-20 triệu</option>
                    <option value="20-30 triệu">20-30 triệu</option>
                    <option value="30+ triệu">30+ triệu</option>
                  </select>
                </div>

<div className="form-group full-width">
                <label>Quyền lợi</label>
                <textarea
                  name="benefits"
                  value={formData.benefits}
                  onChange={handleChange}
                  placeholder="Lương, bảo hiểm, các quyền lợi khác"
                  rows={6}
                />
              </div>

<div className="form-actions">
              <button type="button" className="btn-secondary">Lưu Nháp</button>
              <button type="submit" className="btn-primary">
                <SaveOutlined /> Đăng Tin
              </button>
            </div>
          </form>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/company/PostJob.css" isMerged="true"
.post-job {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s;
}

.back-btn:hover {
  background-color: var(--background-light);
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.post-job-card {
  background-color: var(--background-white);
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.job-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--background-white);
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.btn-primary {
  background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
  color: white;
}

.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.btn-secondary {
  background-color: var(--background-light);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--border-color);
}

@media (max-width: 768px) {
  .post-job-card {
    padding: 20px;
  }

.form-grid {
    grid-template-columns: 1fr;
  }

.form-actions {
    flex-direction: column;
  }

.btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
[V0_FILE]typescriptreact:file="src/pages/company/ManageJDs.tsx" isMerged="true"
import { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { EditOutlined, DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons'
import './ManageJDs.css'

const mockJDs = [
  {
    id: 1,
    position: 'Frontend Developer',
    postedDate: '2024-01-10',
    views: 156,
    applications: 12,
    status: true,
  },
  {
    id: 2,
    position: 'Backend Engineer',
    postedDate: '2024-01-08',
    views: 234,
    applications: 8,
    status: true,
  },
  {
    id: 3,
    position: 'React Developer',
    postedDate: '2024-01-05',
    views: 89,
    applications: 5,
    status: false,
  },
]

export default function ManageJDs() {
  const [jobData, setJobData] = useState(mockJDs)

const toggleStatus = (id: number) => {
    setJobData(prev =>
      prev.map(job =>
        job.id === id ? { ...job, status: !job.status } : job
      )
    )
  }

return (
    <MainLayout>
      <div className="manage-jds">
        <div className="page-header">
          <h1 className="page-title">Quản lý Tin Tuyển Dụng</h1>
          <button className="btn-new-job">
            <PlusOutlined /> Đăng tin mới
          </button>
        </div>

<div className="jds-table-container">
          <table className="jds-table">
            <thead>
              <tr>
                <th>Vị trí</th>
                <th>Ngày đăng</th>
                <th>Lượt xem</th>
                <th>Lượt ứng tuyển</th>
                <th>Trạng thái</th>
                <th>Hành động</th>
              </tr>
            </thead>
            <tbody>
              {jobData.map((job) => (
                <tr key={job.id}>
                  <td className="position-cell">{job.position}</td>
                  <td>{new Date(job.postedDate).toLocaleDateString('vi-VN')}</td>
                  <td>
                    <span className="stat-badge">{job.views}</span>
                  </td>
                  <td>
                    <button className="applications-link">{job.applications}</button>
                  </td>
                  <td>
                    <label className="switch-label">
                      <input
                        type="checkbox"
                        checked={job.status}
                        onChange={() => toggleStatus(job.id)}
                      />
                      <span className="switch"></span>
                    </label>
                  </td>
                  <td>
                    <div className="action-buttons">
                      <button className="icon-btn view-btn" title="Xem">
                        <EyeOutlined />
                      </button>
                      <button className="icon-btn edit-btn" title="Sửa">
                        <EditOutlined />
                      </button>
                      <button className="icon-btn delete-btn" title="Xóa">
                        <DeleteOutlined />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/company/ManageJDs.css" isMerged="true"
.manage-jds {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.btn-new-job {
  padding: 10px 16px;
  background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.btn-new-job:hover {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.jds-table-container {
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
}

.jds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.jds-table thead {
  background-color: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

.jds-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.jds-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.jds-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.position-cell {
  font-weight: 600;
}

.stat-badge {
  display: inline-block;
  padding: 4px 8px;
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
}

.applications-link {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}

.applications-link:hover {
  text-decoration-thickness: 2px;
}

.switch-label {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.switch-label input {
  display: none;
}

.switch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 22px;
  transition: all 0.3s;
}

.switch::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: all 0.3s;
}

.switch-label input:checked + .switch {
  background-color: #1890ff;
}

.switch-label input:checked + .switch::before {
  transform: translateX(18px);
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.icon-btn {
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.3s;
}

.icon-btn:hover {
  background-color: var(--background-light);
}

.icon-btn.view-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.icon-btn.edit-btn:hover {
  color: #faad14;
  border-color: #faad14;
}

.icon-btn.delete-btn:hover {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 12px;
  }

.btn-new-job {
    width: 100%;
    justify-content: center;
  }

.action-buttons {
    flex-wrap: wrap;
  }
}
[V0_FILE]typescriptreact:file="src/pages/company/SearchCVs.tsx" isMerged="true"
import { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { mockCVs } from '../../_mock/cvs'
import { SearchOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons'
import './SearchCVs.css'

export default function SearchCVs() {
  const [searchKeyword, setSearchKeyword] = useState('')
  const [filterMajor, setFilterMajor] = useState('')

const filteredCVs = mockCVs.filter(cv => {
    const matchKeyword = cv.name.toLowerCase().includes(searchKeyword.toLowerCase()) ||
                        cv.email.toLowerCase().includes(searchKeyword.toLowerCase())
    const matchMajor = !filterMajor || cv.major === filterMajor
    return matchKeyword && matchMajor
  })

return (
    <MainLayout>
      <div className="search-cvs">
        <h1 className="page-title">Tìm Kiếm CV</h1>

<div className="search-filter">
          <div className="search-box">
            <SearchOutlined />
            <input
              type="text"
              placeholder="Tìm theo tên, email..."
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
            />
          </div>
          <select
            value={filterMajor}
            onChange={(e) => setFilterMajor(e.target.value)}
            className="filter-select"
          >
            <option value="">Tất cả chuyên ngành</option>
            <option value="Công nghệ Thông tin">Công nghệ Thông tin</option>
            <option value="Kỹ thuật phần mềm">Kỹ thuật phần mềm</option>
            <option value="An niệm mạng">An niệm mạng</option>
          </select>
        </div>

<div className="cvs-grid">
          {filteredCVs.length > 0 ? (
            filteredCVs.map(cv => (
              <div key={cv.id} className="cv-card">
                <div className="cv-header">
                  <div className="cv-avatar">{cv.name.charAt(0)}</div>
                  <div className="cv-name-info">
                    <h3 className="cv-name">{cv.name}</h3>
                    <p className="cv-major">{cv.major}</p>
                  </div>
                </div>

<div className="cv-details">
                  <div className="detail-row">
                    <span className="label">GPA:</span>
                    <span className="value">{cv.gpa}</span>
                  </div>
                  <div className="detail-row">
                    <span className="label">Trường:</span>
                    <span className="value">{cv.school}</span>
                  </div>
                  <div className="detail-row">
                    <span className="label">Tốt nghiệp:</span>
                    <span className="value">{cv.graduationYear}</span>
                  </div>
                </div>

<div className="cv-skills">
                  {cv.skills.slice(0, 3).map(skill => (
                    <span key={skill} className="skill-tag">{skill}</span>
                  ))}
                  {cv.skills.length > 3 && (
                    <span className="skill-more">+{cv.skills.length - 3}</span>
                  )}
                </div>

<div className="cv-footer">
                  <div className="contact-info">
                    <a href={`mailto:${cv.email}`} className="contact-link">
                      <MailOutlined /> Email
                    </a>
                    <a href={`tel:${cv.phone}`} className="contact-link">
                      <PhoneOutlined /> Phone
                    </a>
                  </div>
                  <button className="view-cv-btn">Xem CV</button>
                </div>
              </div>
            ))
          ) : (
            <div className="no-results">Không tìm thấy CV nào</div>
          )}
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/company/SearchCVs.css" isMerged="true"
.search-cvs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.search-filter {
  display: flex;
  gap: 12px;
  background-color: var(--background-white);
  padding: 16px;
  border-radius: 8px;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-white);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: none;
  color: var(--text-primary);
}

.search-box input::placeholder {
  color: var(--text-secondary);
}

.filter-select {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--background-white);
  color: var(--text-primary);
  cursor: pointer;
  min-width: 200px;
}

.cvs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.cv-card {
  background-color: var(--background-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #1890ff;
}

.cv-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.cv-name-info {
  flex: 1;
}

.cv-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.cv-major {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 0 0;
}

.cv-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.detail-row .label {
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 60px;
}

.detail-row .value {
  color: var(--text-primary);
  font-weight: 600;
}

.cv-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-tag {
  padding: 4px 10px;
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.skill-more {
  padding: 4px 8px;
  background-color: var(--background-light);
  color: var(--text-secondary);
  border-radius: 3px;
  font-size: 11px;
}

.cv-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.contact-info {
  display: flex;
  gap: 8px;
}

.contact-link {
  padding: 4px 8px;
  background-color: var(--background-light);
  color: var(--text-primary);
  border-radius: 3px;
  text-decoration: none;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s;
}

.contact-link:hover {
  background-color: #1890ff;
  color: white;
}

.view-cv-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.view-cv-btn:hover {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .search-filter {
    flex-direction: column;
  }

.filter-select {
    min-width: auto;
  }

.cvs-grid {
    grid-template-columns: 1fr;
  }
}
[V0_FILE]typescriptreact:file="src/pages/company/ManageApplications.tsx" isMerged="true"
import MainLayout from '../../components/layout/MainLayout'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
import './ManageApplications.css'

const mockApplications = [
  {
    id: 1,
    studentName: 'Nguyễn Văn A',
    position: 'Frontend Developer',
    submittedDate: '2024-01-15',
    status: 'new',
  },
  {
    id: 2,
    studentName: 'Trần Thị B',
    position: 'Frontend Developer',
    submittedDate: '2024-01-14',
    status: 'reviewing',
  },
  {
    id: 3,
    studentName: 'Lê Văn C',
    position: 'Backend Engineer',
    submittedDate: '2024-01-13',
    status: 'new',
  },
]

export default function ManageApplications() {
  return (
    <MainLayout>
      <div className="manage-applications">
        <h1 className="page-title">Quản Lý Ứng Viên</h1>

<div className="applications-table-container">
          <table className="applications-table">
            <thead>
              <tr>
                <th>Tên Sinh viên</th>
                <th>Vị trí</th>
                <th>Ngày nộp</th>
                <th>Trạng thái</th>
                <th>Hành động</th>
              </tr>
            </thead>
            <tbody>
              {mockApplications.map(app => (
                <tr key={app.id}>
                  <td>{app.studentName}</td>
                  <td>{app.position}</td>
                  <td>{new Date(app.submittedDate).toLocaleDateString('vi-VN')}</td>
                  <td>
                    <span className={`status-badge status-${app.status}`}>
                      {app.status === 'new' ? 'Mới' : 'Đang xem xét'}
                    </span>
                  </td>
                  <td>
                    <div className="action-buttons">
                      <button className="btn-icon accept-btn" title="Chấp nhận">
                        <CheckOutlined />
                      </button>
                      <button className="btn-icon reject-btn" title="Từ chối">
                        <CloseOutlined />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/company/ManageApplications.css" isMerged="true"
.manage-applications {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.applications-table-container {
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
}

.applications-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.applications-table thead {
  background-color: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

.applications-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.applications-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.applications-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.status-new {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.status-badge.status-reviewing {
  background-color: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-icon {
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-icon:hover {
  background-color: var(--background-light);
}

.btn-icon.accept-btn:hover {
  border-color: #52c41a;
  color: #52c41a;
}

.btn-icon.reject-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .applications-table {
    font-size: 12px;
  }

.applications-table th,
  .applications-table td {
    padding: 10px 12px;
  }

.action-buttons {
    flex-wrap: wrap;
  }
}
[V0_FILE]typescriptreact:file="src/pages/admin/AdminDashboard.tsx" isMerged="true"
import MainLayout from '../../components/layout/MainLayout'
import { TeamOutlined, AuditOutlined, NotificationOutlined, CheckCircleOutlined } from '@ant-design/icons'
import './AdminDashboard.css'

const mockPendingCompanies = [
  {
    id: 1,
    name: 'Cloud Systems Inc',
    email: 'contact@cloudsys.vn',
    registeredDate: '2024-01-15',
  },
  {
    id: 2,
    name: 'Digital Solutions',
    email: 'hr@digital.vn',
    registeredDate: '2024-01-14',
  },
  {
    id: 3,
    name: 'Tech Innovators',
    email: 'info@techinnovators.vn',
    registeredDate: '2024-01-13',
  },
]

const recentActivities = [
  'Công ty ABC vừa đăng tin mới "ReactJS Developer"',
  'SV Nguyễn Văn A vừa cập nhật CV',
  'Bạn có 5 ứng viên mới cho vị trí Frontend Developer',
  'Tin "Backend Engineer" của công ty XYZ hết hạn vào 2024-02-01',
  'SV Trần Thị B vừa hoàn thành hồ sơ 100%',
]

export default function AdminDashboard() {
  const stats = [
    { label: 'Tổng SV trên hệ thống', value: '1,250', icon: TeamOutlined, color: 'blue' },
    { label: 'Tổng DN đã duyệt', value: '85', icon: CheckCircleOutlined, color: 'green' },
    { label: 'DN Chờ Duyệt', value: '3', icon: AuditOutlined, color: 'red', highlight: true },
    { label: 'JD Đang Mở', value: '42', icon: NotificationOutlined, color: 'orange' },
  ]

return (
    <MainLayout>
      <div className="admin-dashboard">
        <h1 className="page-title">Tổng Quan Hệ Thống</h1>

{/* Statistics */}
        <div className="stats-grid">
          {stats.map((stat, index) => {
            const IconComponent = stat.icon
            return (
              <div key={index} className={`stat-card stat-${stat.color} ${stat.highlight ? 'highlight' : ''}`}>
                <div className="stat-icon">
                  <IconComponent />
                </div>
                <div className="stat-info">
                  <div className="stat-value">{stat.value}</div>
                  <div className="stat-label">{stat.label}</div>
                </div>
              </div>
            )
          })}
        </div>

<div className="dashboard-content">
          {/* Pending Companies */}
          <div className="content-card">
            <div className="card-header">
              <h2 className="card-title">Doanh nghiệp chờ duyệt</h2>
              <a href="/admin/companies" className="view-all-link">Xem tất cả</a>
            </div>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Tên Công ty</th>
                    <th>Email</th>
                    <th>Ngày đăng ký</th>
                    <th>Hành động</th>
                  </tr>
                </thead>
                <tbody>
                  {mockPendingCompanies.map((company) => (
                    <tr key={company.id}>
                      <td className="company-name">{company.name}</td>
                      <td>{company.email}</td>
                      <td>{new Date(company.registeredDate).toLocaleDateString('vi-VN')}</td>
                      <td>
                        <button className="action-btn view-btn">Xem & Duyệt</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

{/* Recent Activity */}
          <div className="content-card">
            <div className="card-header">
              <h2 className="card-title">Hoạt động gần đây</h2>
            </div>
            <div className="activity-list">
              {recentActivities.map((activity, idx) => (
                <div key={idx} className="activity-item">
                  <div className="activity-dot"></div>
                  <p className="activity-text">{activity}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/admin/AdminDashboard.css" isMerged="true"
.admin-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card.highlight {
  box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.2), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.stat-card.stat-blue {
  border-left-color: #1890ff;
}

.stat-card.stat-green {
  border-left-color: #52c41a;
}

.stat-card.stat-red {
  border-left-color: #ff4d4f;
}

.stat-card.stat-orange {
  border-left-color: #faad14;
}

.stat-icon {
  font-size: 32px;
  color: #1890ff;
  min-width: 44px;
}

.stat-card.stat-green .stat-icon {
  color: #52c41a;
}

.stat-card.stat-red .stat-icon {
  color: #ff4d4f;
}

.stat-card.stat-orange .stat-icon {
  color: #faad14;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.content-card {
  background-color: var(--background-white);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.view-all-link {
  color: #1890ff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background-color: var(--background-light);
}

.data-table th {
  padding: 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.data-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.data-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.company-name {
  font-weight: 600;
}

.action-btn {
  padding: 6px 12px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #0050b3;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  background-color: var(--background-light);
  border-radius: 4px;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1890ff;
  flex-shrink: 0;
  margin-top: 4px;
}

.activity-text {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
}
[V0_FILE]typescriptreact:file="src/pages/admin/ManageCompanies.tsx" isMerged="true"
import React, { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { CheckOutlined, CloseOutlined, EyeOutlined } from '@ant-design/icons'
import './ManageCompanies.css'

const mockCompanies = [
  {
    id: 1,
    name: 'Cloud Systems Inc',
    email: 'contact@cloudsys.vn',
    phone: '0834 567 8901',
    taxId: '0987654321',
    status: 'pending',
    registeredDate: '2024-01-15',
  },
  {
    id: 2,
    name: 'Digital Solutions',
    email: 'hr@digital.vn',
    phone: '0243 123 4567',
    taxId: '0123456789',
    status: 'pending',
    registeredDate: '2024-01-14',
  },
  {
    id: 3,
    name: 'Tech Solutions Corp',
    email: 'hr@techsolutions.vn',
    phone: '0243 111 2222',
    taxId: '0111222333',
    status: 'approved',
    registeredDate: '2024-01-01',
  },
]

export default function ManageCompanies() {
  const [companies, setCompanies] = useState(mockCompanies)
  const [activeTab, setActiveTab] = useState<'pending' | 'all'>('pending')
  const [expandedId, setExpandedId] = useState<number | null>(null)

const pendingCompanies = companies.filter(c => c.status === 'pending')
  const displayCompanies = activeTab === 'pending' ? pendingCompanies : companies

const handleApprove = (id: number) => {
    setCompanies(prev =>
      prev.map(company =>
        company.id === id ? { ...company, status: 'approved' } : company
      )
    )
  }

const handleReject = (id: number) => {
    setCompanies(prev =>
      prev.map(company =>
        company.id === id ? { ...company, status: 'rejected' } : company
      )
    )
  }

return (
    <MainLayout>
      <div className="manage-companies">
        <h1 className="page-title">Quản lý Doanh nghiệp</h1>

<div className="tabs">
          <button
            className={`tab ${activeTab === 'pending' ? 'active' : ''}`}
            onClick={() => setActiveTab('pending')}
          >
            Chờ duyệt ({pendingCompanies.length})
          </button>
          <button
            className={`tab ${activeTab === 'all' ? 'active' : ''}`}
            onClick={() => setActiveTab('all')}
          >
            Tất cả ({companies.length})
          </button>
        </div>

<div className="companies-table-container">
          <table className="companies-table">
            <thead>
              <tr>
                <th></th>
                <th>Tên Công ty</th>
                <th>Email</th>
                <th>Số điện thoại</th>
                <th>Mã số thuế</th>
                <th>Ngày đăng ký</th>
                {activeTab === 'all' && <th>Trạng thái</th>}
                <th>Hành động</th>
              </tr>
            </thead>
            <tbody>
              {displayCompanies.map((company) => (
                <React.Fragment key={company.id}>
                  <tr className={expandedId === company.id ? 'expanded' : ''}>
                    <td>
                      <button
                        className="expand-btn"
                        onClick={() => setExpandedId(expandedId === company.id ? null : company.id)}
                      >
                        {expandedId === company.id ? '−' : '+'}
                      </button>
                    </td>
                    <td className="company-name">{company.name}</td>
                    <td>{company.email}</td>
                    <td>{company.phone}</td>
                    <td>{company.taxId}</td>
                    <td>{new Date(company.registeredDate).toLocaleDateString('vi-VN')}</td>
                    {activeTab === 'all' && (
                      <td>
                        <span className={`status-tag status-${company.status}`}>
                          {company.status === 'approved' ? 'Đã duyệt' : company.status === 'rejected' ? 'Bị từ chối' : 'Chờ duyệt'}
                        </span>
                      </td>
                    )}
                    <td>
                      <div className="action-buttons">
                        <button className="icon-btn" title="Xem chi tiết">
                          <EyeOutlined />
                        </button>
                        {activeTab === 'pending' && (
                          <>
                            <button
                              className="icon-btn approve-btn"
                              title="Duyệt"
                              onClick={() => handleApprove(company.id)}
                            >
                              <CheckOutlined />
                            </button>
                            <button
                              className="icon-btn reject-btn"
                              title="Từ chối"
                              onClick={() => handleReject(company.id)}
                            >
                              <CloseOutlined />
                            </button>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                  {expandedId === company.id && (
                    <tr className="expanded-content">
                      <td colSpan={activeTab === 'all' ? 9 : 8}>
                        <div className="expansion-details">
                          <h4>Chi tiết công ty</h4>
                          <p><strong>Tên công ty:</strong> {company.name}</p>
                          <p><strong>Email:</strong> {company.email}</p>
                          <p><strong>Điện thoại:</strong> {company.phone}</p>
                          <p><strong>Mã số thuế:</strong> {company.taxId}</p>
                          <p><strong>Ngày đăng ký:</strong> {new Date(company.registeredDate).toLocaleDateString('vi-VN')}</p>
                          <p><strong>Trạng thái:</strong> {company.status === 'approved' ? 'Đã duyệt' : company.status === 'rejected' ? 'Bị từ chối' : 'Chờ duyệt'}</p>
                        </div>
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/admin/ManageCompanies.css" isMerged="true"
.manage-companies {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--background-white);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.tab {
  flex: 0 1 auto;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
}

.companies-table-container {
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
}

.companies-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.companies-table thead {
  background-color: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

.companies-table th {
  padding: 12px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.companies-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.companies-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.expand-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expand-btn:hover {
  color: var(--text-primary);
}

.company-name {
  font-weight: 600;
}

.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

.status-tag.status-approved {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.status-tag.status-rejected {
  background-color: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.status-tag.status-pending {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.action-buttons {
  display: flex;
  gap: 6px;
}

.icon-btn:hover {
  background-color: var(--background-light);
  border-color: var(--text-secondary);
}

.icon-btn.approve-btn:hover {
  color: #52c41a;
  border-color: #52c41a;
}

.icon-btn.reject-btn:hover {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.expanded-content td {
  padding: 0;
  background-color: rgba(24, 144, 255, 0.05);
}

.expansion-details {
  padding: 16px;
}

.expansion-details h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-primary);
}

.expansion-details p {
  margin: 6px 0;
  font-size: 13px;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .companies-table {
    font-size: 12px;
  }

.companies-table th,
  .companies-table td {
    padding: 8px;
  }

.action-buttons {
    flex-wrap: wrap;
  }
}
[V0_FILE]typescriptreact:file="src/pages/admin/ManageStudents.tsx" isMerged="true"
import MainLayout from '../../components/layout/MainLayout'
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons'
import './ManageStudents.css'

const mockStudents = [
  {
    id: 1,
    name: 'Nguyễn Văn A',
    email: 'a@student.edu.vn',
    school: 'Đại học Khoa học Tự nhiên',
    major: 'Công nghệ Thông tin',
    gpa: 3.8,
    profileCompletion: 80,
    registeredDate: '2024-01-01',
  },
  {
    id: 2,
    name: 'Trần Thị B',
    email: 'b@student.edu.vn',
    school: 'Đại học Công nghệ',
    major: 'Kỹ thuật phần mềm',
    gpa: 3.5,
    profileCompletion: 60,
    registeredDate: '2024-01-02',
  },
  {
    id: 3,
    name: 'Lê Văn C',
    email: 'c@student.edu.vn',
    school: 'Đại học Kinh tế',
    major: 'Công nghệ Thông tin',
    gpa: 3.2,
    profileCompletion: 100,
    registeredDate: '2024-01-03',
  },
]

export default function ManageStudents() {
  return (
    <MainLayout>
      <div className="manage-students">
        <div className="page-header">
          <h1 className="page-title">Quản lý Sinh viên</h1>
          <button className="export-btn">
            <DownloadOutlined /> Xuất dữ liệu
          </button>
        </div>

<div className="students-table-container">
          <table className="students-table">
            <thead>
              <tr>
                <th>Tên Sinh viên</th>
                <th>Email</th>
                <th>Trường</th>
                <th>Chuyên ngành</th>
                <th>GPA</th>
                <th>Hoàn thành hồ sơ</th>
                <th>Ngày đăng ký</th>
                <th>Hành động</th>
              </tr>
            </thead>
            <tbody>
              {mockStudents.map((student) => (
                <tr key={student.id}>
                  <td className="student-name">{student.name}</td>
                  <td>{student.email}</td>
                  <td>{student.school}</td>
                  <td>{student.major}</td>
                  <td>
                    <span className="gpa-badge">{student.gpa}</span>
                  </td>
                  <td>
                    <div className="progress-bar">
                      <div
                        className="progress-fill"
                        style={{ width: `${student.profileCompletion}%` }}
                      ></div>
                      <span className="progress-text">{student.profileCompletion}%</span>
                    </div>
                  </td>
                  <td>{new Date(student.registeredDate).toLocaleDateString('vi-VN')}</td>
                  <td>
                    <button className="action-link">Xem chi tiết</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/admin/ManageStudents.css" isMerged="true"
.manage-students {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.export-btn {
  padding: 10px 16px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}

.export-btn:hover {
  background-color: #389e0d;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-white);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: none;
  color: var(--text-primary);
}

.search-box input::placeholder {
  color: var(--text-secondary);
}

.students-table-container {
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
}

.students-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.students-table thead {
  background-color: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

.students-table th {
  padding: 12px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.students-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.students-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.student-name {
  font-weight: 600;
}

.gpa-badge {
  display: inline-block;
  padding: 4px 10px;
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
  border-radius: 3px;
  font-weight: 600;
  font-size: 12px;
}

.progress-bar {
  position: relative;
  height: 20px;
  background-color: var(--background-light);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1890ff 0%, #0050b3 100%);
  transition: width 0.3s;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
}

.action-link {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
}

.action-link:hover {
  color: #0050b3;
}

@media (max-width: 768px) {
  .students-table {
    font-size: 12px;
  }

.students-table th,
  .students-table td {
    padding: 8px;
  }

.page-header {
    flex-direction: column;
    gap: 12px;
  }

.export-btn {
    width: 100%;
    justify-content: center;
  }
}
[V0_FILE]typescriptreact:file="src/pages/admin/ManageJobs.tsx" isMerged="true"
import MainLayout from '../../components/layout/MainLayout'
import './ManageJobs.css'

const mockJobs = [
  {
    id: 1,
    position: 'Frontend Developer',
    company: 'Tech Solutions Corp',
    postedDate: '2024-01-10',
    views: 156,
    applications: 12,
    status: 'active',
  },
  {
    id: 2,
    position: 'Backend Engineer',
    company: 'Cloud Systems Inc',
    postedDate: '2024-01-08',
    views: 234,
    applications: 8,
    status: 'active',
  },
  {
    id: 3,
    position: 'React Developer',
    company: 'Digital Solutions',
    postedDate: '2024-01-05',
    views: 89,
    applications: 5,
    status: 'expired',
  },
]

export default function ManageJobs() {
  return (
    <MainLayout>
      <div className="manage-jobs">
        <h1 className="page-title">Quản lý Tin Tuyển Dụng</h1>

<div className="jobs-table-container">
          <table className="jobs-table">
            <thead>
              <tr>
                <th>Vị trí</th>
                <th>Công ty</th>
                <th>Ngày đăng</th>
                <th>Lượt xem</th>
                <th>Lượt ứng tuyển</th>
                <th>Trạng thái</th>
                <th>Hành động</th>
              </tr>
            </thead>
            <tbody>
              {mockJobs.map((job) => (
                <tr key={job.id}>
                  <td className="position-cell">{job.position}</td>
                  <td>{job.company}</td>
                  <td>{new Date(job.postedDate).toLocaleDateString('vi-VN')}</td>
                  <td>
                    <span className="stat">{job.views}</span>
                  </td>
                  <td>
                    <span className="stat">{job.applications}</span>
                  </td>
                  <td>
                    <span className={`status status-${job.status}`}>
                      {job.status === 'active' ? 'Đang mở' : 'Đã hết hạn'}
                    </span>
                  </td>
                  <td>
                    <button className="action-btn">Chi tiết</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/admin/ManageJobs.css" isMerged="true"
.manage-jobs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.jobs-table-container {
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
}

.jobs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.jobs-table thead {
  background-color: var(--background-light);
  border-bottom: 1px solid var(--border-color);
}

.jobs-table th {
  padding: 12px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.jobs-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.jobs-table tbody tr:hover {
  background-color: rgba(24, 144, 255, 0.05);
}

.position-cell {
  font-weight: 600;
}

.stat {
  display: inline-block;
  padding: 4px 8px;
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
  border-radius: 3px;
  font-weight: 600;
}

.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

.status.status-active {
  background-color: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.status.status-expired {
  background-color: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.action-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

@media (max-width: 768px) {
  .jobs-table {
    font-size: 12px;
  }

.jobs-table th,
  .jobs-table td {
    padding: 8px;
  }
}
[V0_FILE]typescriptreact:file="src/pages/admin/Statistics.tsx" isEdit="true" isMerged="true"
import { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { Row, Col, Card } from 'antd'
import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
import './Statistics.css'

export default function Statistics() {
  const monthlyData = [
    { month: 'Tháng 1', count: 50 },
    { month: 'Tháng 2', count: 120 },
    { month: 'Tháng 3', count: 95 },
    { month: 'Tháng 4', count: 180 },
    { month: 'Tháng 5', count: 200 },
    { month: 'Tháng 6', count: 220 },
  ]

const majorData = [
    { name: 'Web Development', value: 45, color: '#1890ff' },
    { name: 'AI/ML', value: 20, color: '#52c41a' },
    { name: 'Mobile', value: 15, color: '#faad14' },
    { name: 'Data Science', value: 20, color: '#f5222d' },
  ]

const skillsData = [
    { skill: 'ReactJS', count: 150 },
    { skill: 'Node.js', count: 120 },
    { skill: 'Python', count: 110 },
    { skill: 'TypeScript', count: 105 },
    { skill: 'Java', count: 95 },
    { skill: 'Docker', count: 85 },
    { skill: 'PostgreSQL', count: 80 },
    { skill: 'MongoDB', count: 75 },
    { skill: 'Machine Learning', count: 65 },
    { skill: 'AWS', count: 55 },
  ]

const [topCompanies] = useState([
    { id: 1, name: 'Tech Solutions Corp', postings: 12, applications: 245 },
    { id: 2, name: 'Cloud Systems Inc', postings: 8, applications: 156 },
    { id: 3, name: 'App Innovations Ltd', postings: 6, applications: 89 },
    { id: 4, name: 'Data Science Hub', postings: 5, applications: 312 },
    { id: 5, name: 'Digital Solutions', postings: 4, applications: 245 },
  ])

return (
    <MainLayout>
      <div className="statistics">
        <h1 className="page-title">Thống Kê Hệ Thống</h1>

{/* Statistics Cards */}
        <Row gutter={[16, 16]} className="stats-cards-row">
          <Col xs={24} sm={12} md={6}>
            <div className="stat-card">
              <h3>Sinh viên</h3>
              <p className="stat-number">750</p>
              <p className="stat-subtitle">Đã đăng ký</p>
            </div>
          </Col>

<Col xs={24} sm={12} md={6}>
            <div className="stat-card">
              <h3>Doanh nghiệp</h3>
              <p className="stat-number">42</p>
              <p className="stat-subtitle">Đã phê duyệt</p>
            </div>
          </Col>

<Col xs={24} sm={12} md={6}>
            <div className="stat-card">
              <h3>Tin tuyển dụng</h3>
              <p className="stat-number">128</p>
              <p className="stat-subtitle">Đang mở</p>
            </div>
          </Col>

<Col xs={24} sm={12} md={6}>
            <div className="stat-card">
              <h3>Ứng tuyển</h3>
              <p className="stat-number">1250</p>
              <p className="stat-subtitle">Tổng cộng</p>
            </div>
          </Col>
        </Row>

{/* Charts Row 1: Line Chart and Pie Chart */}
        <Row gutter={[16, 16]} className="charts-row">
          <Col xs={24} lg={16}>
            <Card className="chart-card">
              <h3 className="chart-title">Số lượng ứng tuyển theo tháng</h3>
              <ResponsiveContainer width="100%" height={300}>
                <LineChart data={monthlyData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#e8e8e8" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Line 
                    type="monotone" 
                    dataKey="count" 
                    stroke="#1890ff" 
                    strokeWidth={2}
                    name="Số ứng tuyển"
                  />
                </LineChart>
              </ResponsiveContainer>
            </Card>
          </Col>

<Col xs={24} lg={8}>
            <Card className="chart-card">
              <h3 className="chart-title">Tỷ lệ ngành nghề</h3>
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  <Pie
                    data={majorData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    label={(entry) => `${entry.name} ${entry.value}%`}
                    outerRadius={80}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {majorData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
            </Card>
          </Col>
        </Row>

{/* Charts Row 2: Bar Chart */}
        <Row gutter={[16, 16]} className="charts-row">
          <Col xs={24}>
            <Card className="chart-card">
              <h3 className="chart-title">Top 10 Kỹ năng được yêu cầu nhiều nhất</h3>
              <ResponsiveContainer width="100%" height={350}>
                <BarChart data={skillsData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#e8e8e8" />
                  <XAxis dataKey="skill" angle={-45} textAnchor="end" height={80} />
                  <YAxis />
                  <Tooltip />
                  <Bar 
                    dataKey="count" 
                    fill="#1890ff"
                    name="Số lần yêu cầu"
                    radius={[8, 8, 0, 0]}
                  />
                </BarChart>
              </ResponsiveContainer>
            </Card>
          </Col>
        </Row>

{/* Table: Top Companies */}
        <Row gutter={[16, 16]} className="charts-row">
          <Col xs={24}>
            <Card className="chart-card">
              <h3 className="chart-title">Top 5 Doanh nghiệp đăng tin nhiều nhất</h3>
              <table className="companies-table">
                <thead>
                  <tr>
                    <th>Doanh nghiệp</th>
                    <th>Số tin đăng</th>
                    <th>Tổng ứng tuyển</th>
                    <th>TB ứng tuyển/tin</th>
                  </tr>
                </thead>
                <tbody>
                  {topCompanies.map(company => (
                    <tr key={company.id}>
                      <td className="company-name">{company.name}</td>
                      <td>{company.postings}</td>
                      <td>{company.applications}</td>
                      <td className="avg-applications">{Math.round(company.applications / company.postings)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>
          </Col>
        </Row>
      </div>
    </MainLayout>
  )
}
[V0_FILE]typescriptreact:file="src/pages/NotFound.tsx" isMerged="true"
import { useNavigate } from 'react-router-dom'
import './NotFound.css'

export default function NotFound() {
  const navigate = useNavigate()

return (
    <div className="not-found">
      <div className="not-found-content">
        <h1 className="not-found-title">404</h1>
        <p className="not-found-message">Trang không tồn tại</p>
        <button
          onClick={() => navigate('/login')}
          className="back-home-btn"
        >
          Quay lại trang đăng nhập
        </button>
      </div>
    </div>
  )
}
[V0_FILE]css:file="src/pages/NotFound.css" isMerged="true"
.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.not-found-content {
  text-align: center;
  background-color: white;
  padding: 60px 40px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.not-found-title {
  font-size: 64px;
  font-weight: 700;
  color: #1890ff;
  margin: 0;
}

.not-found-message {
  font-size: 24px;
  color: #333;
  margin: 16px 0 32px 0;
}

.back-home-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.back-home-btn:hover {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}
[V0_FILE]typescriptreact:file="README.md" isMerged="true"
# Hệ thống Quản lý Thực tập và Hỗ trợ Tuyển dụng

Một nền tảng toàn diện kết nối sinh viên, doanh nghiệp và khoa để hỗ trợ quá trình tuyển dụng và thực tập.

## Tính năng chính

### Dành cho Sinh viên
- **Dashboard**: Xem tổng quan việc làm phù hợp, lượt xem hồ sơ
- **CV Online**: Tạo CV trực tiếp trên hệ thống hoặc tải lên file
- **Tìm Kiếm Việc Làm**: Tìm và lọc việc làm theo ngành, địa điểm, loại hình
- **Quản Lý Ứng Tuyển**: Theo dõi các đơn ứng tuyển đã gửi

### Dành cho Doanh Nghiệp
- **Dashboard**: Xem thống kê ứng viên mới, lượt xem tin
- **Đăng Tin Tuyển Dụng**: Tạo và quản lý các tin tuyển dụng
- **Tìm Kiếm CV**: Tìm kiếm cv sinh viên theo tiêu chí
- **Quản Lý Ứng Viên**: Duyệt và quản lý các đơn ứng tuyển

### Dành cho Khoa (Admin)
- **Dashboard**: Tổng quan hệ thống, doanh nghiệp chờ duyệt
- **Duyệt Doanh Nghiệp**: Xét duyệt hồ sơ doanh nghiệp
- **Quản Lý Sinh Viên**: Xem danh sách sinh viên, mức hoàn thành hồ sơ
- **Quản Lý Tin Đăng**: Giám sát các tin tuyển dụng
- **Thống Kê**: Xem các chỉ số thống kê của hệ thống

## Cấu trúc Dự án

\`\`\`
src/
├── pages/                    # Các trang web
│   ├── auth/                # Trang xác thực
│   ├── student/             # Trang cho sinh viên
│   ├── company/             # Trang cho doanh nghiệp
│   └── admin/               # Trang cho quản trị viên
├── components/              # Các component tái sử dụng
│   ├── common/              # Component dùng chung
│   ├── layout/              # Layout components
│   └── specific/            # Component nghiệp vụ
├── context/                 # React Context
│   └── AuthContext.tsx      # Xử lý xác thực
├── hooks/                   # Custom hooks
│   └── useAuth.ts          # Hook xác thực
├── routes/                  # Cấu hình routing
│   ├── AppRoutes.tsx       # Định tuyến chính
│   └── ProtectedRoute.tsx  # Route bảo vệ
├── api/                    # API configuration
├── utils/                  # Các hàm tiện ích
├── _mock/                  # Dữ liệu giả
└── types/                  # TypeScript types
\`\`\`

## Công Nghệ Sử Dụng

- **React 18**: Thư viện UI
- **React Router v6**: Định tuyến
- **TypeScript**: Ngôn ngữ lập trình
- **CSS3**: Styling
- **Vite**: Build tool
- **Ant Design Icons**: Biểu tượng

## Demo Credentials

Hệ thống sử dụng mock authentication. Để đăng nhập, nhập một trong các thông tin sau:

| Vai trò | Email | Mật khẩu |
|---------|-------|----------|
| Sinh viên | `student` | Bất kỳ |
| Doanh nghiệp | `company` | Bất kỳ |
| Admin | `admin` | Bất kỳ |

## Cài đặt

1. Cài đặt dependencies:
\`\`\`bash
npm install
\`\`\`

2. Chạy development server:
\`\`\`bash
npm run dev
\`\`\`

3. Mở browser tại `http://localhost:3000`

## Build

\`\`\`bash
npm run build
\`\`\`

## Lưu ý

- Dữ liệu hiện tại là dữ liệu giả (mock data)
- Để kết nối với backend thực, cập nhật file `src/api/apiConfig.ts` và các hàm API
- Hệ thống hỗ trợ responsive design trên desktop, tablet, mobile
[V0_FILE]typescriptreact:file="src/_mock/jobs.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface Job {
  id: string;
  title: string;
  company: string;
  logo: string;
  salary: string;
  location: string;
  skills: string[];
  description: string;
  requirements: string;
  benefits: string;
  type: 'Full-time' | 'Part-time' | 'Remote';
  industry: string;
  views: number;
  applications: number;
  postedDate: string;
}

export const mockJobs: Job[] = [
  {
    id: '1',
    title: 'Frontend Developer',
    company: 'Tech Solutions Corp',
    logo: '/interconnected-tech.png',
    salary: '15-20 triệu',
    location: 'Hà Nội',
    skills: ['React', 'TypeScript', 'Tailwind CSS'],
    description: 'Chúng tôi đang tìm một Frontend Developer có kinh nghiệm với React và TypeScript',
    requirements: '2+ năm kinh nghiệm với React, có kiến thức về responsive design',
    benefits: 'Lương cạnh tranh, bảo hiểm, thưởng năm',
    type: 'Full-time',
    industry: 'Web',
    views: 234,
    applications: 12,
    postedDate: '2024-01-15'
  },
  {
    id: '2',
    title: 'Backend Engineer',
    company: 'Cloud Systems Inc',
    logo: '/single-cumulus-cloud.png',
    salary: '18-25 triệu',
    location: 'TP.HCM',
    skills: ['Node.js', 'PostgreSQL', 'Docker'],
    description: 'Tìm Backend Engineer để phát triển hệ thống microservices',
    requirements: '3+ năm kinh nghiệm Backend, am hiểu Docker và Kubernetes',
    benefits: 'Remote work, phần thưởng hiệu suất, đào tạo',
    type: 'Full-time',
    industry: 'Web',
    views: 156,
    applications: 8,
    postedDate: '2024-01-14'
  },
  {
    id: '3',
    title: 'Mobile Developer',
    company: 'App Innovations Ltd',
    logo: '/modern-smartphone-display.png',
    salary: 'Thỏa thuận',
    location: 'Đà Nẵng',
    skills: ['React Native', 'Flutter', 'Java'],
    description: 'Phát triển ứng dụng di động cho iOS và Android',
    requirements: '1-2 năm kinh nghiệm với React Native hoặc Flutter',
    benefits: 'Môi trường làm việc trẻ, setup tốt, team nhỏ',
    type: 'Part-time',
    industry: 'Mobile',
    views: 89,
    applications: 5,
    postedDate: '2024-01-13'
  },
  {
    id: '4',
    title: 'AI/ML Engineer',
    company: 'Data Science Hub',
    logo: '/abstract-ai-network.png',
    salary: '25-35 triệu',
    location: 'Hà Nội',
    skills: ['Python', 'TensorFlow', 'Machine Learning'],
    description: 'Xây dựng các mô hình Machine Learning tiên tiến',
    requirements: '2+ năm kinh nghiệm AI/ML, thành thạo Python',
    benefits: 'Mức lương cao, conference funding, stock options',
    type: 'Full-time',
    industry: 'AI',
    views: 312,
    applications: 15,
    postedDate: '2024-01-12'
  },
  {
    id: '5',
    title: 'Fullstack Developer',
    company: 'Digital Solutions',
    logo: '/fullstack-concept.png',
    salary: '20-28 triệu',
    location: 'Remote',
    skills: ['React', 'Node.js', 'MongoDB'],
    description: 'Tìm Fullstack Developer để xây dựng web application',
    requirements: 'Thành thạo cả Frontend và Backend',
    benefits: '100% remote, flexible hours, learning budget',
    type: 'Full-time',
    industry: 'Web',
    views: 245,
    applications: 18,
    postedDate: '2024-01-11'
  },
];

export interface Company {
  id: string;
  name: string;
  email: string;
  phone: string;
  taxId: string;
  address: string;
  description: string;
  status: 'approved' | 'pending';
  registeredDate: string;
}

export const mockCompanies: Company[] = [
  {
    id: '1',
    name: 'Tech Solutions Corp',
    email: 'hr@techsolutions.vn',
    phone: '0243 123 4567',
    taxId: '0123456789',
    address: 'Tòa nhà CBD, Hà Nội',
    description: 'Công ty chuyên về giải pháp công nghệ thông tin',
    status: 'approved',
    registeredDate: '2024-01-01'
  },
  {
    id: '2',
    name: 'Cloud Systems Inc',
    email: 'contact@cloudsys.vn',
    phone: '0834 567 8901',
    taxId: '0987654321',
    address: '456 Lê Lợi, TP.HCM',
    description: 'Chuyên cung cấp dịch vụ cloud computing',
    status: 'pending',
    registeredDate: '2024-01-15'
  },
];

export interface Application {
  id: string;
  jobId: string;
  studentId: string;
  studentName: string;
  gpa: number;
  status: 'submitted' | 'viewed' | 'passed' | 'rejected';
  submittedDate: string;
  skills: string[];
}

export const mockApplications: Application[] = [
  {
    id: 'app1',
    jobId: '1',
    studentId: 's1',
    studentName: 'Nguyễn Văn A',
    gpa: 3.5,
    status: 'submitted',
    submittedDate: '2024-01-20',
    skills: ['React', 'TypeScript', 'JavaScript']
  },
  {
    id: 'app2',
    jobId: '1',
    studentId: 's2',
    studentName: 'Trần Thị B',
    gpa: 3.8,
    status: 'viewed',
    submittedDate: '2024-01-19',
    skills: ['React', 'Tailwind CSS', 'Node.js']
  },
  {
    id: 'app3',
    jobId: '1',
    studentId: 's3',
    studentName: 'Phạm Minh C',
    gpa: 3.2,
    status: 'passed',
    submittedDate: '2024-01-18',
    skills: ['React', 'TypeScript', 'CSS']
  },
  {
    id: 'app4',
    jobId: '2',
    studentId: 's4',
    studentName: 'Lê Hoàng D',
    gpa: 3.7,
    status: 'rejected',
    submittedDate: '2024-01-17',
    skills: ['Node.js', 'PostgreSQL', 'Docker']
  },
  {
    id: 'app5',
    jobId: '2',
    studentId: 's5',
    studentName: 'Đào Quỳnh E',
    gpa: 3.9,
    status: 'submitted',
    submittedDate: '2024-01-21',
    skills: ['Python', 'Django', 'Docker']
  },
];

export interface StudentProfile {
  id: string;
  name: string;
  email: string;
  gpa: number;
  major: string;
  skills: string[];
  avatar: string;
  isPublic: boolean;
}

export const mockStudents: StudentProfile[] = [
  {
    id: 's1',
    name: 'Nguyễn Văn A',
    email: 'a.nguyen@student.edu.vn',
    gpa: 3.5,
    major: 'Web Development',
    skills: ['React', 'TypeScript', 'JavaScript', 'Node.js'],
    avatar: '/diverse-avatars.png',
    isPublic: true
  },
  {
    id: 's2',
    name: 'Trần Thị B',
    email: 'b.tran@student.edu.vn',
    gpa: 3.8,
    major: 'Web Development',
    skills: ['React', 'Tailwind CSS', 'Node.js', 'MongoDB'],
    avatar: '/diverse-avatars.png',
    isPublic: true
  },
  {
    id: 's3',
    name: 'Phạm Minh C',
    email: 'c.pham@student.edu.vn',
    gpa: 3.2,
    major: 'Data Science',
    skills: ['Python', 'TensorFlow', 'Machine Learning'],
    avatar: '/diverse-avatars.png',
    isPublic: false
  },
];

export interface StudentJob {
  id: string;
  jobId: string;
  jobTitle: string;
  company: string;
  submittedDate: string;
  status: 'Đã nộp' | 'Doanh nghiệp đã xem' | 'Đã qua vòng CV' | 'Không phù hợp';
}

export const mockStudentJobs: StudentJob[] = [
  {
    id: '1',
    jobId: '1',
    jobTitle: 'Frontend Developer',
    company: 'Tech Solutions Corp',
    submittedDate: '2024-01-15',
    status: 'Đã nộp'
  },
  {
    id: '2',
    jobId: '2',
    jobTitle: 'Backend Engineer',
    company: 'Cloud Systems Inc',
    submittedDate: '2024-01-14',
    status: 'Doanh nghiệp đã xem'
  },
  {
    id: '3',
    jobId: '3',
    jobTitle: 'Mobile Developer',
    company: 'App Innovations Ltd',
    submittedDate: '2024-01-13',
    status: 'Đã qua vòng CV'
  },
  {
    id: '4',
    jobId: '4',
    jobTitle: 'AI/ML Engineer',
    company: 'Data Science Hub',
    submittedDate: '2024-01-12',
    status: 'Không phù hợp'
  },
  {
    id: '5',
    jobId: '5',
    jobTitle: 'Fullstack Developer',
    company: 'Digital Solutions',
    submittedDate: '2024-01-11',
    status: 'Đã nộp'
  },
];
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import React from 'react'
import '../src/index.css'
import App from '../src/App'

export default function Page() {
  return <App />
}
[V0_FILE]typescriptreact:file="src/pages/student/JobDetails.tsx" isMerged="true"
import React, { useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Card, Tabs, Modal, message, Button, Descriptions, Row, Col, PageHeader, Tag } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { mockJobs, mockCompanies } from '../../_mock/jobs'
import '../student/JobDetails.css'

export default function JobDetails() {
  const { jobId } = useParams()
  const navigate = useNavigate()
  const [isModalVisible, setIsModalVisible] = useState(false)

const job = mockJobs.find(j => j.id === jobId)
  const company = mockCompanies.find(c => c.name === job?.company)

if (!job) {
    return <div className="job-details-container">Việc làm không tìm thấy</div>
  }

const handleSubmitCV = () => {
    setIsModalVisible(true)
  }

const handleConfirmSubmit = () => {
    setIsModalVisible(false)
    message.success('Nộp CV thành công! Vui lòng chờ doanh nghiệp xem xét.')
  }

const tabItems = [
    {
      key: '1',
      label: 'Mô tả Công việc',
      children: (
        <div className="job-details-content">
          <p>{job.description}</p>
          <p>Loại hình: {job.type}</p>
          <p>Ngành nghề: {job.industry}</p>
        </div>
      ),
    },
    {
      key: '2',
      label: 'Yêu cầu Ứng viên',
      children: (
        <div className="job-details-content">
          <p>{job.requirements}</p>
          <h4>Kỹ năng cần thiết:</h4>
          <div className="skills-list">
            {job.skills.map((skill, idx) => (
              <Tag key={idx} color="blue">{skill}</Tag>
            ))}
          </div>
        </div>
      ),
    },
    {
      key: '3',
      label: 'Quyền lợi & Phúc lợi',
      children: (
        <div className="job-details-content">
          <p>{job.benefits}</p>
          <h4>Mức lương: {job.salary}</h4>
        </div>
      ),
    },
  ]

return (
    <div className="job-details-container">
      <PageHeader
        onBack={() => navigate('/student/jobs')}
        title={job.title}
        subTitle={job.company}
        extra={
          <Button type="primary" size="large" onClick={handleSubmitCV}>
            Nộp CV Ngay
          </Button>
        }
      />

<Col xs={24} md={8}>
            <Card className="company-info-card">
              <h3>Thông tin Công ty</h3>
              <img src={company?.logo || job.logo} alt={job.company} className="company-logo" />
              <p className="company-name">{job.company}</p>
              <p className="company-detail">{company?.address}</p>

<Modal
        title="Xác nhận nộp CV"
        open={isModalVisible}
        onOk={handleConfirmSubmit}
        onCancel={() => setIsModalVisible(false)}
        okText="Nộp CV"
        cancelText="Hủy"
      >
        <p>Bạn có chắc chắn muốn nộp CV của mình cho vị trí <strong>{job.title}</strong> tại {job.company}?</p>
      </Modal>
    </div>
  )
}
[V0_FILE]css:file="src/pages/student/JobDetails.css" isMerged="true"
.job-details-container {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.job-details-body {
  margin-top: 24px;
}

.job-details-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.company-info-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.company-logo {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 16px 0;
  object-fit: cover;
}

.company-name {
  font-size: 18px;
  font-weight: bold;
  margin: 12px 0;
}

.company-detail {
  color: #666;
  font-size: 14px;
}

.job-stats-card {
  margin-top: 16px;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-details-content {
  line-height: 1.8;
  color: #333;
}

.job-details-content h4 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
[V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-avatars-K1qVYge2trPWCNm6kkjY04d7LcErVe.png" isMerged="true"
[V0_FILE]css:file="src/pages/admin/Statistics.css" isEdit="true" isMerged="true"
.statistics {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 24px 0;
}

/* Updated stats cards layout for responsive grid */
.stats-cards-row {
  width: 100%;
}

.stat-card {
  background-color: var(--background-white);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #1890ff;
  margin: 0 0 8px 0;
}

.stat-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* New styles for charts row and cards */
.charts-row {
  width: 100%;
}

.chart-card {
  background-color: var(--background-white);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.companies-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.companies-table thead {
  background-color: #fafafa;
}

.companies-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
}

.companies-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.companies-table tbody tr:hover {
  background-color: #fafafa;
}

.company-name {
  font-weight: 500;
  color: var(--text-primary);
}

.avg-applications {
  font-weight: 600;
  color: #1890ff;
}

@media (max-width: 768px) {
  .statistics {
    padding: 16px;
  }

.stat-number {
    font-size: 24px;
  }
}
[V0_FILE]markdown:file="SETUP_GUIDE.md" isEdit="true"
# Hướng dẫn Cài đặt và Chạy Hệ thống Quản lý Thực tập và Hỗ trợ Tuyển dụng
## (ReactJS Frontend + Django Backend)

Đây là hướng dẫn chi tiết để cài đặt, chạy, và sử dụng hệ thống frontend React với backend Django.

## 📋 Yêu cầu Hệ thống

### Frontend (ReactJS)
- **Node.js**: v16.0 hoặc cao hơn
- **npm**: v7.0 hoặc cao hơn (hoặc yarn/pnpm)
- **Trình duyệt**: Chrome, Firefox, Safari, Edge (phiên bản mới nhất)

### Backend (Django)
- **Python**: v3.8 hoặc cao hơn
- **pip**: Package manager cho Python
- **Virtual Environment**: `venv` hoặc `pipenv`

---

## 🚀 Cách Cài đặt

### PHẦN 1: Cài đặt Frontend (ReactJS)

#### Bước 1: Tải xuống Code Frontend

**Cách A: Download ZIP từ v0**
1. Nhấn nút "Download ZIP" ở góc trên phải của v0 interface
2. Giải nén file ZIP về máy của bạn
3. Mở thư mục vừa giải nén

**Cách B: Clone từ GitHub**
\`\`\`bash
git clone <link-github-của-bạn>
cd hethong-thuctap-tuyendung
\`\`\`

#### Bước 2: Cài đặt Dependencies Frontend

Trong thư mục dự án ReactJS, mở Terminal/Command Prompt và chạy:

\`\`\`bash
npm install
\`\`\`

Hoặc nếu bạn sử dụng yarn:
\`\`\`bash
yarn install
\`\`\`

#### Bước 3: Cấu hình Environment Variables

Tạo file `.env` trong thư mục gốc:

\`\`\`env
# Backend API URL
VITE_API_URL=http://localhost:8000/api
\`\`\`

Nếu sử dụng production, thay đổi thành URL của Django backend trên server.

#### Bước 4: Chạy Development Server Frontend

\`\`\`bash
npm run dev
\`\`\`

Frontend sẽ chạy tại: `http://localhost:5173`

---

### PHẦN 2: Cài đặt Backend (Django)

#### Bước 1: Tạo Virtual Environment

\`\`\`bash
# Windows
python -m venv venv
venv\Scripts\activate

# macOS / Linux
python3 -m venv venv
source venv/bin/activate
\`\`\`

#### Bước 2: Cài đặt Django Dependencies

Tạo file `requirements.txt` trong thư mục Django project:

\`\`\`
Django==4.2.0
djangorestframework==3.14.0
django-cors-headers==4.0.0
python-decouple==3.8
Pillow==9.5.0
\`\`\`

Cài đặt:
\`\`\`bash
pip install -r requirements.txt
\`\`\`

#### Bước 3: Cấu hình Django Settings

Trong file `settings.py` của Django:

\`\`\`python
# Thêm cors và rest_framework vào INSTALLED_APPS
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'yourapp',  # App của bạn
]

# Thêm middleware CORS
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... rest of middleware
]

# Cấu hình CORS cho phép React frontend
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "http://127.0.0.1:5173",
    # Thêm production domain sau
]

# Cấu hình REST Framework
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ],
}
\`\`\`

#### Bước 4: Chạy Django Server

\`\`\`bash
python manage.py migrate
python manage.py runserver
\`\`\`

Django sẽ chạy tại: `http://localhost:8000`

---

## 🔄 Kết nối Frontend + Backend

### Cấu hình API Endpoints

Chỉnh sửa file `src/api/apiConfig.ts` trong React project:

\`\`\`typescript
const API_BASE_URL = process.env.VITE_API_URL || 'http://localhost:8000/api';

export const apiConfig = {
  baseURL: API_BASE_URL,
};
\`\`\`

### API Endpoints Cần Implement trong Django

Backend cần cung cấp các endpoints sau:

\`\`\`
Authentication:
POST   /api/auth/login
POST   /api/auth/register
POST   /api/auth/logout

Students:
GET    /api/students/
GET    /api/students/{id}/
POST   /api/students/profile/
GET    /api/students/{id}/jobs-applied/

Jobs:
GET    /api/jobs/
POST   /api/jobs/
GET    /api/jobs/{id}/
PUT    /api/jobs/{id}/

Applications:
POST   /api/applications/
GET    /api/applications/
GET    /api/applications/{id}/
PATCH  /api/applications/{id}/status/

Companies:
GET    /api/companies/
POST   /api/companies/
GET    /api/companies/{id}/

Admin:
GET    /api/admin/statistics/
GET    /api/admin/companies/pending/
PATCH  /api/admin/companies/{id}/approve/
PATCH  /api/admin/companies/{id}/reject/
\`\`\`

---

## 🔐 Đăng Nhập Demo

Hiện tại hệ thống ReactJS hỗ trợ demo login. Khi kết nối backend thực:

| Vai trò | Email | Mật khẩu |
|---------|---|---|
| **Sinh viên** | student@example.com | password123 |
| **Doanh nghiệp** | company@example.com | password123 |
| **Khoa (Admin)** | admin@example.com | password123 |

---

## 📁 Cấu trúc Dự án

### Frontend (ReactJS)
\`\`\`
src/
├── components/          # React Components
├── pages/              # Các trang ứng dụng
│   ├── auth/          # Trang đăng nhập
│   ├── student/       # Trang sinh viên
│   ├── company/       # Trang doanh nghiệp
│   └── admin/         # Trang quản trị
├── api/               # API configuration & calls
├── context/           # React Context (Auth)
├── types/             # TypeScript types
├── routes/            # Router config
└── App.tsx            # Main component
\`\`\`

### Backend (Django)
\`\`\`
project/
├── manage.py
├── requirements.txt
├── project/
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── apps/
│   ├── authentication/    # Auth app
│   ├── students/          # Student app
│   ├── companies/         # Company app
│   ├── jobs/              # Job app
│   └── admin_panel/       # Admin app
└── db.sqlite3
\`\`\`

---

## 🔧 Cấu hình và Tuỳ chỉnh

### Thay đổi Port Frontend
Chỉnh sửa `vite.config.ts`:
\`\`\`typescript
export default defineConfig({
  server: {
    port: 3000  // Thay đổi port
  }
})
\`\`\`

### Thay đổi Port Backend
Chạy Django với port khác:
\`\`\`bash
python manage.py runserver 8001
\`\`\`

Cập nhật `.env`:
\`\`\`env
VITE_API_URL=http://localhost:8001/api
\`\`\`

---

## 🐛 Troubleshooting

### Lỗi: CORS Error
**Giải pháp**: Kiểm tra file `settings.py` Django, đảm bảo `CORS_ALLOWED_ORIGINS` có chứa URL của frontend:
\`\`\`python
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
]
\`\`\`

### Lỗi: 404 API Not Found
**Giải pháp**: Kiểm tra xem endpoints Django đã được implement chưa. Kiểm tra `urls.py` và routers.

### Lỗi: "Module not found" trong Django
**Giải pháp**: Kiểm tra xem `requirements.txt` đã cài đầy đủ:
\`\`\`bash
pip install -r requirements.txt
\`\`\`

### Lỗi: "Port 5173 already in use"
**Giải pháp**: Chạy frontend với port khác:
\`\`\`bash
npm run dev -- --port 3000
\`\`\`

### Lỗi: "Port 8000 already in use"
**Giải pháp**: 
\`\`\`bash
python manage.py runserver 8001
\`\`\`

### Lỗi: Trắng trang / API call fails
**Giải pháp**: 
- Kiểm tra console browser (F12) xem error gì
- Kiểm tra Django logs
- Đảm bảo cả frontend và backend đang chạy
- Kiểm tra `.env` file có cấu hình đúng API URL không

---

## 📦 Build và Deploy

### Build Frontend
\`\`\`bash
npm run build
\`\`\`

Output sẽ ở folder `dist/`. Deploy folder này lên hosting.

### Deploy Frontend trên Vercel
1. Push code lên GitHub
2. Truy cập https://vercel.com
3. Nhấn "New Project"
4. Chọn GitHub repository
5. Cấu hình environment variables (VITE_API_URL)
6. Deploy

### Deploy Backend Django

**Option 1: Heroku (Dễ)**
\`\`\`bash
pip install gunicorn
pip freeze > requirements.txt
heroku login
heroku create app-name
git push heroku main
\`\`\`

**Option 2: DigitalOcean / AWS / VPS**
1. Setup Ubuntu server
2. Cài đặt Python, PostgreSQL
3. Clone code
4. Cài dependencies
5. Chạy migrations
6. Setup Nginx + Gunicorn

---

## 📝 Ghi chú quan trọng

- **Authentication**: Cần implement JWT hoặc Token authentication trong Django
- **Database**: Production nên dùng PostgreSQL thay vì SQLite
- **File Upload**: Configure static/media files cho Django
- **Email**: Setup Email backend cho notifications
- **Security**: Cấu hình SECRET_KEY, DEBUG=False, ALLOWED_HOSTS trong production

---

## 🎓 Tiếp theo

1. **Đảm bảo cả frontend và backend đang chạy**
2. **Test các API endpoints bằng Postman**
3. **Implement authentication logic**
4. **Connect database models**
5. **Test tất cả features**
6. **Prepare for production deployment**

---

**Happy Coding! Chúc bạn phát triển dự án thành công.**a8:T2cbf4,[V0_FILE]typescriptreact:file="src/main.tsx" isMerged="true"
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { AuthProvider } from './context/AuthContext'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>,
)
[V0_FILE]typescriptreact:file="src/App.tsx" isMerged="true"
import { BrowserRouter as Router } from 'react-router-dom'
import AppRoutes from './routes/AppRoutes'
import './App.css'

function App() {
  return (
    <Router>
      <AppRoutes />
    </Router>
  )
}

export default App
[V0_FILE]typescriptreact:file="src/index.css" isMerged="true"
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
[V0_FILE]typescriptreact:file="src/App.css" isMerged="true"
:root {
  --primary-color: #1890ff;
  --primary-dark: #0050b3;
  --secondary-color: #13c2c2;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
  --background-light: #f5f5f5;
  --background-white: #ffffff;
  --border-color: #d9d9d9;
  --text-primary: #000000d9;
  --text-secondary: #00000073;
}

html[data-theme='dark'] {
  --primary-color: #1890ff;
  --background-light: #141414;
  --background-white: #1f1f1f;
  --border-color: #434343;
  --text-primary: #ffffffd9;
  --text-secondary: #ffffff73;
}

body {
  background-color: var(--background-light);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}
[V0_FILE]typescriptreact:file="src/_mock/cvs.ts" isMerged="true"
export interface StudentCV {
  id: string;
  name: string;
  email: string;
  phone: string;
  gpa: number;
  school: string;
  major: string;
  skills: string[];
  projects: Array<{
    name: string;
    description: string;
    role: string;
    skills: string[];
  }>;
  experience: string;
  graduationYear: number;
  submittedDate: string;
}

export const mockCVs: StudentCV[] = [
  {
    id: '101',
    name: 'Nguyễn Văn A',
    email: 'nguyenvan.a@student.edu.vn',
    phone: '0912345678',
    gpa: 3.8,
    school: 'Đại học Khoa học Tự nhiên',
    major: 'Công nghệ Thông tin',
    skills: ['React', 'Node.js', 'MongoDB', 'Python'],
    projects: [
      {
        name: 'E-commerce Platform',
        description: 'Xây dựng website bán hàng online',
        role: 'Fullstack Developer',
        skills: ['React', 'Node.js', 'MongoDB']
      }
    ],
    experience: 'Thực tập tại Tech Company 6 tháng',
    graduationYear: 2024,
    submittedDate: '2024-01-10'
  }
];

export const mockCompanies = [
  {
    id: '1',
    name: 'Tech Solutions Corp',
    email: 'hr@techsolutions.vn',
    phone: '0243 123 4567',
    taxId: '0123456789',
    address: 'Tòa nhà CBD, Hà Nội',
    description: 'Công ty chuyên về giải pháp công nghệ thông tin',
    status: 'approved',
    registeredDate: '2024-01-01'
  },
  {
    id: '2',
    name: 'Cloud Systems Inc',
    email: 'contact@cloudsys.vn',
    phone: '0834 567 8901',
    taxId: '0987654321',
    address: '456 Lê Lợi, TP.HCM',
    description: 'Chuyên cung cấp dịch vụ cloud computing',
    status: 'pending',
    registeredDate: '2024-01-15'
  }
];
[V0_FILE]typescriptreact:file="src/types/index.ts" isMerged="true"
export type UserRole = 'student' | 'company' | 'admin' | 'public';

export interface User {
  id: string;
  email: string;
  name: string;
  role: UserRole;
  avatar?: string;
}

export interface AuthContextType {
  user: User | null;
  loading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isAuthenticated: boolean;
}
[V0_FILE]typescriptreact:file="src/routes/AppRoutes.tsx" isEdit="true" isMerged="true"
import { Routes, Route, Navigate } from 'react-router-dom'
import ProtectedRoute from './ProtectedRoute'

// Pages
import LoginPage from '../pages/auth/LoginPage'
import StudentDashboard from '../pages/student/StudentDashboard'
import MyProfile from '../pages/student/MyProfile'
import JobSearch from '../pages/student/JobSearch'
import JobDetails from '../pages/student/JobDetails'
import AppliedJobs from '../pages/student/AppliedJobs'
import CompanyDashboard from '../pages/company/CompanyDashboard'
import PostJob from '../pages/company/PostJob'
import ManageJDs from '../pages/company/ManageJDs'
import SearchCVs from '../pages/company/SearchCVs'
import ManageApplications from '../pages/company/ManageApplications'
import AdminDashboard from '../pages/admin/AdminDashboard'
import ManageCompanies from '../pages/admin/ManageCompanies'
import ManageStudents from '../pages/admin/ManageStudents'
import ManageJobs from '../pages/admin/ManageJobs'
import Statistics from '../pages/admin/Statistics'

export default function AppRoutes() {
  return (
    <Routes>
      {/* Public Routes */}
      <Route path="/login" element={<LoginPage />} />
      <Route path="/" element={<Navigate to="/login" replace />} />

{/* Student Routes */}
      <Route
        path="/student/dashboard"
        element={<ProtectedRoute role="student" element={<StudentDashboard />} />}
      />
      <Route
        path="/student/profile"
        element={<ProtectedRoute role="student" element={<MyProfile />} />}
      />
      <Route
        path="/student/jobs"
        element={<ProtectedRoute role="student" element={<JobSearch />} />}
      />
      <Route
        path="/student/jobs/:jobId"
        element={<ProtectedRoute role="student" element={<JobDetails />} />}
      />
      <Route
        path="/student/applied"
        element={<ProtectedRoute role="student" element={<AppliedJobs />} />}
      />

{/* Company Routes */}
      <Route
        path="/company/dashboard"
        element={<ProtectedRoute role="company" element={<CompanyDashboard />} />}
      />
      <Route
        path="/company/post-job"
        element={<ProtectedRoute role="company" element={<PostJob />} />}
      />
      <Route
        path="/company/manage-jobs"
        element={<ProtectedRoute role="company" element={<ManageJDs />} />}
      />
      <Route
        path="/company/search-cv"
        element={<ProtectedRoute role="company" element={<SearchCVs />} />}
      />
      <Route
        path="/company/applications"
        element={<ProtectedRoute role="company" element={<ManageApplications />} />}
      />

{/* Admin Routes */}
      <Route
        path="/admin/dashboard"
        element={<ProtectedRoute role="admin" element={<AdminDashboard />} />}
      />
      <Route
        path="/admin/companies"
        element={<ProtectedRoute role="admin" element={<ManageCompanies />} />}
      />
      <Route
        path="/admin/students"
        element={<ProtectedRoute role="admin" element={<ManageStudents />} />}
      />
      <Route
        path="/admin/jobs"
        element={<ProtectedRoute role="admin" element={<ManageJobs />} />}
      />
      <Route
        path="/admin/statistics"
        element={<ProtectedRoute role="admin" element={<Statistics />} />}
      />

{/* Fallback */}
      <Route path="*" element={<Navigate to="/login" replace />} />
    </Routes>
  )
}
[V0_FILE]typescriptreact:file="src/routes/ProtectedRoute.tsx" isMerged="true"
import { Navigate } from 'react-router-dom'
import { useAuth } from '../hooks/useAuth'
import { UserRole } from '../types'

interface ProtectedRouteProps {
  role: UserRole;
  element: React.ReactElement;
}

export default function ProtectedRoute({ role, element }: ProtectedRouteProps) {
  const { user, loading } = useAuth()

if (loading) {
    return <div className="flex items-center justify-center h-screen">Loading...</div>
  }

if (!user) {
    return <Navigate to="/login" replace />
  }

if (user.role !== role) {
    return <Navigate to="/login" replace />
  }

return element
}
[V0_FILE]typescriptreact:file="src/context/AuthContext.tsx" isMerged="true"
import { createContext, useState, useEffect, ReactNode } from 'react'
import { User, AuthContextType } from '../types'

export const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

// Check if user is already logged in (from localStorage)
  useEffect(() => {
    const savedUser = localStorage.getItem('user')
    if (savedUser) {
      try {
        setUser(JSON.parse(savedUser))
      } catch (error) {
        console.error('Error parsing saved user:', error)
      }
    }
    setLoading(false)
  }, [])

const login = async (email: string, password: string) => {
    // Mock login logic - replace with actual API call later
    let role: User['role'] = 'public'
    let name = 'User'

if (email === 'student') {
      role = 'student'
      name = 'Sinh viên'
    } else if (email === 'company') {
      role = 'company'
      name = 'Công ty'
    } else if (email === 'admin') {
      role = 'admin'
      name = 'Quản trị viên'
    }

const newUser: User = {
      id: Math.random().toString(36).substr(2, 9),
      email,
      name,
      role,
    }

setUser(newUser)
    localStorage.setItem('user', JSON.stringify(newUser))
  }

const logout = () => {
    setUser(null)
    localStorage.removeItem('user')
  }

const value: AuthContextType = {
    user,
    loading,
    login,
    logout,
    isAuthenticated: !!user,
  }

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}
[V0_FILE]typescriptreact:file="src/hooks/useAuth.ts" isMerged="true"
import { useContext } from 'react'
import { AuthContext } from '../context/AuthContext'
import { AuthContextType } from '../types'

export function useAuth(): AuthContextType {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider')
  }
  return context
}
[V0_FILE]typescriptreact:file="src/utils/formatDate.ts" isMerged="true"
export function formatDate(date: string | Date): string {
  const d = typeof date === 'string' ? new Date(date) : date
  const day = String(d.getDate()).padStart(2, '0')
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const year = d.getFullYear()
  return `${day}/${month}/${year}`
}

export function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('vi-VN', {
    style: 'currency',
    currency: 'VND',
  }).format(amount)
}
[V0_FILE]typescriptreact:file="src/utils/validators.ts" isMerged="true"
export function isValidEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

export function isValidPhone(phone: string): boolean {
  const phoneRegex = /^0\d{9}$/
  return phoneRegex.test(phone)
}

export function isValidTaxId(taxId: string): boolean {
  return taxId.length === 10 && /^\d+$/.test(taxId)
}
[V0_FILE]typescriptreact:file="src/components/common/Spinner.tsx" isMerged="true"
export default function Spinner() {
  return (
    <div className="flex items-center justify-center h-screen bg-background-light">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-color"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="src/components/layout/MainLayout.tsx" isMerged="true"
import { useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { useAuth } from '../../hooks/useAuth'
import {
  DashboardOutlined,
  ProfileOutlined,
  SearchOutlined,
  CheckCircleOutlined,
  PlusCircleOutlined,
  AppstoreOutlined,
  SolutionOutlined,
  UsergroupAddOutlined,
  AuditOutlined,
  TeamOutlined,
  NotificationOutlined,
  BarChartOutlined,
  LogoutOutlined,
  MenuOutlined,
  CloseOutlined,
} from '@ant-design/icons'
import './MainLayout.css'

interface MainLayoutProps {
  children: React.ReactNode;
}

export default function MainLayout({ children }: MainLayoutProps) {
  const { user, logout } = useAuth()
  const navigate = useNavigate()
  const location = useLocation()
  const [sidebarOpen, setSidebarOpen] = useState(true)

const getMenuItems = () => {
    const baseItems = [
      { label: 'Dashboard', icon: DashboardOutlined, path: `/${user?.role}/dashboard` },
    ]

if (user?.role === 'student') {
      return [
        ...baseItems,
        { label: 'CV & Hồ sơ', icon: ProfileOutlined, path: '/student/profile' },
        { label: 'Tìm Kiếm Việc Làm', icon: SearchOutlined, path: '/student/jobs' },
        { label: 'Việc Làm Đã Nộp', icon: CheckCircleOutlined, path: '/student/applied' },
      ]
    } else if (user?.role === 'company') {
      return [
        ...baseItems,
        { label: 'Đăng Tin Tuyển Dụng', icon: PlusCircleOutlined, path: '/company/post-job' },
        { label: 'Quản Lý Tin Đăng', icon: AppstoreOutlined, path: '/company/manage-jobs' },
        { label: 'Tìm Kiếm CV', icon: SolutionOutlined, path: '/company/search-cv' },
        { label: 'Quản Lý Ứng Viên', icon: UsergroupAddOutlined, path: '/company/applications' },
      ]
    } else if (user?.role === 'admin') {
      return [
        ...baseItems,
        { label: 'Duyệt Doanh Nghiệp', icon: AuditOutlined, path: '/admin/companies' },
        { label: 'Quản Lý Sinh Viên', icon: TeamOutlined, path: '/admin/students' },
        { label: 'Quản Lý Tin Đăng', icon: NotificationOutlined, path: '/admin/jobs' },
        { label: 'Thống Kê', icon: BarChartOutlined, path: '/admin/statistics' },
      ]
    }

return baseItems
  }

const menuItems = getMenuItems()

const handleLogout = () => {
    logout()
    navigate('/login')
  }

return (
    <div className="main-layout">
      <div className="main-layout-header">
        <div className="header-left">
          <button
            className="sidebar-toggle"
            onClick={() => setSidebarOpen(!sidebarOpen)}
          >
            {sidebarOpen ? <CloseOutlined /> : <MenuOutlined />}
          </button>
          <h1 className="header-title">Hệ thống Cầu nối Việc làm</h1>
        </div>
        <div className="header-right">
          <span className="user-info">{user?.name}</span>
          <button
            className="logout-btn"
            onClick={handleLogout}
            title="Đăng xuất"
          >
            <LogoutOutlined />
          </button>
        </div>
      </div>

<div className="main-layout-container">
        <div className={`main-layout-sidebar ${sidebarOpen ? 'open' : 'closed'}`}>
          <nav className="sidebar-menu">
            {menuItems.map((item) => {
              const Icon = item.icon
              const isActive = location.pathname.startsWith(item.path)
              return (
                <button
                  key={item.path}
                  className={`menu-item ${isActive ? 'active' : ''}`}
                  onClick={() => {
                    navigate(item.path)
                    setSidebarOpen(false)
                  }}
                >
                  <Icon className="menu-icon" />
                  <span className="menu-label">{item.label}</span>
                </button>
              )
            })}
          </nav>
        </div>

<div className="main-layout-content">
          {children}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="src/components/layout/MainLayout.css" isMerged="true"
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-light);
}

.main-layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  background-color: var(--background-white);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-primary);
}

.header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  font-size: 14px;
  color: var(--text-primary);
}

.logout-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-primary);
  transition: color 0.3s;
}

.logout-btn:hover {
  color: var(--error-color);
}

.main-layout-container {
  display: flex;
  flex: 1;
}

.main-layout-sidebar {
  width: 250px;
  background-color: var(--background-white);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  transition: transform 0.3s;
}

.main-layout-sidebar.closed {
  display: none;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 0;
  list-style: none;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  width: 100%;
  text-align: left;
}

.menu-item:hover {
  background-color: rgba(24, 144, 255, 0.1);
  color: var(--primary-color);
}

.menu-item.active {
  background-color: rgba(24, 144, 255, 0.15);
  color: var(--primary-color);
  border-left: 3px solid var(--primary-color);
  padding-left: 17px;
}

.menu-icon {
  font-size: 16px;
}

.menu-label {
  font-weight: 500;
}

.main-layout-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .sidebar-toggle {
    display: block;
  }

.main-layout-sidebar {
    position: absolute;
    left: 0;
    top: 64px;
    height: calc(100vh - 64px);
    z-index: 999;
    transform: translateX(-100%);
  }

.main-layout-sidebar.open {
    transform: translateX(0);
  }

.main-layout-content {
    padding: 16px;
  }
}
[V0_FILE]typescriptreact:file="vite.config.ts" isMerged="true"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
})
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForModule": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "moduleResolution": "bundler"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.app.json" }]
}
[V0_FILE]png:file="public/interconnected-tech.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/interconnected-tech-c3J1zzIAaOYEwY1TuaEmohaRWJ4F9L.png" isMerged="true"
[V0_FILE]png:file="public/single-cumulus-cloud.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/single-cumulus-cloud-DiSOAuvuJd35i0723Yx3kaLDXYeqlw.png" isMerged="true"
[V0_FILE]png:file="public/modern-smartphone-display.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-smartphone-display-ZNlQYpE9h2nG24rFaOP3JdmARvd8YK.png" isMerged="true"
[V0_FILE]png:file="public/abstract-ai-network.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-ai-network-AUVznTZ8jNZf0rd8CgPxKIoj2jxrzK.png" isMerged="true"
[V0_FILE]png:file="public/fullstack-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fullstack-concept-Q1XYU4wfI8UJTnYy5Wal1bD66ZoKFE.png" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.3",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76",
    "react-router-dom": "7.9.6",
    "@ant-design/icons": "6.1.0",
    "vite": "7.2.2",
    "@vitejs/plugin-react": "5.1.1",
    "axios": "1.13.2",
    "antd": "5.29.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="src/pages/auth/LoginPage.tsx" isMerged="true"
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../../hooks/useAuth'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './LoginPage.css'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const { login } = useAuth()
  const navigate = useNavigate()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

if (!email.trim() || !password.trim()) {
      setError('Vui lòng nhập email và mật khẩu')
      return
    }

setLoading(true)
    try {
      await login(email, password)
      
      // Redirect based on role (mock)
      if (email === 'student') {
        navigate('/student/dashboard')
      } else if (email === 'company') {
        navigate('/company/dashboard')
      } else if (email === 'admin') {
        navigate('/admin/dashboard')
      }
    } catch (err) {
      setError('Đăng nhập thất bại')
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="login-page">
      <div className="login-container">
        <div className="login-card">
          <div className="login-logo">
            <img src="/interconnected-tech.png" alt="Logo" />
          </div>

<h2 className="login-title">Hệ thống Cầu nối Việc làm</h2>
          <p className="login-subtitle">Đăng nhập để tiếp tục</p>

<form onSubmit={handleSubmit} className="login-form">
            {error && <div className="login-error">{error}</div>}

<div className="form-group">
              <label htmlFor="email">Email</label>
              <div className="input-wrapper">
                <UserOutlined className="input-icon" />
                <input
                  id="email"
                  type="text"
                  placeholder="student, company, hoặc admin"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="input-field"
                />
              </div>
            </div>

<div className="form-group">
              <label htmlFor="password">Mật khẩu</label>
              <div className="input-wrapper">
                <LockOutlined className="input-icon" />
                <input
                  id="password"
                  type="password"
                  placeholder="Mật khẩu"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="input-field"
                />
              </div>
            </div>

<button
              type="submit"
              className="login-button"
              disabled={loading}
            >
              {loading ? 'Đang đăng nhập...' : 'Đăng nhập'}
            </button>
          </form>

<div className="login-footer">
            <p>Chưa có tài khoản?</p>
            <div className="signup-links">
              <a href="#" className="signup-link">Đăng ký Doanh nghiệp</a>
              <span> | </span>
              <a href="#" className="signup-link">Đăng ký Sinh viên</a>
            </div>
          </div>

<div className="demo-info">
            <p>Demo: Nhập "student", "company" hoặc "admin" để kiểm tra</p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="src/pages/auth/LoginPage.css" isMerged="true"
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-container {
  width: 100%;
  max-width: 400px;
}

.login-card {
  background: var(--background-white);
  border-radius: 8px;
  padding: 40px 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.login-logo {
  text-align: center;
  margin-bottom: 24px;
}

.login-logo img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.login-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.login-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-white);
  transition: all 0.3s;
}

.input-wrapper:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.input-icon {
  font-size: 16px;
  color: var(--text-secondary);
}

.input-field {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: none;
  color: var(--text-primary);
}

.input-field::placeholder {
  color: var(--text-secondary);
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-secondary);
}

.checkbox input {
  cursor: pointer;
}

.forgot-password {
  color: var(--primary-color);
  text-decoration: none;
  transition: opacity 0.3s;
}

.forgot-password:hover {
  opacity: 0.8;
}

.login-button {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 40px;
}

.login-button:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.login-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-secondary);
}

.signup-links {
  margin-top: 8px;
}

.signup-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.3s;
}

.signup-link:hover {
  opacity: 0.8;
}

.demo-info {
  text-align: center;
  margin-top: 16px;
  padding: 12px;
  background-color: rgba(24, 144, 255, 0.1);
  border-radius: 4px;
  font-size: 12px;
  color: var(--primary-color);
}

@media (max-width: 480px) {
  .login-card {
    padding: 32px 20px;
  }

.login-title {
    font-size: 20px;
  }

.login-logo img {
    width: 60px;
    height: 60px;
  }
}
[V0_FILE]typescriptreact:file="src/api/apiConfig.ts" isMerged="true"
import axios, { AxiosInstance, AxiosConfig } from 'axios'

const apiConfig: AxiosConfig = {
  baseURL: 'http://localhost:8000/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
}

const apiClient: AxiosInstance = axios.create(apiConfig)

// Add token to requests if available
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('authToken')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// Handle response errors
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('authToken')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default apiClient
[V0_FILE]typescriptreact:file="src/api/authApi.ts" isMerged="true"
import apiClient from './apiConfig'
import { User } from '../types'

export const authApi = {
  login: (email: string, password: string) =>
    apiClient.post<{ user: User; token: string }>('/auth/login', { email, password }),

logout: () =>
    apiClient.post('/auth/logout'),

getCurrentUser: () =>
    apiClient.get<User>('/auth/me'),

updateProfile: (data: Record<string, any>) =>
    apiClient.put('/auth/profile', data),
}
[V0_FILE]typescriptreact:file="src/api/jobApi.ts" isMerged="true"
import apiClient from './apiConfig'
import { Job } from '../_mock/jobs'

export const jobApi = {
  getJobs: (params?: Record<string, any>) =>
    apiClient.get<Job[]>('/jobs', { params }),

getJobById: (id: string) =>
    apiClient.get<Job>(`/jobs/${id}`),

postJob: (data: Record<string, any>) =>
    apiClient.post<Job>('/jobs', data),

updateJob: (id: string, data: Record<string, any>) =>
    apiClient.put<Job>(`/jobs/${id}`, data),

deleteJob: (id: string) =>
    apiClient.delete(`/jobs/${id}`),

applyJob: (jobId: string) =>
    apiClient.post(`/jobs/${jobId}/apply`),

getApplications: (params?: Record<string, any>) =>
    apiClient.get<any[]>('/applications', { params }),
}
[V0_FILE]typescriptreact:file="src/api/cvApi.ts" isMerged="true"
import apiClient from './apiConfig'
import { StudentCV } from '../_mock/cvs'

export const cvApi = {
  getCVs: (params?: Record<string, any>) =>
    apiClient.get<StudentCV[]>('/cvs', { params }),

getCVById: (id: string) =>
    apiClient.get<StudentCV>(`/cvs/${id}`),

uploadCV: (file: File) => {
    const formData = new FormData()
    formData.append('file', file)
    return apiClient.post('/cvs/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    })
  },

updateProfile: (data: Partial<StudentCV>) =>
    apiClient.put('/cvs/profile', data),

createProfile: (data: StudentCV) =>
    apiClient.post('/cvs', data),
}
[V0_FILE]typescriptreact:file="src/pages/student/StudentDashboard.tsx" isMerged="true"
import { useState, useMemo } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { mockJobs } from '../../_mock/jobs'
import { BellOutlined, FileTextOutlined, EyeOutlined, HeartOutlined } from '@ant-design/icons'
import './StudentDashboard.css'

export default function StudentDashboard() {
  const [likedJobs, setLikedJobs] = useState<Set<string>>(new Set())

const stats = useMemo(() => [
    { label: 'Việc làm đã nộp', value: '5', icon: FileTextOutlined, color: 'blue' },
    { label: 'Việc làm phù hợp', value: '12', icon: HeartOutlined, color: 'red' },
    { label: 'Lượt xem hồ sơ', value: '8', icon: EyeOutlined, color: 'green' },
  ], [])

const recentJobs = mockJobs.slice(0, 5)

return (
    <MainLayout>
      <div className="student-dashboard">
        <h1 className="page-title">Chào mừng, Sinh viên!</h1>

{/* Alert */}
        <div className="alert-info">
          <BellOutlined className="alert-icon" />
          <div className="alert-content">
            <span className="alert-text">Hồ sơ của bạn đã hoàn thành 80%.</span>
            <a href="/student/profile" className="alert-link">Hoàn thành ngay!</a>
          </div>
        </div>

{/* Statistics Cards */}
        <div className="stats-grid">
          {stats.map((stat, index) => {
            const IconComponent = stat.icon
            return (
              <div key={index} className={`stat-card stat-${stat.color}`}>
                <div className="stat-icon">
                  <IconComponent />
                </div>
                <div className="stat-info">
                  <div className="stat-value">{stat.value}</div>
                  <div className="stat-label">{stat.label}</div>
                </div>
              </div>
            )
          })}
        </div>

{/* Recent Jobs */}
        <div className="recent-jobs-card">
          <div className="card-header">
            <h2 className="card-title">Gợi ý Việc làm Mới nhất</h2>
            <a href="/student/jobs" className="view-all-link">Xem tất cả</a>
          </div>

<div className="jobs-list">
            {recentJobs.map((job) => (
              <div key={job.id} className="job-item">
                <div className="job-header">
                  <img src={job.logo || "/placeholder.svg"} alt={job.company} className="job-logo" />
                  <div className="job-main-info">
                    <h3 className="job-title">{job.title}</h3>
                    <p className="job-company">{job.company}</p>
                  </div>
                  <button
                    className={`like-btn ${likedJobs.has(job.id) ? 'liked' : ''}`}
                    onClick={() => {
                      const newLiked = new Set(likedJobs)
                      if (newLiked.has(job.id)) {
                        newLiked.delete(job.id)
                      } else {
                        newLiked.add(job.id)
                      }
                      setLikedJobs(newLiked)
                    }}
                  >
                    <HeartOutlined />
                  </button>
                </div>
                <div className="job-details">
                  <span className="job-salary">{job.salary}</span>
                  <span className="job-location">{job.location}</span>
                  <span className={`job-type ${job.type.toLowerCase()}`}>{job.type}</span>
                </div>
                <div className="job-skills">
                  {job.skills.slice(0, 3).map((skill) => (
                    <span key={skill} className="skill-tag">{skill}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </MainLayout>
  )
}
[V0_FILE]css:file="src/pages/student/StudentDashboard.css" isMerged="true"
.student-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.alert-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background-color: rgba(24, 144, 255, 0.1);
  border-left: 4px solid var(--primary-color);
  border-radius: 4px;
}

.alert-icon {
  font-size: 16px;
  color: var(--primary-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.alert-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.alert-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--background-white);
  border-radius: 8px;
  border-left: 4px solid;
}

.stat-card.stat-blue {
  border-left-color: var(--primary-color);
}

.stat-card.stat-red {
  border-left-color: var(--error-color);
}

.stat-card.stat-green {
  border-left-color: var(--success-color);
}

.stat-icon {
  font-size: 28px;
  color: var(--primary-color);
  min-width: 40px;
}

.stat-card.stat-red .stat-icon {
  color: var(--error-color);
}

.stat-card.stat-green .stat-icon {
  color: var(--success-color);
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.recent-jobs-card {
  background-color: var(--background-white);
  border-radius: 8px;
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.view-all-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.3s;
}

.job-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.job-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.job-logo {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.job-main-info {
  flex: 1;
}

.job-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.job-company {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.like-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.3s;
  padding: 4px;
}

.like-btn:hover {
  color: var(--error-color);
}

.like-btn.liked {
  color: var(--error-color);
}

.job-details {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}

.job-salary {
  color: var(--success-color);
  font-weight: 600;
}

.job-location {
  color: var(--text-secondary);
}

.job-type {
  padding: 2px 8px;
  background-color: rgba(24, 144, 255, 0.1);
  color: var(--primary-color);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
}

.job-type.remote {
  background-color: rgba(19, 194, 194, 0.1);
  color: var(--secondary-color);
}

.job-type.part-time {
  background-color: rgba(250, 173, 20, 0.1);
  color: var(--warning-color);
}

.job-skills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.skill-tag {
  padding: 4px 10px;
  background-color: var(--background-light);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

.job-header {
    flex-wrap: wrap;
  }
}
[V0_FILE]typescriptreact:file="src/pages/student/MyProfile.tsx" isMerged="true"
import { useState } from 'react'
import MainLayout from '../../components/layout/MainLayout'
import { PlusOutlined, DeleteOutlined, SaveOutlined } from '@ant-design/icons'
import './MyProfile.css'

export default function MyProfile() {
  const [activeTab, setActiveTab] = useState<'online' | 'upload'>('online')
  const [activeStep, setActiveStep] = useState(1)
  const [profileData, setProfileData] = useState({
    fullName: 'Nguyễn Văn A',
    dateOfBirth: '2002-05-15',
    gender: 'male',
    email: 'nguyenvan.a@student.edu.vn',
    phone: '0912345678',
    objective: 'Tìm kiếm vị trí Frontend Developer',
    school: 'Đại học Khoa học Tự nhiên',
    major: 'Công nghệ Thông tin',
    gpa: '3.8',
    startYear: '2020',
    endYear: '2024',
    skills: ['React', 'TypeScript', 'Node.js', 'MongoDB'],
    projects: [
      {
        name: 'E-commerce Platform',
        description: 'Website bán hàng online',
        role: 'Fullstack Developer',
        projectSkills: 'React, Node.js, MongoDB',
      }
    ],
  })

const [uploadedFile, setUploadedFile] = useState<File | null>(null)

const steps = [
    { id: 1, label: 'Thông tin cá nhân' },
    { id: 2, label: 'Học vấn' },
    { id: 3, label: 'Kỹ năng' },
    { id: 4, label: 'Dự án & Kinh nghiệm' },
  ]

const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.[0]) {
      setUploadedFile(e.target.files[0])
    }
  }

const handleAddProject = () => {
    setProfileData({
      ...profileData,
      projects: [
        ...profileData.projects,
        { name: '', description: '', role: '', projectSkills: '' }
      ]
    })
  }

const handleRemoveProject = (index: number) => {
    setProfileData({
      ...profileData,
      projects: profileData.projects.filter((_, i) => i !== index)
    })
  }

const handleSave = () => {
    console.log('Saving profile:', profileData)
    alert('Hồ sơ đã được lưu thành công!')
  }

return (
    <MainLayout>
      <div className="my-profile">
        <h1 className="page-title">CV & Hồ sơ</h1>

<div className="tabs-container">
          <div className="tabs">
            <button
              className={`tab ${activeTab === 'online' ? 'active' : ''}`}
              onClick={() => { setActiveTab('online'); setActiveStep(1); }}
            >
              Tạo CV Online
            </button>
            <button
              className={`tab ${activeTab === 'upload' ? 'active' : ''}`}
              onClick={() => setActiveTab('upload')}
            >
              Tải lên CV (PDF/DOCX)
            </button>
          </div>

<div className="tab-content">
            {activeTab === 'online' ? (
              // Online CV Builder
              <div className="online-cv">
                <div className="steps-container">
                  <div className="steps">
                    {steps.map((step, idx) => (
                      <div
                        key={step.id}
                        className={`step ${activeStep >= step.id ? 'active' : ''} ${activeStep === step.id ? 'current' : ''}`}
                        onClick={() => setActiveStep(step.id)}
                      >
                        <div className="step-number">{step.id}</div>
                        <div className="step-label">{step.label}</div>
                      </div>
                    ))}
                  </div>
                </div>

{/* Step 1: Personal Info */}
                {activeStep === 1 && (
                  <div className="step-content">
                    <h3 className="step-title">Thông tin cá nhân</h3>
                    <div className="form-grid">
                      <div className="form-group">
                        <label>Họ tên *</label>
                        <input
                          type="text"
                          value={profileData.fullName}
                          onChange={(e) => setProfileData({ ...profileData, fullName: e.target.value })}
                          placeholder="Nhập họ tên"
                        />
                      </div>
                      <div className="form-group">
                        <label>Ngày sinh</label>
                        <input
                          type="date"
                          value={profileData.dateOfBirth}
                          onChange={(e) => setProfileData({ ...profileData, dateOfBirth: e.target.value })}
                        />
                      </div>
                      <div className="form-group">
                        <label>Giới tính</label>
                        <select
                          value={profileData.gender}
                          onChange={(e) => setProfileData({ ...profileData, gender: e.target.value })}
                        >
                          <option value="male">Nam</option>
                          <option value="female">Nữ</option>
                          <option value="other">Khác</option>
                        </select>
                      </div>
                      <div className="form-group">
                        <label>Email</label>
                        <input
                          type="email"
                          value={profileData.email}
                          onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
                          placeholder="Email"
                        />
                      </div>
                      <div className="form-group">
                        <label>Số điện thoại</label>
                        <input
                          type="tel"
                          value={profileData.phone}
                          onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
                          placeholder="Số điện thoại"
                        />
                      </div>
                      <div className="form-group full-width">
                        <label>Mục tiêu nghề nghiệp</label>
                        <textarea
                          rows={3}
                          value={profileData.objective}
                          onChange={(e) => setProfileData({ ...profileData, objective: e.target.value })}
                          placeholder="Viết về mục tiêu nghề nghiệp của bạn"
                        />
                      </div>
                    </div>
                  </div>
                )}