fix: add connection to backend (#34)

Co-authored-by: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com>
Reviewed-on: #34

.blackboxrules

@@ -1,5 +0,0 @@
-## Rules:
-    - Khi làm một tính năng mới, trước khi hoàn thành phải update các file mark down mà thư mục đó được update.
-    - Khi có từ khóa "Yêu cầu" và một list các yêu cầu thì phải hoàn thành ĐÚNG yêu cầu, không thêm không bớt.
-    - Sử dụng thư viện tailwind CSS để code css cho project.
-    - Mỗi feature được update đều phải được responsive với các kích cỡ màn hình như smartphone, tablet, desktop.

.claude/skills/frontend-atomic-design/SKILL.md

@@ -0,0 +1,483 @@
+---
+name: frontend-atomic-design
+description: Create modern, responsive frontend components and layouts using atomic design methodology with Tailwind CSS. Use this skill whenever building React components, designing UI layouts, creating responsive pages, or working with atomic design principles. Triggers include: component development, page design, responsive design requests, Tailwind CSS styling, creating design systems, building reusable UI elements, or designing for multiple screen sizes (desktop, tablet, mobile). This skill emphasizes reusable variables, modern aesthetics, and responsive design across all viewport sizes.
+---
+
+# Atomic Design Frontend System with Tailwind CSS
+
+A comprehensive guide for building modern, responsive frontend applications
+using atomic design principles and Tailwind CSS.
+
+## Core Principles
+
+### 1. Atomic Design Hierarchy
+
+Atomic Design breaks UI into five distinct levels:
+
+#### **Atoms**
+
+Smallest, indivisible UI elements that cannot be broken down without losing
+functionality.
+
+- Buttons, input fields, labels, icons, text styles
+- Color variables, spacing units, typography scales
+- Simple, pure, reusable building blocks
+
+```jsx
+// Example: Button Atom
+<button className="rounded-lg bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700">
+  Click me
+</button>
+```
+
+#### **Molecules**
+
+Groups of atoms bonded together, forming simple functional units.
+
+- Search bars (input + button + icon)
+- Form fields (label + input + error message)
+- Card headers (avatar + title + subtitle)
+- Navigation items with icons and labels
+
+```jsx
+// Example: Search Molecule
+<div className="flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2">
+  <SearchIcon className="h-5 w-5 text-gray-500" />
+  <input type="text" placeholder="Search..." className="flex-1 outline-none" />
+</div>
+```
+
+#### **Organisms**
+
+Complex functional units made of groups of molecules and/or atoms.
+
+- Header/Navigation bars
+- Form sections (multiple form molecules)
+- Card layouts with multiple sections
+- Modals with title, content, and actions
+- Data tables with headers, rows, and pagination
+
+```jsx
+// Example: Product Card Organism
+<div className="overflow-hidden rounded-lg border border-gray-200 shadow-sm transition-shadow hover:shadow-md">
+  <img src="image.jpg" className="h-48 w-full object-cover" />
+  <div className="p-4">
+    <h3 className="text-lg font-semibold">Product Name</h3>
+    <p className="mt-1 text-sm text-gray-600">Description</p>
+    <div className="mt-4 flex items-center justify-between">
+      <span className="font-bold text-blue-600">$99</span>
+      <button className="rounded bg-blue-600 px-3 py-1 text-white">Add</button>
+    </div>
+  </div>
+</div>
+```
+
+#### **Templates**
+
+Page-level wireframes showing layout and component placement without final
+content.
+
+- Single-column layouts
+- Two-column layouts (sidebar + main)
+- Grid-based layouts
+- Hero + content sections
+
+#### **Pages**
+
+Specific instances of templates populated with real content and data.
+
+- Homepage with actual products
+- User profile with real user data
+- Dashboard with live metrics
+
+---
+
+## Design System Variables (Reusable Values)
+
+### Color Palette
+
+```css
+/* Define in Tailwind config or use CSS variables */
+Primary: #2563eb (blue-600)
+Secondary: #7c3aed (violet-600)
+Success: #16a34a (green-600)
+Warning: #ea580c (orange-600)
+Danger: #dc2626 (red-600)
+Neutral: #6b7280 (gray-500)
+```
+
+### Typography Scale
+
+```css
+H1: 32px (2rem) - font-bold
+H2: 24px (1.5rem) - font-bold
+H3: 20px (1.25rem) - font-semibold
+Body: 16px (1rem) - font-normal
+Small: 14px (0.875rem) - font-normal
+Tiny: 12px (0.75rem) - font-normal
+```
+
+### Spacing Scale
+
+```css
+xs: 4px (0.25rem)
+sm: 8px (0.5rem)
+md: 16px (1rem)
+lg: 24px (1.5rem)
+xl: 32px (2rem)
+2xl: 48px (3rem)
+```
+
+### Border Radius
+
+```css
+Subtle: 4px (rounded-sm)
+Standard: 8px (rounded-lg)
+Large: 12px (rounded-xl)
+Full: 9999px (rounded-full)
+```
+
+### Box Shadows
+
+```css
+Subtle: 0 1px 2px rgba(0,0,0,0.05)
+Soft: 0 4px 6px rgba(0,0,0,0.07)
+Medium: 0 10px 15px rgba(0,0,0,0.10)
+Strong: 0 20px 25px rgba(0,0,0,0.15)
+```
+
+---
+
+## Responsive Design Strategy
+
+### Breakpoints (Tailwind Default)
+
+```
+Mobile:   < 640px    (sm)
+Tablet:   640px      (md, lg)
+Desktop:  1024px+    (xl, 2xl)
+```
+
+### Mobile-First Approach
+
+1. **Start with mobile styles** (default, no prefix)
+2. **Layer tablet styles** (md: prefix)
+3. **Layer desktop styles** (lg:, xl: prefix)
+
+### Example: Responsive Layout
+
+```jsx
+// Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns
+<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+  {items.map((item) => (
+    <Card key={item.id} {...item} />
+  ))}
+</div>
+```
+
+### Common Responsive Patterns
+
+**Responsive Typography**
+
+```jsx
+<h1 className="text-2xl font-bold md:text-3xl lg:text-4xl">
+  Responsive Heading
+</h1>
+```
+
+**Responsive Padding/Margins**
+
+```jsx
+<div className="p-4 md:p-6 lg:p-8">Content with responsive spacing</div>
+```
+
+**Responsive Grid**
+
+```jsx
+<div className="grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6 lg:grid-cols-4">
+  {/* Grid items */}
+</div>
+```
+
+**Responsive Flexbox**
+
+```jsx
+<div className="flex flex-col gap-4 md:flex-row">
+  <aside className="w-full md:w-64">Sidebar</aside>
+  <main className="flex-1">Main content</main>
+</div>
+```
+
+**Responsive Images**
+
+```jsx
+<img
+  src="image.jpg"
+  className="h-auto w-full object-cover"
+  alt="Responsive image"
+/>
+```
+
+---
+
+## Modern Design Patterns
+
+### 1. Consistency & Visual Hierarchy
+
+- **Use consistent spacing**: Apply spacing scale uniformly
+- **Establish clear hierarchy**: Size, weight, color for emphasis
+- **Group related content**: Use whitespace to separate sections
+- **Align elements**: Use grids for crisp layouts
+
+```jsx
+<section className="space-y-6">
+  <div>
+    <h2 className="mb-2 text-2xl font-bold">Section Title</h2>
+    <p className="text-gray-600">Description text</p>
+  </div>
+  <div className="space-y-4">{/* Related items with consistent spacing */}</div>
+</section>
+```
+
+### 2. Interactive Feedback
+
+- **Hover states**: Subtle color/shadow changes
+- **Active states**: Indicate current selection
+- **Focus states**: Keyboard navigation support
+- **Loading states**: Spinners or skeleton screens
+- **Transitions**: Smooth animations (200-300ms)
+
+```jsx
+<button className="rounded-lg bg-blue-600 px-4 py-2 text-white transition-all duration-200 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none active:scale-95 disabled:cursor-not-allowed disabled:opacity-50">
+  Actionable Button
+</button>
+```
+
+### 3. Depth & Layering
+
+- **Subtle shadows**: Create depth without heaviness
+- **Elevation levels**: Consistent shadow progression
+- **Overlays**: Semi-transparent backgrounds for modals
+- **Z-index strategy**: Clear layering hierarchy
+
+```jsx
+<div className="rounded-lg border border-gray-200 shadow-sm transition-shadow duration-300 hover:shadow-md">
+  Card content
+</div>
+```
+
+### 4. Color Usage
+
+- **Primary action**: Most frequent call-to-action
+- **Secondary action**: Alternative actions
+- **Semantic colors**: Status indicators (success, warning, danger)
+- **Contrast**: Ensure WCAG AA compliance (4.5:1 ratio)
+- **Limited palette**: 3-5 colors maximum in most designs
+
+### 5. Whitespace & Breathing Room
+
+- Don't crowd elements
+- Use consistent gap values (gap-4, gap-6, gap-8)
+- Separate sections with vertical rhythm
+- Generous padding in cards and containers
+
+```jsx
+<div className="mx-auto max-w-4xl px-4 py-8 md:px-6 md:py-12">
+  <div className="space-y-8">{/* Sections with good breathing room */}</div>
+</div>
+```
+
+---
+
+## Tailwind CSS Best Practices
+
+### 1. Use Utility Classes Effectively
+
+```jsx
+// Good: Semantic, reusable, organized
+<button className="
+  px-4 py-2
+  bg-blue-600 text-white
+  rounded-lg
+  hover:bg-blue-700
+  transition-colors
+  disabled:opacity-50
+">
+  Submit
+</button>
+
+// Avoid: Too many utilities, hard to read
+<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200">
+```
+
+### 2. Extract Reusable Components
+
+```jsx
+// Create a Button component to avoid repetition
+const Button = ({ children, variant = "primary", ...props }) => {
+  const baseStyles = "px-4 py-2 rounded-lg font-medium transition-colors";
+  const variants = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700",
+    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+    danger: "bg-red-600 text-white hover:bg-red-700",
+  };
+
+  return (
+    <button className={`${baseStyles} ${variants[variant]}`} {...props}>
+      {children}
+    </button>
+  );
+};
+```
+
+### 3. Organize Utility Classes
+
+```jsx
+// Organize by category: layout → sizing → colors → effects → responsive
+<div className="/* Layout */ /* Sizing */ /* Spacing */ /* Colors & text */ /* Borders & shadows */ /* Effects */ /* Responsive */ my-8 flex w-full max-w-2xl flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 text-gray-900 shadow-sm transition-shadow hover:shadow-md md:flex-row lg:gap-6"></div>
+```
+
+### 4. Use Tailwind Config for Consistency
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: "#2563eb",
+        secondary: "#7c3aed",
+      },
+      spacing: {
+        gutter: "1rem",
+      },
+    },
+  },
+};
+```
+
+---
+
+## Component Construction Template
+
+Use this template when building atomic components:
+
+```jsx
+/**
+ * {Component Name}
+ *
+ * Atoms/Molecules/Organisms level component
+ * Purpose: [Brief description]
+ *
+ * Props:
+ *   - prop1: type - description
+ *   - prop2: type - description
+ */
+
+export const ComponentName = ({ prop1, prop2, className = "" }) => {
+  return (
+    <div
+      className={`/* Base styles */ /* Responsive */ /* Custom className */ flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6 md:flex-row lg:p-8 ${className} `}
+    >
+      {/* Component content */}
+    </div>
+  );
+};
+```
+
+---
+
+## Layout Patterns
+
+### Container + Padding
+
+```jsx
+<div className="mx-auto max-w-6xl px-4 md:px-6 lg:px-8">
+  {/* Content constrained to max width with responsive padding */}
+</div>
+```
+
+### Two-Column Sidebar Layout
+
+```jsx
+<div className="flex flex-col gap-6 lg:flex-row">
+  <aside className="w-full flex-shrink-0 lg:w-64">
+    {/* Sidebar: full width on mobile, fixed on desktop */}
+  </aside>
+  <main className="min-w-0 flex-1">
+    {/* Main content: takes remaining space */}
+  </main>
+</div>
+```
+
+### Responsive Grid
+
+```jsx
+<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+  {/* Items automatically stack on mobile, 2 columns on tablet, 3 on desktop */}
+</div>
+```
+
+### Hero Section
+
+```jsx
+<section className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-violet-600 py-12 text-white md:py-20 lg:py-32">
+  <div className="relative z-10 mx-auto max-w-6xl px-4 md:px-6">
+    <h1 className="mb-4 text-4xl font-bold md:text-5xl lg:text-6xl">
+      Hero Title
+    </h1>
+    <p className="mb-8 max-w-2xl text-lg opacity-90 md:text-xl">
+      Hero subtitle or description
+    </p>
+    <button className="rounded-lg bg-white px-8 py-3 font-semibold text-blue-600 transition-colors hover:bg-gray-100">
+      Call to Action
+    </button>
+  </div>
+</section>
+```
+
+---
+
+## Accessibility & Best Practices
+
+1. **Semantic HTML**: Use `<button>`, `<a>`, `<form>`, etc. appropriately
+2. **Color contrast**: Ensure 4.5:1 for text, 3:1 for UI components
+3. **Focus states**: Always visible keyboard navigation (`focus:ring-2`)
+4. **ARIA labels**: Add when needed (`aria-label`, `aria-describedby`)
+5. **Responsive text**: Use relative sizing, not fixed pixels
+6. **Touch targets**: Minimum 44x44px for interactive elements
+
+```jsx
+<button
+  className="min-h-[44px] px-4 py-3 focus:ring-2 focus:ring-offset-2 focus:outline-none"
+  aria-label="Close modal"
+>
+  ✕
+</button>
+```
+
+---
+
+## Performance Considerations
+
+1. **Limit custom CSS**: Rely on Tailwind utilities
+2. **Tree-shake unused styles**: Configure Tailwind content paths
+3. **Optimize images**: Use responsive images, WebP format
+4. **Lazy load**: Defer non-critical components
+5. **Minimize bundle**: Use PurgeCSS in production
+
+---
+
+## Quick Reference Checklist
+
+When building a component, ensure:
+
+- [ ] Follows atomic design hierarchy (Atom/Molecule/Organism)
+- [ ] Uses design system variables (colors, spacing, typography)
+- [ ] Responsive across mobile, tablet, desktop
+- [ ] Consistent hover/active/focus states
+- [ ] Proper whitespace and visual hierarchy
+- [ ] Semantic HTML structure
+- [ ] Accessible (contrast, focus, labels)
+- [ ] Mobile-first approach
+- [ ] No hardcoded values (use Tailwind config)

.claude/skills/frontend-atomic-design/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "frontend-atomic-design",
+  "version": "1.0.0",
+  "description": "Create modern, responsive frontend components and layouts using atomic design methodology with Tailwind CSS",
+  "author": "Claude",
+  "created": "2026-04-12"
+}

.claude/skills/prompt-optimizer/SKILL.md

@@ -0,0 +1,112 @@
+---
+name: prompt-optimizer
+description:
+  Help users rewrite and improve AI/LLM prompts by adding specificity, context,
+  and constraints. Trigger this skill whenever users ask to improve, rewrite,
+  optimize, or refine prompts for AI models. Focus on making prompts clearer,
+  more specific, and more likely to produce better AI results. Present
+  suggestions interactively so users can choose which improvements to apply.
+---
+
+# Prompt Optimizer
+
+A beginner-friendly skill for improving AI/LLM prompts to get better results.
+
+## What This Skill Does
+
+This skill helps you rewrite prompts to work better with AI models like Claude.
+Instead of just giving you a rewritten prompt, it shows you specific improvement
+suggestions that you can choose to apply or skip.
+
+## Key Improvements
+
+When optimizing a prompt, focus on three main areas:
+
+### 1. **Specificity** — Making the Request Clear
+
+Good prompts are specific about what you want. Vague prompts get vague results.
+
+**Example improvements:**
+
+- Add details about format: "Give me a bullet list of 5 items" instead of "tell
+  me about X"
+- Be clear about length: "Write 200 words" instead of "Write something short"
+- Define who the audience is: "Explain this for a 10-year-old" or "Use technical
+  language"
+
+### 2. **Context** — Giving the AI Background Information
+
+More context helps the AI make better decisions.
+
+**Example improvements:**
+
+- Explain the goal: "I'm writing a resume, so focus on professional language"
+- Share constraints: "We only have $500 budget" or "It needs to work on mobile"
+- Provide background: "I already know Python but not JavaScript"
+
+### 3. **Constraints** — Setting Boundaries
+
+Constraints prevent unwanted outputs.
+
+**Example improvements:**
+
+- Set length limits: "Keep it under 100 words"
+- Specify format: "Use JSON format" or "Write as a numbered list"
+- Define tone: "Be casual and friendly, not formal"
+- Say what NOT to include: "Don't use technical jargon"
+
+## How to Use This Skill
+
+1. **Share your prompt** — Give me the original prompt you want to improve
+2. **Review suggestions** — I'll show you specific improvements in each area
+3. **Choose what you like** — Pick which suggestions to apply
+4. **Get the final version** — I'll rewrite your prompt with your chosen
+   improvements
+
+## Interactive Selection Process
+
+When you use this skill, you'll see:
+
+- **Original prompt** — Your starting point
+- **Improvement suggestions** — Specific changes grouped by category
+  (Specificity, Context, Constraints)
+- **Preview examples** — What each change would look like with the improvement
+  applied
+- **Your choices** — You pick which suggestions help most (you can apply all,
+  some, or none)
+
+Then you get a rewritten prompt combining all your choices.
+
+### Example Interaction
+
+**Original:** "Write me a blog post"
+
+**Suggestions I might offer:**
+
+- **Specificity**: Add a topic (e.g., "about sustainable living")
+- **Context**: Explain your goal (e.g., "to build authority on my website")
+- **Constraints**: Set a word count (e.g., "800-1000 words")
+
+**Your choice:** "I want all three — add topic, goal, and word count"
+
+**Final rewritten prompt:** "Write an 800-1000 word blog post about sustainable
+living for my website. The goal is to establish my authority on eco-friendly
+practices. Target an audience of people interested in reducing their carbon
+footprint. Include 3-4 practical tips they can implement immediately, and end
+with a call-to-action encouraging them to sign up for my newsletter."
+
+## Tips for Best Results
+
+- **Start simple** — Even small improvements help
+- **Focus on your goal** — What outcome do you want?
+- **Add one constraint at a time** — Too many rules can be confusing
+- **Test and iterate** — Try the new prompt and see if results improve
+
+## What Makes a Good Prompt
+
+A prompt becomes "good" when:
+
+- The AI understands exactly what you want ✓
+- You've given enough context to explain why ✓
+- You've set boundaries to prevent bad outputs ✓
+- Someone else could read it and understand your intent ✓

.claude/skills/ui-ux-testing/SKILL.md

@@ -0,0 +1,302 @@
+---
+name: ui-ux-testing
+description:
+  Automated visual regression testing and UI/UX analysis for web applications.
+  Use this skill whenever developers mention "test this UI", "visual
+  regression", "test the UI", "check this interface", "UI testing", or want to
+  create automated tests for web pages. Analyzes URLs and generates
+  comprehensive test strategies including Playwright/Cypress test scripts,
+  manual testing checklists, visual regression detection, and detailed reports
+  with findings and recommendations.
+compatibility:
+  tools: Claude in Chrome browser automation
+  frameworks: Playwright, Cypress, Selenium
+---
+
+# UI/UX Testing Skill
+
+This skill helps developers create automated visual regression tests and
+comprehensive UI/UX testing strategies for web applications.
+
+## Overview
+
+When a developer asks you to test a UI or create visual regression tests, this
+skill guides you through:
+
+1. **Analyzing the target URL** - Inspect the web page structure and components
+2. **Generating test strategies** - Create both automated and manual testing
+   approaches
+3. **Writing test code** - Generate Playwright/Cypress test scripts or Selenium
+   code
+4. **Creating test checklists** - Manual testing steps for visual regression and
+   UX flows
+5. **Generating reports** - Detailed findings, issues, and recommendations in
+   markdown/HTML
+
+## When to Trigger
+
+Trigger this skill when the user:
+
+- Provides a URL and asks to "test this UI"
+- Requests "visual regression testing" for a web page
+- Wants to "check accessibility" or test a component
+- Asks to "create automated tests" for a UI
+- Wants a "testing strategy" or "test plan" for a web application
+- Mentions QA, testing, or validation of UI components
+
+## Workflow
+
+### Step 1: Inspect the Target URL
+
+Use Claude in Chrome to:
+
+- Navigate to the provided URL
+- Take screenshots of different viewport sizes (desktop, tablet, mobile)
+- Inspect the DOM structure using `read_page` tool
+- Identify key components, interactive elements, and critical flows
+- Note responsive behavior and CSS properties
+
+### Step 2: Create a Test Strategy
+
+Based on your inspection, identify:
+
+- **Visual elements** to regression test (buttons, forms, headers, layouts)
+- **Interactive flows** to test (hover states, click handlers, form submission)
+- **Responsive breakpoints** to validate (mobile, tablet, desktop)
+- **Accessibility concerns** (ARIA labels, color contrast, keyboard navigation)
+- **Critical user paths** to validate (common workflows)
+
+### Step 3: Generate Test Code
+
+**For Automated Testing (Choose one or more):**
+
+#### Playwright (Recommended)
+
+```javascript
+// Example structure
+import { expect, test } from "@playwright/test";
+
+test("visual regression - homepage", async ({ page }) => {
+  await page.goto("https://example.com");
+
+  // Capture baseline screenshot
+  await expect(page).toHaveScreenshot("homepage.png");
+
+  // Test interactive elements
+  await page.hover("button.primary");
+  await expect(page).toHaveScreenshot("button-hover.png");
+});
+
+test("responsive layout - mobile", async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.goto("https://example.com");
+  await expect(page).toHaveScreenshot("mobile-layout.png");
+});
+```
+
+#### Cypress
+
+```javascript
+describe("Visual Regression Tests", () => {
+  beforeEach(() => {
+    cy.visit("https://example.com");
+  });
+
+  it("captures baseline screenshot", () => {
+    cy.screenshot("homepage");
+    cy.get('[data-testid="header"]').should("be.visible");
+  });
+
+  it("tests button hover state", () => {
+    cy.get("button.primary").trigger("mouseenter");
+    cy.screenshot("button-hover-state");
+  });
+});
+```
+
+#### Selenium
+
+```python
+from selenium import webdriver
+from selenium.webdriver.common.by import By
+from PIL import Image
+
+driver = webdriver.Chrome()
+driver.get('https://example.com')
+
+# Capture screenshot
+driver.save_screenshot('homepage.png')
+
+# Test responsive
+driver.set_window_size(375, 812)
+driver.save_screenshot('mobile-view.png')
+```
+
+### Step 4: Create Manual Testing Checklist
+
+Generate a checklist including:
+
+- [ ] **Visual Consistency**
+  - [ ] All elements render correctly at 1920x1080
+  - [ ] All elements render correctly at 1366x768
+  - [ ] All elements render correctly at 768x1024 (tablet)
+  - [ ] All elements render correctly at 375x667 (mobile)
+  - [ ] Colors match design specifications
+  - [ ] Typography renders correctly (font families, sizes, weights)
+  - [ ] Images load and display at correct aspect ratios
+
+- [ ] **Responsive Behavior**
+  - [ ] Layout adapts correctly on mobile (no horizontal scroll)
+  - [ ] Navigation collapses/expands appropriately
+  - [ ] Form inputs are touch-friendly (min 44x44px)
+  - [ ] Content reflows without overlapping
+
+- [ ] **Interactive Elements**
+  - [ ] All buttons are clickable and have hover states
+  - [ ] Form inputs accept user input
+  - [ ] Dropdowns open/close correctly
+  - [ ] Links are underlined and properly colored
+
+- [ ] **Accessibility**
+  - [ ] Keyboard navigation works (Tab key)
+  - [ ] Color contrast meets WCAG AA standards
+  - [ ] Images have alt text
+  - [ ] Form labels are associated with inputs
+
+- [ ] **Critical User Paths**
+  - [ ] [Specific path 1]: [Steps and expected result]
+  - [ ] [Specific path 2]: [Steps and expected result]
+
+### Step 5: Generate Test Report
+
+Create an HTML/Markdown report with:
+
+```markdown
+# UI/UX Testing Report
+
+## Executive Summary
+
+- URL tested: [URL]
+- Viewports tested: Desktop (1920x1080), Tablet (768x1024), Mobile (375x667)
+- Testing date: [Date]
+- Total issues found: [Count]
+
+## Issues Found
+
+### Critical (Breaks functionality)
+
+1. **Issue Title**
+   - Severity: Critical
+   - Location: [Element/Component]
+   - Steps to reproduce: [Steps]
+   - Expected: [What should happen]
+   - Actual: [What actually happens]
+   - Screenshot: [If applicable]
+
+### Major (Significant visual/UX impact)
+
+1. **Issue Title**
+   - Severity: Major
+   - Location: [Element/Component]
+   - Impact: [User impact]
+
+### Minor (Polish/optimization)
+
+1. **Issue Title**
+   - Severity: Minor
+   - Location: [Element/Component]
+   - Recommendation: [Suggestion]
+
+## Visual Regression Analysis
+
+### Desktop (1920x1080)
+
+- [List observations]
+- [List changes from baseline if available]
+
+### Tablet (768x1024)
+
+- [List observations]
+- [Responsive issues found]
+
+### Mobile (375x667)
+
+- [List observations]
+- [Mobile-specific issues]
+
+## Accessibility Assessment
+
+| Element   | Issue   | WCAG Level | Recommendation |
+| --------- | ------- | ---------- | -------------- |
+| [Element] | [Issue] | [AA/AAA]   | [Fix]          |
+
+## Recommendations
+
+1. **High Priority**
+   - [Recommendation with rationale]
+
+2. **Medium Priority**
+   - [Recommendation with rationale]
+
+3. **Low Priority**
+   - [Recommendation with rationale]
+
+## Test Coverage Summary
+
+- Automated tests needed: [Count and types]
+- Manual test cases: [Count]
+- Estimated testing effort: [Time estimate]
+- Regression risk: [High/Medium/Low]
+
+---
+
+Generated using UI/UX Testing Skill
+```
+
+## Output Options
+
+Based on what the developer needs, generate:
+
+1. **Test Code Only** - Playwright/Cypress/Selenium scripts ready to integrate
+2. **Testing Strategy** - Comprehensive checklist and manual test plan
+3. **Full Report** - Screenshots, findings, issues, and automated test code
+4. **All of the above** - Complete testing package
+
+## Best Practices
+
+- **Multiple viewports:** Always test at least mobile (375px), tablet (768px),
+  and desktop (1920px)
+- **Visual baselines:** Save baseline screenshots before making changes
+- **Critical paths:** Prioritize testing main user workflows first
+- **Accessibility first:** Include WCAG AA compliance checks
+- **Clear assertions:** Make test assertions explicit and meaningful
+- **Maintainability:** Use data attributes (data-testid) for reliable element
+  selection
+
+## Example: Complete Testing Session
+
+1. Developer provides URL: "https://myapp.com/dashboard"
+2. You inspect the page (screenshots, DOM, responsive behavior)
+3. You identify:
+   - Dashboard header with navigation
+   - Data table with sorting/filtering
+   - Form for creating items
+   - Mobile menu collapse
+4. You generate:
+   - Playwright tests for visual regression
+   - Manual testing checklist
+   - HTML report with findings
+5. Developer receives complete testing artifact ready to use
+
+## Tips for Success
+
+- Take screenshots at each viewport to catch responsive issues
+- Test interactive states (hover, focus, active, disabled)
+- Verify critical user journeys end-to-end
+- Include accessibility testing automatically
+- Provide both automated (code) and manual (checklist) approaches
+- Make reports actionable with clear severity levels and recommendations
+
+---
+
+**Last Updated:** 2024 **Skill Version:** 1.0

.claude/skills/website-creation-automation/SKILL.md

@@ -0,0 +1,264 @@
+---
+name: website-creation-automation
+description:
+  Automate end-to-end website creation with AI-powered optimization, design, and
+  testing. Trigger this skill whenever the user wants to create a new website,
+  build a landing page, design a web application, or automatically generate a
+  complete website from a description. This skill takes a user's website idea or
+  prompt, optimizes it for clarity, designs a modern responsive website, and
+  automatically tests it for quality issues. Use this skill for any "create a
+  website" or "build a web application" request, including landing pages,
+  portfolio sites, e-commerce pages, dashboards, or any web-based project.
+compatibility:
+  models:
+    - claude-sonnet-4-20250514 (design and testing)
+    - claude-haiku-4.5-20251001 (bug fixes)
+  required_skills:
+    - prompt-optimizer
+    - frontend-atomic-design
+    - ui-ux-testing
+---
+
+# Website Creation Automation Skill
+
+An intelligent, end-to-end automation workflow for creating complete, tested
+websites from simple prompts.
+
+## What This Skill Does
+
+This skill orchestrates a complete website creation pipeline:
+
+1. **Prompt Optimization** — Takes your website description and optimizes it
+   into a detailed, structured prompt
+2. **Website Design** — Uses the optimized prompt to design and build a modern,
+   responsive website
+3. **Automated Testing** — Tests the generated website for visual, interactive,
+   and responsive issues
+4. **Auto-Fix** — Detects and fixes any issues found during testing
+
+The entire workflow is automated, so you just provide a simple description of
+what you want, and the skill handles the rest.
+
+## Core Workflow
+
+### Step 1: Optimize Your Website Prompt
+
+Your initial description (e.g., "Create a portfolio website for a freelance
+designer") is passed to the **prompt-optimizer** skill, which:
+
+- Adds specific details about layout, features, and target audience
+- Clarifies design preferences and functionality requirements
+- Structures the request to guide high-quality website generation
+- Returns a detailed, optimized prompt ready for design
+
+**Example transformation:**
+
+```
+Input: "Create a portfolio website for a freelance designer"
+↓
+Output: "Create a modern portfolio website for a freelance graphic designer.
+Include: hero section with featured work, project showcase grid (6-8 projects),
+about section, services list, client testimonials, contact form, and footer.
+Target audience: potential clients and collaborators. Design should be minimalist
+with emphasis on visual work. Mobile-responsive. Use modern sans-serif typography
+and white space. Include smooth scroll animations."
+```
+
+### Step 2: Design the Website
+
+The **frontend-atomic-design** skill uses the optimized prompt to:
+
+- Break down the website into atomic components (atoms, molecules, organisms)
+- Create a responsive layout that works on desktop, tablet, and mobile
+- Apply modern design patterns using Tailwind CSS
+- Build interactive elements and proper semantic HTML
+- Generate a complete, production-ready HTML file (or React component)
+
+**Outputs:**
+
+- Full HTML file with embedded CSS and JavaScript
+- All assets (icons, fonts) are self-contained
+- Responsive design with mobile-first approach
+- Accessible markup with semantic HTML5
+
+### Step 3: Test the Website
+
+The **ui-ux-testing** skill performs comprehensive testing:
+
+- Visual regression testing (captures baseline screenshots)
+- Responsive layout validation (mobile, tablet, desktop)
+- Interactive element testing (buttons, forms, links)
+- Accessibility checking (color contrast, keyboard navigation)
+- Cross-browser compatibility assessment
+- User flow validation
+
+**Testing output includes:**
+
+- Screenshots from multiple viewport sizes
+- Detailed findings and issues detected
+- Visual regression comparison
+- Recommendations for improvements
+
+### Step 4: Auto-Fix Detected Issues
+
+Any issues detected in testing are automatically fixed:
+
+- **Using Haiku 4.5** — A faster model optimized for targeted fixes
+- **HTML-only fixes** — Modifications to structure, styling, or interactivity
+- **Preserves design intent** — Fixes maintain the original design aesthetic
+- **Re-validates** — Quick verification that fixes resolved the issues
+
+**Common fixes include:**
+
+- Correcting responsive behavior issues
+- Fixing accessibility problems
+- Adjusting spacing, alignment, or colors
+- Improving interactive element behavior
+- Ensuring all content is properly visible
+
+---
+
+## When to Use This Skill
+
+Use this skill whenever you want to:
+
+- **Create a new website** from scratch based on a description
+- **Build a landing page** for a product, service, or event
+- **Design a portfolio site** to showcase your work
+- **Create an e-commerce page** with product displays
+- **Build a dashboard or web app** UI
+- **Generate a multi-page website** (returns first page, can iterate)
+- **Prototype a website concept** quickly
+
+## How to Trigger This Skill
+
+Simply provide:
+
+1. **Website description** — What kind of website you want (e.g., "e-commerce
+   store for handmade jewelry", "SaaS landing page", "restaurant menu website")
+2. **Optional details** — Any specific requirements (colors, features, tone,
+   audience)
+
+The skill handles everything else automatically.
+
+## Example Usage
+
+**User prompt:** "Create a landing page for a sustainable fashion startup called
+EcoStitch. Include a hero section, features of our eco-friendly materials,
+pricing plans, customer testimonials, and a newsletter signup."
+
+**Skill processes:**
+
+1. Optimizes prompt with specific design details and layout structure
+2. Designs a modern, responsive landing page with all requested sections
+3. Tests layout across mobile/tablet/desktop, forms, links, and visual design
+4. Fixes any responsive or interactive issues found
+5. Returns production-ready HTML file
+
+**Final output:** A complete, tested, bug-free website ready to deploy or
+customize further.
+
+---
+
+## Technical Details
+
+### Model Usage
+
+- **Sonnet 4.6** — Used for optimization, design, and testing (high-quality
+  complex tasks)
+- **Haiku 4.5** — Used for bug fixes only (fast, targeted improvements)
+
+### Skill Integration
+
+This skill coordinates three core skills in sequence:
+
+```
+User Prompt
+    ↓
+[prompt-optimizer] → Optimized Prompt
+    ↓
+[frontend-atomic-design] → HTML/React Website
+    ↓
+[ui-ux-testing] → Test Results + Screenshots
+    ↓
+[Bug Fix Loop] → Fixed HTML/React Website
+    ↓
+Final Website (Ready to Use)
+```
+
+### Output Format
+
+The final website is delivered as:
+
+- **HTML file** — Self-contained with CSS and JavaScript embedded
+- **Screenshots** — Before/after testing comparison
+- **Test report** — Issues found and fixes applied
+- **Deployment ready** — Can be hosted on any static hosting service
+
+---
+
+## Limitations & Notes
+
+- **Single-page output** — Generates one complete page (though can be expanded
+  to multi-page)
+- **Static by default** — Returns HTML; can generate React components if needed
+- **Database-free** — Forms are functional but don't store data without backend
+  integration
+- **Rapid iteration** — If you want to modify the result, you can iterate by
+  running the skill again with updated requirements
+
+---
+
+## Tips for Best Results
+
+1. **Be descriptive** — More detail in your initial prompt leads to better
+   results
+2. **Specify audience** — Who is this website for? (target customers, users,
+   etc.)
+3. **Include features** — What should the website do? (e.g., showcase products,
+   collect emails, etc.)
+4. **Mention style** — Any aesthetic preferences? (minimalist, colorful,
+   corporate, playful, etc.)
+5. **Test thoroughly** — Review the testing results to ensure the site meets
+   your needs
+
+---
+
+## Workflow Diagram
+
+```
+START
+  ↓
+Input: Website Description
+  ↓
+[Call: prompt-optimizer skill]
+  ↓
+Receive: Optimized Detailed Prompt
+  ↓
+[Call: frontend-atomic-design skill]
+  ↓
+Receive: HTML/React Website Code
+  ↓
+[Call: ui-ux-testing skill]
+  ↓
+Receive: Test Results + Issues Found
+  ↓
+Are there critical issues?
+  ├─ YES → [Use Haiku 4.5 to fix] → Re-test
+  ├─ NO → Proceed
+  ↓
+COMPLETE: Return Website + Test Report
+```
+
+---
+
+## Future Enhancements
+
+Potential expansions to this skill:
+
+- Multi-page website generation (homepage, about, services, contact, etc.)
+- CMS integration (connect to content management systems)
+- Backend API scaffolding (Node.js/Express templates)
+- SEO optimization (meta tags, structured data, open graph)
+- Analytics integration (Google Analytics, Mixpanel)
+- E-commerce integration (payment processing, inventory)

.devcontainer/devcontainer.json

@@ -15,10 +15,10 @@
     "vscode": {
       "extensions": ["esbenp.prettier-vscode"]
     }
-  }
+  },
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
+  "forwardPorts": [3000]
 
   // Use 'postCreateCommand' to run commands after the container is created.
   // "postCreateCommand": "uname -a",

Atomic.md

@@ -1,762 +0,0 @@
-# ATOMIC DESIGN STRUCTURE GUIDE
-
-## Overview
-
-Project sử dụng **Atomic Design Pattern** để tổ chức UI components theo 5 cấp
-độ:
-
-1. **Atoms** - Khối xây dựng cơ bản, không thể chia nhỏ hơn
-2. **Molecules** - Nhóm atoms đơn giản hoạt động cùng nhau
-3. **Organisms** - Khu vực UI phức tạp, riêng biệt
-4. **Templates** - Bố cục cấp trang, cấu trúc nội dung
-5. **Pages** - Các phiên bản cụ thể với dữ liệu thật
-
----
-
-## 1) ATOMS (`components/atoms/`)
-
-**Mục đích:** Khối xây dựng cơ bản, tái sử dụng cao, không phụ thuộc logic phức
-tạp.
-
-Không có context/hooks logic phức tạp, chỉ nhận props từ parent.
-
-### Cấu trúc thư mục
-
-```
-components/atoms/
-├── buttons/
-│   ├── Button.tsx           # Nút cơ bản (primary, secondary, danger)
-│   ├── IconButton.tsx       # Nút chỉ có icon
-│   └── Button.types.ts      # Props types
-├── inputs/
-│   ├── TextInput.tsx        # Text input cơ bản
-│   ├── NumberInput.tsx      # Number input với up/down
-│   ├── Checkbox.tsx         # Checkbox
-│   └── Input.types.ts       # Props types
-├── badges/
-│   ├── Badge.tsx            # Badge cơ bản (color variants)
-│   ├── PriceBadge.tsx       # Badge hiển thị giá
-│   └── Badge.types.ts       # Props types
-├── icons/
-│   ├── StarIcon.tsx         # Rating star icon
-│   ├── CartIcon.tsx         # Shopping cart icon
-│   ├── SearchIcon.tsx       # Search icon
-│   └── icons.types.ts       # Props types
-├── typography/
-│   ├── Heading.tsx          # h1-h6 headings
-│   ├── Text.tsx             # Body text variants
-│   ├── Caption.tsx          # Small caption text
-│   └── Typography.types.ts  # Props types
-├── dividers/
-│   ├── Divider.tsx          # Horizontal divider
-│   └── Divider.types.ts     # Props types
-├── loaders/
-│   ├── Spinner.tsx          # Loading spinner
-│   ├── Skeleton.tsx         # Skeleton loader
-│   └── Loader.types.ts      # Props types
-└── index.ts                 # Barrel export
-```
-
-### Ví dụ Atoms
-
-**Button.tsx:**
-
-```tsx
-import { ButtonHTMLAttributes } from "react";
-
-import type { ButtonProps } from "./Button.types";
-
-export default function Button({
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  children,
-  className = "",
-  ...props
-}: ButtonProps) {
-  const baseStyles =
-    "font-semibold rounded-lg transition-colors disabled:opacity-50";
-  const variants = {
-    primary:
-      "bg-[color:var(--color-primary)] text-white hover:bg-[color:var(--color-primary-dark)]",
-    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-    danger: "bg-red-500 text-white hover:bg-red-600",
-  };
-  const sizes = {
-    sm: "px-3 py-1 text-sm",
-    md: "px-4 py-2 text-base",
-    lg: "px-6 py-3 text-lg",
-  };
-
-  return (
-    <button
-      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}
-```
-
-**Button.types.ts:**
-
-```tsx
-import { ButtonHTMLAttributes } from "react";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "danger";
-  size?: "sm" | "md" | "lg";
-  disabled?: boolean;
-  children: React.ReactNode;
-  className?: string;
-}
-```
-
----
-
-## 2) MOLECULES (`components/molecules/`)
-
-**Mục đích:** Nhóm atoms tạo thành những UI unit nhỏ, tái sử dụng, có logic đơn
-giản.
-
-Có thể sử dụng `useState`, nhưng logic chủ yếu nằm ở parent component.
-
-### Cấu trúc thư mục
-
-```
-components/molecules/
-├── form-groups/
-│   ├── FormField.tsx        # Input + label + error message
-│   ├── FormGroup.tsx        # Label + input wrapper
-│   └── FormGroup.types.ts   # Props types
-├── cards/
-│   ├── ProductCard.tsx      # Card hiển thị sản phẩm (image + name + price + btn)
-│   ├── ShopCard.tsx         # Card hiển thị quán
-│   ├── ReviewCard.tsx       # Card hiển thị review
-│   └── Card.types.ts        # Props types
-├── ratings/
-│   ├── RatingStars.tsx      # Hiển thị 5 sao rating
-│   ├── RatingInput.tsx      # Input 5 sao (interactive)
-│   └── Rating.types.ts      # Props types
-├── price-display/
-│   ├── PriceTag.tsx         # Hiển thị giá formatted
-│   ├── PriceRange.tsx       # Hiển thị range giá
-│   └── Price.types.ts       # Props types
-├── search-bar/
-│   ├── SearchInput.tsx      # Search input với icon
-│   ├── SearchBar.tsx        # Search bar wrapper
-│   └── Search.types.ts      # Props types
-├── breadcrumb/
-│   ├── Breadcrumb.tsx       # Breadcrumb navigation
-│   └── Breadcrumb.types.ts  # Props types
-├── tabs/
-│   ├── TabGroup.tsx         # Tabs wrapper
-│   ├── Tab.tsx              # Individual tab
-│   └── Tabs.types.ts        # Props types
-└── index.ts                 # Barrel export
-```
-
-### Ví dụ Molecules
-
-**ProductCard.tsx:**
-
-```tsx
-import Button from "@/components/atoms/buttons/Button";
-import Text from "@/components/atoms/typography/Text";
-import Image from "next/image";
-
-import type { ProductCardProps } from "./Card.types";
-
-export default function ProductCard({
-  product,
-  onAddToCart,
-}: ProductCardProps) {
-  return (
-    <div className="rounded-lg border border-[color:var(--color-border)] bg-[color:var(--color-bg-card)] p-4 shadow-sm transition-shadow hover:shadow-md">
-      <div className="relative mb-3 h-48 w-full overflow-hidden rounded-md">
-        <Image
-          src={product.image}
-          alt={product.name}
-          fill
-          className="object-cover"
-        />
-      </div>
-      <Text variant="body1" className="font-semibold">
-        {product.name}
-      </Text>
-      <Text
-        variant="caption"
-        className="text-[color:var(--color-text-secondary)]"
-      >
-        {product.description}
-      </Text>
-      <div className="mt-3 flex items-center justify-between">
-        <Text
-          variant="body2"
-          className="font-bold text-[color:var(--color-primary)]"
-        >
-          ${product.price.toFixed(2)}
-        </Text>
-        <Button size="sm" onClick={() => onAddToCart(product)}>
-          Add
-        </Button>
-      </div>
-    </div>
-  );
-}
-```
-
----
-
-## 3) ORGANISMS (`components/organisms/`)
-
-**Mục đích:** Khu vực UI phức tạp, độc lập, có logic riêng.
-
-Kết hợp multiple molecules/atoms, có thể sử dụng contexts (useAuth, useCart,
-etc.), state phức tạp.
-
-### Cấu trúc thư mục
-
-```
-components/organisms/
-├── navigation/
-│   ├── Navbar.tsx           # Sidebar category filter (cũ CartProduct)
-│   ├── CategoryMenu.tsx     # Category menu wrapper
-│   └── Navigation.types.ts  # Props types
-├── cart/
-│   ├── CartFab.tsx          # Floating action button giỏ hàng
-│   ├── CartSummary.tsx      # Cart summary widget
-│   ├── CartList.tsx         # Danh sách sản phẩm trong giỏ
-│   └── Cart.types.ts        # Props types
-├── product-grid/
-│   ├── ProductGrid.tsx      # Grid hiển thị danh sách sản phẩm
-│   ├── ProductFilters.tsx   # Bộ lọc sản phẩm (category, price, rating)
-│   └── ProductGrid.types.ts # Props types
-├── forms/
-│   ├── LoginForm.tsx        # Form đăng nhập (username + password + submit)
-│   ├── RegisterForm.tsx     # Form đăng ký
-│   ├── CheckoutForm.tsx     # Form thanh toán
-│   ├── ReviewForm.tsx       # Form đánh giá (modal content)
-│   └── Forms.types.ts       # Props types
-├── modals/
-│   ├── ReviewModal.tsx      # Modal đánh giá (header + form + footer)
-│   ├── ConfirmModal.tsx     # Modal xác nhận generic
-│   └── Modal.types.ts       # Props types
-├── shop-grid/
-│   ├── ShopGrid.tsx         # Grid hiển thị danh sách quán
-│   ├── ShopFilters.tsx      # Bộ lọc quán (location, rating)
-│   └── ShopGrid.types.ts    # Props types
-├── hero-section/
-│   ├── HeroSection.tsx      # Banner hero cấp trang
-│   └── Hero.types.ts        # Props types
-├── featured-section/
-│   ├── FeaturedProducts.tsx # Section sản phẩm nổi bật
-│   ├── FeaturedShops.tsx    # Section quán nổi bật
-│   └── Featured.types.ts    # Props types
-└── index.ts                 # Barrel export
-```
-
-### Ví dụ Organisms
-
-**ProductGrid.tsx:**
-
-```tsx
-"use client";
-
-import ProductCard from "@/components/molecules/cards/ProductCard";
-import { useCart } from "@/lib/cart-context";
-import { MOCK_PRODUCTS } from "@/lib/constants";
-import { useMenu } from "@/lib/menu-context";
-
-import type { ProductGridProps } from "./ProductGrid.types";
-
-export default function ProductGrid({ searchQuery = "" }: ProductGridProps) {
-  const { activeCategory } = useMenu();
-  const { addToCart } = useCart();
-
-  const filtered = MOCK_PRODUCTS.filter((product) => {
-    const matchCategory =
-      activeCategory === "all" || product.category === activeCategory;
-    const matchSearch =
-      product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      product.description.toLowerCase().includes(searchQuery.toLowerCase());
-    return matchCategory && matchSearch;
-  });
-
-  return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-      {filtered.map((product) => (
-        <ProductCard
-          key={product.id}
-          product={product}
-          onAddToCart={addToCart}
-        />
-      ))}
-    </div>
-  );
-}
-```
-
----
-
-## 4) TEMPLATES (`components/templates/`)
-
-**Mục đích:** Bố cục cấp trang, cấu trúc nội dung, không có data cụ thể.
-
-Chứa layout và structure của page, nhưng data được truyền từ page component.
-
-### Cấu trúc thư mục
-
-```
-components/templates/
-├── main-layout/
-│   ├── MainLayout.tsx       # Layout chính (header + sidebar + content + footer)
-│   ├── MainLayout.types.ts  # Props types
-│   └── styles.ts            # Responsive grid layout logic
-├── feed-layout/
-│   ├── FeedLayout.tsx       # Layout feed (khám phá quán)
-│   └── FeedLayout.types.ts  # Props types
-├── manager-layout/
-│   ├── ManagerLayout.tsx    # Layout manager dashboard
-│   └── ManagerLayout.types.ts # Props types
-├── checkout-layout/
-│   ├── CheckoutLayout.tsx   # Layout thanh toán (steps, cart, form)
-│   └── CheckoutLayout.types.ts # Props types
-├── auth-layout/
-│   ├── AuthLayout.tsx       # Layout auth (login/register)
-│   └── AuthLayout.types.ts  # Props types
-└── index.ts                 # Barrel export
-```
-
-### Ví dụ Templates
-
-**MainLayout.tsx:**
-
-```tsx
-import Navbar from "@/components/organisms/navigation/Navbar";
-import Footer from "@/layouts/footer";
-import Header from "@/layouts/header";
-
-import type { MainLayoutProps } from "./MainLayout.types";
-
-export default function MainLayout({ children }: MainLayoutProps) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <Header />
-      <div className="flex flex-1">
-        {/* Sidebar - ẩn trên mobile */}
-        <nav className="hidden w-64 border-r border-[color:var(--color-border)] bg-[color:var(--color-bg-sidebar)] md:block">
-          <Navbar />
-        </nav>
-        {/* Main content */}
-        <main className="flex-1 p-4 md:p-6">{children}</main>
-      </div>
-      <Footer />
-    </div>
-  );
-}
-```
-
----
-
-## 5) PAGES (`app/*/page.tsx`)
-
-**Mục đích:** Các phiên bản cụ thể với dữ liệu thật, logic cấp trang.
-
-Server/client components sử dụng templates, organisms, nhận data từ API/context.
-
-### Ví dụ Pages
-
-**app/(main)/page.tsx:**
-
-```tsx
-"use client";
-
-import FeaturedSection from "@/components/organisms/featured-section/FeaturedSection";
-import ProductGrid from "@/components/organisms/product-grid/ProductGrid";
-import MainLayout from "@/components/templates/main-layout/MainLayout";
-import { useState } from "react";
-
-export default function MainPage() {
-  const [searchQuery, setSearchQuery] = useState("");
-
-  return (
-    <MainLayout>
-      <FeaturedSection />
-      <div className="mt-8">
-        <ProductGrid searchQuery={searchQuery} />
-      </div>
-    </MainLayout>
-  );
-}
-```
-
----
-
-## 6) File Hierarchy Summary
-
-```
-components/
-├── atoms/
-│   ├── buttons/
-│   ├── inputs/
-│   ├── badges/
-│   ├── icons/
-│   ├── typography/
-│   ├── dividers/
-│   ├── loaders/
-│   └── index.ts
-├── molecules/
-│   ├── form-groups/
-│   ├── cards/
-│   ├── ratings/
-│   ├── price-display/
-│   ├── search-bar/
-│   ├── breadcrumb/
-│   ├── tabs/
-│   └── index.ts
-├── organisms/
-│   ├── navigation/
-│   ├── cart/
-│   ├── product-grid/
-│   ├── forms/
-│   ├── modals/
-│   ├── shop-grid/
-│   ├── hero-section/
-│   ├── featured-section/
-│   └── index.ts
-├── templates/
-│   ├── main-layout/
-│   ├── feed-layout/
-│   ├── manager-layout/
-│   ├── checkout-layout/
-│   ├── auth-layout/
-│   └── index.ts
-└── ATOMIC_DESIGN.md (this file)
-```
-
----
-
-## 7) Migration Guide (Old → New)
-
-### Old Structure → New Structure Mapping
-
-| Old File          | New Location                       | Type     |
-| ----------------- | ---------------------------------- | -------- |
-| `CartProduct.tsx` | `molecules/cards/ProductCard.tsx`  | Molecule |
-| `Navbar.tsx`      | `organisms/navigation/Navbar.tsx`  | Organism |
-| `CartFab.tsx`     | `organisms/cart/CartFab.tsx`       | Organism |
-| `ReviewModal.tsx` | `organisms/modals/ReviewModal.tsx` | Organism |
-
-### Migration Steps
-
-1. Create new directory structure under `components/`
-2. Move existing components to appropriate levels (atoms → molecules →
-   organisms)
-3. Extract shared styles/logic into atoms
-4. Update imports in `app/` pages
-5. Test responsiveness at each breakpoint
-6. Update `COMPONENTS.md` with new structure
-
----
-
-## 8) Best Practices
-
-### Atoms Development
-
-- ✅ Reusable across entire project
-- ✅ No business logic
-- ✅ No context/hooks (useAuth, useCart)
-- ✅ Pure props-based
-- ✅ Full TypeScript typing
-- ❌ No "use client" needed (unless interactive, e.g., Button)
-
-### Molecules Development
-
-- ✅ Combines multiple atoms
-- ✅ Simple state (open/close, hover state)
-- ✅ No complex business logic
-- ✅ Can use useState for UI state
-- ✅ Reusable in multiple contexts
-- ❌ No global state (useAuth, useCart)
-
-### Organisms Development
-
-- ✅ Complex UI sections
-- ✅ Can use contexts (useAuth, useCart, useMenu)
-- ✅ Business logic
-- ✅ Always "use client"
-- ✅ Filter, sort, complex interactions
-- ❌ Not reusable across different page types
-
-### Templates Development
-
-- ✅ Page layout structure
-- ✅ Composition of organisms + layout
-- ✅ No data fetching/business logic
-- ✅ Children prop pattern
-- ✅ Props for customization
-- ❌ No hardcoded data
-
-### Pages Development
-
-- ✅ Specific page implementations
-- ✅ Route-specific logic
-- ✅ Data integration
-- ✅ Context usage at page level
-- ✅ State management orchestration
-- ❌ No UI component definitions (use organisms)
-
----
-
-## 9) Import Patterns
-
-### Atoms
-
-```tsx
-import Button from "@/components/atoms/buttons/Button";
-import Text from "@/components/atoms/typography/Text";
-```
-
-### Molecules
-
-```tsx
-import ProductCard from "@/components/molecules/cards/ProductCard";
-import FormField from "@/components/molecules/form-groups/FormField";
-```
-
-### Organisms
-
-```tsx
-import LoginForm from "@/components/organisms/forms/LoginForm";
-import ProductGrid from "@/components/organisms/product-grid/ProductGrid";
-```
-
-### Templates
-
-```tsx
-import MainLayout from "@/components/templates/main-layout/MainLayout";
-```
-
-### Barrel Exports
-
-```tsx
-// Usage
-import { Button, Text } from "@/components/atoms";
-
-// components/atoms/index.ts
-export { default as Button } from "./buttons/Button";
-export { default as Text } from "./typography/Text";
-export * from "./buttons/Button.types";
-```
-
----
-
-## 10) Common Patterns
-
-### Creating a New Atom
-
-```tsx
-// atoms/buttons/NewButton.tsx
-export default function NewButton({ variant, ...props }: Props) {
-  return <button className={styles[variant]} {...props} />;
-}
-
-// atoms/buttons/NewButton.types.ts
-export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant: "type1" | "type2";
-}
-```
-
-### Creating a New Molecule
-
-```tsx
-// molecules/cards/NewCard.tsx
-export default function NewCard({ item, onAction }: Props) {
-  const [hover, setHover] = useState(false);
-  return (
-    <div onMouseEnter={() => setHover(true)}>{/* atoms composition */}</div>
-  );
-}
-```
-
-### Creating a New Organism
-
-```tsx
-// organisms/sections/NewSection.tsx
-"use client";
-
-import ProductCard from "@/components/molecules/cards/ProductCard";
-import { useAuth } from "@/lib/auth-context";
-
-export default function NewSection() {
-  const { user } = useAuth();
-  // business logic, filtering, etc.
-  return <section>{/* molecules composition + logic */}</section>;
-}
-```
-
-### Creating a New Template
-
-```tsx
-// templates/layouts/NewTemplate.tsx
-export default function NewTemplate({ children, header }: Props) {
-  return (
-    <div className="layout">
-      <header>{header}</header>
-      <main>{children}</main>
-    </div>
-  );
-}
-```
-
----
-
-## 11) Testing & Documentation
-
-### For Each Component Level
-
-#### Atoms
-
-- Unit test: Props validation, styling
-- Storybook: All variants, all states
-- Doc: Props interface, usage examples
-
-#### Molecules
-
-- Integration test: Atoms composition
-- Storybook: Different molecule states
-- Doc: Props, behavior, dependencies
-
-#### Organisms
-
-- Integration test: With contexts mocked
-- E2E: User interactions
-- Doc: Logic flow, API integration points
-
-#### Templates
-
-- Layout test: Responsive grid layouts
-- Visual: Desktop/tablet/mobile
-- Doc: Layout structure, breakpoints
-
-#### Pages
-
-- E2E test: Full user flows
-- Performance: Metrics
-- Doc: Route, data flow, features
-
----
-
-## 12) Performance Optimization
-
-### Code Splitting
-
-- Atoms: Always bundled (small, frequently used)
-- Molecules: Bundled by page/feature
-- Organisms: Use `dynamic()` for heavy sections
-- Templates: Bundled by layout type
-- Pages: Automatic splitting by Next.js
-
-### Lazy Loading Example
-
-```tsx
-import dynamic from "next/dynamic";
-
-const ReviewModal = dynamic(
-  () => import("@/components/organisms/modals/ReviewModal"),
-  { loading: () => <Spinner /> },
-);
-```
-
-### Image Optimization
-
-- Use Next.js `Image` component (atoms/molecules)
-- Optimize with `priority` for above-fold
-- Use responsive sizes: `sizes="(max-width: 640px) 100vw, 50vw"`
-
----
-
-## 13) Accessibility
-
-### All Levels
-
-- Semantic HTML: `<button>`, `<a>`, `<form>`, `<nav>`
-- ARIA attributes: `aria-label`, `aria-expanded`, `role`
-- Keyboard navigation: Tab order, focus visible
-- Color contrast: WCAG AA minimum
-- Alt text: All images have meaningful `alt`
-
-### Example
-
-```tsx
-<button
-  aria-label="Add to cart"
-  className="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
->
-  <CartIcon aria-hidden="true" />
-  Add to Cart
-</button>
-```
-
----
-
-## 14) Version Control & Documentation
-
-### File Format
-
-```
-components/
-├── atoms/
-│   ├── buttons/
-│   │   ├── Button.tsx
-│   │   ├── Button.types.ts
-│   │   └── Button.md  # Component documentation
-│   └── ...
-├── molecules/
-│   ├── cards/
-│   │   ├── ProductCard.tsx
-│   │   ├── Card.types.ts
-│   │   └── ProductCard.md
-│   └── ...
-└── ...
-```
-
-### Documentation Template
-
-```markdown
-# ProductCard
-
-## Purpose
-
-Display individual product with image, name, price, and action button.
-
-## Props
-
-- `product: Product` - Product data
-- `onAddToCart: (product: Product) => void` - Add to cart handler
-
-## Usage
-
-\`\`\`tsx <ProductCard product={item} onAddToCart={addToCart} /> \`\`\`
-
-## Variants
-
-- Image with loading state
-- With discount badge
-- With rating stars
-
-## Responsive
-
-- Mobile: Single column, full width
-- Desktop: Grid layout
-```
-
----
-
-Cấu trúc này cung cấp: ✅ **Scalability**: Dễ thêm components mới ✅
-**Reusability**: Tối đa tái sử dụng ✅ **Maintainability**: Code dễ hiểu, tìm
-kiếm ✅ **Testability**: Mỗi level có logic riêng ✅ **Performance**: Smart
-code-splitting

README.md

@@ -67,13 +67,15 @@ Dành cho khách hàng:
 
 Dành cho quản lý:
 
-- Sidebar desktop: Brand, tab navigation (Thực đơn / Combo / Danh mục), link tới Analytics
+- Sidebar desktop: Brand, tab navigation (Thực đơn / Combo / Danh mục), link tới
+  Analytics
 - CRUD sản phẩm, combo, danh mục qua modals
 - Auth guard: tự động redirect non-manager về `/`
 
 #### 9. **Trang Phân Tích Tài Chính** (`app/(manager)/manager/analytics`)
 
-- Summary cards: Doanh thu, đơn hàng, lợi nhuận, giá trị đơn trung bình (so sánh kỳ trước)
+- Summary cards: Doanh thu, đơn hàng, lợi nhuận, giá trị đơn trung bình (so sánh
+  kỳ trước)
 - Bộ chọn kỳ: Ngày / Tuần / Tháng / Năm
 - Biểu đồ SVG thuần: Line, Bar, Pie — hover tooltips tương tác
 - Bảng top 5 sản phẩm và bảng chi tiết có thể sắp xếp
@@ -196,18 +198,18 @@ frondend/
 
 ## Công Nghệ Sử Dụng
 
-| Công nghệ    | Phiên bản | Mục đích                              |
-| ------------ | --------- | ------------------------------------- |
-| Next.js      | 16.1.7    | React Framework (App Router)          |
-| React        | 19.2.3    | Thư viện UI                           |
-| TypeScript   | ^5        | Kiểu dữ liệu tĩnh                     |
-| Tailwind CSS | ^4.2.2    | Utility-first CSS framework           |
-| Geist Font   | -         | Font chữ (Google Fonts via next/font) |
-| FontAwesome  | 6.7.2     | Icon library (CDN)                    |
-| pnpm         | -         | Package manager                       |
-| ESLint       | ^9        | Linting                               |
-| Prettier     | ^3        | Code formatting                       |
-| semantic-release | ^25   | Automated versioning & release        |
+| Công nghệ        | Phiên bản | Mục đích                              |
+| ---------------- | --------- | ------------------------------------- |
+| Next.js          | 16.1.7    | React Framework (App Router)          |
+| React            | 19.2.3    | Thư viện UI                           |
+| TypeScript       | ^5        | Kiểu dữ liệu tĩnh                     |
+| Tailwind CSS     | ^4.2.2    | Utility-first CSS framework           |
+| Geist Font       | -         | Font chữ (Google Fonts via next/font) |
+| FontAwesome      | 6.7.2     | Icon library (CDN)                    |
+| pnpm             | -         | Package manager                       |
+| ESLint           | ^9        | Linting                               |
+| Prettier         | ^3        | Code formatting                       |
+| semantic-release | ^25       | Automated versioning & release        |
 
 ---
 
@@ -225,11 +227,11 @@ frondend/
 
 ### Tài Khoản Demo
 
-| Loại tài khoản | Tên đăng nhập  | Mật khẩu       |
-| -------------- | -------------- | -------------- |
-| Manager        | admin          | admin          |
-| Staff          | Nguyễn Văn An  | Nguyễn Văn An  |
-| Customer       | 0987654321     | user1          |
+| Loại tài khoản | Tên đăng nhập | Mật khẩu      |
+| -------------- | ------------- | ------------- |
+| Manager        | admin         | admin         |
+| Staff          | Nguyễn Văn An | Nguyễn Văn An |
+| Customer       | 0987654321    | user1         |
 
 ### Design & Styling
 
@@ -243,14 +245,18 @@ frondend/
 Dự án tuân theo **Atomic Design** pattern — chi tiết tại `Atomic.md`:
 
 - **Atoms** - Nguyên tố cơ bản: Button, Input, Badge, Text, Heading, Divider
-- **Molecules** - Nhóm atoms: ProductCard, ShopCard, SearchBar, PaymentSummaryCard
-- **Organisms** - Phần UI phức tạp: CategorySidebar, CartFab, ProductGrid, ShopGrid, ReviewModal, analytics charts, manager tabs/modals
-- **Templates** - Bố cục trang: MainLayout, AuthLayout, FeedLayout, ManagerLayout
+- **Molecules** - Nhóm atoms: ProductCard, ShopCard, SearchBar,
+  PaymentSummaryCard
+- **Organisms** - Phần UI phức tạp: CategorySidebar, CartFab, ProductGrid,
+  ShopGrid, ReviewModal, analytics charts, manager tabs/modals
+- **Templates** - Bố cục trang: MainLayout, AuthLayout, FeedLayout,
+  ManagerLayout
 
 ### Data & Integration
 
 - Mock data nằm trong `lib/constants.ts`
-- Context providers trong `app/providers.tsx`: AuthProvider, MenuProvider, CartProvider
+- Context providers trong `app/providers.tsx`: AuthProvider, MenuProvider,
+  CartProvider
 - ManagerProvider được thêm bởi `app/(manager)/layout.tsx`
 - Thay bằng API calls khi backend sẵn sàng
 - Ảnh sản phẩm: thêm vào `public/imgs/products/`

app/(main)/login/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { SHOP_INFO } from "@/lib/constants";
 import LoginForm from "@/components/organisms/forms/LoginForm";
+import { SHOP_INFO } from "@/lib/constants";
 import Image from "next/image";
 
 export default function LoginPage() {
@@ -28,7 +28,7 @@ export default function LoginPage() {
             Đăng nhập vào hệ thống
           </p>
         </div>
-        
+
         {/* Login Form */}
         <LoginForm />
 

app/(main)/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
+import { SearchBar } from "@/components/molecules/search-bar";
 import { CategorySidebar } from "@/components/organisms/navigation";
 import { ProductGrid } from "@/components/organisms/product-grid";
-import { SearchBar } from "@/components/molecules/search-bar";
-import { useMenu } from "@/lib/menu-context";
 import { MENU_CATEGORIES } from "@/lib/constants";
+import { useMenu } from "@/lib/menu-context";
 import { useEffect, useState } from "react";
 
 /**
@@ -56,15 +56,18 @@ export default function Home() {
         <div className="mb-5 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
           {/* Title + count */}
           <div className="shrink-0">
-            <h2 className="text-foreground text-xl font-bold">
+            <h1 className="text-foreground text-xl font-bold">
               {activeCategoryLabel}
-            </h2>
+            </h1>
           </div>
 
           {/* Search bar */}
           <SearchBar
             value={searchQuery}
-            onChange={setSearchQuery}
+            onChange={(q) => {
+              if (q && activeCategory !== "all") setActiveCategory("all");
+              setSearchQuery(q);
+            }}
             onClear={() => setSearchQuery("")}
             placeholder="Tìm kiếm món..."
             className="sm:max-w-xs"
@@ -72,10 +75,7 @@ export default function Home() {
         </div>
 
         {/* ── Product grid (organism handles mobile category menu + grid) ── */}
-        <ProductGrid
-          searchQuery={searchQuery}
-          isSidebarOpen={isSidebarOpen}
-        />
+        <ProductGrid searchQuery={searchQuery} isSidebarOpen={isSidebarOpen} />
       </main>
     </div>
   );

app/(main)/payment/page.tsx

@@ -45,13 +45,22 @@ export default function PaymentPage() {
                   <table className="w-full min-w-190 text-sm">
                     <thead>
                       <tr className="bg-(--color-border-light)/40 text-left">
-                        <th className="px-4 py-3 font-semibold">
+                        <th scope="col" className="px-4 py-3 font-semibold">
                           Tên sản phẩm
                         </th>
-                        <th className="px-4 py-3 font-semibold">Giá tiền</th>
-                        <th className="px-4 py-3 font-semibold">Mô tả</th>
-                        <th className="px-4 py-3 font-semibold">Số lượng</th>
-                        <th className="px-4 py-3 text-right font-semibold">
+                        <th scope="col" className="px-4 py-3 font-semibold">
+                          Giá tiền
+                        </th>
+                        <th scope="col" className="px-4 py-3 font-semibold">
+                          Mô tả
+                        </th>
+                        <th scope="col" className="px-4 py-3 font-semibold">
+                          Số lượng
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-4 py-3 text-right font-semibold"
+                        >
                           Xóa
                         </th>
                       </tr>
@@ -75,7 +84,7 @@ export default function PaymentPage() {
                             <div className="flex items-center gap-2">
                               <button
                                 onClick={() => decreaseQty(item.id)}
-                                className="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                                className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                 aria-label={`Giảm số lượng ${item.name}`}
                               >
                                 -
@@ -92,7 +101,7 @@ export default function PaymentPage() {
                               />
                               <button
                                 onClick={() => increaseQty(item.id)}
-                                className="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                                className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                 aria-label={`Tăng số lượng ${item.name}`}
                               >
                                 +
@@ -105,6 +114,7 @@ export default function PaymentPage() {
                               variant="danger"
                               size="md"
                               style="payment"
+                              aria-label={`Xóa ${item.name} khỏi giỏ hàng`}
                             >
                               Xóa sản phẩm
                             </Button>

app/(staff)/staff/schedule/page.tsx

@@ -12,9 +12,18 @@ import Link from "next/link";
 import { useState } from "react";
 
 const MONTH_NAMES = [
-  "Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4",
-  "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8",
-  "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12",
+  "Tháng 1",
+  "Tháng 2",
+  "Tháng 3",
+  "Tháng 4",
+  "Tháng 5",
+  "Tháng 6",
+  "Tháng 7",
+  "Tháng 8",
+  "Tháng 9",
+  "Tháng 10",
+  "Tháng 11",
+  "Tháng 12",
 ];
 
 function getMonday(d: Date): Date {
@@ -172,7 +181,9 @@ export default function StaffSchedulePage() {
         <div className="border-t border-(--color-border-light) p-3">
           <div className="flex items-center gap-3 rounded-xl p-3">
             <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-(--color-accent-light)">
-              <i className={`fa-solid ${isManager ? "fa-user-tie" : "fa-user"} text-sm text-(--color-primary)`}></i>
+              <i
+                className={`fa-solid ${isManager ? "fa-user-tie" : "fa-user"} text-sm text-(--color-primary)`}
+              ></i>
             </div>
             <div className="min-w-0 flex-1">
               <p className="text-foreground truncate text-sm font-semibold">
@@ -212,7 +223,9 @@ export default function StaffSchedulePage() {
               Đăng ký ca làm
             </h1>
             <p className="text-xs text-(--color-text-muted)">
-              {view === "week" ? weekLabel : `${MONTH_NAMES[currentDate.getMonth()]} ${currentDate.getFullYear()}`}
+              {view === "week"
+                ? weekLabel
+                : `${MONTH_NAMES[currentDate.getMonth()]} ${currentDate.getFullYear()}`}
             </p>
           </div>
 

components/COMPONENTS.md

@@ -1,7 +1,7 @@
 # Components Documentation
 
-> This project follows **Atomic Design** pattern.
-> See `Atomic.md` at project root for full structure guide.
+> This project follows **Atomic Design** pattern. See `Atomic.md` at project
+> root for full structure guide.
 
 ## Directory Structure
 
@@ -19,17 +19,21 @@ components/
 
 ### ProductCard (`molecules/cards/ProductCard.tsx`)
 
-**Description:** Product card molecule. Displays product image, name, description, formatted price, and a Buy button. Width is controlled by the parent grid (w-full).
+**Description:** Product card molecule. Displays product image, name,
+description, formatted price, and a Buy button. Width is controlled by the
+parent grid (w-full).
 
 **Atomic level:** Molecule (composed of Button, Caption, Text atoms)
 
 ### ShopCard (`molecules/cards/ShopCard.tsx`)
 
-**Description:** Shop discovery card. Displays shop image, name, address, and a link to the menu.
+**Description:** Shop discovery card. Displays shop image, name, address, and a
+link to the menu.
 
 ### SearchBar (`molecules/search-bar/SearchBar.tsx`)
 
-**Description:** Search input with clear button. Controlled component — value and onChange come from parent.
+**Description:** Search input with clear button. Controlled component — value
+and onChange come from parent.
 
 ---
 
@@ -37,35 +41,41 @@ components/
 
 ### CategorySidebar (`organisms/navigation/CategorySidebar.tsx`)
 
-**Description:** Left sidebar with collapsible category filter. Sticky below header, full viewport height minus header.
+**Description:** Left sidebar with collapsible category filter. Sticky below
+header, full viewport height minus header.
 
 ### CartFab (`organisms/cart/CartFab.tsx`)
 
-**Description:** Floating Action Button displaying cart item count. Links to /payment page.
+**Description:** Floating Action Button displaying cart item count. Links to
+/payment page.
 
 ### ProductGrid (`organisms/product-grid/ProductGrid.tsx`)
 
-**Description:** Full product grid organism with mobile category tabs, filtering, and empty state. Uses useCart and useMenu contexts.
+**Description:** Full product grid organism with mobile category tabs,
+filtering, and empty state. Uses useCart and useMenu contexts.
 
 ### ShopGrid (`organisms/shop-grid/ShopGrid.tsx`)
 
-**Description:** Responsive grid of ShopCard molecules for the feed/discovery page.
+**Description:** Responsive grid of ShopCard molecules for the feed/discovery
+page.
 
 ### ReviewModal (`organisms/modals/ReviewModal.tsx`)
 
-**Description:** Modal for customer reviews. Shows 5-star rating and textarea. After submission, displays thank-you message.
+**Description:** Modal for customer reviews. Shows 5-star rating and textarea.
+After submission, displays thank-you message.
 
 ### Analytics Charts (`organisms/analytics/`)
 
-**Description:** Pure-SVG chart and table components for the Financial Analytics dashboard. All components are interactive with hover tooltips.
+**Description:** Pure-SVG chart and table components for the Financial Analytics
+dashboard. All components are interactive with hover tooltips.
 
-| Component | File | Description |
-|-----------|------|-------------|
-| LineChart | LineChart.tsx | Revenue trend line chart with area fill and hover tooltips |
-| BarChart | BarChart.tsx | Grouped bar chart comparing current vs previous period |
-| PieChart | PieChart.tsx | Pie chart with interactive legend for category breakdown |
-| SummaryCard | SummaryCard.tsx | Metric card with period-over-period comparison indicator |
-| ProductTable | ProductTable.tsx | Sortable product sales table with profit margin badges |
+| Component    | File             | Description                                                |
+| ------------ | ---------------- | ---------------------------------------------------------- |
+| LineChart    | LineChart.tsx    | Revenue trend line chart with area fill and hover tooltips |
+| BarChart     | BarChart.tsx     | Grouped bar chart comparing current vs previous period     |
+| PieChart     | PieChart.tsx     | Pie chart with interactive legend for category breakdown   |
+| SummaryCard  | SummaryCard.tsx  | Metric card with period-over-period comparison indicator   |
+| ProductTable | ProductTable.tsx | Sortable product sales table with profit margin badges     |
 
 **Usage:** Imported via `@/components/organisms/analytics` barrel index.
 
@@ -75,11 +85,13 @@ components/
 
 ### MainLayout (`templates/main-layout/MainLayout.tsx`)
 
-**Description:** Main layout template — wraps content with Header, Footer, and CartFab. Used by (main) route group.
+**Description:** Main layout template — wraps content with Header, Footer, and
+CartFab. Used by (main) route group.
 
 ### AuthLayout (`templates/auth-layout/AuthLayout.tsx`)
 
-**Description:** Auth layout template — centers content in screen. Used by login/register pages.
+**Description:** Auth layout template — centers content in screen. Used by
+login/register pages.
 
 ### FeedLayout (`templates/feed-layout/FeedLayout.tsx`)
 
@@ -87,7 +99,8 @@ components/
 
 ### ManagerLayout (`templates/manager-layout/ManagerLayout.tsx`)
 
-**Description:** Manager layout template — auth guard + ManagerProvider. Used by the manager route group.
+**Description:** Manager layout template — auth guard + ManagerProvider. Used by
+the manager route group.
 
 ---
 
@@ -95,16 +108,20 @@ components/
 
 ### AuthContext (`lib/auth-context.tsx`)
 
-Manages user authentication state including login, logout, and registration. Uses localStorage for persistence.
+Manages user authentication state including login, logout, and registration.
+Uses localStorage for persistence.
 
 ### CartContext (`lib/cart-context.tsx`)
 
-Manages shopping cart state with localStorage persistence. Tracks items, quantities, and totals.
+Manages shopping cart state with localStorage persistence. Tracks items,
+quantities, and totals.
 
 ### MenuContext (`lib/menu-context.tsx`)
 
-Provides shared activeCategory state across components. Synchronizes Header mobile menu and CategorySidebar selection.
+Provides shared activeCategory state across components. Synchronizes Header
+mobile menu and CategorySidebar selection.
 
 ### ManagerContext (`lib/manager-context.tsx`)
 
-Manages menu CRUD state (products, combos, categories) for the manager dashboard.
+Manages menu CRUD state (products, combos, categories) for the manager
+dashboard.

components/atoms/ATOMS.md

@@ -42,6 +42,7 @@ Main interactive button component with multiple variants and sizes.
 - All standard HTML button attributes
 
 **Usage:**
+
 ```tsx
 import { Button } from "@/components/atoms";
 
@@ -59,6 +60,7 @@ import { Button } from "@/components/atoms";
 ```
 
 **Styling:**
+
 - Primary: Branded color with dark hover
 - Secondary: Border style with light background on hover
 - Danger: Red for destructive actions
@@ -78,6 +80,7 @@ Button designed specifically for icon-only interactions.
 - All standard HTML button attributes
 
 **Usage:**
+
 ```tsx
 import { IconButton } from "@/components/atoms";
 
@@ -102,6 +105,7 @@ General text input field with optional label, error, and icon.
 - All standard HTML input attributes
 
 **Usage:**
+
 ```tsx
 import { TextInput } from "@/components/atoms";
 
@@ -135,6 +139,7 @@ Search input with built-in search icon and clear button.
 - All standard HTML input attributes
 
 **Usage:**
+
 ```tsx
 import { SearchInput } from "@/components/atoms";
 
@@ -161,6 +166,7 @@ Multi-line text input with optional label and error.
 - All standard HTML textarea attributes
 
 **Usage:**
+
 ```tsx
 import { Textarea } from "@/components/atoms";
 
@@ -188,6 +194,7 @@ Semantic heading component with level-based sizing.
 - All standard HTML heading attributes
 
 **Sizing:**
+
 - Level 1: text-3xl font-bold
 - Level 2: text-2xl font-bold
 - Level 3: text-xl font-bold
@@ -196,6 +203,7 @@ Semantic heading component with level-based sizing.
 - Level 6: text-sm font-semibold
 
 **Usage:**
+
 ```tsx
 import { Heading } from "@/components/atoms";
 
@@ -217,12 +225,14 @@ Paragraph text with semantic variants.
 - All standard HTML paragraph attributes
 
 **Variants:**
+
 - body1: text-base (main content)
 - body2: text-sm (secondary content)
 - caption: text-xs (smallest text)
 - label: text-sm font-medium (form labels)
 
 **Usage:**
+
 ```tsx
 import { Text } from "@/components/atoms";
 
@@ -244,6 +254,7 @@ Small caption/note text component.
 - All standard HTML span attributes
 
 **Usage:**
+
 ```tsx
 import { Caption } from "@/components/atoms";
 
@@ -268,6 +279,7 @@ Labeled badge component for highlighting information.
 - All standard HTML span attributes
 
 **Variants:**
+
 - primary: Branded color
 - secondary: Light gray
 - success: Green
@@ -275,6 +287,7 @@ Labeled badge component for highlighting information.
 - warning: Yellow
 
 **Usage:**
+
 ```tsx
 import { Badge } from "@/components/atoms";
 
@@ -296,6 +309,7 @@ Specialized badge for displaying formatted prices.
 - All standard HTML span attributes
 
 **Usage:**
+
 ```tsx
 import { PriceBadge } from "@/components/atoms";
 
@@ -304,6 +318,7 @@ import { PriceBadge } from "@/components/atoms";
 ```
 
 **Output:**
+
 - VND: "50.000 ₫"
 - USD: "$99.99"
 
@@ -321,6 +336,7 @@ Visual separator element.
 - All standard HTML hr attributes
 
 **Usage:**
+
 ```tsx
 import { Divider } from "@/components/atoms";
 
@@ -414,6 +430,7 @@ import type {
 ```
 
 ### Product Card
+
 ```tsx
 <div className="rounded-lg border p-4">
   <Heading level={3}>Product Name</Heading>
@@ -426,6 +443,7 @@ import type {
 ```
 
 ### Rating Display
+
 ```tsx
 <div>
   <Heading level={4}>Reviews</Heading>
@@ -439,6 +457,7 @@ import type {
 ## 🧪 Testing Atoms
 
 ### Props Validation
+
 ```tsx
 // ✅ Valid
 <Button variant="primary" size="sm">Click</Button>

components/atoms/buttons/Button.tsx

@@ -8,6 +8,7 @@ export default function Button({
   size = "md",
   icon,
   iconPosition = "left",
+  className = "",
   disabled = false,
   children,
   ...props
@@ -43,7 +44,7 @@ export default function Button({
 
   return (
     <button
-      className={`${styles[style]} ${variants[variant]} ${sizes[size]}`}
+      className={`${styles[style]} ${variants[variant]} ${sizes[size]} ${className}`}
       disabled={disabled}
       {...props}
     >

components/atoms/buttons/Button.types.ts

@@ -15,6 +15,7 @@ export interface ButtonProps extends Omit<
   size?: "sm" | "md" | "lg";
   icon?: string; // FontAwesome class like "fa-solid fa-cart-plus"
   iconPosition?: "left" | "right";
+  className?: string;
   disabled?: boolean;
   children: React.ReactNode;
 }

components/atoms/inputs/SearchInput.tsx

@@ -21,9 +21,11 @@ export default function SearchInput({
       />
       {value && onClear && (
         <button
+          title="Xóa"
           type="button"
           onClick={onClear}
           className="absolute top-1/2 right-3 -translate-y-1/2 text-(--color-text-muted) transition-colors hover:text-(--color-primary)"
+          aria-label="Xóa"
         >
           <i className="fa-solid fa-xmark text-sm"></i>
         </button>

components/molecules/cards/PaymentSummaryCard.tsx

@@ -13,14 +13,13 @@ export default function PaymentSummaryCard({
   isCustomer = false,
   backHref,
 }: PaymentSummaryCardProps) {
-
-    const [isReviewOpen, setIsReviewOpen] = useState(false);
-    const handlePayment = () => {
+  const [isReviewOpen, setIsReviewOpen] = useState(false);
+  const handlePayment = () => {
     // UI-only: open review modal after "payment"
     if (isCustomer) {
-        setIsReviewOpen(true);
-  }
-};
+      setIsReviewOpen(true);
+    }
+  };
   return (
     <aside className="shrink-0 xl:w-85">
       <div className="bg-card sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) p-4 md:p-5">

components/molecules/cards/ProductCard.tsx

@@ -62,7 +62,13 @@ export default function ProductCard({
         <Text variant="body2" className="font-bold">
           {formattedPrice}
         </Text>
-        <Button onClick={onBuy} variant="primary" size="sm" icon="fa-cart-plus">
+        <Button
+          onClick={onBuy}
+          variant="primary"
+          size="sm"
+          icon="fa-cart-plus"
+          aria-label={`Mua ${productName}`}
+        >
           Mua
         </Button>
       </div>

components/molecules/cards/ShiftCard.tsx

@@ -4,7 +4,10 @@ import type { ShiftSlot } from "@/lib/types";
 
 import type { ShiftCardProps } from "./ShiftCard.types";
 
-const STATUS_STYLES: Record<ShiftSlot["status"], { bg: string; text: string; label: string }> = {
+const STATUS_STYLES: Record<
+  ShiftSlot["status"],
+  { bg: string; text: string; label: string }
+> = {
   available: {
     bg: "bg-blue-50 border-blue-200",
     text: "text-blue-700",
@@ -34,7 +37,11 @@ function formatWage(wage: number): string {
   return wage.toLocaleString("vi-VN");
 }
 
-export default function ShiftCard({ shift, compact = false, onClick }: ShiftCardProps) {
+export default function ShiftCard({
+  shift,
+  compact = false,
+  onClick,
+}: ShiftCardProps) {
   const style = STATUS_STYLES[shift.status];
 
   if (compact) {
@@ -86,7 +93,7 @@ export default function ShiftCard({ shift, compact = false, onClick }: ShiftCard
 
       {shift.registeredStaff.length > 0 && (
         <div className="mt-2 border-t border-current/10 pt-2">
-          <p className="text-[10px] font-medium uppercase tracking-wide opacity-60">
+          <p className="text-[10px] font-medium tracking-wide uppercase opacity-60">
             Nhân viên ({shift.registeredStaff.length}/{shift.maxStaff})
           </p>
           <div className="mt-1 flex flex-wrap gap-1">

components/molecules/search-bar/SearchBar.tsx

@@ -17,6 +17,7 @@ export default function SearchBar({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
+        aria-label="Tìm kiếm món ăn"
         className="bg-card text-foreground border-border placeholder:text-muted-foreground focus:border-primary focus:ring-primary focus:ring-opacity-20 w-full rounded-xl border py-2 pr-9 pl-9 text-sm transition-all duration-150 outline-none focus:ring-2"
       />
       {value && (

components/organisms/analytics/BarChart.tsx

@@ -16,10 +16,16 @@ interface BarChartProps {
  * Tooltip auto-flips above/below bar top to stay inside the viewBox.
  */
 export function BarChart({ current, previous, height = 200 }: BarChartProps) {
-  const [hovered, setHovered] = useState<{ set: "cur" | "prev"; idx: number } | null>(null);
+  const [hovered, setHovered] = useState<{
+    set: "cur" | "prev";
+    idx: number;
+  } | null>(null);
   const W = 800;
   const H = height;
-  const padL = 56, padR = 16, padT = 16, padB = 40;
+  const padL = 56,
+    padR = 16,
+    padT = 16,
+    padB = 40;
   const chartW = W - padL - padR;
   const chartH = H - padT - padB;
 

components/organisms/analytics/LineChart.tsx

@@ -18,7 +18,10 @@ export function LineChart({ data, height = 200 }: LineChartProps) {
   const [hovered, setHovered] = useState<number | null>(null);
   const W = 800;
   const H = height;
-  const padL = 56, padR = 16, padT = 16, padB = 40;
+  const padL = 56,
+    padR = 16,
+    padT = 16,
+    padB = 40;
   const chartW = W - padL - padR;
   const chartH = H - padT - padB;
 
@@ -66,47 +69,122 @@ export function LineChart({ data, height = 200 }: LineChartProps) {
 
         {gridLines.map((g, i) => (
           <g key={i}>
-            <line x1={padL} y1={g.y} x2={W - padR} y2={g.y} stroke="#E2C9A8" strokeWidth="1" strokeDasharray={i === yTicks ? "0" : "4 3"} />
-            <text x={padL - 6} y={g.y + 4} textAnchor="end" fontSize="10" fill="#A08060">{formatCurrency(g.val)}</text>
+            <line
+              x1={padL}
+              y1={g.y}
+              x2={W - padR}
+              y2={g.y}
+              stroke="#E2C9A8"
+              strokeWidth="1"
+              strokeDasharray={i === yTicks ? "0" : "4 3"}
+            />
+            <text
+              x={padL - 6}
+              y={g.y + 4}
+              textAnchor="end"
+              fontSize="10"
+              fill="#A08060"
+            >
+              {formatCurrency(g.val)}
+            </text>
           </g>
         ))}
 
         <path d={areaD} fill="url(#areaGrad)" />
-        <path d={pathD} fill="none" stroke="#6F4E37" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
+        <path
+          d={pathD}
+          fill="none"
+          stroke="#6F4E37"
+          strokeWidth="2.5"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
 
         {points.map((p, i) =>
           i % step === 0 ? (
-            <text key={i} x={p.x} y={H - 8} textAnchor="middle" fontSize="10" fill="#A08060">{p.data.label}</text>
+            <text
+              key={i}
+              x={p.x}
+              y={H - 8}
+              textAnchor="middle"
+              fontSize="10"
+              fill="#A08060"
+            >
+              {p.data.label}
+            </text>
           ) : null,
         )}
 
         {points.map((p) => (
           <circle
             key={p.index}
-            cx={p.x} cy={p.y}
+            cx={p.x}
+            cy={p.y}
             r={hovered === p.index ? 5 : 3}
             fill={hovered === p.index ? "#C8973A" : "#6F4E37"}
-            stroke="#FDF6EC" strokeWidth="2"
+            stroke="#FDF6EC"
+            strokeWidth="2"
             style={{ cursor: "pointer", transition: "r 150ms" }}
             onMouseEnter={() => setHovered(p.index)}
           />
         ))}
 
-        {hovered !== null && (() => {
-          const p = points[hovered];
-          const tipW = 120, tipH = 48;
-          const tipX = Math.min(Math.max(p.x - tipW / 2, padL), W - padR - tipW);
-          const aboveY = p.y - tipH - 10;
-          const tipY = Math.min(Math.max(aboveY >= padT ? aboveY : p.y + 10, padT), padT + chartH - tipH);
-          return (
-            <g>
-              <rect x={tipX} y={tipY} width={tipW} height={tipH} rx="6" fill="#3D2B1F" opacity="0.92" />
-              <text x={tipX + tipW / 2} y={tipY + 16} textAnchor="middle" fontSize="10" fill="#F0D9A8">{p.data.label}</text>
-              <text x={tipX + tipW / 2} y={tipY + 30} textAnchor="middle" fontSize="11" fontWeight="600" fill="#C8973A">{formatCurrency(p.data.revenue)}</text>
-              <text x={tipX + tipW / 2} y={tipY + 44} textAnchor="middle" fontSize="10" fill="#A08060">{p.data.orders} đơn</text>
-            </g>
-          );
-        })()}
+        {hovered !== null &&
+          (() => {
+            const p = points[hovered];
+            const tipW = 120,
+              tipH = 48;
+            const tipX = Math.min(
+              Math.max(p.x - tipW / 2, padL),
+              W - padR - tipW,
+            );
+            const aboveY = p.y - tipH - 10;
+            const tipY = Math.min(
+              Math.max(aboveY >= padT ? aboveY : p.y + 10, padT),
+              padT + chartH - tipH,
+            );
+            return (
+              <g>
+                <rect
+                  x={tipX}
+                  y={tipY}
+                  width={tipW}
+                  height={tipH}
+                  rx="6"
+                  fill="#3D2B1F"
+                  opacity="0.92"
+                />
+                <text
+                  x={tipX + tipW / 2}
+                  y={tipY + 16}
+                  textAnchor="middle"
+                  fontSize="10"
+                  fill="#F0D9A8"
+                >
+                  {p.data.label}
+                </text>
+                <text
+                  x={tipX + tipW / 2}
+                  y={tipY + 30}
+                  textAnchor="middle"
+                  fontSize="11"
+                  fontWeight="600"
+                  fill="#C8973A"
+                >
+                  {formatCurrency(p.data.revenue)}
+                </text>
+                <text
+                  x={tipX + tipW / 2}
+                  y={tipY + 44}
+                  textAnchor="middle"
+                  fontSize="10"
+                  fill="#A08060"
+                >
+                  {p.data.orders} đơn
+                </text>
+              </g>
+            );
+          })()}
       </svg>
     </div>
   );

components/organisms/analytics/PieChart.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useMemo, useState } from "react";
 
 export interface PieSlice {
   label: string;

components/organisms/forms/LoginForm.tsx

@@ -1,10 +1,10 @@
+import Button from "@/components/atoms/buttons/Button";
 import ErrorMessageLogin from "@/components/atoms/errors/ErrorMessageLogin";
 import LoginInput from "@/components/atoms/inputs/LoginInput";
 import { useAuth } from "@/lib/auth-context";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { FormEvent, useState } from "react";
-import Button from "@/components/atoms/buttons/Button";
+import { SubmitEvent, useState } from "react";
 
 export default function LoginForm() {
   const router = useRouter();
@@ -39,12 +39,12 @@ export default function LoginForm() {
     return isValid;
   };
 
-  const handleSubmit = (e: FormEvent) => {
+  const handleSubmit = async (e: SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!validate()) return;
 
-    const success = login(username, password);
+    const success = await login(username, password);
 
     if (success) {
       router.push("/");

components/organisms/manager/ProductsTab.tsx

@@ -152,7 +152,10 @@ export default function ProductsTab() {
               </tr>
             ) : (
               filtered.map((p) => (
-                <tr key={p.id} className="hover:bg-background transition-colors">
+                <tr
+                  key={p.id}
+                  className="hover:bg-background transition-colors"
+                >
                   <td className="px-4 py-3">
                     <div>
                       <p className="text-foreground font-medium">{p.name}</p>

components/organisms/navigation/CategorySidebar.tsx

@@ -47,6 +47,7 @@ export default function CategorySidebar({
         <button
           onClick={onToggle}
           title={isOpen ? "Thu gọn menu" : "Mở rộng menu"}
+          aria-label={isOpen ? "Thu gọn menu" : "Mở rộng menu"}
           className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-(--color-text-muted) transition-colors duration-150 hover:bg-(--color-border-light) hover:text-(--color-primary) xl:hidden"
         >
           <i

components/organisms/shift-schedule/MobileShiftView.tsx

@@ -26,14 +26,27 @@ function isToday(d: Date): boolean {
 }
 
 const MONTH_NAMES = [
-  "Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4",
-  "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8",
-  "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12",
+  "Tháng 1",
+  "Tháng 2",
+  "Tháng 3",
+  "Tháng 4",
+  "Tháng 5",
+  "Tháng 6",
+  "Tháng 7",
+  "Tháng 8",
+  "Tháng 9",
+  "Tháng 10",
+  "Tháng 11",
+  "Tháng 12",
 ];
 
-export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps) {
+export default function MobileShiftView({
+  onShiftClick,
+}: MobileShiftViewProps) {
   const { currentDate, shifts, goToNextMonth, goToPrevMonth } = useShift();
-  const [selectedDate, setSelectedDate] = useState<string>(formatDateISO(new Date(2026, 3, 10)));
+  const [selectedDate, setSelectedDate] = useState<string>(
+    formatDateISO(new Date(2026, 3, 10)),
+  );
 
   const calendarDays = useMemo(() => {
     const year = currentDate.getFullYear();
@@ -57,9 +70,12 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
     const dateStr = formatDateISO(date);
     const dayShifts = shifts.filter((s) => s.date === dateStr);
     const dots: string[] = [];
-    if (dayShifts.some((s) => s.status === "available")) dots.push("bg-amber-400");
-    if (dayShifts.some((s) => s.status === "registered")) dots.push("bg-green-500");
-    if (dayShifts.some((s) => s.status === "approved_leave")) dots.push("bg-purple-400");
+    if (dayShifts.some((s) => s.status === "available"))
+      dots.push("bg-amber-400");
+    if (dayShifts.some((s) => s.status === "registered"))
+      dots.push("bg-green-500");
+    if (dayShifts.some((s) => s.status === "approved_leave"))
+      dots.push("bg-purple-400");
     if (dayShifts.some((s) => s.status === "absent")) dots.push("bg-red-400");
     return dots;
   };
@@ -85,7 +101,7 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
           >
             <i className="fa-solid fa-chevron-left text-xs"></i>
           </button>
-          <h3 className="text-sm font-bold text-foreground">
+          <h3 className="text-foreground text-sm font-bold">
             {MONTH_NAMES[currentDate.getMonth()]} {currentDate.getFullYear()}
           </h3>
           <button
@@ -101,7 +117,10 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
         {/* Day headers */}
         <div className="mb-1 grid grid-cols-7">
           {DAY_HEADERS.map((day) => (
-            <div key={day} className="py-1 text-center text-[10px] font-semibold text-(--color-text-muted) uppercase">
+            <div
+              key={day}
+              className="py-1 text-center text-[10px] font-semibold text-(--color-text-muted) uppercase"
+            >
               {day}
             </div>
           ))}
@@ -133,7 +152,7 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
                     today
                       ? "bg-(--color-primary) font-bold text-white"
                       : selected
-                        ? "font-bold text-foreground"
+                        ? "text-foreground font-bold"
                         : "text-foreground"
                   }`}
                 >
@@ -153,7 +172,9 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
         <div className="mt-3 flex flex-wrap justify-center gap-3 border-t border-(--color-border-light) pt-2">
           <div className="flex items-center gap-1">
             <span className="h-2 w-2 rounded-full bg-amber-400"></span>
-            <span className="text-[10px] text-(--color-text-muted)">Còn trống</span>
+            <span className="text-[10px] text-(--color-text-muted)">
+              Còn trống
+            </span>
           </div>
           <div className="flex items-center gap-1">
             <span className="h-2 w-2 rounded-full bg-green-500"></span>
@@ -161,7 +182,9 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
           </div>
           <div className="flex items-center gap-1">
             <span className="h-2 w-2 rounded-full bg-purple-400"></span>
-            <span className="text-[10px] text-(--color-text-muted)">Nghỉ phép</span>
+            <span className="text-[10px] text-(--color-text-muted)">
+              Nghỉ phép
+            </span>
           </div>
           <div className="flex items-center gap-1">
             <span className="h-2 w-2 rounded-full bg-red-400"></span>
@@ -172,8 +195,9 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
 
       {/* Selected day shifts */}
       <div>
-        <h3 className="mb-3 text-sm font-bold text-foreground">
-          {dayOfWeek}, {selectedDateObj.getDate()}/{selectedDateObj.getMonth() + 1}/{selectedDateObj.getFullYear()}
+        <h3 className="text-foreground mb-3 text-sm font-bold">
+          {dayOfWeek}, {selectedDateObj.getDate()}/
+          {selectedDateObj.getMonth() + 1}/{selectedDateObj.getFullYear()}
           <span className="ml-2 text-xs font-normal text-(--color-text-muted)">
             ({selectedShifts.length} ca)
           </span>
@@ -182,24 +206,34 @@ export default function MobileShiftView({ onShiftClick }: MobileShiftViewProps)
         {selectedShifts.length === 0 ? (
           <div className="rounded-xl border border-dashed border-(--color-border-light) py-8 text-center">
             <i className="fa-regular fa-calendar-xmark mb-2 text-2xl text-gray-300"></i>
-            <p className="text-sm text-(--color-text-muted)">Không có ca làm trong ngày này</p>
+            <p className="text-sm text-(--color-text-muted)">
+              Không có ca làm trong ngày này
+            </p>
           </div>
         ) : (
           <div className="space-y-3">
             {DEPARTMENTS.map((dept) => {
-              const deptShifts = selectedShifts.filter((s) => s.department === dept.id);
+              const deptShifts = selectedShifts.filter(
+                (s) => s.department === dept.id,
+              );
               if (deptShifts.length === 0) return null;
               return (
                 <div key={dept.id}>
                   <div className="mb-2 flex items-center gap-2">
-                    <i className={`${dept.icon} text-xs text-(--color-primary)`}></i>
+                    <i
+                      className={`${dept.icon} text-xs text-(--color-primary)`}
+                    ></i>
                     <span className="text-xs font-semibold text-(--color-text-secondary)">
                       {dept.name}
                     </span>
                   </div>
                   <div className="space-y-2">
                     {deptShifts.map((shift) => (
-                      <ShiftCard key={shift.id} shift={shift} onClick={onShiftClick} />
+                      <ShiftCard
+                        key={shift.id}
+                        shift={shift}
+                        onClick={onShiftClick}
+                      />
                     ))}
                   </div>
                 </div>

components/organisms/shift-schedule/MonthlyCalendar.tsx

@@ -23,7 +23,10 @@ function isToday(d: Date): boolean {
   );
 }
 
-export default function MonthlyCalendar({ onShiftClick, onDateSelect }: MonthlyCalendarProps) {
+export default function MonthlyCalendar({
+  onShiftClick,
+  onDateSelect,
+}: MonthlyCalendarProps) {
   const { currentDate, shifts } = useShift();
 
   const calendarDays = useMemo(() => {
@@ -60,7 +63,9 @@ export default function MonthlyCalendar({ onShiftClick, onDateSelect }: MonthlyC
     const dateStr = formatDateISO(date);
     const dayShifts = shifts.filter((s) => s.date === dateStr);
     const available = dayShifts.filter((s) => s.status === "available").length;
-    const registered = dayShifts.filter((s) => s.status === "registered").length;
+    const registered = dayShifts.filter(
+      (s) => s.status === "registered",
+    ).length;
     const leave = dayShifts.filter((s) => s.status === "approved_leave").length;
     const absent = dayShifts.filter((s) => s.status === "absent").length;
     return { total: dayShifts.length, available, registered, leave, absent };
@@ -87,7 +92,7 @@ export default function MonthlyCalendar({ onShiftClick, onDateSelect }: MonthlyC
             return (
               <div
                 key={`empty-${i}`}
-                className="min-h-25 border-b border-r border-(--color-border-light) bg-gray-50/30"
+                className="min-h-25 border-r border-b border-(--color-border-light) bg-gray-50/30"
               />
             );
           }
@@ -100,7 +105,7 @@ export default function MonthlyCalendar({ onShiftClick, onDateSelect }: MonthlyC
               type="button"
               key={i}
               onClick={() => onDateSelect?.(formatDateISO(date))}
-              className={`min-h-25 cursor-pointer border-b border-r border-(--color-border-light) bg-transparent p-2 text-left transition hover:bg-gray-50 ${
+              className={`min-h-25 cursor-pointer border-r border-b border-(--color-border-light) bg-transparent p-2 text-left transition hover:bg-gray-50 ${
                 today ? "bg-(--color-primary)/5" : ""
               }`}
             >
@@ -108,7 +113,7 @@ export default function MonthlyCalendar({ onShiftClick, onDateSelect }: MonthlyC
                 className={`inline-flex h-7 w-7 items-center justify-center rounded-full text-sm ${
                   today
                     ? "bg-(--color-primary) font-bold text-white"
-                    : "font-medium text-foreground"
+                    : "text-foreground font-medium"
                 }`}
               >
                 {date.getDate()}

components/organisms/shift-schedule/ShiftCreateModal.tsx

@@ -6,7 +6,11 @@ import { useEffect, useState } from "react";
 
 import type { ShiftCreateModalProps } from "./ShiftSchedule.types";
 
-export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: ShiftCreateModalProps) {
+export default function ShiftCreateModal({
+  isOpen,
+  onClose,
+  defaultDate,
+}: ShiftCreateModalProps) {
   const { createShift } = useShift();
 
   const [date, setDate] = useState(defaultDate ?? "2026-04-10");
@@ -72,7 +76,7 @@ export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: Shift
         {/* Header */}
         <div className="flex items-center justify-between border-b border-(--color-border-light) px-5 py-4">
           <div>
-            <h2 className="text-base font-bold text-foreground">
+            <h2 className="text-foreground text-base font-bold">
               Tạo ca làm mới
             </h2>
             <p className="text-xs text-(--color-text-muted)">
@@ -101,7 +105,7 @@ export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: Shift
               type="date"
               value={date}
               onChange={(e) => setDate(e.target.value)}
-              className="w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
+              className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
             />
           </div>
 
@@ -116,7 +120,7 @@ export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: Shift
                 type="time"
                 value={startTime}
                 onChange={(e) => setStartTime(e.target.value)}
-                className="w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
+                className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
               />
             </div>
             <div>
@@ -128,7 +132,7 @@ export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: Shift
                 type="time"
                 value={endTime}
                 onChange={(e) => setEndTime(e.target.value)}
-                className="w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
+                className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
               />
             </div>
           </div>
@@ -142,7 +146,7 @@ export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: Shift
               title="Department"
               value={department}
               onChange={(e) => setDepartment(e.target.value)}
-              className="w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
+              className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
             >
               {DEPARTMENTS.map((dept) => (
                 <option key={dept.id} value={dept.id}>
@@ -165,7 +169,7 @@ export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: Shift
                 max={10}
                 value={maxStaff}
                 onChange={(e) => setMaxStaff(Number(e.target.value))}
-                className="w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
+                className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
               />
             </div>
             <div>
@@ -179,7 +183,7 @@ export default function ShiftCreateModal({ isOpen, onClose, defaultDate }: Shift
                 step={10000}
                 value={wage}
                 onChange={(e) => setWage(Number(e.target.value))}
-                className="w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
+                className="text-foreground w-full rounded-xl border border-(--color-border-light) px-3 py-2.5 text-sm transition outline-none focus:border-(--color-primary) focus:ring-1 focus:ring-(--color-primary)"
               />
             </div>
           </div>

components/organisms/shift-schedule/ShiftDetailModal.tsx

@@ -7,7 +7,11 @@ import { useState } from "react";
 
 import type { ShiftDetailModalProps } from "./ShiftSchedule.types";
 
-export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetailModalProps) {
+export default function ShiftDetailModal({
+  shift,
+  isOpen,
+  onClose,
+}: ShiftDetailModalProps) {
   const { user } = useAuth();
   const { registerShift, unregisterShift, deleteShift } = useShift();
   const [error, setError] = useState<string | null>(null);
@@ -17,7 +21,9 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
 
   const dept = DEPARTMENTS.find((d) => d.id === shift.department);
   const isManager = user?.role === "manager";
-  const isRegistered = user ? shift.registeredStaff.some((s) => s.id === user.id) : false;
+  const isRegistered = user
+    ? shift.registeredStaff.some((s) => s.id === user.id)
+    : false;
   const isFull = shift.registeredStaff.length >= shift.maxStaff;
 
   const handleRegister = () => {
@@ -68,10 +74,7 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/40"
-        onClick={onClose}
-      />
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
 
       {/* Modal */}
       <div className="relative w-full max-w-md rounded-2xl bg-white shadow-xl">
@@ -80,7 +83,7 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
           <div className="flex items-center gap-3">
             {dept && <i className={`${dept.icon} text-(--color-primary)`}></i>}
             <div>
-              <h2 className="text-base font-bold text-foreground">
+              <h2 className="text-foreground text-base font-bold">
                 Chi tiết ca làm
               </h2>
               <p className="text-xs text-(--color-text-muted)">{dept?.name}</p>
@@ -100,7 +103,9 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
         <div className="space-y-4 px-5 py-4">
           {/* Status badge */}
           <div className="flex items-center gap-2">
-            <span className={`rounded-full px-3 py-1 text-xs font-semibold ${statusColor[shift.status]}`}>
+            <span
+              className={`rounded-full px-3 py-1 text-xs font-semibold ${statusColor[shift.status]}`}
+            >
               {statusLabel[shift.status]}
             </span>
           </div>
@@ -108,30 +113,41 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
           {/* Shift info grid */}
           <div className="grid grid-cols-2 gap-3">
             <div className="rounded-xl bg-gray-50 p-3">
-              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">Ngày</p>
-              <p className="mt-1 text-sm font-bold text-foreground">
-                {new Date(shift.date + "T00:00:00").toLocaleDateString("vi-VN", {
-                  weekday: "long",
-                  day: "2-digit",
-                  month: "2-digit",
-                  year: "numeric",
-                })}
+              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">
+                Ngày
+              </p>
+              <p className="text-foreground mt-1 text-sm font-bold">
+                {new Date(shift.date + "T00:00:00").toLocaleDateString(
+                  "vi-VN",
+                  {
+                    weekday: "long",
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                  },
+                )}
               </p>
             </div>
             <div className="rounded-xl bg-gray-50 p-3">
-              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">Giờ làm</p>
-              <p className="mt-1 text-sm font-bold text-foreground">
+              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">
+                Giờ làm
+              </p>
+              <p className="text-foreground mt-1 text-sm font-bold">
                 {shift.startTime} – {shift.endTime}
               </p>
             </div>
             <div className="rounded-xl bg-gray-50 p-3">
-              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">Thời lượng</p>
-              <p className="mt-1 text-sm font-bold text-foreground">
+              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">
+                Thời lượng
+              </p>
+              <p className="text-foreground mt-1 text-sm font-bold">
                 {shift.durationHours} giờ
               </p>
             </div>
             <div className="rounded-xl bg-gray-50 p-3">
-              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">Lương ca</p>
+              <p className="text-[10px] font-semibold text-(--color-text-muted) uppercase">
+                Lương ca
+              </p>
               <p className="mt-1 text-sm font-bold text-(--color-primary)">
                 {shift.wage.toLocaleString("vi-VN")} VND
               </p>
@@ -141,10 +157,13 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
           {/* Registered staff */}
           <div>
             <p className="mb-2 text-xs font-semibold text-(--color-text-secondary)">
-              Nhân viên đã đăng ký ({shift.registeredStaff.length}/{shift.maxStaff})
+              Nhân viên đã đăng ký ({shift.registeredStaff.length}/
+              {shift.maxStaff})
             </p>
             {shift.registeredStaff.length === 0 ? (
-              <p className="text-xs italic text-(--color-text-muted)">Chưa có ai đăng ký</p>
+              <p className="text-xs text-(--color-text-muted) italic">
+                Chưa có ai đăng ký
+              </p>
             ) : (
               <div className="space-y-2">
                 {shift.registeredStaff.map((staff) => (
@@ -156,7 +175,7 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
                       <div className="flex h-7 w-7 items-center justify-center rounded-full bg-(--color-primary)/10">
                         <i className="fa-solid fa-user text-[10px] text-(--color-primary)"></i>
                       </div>
-                      <span className="text-sm font-medium text-foreground">
+                      <span className="text-foreground text-sm font-medium">
                         {staff.name}
                       </span>
                     </div>
@@ -193,16 +212,19 @@ export default function ShiftDetailModal({ shift, isOpen, onClose }: ShiftDetail
 
         {/* Footer actions */}
         <div className="flex gap-2 border-t border-(--color-border-light) px-5 py-4">
-          {!isRegistered && !isFull && shift.status !== "approved_leave" && shift.status !== "absent" && (
-            <button
-              type="button"
-              onClick={handleRegister}
-              className="flex-1 cursor-pointer rounded-xl border-none bg-(--color-primary) px-4 py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
-            >
-              <i className="fa-solid fa-calendar-plus mr-2"></i>
-              Đăng ký ca
-            </button>
-          )}
+          {!isRegistered &&
+            !isFull &&
+            shift.status !== "approved_leave" &&
+            shift.status !== "absent" && (
+              <button
+                type="button"
+                onClick={handleRegister}
+                className="flex-1 cursor-pointer rounded-xl border-none bg-(--color-primary) px-4 py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+              >
+                <i className="fa-solid fa-calendar-plus mr-2"></i>
+                Đăng ký ca
+              </button>
+            )}
           {isRegistered && (
             <button
               type="button"

components/organisms/shift-schedule/WeeklySchedule.tsx

@@ -8,8 +8,18 @@ import { useMemo, useState } from "react";
 import type { WeeklyScheduleProps } from "./ShiftSchedule.types";
 
 const MONTH_NAMES_EN = [
-  "January", "February", "March", "April", "May", "June",
-  "July", "August", "September", "October", "November", "December",
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
 const DAY_LABELS = ["T2", "T3", "T4", "T5", "T6", "T7", "CN"];
@@ -40,10 +50,18 @@ export default function WeeklySchedule({
   onCreateShift,
   mobileCalendarHeader = false,
 }: WeeklyScheduleProps) {
-  const { currentDate, getWeekDates, getShiftsForDate, goToNextWeek, goToPrevWeek } = useShift();
+  const {
+    currentDate,
+    getWeekDates,
+    getShiftsForDate,
+    goToNextWeek,
+    goToPrevWeek,
+  } = useShift();
   const weekDates = getWeekDates();
 
-  const [selectedDate, setSelectedDate] = useState<string>(formatDateISO(weekDates[0] ?? currentDate));
+  const [selectedDate, setSelectedDate] = useState<string>(
+    formatDateISO(weekDates[0] ?? currentDate),
+  );
 
   const statusDotsByDate = useMemo(() => {
     const map: Record<string, string[]> = {};
@@ -51,10 +69,14 @@ export default function WeeklySchedule({
       const dateStr = formatDateISO(date);
       const dayShifts = getShiftsForDate(dateStr);
       const dots: string[] = [];
-      if (dayShifts.some((s) => s.status === "available")) dots.push("bg-sky-300");
-      if (dayShifts.some((s) => s.status === "registered")) dots.push("bg-blue-600");
-      if (dayShifts.some((s) => s.status === "approved_leave")) dots.push("bg-purple-400");
-      if (dayShifts.some((s) => s.status === "absent")) dots.push("bg-rose-400");
+      if (dayShifts.some((s) => s.status === "available"))
+        dots.push("bg-sky-300");
+      if (dayShifts.some((s) => s.status === "registered"))
+        dots.push("bg-blue-600");
+      if (dayShifts.some((s) => s.status === "approved_leave"))
+        dots.push("bg-purple-400");
+      if (dayShifts.some((s) => s.status === "absent"))
+        dots.push("bg-rose-400");
       map[dateStr] = dots.slice(0, 3);
     });
     return map;
@@ -106,7 +128,9 @@ export default function WeeklySchedule({
                   active ? "bg-(--color-primary)/10" : "bg-transparent"
                 }`}
               >
-                <span className={`text-xs font-medium ${i >= 5 ? "text-pink-500" : "text-(--color-primary-dark)"}`}>
+                <span
+                  className={`text-xs font-medium ${i >= 5 ? "text-pink-500" : "text-(--color-primary-dark)"}`}
+                >
                   {DAY_LABELS_EN[i]}
                 </span>
                 <span
@@ -122,7 +146,10 @@ export default function WeeklySchedule({
                 </span>
                 <div className="flex min-h-2 items-center gap-0.5">
                   {dots.map((dot, idx) => (
-                    <span key={idx} className={`h-1.5 w-1.5 rounded-full ${dot}`} />
+                    <span
+                      key={idx}
+                      className={`h-1.5 w-1.5 rounded-full ${dot}`}
+                    />
                   ))}
                 </div>
               </button>
@@ -133,19 +160,30 @@ export default function WeeklySchedule({
 
       <div className="space-y-3">
         {DEPARTMENTS.map((dept) => {
-          const deptShifts = getShiftsForDate(selectedDateStr).filter((s) => s.department === dept.id);
+          const deptShifts = getShiftsForDate(selectedDateStr).filter(
+            (s) => s.department === dept.id,
+          );
           if (deptShifts.length === 0 && !onCreateShift) return null;
           return (
-            <div key={dept.id} className="rounded-xl border border-(--color-border-light) bg-white p-3">
+            <div
+              key={dept.id}
+              className="rounded-xl border border-(--color-border-light) bg-white p-3"
+            >
               <div className="mb-2 flex items-center gap-2">
-                <i className={`${dept.icon} text-xs text-(--color-primary)`}></i>
+                <i
+                  className={`${dept.icon} text-xs text-(--color-primary)`}
+                ></i>
                 <span className="text-xs font-semibold text-(--color-text-secondary)">
                   {dept.name}
                 </span>
               </div>
               <div className="space-y-2">
                 {deptShifts.map((shift) => (
-                  <ShiftCard key={shift.id} shift={shift} onClick={onShiftClick} />
+                  <ShiftCard
+                    key={shift.id}
+                    shift={shift}
+                    onClick={onShiftClick}
+                  />
                 ))}
                 {onCreateShift && (
                   <button
@@ -174,13 +212,13 @@ export default function WeeklySchedule({
       <table className="w-full min-w-225 border-collapse">
         <thead>
           <tr>
-            <th className="w-28 border-b border-r border-(--color-border-light) bg-gray-50 px-3 py-3 text-left text-xs font-semibold text-(--color-text-muted) uppercase">
+            <th className="w-28 border-r border-b border-(--color-border-light) bg-gray-50 px-3 py-3 text-left text-xs font-semibold text-(--color-text-muted) uppercase">
               Bộ phận
             </th>
             {weekDates.map((date, i) => (
               <th
                 key={i}
-                className={`border-b border-r border-(--color-border-light) px-2 py-3 text-center text-xs ${
+                className={`border-r border-b border-(--color-border-light) px-2 py-3 text-center text-xs ${
                   isToday(date)
                     ? "bg-(--color-primary)/10 font-bold text-(--color-primary)"
                     : "bg-gray-50 font-semibold text-(--color-text-muted)"
@@ -197,9 +235,11 @@ export default function WeeklySchedule({
         <tbody>
           {DEPARTMENTS.map((dept) => (
             <tr key={dept.id}>
-              <td className="border-b border-r border-(--color-border-light) bg-gray-50/50 px-3 py-3 align-top">
+              <td className="border-r border-b border-(--color-border-light) bg-gray-50/50 px-3 py-3 align-top">
                 <div className="flex items-center gap-2">
-                  <i className={`${dept.icon} text-xs text-(--color-primary)`}></i>
+                  <i
+                    className={`${dept.icon} text-xs text-(--color-primary)`}
+                  ></i>
                   <span className="text-xs font-semibold text-(--color-text-secondary)">
                     {dept.name}
                   </span>
@@ -213,7 +253,7 @@ export default function WeeklySchedule({
                 return (
                   <td
                     key={i}
-                    className={`border-b border-r border-(--color-border-light) p-1.5 align-top ${
+                    className={`border-r border-b border-(--color-border-light) p-1.5 align-top ${
                       isToday(date) ? "bg-(--color-primary)/5" : ""
                     }`}
                   >

k8s.yaml

@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
       - name: frontend-container
-        image: git.demonkernel.io.vn/foodsurf/frontend:1.1.0
+        image: git.demonkernel.io.vn/foodsurf/frontend:1.2.0
         ports:
           - containerPort: 3000
         resources:

layouts/header.tsx

@@ -91,6 +91,7 @@ export default function Header() {
               <button
                 onClick={handleAuthClick}
                 title="Đăng xuất"
+                aria-label="Đăng xuất"
                 className="flex cursor-pointer items-center gap-2 rounded-xl border border-(--color-border) bg-transparent px-3 py-2.5 text-sm font-medium text-(--color-text-muted) transition-all duration-150 hover:border-red-300 hover:bg-red-50 hover:text-red-500 active:scale-95"
               >
                 <i className="fa-solid fa-right-from-bracket text-base"></i>
@@ -109,6 +110,7 @@ export default function Header() {
               <button
                 onClick={handleAuthClick}
                 title="Nhấn để đăng xuất"
+                aria-label="Đăng xuất"
                 className="bg-background flex cursor-pointer items-center gap-2.5 rounded-xl border border-(--color-border) px-4 py-2 text-sm font-semibold text-(--color-text-secondary) transition-all duration-150 hover:border-(--color-primary-light) hover:bg-(--color-border-light) active:scale-95"
               >
                 {/* Avatar circle */}

lib/auth-context.tsx

@@ -12,7 +12,7 @@ import type { User } from "./types";
 
 interface AuthContextType {
   user: User | null;
-  login: (username: string, password: string) => boolean;
+  login: (username: string, password: string) => Promise<boolean>;
   logout: () => void;
   registerPhone: string | null;
   setRegisterPhone: (phone: string | null) => void;
@@ -112,16 +112,31 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
-  const login = (username: string, password: string): boolean => {
-    const authEntry = MOCK_AUTH_DB[username as keyof typeof MOCK_AUTH_DB];
+  const login = async (phone: string, password: string): Promise<boolean> => {
+    try {
+      const response = await fetch("/api/customer/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ phone, password }),
+      });
 
-    if (authEntry && authEntry.password === password) {
-      setUser(authEntry.user);
-      localStorage.setItem("coffee-shop-user", JSON.stringify(authEntry.user));
-      return true;
+      if (response.ok) {
+        const userData = await response.json();
+
+        setUser(userData);
+        localStorage.setItem("coffee-shop-user", JSON.stringify(userData));
+
+        return true;
+      } else {
+        console.error("Đăng nhập thất bại:", response.statusText);
+        return false;
+      }
+    } catch (error) {
+      console.error("Lỗi kết nối API:", error);
+      return false;
     }
-
-    return false;
   };
 
   const logout = () => {

lib/shift-context.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { ReactNode, createContext, useCallback, useContext, useState } from "react";
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
 
 import { MOCK_SHIFT_SLOTS } from "./constants";
 import type { ShiftSlot, ShiftStatus } from "./types";
@@ -24,7 +30,11 @@ interface ShiftContextType {
   goToToday: () => void;
 
   // Shift actions
-  registerShift: (shiftId: string, staffId: number, staffName: string) => { success: boolean; error?: string };
+  registerShift: (
+    shiftId: string,
+    staffId: number,
+    staffName: string,
+  ) => { success: boolean; error?: string };
   unregisterShift: (shiftId: string, staffId: number) => void;
   createShift: (shift: Omit<ShiftSlot, "id">) => void;
   updateShift: (shift: ShiftSlot) => void;
@@ -34,7 +44,13 @@ interface ShiftContextType {
   getShiftsForDate: (date: string) => ShiftSlot[];
   getShiftsForWeek: (weekStart: Date) => ShiftSlot[];
   getWeekDates: () => Date[];
-  hasConflict: (date: string, startTime: string, endTime: string, staffId: number, excludeShiftId?: string) => boolean;
+  hasConflict: (
+    date: string,
+    startTime: string,
+    endTime: string,
+    staffId: number,
+    excludeShiftId?: string,
+  ) => boolean;
   getWeeklyBudget: () => number;
 }
 
@@ -198,7 +214,15 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
         return { success: false, error: "Bạn đã đăng ký ca này rồi." };
       }
 
-      if (hasConflict(shift.date, shift.startTime, shift.endTime, staffId, shiftId)) {
+      if (
+        hasConflict(
+          shift.date,
+          shift.startTime,
+          shift.endTime,
+          staffId,
+          shiftId,
+        )
+      ) {
         return {
           success: false,
           error: "Xung đột lịch! Bạn đã có ca làm trùng giờ trong ngày này.",
@@ -210,7 +234,10 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
           s.id === shiftId
             ? {
                 ...s,
-                registeredStaff: [...s.registeredStaff, { id: staffId, name: staffName }],
+                registeredStaff: [
+                  ...s.registeredStaff,
+                  { id: staffId, name: staffName },
+                ],
                 status: "registered" as ShiftStatus,
               }
             : s,
@@ -230,7 +257,8 @@ export function ShiftProvider({ children }: { children: ReactNode }) {
         return {
           ...s,
           registeredStaff: updated,
-          status: updated.length === 0 ? ("available" as ShiftStatus) : s.status,
+          status:
+            updated.length === 0 ? ("available" as ShiftStatus) : s.status,
         };
       }),
     );

lib/types.ts

@@ -116,7 +116,11 @@ export interface Combo {
 }
 
 // ===== SHIFT / SCHEDULE TYPES =====
-export type ShiftStatus = "available" | "registered" | "approved_leave" | "absent";
+export type ShiftStatus =
+  | "available"
+  | "registered"
+  | "approved_leave"
+  | "absent";
 
 export interface RegisteredStaff {
   id: number;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "temp",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "temp",
-      "version": "1.1.0",
+      "version": "1.2.0",
       "dependencies": {
         "@tailwindcss/postcss": "^4.2.2",
         "@types/node": "^20.19.37",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "temp",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -29,7 +29,7 @@
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.39.4",
     "eslint-config-next": "16.1.7",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-embed": "^0.5.1",
     "prettier-plugin-groovy": "^0.2.1",
     "prettier-plugin-tailwindcss": "^0.7.2",

register-shift-feature-prompt.md

@@ -1,135 +0,0 @@
-# Feature Prompt: Register Shift (Đăng Ký Ca Làm)
-
-## Tổng Quan
-
-Xây dựng tính năng **Register Shift** cho phép nhân viên xem và đăng ký ca làm việc theo khung thời gian do quản lý tạo ra. Tính năng hỗ trợ cả hai vai trò: **Manager** và **Staff**, với giao diện responsive thích ứng theo kích thước màn hình.
-
----
-
-## Mục Đích
-
-- Cho phép nhân viên xem danh sách các khung thời gian ca làm khả dụng và đăng ký vào ca mà họ muốn làm.
-- Quản lý (Manager) có toàn quyền tạo, chỉnh sửa và xóa các khung thời gian ca làm.
-- Nhân viên có thể thấy ca làm của đồng nghiệp để tránh xung đột hoặc điều chỉnh lịch phù hợp.
-- Cả Manager và Staff đều có thể chỉnh sửa hoặc hủy ca đã đăng ký của nhân viên.
-
----
-
-## Vai Trò & Phân Quyền
-
-### Manager
-- Tạo, chỉnh sửa, xóa khung thời gian ca làm (shift slots).
-- Xem lịch làm việc của toàn bộ nhân viên theo tuần hoặc tháng.
-- Phê duyệt hoặc từ chối yêu cầu đăng ký ca.
-- Xóa hoặc thay đổi ca làm của bất kỳ nhân viên nào.
-- Gán ca làm cho nhân viên cụ thể nếu cần.
-
-### Staff (Nhân Viên)
-- Xem danh sách ca làm khả dụng trong tuần hoặc tháng.
-- Đăng ký vào ca mà mình muốn làm.
-- Xem ca đã được đăng ký bởi các nhân viên khác.
-- Hủy hoặc chỉnh sửa ca đã đăng ký của bản thân (trong giới hạn thời gian cho phép).
-
----
-
-## Yêu Cầu Giao Diện
-
-### Desktop (≥ 1024px) — Dạng Bảng Lịch Tuần/Tháng
-
-- Hiển thị lịch làm việc dạng **table theo tuần** (mặc định), với khả năng chuyển sang **xem theo tháng**.
-- Mỗi cột đại diện cho một ngày trong tuần (Mon–Sun).
-- Mỗi hàng đại diện cho một nhân viên hoặc một khung giờ.
-- Các ca làm được hiển thị dưới dạng **card màu** trong ô tương ứng, gồm:
-  - Tên ca / Khung giờ (ví dụ: `08:00 – 12:00`)
-  - Số giờ làm & mức lương dự kiến (ví dụ: `4h · 120k`)
-  - Trạng thái: `Available`, `Registered`, `Approved Leave`, `Absent`
-- **Bộ lọc tuần/tháng** ở góc trên, cho phép điều hướng qua lại giữa các tuần/tháng.
-- Hiển thị **tổng ngân sách tuần** (Weekly Budget) ở đầu bảng.
-- Nhóm nhân viên theo **department/role** (ví dụ: Bar Staff, Janitors,...).
-- Mỗi ca làm có thể click để xem chi tiết, chỉnh sửa hoặc xóa.
-
-#### Chế Độ Xem Theo Tháng (Month View)
-- Hiển thị dạng **calendar grid** (lưới 7 cột × ~5 hàng).
-- Mỗi ô ngày hiển thị số ca đã đăng ký hoặc dấu chấm màu trạng thái (tương tự ảnh tham khảo).
-- Cho phép nhân viên và manager tính toán ngày có thể nghỉ hoặc đăng ký ca xa hơn trong tháng.
-
----
-
-### Mobile (< 768px) — Dạng Lịch Dọc + Dot Indicator
-
-- Hiển thị **calendar theo tháng dạng nhỏ gọn** (compact calendar) ở đầu màn hình.
-  - Các ngày có ca làm được đánh dấu bằng **dot màu** phía dưới số ngày:
-    - 🟡 Vàng: Ca đang mở / khả dụng
-    - 🟢 Xanh lá: Ca đã được đăng ký
-    - ⚫ Xám: Không có ca
-  - Ngày hiện tại được highlight bằng vòng tròn (dark circle).
-- Khi chọn một ngày, hiển thị danh sách ca làm của ngày đó bên dưới.
-- Mỗi ca làm hiển thị dưới dạng **card dọc**:
-  - Khung giờ, số giờ, mức lương
-  - Tên nhân viên đã đăng ký (nếu có)
-  - Nút **Đăng ký** hoặc **Hủy đăng ký**
-- Điều hướng tháng bằng nút `<` và `>` ở hai bên tiêu đề tháng.
-
----
-
-## Trạng Thái Ca Làm (Shift Status)
-
-| Trạng Thái     | Màu             | Mô Tả                             |
-|----------------|-----------------|-----------------------------------|
-| Available      | Xanh dương nhạt | Ca đang mở, chưa có ai đăng ký    |
-| Registered     | Xanh dương đậm  | Nhân viên đã đăng ký ca này       |
-| Approved Leave | Tím/Lavender    | Nhân viên đã được duyệt nghỉ phép |
-| Absent         | Đỏ/Hồng         | Nhân viên vắng mặt không có lý do |
-
----
-
-## Luồng Chức Năng Chính
-
-### Staff — Đăng Ký Ca
-1. Truy cập màn hình Register Shift.
-2. Chọn tuần hoặc tháng muốn xem.
-3. Xem các ca làm khả dụng (Available).
-4. Click vào ca → Xem thông tin chi tiết (giờ, lương, số người đã đăng ký).
-5. Nhấn **Register** để đăng ký ca.
-6. Ca chuyển sang trạng thái **Registered**.
-
-### Manager — Tạo Ca Làm Mới
-1. Vào giao diện dashboard của manager.
-2. Vào giao diện lịch của nhóm/department.
-3. Click vào ô ngày muốn tạo ca.
-4. Nhập thông tin: Khung giờ bắt đầu – kết thúc, số lượng nhân viên cần, mức lương.
-5. Lưu → Ca hiển thị trên lịch với trạng thái **Available**.
-
-### Xóa / Chỉnh Sửa Ca
-- **Manager**: Có thể chỉnh sửa hoặc xóa bất kỳ ca nào của bất kỳ nhân viên nào.
-- **Staff**: Chỉ có thể hủy ca của bản thân, trong phạm vi thời gian cho phép (ví dụ: trước 24h so với giờ bắt đầu ca).
-
----
-
-## Dữ Liệu & Logic
-
-### Shift Slot Object
-```json
-{
-  "id": "shift_001",
-  "date": "2025-04-22",
-  "startTime": "08:00",
-  "endTime": "12:00",
-  "durationHours": 3.5,
-  "wage": 80,
-  "department": "Bar Staff",
-  "maxStaff": 2,
-  "registeredStaff": [
-    { "id": "staff_01", "name": "Carol Saragosa" }
-  ],
-  "status": "registered"
-}
-```
-
----
-
-## Ghi Chú Bổ Sung
-
-- Nhân viên **không được đăng ký 2 ca trùng giờ** trong cùng một ngày.
-- Hệ thống cần hiển thị **cảnh báo xung đột** khi nhân viên cố đăng ký ca bị trùng lịch.
-- Cần hỗ trợ **thông báo (notification)** khi ca làm bị thay đổi hoặc bị hủy bởi manager.