feat: Enhance Button component with className prop and update PaymentSummaryCard usage

- Added className prop to Button for custom styling
- Updated PaymentSummaryCard to utilize the new Button implementation
- Added nextjs dependency to package.json and package-lock.json

PHASE_1_SUMMARY.md

@@ -1,363 +0,0 @@
-# Phase 1 Implementation Summary: Atomic Design Foundation
-
-**Status:** ✅ COMPLETE
-**Date:** 2026-04-03
-**Commit:** eca619b
-**Branch:** atomic_design
-
----
-
-## 🎯 What Was Accomplished
-
-### ✨ Created 21 Atom Components
-
-#### Buttons (2 components)
-```
-components/atoms/buttons/
-├── Button.tsx (4 variants: primary, secondary, danger, ghost)
-├── IconButton.tsx (icon-only button)
-└── Button.types.ts
-```
-
-**Key Features:**
-- Multiple size options (sm, md, lg)
-- Icon support with positioning (left/right)
-- Full HTML button attribute support
-- Active/disabled states with visual feedback
-
-#### Inputs (3 components)
-```
-components/atoms/inputs/
-├── TextInput.tsx (with label, error, icon support)
-├── SearchInput.tsx (integrated clear button)
-├── Textarea.tsx (multi-line with label & error)
-└── Input.types.ts
-```
-
-**Key Features:**
-- Error state handling with red border
-- Icon integration with callback support
-- Accessible form field structure
-- Controlled/uncontrolled patterns
-
-#### Typography (3 components)
-```
-components/atoms/typography/
-├── Heading.tsx (h1-h6 with semantic sizing)
-├── Text.tsx (4 variants: body1, body2, caption, label)
-├── Caption.tsx (small text wrapper)
-└── Typography.types.ts
-```
-
-**Key Features:**
-- Semantic HTML (`<h1>` through `<h6>`)
-- Consistent font sizing and weights
-- CSS variable color application
-
-#### Badges (2 components)
-```
-components/atoms/badges/
-├── Badge.tsx (5 variants: primary, secondary, success, danger, warning)
-├── PriceBadge.tsx (auto-formatted pricing)
-└── Badge.types.ts
-```
-
-**Key Features:**
-- Multiple size options (sm, md)
-- Formatted price output (VND/USD)
-- Color-coded variants
-
-#### Dividers (1 component)
-```
-components/atoms/dividers/
-├── Divider.tsx (horizontal/vertical separators)
-└── index.ts
-```
-
----
-
-### 📚 Documentation Created (5 Files)
-
-1. **OPTIMIZATION_PLAN.md** (1,099 lines)
-   - Comprehensive 5-phase implementation strategy
-   - Detailed component mapping for all phases
-   - Testing strategies and success criteria
-
-2. **QUICK_START_ATOMIC.md** (547 lines)
-   - Step-by-step atom implementation guide
-   - Complete code examples
-   - Hands-on instructions
-
-3. **ATOMIC_REDESIGN_SUMMARY.md** (374 lines)
-   - Executive overview
-   - Benefits breakdown
-   - Time estimates
-
-4. **ATOMIC_DESIGN_DOCS_INDEX.md** (303 lines)
-   - Navigation hub for all documents
-   - Recommended reading order by role
-   - FAQ section
-
-5. **components/atoms/ATOMS.md** (500+ lines)
-   - Complete atoms reference guide
-   - Usage examples for each component
-   - Theming and import patterns
-
----
-
-### 🔧 Updated Existing Components
-
-#### CartProduct.tsx
-- ✅ Replaced inline button with `<Button>` atom
-- ✅ Replaced inline text with `<Text>` atom
-- ✅ Replaced inline caption with `<Caption>` atom
-- **Result:** Cleaner component, more maintainable
-
-#### ReviewModal.tsx
-- ✅ Replaced modal buttons with `<Button>` atoms
-- ✅ Replaced heading with `<Heading>` atom
-- ✅ Replaced text with `<Text>` atom
-- ✅ Replaced textarea with `<Textarea>` atom
-- **Result:** 30+ lines of styling removed, consistent styling
-
----
-
-## 📊 Statistics
-
-| Metric | Count |
-|--------|-------|
-| **New Atoms Created** | 21 |
-| **Type Files** | 5 |
-| **Total Component Files** | 26 |
-| **Documentation Files** | 5 |
-| **New Lines of Code** | ~2,500 (atoms + docs) |
-| **Build Status** | ✅ Success |
-| **TypeScript Errors** | 0 (in atoms) |
-
----
-
-## 🏗️ File Structure Created
-
-```
-components/atoms/
-├── buttons/
-│   ├── Button.tsx
-│   ├── Button.types.ts
-│   ├── IconButton.tsx
-│   └── index.ts
-├── inputs/
-│   ├── Input.types.ts
-│   ├── TextInput.tsx
-│   ├── SearchInput.tsx
-│   ├── Textarea.tsx
-│   └── index.ts
-├── typography/
-│   ├── Heading.tsx
-│   ├── Text.tsx
-│   ├── Caption.tsx
-│   ├── Typography.types.ts
-│   └── index.ts
-├── badges/
-│   ├── Badge.tsx
-│   ├── Badge.types.ts
-│   ├── PriceBadge.tsx
-│   └── index.ts
-├── dividers/
-│   ├── Divider.tsx
-│   └── index.ts
-├── index.ts (barrel export)
-└── ATOMS.md (reference guide)
-```
-
----
-
-## ✅ Quality Assurance
-
-### Build
-```bash
-✓ Compiled successfully in 3.7s
-✓ npm run build: PASS
-✓ npm run format: PASS
-✓ Code formatting: Complete
-```
-
-### Type Safety
-- ✅ Full TypeScript coverage
-- ✅ All props typed
-- ✅ No `any` types
-- ✅ Interface exports for reuse
-
-### Accessibility
-- ✅ Semantic HTML throughout
-- ✅ ARIA labels where needed
-- ✅ Focus visible states
-- ✅ Keyboard navigation support
-
-### Consistency
-- ✅ CSS variables for theming
-- ✅ Consistent naming conventions
-- ✅ Barrel exports for clean imports
-- ✅ Standardized prop interfaces
-
----
-
-## 📖 Usage Examples
-
-### Basic Button
-```tsx
-import { Button } from "@/components/atoms";
-
-<Button variant="primary" size="sm" icon="fa-cart-plus">
-  Mua
-</Button>
-```
-
-### Form Field
-```tsx
-import { TextInput, Button } from "@/components/atoms";
-
-<TextInput
-  label="Email"
-  type="email"
-  placeholder="user@example.com"
-  error={emailError}
-/>
-```
-
-### Typography
-```tsx
-import { Heading, Text, Caption } from "@/components/atoms";
-
-<Heading level={2}>Product Title</Heading>
-<Text variant="body1">Description</Text>
-<Caption>Last updated 2 hours ago</Caption>
-```
-
-### Price Display
-```tsx
-import { PriceBadge } from "@/components/atoms";
-
-<PriceBadge price={50000} /> {/* "50.000 ₫" */}
-```
-
----
-
-## 🎯 Key Achievements
-
-1. **Foundation Built** ✅
-   - 21 reusable atoms ready for use
-   - Type-safe with full TypeScript support
-   - All styled with CSS variables
-
-2. **Documentation Complete** ✅
-   - 2,300+ lines of comprehensive guides
-   - Step-by-step implementation instructions
-   - Usage examples for every component
-
-3. **Existing Components Updated** ✅
-   - CartProduct now uses atoms
-   - ReviewModal now uses atoms
-   - Demonstrates atomic pattern in practice
-
-4. **Code Quality** ✅
-   - Zero TypeScript errors in atoms
-   - Formatted with Prettier
-   - Linted with ESLint
-   - Build successful
-
-5. **Ready for Phase 2** ✅
-   - Atoms are stable and tested
-   - Can start creating molecules immediately
-   - All documentation in place
-
----
-
-## 🚀 Next Steps (Phase 2)
-
-### Molecules to Create
-1. **ProductCard** - Image + Text + Badge + Button
-2. **FormField** - Label + Input + Error + Validation
-3. **SearchBar** - SearchInput + Button
-4. **RatingInput** - Interactive 5-star rating
-5. **PriceTag** - Price formatting molecule
-
-**Estimated Time:** 2-3 days
-
----
-
-## 💡 Design Decisions
-
-### Why Barrel Exports?
-```tsx
-// ❌ Bad: Scattered imports
-import Button from "@/components/atoms/buttons/Button";
-import Text from "@/components/atoms/typography/Text";
-
-// ✅ Good: Single clean import
-import { Button, Text } from "@/components/atoms";
-```
-
-### Why TypeScript Types in Separate Files?
-- Clear separation of concerns
-- Easier to maintain interfaces
-- Reusable types across modules
-- Better for large components
-
-### Why CSS Variables?
-- Single point for theme changes
-- Easy dark mode switching
-- Consistent across all atoms
-- No inline style duplication
-
----
-
-## 📝 Commit Details
-
-```
-feat: Implement Atomic Design Phase 1 - Atoms Foundation
-
-✨ Created complete atoms library (21 components):
-- Buttons: Button, IconButton with variants
-- Inputs: TextInput, SearchInput, Textarea
-- Typography: Heading (h1-h6), Text (variants), Caption
-- Badges: Badge (5 variants), PriceBadge
-- Dividers: Horizontal/vertical separators
-
-🎯 Updated existing components:
-- CartProduct: Button, Text, Caption atoms
-- ReviewModal: Button, Textarea, Heading, Text atoms
-
-📚 Added comprehensive documentation (2,300+ lines)
-🏗️ Foundation for Phase 2 (molecules)
-✅ Build: Success | Lint: Clean
-```
-
----
-
-## 🔗 Related Documentation
-
-- **`OPTIMIZATION_PLAN.md`** - Full 5-phase implementation strategy
-- **`QUICK_START_ATOMIC.md`** - Step-by-step how-to guide
-- **`ATOMIC_REDESIGN_SUMMARY.md`** - Executive overview
-- **`components/atoms/ATOMS.md`** - Atoms reference guide
-- **`Atomic.md`** - Pattern specification
-
----
-
-## ✨ Success Metrics Met
-
-- ✅ 21 atoms created and tested
-- ✅ All atoms fully TypeScript typed
-- ✅ Comprehensive documentation written
-- ✅ Existing components refactored to use atoms
-- ✅ Build successful with no new errors
-- ✅ Code formatted and linted
-- ✅ Foundation ready for molecules
-- ✅ Team can start using atoms immediately
-
----
-
-**Status:** Ready for Phase 2 🚀
-**Last Updated:** 2026-04-03
-**Contributor:** Claude Code + Anthropic AI
-

components/atoms/buttons/Button.tsx

@@ -9,6 +9,7 @@ export default function Button({
   icon,
   iconPosition = "left",
   disabled = false,
+  className = "",
   children,
   ...props
 }: ButtonProps) {
@@ -39,7 +40,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

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

components/molecules/cards/PaymentSummaryCard.tsx

@@ -66,9 +66,7 @@ export default function PaymentSummaryCard({
               Đánh giá
             </Button>
           )}
-
-          <Link href={backHref || "/"}  className={isCustomer ? "" : "col-span-2"}>
-            <Button
+          {/* <Button
               style="payment"
               onClick={() => setIsReviewOpen(false)}
               icon="fa-solid fa-arrow-rotate-left"
@@ -77,7 +75,17 @@ export default function PaymentSummaryCard({
               className="w-full"
             >
               Quay về
-            </Button>
+            </Button> */}
+
+          <Link href={backHref || "/"}  className={isCustomer ? "" : "col-span-2"}>
+            <Button
+            style="payment"
+            onClick={() => setIsReviewOpen(false)}
+            icon="fa-solid fa-arrow-rotate-left"
+            size="md"
+            variant="secondary"
+            className="w-full"
+            >Quay về</Button>
           </Link>
         </div>
       </div>

layouts/header.tsx

@@ -97,18 +97,27 @@ export default function Header() {
               </button>
             </div>
           ) : user.role === "staff" ? (
-            /* Staff: avatar + name */
-            <button
-              onClick={handleAuthClick}
-              title="Nhấn để đă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 */}
-              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-(--color-primary-light) text-xs text-white">
-                <i className="fa-solid fa-user"></i>
-              </div>
-              <span className="hidden sm:inline">{user.name}</span>
-            </button>
+            /* Staff: Register shift + avatar + name */
+            <div className="flex items-center gap-2">
+              <Link
+                href="/staff"
+                className="flex items-center gap-2 rounded-xl border border-(--color-accent) bg-(--color-accent-light) px-4 py-2.5 text-sm font-semibold text-(--color-primary-dark) no-underline transition-all duration-150 hover:bg-(--color-accent) hover:text-white"
+              >
+                <i className="fa-solid fa-calendar-check text-base"></i>
+                <span className="hidden sm:inline">Ca làm</span>
+              </Link>
+              <button
+                onClick={handleAuthClick}
+                title="Nhấn để đă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 */}
+                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-(--color-primary-light) text-xs text-white">
+                  <i className="fa-solid fa-user"></i>
+                </div>
+                <span className="hidden sm:inline">{user.name}</span>
+              </button>
+            </div>
           ) : (
             /* Customer: phone icon + label */
             <button

package-lock.json

@@ -12,6 +12,7 @@
         "@types/node": "^20.19.37",
         "@types/react": "^19.2.14",
         "next": "16.1.7",
+        "nextjs": "^0.0.3",
         "react": "19.2.3",
         "react-dom": "19.2.3",
         "tailwind": "^4.0.0",
@@ -21,7 +22,6 @@
       "devDependencies": {
         "@saithodev/semantic-release-gitea": "^2.1.0",
         "@semantic-release/exec": "^7.1.0",
-        "@semantic-release/github": "^12.0.6",
         "@semantic-release/npm": "^13.1.5",
         "@trivago/prettier-plugin-sort-imports": "^6.0.2",
         "@types/react-dom": "^19.2.3",
@@ -126,7 +126,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1382,7 +1381,6 @@
       "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^6.0.0",
         "@octokit/graphql": "^9.0.3",
@@ -2382,7 +2380,6 @@
       "integrity": "sha512-3DgfkukFyC/sE/VuYjaUUWoFfuVjPK55vOFDsxD56XXynFMCZDYFogH2l/hDfOsQAm1myoU/1xByJ3tWqtulXA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@babel/generator": "^7.28.0",
         "@babel/parser": "^7.28.0",
@@ -2518,7 +2515,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2588,7 +2584,6 @@
       "integrity": "sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.57.2",
         "@typescript-eslint/types": "8.57.2",
@@ -3114,7 +3109,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3737,7 +3731,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5245,7 +5238,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5431,7 +5423,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -8403,7 +8394,6 @@
       "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -8835,6 +8825,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/nextjs/-/nextjs-0.0.3.tgz",
+      "integrity": "sha512-mYbDUo4/sRAZ8TqK63PCpYnFiLg7BICG/ot9+guOrUKd4/Fo71ZmEQ41IZbH6nqbQvG7SXTBuofJXAIWfNho0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.21"
+      }
+    },
     "node_modules/nocache": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/nocache/-/nocache-2.0.0.tgz",
@@ -10807,7 +10806,6 @@
       "dev": true,
       "inBundle": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11618,7 +11616,6 @@
       "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11933,7 +11930,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11943,7 +11939,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -12309,7 +12304,6 @@
       "integrity": "sha512-WRgl5GcypwramYX4HV+eQGzUbD7UUbljVmS+5G1uMwX/wLgYuJAxGeerXJDMO2xshng4+FXqCgyB5QfClV6WjA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@semantic-release/commit-analyzer": "^13.0.1",
         "@semantic-release/error": "^4.0.0",
@@ -13567,7 +13561,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13793,7 +13786,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14445,7 +14437,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -15,6 +15,7 @@
     "@types/node": "^20.19.37",
     "@types/react": "^19.2.14",
     "next": "16.1.7",
+    "nextjs": "^0.0.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "tailwind": "^4.0.0",