# GoodGo Platform - Web Client

> **EN**: Enterprise-grade web client for GoodGo microservices platform  
> **VI**: Web client cấp doanh nghiệp cho nền tảng microservices GoodGo

## Features / Tính Năng

- ✅ **Brand Identity System** - Complete logo suite, favicons, and illustrations
- ✅ **Design System** - Professional design tokens with brand colors, gradients, and glassmorphism
- ✅ **UI Component Library** - Enhanced components with brand variants (Button, EmptyState, Loading States, Logo)
- ✅ **Dark/Light Theme** - Automatic theme switching with system preference
- ✅ **Internationalization** - Multi-language support (i18n ready)
- ✅ **TypeScript** - Full type safety
- ✅ **Tailwind CSS 4** - Modern utility-first styling
- ✅ **Next.js 14** - App Router with RSC
- ✅ **Accessibility** - WCAG 2.1 AA compliant
- ✅ **PWA Ready** - Progressive Web App support

## Tech Stack

- **Framework**: Next.js 14 (App Router)
- **Language**: TypeScript 5+
- **Styling**: Tailwind CSS 4 (CSS-first)
- **State Management**: Zustand
- **API Client**: `@goodgo/http-client`
- **Testing**: Vitest + Playwright
- **Component Development**: Storybook

##Development / Phát Triển

```bash
# Install dependencies / Cài đặt dependencies
pnpm install

# Start dev server / Khởi động dev server
pnpm dev
# → http://localhost:3000

# Start Storybook / Khởi động Storybook
pnpm storybook
# → http://localhost:6006

# Build for production / Build cho production
pnpm build

# Type checking / Kiểm tra kiểu
pnpm typecheck

# Lint / Kiểm tra lỗi
pnpm lint
```

## Environment Variables / Biến Môi Trường

Create `.env.local` file:

```bash
# API URL
NEXT_PUBLIC_API_URL=http://localhost/api/v1
```

## Brand Assets / Tài Sản Thương Hiệu

Brand assets are located in `/public/brand-assets/`:

- **Logos**: `/brand-assets/logo/` (full, icon, wordmark variants)
- **Icons**: `/brand-assets/icons/` (favicon)
- **Illustrations**: `/brand-assets/illustrations/` (empty state, error state)

Usage in components:

```tsx
import { BrandLogo } from '@/components/ui/brand-logo';
import { BRAND } from '@/lib/brand-constants';

// Logo component
<BrandLogo variant="full" size="lg" />

// Brand constants
const primaryColor = BRAND.colors.primary.hex; // #3B82F6
```

## UI Components / Components Giao Diện

### BrandLogo
```tsx
import { BrandLogo, BrandLogoLink } from '@/components/ui/brand-logo';

<BrandLogo variant="full" size="xl" />
<BrandLogoLink variant="icon" size="md" href="/" />
```

### Button with Brand Variants
```tsx
import { Button } from '@/components/ui/button';

<Button variant="brand">Get Started</Button>
<Button variant="glass">Learn More</Button>
```

### Empty State
```tsx
import { EmptyState, ErrorState } from '@/components/ui/empty-state';

<EmptyState
  title="No items found"
  description="Try adding some items"
  action={{ label: 'Add Item', onClick: handleAdd }}
/>
```

### Loading States
```tsx
import {
  BrandSpinner,
  Skeleton,
  SkeletonCard,
  LoadingOverlay,
  ProgressBar
} from '@/components/ui/loading-states';

<BrandSpinner size="lg" color="brand" />
<SkeletonCard />
<LoadingOverlay show={isLoading} message="Loading..." />
<ProgressBar value={progress} showLabel />
```

## Design System / Hệ Thống Thiết Kế

### Brand Colors

```css
/* Primary (Blue) - Tech & Trust */
--brand-primary: #3B82F6;

/* Secondary (Purple) - Innovation */
--brand-secondary: #8B5CF6;

/* Accent (Cyan) - Energy */
--brand-accent: #06B6D4;
```

### Tailwind Utilities

```tsx
// Brand colors
<div className="bg-brand-primary text-white" />
<div className="bg-brand-gradient" />

// Glassmorphism
<div className="bg-glass-bg backdrop-blur-glass border-glass-border" />

// Brand shadows
<div className="shadow-brand hover:shadow-brand-lg" />
```

## Project Structure / Cấu Trúc Dự Án

```
apps/web-client/
├── public/
│   └── brand-assets/       # Brand logos, icons, illustrations
├── src/
│   ├── app/               # Next.js App Router pages
│   ├── components/
│   │   └── ui/           # Reusable UI components
│   ├── lib/
│   │   └── brand-constants.ts  # Brand helper functions
│   ├── styles/
│   │   └── theme.css     # Design system tokens
│   ├── contexts/         # React contexts (Theme, etc.)
│   ├── hooks/            # Custom React hooks
│   ├── providers/        # Provider components
│   └── stores/           # Zustand stores
└── tailwind.config.js    # Tailwind configuration
```

## Contributing / Đóng Góp

Please read [CONTRIBUTING.md](../../CONTRIBUTING.md) for details.

## License / Giấy Phép

Proprietary - GoodGo Platform