frontend-systems 1.0.0

package/.env.example

@@ -0,0 +1,9 @@
+# Frontend Environment Variables
+
+# API Configuration
+NEXT_PUBLIC_API_URL=http://localhost:8000
+API_URL=http://localhost:8000
+
+# Authentication
+NEXTAUTH_SECRET=your-secret-key-here
+NEXTAUTH_URL=http://localhost:3000

package/.github/workflows/deploy.yml

@@ -0,0 +1,15 @@
+name: Deploy to Render (Free Tier)
+on:
+  push:
+    branches: [ main, master ]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Trigger Render Deploy
+        uses: sws2apps/render-deployment@main
+        with:
+          serviceId: ${{ secrets.RENDER_SERVICE_ID }}
+          apiKey: ${{ secrets.RENDER_API_KEY }}
+          multipleDeployment: false

package/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci || npm install
+COPY . .
+RUN npm run build --if-present
+
+FROM node:18-alpine
+WORKDIR /app
+COPY --from=builder /app ./
+ENV NODE_ENV=production
+EXPOSE 3000
+CMD ["npm", "start"]

package/README.md

@@ -0,0 +1,113 @@
+# 02_frontend_systems - Next.js Admin Dashboard
+
+> Production-grade admin dashboard demonstrating modern React patterns, TypeScript, and enterprise UI architecture.
+
+## 🎯 Overview
+
+This module implements a comprehensive admin dashboard with:
+
+- **Next.js 14** - App Router with Server Components
+- **TypeScript** - Full type safety
+- **TailwindCSS** - Utility-first styling
+- **Authentication** - JWT-based auth flow
+- **RBAC UI** - Role-based access control
+- **CRUD Operations** - Full data management
+
+## 📁 Structure
+
+```
+02_frontend_systems/
+├── src/
+│   ├── app/                 # Next.js App Router
+│   │   ├── layout.tsx       # Root layout
+│   │   ├── page.tsx         # Home page
+│   │   ├── dashboard/       # Dashboard pages
+│   │   ├── users/           # User management
+│   │   └── api/             # API routes
+│   ├── components/          # React components
+│   │   ├── ui/              # Base UI components
+│   │   └── layouts/         # Layout components
+│   ├── lib/                 # Utilities
+│   ├── hooks/               # Custom hooks
+│   └── types/               # TypeScript types
+├── public/                  # Static assets
+└── tests/                   # Component tests
+```
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Node.js 18+
+- npm or yarn
+
+### Installation
+
+```bash
+# Install dependencies
+npm install
+
+# Set environment variables
+cp .env.example .env.local
+# Edit .env.local with your API URL
+
+# Run development server
+npm run dev
+
+# Open http://localhost:3000
+```
+
+### Production Build
+
+```bash
+npm run build
+npm start
+```
+
+## 🏗️ Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                        PAGES (App Router)                   │
+│         (Server Components, Route Handlers, Layouts)        │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                    CLIENT COMPONENTS                        │
+│            (Interactive UI, Forms, State)                   │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                       HOOKS & CONTEXT                        │
+│           (useAuth, useApi, AppContext)                     │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                      API CLIENT                             │
+│            (Fetch wrapper, Type-safe calls)                 │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 🎨 Design System
+
+- **Colors**: Dark mode with accent colors
+- **Typography**: Inter font family
+- **Spacing**: 4px grid system
+- **Components**: Consistent, reusable UI elements
+
+## 🧪 Testing
+
+```bash
+# Run tests
+npm test
+
+# Run with coverage
+npm test -- --coverage
+```
+
+## 📄 License
+
+MIT

package/docker-compose.yml

@@ -0,0 +1,9 @@
+version: '3.8'
+services:
+  app:
+    build: .
+    ports:
+      - "8001:3000"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped

package/next.config.js

@@ -0,0 +1,52 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+
+    // Environment variables available at build time
+    env: {
+        API_URL: process.env.API_URL || 'http://localhost:8000',
+    },
+
+    // Image optimization
+    images: {
+        domains: ['localhost'],
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: '**',
+            },
+        ],
+    },
+
+    // Experimental features
+    experimental: {
+        serverActions: {
+            bodySizeLimit: '2mb',
+        },
+    },
+
+    // Headers for security
+    async headers() {
+        return [
+            {
+                source: '/:path*',
+                headers: [
+                    {
+                        key: 'X-Frame-Options',
+                        value: 'DENY',
+                    },
+                    {
+                        key: 'X-Content-Type-Options',
+                        value: 'nosniff',
+                    },
+                    {
+                        key: 'Referrer-Policy',
+                        value: 'origin-when-cross-origin',
+                    },
+                ],
+            },
+        ];
+    },
+};
+
+module.exports = nextConfig;

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "frontend-systems",
+    "version": "1.0.0",
+    
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "test": "jest",
+        "test:watch": "jest --watch"
+    },
+    "dependencies": {
+        "next": "^14.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "clsx": "^2.1.0",
+        "tailwind-merge": "^2.2.0",
+        "lucide-react": "^0.312.0",
+        "zustand": "^4.5.0",
+        "date-fns": "^3.3.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20.11.5",
+        "@types/react": "^18.2.48",
+        "@types/react-dom": "^18.2.18",
+        "typescript": "^5.3.3",
+        "tailwindcss": "^3.4.1",
+        "postcss": "^8.4.33",
+        "autoprefixer": "^10.4.17",
+        "eslint": "^8.56.0",
+        "eslint-config-next": "^14.1.0",
+        "@testing-library/react": "^14.1.2",
+        "@testing-library/jest-dom": "^6.3.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0"
+    }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/src/app/dashboard/layout.tsx

@@ -0,0 +1,23 @@
+import { Sidebar } from '@/components/layouts/Sidebar';
+import { Header } from '@/components/layouts/Header';
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <div className="flex h-screen bg-dark-950">
+            {/* Sidebar */}
+            <Sidebar />
+
+            {/* Main Content */}
+            <div className="flex flex-1 flex-col overflow-hidden">
+                <Header />
+                <main className="flex-1 overflow-y-auto bg-dark-900 p-6">
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+}

package/src/app/dashboard/page.tsx

@@ -0,0 +1,97 @@
+import { StatsCard } from '@/components/ui/StatsCard';
+import {
+    DollarSign,
+    ShoppingCart,
+    Package,
+    Users,
+    TrendingUp,
+    TrendingDown,
+} from 'lucide-react';
+
+export default function DashboardPage() {
+    return (
+        <div className="space-y-6">
+            {/* Page Header */}
+            <div>
+                <h1 className="text-2xl font-bold text-white">Dashboard</h1>
+                <p className="mt-1 text-sm text-dark-400">
+                    Overview of your business metrics and performance.
+                </p>
+            </div>
+
+            {/* Stats Grid */}
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                <StatsCard
+                    title="Total Revenue"
+                    value="$45,231.89"
+                    change={{ value: 12.5, trend: 'up' }}
+                    icon={DollarSign}
+                />
+                <StatsCard
+                    title="Orders"
+                    value="356"
+                    change={{ value: 8.2, trend: 'up' }}
+                    icon={ShoppingCart}
+                />
+                <StatsCard
+                    title="Products"
+                    value="1,234"
+                    change={{ value: 3.1, trend: 'down' }}
+                    icon={Package}
+                />
+                <StatsCard
+                    title="Active Users"
+                    value="573"
+                    change={{ value: 18.7, trend: 'up' }}
+                    icon={Users}
+                />
+            </div>
+
+            {/* Charts Section */}
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                {/* Revenue Chart Placeholder */}
+                <div className="card border-dark-700 p-6">
+                    <h3 className="text-lg font-semibold text-white">Revenue Overview</h3>
+                    <p className="text-sm text-dark-400">Monthly revenue for the current year</p>
+                    <div className="mt-4 flex h-64 items-center justify-center rounded-lg bg-dark-800">
+                        <span className="text-dark-500">Chart Component</span>
+                    </div>
+                </div>
+
+                {/* Orders Chart Placeholder */}
+                <div className="card border-dark-700 p-6">
+                    <h3 className="text-lg font-semibold text-white">Order Statistics</h3>
+                    <p className="text-sm text-dark-400">Order volume by status</p>
+                    <div className="mt-4 flex h-64 items-center justify-center rounded-lg bg-dark-800">
+                        <span className="text-dark-500">Chart Component</span>
+                    </div>
+                </div>
+            </div>
+
+            {/* Recent Activity */}
+            <div className="card border-dark-700 p-6">
+                <h3 className="text-lg font-semibold text-white">Recent Activity</h3>
+                <p className="text-sm text-dark-400">Latest actions in the system</p>
+                <div className="mt-4 space-y-4">
+                    {[
+                        { action: 'New order #ORD-001', user: 'John Doe', time: '2 min ago' },
+                        { action: 'Product updated: Widget Pro', user: 'Jane Smith', time: '15 min ago' },
+                        { action: 'User registered: mike@example.com', user: 'System', time: '1 hour ago' },
+                        { action: 'Inventory low: Basic Gadget', user: 'System', time: '2 hours ago' },
+                    ].map((item, i) => (
+                        <div
+                            key={i}
+                            className="flex items-center justify-between border-b border-dark-700 pb-4 last:border-0 last:pb-0"
+                        >
+                            <div>
+                                <p className="font-medium text-white">{item.action}</p>
+                                <p className="text-sm text-dark-400">By {item.user}</p>
+                            </div>
+                            <span className="text-sm text-dark-500">{item.time}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/app/globals.css

@@ -0,0 +1,149 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom base styles */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-dark-100 dark:bg-dark-800;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-dark-300 dark:bg-dark-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-dark-400 dark:bg-dark-500;
+  }
+}
+
+/* Custom component styles */
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+           disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
+  }
+
+  .btn-secondary {
+    @apply btn bg-dark-200 text-dark-900 hover:bg-dark-300 
+           dark:bg-dark-700 dark:text-dark-100 dark:hover:bg-dark-600;
+  }
+
+  .btn-danger {
+    @apply btn bg-error-600 text-white hover:bg-error-500;
+  }
+
+  .btn-ghost {
+    @apply btn bg-transparent hover:bg-dark-100 dark:hover:bg-dark-800;
+  }
+
+  .btn-sm {
+    @apply h-8 px-3 text-xs;
+  }
+
+  .btn-md {
+    @apply h-10 px-4;
+  }
+
+  .btn-lg {
+    @apply h-12 px-6 text-base;
+  }
+
+  .input {
+    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm
+           placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring
+           disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  .card {
+    @apply rounded-lg border bg-white shadow-sm dark:bg-dark-900 dark:border-dark-700;
+  }
+
+  .card-header {
+    @apply flex flex-col space-y-1.5 p-6;
+  }
+
+  .card-title {
+    @apply text-lg font-semibold leading-none tracking-tight;
+  }
+
+  .card-content {
+    @apply p-6 pt-0;
+  }
+
+  .badge {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+  }
+
+  .badge-primary {
+    @apply badge bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200;
+  }
+
+  .badge-success {
+    @apply badge bg-success-50 text-success-600;
+  }
+
+  .badge-warning {
+    @apply badge bg-warning-50 text-warning-600;
+  }
+
+  .badge-error {
+    @apply badge bg-error-50 text-error-600;
+  }
+}
+
+/* Utility classes */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .glass {
+    @apply backdrop-blur-sm bg-white/50 dark:bg-dark-900/50;
+  }
+
+  .gradient-primary {
+    @apply bg-gradient-to-r from-primary-500 to-primary-700;
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({
+    subsets: ['latin'],
+    display: 'swap',
+    variable: '--font-inter',
+});
+
+export const metadata: Metadata = {
+    title: {
+        default: 'ERP Dashboard',
+        template: '%s | ERP Dashboard',
+    },
+    description: 'Enterprise Resource Planning Dashboard',
+    keywords: ['ERP', 'Dashboard', 'Enterprise', 'Management'],
+    authors: [{ name: 'Engineering Team' }],
+    viewport: 'width=device-width, initial-scale=1',
+    themeColor: [
+        { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+        { media: '(prefers-color-scheme: dark)', color: '#111827' },
+    ],
+};
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en" className={inter.variable} suppressHydrationWarning>
+            <body className="min-h-screen bg-dark-50 font-sans antialiased dark:bg-dark-950">
+                <div className="relative flex min-h-screen flex-col">
+                    {children}
+                </div>
+            </body>
+        </html>
+    );
+}

package/src/app/page.tsx

@@ -0,0 +1,107 @@
+import Link from 'next/link';
+import {
+    LayoutDashboard,
+    Users,
+    ShoppingCart,
+    Package,
+    Settings
+} from 'lucide-react';
+
+export default function HomePage() {
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-dark-900 via-dark-950 to-primary-950">
+            {/* Navigation */}
+            <nav className="border-b border-dark-800 bg-dark-900/50 backdrop-blur-sm">
+                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                    <div className="flex h-16 items-center justify-between">
+                        <div className="flex items-center">
+                            <span className="text-2xl font-bold text-white">
+                                ERP<span className="text-primary-500">Dashboard</span>
+                            </span>
+                        </div>
+                        <div className="flex items-center space-x-4">
+                            <Link
+                                href="/dashboard"
+                                className="btn-primary btn-md"
+                            >
+                                Go to Dashboard
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            {/* Hero Section */}
+            <main className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">
+                <div className="text-center">
+                    <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
+                        Enterprise Resource
+                        <span className="block text-primary-400">Planning System</span>
+                    </h1>
+                    <p className="mt-6 text-lg leading-8 text-dark-300">
+                        A production-grade admin dashboard demonstrating modern React patterns,
+                        TypeScript, and enterprise UI architecture.
+                    </p>
+                    <div className="mt-10 flex items-center justify-center gap-x-6">
+                        <Link
+                            href="/dashboard"
+                            className="btn-primary btn-lg"
+                        >
+                            Get Started
+                        </Link>
+                        <Link
+                            href="/dashboard/users"
+                            className="btn-ghost btn-lg text-dark-300 hover:text-white"
+                        >
+                            View Users →
+                        </Link>
+                    </div>
+                </div>
+
+                {/* Features Grid */}
+                <div className="mt-24 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+                    <FeatureCard
+                        icon={LayoutDashboard}
+                        title="Dashboard"
+                        description="Real-time metrics and analytics"
+                    />
+                    <FeatureCard
+                        icon={Users}
+                        title="User Management"
+                        description="RBAC and team organization"
+                    />
+                    <FeatureCard
+                        icon={ShoppingCart}
+                        title="Orders"
+                        description="Full order lifecycle management"
+                    />
+                    <FeatureCard
+                        icon={Package}
+                        title="Inventory"
+                        description="Stock tracking and alerts"
+                    />
+                </div>
+            </main>
+        </div>
+    );
+}
+
+function FeatureCard({
+    icon: Icon,
+    title,
+    description,
+}: {
+    icon: React.ComponentType<{ className?: string }>;
+    title: string;
+    description: string;
+}) {
+    return (
+        <div className="card border-dark-800 bg-dark-900/50 p-6 transition-all hover:border-primary-500/50">
+            <div className="mb-4 inline-flex rounded-lg bg-primary-500/10 p-3">
+                <Icon className="h-6 w-6 text-primary-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-white">{title}</h3>
+            <p className="mt-2 text-sm text-dark-400">{description}</p>
+        </div>
+    );
+}