create-app-ui 1.0.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "create-app-ui",
+  "version": "1.0.0",
+  "description": "Scaffold enterprise React admin apps (Vite, TypeScript, shadcn-style UI) from the Omobio UI platform",
+  "type": "module",
+  "license": "MIT",
+  "author": "Omobio",
+  "keywords": [
+    "react",
+    "vite",
+    "typescript",
+    "boilerplate",
+    "cli",
+    "generator",
+    "admin",
+    "shadcn"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/malikmanujaya/omobio-common-gui.git",
+    "directory": "ui-platform/create-app-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/malikmanujaya/omobio-common-gui/issues"
+  },
+  "homepage": "https://github.com/malikmanujaya/omobio-common-gui/tree/main/ui-platform/create-app-ui#readme",
+  "bin": {
+    "create-app-ui": "./dist/bin/index.js"
+  },
+  "files": [
+    "dist",
+    "boilerplate",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepare-publish": "node scripts/prepare-publish.mjs",
+    "prepublishOnly": "npm run build && npm run prepare-publish",
+    "prepack": "npm run build && npm run prepare-publish",
+    "pack:check": "npm run prepack && npm pack --dry-run",
+    "dev:watch": "tsx watch bin/index.ts",
+    "start": "tsx bin/index.ts"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "execa": "^9.3.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.10.1",
+    "@types/prompts": "^2.4.9",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2"
+  }
+}

package/templates/admin-portal/README.md

@@ -0,0 +1,26 @@
+# admin-portal template (overlay)
+
+Applied **on top of** `boilerplate/react-base` when you choose **admin-portal** in the CLI.
+
+This folder must **not** contain a full app: no `package.json`, `vite.config.ts`, `node_modules`, or `src/components/ui/*` (those live in the boilerplate).
+
+## What belongs here (intentional)
+
+| Path | Purpose |
+|------|---------|
+| `src/components/*` | **App shell** only (layout, sidebar, header, auth layout, data-table wrapper) — not the shared UI kit |
+| `src/lib/breadcrumbs.ts` | Admin route labels for breadcrumbs |
+| `src/assets/*` | Template images (`brand-logo`, `auth-hero`) |
+| `src/pages/*` | Admin screens |
+| `src/config/*` | `navigation`, `branding`, `chart-data` |
+| `src/context/auth-context.tsx` | Admin auth state |
+| `App.tsx`, `main.tsx` | Entry and routes |
+
+## Do not add here
+
+- `components/ui/*`, `config/theme.ts`, `lib/utils.ts`, hooks, axios, store — edit `boilerplate/react-base` instead.
+
+## Local dev / IDE
+
+- `tsconfig.json` in this folder is **IDE-only** (resolves `@/*` against boilerplate + overlay). The CLI does not copy it into generated apps.
+- Run from a **generated** app or merge boilerplate + this overlay; do not run `npm run dev` inside `templates/admin-portal` alone.

package/templates/admin-portal/src/App.tsx

@@ -0,0 +1,85 @@
+import { Navigate, Route, Routes } from "react-router-dom";
+import { LayoutShell } from "@/components/layout-shell";
+import { AuthProvider, useAuth } from "@/context/auth-context";
+import { ThemeProvider } from "@/context/theme-provider";
+import { ComponentsPage } from "@/pages/components";
+import { DashboardPage } from "@/pages/dashboard";
+import { LoginPage } from "@/pages/login";
+import { SettingsNotificationsPage } from "@/pages/settings/notifications";
+import { SettingsProfilePage } from "@/pages/settings/profile";
+import { SignupPage } from "@/pages/signup";
+import { UsersPage } from "@/pages/users";
+
+function ProtectedLayout({ children }: { children: JSX.Element }) {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <LayoutShell>{children}</LayoutShell>;
+}
+
+function AppRoutes() {
+  const { isAuthenticated, login } = useAuth();
+
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage isAuthenticated={isAuthenticated} onLogin={login} />} />
+      <Route path="/signup" element={<SignupPage isAuthenticated={isAuthenticated} onSignup={login} />} />
+      <Route
+        path="/components"
+        element={
+          <ProtectedLayout>
+            <ComponentsPage />
+          </ProtectedLayout>
+        }
+      />
+      <Route
+        path="/dashboard"
+        element={
+          <ProtectedLayout>
+            <DashboardPage />
+          </ProtectedLayout>
+        }
+      />
+      <Route
+        path="/users"
+        element={
+          <ProtectedLayout>
+            <UsersPage />
+          </ProtectedLayout>
+        }
+      />
+      <Route path="/settings" element={<Navigate to="/settings/profile" replace />} />
+      <Route
+        path="/settings/profile"
+        element={
+          <ProtectedLayout>
+            <SettingsProfilePage />
+          </ProtectedLayout>
+        }
+      />
+      <Route
+        path="/settings/notifications"
+        element={
+          <ProtectedLayout>
+            <SettingsNotificationsPage />
+          </ProtectedLayout>
+        }
+      />
+      <Route path="/" element={<Navigate to={isAuthenticated ? "/components" : "/login"} replace />} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <AuthProvider>
+        <AppRoutes />
+      </AuthProvider>
+    </ThemeProvider>
+  );
+}

package/templates/admin-portal/src/components/app-breadcrumb.tsx

@@ -0,0 +1,41 @@
+import { Fragment } from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { getBreadcrumbs } from "@/lib/breadcrumbs";
+
+export function AppBreadcrumb() {
+  const { pathname } = useLocation();
+  const segments = getBreadcrumbs(pathname);
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {segments.map((segment, index) => {
+          const isLast = index === segments.length - 1;
+
+          return (
+            <Fragment key={`${segment.label}-${index}`}>
+              {index > 0 && <BreadcrumbSeparator />}
+              <BreadcrumbItem>
+                {isLast || !segment.to ? (
+                  <BreadcrumbPage>{segment.label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink asChild>
+                    <Link to={segment.to}>{segment.label}</Link>
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

package/templates/admin-portal/src/components/app-header.tsx

@@ -0,0 +1,20 @@
+import { NotificationsSheet } from "@/components/notifications-sheet";
+import { UserMenu } from "@/components/user-menu";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { CURRENT_USER } from "@/config/user";
+
+export function AppHeader() {
+  return (
+    <header className="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b bg-background/80 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-6">
+      <SidebarTrigger />
+      <div className="flex min-w-0 flex-1 flex-col justify-center">
+        <p className="truncate text-sm font-medium">Welcome back</p>
+        <p className="truncate text-xs text-muted-foreground">{CURRENT_USER.name}</p>
+      </div>
+      <div className="flex items-center gap-2">
+        <NotificationsSheet />
+        <UserMenu variant="header" />
+      </div>
+    </header>
+  );
+}

package/templates/admin-portal/src/components/app-sidebar.tsx

@@ -0,0 +1,78 @@
+import { ChevronsUpDown } from "lucide-react";
+import { UserMenu } from "@/components/user-menu";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarRail,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { SidebarNavMenu } from "@/components/sidebar-nav";
+import { BRANDING } from "@/config/branding";
+import { overviewNav, workspaceNav } from "@/config/navigation";
+
+function SidebarBrand() {
+  const { state } = useSidebar();
+
+  return (
+    <div className="flex items-center gap-3 px-1 py-1">
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border bg-background shadow-sm">
+        <img src={BRANDING.logoPath} alt="" className="h-6 w-6 object-contain" />
+      </div>
+      <div className="grid flex-1 text-left leading-tight group-data-[collapsible=icon]:hidden">
+        <span className="truncate text-sm font-semibold">{BRANDING.productName}</span>
+        <span className="truncate text-xs text-muted-foreground">{BRANDING.companyName}</span>
+      </div>
+      {state === "expanded" && (
+        <ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden" />
+      )}
+    </div>
+  );
+}
+
+export function AppSidebar({ onNavigate }: { onNavigate?: () => void }) {
+  const { setOpenMobile, isMobile } = useSidebar();
+
+  const handleNavigate = () => {
+    onNavigate?.();
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+  };
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarBrand />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Overview</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarNavMenu items={overviewNav} onNavigate={handleNavigate} />
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarNavMenu items={workspaceNav} onNavigate={handleNavigate} />
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <UserMenu variant="sidebar" />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/templates/admin-portal/src/components/auth-layout.tsx

@@ -0,0 +1,66 @@
+import { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { BRANDING } from "@/config/branding";
+import { THEME } from "@/config/theme";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+type AuthLayoutProps = {
+  title: string;
+  subtitle: string;
+  alternateLabel: string;
+  alternateHref: string;
+  alternateCta: string;
+  children: ReactNode;
+};
+
+export function AuthLayout({
+  title,
+  subtitle,
+  alternateLabel,
+  alternateHref,
+  alternateCta,
+  children,
+}: AuthLayoutProps) {
+  return (
+    <main className={cn("grid h-dvh max-h-dvh overflow-hidden lg:grid-cols-2", THEME.classes.authPage)}>
+      <section className="flex min-h-0 items-center justify-center overflow-y-auto p-4 sm:p-6 lg:p-8">
+        <div className="w-full max-w-md space-y-4 py-2">
+          <img
+            alt={`${BRANDING.projectName} logo`}
+            className="h-16 w-auto sm:h-20"
+            src={BRANDING.logoPath}
+          />
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">{title}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+          </div>
+          {children}
+          <Separator />
+          <p className="text-sm text-muted-foreground">
+            {alternateLabel}{" "}
+            <Link className="font-medium text-primary hover:underline" to={alternateHref}>
+              {alternateCta}
+            </Link>
+          </p>
+        </div>
+      </section>
+
+      <section className="hidden min-h-0 p-3 lg:block lg:p-4">
+        <div className={cn("relative h-full min-h-0 overflow-hidden rounded-3xl", THEME.classes.authHero)}>
+          <img
+            alt={`${BRANDING.projectName} hero`}
+            className="h-full w-full object-cover"
+            src={BRANDING.heroImagePath}
+          />
+          <div
+            className={cn(
+              "pointer-events-none absolute inset-0 bg-gradient-to-t to-transparent",
+              THEME.classes.authHeroOverlay,
+            )}
+          />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/admin-portal/src/components/dashboard-metric-card.tsx

@@ -0,0 +1,105 @@
+import { DollarSign, Percent, Users, type LucideIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Sparkline } from "@/components/ui/sparkline";
+import { THEME } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+export type DashboardMetric = {
+  label: string;
+  value: string;
+  change: string;
+  trend: { value: number }[];
+  icon: LucideIcon;
+  iconClassName?: string;
+  sparklineColor?: string;
+};
+
+type DashboardMetricCardProps = {
+  metric: DashboardMetric;
+};
+
+export function DashboardMetricCard({ metric }: DashboardMetricCardProps) {
+  const Icon = metric.icon;
+
+  return (
+    <Card>
+      <CardContent className="p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 space-y-2">
+            <p className="text-sm font-medium text-muted-foreground">{metric.label}</p>
+            <p className="text-2xl font-bold tracking-tight">{metric.value}</p>
+            <Badge variant="secondary" className="font-normal">
+              {metric.change} vs last month
+            </Badge>
+          </div>
+          <div className="flex shrink-0 flex-col items-end gap-3">
+            <div
+              className={cn(
+                "flex h-11 w-11 items-center justify-center rounded-xl border bg-muted/50",
+                metric.iconClassName,
+              )}
+            >
+              <Icon className="h-5 w-5" />
+            </div>
+            <Sparkline data={metric.trend} color={metric.sparklineColor} />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export const dashboardMetrics: DashboardMetric[] = [
+  {
+    label: "Revenue",
+    value: "$42.8k",
+    change: "+12.4%",
+    icon: DollarSign,
+    iconClassName: THEME.metrics.revenue.iconClassName,
+    sparklineColor: THEME.metrics.revenue.sparklineColor,
+    trend: [
+      { value: 38 },
+      { value: 40 },
+      { value: 39 },
+      { value: 41 },
+      { value: 43 },
+      { value: 42 },
+      { value: 43 },
+    ],
+  },
+  {
+    label: "Active Users",
+    value: "18,240",
+    change: "+8.1%",
+    icon: Users,
+    iconClassName: THEME.metrics.users.iconClassName,
+    sparklineColor: THEME.metrics.users.sparklineColor,
+    trend: [
+      { value: 16200 },
+      { value: 16800 },
+      { value: 17100 },
+      { value: 17500 },
+      { value: 17800 },
+      { value: 18000 },
+      { value: 18240 },
+    ],
+  },
+  {
+    label: "Conversion",
+    value: "12.4%",
+    change: "+2.3%",
+    icon: Percent,
+    iconClassName: THEME.metrics.conversion.iconClassName,
+    sparklineColor: THEME.metrics.conversion.sparklineColor,
+    trend: [
+      { value: 10.2 },
+      { value: 10.8 },
+      { value: 11.1 },
+      { value: 11.5 },
+      { value: 11.9 },
+      { value: 12.1 },
+      { value: 12.4 },
+    ],
+  },
+];