// Korico Dashboard — logged-in home const { useState, useEffect, useRef, useMemo } = React; /* ============================================================ ROOT APP ============================================================ */ function App() { const [navOpen, setNavOpen] = useState(false); const [active, setActive] = useState("home"); // Tax state lifted so sub-pages share it const [taxStatus, setTaxStatus] = useState("parttime"); const [jobs, setJobs] = useState(SEED_JOBS); const [editingJob, setEditingJob] = useState(null); const [toast, setToast] = useState(""); const flash = (m) => { setToast(m); setTimeout(() => setToast(""), 3200); }; const taxState = { taxStatus, setTaxStatus, jobs, setJobs, editingJob, setEditingJob, flash }; // Forms state const [selectedFormId, setSelectedFormId] = useState(null); const [savedFormIds, setSavedFormIds] = useState(new Set()); const formsState = { selectedFormId, setSelectedFormId, savedFormIds, setSavedFormIds, flash }; // Chat state — shared between floating button and full chat page const [conversations, setConversations] = useState(SEED_CONVERSATIONS); const [activeConvId, setActiveConvId] = useState(SEED_CONVERSATIONS[0]?.id || null); const [chatContext, setChatContext] = useState(null); const chatState = { conversations, setConversations, activeConvId, setActiveConvId, chatContext, setChatContext, flash, }; // Map sub-page → parent nav key for sidebar highlight const parentKey = ({ "tax-newjob": "tax", "tax-checklist": "tax", "tax-tasks": "tax", "tax-guides": "tax", "forms-detail": "forms", "form-fill-d2": "forms", "form-fill-occupation": "forms", "visa-plan-d2-d10": "visa", "visa-f2-calc": "visa", })[active] || active; return (
{ setActive(k); setNavOpen(false); }} onMenu={() => setNavOpen(true)} navOpen={navOpen} onCloseMobile={() => setNavOpen(false)} />
setNavOpen(true)} active={active} onNavigate={setActive} taxState={taxState} formsState={formsState} chatState={chatState} /> setActive("chat")} hidden={active === "chat"} />
); } /* ============================================================ TOP NAV (new shell — replaces the thick left sidebar) ============================================================ */ const TOP_NAV = [ { key: "home", label: "Dashboard" }, { label: "Visa & ARC", children: [ { key: "visa", label: "Visa & status", icon: "id" }, { key: "arc", label: "ARC", icon: "credit-card" }, ], }, { label: "Life in Korea", children: [ { key: "tax", label: "Tax & work", icon: "report-money" }, { key: "housing", label: "Housing & moving", icon: "home" }, { key: "legal", label: "Legal & 행정사", icon: "scale" }, ], }, { key: "forms", label: "Forms" }, { key: "chat", label: "Korico chat" }, ]; function TopNav({ active, onSelect, navOpen, onCloseMobile }) { const [openMenu, setOpenMenu] = useState(null); const ref = useRef(null); useEffect(() => { const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpenMenu(null); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); const isActive = (item) => { if (item.key) return active === item.key; if (item.children) return item.children.some((c) => c.key === active); return false; }; return ( <>
{/* Logo */} Korico {/* Primary nav (center-left, hidden on mobile) */} {/* Right: visa pill + language + profile */}
D-2 ARC · 2026.03.15
EN
{/* Mobile menu sheet */} {openMenu === "mobile" && (
{TOP_NAV.map((item) => (
{item.key ? ( ) : ( <>
{item.label}
{item.children.map((c) => ( ))} )}
))}
)}
); } function TopNavItem({ item, isActive, openMenu, setOpenMenu, onSelect }) { const hasKids = !!item.children; const open = hasKids && openMenu === item.label; const closeTimer = useRef(null); const scheduleClose = () => { if (closeTimer.current) clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setOpenMenu(null), 120); }; const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }; useEffect(() => () => { if (closeTimer.current) clearTimeout(closeTimer.current); }, []); if (!hasKids) { return ( ); } return (
{ cancelClose(); setOpenMenu(item.label); }} onMouseLeave={scheduleClose} > {/* Invisible bridge so the cursor can travel from button to menu without dropping hover */} {open && (
)} {open && (
{item.children.map((c) => ( ))}
)}
); } /* ============================================================ LEGACY SIDEBAR (kept for compatibility — no longer rendered) ============================================================ */ const NAV = [ { group: null, items: [ { key: "home", label: "Overview", icon: "layout-grid" }, { key: "files", label: "My files", icon: "user-circle" }, ], }, { group: "Visa & ARC", items: [ { key: "visa", label: "Visa & status", icon: "id" }, { key: "arc", label: "ARC", icon: "credit-card" }, ], }, { group: "Life in Korea", items: [ { key: "tax", label: "Tax & work", icon: "report-money" }, { key: "housing", label: "Housing & moving", icon: "home" }, { key: "legal", label: "Legal & 행정사", icon: "scale" }, ], }, { group: "Tools", items: [ { key: "forms", label: "Forms & templates", icon: "file-text" }, { key: "chat", label: "Korico chat", icon: "message-circle" }, ], }, { group: null, items: [ { key: "settings", label: "Settings", icon: "settings" }, ], }, ]; function Sidebar({ open, onClose, active, onSelect }) { return ( <> {/* mobile overlay */}
); } function SideLink({ item, active, onClick }) { return ( ); } /* ============================================================ MAIN ============================================================ */ function Main({ onMenu, active, onNavigate, taxState, formsState, chatState }) { const page = active === "files" ? : active === "visa" ? : active === "visa-plan-d2-d10" ? : active === "visa-f2-calc" ? : active === "arc" ? : active === "tax" ? : active === "tax-newjob" ? : active === "tax-checklist" ? : active === "tax-tasks" ? : active === "tax-guides" ? : active === "housing" ? : active === "legal" ? : active === "forms" ? : active === "forms-detail" ? : active === "form-fill-d2" ? : active === "form-fill-occupation" ? : active === "chat" ? : ; const hideTopBar = active === "form-fill-d2" || active === "form-fill-occupation"; const isHome = active === "home"; return (
{!hideTopBar && !isHome && } {page}
); } function TopBar({ onMenu, active }) { const headings = { files: { title: "My files", sub: "Everything we know about you — pre-filled and reusable across visa applications." }, visa: { title: "Visa & status", sub: "See your current visa, key dates, and Korico's suggested next steps." }, "visa-plan-d2-d10": { title: "D-2 → D-10 transition plan", sub: "A guided 5-step plan so the switch from student to job-seeker visa never blocks you." }, "visa-f2-calc": { title: "F-2 points calculator", sub: "Estimate your F-2 long-term residence score based on age, education, Korean ability, income, and family situation." }, arc: { title: "ARC", sub: "Keep your foreign registration up to date to avoid fines and immigration problems." }, tax: { title: "Tax & work", sub: "Track your jobs, contracts, and basic tax obligations in Korea — Korico gives general guidance only." }, "tax-newjob": { title: "Add a job", sub: "Save a new role so Korico can track contracts and tax events for you." }, "tax-checklist": { title: "Work basics checklist", sub: "Quick checks that the fundamentals of working in Korea are covered." }, "tax-tasks": { title: "Tax tasks & deadlines", sub: "Every task Korico has lined up for your tax year." }, "tax-guides": { title: "Tax guides for Korea", sub: "Short, plain-language explainers — pick the one closest to your situation." }, housing: { title: "Housing & moving", sub: "Keep track of your home in Korea, from contracts to address changes." }, legal: { title: "Legal & 행정사", sub: "Browse immigration and administrative professionals and save the ones that fit your needs. Korico does not rank or recommend any specific office." }, forms: { title: "Forms & templates", sub: "Find the forms you need for visas, ARC, work, housing, and taxes. Korico links to official sources and adds plain-language helper notes." }, "forms-detail": { title: "Forms & templates", sub: "Read the helper notes, then open the official form or fill it with Korico." }, chat: { title: "Korico chat", sub: "A focused workspace for everything you want to ask Korico — visas, housing, tax, contracts." }, }; const heading = headings[active] || { title: "Hi, Minh Anh.", sub: "Here's where you are in your Korea journey today." }; return (
{heading.title}
{heading.sub}
D-2 Student · ARC valid to 2026.03.15
); } function Grid({ onNavigate, chatState }) { return (
{/* Soft greeting strip — replaces the old TopBar inside the new shell */}
Welcome back
Hi, Minh Anh — here's your Korea snapshot.
{/* Two-column Lambda-style layout */}
{/* LEFT — Context / filters card (sticky) */} {/* RIGHT — Card stack */}
); } /* ------------------------------------------------------------ CONTEXT CARD — left sticky column for Dashboard (new) ------------------------------------------------------------ */ function ContextCard({ onNavigate }) { const [focusFilter, setFocusFilter] = useState("all"); const focusItems = [ { id: "arc", label: "ARC renewal", when: "in 132 days", tone: "warn", route: "arc", icon: "credit-card" }, { id: "tax", label: "Year-end tax filing", when: "Jan 2026", tone: "neutral", route: "tax", icon: "report-money" }, { id: "visa", label: "D-2 → D-10 plan", when: "Plan ahead", tone: "info", route: "visa-plan-d2-d10", icon: "id" }, { id: "house", label: "전입신고 reminder", when: "Within 14 days", tone: "warn", route: "housing", icon: "home" }, ]; const filters = [ { id: "all", label: "All" }, { id: "warn", label: "Soon" }, { id: "info", label: "Planning" }, { id: "neutral", label: "Routine" }, ]; const filtered = focusFilter === "all" ? focusItems : focusItems.filter((f) => f.tone === focusFilter); return (
{/* Profile row */}
MA
Minh Anh Nguyễn
Hanoi, VN · Studying at SNU
{/* Visa pill row */}
D-2 STUDENT ARC to 2026.03.15
{/* Focus filters */}
Upcoming focus
{filters.map((f) => { const isOn = focusFilter === f.id; return ( ); })}
{/* Focus list */}
{filtered.length === 0 ? (
Nothing here for this filter.
) : filtered.map((f) => { const toneColors = { warn: { bg: "#FEF3E0", fg: "#A35A00" }, info: { bg: "#E8F0FE", fg: "#1A50B8" }, neutral: { bg: "var(--bg-soft)", fg: "var(--ink)" }, }[f.tone]; return ( ); })}
{/* Quick actions */}
Quick actions
{[ { icon: "file-text", label: "Forms", route: "forms" }, { icon: "folder", label: "My files", route: "files" }, { icon: "scale", label: "Legal", route: "legal" }, { icon: "report-money", label: "Tax", route: "tax" }, ].map((q) => ( ))}
); } /* ------------------------------------------------------------ SLIM ASK KORICO — compact bar for the right column ------------------------------------------------------------ */ function SlimAskKorico({ onNavigate, chatState }) { const [text, setText] = useState(""); const [focused, setFocused] = useState(false); const { setConversations, setActiveConvId, setChatContext } = chatState || {}; const submit = (raw) => { const value = (raw ?? text).trim(); if (!value || !chatState) return; const id = "c" + (Date.now() % 100000); setConversations((arr) => [ { id, title: value.length > 42 ? value.slice(0, 42) + "…" : value, contexts: [], updated: "Just now", messages: [{ who: "user", text: value }] }, ...arr, ]); setActiveConvId(id); setChatContext(null); setText(""); onNavigate?.("chat"); setTimeout(() => { setConversations((arr) => arr.map((c) => c.id !== id ? c : { ...c, messages: [...c.messages, { who: "bot", text: replyFor(value) }], })); }, 900); }; return (
Ask Korico
{ e.preventDefault(); submit(); }} style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 5px 5px 16px", borderRadius: 99, background: "white", border: "1.5px solid " + (focused ? "var(--ink)" : "var(--border)"), boxShadow: focused ? "0 0 0 4px rgba(212,255,79,0.30)" : "none", transition: "border-color 0.2s ease, box-shadow 0.2s ease", position: "relative", }} > setText(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} placeholder="Ask about visas, housing, tax, contracts…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink)", padding: "10px 4px", minWidth: 0, }} />
{ASK_QUICK_PROMPTS.slice(0, 3).map((q) => ( ))}
); } const ASK_QUICK_PROMPTS = [ { icon: "id", label: "Check my D-2 deadline", prompt: "When does my D-2 expire and what should I start preparing now?" }, { icon: "credit-card", label: "Update ARC address", prompt: "I just moved — how do I update my ARC address?" }, { icon: "report-money", label: "Year-end tax (연말정산)", prompt: "How does 연말정산 work for me as a D-2 student with a part-time job?" }, { icon: "home", label: "전입신고 quick guide", prompt: "Do I need 전입신고 for a wolse one-room? Walk me through it." }, ]; function AskKoricoHero({ onNavigate, chatState }) { const [text, setText] = useState(""); const [focused, setFocused] = useState(false); const { conversations, setConversations, setActiveConvId, setChatContext } = chatState || {}; const submit = (raw) => { const value = (raw ?? text).trim(); if (!value || !chatState) return; // Start a fresh conversation seeded with the user's question const id = "c" + (Date.now() % 100000); setConversations((arr) => [ { id, title: value.length > 42 ? value.slice(0, 42) + "…" : value, contexts: [], updated: "Just now", messages: [{ who: "user", text: value }], }, ...arr, ]); setActiveConvId(id); setChatContext(null); setText(""); onNavigate?.("chat"); // Schedule the bot reply so it lands shortly after the chat page mounts setTimeout(() => { setConversations((arr) => arr.map((c) => c.id !== id ? c : { ...c, messages: [...c.messages, { who: "bot", text: replyFor(value) }], })); }, 900); }; return (
{/* soft lime glow in corner */}
Ask Korico
What's on your mind today, Minh Anh?
{/* Big search-like pill */}
{ e.preventDefault(); submit(); }} style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 6px 6px 18px", borderRadius: 99, background: "white", border: "1.5px solid " + (focused ? "var(--ink)" : "var(--border)"), boxShadow: focused ? "0 0 0 4px rgba(212,255,79,0.30)" : "0 1px 0 var(--border-soft)", transition: "border-color 0.2s ease, box-shadow 0.2s ease", position: "relative", }} > setText(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} placeholder="Ask about visas, housing, tax, contracts…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink)", padding: "12px 4px", minWidth: 0, }} /> {/* Quick prompt chips */}
{ASK_QUICK_PROMPTS.map((q) => ( ))}
); } /* ============================================================ JOURNEY CARD ============================================================ */ const JOURNEY = [ { id: "arrival", label: "Arrival & ARC", status: "done", icon: "plane-arrival", date: "2024.03" }, { id: "current", label: "Current visa", status: "active", icon: "id", date: "D-2 · valid to 2026.03" }, { id: "next", label: "Next step", status: "todo", icon: "arrows-exchange", date: "Prepare D-10" }, { id: "long", label: "Long-term goal", status: "todo", icon: "flag-2", date: "F-2 in 2–3 years" }, ]; function JourneyCard() { return (
{JOURNEY.map((s, i) => ( ))}
); } function JourneyStep({ step, index, last }) { const palette = { done: { bg: "var(--success-soft)", fg: "var(--success)" }, active: { bg: "var(--lime)", fg: "var(--ink)" }, todo: { bg: "var(--bg-soft)", fg: "var(--text-mute)" }, }[step.status]; const statusLabel = { done: "Done", active: "In progress", todo: "Not started" }[step.status]; return (
{step.label}
{step.date}
{statusLabel}
); } /* ============================================================ SNAPSHOT ROW (3 mini cards) ============================================================ */ function SnapshotRow() { return (
); } function SnapshotCard({ eyebrow, title, sub, chip, icon }) { const chipPalette = { success: { bg: "var(--success-soft)", fg: "var(--success)" }, warn: { bg: "var(--warning-soft)", fg: "var(--warning)" }, danger: { bg: "var(--danger-soft)", fg: "var(--danger)" }, }[chip.tone]; return ( ); } /* ============================================================ PROFILE FORM ============================================================ */ const CONCERNS = [ "I'm confused about options", "I'm worried about deadlines", "Documents are hard", "Housing", "Work contract", ]; function ProfileForm() { const [form, setForm] = useState({ visa: "D-2", country: "VN", purpose: "Study", goal: "Long-term residence", concerns: ["I'm worried about deadlines", "Documents are hard"], }); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); const toggleConcern = (c) => { setForm((f) => ({ ...f, concerns: f.concerns.includes(c) ? f.concerns.filter((x) => x !== c) : [...f.concerns, c], })); }; const submit = (e) => { e.preventDefault(); setSaving(true); setTimeout(() => { setSaving(false); setSaved(true); setTimeout(() => setSaved(false), 1800); }, 700); }; return (
setForm({ ...form, country: v })} options={["VN", "MN", "ZH", "US", "RU", "TH", "PH", "Other"]} /> setForm({ ...form, goal: v })} options={["Stay 1–2 years", "Long-term residence", "Permanent (F-5)", "Not sure yet"]} />
{CONCERNS.map((c) => { const on = form.concerns.includes(c); return ( ); })}
{saved ? "Saved. Korico will tailor your next steps." : "We never share your answers with third parties."}
); } function Field({ label, children }) { return ( ); } function Select({ value, onChange, options }) { return (
); } /* ============================================================ CHAT CARD ============================================================ */ const SEED_MESSAGES = [ { who: "bot", text: "Hi Minh Anh — what's on your mind today?" }, { who: "user", text: "I'm on D-2 now but thinking about D-10. What should I prepare?" }, { who: "bot", text: "Great timing. You'll typically want: graduation certificate, recent transcript, your ARC, and proof of job search activity. Want me to add a checklist to your todo?" }, ]; const QUICK = [ "Check my next deadline", "What documents am I missing?", "Help with housing contract", ]; function FloatingChat({ onOpenFullPage, hidden }) { const [open, setOpen] = useState(false); const [unread, setUnread] = useState(1); const [msgs, setMsgs] = useState(SEED_MESSAGES); const [text, setText] = useState(""); const [typing, setTyping] = useState(false); const scrollRef = useRef(null); useEffect(() => { if (open && scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } }, [msgs, typing, open]); useEffect(() => { if (open) setUnread(0); }, [open]); // close on Escape useEffect(() => { if (!open) return; const h = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [open]); // listen for external "open chat with prefilled text" events useEffect(() => { const h = (e) => { const prefill = e.detail?.prefill || ""; setOpen(true); if (prefill) setText(prefill); }; window.addEventListener("korico:ask", h); return () => window.removeEventListener("korico:ask", h); }, []); const send = (raw) => { const value = (raw ?? text).trim(); if (!value) return; setMsgs((m) => [...m, { who: "user", text: value }]); setText(""); setTyping(true); setTimeout(() => { setTyping(false); setMsgs((m) => [...m, { who: "bot", text: replyFor(value) }]); }, 900); }; if (hidden) return null; return ( <> {/* Floating launcher button */} {/* Floating panel */}
{/* Header */}
K
Korico chat
Online · usually replies instantly
{onOpenFullPage && ( )}
{/* Messages */}
{msgs.map((m, i) => )} {typing && (
)}
{/* Quick chips */}
{QUICK.map((q) => ( ))}
{/* Input */}
{ e.preventDefault(); send(); }} style={{ padding: "10px 14px 14px", background: "var(--bg-canvas)", }}>
{ e.currentTarget.style.borderColor = "var(--ink)"; e.currentTarget.style.boxShadow = "0 0 0 3px rgba(212,255,79,0.25)"; }} onBlur={(e) => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.boxShadow = "none"; }} > setText(e.target.value)} placeholder="Ask about visas, housing, or contracts…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 14, color: "var(--ink)", padding: "9px 4px", }} />
); } function Bubble({ m }) { const isUser = m.who === "user"; return (
{m.text}
); } function Dot({ delay }) { return ( ); } function StatusDot() { return ( Online ); } function replyFor(q) { const low = q.toLowerCase(); if (low.includes("deadline")) return "Your closest deadline is ARC renewal on 2026.02.01 — 132 days away. I'll remind you 30 days before."; if (low.includes("document") || low.includes("missing")) return "You're at 7 of 12 documents. The two most important to add next: passport scan and university enrollment letter."; if (low.includes("housing") || low.includes("contract")) return "Send me a photo of the contract and I'll flag the deposit, term, and exit clauses in your language."; if (low.includes("d-10") || low.includes("d10")) return "For D-2 → D-10 you'll need a graduation certificate, transcript, ARC, and proof of job search. Want me to add it as a checklist?"; return "Got it. I'll prep a short answer with the documents and timing — give me a second."; } /* ============================================================ TODO LIST ============================================================ */ const SEED_TODOS = [ { id: "passport", label: "Upload passport scan (D-2 docs)", due: "Recommended this week", done: false }, { id: "arc", label: "Add ARC expiration date", due: "Quick · 2 min", done: true }, { id: "house", label: "Scan housing contract", due: "Before 2026.02.01", done: false }, { id: "guide", label: "Read guide: First visit to immigration office", due: "When you can", done: false }, ]; function TodoList() { const [items, setItems] = useState(SEED_TODOS); const toggle = (id) => setItems((arr) => arr.map((x) => x.id === id ? { ...x, done: !x.done } : x)); const done = items.filter((x) => x.done).length; return ( {done}/{items.length} done } />
{items.map((it) => ( toggle(it.id)} /> ))}
); } function TodoRow({ item, onToggle }) { return ( ); } /* ============================================================ DOCS STRIP ============================================================ */ function DocsStrip() { const total = 12, done = 7; const pct = Math.round((done / total) * 100); return (
Documents
{done} of {total} uploaded
Open documents
); } /* ============================================================ MY FILES — pre-filled profile vault ============================================================ */ const FILE_DATA = { identity: { title: "Core identity", icon: "user", note: "Reused across every visa type.", rows: [ ["Full legal name", "Nguyễn Minh Anh"], ["Date of birth", "2002.05.14"], ["Nationality", "Vietnam"], ["Country of birth", "Vietnam"], ["Passport number", "N12345678"], ["Passport issue date", "2022.01.10"], ["Passport expiry", "2032.01.09"], ["Gender", "Female"], ["Profile photo", { kind: "file", label: "passport-photo.jpg", meta: "2.4 MB · verified" }], ["Current country of residence", "South Korea"], ["Phone", "+82 10-1234-5678"], ["Email", "minh.anh@yonsei.ac.kr"], ], }, immigration: { title: "Immigration status", icon: "stamp", note: "Current Korean visa snapshot.", rows: [ ["Current visa type", { kind: "pill", label: "D-2", tone: "ink" }], ["Visa expiry date", "2026.03.15"], ["Alien Registration Number", "020514-6XXXXXX"], ["Entry date to Korea", "2024.03.04"], ["Previous Korean visas", "D-4 (2023.09 – 2024.02)"], ["Prior deportation / overstay", { kind: "pill", label: "No", tone: "success" }], ], }, education: { title: "Education", icon: "school", note: "Used for D-2, D-10, E-1, E-7, F-5 eligibility.", rows: [ ["Highest degree", "Bachelor's (in progress)"], ["Field of study", "Computer Science"], ["University", "Yonsei University · Seoul"], ["Graduation (expected)", "2026.02"], ["GPA", "3.78 / 4.30"], ["TOPIK level", { kind: "pill", label: "Level 4", tone: "lime" }], ["TOPIK test date", "2025.04.21"], ["Other languages", "English (IELTS 7.0), Vietnamese (native)"], ], }, employment: { title: "Employment & work history", icon: "briefcase", note: "Used for E-series, D-10, F-series qualification.", rows: [ ["Current status", { kind: "pill", label: "Student · part-time", tone: "ink" }], ["Current employer", "Naver Labs (internship)"], ["Industry", "Software · R&D"], ["Job title", "ML Research Intern"], ["Employment start", "2025.06.02"], ["Contract type", "Internship · 20 hrs/wk"], ["Annual income", "₩18,000,000 (projected)"], ["Past experience", "Tutor at Yonsei CS Lab (2024.09 – 2025.05)"], ["Business registration no.", "—"], ], }, finance: { title: "Financial info", icon: "wallet", note: "Used for D-10, F-series, C-3, D-8 sufficiency checks.", rows: [ ["Bank account balance", "₩12,840,000 (Woori, as of 2025.10.20)"], ["Monthly average income", "₩1,500,000"], ["Sponsor", "Mother — Nguyễn Thi Hoa (relation: parent)"], ["Sponsor contact", "+84 24-555-1212"], ], }, family: { title: "Family & relationship", icon: "users", note: "Used for F-1, F-3, F-6, F-2 routes.", rows: [ ["Marital status", "Single"], ["Spouse nationality", "—"], ["Spouse visa status", "—"], ["Children", "None"], ["Korean family member", "—"], ], }, }; const DOCUMENTS = [ { name: "Passport scan", file: "passport.pdf", size: "1.2 MB", status: "verified", date: "2024.03.05" }, { name: "ARC scan", file: "arc-front-back.pdf", size: "0.8 MB", status: "verified", date: "2024.03.22" }, { name: "Degree certificate", file: "high-school-cert.pdf",size: "2.1 MB", status: "verified", date: "2024.03.10" }, { name: "Transcript", file: "transcript-2025s.pdf",size: "0.9 MB", status: "uploaded", date: "2025.09.12" }, { name: "Employment certificate", file: "naver-letter.pdf", size: "0.4 MB", status: "uploaded", date: "2025.06.05" }, { name: "Bank statement", file: "woori-2025-10.pdf", size: "1.5 MB", status: "uploaded", date: "2025.10.20" }, { name: "Proof of residence (lease)", file: "sinchon-room.pdf", size: "3.2 MB", status: "uploaded", date: "2024.04.02" }, { name: "Health insurance certificate", file: "nhis-card.pdf", size: "0.3 MB", status: "verified", date: "2024.05.18" }, { name: "TB test result", file: "tb-2025-09.pdf", size: "0.6 MB", status: "uploaded", date: "2025.09.30" }, { name: "TOPIK certificate", file: "topik-lvl4.pdf", size: "0.5 MB", status: "verified", date: "2025.05.10" }, ]; const MAPPING = [ { field: "Nationality + education", used: "D-10-1 eligibility check" }, { field: "Current visa + graduation date", used: "D-2 → D-10 transition suggestion" }, { field: "Employment + income", used: "E-7, F-2, F-5 qualification" }, { field: "Marital status + spouse visa", used: "F-3, F-6 eligibility" }, { field: "Financial balance", used: "D-10, C-3, D-8 financial sufficiency" }, { field: "Work history abroad", used: "D-10 points scoring (experience)" }, { field: "TOPIK level", used: "D-10 bonus points, F-2 eligibility" }, ]; function MyFiles() { return (
{Object.entries(FILE_DATA).map(([key, section]) => ( ))}
); } function FilesSummary() { const total = 47, filled = 47; const docsDone = DOCUMENTS.filter((d) => d.status === "verified" || d.status === "uploaded").length; return (
Profile completeness

Your file vault is ready.

All sections below are filled. Korico reuses them automatically when you apply for D-10, E-7, F-2, or any other visa — so you never type the same thing twice.

); } function SummaryPill({ label, value, tone }) { const tones = { ink: { bg: "var(--ink)", fg: "var(--lime)" }, success: { bg: "var(--success-soft)",fg: "var(--success)" }, warn: { bg: "var(--warning-soft)",fg: "var(--warning)" }, }[tone] || { bg: "var(--bg-soft)", fg: "var(--ink)" }; return (
{label}
{value}
); } function ProfileSection({ section }) { return (

{section.title}

{section.note}

{section.rows.map(([label, value], i) => ( ))}
); } function KVRow({ label, value, last }) { const border = last ? "none" : "1px solid var(--border-soft)"; return ( <>
{label}
{renderValue(value)}
); } function renderValue(v) { if (typeof v === "string") return v || "—"; if (v?.kind === "pill") { const tones = { ink: { bg: "var(--ink)", fg: "var(--lime)" }, lime: { bg: "var(--lime)", fg: "var(--ink)" }, success: { bg: "var(--success-soft)", fg: "var(--success)" }, warn: { bg: "var(--warning-soft)", fg: "var(--warning)" }, }[v.tone] || { bg: "var(--bg-soft)", fg: "var(--ink)" }; return ( {v.label} ); } if (v?.kind === "file") { return ( {v.label} · {v.meta} ); } return "—"; } function DocumentsVault() { return (

Documents vault

Upload once. Korico attaches the right files to each application automatically.

{DOCUMENTS.map((d) => )}
); } function DocRow({ d }) { const tones = { verified: { bg: "var(--success-soft)", fg: "var(--success)" }, uploaded: { bg: "var(--bg-soft)", fg: "var(--ink)" }, missing: { bg: "var(--warning-soft)", fg: "var(--warning)" }, }[d.status]; return (
{ e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.background = "var(--bg-soft)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-soft)"; e.currentTarget.style.background = "white"; }} >
{d.name}
{d.file} · {d.size} · {d.date}
{d.status}
); } function ProfileMapping() { return (
How Korico uses your file

Profile → visa mapping

The fields you filled above feed directly into the eligibility checks below.

{MAPPING.map((row, i) => (
{row.field}
{row.used}
))}
); } /* ============================================================ VISA & STATUS PAGE ============================================================ */ const VISA_TIMELINE = [ { id: "arrival", label: "Arrival in Korea", date: "2024.03.04", state: "past" }, { id: "arc", label: "ARC issued", date: "2024.03.22", state: "past" }, { id: "today", label: "Today", date: "2025.10.20", state: "today" }, { id: "ext", label: "Extension window opens", date: "2026.02.13", state: "future" }, { id: "expiry", label: "D-2 expires", date: "2026.03.15", state: "future" }, { id: "target", label: "Target: D-10", date: "~2026.05", state: "future" }, ]; function VisaPage({ onNavigate }) { return (
); } function VisaSummaryCard() { return (
Current visa

D-2 Student

Valid from 2024.03.04 to 2026.03.15
Low risk
ARC
Registered · ****-1234
Days remaining
146 days
{["Full-time student", "Seoul", "Yonsei University", "Computer Science"].map((c) => ( {c} ))}
); } function VisaTimelineCard() { return (
{/* Track */}
{VISA_TIMELINE.map((n, i) => ( ))}
); } function TimelineNode({ n, delay }) { const tones = { past: { dot: "var(--border)", fg: "var(--text-mute)" }, today: { dot: "var(--lime)", fg: "var(--ink)", ring: true }, future: { dot: "var(--sky-2)", fg: "var(--ink)" }, }[n.state]; return (
{n.label}
{n.date}
); } function TimelineHint({ icon, text, tone }) { const palette = tone === "warn" ? { bg: "var(--warning-soft)", fg: "var(--warning)" } : { bg: "var(--bg-soft)", fg: "var(--ink)" }; return (
  • {text}
    • ); } function KoricoSuggestionCard({ onNavigate }) { const items = [ "Upload current ARC and passport scan", "Check eligibility for D-10", "Read guide: D-2 → D-10 transition", "Book an immigration office appointment", ]; return (
      {items.map((it, i) => (
    • {i + 1} {it}
      • ))}
    ); } function VisaPreferencesCard() { const [form, setForm] = useState({ visa: "D-2", country: "VN", region: "Seoul", goal: "Work long term", risk: "Normal", }); const [saved, setSaved] = useState(false); const submit = (e) => { e.preventDefault(); setSaved(true); setTimeout(() => setSaved(false), 1800); }; return (
    setForm({ ...form, country: v })} options={["VN", "MN", "ZH", "US", "RU", "TH", "PH", "Other"]} /> onChange(e.target.value)} style={{ width: "100%", padding: "11px 38px 11px 14px", borderRadius: 12, border: "1px solid var(--border)", fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--ink)", outline: "none", appearance: "none", WebkitAppearance: "none", background: "white", }}> {options.map((o) => ( ))}
    ); } function F2GaugeCard({ total, max, pass, tier }) { const pct = Math.max(0, Math.min(100, (total / max) * 100)); const passPct = (pass / max) * 100; return (
    {total}
    / {max} points
    {/* Filled portion */}
    {/* Pass threshold marker */}
    Pass · {pass}
    {tier.label} {total >= pass ? `+${total - pass} above the typical threshold` : `${pass - total} more to reach ${pass}`}
    ); } function BreakdownRow({ label, value, max, onAdjust, capped }) { const pct = Math.min(100, (value / max) * 100); return (
  • {label} {value} / {max} {capped && capped}
    • ); } /* ============================================================ VISA PLAN — D-2 → D-10 transition (step-by-step workspace) ============================================================ */ const D2D10_PLAN = [ { id: "elig", icon: "shield-check", title: "Confirm you're eligible for D-10", summary: "Quick check of the basic requirements so we don't waste a trip to immigration.", why: "D-10-1 is for university graduates in Korea looking for work. Most applications fail because of a missing eligibility detail — let's get it right first.", tasks: [ { id: "e1", label: "Graduating within 3 months, or graduated in the last 3 years" }, { id: "e2", label: "Bachelor's degree or higher (or equivalent overseas qualification)" }, { id: "e3", label: "No overstay history on previous Korean visas" }, { id: "e4", label: "₩3,000,000+ in your bank account (or sponsor letter)" }, ], estimated: "~5 minutes", }, { id: "docs", icon: "folder", title: "Gather your documents", summary: "Pull everything Korico needs to attach to your application. We'll reuse what's already in My files.", why: "Immigration officers process dozens of applications a day. Showing up with a complete folder is half the battle.", tasks: [ { id: "d1", label: "Passport (valid; all pages photocopied)", linkLabel: "Open My files", linkRoute: "files" }, { id: "d2", label: "ARC scan (front + back)", linkLabel: "ARC page", linkRoute: "arc" }, { id: "d3", label: "Graduation certificate or expected-graduation letter" }, { id: "d4", label: "Final transcript (or latest semester)" }, { id: "d5", label: "Bank statement (last 1 month, ₩3,000,000+)" }, { id: "d6", label: "Proof of residence (lease / 전입신고 확인서)" }, { id: "d7", label: "Passport-size photo (3.5×4.5 cm)" }, ], estimated: "30–45 minutes", }, { id: "plan", icon: "writing-sign", title: "Write your job-seeking plan", summary: "구직활동 계획서 — the document immigration looks at most carefully.", why: "This plan tells immigration why your stay matters. Specifics about industry, role, and timeline beat vague ambitions.", tasks: [ { id: "p1", label: "Pick 1–2 target industries (e.g. AI/ML, biotech)" }, { id: "p2", label: "List 3–5 specific job titles you're applying to" }, { id: "p3", label: "Note your TOPIK level + any other Korean ability" }, { id: "p4", label: "Draft a 3–6 month milestone timeline" }, { id: "p5", label: "Use Korico's job-plan template", linkLabel: "Open template", linkRoute: "forms" }, ], estimated: "1–2 hours", }, { id: "submit", icon: "send", title: "Book your appointment & submit", summary: "Reserve a slot on HiKorea, fill the application, pay the fee, hand everything over.", why: "Walk-ins exist but the wait can be 3+ hours. Booking ahead keeps things calm.", tasks: [ { id: "s1", label: "Reserve a slot on HiKorea (또는 walk-in at your immigration office)" }, { id: "s2", label: "Complete the integrated application (통합신청서)", linkLabel: "Fill with Korico", linkRoute: "form-fill-d2" }, { id: "s3", label: "Pay the application fee (~₩60,000)" }, { id: "s4", label: "Bring originals + photocopies of every document" }, ], estimated: "Half-day visit", }, { id: "after", icon: "calendar-check", title: "Wait for the decision & plan your job search", summary: "Processing usually takes 2–4 weeks. Use the time to set up interviews.", why: "D-10 lets you stay 6 months at a time (extendable up to 2 years). The clock starts when it's issued.", tasks: [ { id: "a1", label: "Track status on HiKorea (or check email)" }, { id: "a2", label: "Start applying — list which roles + companies", linkLabel: "Talk to Korico", linkRoute: "chat" }, { id: "a3", label: "Plan the next extension before you hit month 6" }, ], estimated: "2–4 weeks waiting", }, ]; function VisaPlanD2D10Page({ onNavigate }) { // Per-task done state, persisted only for the lifetime of the session const [done, setDone] = useState({}); const [expanded, setExpanded] = useState(D2D10_PLAN[0].id); const toggleTask = (id) => setDone((d) => ({ ...d, [id]: !d[id] })); const stepStatus = (step) => { const ids = step.tasks.map((t) => t.id); const completed = ids.filter((id) => done[id]).length; if (completed === 0) return { state: "todo", completed }; if (completed === ids.length) return { state: "done", completed }; return { state: "active", completed }; }; const totalTasks = D2D10_PLAN.reduce((s, st) => s + st.tasks.length, 0); const doneTasks = D2D10_PLAN.reduce((s, st) => s + st.tasks.filter((t) => done[t.id]).length, 0); const pct = Math.round((doneTasks / totalTasks) * 100); return (
    onNavigate("visa")} label="Visa & status" /> {/* Hero / progress */}
    Korico plan

    D-2 → D-10 transition

    Five focused steps to switch from student to job-seeker visa. Tap a step to expand it. Korico saves your progress automatically.

    Progress
    {pct}%
    {doneTasks} of {totalTasks} tasks
    {/* Progress bar */}
    {/* Timeline of steps */}
    {D2D10_PLAN.map((step, i) => { const status = stepStatus(step); const isOpen = expanded === step.id; return ( setExpanded(isOpen ? null : step.id)} done={done} onTaskToggle={toggleTask} onNavigate={onNavigate} isLast={i === D2D10_PLAN.length - 1} /> ); })}
    {/* Side rail */}
    ); } function PlanStepCard({ step, index, status, isOpen, onToggle, done, onTaskToggle, onNavigate, isLast }) { const completed = status.completed; const total = step.tasks.length; // Status visual tokens const tokens = { done: { bg: "var(--success-soft)", fg: "var(--success)", label: "Done" }, active: { bg: "var(--lime)", fg: "var(--ink)", label: "In progress" }, todo: { bg: "var(--bg-soft)", fg: "var(--text-mute)", label: "Not started" }, }[status.state]; return (
    {/* Header row */} {/* Expanded body */} {isOpen && (
    {/* Why */}

    {step.why}

    {/* Task checklist */}
      {step.tasks.map((task) => { const isDone = !!done[task.id]; return (
    • {task.label} {task.linkRoute && ( )}
      • ); })}
    )}
    ); } function PlanSideStats({ doneTasks, totalTasks }) { const remaining = totalTasks - doneTasks; return (
    Overview
    Tip: D-10 applications are usually approved within 2–4 weeks. Start at least 6 weeks before your D-2 expires.
    ); } function StatTile({ label, value, tone }) { const palette = tone === "ink" ? { bg: "var(--ink)", fg: "var(--lime)" } : { bg: "var(--lime)", fg: "var(--ink)" }; return (
    {label}
    {value}
    ); } function PlanQuickActions({ onNavigate }) { const items = [ { icon: "file-text", label: "Open D-2 → D-10 form", route: "form-fill-d2" }, { icon: "folder", label: "Browse my documents", route: "files" }, { icon: "credit-card", label: "ARC details", route: "arc" }, ]; return (
    Quick actions
    {items.map((it) => ( ))}
    ); } /* ============================================================ ARC PAGE ============================================================ */ const ARC_DOCS = [ { name: "ARC front photo", file: "arc-front.jpg", date: "2024.03.22", status: "verified" }, { name: "ARC back photo", file: "arc-back.jpg", date: "2024.03.22", status: "verified" }, { name: "Proof of address (전입신고 확인서)", file: "address-2024-04.pdf", date: "2024.04.05", status: "uploaded" }, ]; function ArcPage() { const [changes, setChanges] = useState({ address: false, school: false, other: false, }); const anyChecked = changes.address || changes.school || changes.other; return (
    ); } function ArcSummaryCard() { return (
    Alien Registration Card

    ****-1234

    Korico only stores the last 4 digits.
    Active
    Expires in 146 days · plan extension during your visa change.
    ); } function ArcKV({ label, value }) { return (
    {label}
    {value}
    ); } function ArcChangesCard({ changes, setChanges, anyChecked }) { const toggle = (k) => setChanges({ ...changes, [k]: !changes[k] }); return (
    toggle("address")} icon="map-pin" label="My address changed after I moved" hint="전입신고 + ARC address update needed." /> toggle("school")} icon="school" label="My school or workplace changed" hint="School/workplace change must be reported to immigration." /> toggle("other")} icon="info-circle" label="Other info changed" hint="Marital status, passport number, name, etc." />
    {anyChecked && (
    We'll add a step-by-step checklist to your today's tasks and remind you 3 days before any deadline.
    )}     ); } function ToggleRow({ checked, onToggle, icon, label, hint }) { return ( ); } function ArcDocsCard() { return ( Upload } />
    {ARC_DOCS.map((d) => )}
    ); } function ArcRulesCard() { const rules = [ { icon: "calendar-plus", text: "Register at immigration within 90 days of arrival on a long-term visa." }, { icon: "map-pin", text: "Report a new address within 14 days of moving (전입신고)." }, { icon: "school", text: "Report a change of school or workplace before the change takes effect." }, { icon: "report-money", text: "Late updates can trigger fines from ₩100,000 up to ₩1,000,000 depending on duration and case." }, ]; return (
      {rules.map((r) => (
    • {r.text}
      • ))}
    Korico is not a law firm. Always confirm with HiKorea or a licensed 행정사 / lawyer for your specific case.
    ); } /* ============================================================ TAX & WORK PAGE ============================================================ */ const STATUS_OPTIONS = [ { key: "none", label: "No work in Korea", icon: "ban" }, { key: "parttime", label: "Part-time student job (알바)", icon: "clock" }, { key: "fulltime", label: "Full-time employee", icon: "briefcase" }, { key: "freelance", label: "Freelance / multiple jobs", icon: "shuffle" }, ]; const SEED_JOBS = [ { id: "j1", type: "Part-time", company: "Cafe Onion · Seongsu", startDate: "2025.03.04", endDate: null, payType: "시급", payAmount: "₩11,500/h", withholding: true, hasContract: true, notes: "20 hrs/week, weekday mornings.", }, { id: "j2", type: "Internship", company: "Naver Labs", startDate: "2025.06.02", endDate: "2025.12.31", payType: "월급", payAmount: "₩1,500,000/mo", withholding: true, hasContract: false, notes: "ML research intern, 20 hrs/week.", }, ]; const TAX_TASKS = [ { id: "t1", label: "Check if your employer will do 연말정산 for you", due: "Before January", status: "todo" }, { id: "t2", label: "Upload latest payslip or income summary", due: "Anytime", status: "progress" }, { id: "t3", label: "Read guide: Taxes for D-2 students with 알바", due: "When you can", status: "todo" }, { id: "t4", label: "Confirm tax residency status", due: "Within 30 days", status: "done" }, ]; const TAX_GUIDES = [ { icon: "school", title: "Taxes for D-2 students with part-time jobs", sub: "What 알바 income means for your visa and taxes." }, { icon: "building", title: "Full-time employee taxes & 연말정산", sub: "How year-end adjustment works for foreign hires." }, { icon: "shuffle", title: "Freelancers and multiple jobs", sub: "When 종합소득세 신고 applies to you." }, ]; function TaxPage({ onNavigate, taxState }) { const { taxStatus, setTaxStatus, jobs, setEditingJob } = taxState; const openAddJob = () => { setEditingJob(null); onNavigate("tax-newjob"); }; const openJobDetail = (j) => { setEditingJob(j); onNavigate("tax-newjob"); }; const fullCount = jobs.filter((j) => j.type === "Full-time").length; const partCount = jobs.filter((j) => j.type === "Part-time" || j.type === "Internship").length; const freeCount = jobs.filter((j) => j.type === "Freelance").length; return (
    ); } function QuickLinksCard({ onNavigate }) { const items = [ { key: "tax-checklist", title: "Work basics checklist", sub: "Confirm written contract, withholding, payslips, and visa registration.", icon: "list-check" }, { key: "tax-tasks", title: "Tasks & deadlines", sub: "Year-end adjustment, payslip uploads, residency checks.", icon: "calendar-event" }, { key: "tax-guides", title: "Tax guides for Korea", sub: "D-2 알바, full-time 연말정산, freelancer 종합소득세.", icon: "book-2" }, ]; return (
    {items.map((it) => ( ))}
    ); } /* ---- Add / edit job as a full page ---- */ function NewJobPage({ onNavigate, taxState }) { const { jobs, setJobs, editingJob, flash } = taxState; const isEdit = !!editingJob; const [form, setForm] = useState(editingJob || newJobShape()); useEffect(() => { setForm(editingJob || newJobShape()); }, [editingJob]); const submit = (e) => { e?.preventDefault?.(); if (isEdit) { setJobs((arr) => arr.map((x) => x.id === editingJob.id ? { ...x, ...form } : x)); flash("Job updated."); } else { const id = "j" + (Date.now() % 100000); setJobs((arr) => [...arr, { id, ...form }]); flash(form.hasContract ? "Job added." : "Job added. Don't forget to upload your contract."); } onNavigate("tax"); }; return (
    onNavigate("tax")} label="Tax & work" />
    setForm({ ...form, company: e.target.value })} placeholder="e.g. Cafe Onion · Seongsu" style={inputStyle} onFocus={(e) => e.currentTarget.style.borderColor = "var(--ink)"} onBlur={(e) => e.currentTarget.style.borderColor = "var(--border)"} /> setForm({ ...form, startDate: e.target.value })} style={inputStyle} /> setForm({ ...form, endDate: e.target.value })} style={inputStyle} /> setForm({ ...form, payAmount: e.target.value })} placeholder="e.g. ₩11,500/h" style={inputStyle} />