create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/dashboard/pages.js

@@ -0,0 +1,681 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create dashboard pages (Overview, Analytics, Users, Orders, Settings)
+ */
+async function createPages(config) {
+  // Overview Page
+  const overviewComponent = `import { Component, inject } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { StatsCardComponent } from '@shared/components/stats-card/stats-card.component';
+import { ChartBarComponent, BarChartData } from '@shared/components/chart-bar/chart-bar.component';
+import { ChartLineComponent, LineChartData } from '@shared/components/chart-line/chart-line.component';
+import { ChartDonutComponent, DonutChartData } from '@shared/components/chart-donut/chart-donut.component';
+import { DataTableComponent, TableColumn } from '@shared/components/data-table/data-table.component';
+import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component';
+import { TranslationService } from '@core/i18n/translation.service';
+
+@Component({
+  selector: 'app-overview',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    StatsCardComponent,
+    ChartBarComponent,
+    ChartLineComponent,
+    ChartDonutComponent,
+    DataTableComponent,
+    BreadcrumbComponent,
+  ],
+  template: \`
+    <div class="space-y-6">
+      <!-- Header -->
+      <div>
+        <app-breadcrumb [items]="[{ label: ('dashboard.overview' | translate) }]"></app-breadcrumb>
+        <h1 class="mt-2 text-2xl font-bold text-gray-900">{{ 'dashboard.title' | translate }}</h1>
+        <p class="text-gray-500">{{ 'dashboard.welcome' | translate }}</p>
+      </div>
+
+      <!-- Stats Cards -->
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <app-stats-card
+          [label]="'stats.totalRevenue' | translate"
+          value="$45,231"
+          icon="heroCurrencyDollar"
+          iconBgClass="bg-linear-to-br from-emerald-500 to-green-600 shadow-lg shadow-emerald-500/30"
+          iconColor="white"
+          gradientClass="from-emerald-50/50 to-green-50/50"
+          [trend]="12.5">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.totalUsers' | translate"
+          value="2,350"
+          icon="heroUsers"
+          iconBgClass="bg-linear-to-br from-blue-500 to-indigo-600 shadow-lg shadow-blue-500/30"
+          iconColor="white"
+          gradientClass="from-blue-50/50 to-indigo-50/50"
+          [trend]="8.2">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.totalOrders' | translate"
+          value="1,247"
+          icon="heroShoppingCart"
+          iconBgClass="bg-linear-to-br from-amber-500 to-orange-600 shadow-lg shadow-amber-500/30"
+          iconColor="white"
+          gradientClass="from-amber-50/50 to-orange-50/50"
+          [trend]="-2.4">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.conversionRate' | translate"
+          value="3.2%"
+          icon="heroChartBar"
+          iconBgClass="bg-linear-to-br from-violet-500 to-purple-600 shadow-lg shadow-violet-500/30"
+          iconColor="white"
+          gradientClass="from-violet-50/50 to-purple-50/50"
+          [trend]="4.1">
+        </app-stats-card>
+      </div>
+
+      <!-- Charts Row -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <!-- Line Chart -->
+        <div class="col-span-2 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+          <app-chart-line
+            [title]="'charts.revenueOverTime' | translate"
+            [data]="revenueData"
+            lineColor="#3b82f6">
+          </app-chart-line>
+        </div>
+
+        <!-- Donut Chart -->
+        <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+          <app-chart-donut
+            [title]="'charts.trafficSources' | translate"
+            [data]="trafficData">
+          </app-chart-donut>
+        </div>
+      </div>
+
+      <!-- Bar Chart & Recent Orders -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <!-- Bar Chart -->
+        <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+          <app-chart-bar
+            [title]="'charts.salesByCategory' | translate"
+            [data]="salesData">
+          </app-chart-bar>
+        </div>
+
+        <!-- Recent Orders Table -->
+        <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+          <h3 class="mb-4 text-lg font-semibold text-gray-900">{{ 'table.orderId' | translate }}</h3>
+          <app-data-table
+            [data]="recentOrders"
+            [columns]="orderColumns"
+            [searchable]="false"
+            [paginate]="false"
+            [pageSize]="5">
+          </app-data-table>
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class OverviewComponent {
+  revenueData: LineChartData[] = [
+    { label: 'Jan', value: 4000 },
+    { label: 'Feb', value: 3000 },
+    { label: 'Mar', value: 5000 },
+    { label: 'Apr', value: 4500 },
+    { label: 'May', value: 6000 },
+    { label: 'Jun', value: 5500 },
+    { label: 'Jul', value: 7000 },
+  ];
+
+  trafficData: DonutChartData[] = [
+    { label: 'Direct', value: 4500, color: '#3b82f6' },
+    { label: 'Organic', value: 3200, color: '#10b981' },
+    { label: 'Referral', value: 2100, color: '#f59e0b' },
+    { label: 'Social', value: 1800, color: '#8b5cf6' },
+  ];
+
+  salesData: BarChartData[] = [
+    { label: 'Electronics', value: 12500, color: '#3b82f6' },
+    { label: 'Clothing', value: 9800, color: '#10b981' },
+    { label: 'Home', value: 7600, color: '#f59e0b' },
+    { label: 'Books', value: 5400, color: '#8b5cf6' },
+    { label: 'Sports', value: 4200, color: '#ec4899' },
+  ];
+
+  orderColumns: TableColumn[] = [
+    { key: 'id', label: 'Order ID', width: '100px' },
+    { key: 'customer', label: 'Customer' },
+    { key: 'amount', label: 'Amount', type: 'number' },
+    { key: 'status', label: 'Status', type: 'status' },
+  ];
+
+  recentOrders = [
+    { id: '#3210', customer: 'John Doe', amount: 125.00, status: 'Completed' },
+    { id: '#3209', customer: 'Jane Smith', amount: 89.50, status: 'Processing' },
+    { id: '#3208', customer: 'Bob Wilson', amount: 234.00, status: 'Pending' },
+    { id: '#3207', customer: 'Alice Brown', amount: 156.75, status: 'Completed' },
+    { id: '#3206', customer: 'Charlie Davis', amount: 67.25, status: 'Cancelled' },
+  ];
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/dashboard/overview/overview.component.ts'),
+    overviewComponent
+  );
+
+  // Analytics Page
+  const analyticsComponent = `import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ChartLineComponent, LineChartData } from '@shared/components/chart-line/chart-line.component';
+import { ChartBarComponent, BarChartData } from '@shared/components/chart-bar/chart-bar.component';
+import { StatsCardComponent } from '@shared/components/stats-card/stats-card.component';
+import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component';
+
+@Component({
+  selector: 'app-analytics',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    ChartLineComponent,
+    ChartBarComponent,
+    StatsCardComponent,
+    BreadcrumbComponent,
+  ],
+  template: \`
+    <div class="space-y-6">
+      <div>
+        <app-breadcrumb [items]="[{ label: ('dashboard.analytics' | translate) }]"></app-breadcrumb>
+        <h1 class="mt-2 text-2xl font-bold text-gray-900">{{ 'dashboard.analytics' | translate }}</h1>
+        <p class="text-gray-500">{{ 'dashboard.welcome' | translate }}</p>
+      </div>
+
+      <!-- Stats -->
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <app-stats-card
+          [label]="'stats.pageViews' | translate"
+          value="124,592"
+          icon="heroEye"
+          iconBgClass="bg-linear-to-br from-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/30"
+          iconColor="white"
+          gradientClass="from-cyan-50/50 to-blue-50/50"
+          [trend]="15.3">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.uniqueVisitors' | translate"
+          value="48,352"
+          icon="heroUserGroup"
+          iconBgClass="bg-linear-to-br from-teal-500 to-emerald-600 shadow-lg shadow-teal-500/30"
+          iconColor="white"
+          gradientClass="from-teal-50/50 to-emerald-50/50"
+          [trend]="8.7">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.avgSession' | translate"
+          value="4m 32s"
+          icon="heroClock"
+          iconBgClass="bg-linear-to-br from-amber-500 to-yellow-600 shadow-lg shadow-amber-500/30"
+          iconColor="white"
+          gradientClass="from-amber-50/50 to-yellow-50/50"
+          [trend]="2.1">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.bounceRate' | translate"
+          value="32.4%"
+          icon="heroArrowPath"
+          iconBgClass="bg-linear-to-br from-rose-500 to-red-600 shadow-lg shadow-rose-500/30"
+          iconColor="white"
+          gradientClass="from-rose-50/50 to-red-50/50"
+          [trend]="-5.2">
+        </app-stats-card>
+      </div>
+
+      <!-- Charts -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+          <app-chart-line
+            [title]="'charts.visitorsOverTime' | translate"
+            [data]="visitorsData"
+            lineColor="#10b981">
+          </app-chart-line>
+        </div>
+        <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+          <app-chart-bar
+            [title]="'charts.topPages' | translate"
+            [data]="pagesData">
+          </app-chart-bar>
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class AnalyticsComponent {
+  visitorsData: LineChartData[] = [
+    { label: 'Mon', value: 1200 },
+    { label: 'Tue', value: 1900 },
+    { label: 'Wed', value: 1500 },
+    { label: 'Thu', value: 2200 },
+    { label: 'Fri', value: 2800 },
+    { label: 'Sat', value: 2100 },
+    { label: 'Sun', value: 1600 },
+  ];
+
+  pagesData: BarChartData[] = [
+    { label: 'Homepage', value: 45000, color: '#3b82f6' },
+    { label: 'Products', value: 32000, color: '#10b981' },
+    { label: 'About', value: 18000, color: '#f59e0b' },
+    { label: 'Contact', value: 12000, color: '#8b5cf6' },
+    { label: 'Blog', value: 9500, color: '#ec4899' },
+  ];
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/dashboard/analytics/analytics.component.ts'),
+    analyticsComponent
+  );
+
+  // Users Page
+  const usersComponent = `import { Component, inject } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { DataTableComponent, TableColumn } from '@shared/components/data-table/data-table.component';
+import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component';
+import { ButtonComponent } from '@shared/components/button/button.component';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroPlus, heroXMark } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-users',
+  standalone: true,
+  imports: [ReactiveFormsModule, TranslateModule, DataTableComponent, BreadcrumbComponent, ButtonComponent, NgIconComponent],
+  viewProviders: [provideIcons({ heroPlus, heroXMark })],
+  template: \`
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <div>
+          <app-breadcrumb [items]="[{ label: ('dashboard.users' | translate) }]"></app-breadcrumb>
+          <h1 class="mt-2 text-2xl font-bold text-gray-900">{{ 'dashboard.users' | translate }}</h1>
+          <p class="text-gray-500">{{ 'dashboard.welcome' | translate }}</p>
+        </div>
+        <app-button (click)="openAddUserModal()">
+          <ng-icon name="heroPlus" size="18" class="me-2"></ng-icon>
+          {{ 'actions.addUser' | translate }}
+        </app-button>
+      </div>
+
+      <app-data-table
+        [data]="users"
+        [columns]="columns"
+        [pageSize]="10">
+      </app-data-table>
+    </div>
+
+    <!-- Add User Modal -->
+    @if (showModal) {
+      <div class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="absolute inset-0 bg-black/50" (click)="closeModal()"></div>
+        <div class="relative w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
+          <div class="mb-6 flex items-center justify-between">
+            <h2 class="text-xl font-semibold text-gray-900">{{ 'actions.addUser' | translate }}</h2>
+            <button type="button" (click)="closeModal()" class="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600">
+              <ng-icon name="heroXMark" size="24"></ng-icon>
+            </button>
+          </div>
+          <form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="space-y-4">
+            <div>
+              <label for="userName" class="block text-sm font-medium text-gray-700">{{ 'settings.fullName' | translate }}</label>
+              <input id="userName" type="text" formControlName="name"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                [class.border-danger-500]="userForm.get('name')?.invalid && userForm.get('name')?.touched" />
+              @if (userForm.get('name')?.invalid && userForm.get('name')?.touched) {
+                <p class="mt-1 text-sm text-danger-600">Name is required (min 2 characters)</p>
+              }
+            </div>
+            <div>
+              <label for="userEmail" class="block text-sm font-medium text-gray-700">{{ 'settings.email' | translate }}</label>
+              <input id="userEmail" type="email" formControlName="email"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                [class.border-danger-500]="userForm.get('email')?.invalid && userForm.get('email')?.touched" />
+              @if (userForm.get('email')?.invalid && userForm.get('email')?.touched) {
+                <p class="mt-1 text-sm text-danger-600">Valid email is required</p>
+              }
+            </div>
+            <div>
+              <label for="userRole" class="block text-sm font-medium text-gray-700">{{ 'table.role' | translate }}</label>
+              <select id="userRole" formControlName="role"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                <option value="">Select a role</option>
+                <option value="Admin">Admin</option>
+                <option value="Editor">Editor</option>
+                <option value="User">User</option>
+              </select>
+              @if (userForm.get('role')?.invalid && userForm.get('role')?.touched) {
+                <p class="mt-1 text-sm text-danger-600">Role is required</p>
+              }
+            </div>
+            <div>
+              <label for="userStatus" class="block text-sm font-medium text-gray-700">{{ 'table.status' | translate }}</label>
+              <select id="userStatus" formControlName="status"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+                <option value="Active">Active</option>
+                <option value="Inactive">Inactive</option>
+                <option value="Pending">Pending</option>
+              </select>
+            </div>
+            <div class="mt-6 flex justify-end gap-3">
+              <app-button type="button" variant="secondary" (click)="closeModal()">{{ 'actions.cancel' | translate }}</app-button>
+              <app-button type="submit" [disabled]="userForm.invalid">{{ 'actions.addUser' | translate }}</app-button>
+            </div>
+          </form>
+        </div>
+      </div>
+    }
+  \`,
+})
+export class UsersComponent {
+  private fb = inject(FormBuilder);
+  showModal = false;
+
+  userForm = this.fb.group({
+    name: ['', [Validators.required, Validators.minLength(2)]],
+    email: ['', [Validators.required, Validators.email]],
+    role: ['', Validators.required],
+    status: ['Active'],
+  });
+  columns: TableColumn[] = [
+    { key: 'id', label: 'ID', width: '80px', sortable: true },
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'email', label: 'Email', sortable: true },
+    { key: 'role', label: 'Role', sortable: true },
+    { key: 'status', label: 'Status', type: 'status' },
+    { key: 'createdAt', label: 'Joined', type: 'date', sortable: true },
+  ];
+
+  users = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active', createdAt: '2024-01-15' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Editor', status: 'Active', createdAt: '2024-02-20' },
+    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', role: 'User', status: 'Inactive', createdAt: '2024-03-10' },
+    { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'User', status: 'Active', createdAt: '2024-03-15' },
+    { id: 5, name: 'Charlie Davis', email: 'charlie@example.com', role: 'Editor', status: 'Active', createdAt: '2024-04-01' },
+    { id: 6, name: 'Diana Miller', email: 'diana@example.com', role: 'User', status: 'Pending', createdAt: '2024-04-10' },
+    { id: 7, name: 'Edward Jones', email: 'edward@example.com', role: 'Admin', status: 'Active', createdAt: '2024-04-15' },
+    { id: 8, name: 'Fiona Garcia', email: 'fiona@example.com', role: 'User', status: 'Active', createdAt: '2024-05-01' },
+    { id: 9, name: 'George Martinez', email: 'george@example.com', role: 'User', status: 'Inactive', createdAt: '2024-05-10' },
+    { id: 10, name: 'Helen Anderson', email: 'helen@example.com', role: 'Editor', status: 'Active', createdAt: '2024-05-15' },
+    { id: 11, name: 'Ivan Taylor', email: 'ivan@example.com', role: 'User', status: 'Active', createdAt: '2024-06-01' },
+    { id: 12, name: 'Julia Thomas', email: 'julia@example.com', role: 'User', status: 'Pending', createdAt: '2024-06-10' },
+  ];
+
+  openAddUserModal(): void {
+    this.userForm.reset({ status: 'Active' });
+    this.showModal = true;
+  }
+
+  closeModal(): void {
+    this.showModal = false;
+  }
+
+  onSubmit(): void {
+    if (this.userForm.valid) {
+      const newUser = {
+        id: this.users.length + 1,
+        ...this.userForm.value,
+        createdAt: new Date().toISOString().split('T')[0],
+      };
+      this.users = [newUser as typeof this.users[0], ...this.users];
+      this.closeModal();
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/dashboard/users/users.component.ts'),
+    usersComponent
+  );
+
+  // Orders Page
+  const ordersComponent = `import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { DataTableComponent, TableColumn } from '@shared/components/data-table/data-table.component';
+import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component';
+import { StatsCardComponent } from '@shared/components/stats-card/stats-card.component';
+
+@Component({
+  selector: 'app-orders',
+  standalone: true,
+  imports: [TranslateModule, DataTableComponent, BreadcrumbComponent, StatsCardComponent],
+  template: \`
+    <div class="space-y-6">
+      <div>
+        <app-breadcrumb [items]="[{ label: ('dashboard.orders' | translate) }]"></app-breadcrumb>
+        <h1 class="mt-2 text-2xl font-bold text-gray-900">{{ 'dashboard.orders' | translate }}</h1>
+        <p class="text-gray-500">{{ 'dashboard.welcome' | translate }}</p>
+      </div>
+
+      <!-- Order Stats -->
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <app-stats-card
+          [label]="'stats.totalOrders' | translate"
+          value="1,247"
+          icon="heroShoppingCart"
+          iconBgClass="bg-linear-to-br from-indigo-500 to-blue-600 shadow-lg shadow-indigo-500/30"
+          iconColor="white"
+          gradientClass="from-indigo-50/50 to-blue-50/50">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.pending' | translate"
+          value="23"
+          icon="heroClock"
+          iconBgClass="bg-linear-to-br from-amber-500 to-orange-600 shadow-lg shadow-amber-500/30"
+          iconColor="white"
+          gradientClass="from-amber-50/50 to-orange-50/50">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.completed' | translate"
+          value="1,180"
+          icon="heroCheck"
+          iconBgClass="bg-linear-to-br from-emerald-500 to-green-600 shadow-lg shadow-emerald-500/30"
+          iconColor="white"
+          gradientClass="from-emerald-50/50 to-green-50/50">
+        </app-stats-card>
+        <app-stats-card
+          [label]="'stats.cancelled' | translate"
+          value="44"
+          icon="heroXMark"
+          iconBgClass="bg-linear-to-br from-rose-500 to-red-600 shadow-lg shadow-rose-500/30"
+          iconColor="white"
+          gradientClass="from-rose-50/50 to-red-50/50">
+        </app-stats-card>
+      </div>
+
+      <app-data-table
+        [data]="orders"
+        [columns]="columns"
+        [pageSize]="10">
+      </app-data-table>
+    </div>
+  \`,
+})
+export class OrdersComponent {
+  columns: TableColumn[] = [
+    { key: 'id', label: 'Order ID', width: '100px', sortable: true },
+    { key: 'customer', label: 'Customer', sortable: true },
+    { key: 'items', label: 'Items', type: 'number' },
+    { key: 'total', label: 'Total', sortable: true },
+    { key: 'status', label: 'Status', type: 'status' },
+    { key: 'date', label: 'Date', type: 'date', sortable: true },
+  ];
+
+  orders = [
+    { id: '#3210', customer: 'John Doe', items: 3, total: '$125.00', status: 'Completed', date: '2024-06-15' },
+    { id: '#3209', customer: 'Jane Smith', items: 2, total: '$89.50', status: 'Processing', date: '2024-06-15' },
+    { id: '#3208', customer: 'Bob Wilson', items: 5, total: '$234.00', status: 'Pending', date: '2024-06-14' },
+    { id: '#3207', customer: 'Alice Brown', items: 1, total: '$156.75', status: 'Completed', date: '2024-06-14' },
+    { id: '#3206', customer: 'Charlie Davis', items: 4, total: '$67.25', status: 'Cancelled', date: '2024-06-13' },
+    { id: '#3205', customer: 'Diana Miller', items: 2, total: '$198.00', status: 'Completed', date: '2024-06-13' },
+    { id: '#3204', customer: 'Edward Jones', items: 3, total: '$145.50', status: 'Processing', date: '2024-06-12' },
+    { id: '#3203', customer: 'Fiona Garcia', items: 1, total: '$78.00', status: 'Completed', date: '2024-06-12' },
+    { id: '#3202', customer: 'George Martinez', items: 6, total: '$312.00', status: 'Pending', date: '2024-06-11' },
+    { id: '#3201', customer: 'Helen Anderson', items: 2, total: '$95.25', status: 'Completed', date: '2024-06-11' },
+  ];
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/dashboard/orders/orders.component.ts'),
+    ordersComponent
+  );
+
+  // Settings Page
+  const settingsComponent = `import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component';
+import { ButtonComponent } from '@shared/components/button/button.component';
+import { CardComponent } from '@shared/components/card/card.component';
+import { TranslationService } from '@core/i18n/translation.service';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [FormsModule, TranslateModule, BreadcrumbComponent, ButtonComponent, CardComponent],
+  template: \`
+    <div class="space-y-6">
+      <div>
+        <app-breadcrumb [items]="[{ label: ('dashboard.settings' | translate) }]"></app-breadcrumb>
+        <h1 class="mt-2 text-2xl font-bold text-gray-900">{{ 'dashboard.settings' | translate }}</h1>
+        <p class="text-gray-500">{{ 'dashboard.welcome' | translate }}</p>
+      </div>
+
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <!-- Profile Settings -->
+        <app-card [title]="'settings.profile' | translate">
+          <div class="space-y-4">
+            <div>
+              <label for="fullName" class="block text-sm font-medium text-gray-700">{{ 'settings.fullName' | translate }}</label>
+              <input
+                id="fullName"
+                type="text"
+                [(ngModel)]="profile.name"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              />
+            </div>
+            <div>
+              <label for="email" class="block text-sm font-medium text-gray-700">{{ 'settings.email' | translate }}</label>
+              <input
+                id="email"
+                type="email"
+                [(ngModel)]="profile.email"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              />
+            </div>
+            <div>
+              <label for="bio" class="block text-sm font-medium text-gray-700">{{ 'settings.bio' | translate }}</label>
+              <textarea
+                id="bio"
+                [(ngModel)]="profile.bio"
+                rows="3"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+              </textarea>
+            </div>
+            <app-button>{{ 'actions.save' | translate }}</app-button>
+          </div>
+        </app-card>
+
+        <!-- Notification Settings -->
+        <app-card [title]="'settings.notifications' | translate">
+          <div class="space-y-4">
+            @for (item of notifications; track item.key) {
+              <div class="flex items-center justify-between">
+                <div>
+                  <p class="font-medium text-gray-900">{{ item.labelKey | translate }}</p>
+                  <p class="text-sm text-gray-500">{{ item.descriptionKey | translate }}</p>
+                </div>
+                <button
+                  type="button"
+                  (click)="item.enabled = !item.enabled"
+                  [attr.aria-pressed]="item.enabled"
+                  class="relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-300"
+                  [class]="item.enabled ? 'bg-primary-600' : 'bg-gray-200'">
+                  <span
+                    class="inline-block h-5 w-5 transform rounded-full bg-white border border-gray-300 transition-transform"
+                    [class]="item.enabled ? 'translate-x-5' : 'translate-x-0.5'">
+                  </span>
+                </button>
+              </div>
+            }
+          </div>
+        </app-card>
+
+        <!-- Security Settings -->
+        <app-card [title]="'settings.security' | translate">
+          <div class="space-y-4">
+            <div>
+              <label for="currentPassword" class="block text-sm font-medium text-gray-700">{{ 'settings.currentPassword' | translate }}</label>
+              <input
+                id="currentPassword"
+                type="password"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              />
+            </div>
+            <div>
+              <label for="newPassword" class="block text-sm font-medium text-gray-700">{{ 'settings.newPassword' | translate }}</label>
+              <input
+                id="newPassword"
+                type="password"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              />
+            </div>
+            <div>
+              <label for="confirmPassword" class="block text-sm font-medium text-gray-700">{{ 'settings.confirmPassword' | translate }}</label>
+              <input
+                id="confirmPassword"
+                type="password"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+              />
+            </div>
+            <app-button>{{ 'settings.updatePassword' | translate }}</app-button>
+          </div>
+        </app-card>
+
+        <!-- Danger Zone -->
+        <app-card [title]="'settings.dangerZone' | translate">
+          <div class="space-y-4">
+            <p class="text-sm text-gray-500">
+              {{ 'settings.deleteWarning' | translate }}
+            </p>
+            <app-button variant="danger">{{ 'settings.deleteAccount' | translate }}</app-button>
+          </div>
+        </app-card>
+      </div>
+    </div>
+  \`,
+})
+export class SettingsComponent {
+  private translationService = inject(TranslationService);
+
+  profile = {
+    name: 'Admin User',
+    email: 'admin@example.com',
+    bio: 'Dashboard administrator',
+  };
+
+  notifications = [
+    { key: 'email', labelKey: 'settings.emailNotifications', descriptionKey: 'settings.emailNotifications', enabled: true },
+    { key: 'push', labelKey: 'settings.pushNotifications', descriptionKey: 'settings.pushNotifications', enabled: false },
+    { key: 'weekly', labelKey: 'settings.weeklyReport', descriptionKey: 'settings.weeklyReport', enabled: true },
+    { key: 'marketing', labelKey: 'settings.marketing', descriptionKey: 'settings.marketing', enabled: false },
+  ];
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/dashboard/settings/settings.component.ts'),
+    settingsComponent
+  );
+}
+
+module.exports = { createPages };