create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/dashboard/i18n.js

@@ -0,0 +1,340 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create i18n (translations) for dashboard
+ */
+async function createI18n(config) {
+  // Create Translation Service
+  const translationService = `import { Injectable, inject, signal, effect, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+import { StorageService } from '@core/services/storage.service';
+
+export type SupportedLanguage = 'en' | 'ar';
+
+export interface LanguageOption {
+  code: SupportedLanguage;
+  name: string;
+  nativeName: string;
+  dir: 'ltr' | 'rtl';
+  flag: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslationService {
+  private translateService = inject(TranslateService);
+  private storage = inject(StorageService);
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+
+  // Reactive current language
+  public currentLang = signal<SupportedLanguage>('en');
+
+  // Reactive text direction
+  public textDirection = signal<'ltr' | 'rtl'>('ltr');
+
+  // Available languages
+  public readonly languages: LanguageOption[] = [
+    {
+      code: 'en',
+      name: 'English',
+      nativeName: 'English',
+      dir: 'ltr',
+      flag: '🇺🇸'
+    },
+    {
+      code: 'ar',
+      name: 'Arabic',
+      nativeName: 'العربية',
+      dir: 'rtl',
+      flag: '🇸🇦'
+    }
+  ];
+
+  constructor() {
+    // Initialize translation service
+    this.translateService.setDefaultLang('en');
+
+    // Load saved language or detect browser language
+    const savedLang = this.getSavedLanguage();
+    const browserLang = this.translateService.getBrowserLang() as SupportedLanguage;
+    const initialLang = savedLang || (this.isSupportedLanguage(browserLang) ? browserLang : 'en');
+
+    this.setLanguage(initialLang);
+
+    // Effect to update document direction when language changes (browser only)
+    if (this.isBrowser) {
+      effect(() => {
+        const dir = this.textDirection();
+        document.documentElement.setAttribute('dir', dir);
+        document.documentElement.setAttribute('lang', this.currentLang());
+      });
+    }
+  }
+
+  /**
+   * Change the current language
+   */
+  setLanguage(lang: SupportedLanguage): void {
+    if (!this.isSupportedLanguage(lang)) {
+      console.warn(\`Language '\${lang}' is not supported. Falling back to 'en'.\`);
+      lang = 'en';
+    }
+
+    this.translateService.use(lang);
+    this.currentLang.set(lang);
+
+    const languageOption = this.languages.find(l => l.code === lang);
+    if (languageOption) {
+      this.textDirection.set(languageOption.dir);
+    }
+
+    this.saveLanguage(lang);
+  }
+
+  /**
+   * Get current language
+   */
+  getCurrentLanguage(): SupportedLanguage {
+    return this.currentLang();
+  }
+
+  /**
+   * Get language option by code
+   */
+  getLanguageOption(code: SupportedLanguage): LanguageOption | undefined {
+    return this.languages.find(lang => lang.code === code);
+  }
+
+  /**
+   * Check if language is supported
+   */
+  isSupportedLanguage(lang: string): lang is SupportedLanguage {
+    return ['en', 'ar'].includes(lang);
+  }
+
+  /**
+   * Toggle between English and Arabic
+   */
+  toggleLanguage(): void {
+    const newLang: SupportedLanguage = this.currentLang() === 'en' ? 'ar' : 'en';
+    this.setLanguage(newLang);
+  }
+
+  /**
+   * Get instant translation
+   */
+  instant(key: string, params?: object): string {
+    return this.translateService.instant(key, params);
+  }
+
+  /**
+   * Get translation as observable
+   */
+  get(key: string | string[], params?: object) {
+    return this.translateService.get(key, params);
+  }
+
+  /**
+   * Save language preference to storage
+   */
+  private saveLanguage(lang: SupportedLanguage): void {
+    this.storage.setItem('preferred_language', lang);
+  }
+
+  /**
+   * Get saved language from storage
+   */
+  private getSavedLanguage(): SupportedLanguage | null {
+    const saved = this.storage.getItem('preferred_language');
+    return saved && this.isSupportedLanguage(saved) ? saved : null;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/i18n/translation.service.ts"),
+    translationService
+  );
+
+  // Create English translations
+  const enTranslations = {
+    dashboard: {
+      title: "Dashboard",
+      overview: "Overview",
+      analytics: "Analytics",
+      users: "Users",
+      orders: "Orders",
+      settings: "Settings",
+      welcome: "Welcome back! Here's what's happening today.",
+      logout: "Logout",
+    },
+    stats: {
+      totalRevenue: "Total Revenue",
+      totalUsers: "Total Users",
+      totalOrders: "Total Orders",
+      conversionRate: "Conversion Rate",
+      pageViews: "Page Views",
+      uniqueVisitors: "Unique Visitors",
+      avgSession: "Avg. Session",
+      bounceRate: "Bounce Rate",
+      pending: "Pending",
+      completed: "Completed",
+      cancelled: "Cancelled",
+    },
+    charts: {
+      revenueOverTime: "Revenue Over Time",
+      trafficSources: "Traffic Sources",
+      salesByCategory: "Sales by Category",
+      visitorsOverTime: "Visitors Over Time",
+      topPages: "Top Pages",
+    },
+    table: {
+      search: "Search...",
+      noData: "No data available",
+      showing: "Showing",
+      to: "to",
+      of: "of",
+      results: "results",
+      orderId: "Order ID",
+      customer: "Customer",
+      items: "Items",
+      total: "Total",
+      status: "Status",
+      date: "Date",
+      name: "Name",
+      email: "Email",
+      role: "Role",
+      joined: "Joined",
+    },
+    actions: {
+      addUser: "Add User",
+      save: "Save Changes",
+      cancel: "Cancel",
+      delete: "Delete",
+      edit: "Edit",
+    },
+    settings: {
+      profile: "Profile Settings",
+      notifications: "Notifications",
+      security: "Security",
+      dangerZone: "Danger Zone",
+      fullName: "Full Name",
+      email: "Email",
+      bio: "Bio",
+      currentPassword: "Current Password",
+      newPassword: "New Password",
+      confirmPassword: "Confirm Password",
+      updatePassword: "Update Password",
+      deleteAccount: "Delete Account",
+      deleteWarning:
+        "Once you delete your account, there is no going back. Please be certain.",
+      emailNotifications: "Email Notifications",
+      pushNotifications: "Push Notifications",
+      weeklyReport: "Weekly Report",
+      marketing: "Marketing",
+    },
+    language: {
+      select: "Select Language",
+      english: "English",
+      arabic: "Arabic",
+    },
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, "public/assets/i18n/en.json"),
+    JSON.stringify(enTranslations, null, 2)
+  );
+
+  // Create Arabic translations
+  const arTranslations = {
+    dashboard: {
+      title: "لوحة التحكم",
+      overview: "نظرة عامة",
+      analytics: "التحليلات",
+      users: "المستخدمين",
+      orders: "الطلبات",
+      settings: "الإعدادات",
+      welcome: "مرحبًا بعودتك! إليك ما يحدث اليوم.",
+      logout: "تسجيل الخروج",
+    },
+    stats: {
+      totalRevenue: "إجمالي الإيرادات",
+      totalUsers: "إجمالي المستخدمين",
+      totalOrders: "إجمالي الطلبات",
+      conversionRate: "معدل التحويل",
+      pageViews: "مشاهدات الصفحة",
+      uniqueVisitors: "الزوار الفريدين",
+      avgSession: "متوسط الجلسة",
+      bounceRate: "معدل الارتداد",
+      pending: "قيد الانتظار",
+      completed: "مكتمل",
+      cancelled: "ملغى",
+    },
+    charts: {
+      revenueOverTime: "الإيرادات عبر الوقت",
+      trafficSources: "مصادر الزيارات",
+      salesByCategory: "المبيعات حسب الفئة",
+      visitorsOverTime: "الزوار عبر الوقت",
+      topPages: "أهم الصفحات",
+    },
+    table: {
+      search: "بحث...",
+      noData: "لا توجد بيانات",
+      showing: "عرض",
+      to: "إلى",
+      of: "من",
+      results: "نتائج",
+      orderId: "رقم الطلب",
+      customer: "العميل",
+      items: "العناصر",
+      total: "المجموع",
+      status: "الحالة",
+      date: "التاريخ",
+      name: "الاسم",
+      email: "البريد الإلكتروني",
+      role: "الدور",
+      joined: "تاريخ الانضمام",
+    },
+    actions: {
+      addUser: "إضافة مستخدم",
+      save: "حفظ التغييرات",
+      cancel: "إلغاء",
+      delete: "حذف",
+      edit: "تعديل",
+    },
+    settings: {
+      profile: "إعدادات الملف الشخصي",
+      notifications: "الإشعارات",
+      security: "الأمان",
+      dangerZone: "منطقة الخطر",
+      fullName: "الاسم الكامل",
+      email: "البريد الإلكتروني",
+      bio: "نبذة",
+      currentPassword: "كلمة المرور الحالية",
+      newPassword: "كلمة المرور الجديدة",
+      confirmPassword: "تأكيد كلمة المرور",
+      updatePassword: "تحديث كلمة المرور",
+      deleteAccount: "حذف الحساب",
+      deleteWarning: "بمجرد حذف حسابك، لا يمكن التراجع. يرجى التأكد.",
+      emailNotifications: "إشعارات البريد",
+      pushNotifications: "الإشعارات الفورية",
+      weeklyReport: "التقرير الأسبوعي",
+      marketing: "التسويق",
+    },
+    language: {
+      select: "اختر اللغة",
+      english: "الإنجليزية",
+      arabic: "العربية",
+    },
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, "public/assets/i18n/ar.json"),
+    JSON.stringify(arTranslations, null, 2)
+  );
+}
+
+module.exports = { createI18n };

package/lib/templates/dashboard/index.js

@@ -0,0 +1,141 @@
+const fs = require("fs-extra");
+const path = require("path");
+const base = require("../base");
+
+// Import modular components
+const { createComponents } = require("./components");
+const { createCharts } = require("./charts");
+const { createLayout } = require("./layout");
+const { createPages } = require("./pages");
+const { createI18n } = require("./i18n");
+const {
+  createRouting,
+  createAppConfig,
+  createAppComponent,
+  createStyles,
+  installI18nPackages,
+} = require("./app");
+
+/**
+ * Dashboard Template
+ * Extends base template with admin dashboard UI:
+ * - Sidebar navigation
+ * - Stats cards
+ * - Charts (bar, line, donut)
+ * - Data tables with sorting/pagination
+ * - Multiple dashboard pages
+ */
+const dashboard = {
+  info: {
+    name: "Dashboard",
+    description: "Admin dashboard with sidebar, charts, tables, and analytics",
+    features: [
+      ...base.info.features,
+      "Collapsible sidebar navigation",
+      "Dashboard layout with header and sidebar",
+      "Stats cards with icons and trends",
+      "Chart components (Bar, Line, Donut)",
+      "Data table with sorting and pagination",
+      "Dashboard pages (Overview, Analytics, Users, Orders, Settings)",
+      "i18n translation support (English & Arabic) with RTL",
+      "Language switcher in header",
+      "Dark mode support",
+      "Responsive mobile-first design",
+      "Breadcrumb navigation",
+      "User profile dropdown",
+    ],
+  },
+
+  async apply(config, spinner) {
+    this.spinner = spinner;
+    const chalk = require("chalk");
+
+    const completeStep = (message) => {
+      if (spinner) {
+        spinner.stop();
+        console.log(chalk.green("  ✔") + chalk.white(" " + message));
+        spinner.start();
+      }
+    };
+
+    // Step 1: Apply base template (infrastructure)
+    if (spinner) spinner.update("Setting up base infrastructure...");
+    await base.apply(config, null);
+
+    // Step 2: Create dashboard-specific directories
+    if (spinner) spinner.update("Setting up dashboard UI...");
+    await this.createDashboardDirectories(config);
+
+    // Step 3: Create dashboard components (StatsCard, Breadcrumb, DataTable)
+    await createComponents(config);
+
+    // Step 4: Create chart components (Bar, Line, Donut)
+    await createCharts(config);
+
+    // Step 5: Create layout (sidebar + header)
+    await createLayout(config);
+
+    // Step 6: Create dashboard pages
+    await createPages(config);
+
+    // Step 7: Create i18n (translations)
+    await createI18n(config);
+
+    // Step 8: Create routing, app config, app component, styles
+    await createRouting(config);
+    await createAppConfig(config);
+    await createAppComponent(config);
+    await createStyles(config);
+
+    // Step 9: Install ngx-translate packages
+    await installI18nPackages(config);
+
+    // Step 10: Format code
+    await base.formatCode(config);
+
+    if (spinner) spinner.stop();
+
+    // Show summary
+    console.log("");
+    completeStep("Angular 20+ project created");
+    completeStep("Tailwind CSS v4 configured");
+    completeStep("Dashboard layout with sidebar");
+    completeStep("Chart components (Bar, Line, Donut)");
+    completeStep("Data table with sorting/pagination");
+    completeStep("Stats cards with trends");
+    completeStep("5 dashboard pages");
+    completeStep("i18n translation support (English & Arabic)");
+    completeStep("RTL/LTR language direction support");
+    completeStep("HTTP interceptors (Auth, Error, Loading, Cache)");
+    completeStep("Core services (9 services)");
+    completeStep("ESLint + Prettier + simple-git-hooks");
+    console.log("");
+  },
+
+  async createDashboardDirectories(config) {
+    const directories = [
+      "src/app/layout/sidebar",
+      "src/app/layout/dashboard-header",
+      "src/app/layout/dashboard",
+      "src/app/shared/components/stats-card",
+      "src/app/shared/components/chart-bar",
+      "src/app/shared/components/chart-line",
+      "src/app/shared/components/chart-donut",
+      "src/app/shared/components/data-table",
+      "src/app/shared/components/breadcrumb",
+      "src/app/features/dashboard/overview",
+      "src/app/features/dashboard/analytics",
+      "src/app/features/dashboard/users",
+      "src/app/features/dashboard/orders",
+      "src/app/features/dashboard/settings",
+      "src/app/core/i18n",
+      "public/assets/i18n",
+    ];
+
+    for (const dir of directories) {
+      await fs.ensureDir(path.join(config.fullPath, dir));
+    }
+  },
+};
+
+module.exports = dashboard;