frontend-systems 1.0.0

package/src/components/layouts/Header.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Bell, Search, Menu } from 'lucide-react';
+
+export function Header() {
+    return (
+        <header className="flex h-16 items-center justify-between border-b border-dark-800 bg-dark-950 px-6">
+            {/* Left side */}
+            <div className="flex items-center">
+                <button className="rounded-lg p-2 text-dark-400 hover:bg-dark-800 hover:text-white lg:hidden">
+                    <Menu className="h-5 w-5" />
+                </button>
+
+                {/* Search */}
+                <div className="ml-4 hidden lg:block">
+                    <div className="relative">
+                        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-500" />
+                        <input
+                            type="text"
+                            placeholder="Search..."
+                            className="input w-64 bg-dark-800 pl-10 text-white placeholder:text-dark-500 focus:ring-primary-500"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* Right side */}
+            <div className="flex items-center space-x-4">
+                {/* Notifications */}
+                <button className="relative rounded-lg p-2 text-dark-400 hover:bg-dark-800 hover:text-white">
+                    <Bell className="h-5 w-5" />
+                    <span className="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 text-[10px] font-medium text-white">
+                        3
+                    </span>
+                </button>
+
+                {/* User avatar (mobile) */}
+                <div className="lg:hidden">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-500/20">
+                        <span className="text-xs font-medium text-primary-400">AD</span>
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+}

package/src/components/layouts/Sidebar.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { clsx } from 'clsx';
+import {
+    LayoutDashboard,
+    Users,
+    ShoppingCart,
+    Package,
+    Settings,
+    BarChart3,
+    LogOut,
+} from 'lucide-react';
+
+const navigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
+    { name: 'Users', href: '/dashboard/users', icon: Users },
+    { name: 'Orders', href: '/dashboard/orders', icon: ShoppingCart },
+    { name: 'Inventory', href: '/dashboard/inventory', icon: Package },
+    { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart3 },
+    { name: 'Settings', href: '/dashboard/settings', icon: Settings },
+];
+
+export function Sidebar() {
+    const pathname = usePathname();
+
+    return (
+        <div className="flex h-full w-64 flex-col border-r border-dark-800 bg-dark-950">
+            {/* Logo */}
+            <div className="flex h-16 items-center border-b border-dark-800 px-6">
+                <span className="text-xl font-bold text-white">
+                    ERP<span className="text-primary-500">Dashboard</span>
+                </span>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 space-y-1 px-3 py-4">
+                {navigation.map((item) => {
+                    const isActive = pathname === item.href;
+                    return (
+                        <Link
+                            key={item.name}
+                            href={item.href}
+                            className={clsx(
+                                'group flex items-center rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
+                                isActive
+                                    ? 'bg-primary-500/10 text-primary-400'
+                                    : 'text-dark-400 hover:bg-dark-800 hover:text-white'
+                            )}
+                        >
+                            <item.icon
+                                className={clsx(
+                                    'mr-3 h-5 w-5 flex-shrink-0 transition-colors',
+                                    isActive ? 'text-primary-400' : 'text-dark-500 group-hover:text-white'
+                                )}
+                            />
+                            {item.name}
+                        </Link>
+                    );
+                })}
+            </nav>
+
+            {/* User Section */}
+            <div className="border-t border-dark-800 p-4">
+                <div className="flex items-center">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-500/20">
+                        <span className="text-sm font-medium text-primary-400">AD</span>
+                    </div>
+                    <div className="ml-3 flex-1">
+                        <p className="text-sm font-medium text-white">Admin User</p>
+                        <p className="text-xs text-dark-500">admin@example.com</p>
+                    </div>
+                    <button className="rounded-lg p-2 text-dark-500 hover:bg-dark-800 hover:text-white">
+                        <LogOut className="h-4 w-4" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/ui/StatsCard.tsx

@@ -0,0 +1,43 @@
+import { TrendingUp, TrendingDown } from 'lucide-react';
+import { clsx } from 'clsx';
+
+interface StatsCardProps {
+    title: string;
+    value: string;
+    change?: {
+        value: number;
+        trend: 'up' | 'down';
+    };
+    icon: React.ComponentType<{ className?: string }>;
+}
+
+export function StatsCard({ title, value, change, icon: Icon }: StatsCardProps) {
+    return (
+        <div className="card border-dark-700 p-6">
+            <div className="flex items-center justify-between">
+                <div className="rounded-lg bg-primary-500/10 p-3">
+                    <Icon className="h-5 w-5 text-primary-400" />
+                </div>
+                {change && (
+                    <div
+                        className={clsx(
+                            'flex items-center text-sm font-medium',
+                            change.trend === 'up' ? 'text-success-500' : 'text-error-500'
+                        )}
+                    >
+                        {change.trend === 'up' ? (
+                            <TrendingUp className="mr-1 h-4 w-4" />
+                        ) : (
+                            <TrendingDown className="mr-1 h-4 w-4" />
+                        )}
+                        {change.value}%
+                    </div>
+                )}
+            </div>
+            <div className="mt-4">
+                <p className="text-sm font-medium text-dark-400">{title}</p>
+                <p className="mt-1 text-2xl font-bold text-white">{value}</p>
+            </div>
+        </div>
+    );
+}

package/src/lib/api.ts

@@ -0,0 +1,249 @@
+/**
+ * API Client - Type-safe API wrapper for backend communication.
+ */
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+interface RequestOptions {
+    method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    body?: unknown;
+    headers?: Record<string, string>;
+}
+
+interface ApiError {
+    detail: string;
+    type?: string;
+}
+
+class ApiClient {
+    private baseUrl: string;
+    private token: string | null = null;
+
+    constructor(baseUrl: string) {
+        this.baseUrl = baseUrl;
+    }
+
+    setToken(token: string | null) {
+        this.token = token;
+    }
+
+    private async request<T>(
+        endpoint: string,
+        options: RequestOptions = {}
+    ): Promise<T> {
+        const { method = 'GET', body, headers = {} } = options;
+
+        const requestHeaders: Record<string, string> = {
+            'Content-Type': 'application/json',
+            ...headers,
+        };
+
+        if (this.token) {
+            requestHeaders['Authorization'] = `Bearer ${this.token}`;
+        }
+
+        const response = await fetch(`${this.baseUrl}${endpoint}`, {
+            method,
+            headers: requestHeaders,
+            body: body ? JSON.stringify(body) : undefined,
+        });
+
+        if (!response.ok) {
+            const error: ApiError = await response.json().catch(() => ({
+                detail: 'An unexpected error occurred',
+            }));
+            throw new Error(error.detail);
+        }
+
+        // Handle 204 No Content
+        if (response.status === 204) {
+            return undefined as T;
+        }
+
+        return response.json();
+    }
+
+    // Auth endpoints
+    async login(email: string, password: string) {
+        const formData = new URLSearchParams();
+        formData.append('username', email);
+        formData.append('password', password);
+
+        const response = await fetch(`${this.baseUrl}/api/v1/auth/login`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: formData,
+        });
+
+        if (!response.ok) {
+            throw new Error('Invalid credentials');
+        }
+
+        return response.json();
+    }
+
+    async getCurrentUser() {
+        return this.request<User>('/api/v1/auth/me');
+    }
+
+    // User endpoints
+    async getUsers(skip = 0, limit = 50) {
+        return this.request<UserListResponse>(`/api/v1/users?skip=${skip}&limit=${limit}`);
+    }
+
+    async getUser(id: string) {
+        return this.request<User>(`/api/v1/users/${id}`);
+    }
+
+    async createUser(data: CreateUserRequest) {
+        return this.request<User>('/api/v1/users', {
+            method: 'POST',
+            body: data,
+        });
+    }
+
+    async updateUser(id: string, data: UpdateUserRequest) {
+        return this.request<User>(`/api/v1/users/${id}`, {
+            method: 'PATCH',
+            body: data,
+        });
+    }
+
+    async deleteUser(id: string) {
+        return this.request<void>(`/api/v1/users/${id}`, {
+            method: 'DELETE',
+        });
+    }
+
+    // Order endpoints
+    async getOrders(skip = 0, limit = 50, status?: string) {
+        let url = `/api/v1/orders?skip=${skip}&limit=${limit}`;
+        if (status) url += `&status=${status}`;
+        return this.request<OrderListResponse>(url);
+    }
+
+    async getOrder(id: string) {
+        return this.request<Order>(`/api/v1/orders/${id}`);
+    }
+
+    async createOrder(data: CreateOrderRequest) {
+        return this.request<Order>('/api/v1/orders', {
+            method: 'POST',
+            body: data,
+        });
+    }
+
+    // Inventory endpoints
+    async getInventory(skip = 0, limit = 50, search?: string) {
+        let url = `/api/v1/inventory?skip=${skip}&limit=${limit}`;
+        if (search) url += `&search=${encodeURIComponent(search)}`;
+        return this.request<InventoryListResponse>(url);
+    }
+
+    async getInventoryItem(id: string) {
+        return this.request<InventoryItem>(`/api/v1/inventory/${id}`);
+    }
+
+    async getLowStockItems() {
+        return this.request<InventoryItem[]>('/api/v1/inventory/low-stock');
+    }
+
+    // Health check
+    async healthCheck() {
+        return this.request<HealthResponse>('/health');
+    }
+}
+
+// Types
+export interface User {
+    id: string;
+    email: string;
+    full_name: string;
+    role: string;
+    is_active: boolean;
+    is_verified: boolean;
+    created_at: string;
+}
+
+export interface UserListResponse {
+    items: User[];
+    total: number;
+    skip: number;
+    limit: number;
+}
+
+export interface CreateUserRequest {
+    email: string;
+    password: string;
+    full_name: string;
+    role?: string;
+}
+
+export interface UpdateUserRequest {
+    full_name?: string;
+    role?: string;
+    is_active?: boolean;
+}
+
+export interface Order {
+    id: string;
+    order_number: string;
+    customer_name: string;
+    customer_email: string | null;
+    status: string;
+    items: OrderItem[];
+    subtotal: number;
+    grand_total: number;
+    currency: string;
+    created_at: string;
+}
+
+export interface OrderItem {
+    id: string;
+    product_name: string;
+    quantity: number;
+    unit_price: number;
+    total: number;
+}
+
+export interface OrderListResponse {
+    items: Order[];
+    total: number;
+    skip: number;
+    limit: number;
+}
+
+export interface CreateOrderRequest {
+    customer_name: string;
+    customer_email?: string;
+}
+
+export interface InventoryItem {
+    id: string;
+    sku: string;
+    name: string;
+    description: string | null;
+    category: string | null;
+    selling_price: number;
+    quantity_on_hand: number;
+    quantity_available: number;
+    needs_reorder: boolean;
+    is_active: boolean;
+}
+
+export interface InventoryListResponse {
+    items: InventoryItem[];
+    total: number;
+    skip: number;
+    limit: number;
+}
+
+export interface HealthResponse {
+    status: string;
+    timestamp: string;
+    environment: string;
+    version: string;
+}
+
+// Singleton instance
+export const apiClient = new ApiClient(API_URL);

package/src/lib/utils.ts

@@ -0,0 +1,81 @@
+/**
+ * Utility functions for className merging.
+ */
+
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge Tailwind CSS classes with clsx.
+ * Handles conflicting classes properly.
+ */
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Format a number as currency.
+ */
+export function formatCurrency(
+    amount: number,
+    currency = 'USD',
+    locale = 'en-US'
+): string {
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(amount);
+}
+
+/**
+ * Format a date string.
+ */
+export function formatDate(
+    dateString: string,
+    options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    }
+): string {
+    return new Date(dateString).toLocaleDateString('en-US', options);
+}
+
+/**
+ * Format a date as relative time (e.g., "2 hours ago").
+ */
+export function formatRelativeTime(dateString: string): string {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    const diffMins = Math.floor(diffSecs / 60);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSecs < 60) return 'Just now';
+    if (diffMins < 60) return `${diffMins} min ago`;
+    if (diffHours < 24) return `${diffHours} hours ago`;
+    if (diffDays < 7) return `${diffDays} days ago`;
+    return formatDate(dateString);
+}
+
+/**
+ * Truncate text to a specified length.
+ */
+export function truncate(text: string, length: number): string {
+    if (text.length <= length) return text;
+    return text.slice(0, length) + '...';
+}
+
+/**
+ * Generate initials from a name.
+ */
+export function getInitials(name: string): string {
+    return name
+        .split(' ')
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}

package/src/types/index.ts

@@ -0,0 +1,105 @@
+/**
+ * Common TypeScript type definitions.
+ */
+
+// User types
+export interface User {
+    id: string;
+    email: string;
+    full_name: string;
+    role: 'admin' | 'manager' | 'operator' | 'viewer';
+    is_active: boolean;
+    is_verified: boolean;
+    created_at: string;
+    updated_at: string;
+}
+
+// Order types
+export type OrderStatus =
+    | 'draft'
+    | 'pending'
+    | 'confirmed'
+    | 'processing'
+    | 'shipped'
+    | 'delivered'
+    | 'cancelled'
+    | 'refunded';
+
+export interface OrderItem {
+    id: string;
+    product_id: string;
+    product_name: string;
+    sku: string;
+    quantity: number;
+    unit_price: number;
+    discount_percent: number;
+    tax_percent: number;
+    total: number;
+}
+
+export interface Order {
+    id: string;
+    order_number: string;
+    customer_name: string;
+    customer_email: string | null;
+    status: OrderStatus;
+    items: OrderItem[];
+    subtotal: number;
+    total_discount: number;
+    total_tax: number;
+    shipping_cost: number;
+    grand_total: number;
+    currency: string;
+    created_at: string;
+    updated_at: string;
+}
+
+// Inventory types
+export interface InventoryItem {
+    id: string;
+    sku: string;
+    name: string;
+    description: string | null;
+    barcode: string | null;
+    category: string | null;
+    brand: string | null;
+    cost_price: number;
+    selling_price: number;
+    currency: string;
+    quantity_on_hand: number;
+    quantity_reserved: number;
+    quantity_available: number;
+    reorder_point: number;
+    needs_reorder: boolean;
+    is_active: boolean;
+    created_at: string;
+}
+
+// Pagination
+export interface PaginatedResponse<T> {
+    items: T[];
+    total: number;
+    skip: number;
+    limit: number;
+}
+
+// API Response types
+export interface ApiError {
+    detail: string;
+    type?: string;
+}
+
+// Auth types
+export interface AuthTokens {
+    access_token: string;
+    refresh_token: string;
+    token_type: string;
+    expires_in: number;
+}
+
+export interface AuthState {
+    user: User | null;
+    tokens: AuthTokens | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+}

package/tailwind.config.ts

@@ -0,0 +1,90 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+    content: [
+        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            colors: {
+                // Brand colors
+                primary: {
+                    50: '#f0f9ff',
+                    100: '#e0f2fe',
+                    200: '#bae6fd',
+                    300: '#7dd3fc',
+                    400: '#38bdf8',
+                    500: '#0ea5e9',
+                    600: '#0284c7',
+                    700: '#0369a1',
+                    800: '#075985',
+                    900: '#0c4a6e',
+                    950: '#082f49',
+                },
+                // Dark theme background
+                dark: {
+                    50: '#f9fafb',
+                    100: '#f3f4f6',
+                    200: '#e5e7eb',
+                    300: '#d1d5db',
+                    400: '#9ca3af',
+                    500: '#6b7280',
+                    600: '#4b5563',
+                    700: '#374151',
+                    800: '#1f2937',
+                    900: '#111827',
+                    950: '#030712',
+                },
+                // Success, warning, error
+                success: {
+                    50: '#f0fdf4',
+                    500: '#22c55e',
+                    600: '#16a34a',
+                },
+                warning: {
+                    50: '#fffbeb',
+                    500: '#f59e0b',
+                    600: '#d97706',
+                },
+                error: {
+                    50: '#fef2f2',
+                    500: '#ef4444',
+                    600: '#dc2626',
+                },
+            },
+            fontFamily: {
+                sans: ['Inter', 'system-ui', 'sans-serif'],
+                mono: ['JetBrains Mono', 'monospace'],
+            },
+            spacing: {
+                '18': '4.5rem',
+                '88': '22rem',
+            },
+            animation: {
+                'fade-in': 'fadeIn 0.3s ease-in-out',
+                'slide-up': 'slideUp 0.3s ease-out',
+                'slide-down': 'slideDown 0.3s ease-out',
+            },
+            keyframes: {
+                fadeIn: {
+                    '0%': { opacity: '0' },
+                    '100%': { opacity: '1' },
+                },
+                slideUp: {
+                    '0%': { transform: 'translateY(10px)', opacity: '0' },
+                    '100%': { transform: 'translateY(0)', opacity: '1' },
+                },
+                slideDown: {
+                    '0%': { transform: 'translateY(-10px)', opacity: '0' },
+                    '100%': { transform: 'translateY(0)', opacity: '1' },
+                },
+            },
+        },
+    },
+    plugins: [],
+};
+
+export default config;