create-app-ui 1.0.0

package/templates/admin-portal/src/pages/dashboard.tsx

@@ -0,0 +1,143 @@
+import { DashboardMetricCard, dashboardMetrics } from "@/components/dashboard-metric-card";
+import { BarChart } from "@/components/ui/bar-chart";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { LineChart } from "@/components/ui/line-chart";
+import { PieChart } from "@/components/ui/pie-chart";
+import {
+  deviceUsageData,
+  monthlyRevenueData,
+  trafficSourceData,
+  userRoleDistribution,
+  weeklyActiveUsersData,
+} from "@/config/chart-data";
+import {
+  activeUsersChartConfig,
+  deviceChartConfig,
+  revenueChartConfig,
+  roleChartConfig,
+  trafficChartConfig,
+} from "@/config/theme";
+
+export function DashboardPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Dashboard</h1>
+        <p className="text-sm text-muted-foreground">High-level platform performance snapshot.</p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {dashboardMetrics.map((metric) => (
+          <DashboardMetricCard key={metric.label} metric={metric} />
+        ))}
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Monthly revenue</CardTitle>
+            <CardDescription>Revenue and new user signups by month</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart
+              data={monthlyRevenueData}
+              config={revenueChartConfig}
+              dataKeys={["revenue", "users"]}
+              categoryKey="month"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Active users</CardTitle>
+            <CardDescription>Weekly active users over the last 8 weeks</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <LineChart
+              data={weeklyActiveUsersData}
+              config={activeUsersChartConfig}
+              dataKeys={["users"]}
+              categoryKey="week"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Traffic sources</CardTitle>
+            <CardDescription>Visitor count by acquisition channel</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart
+              data={trafficSourceData}
+              config={trafficChartConfig}
+              dataKeys={["visitors"]}
+              categoryKey="source"
+              layout="vertical"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>User roles</CardTitle>
+            <CardDescription>Distribution by role</CardDescription>
+          </CardHeader>
+          <CardContent className="flex justify-center">
+            <PieChart
+              data={userRoleDistribution}
+              config={roleChartConfig}
+              dataKey="count"
+              nameKey="role"
+              innerRadius={60}
+              showCenterLabel
+              centerLabel="Users"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Device usage</CardTitle>
+            <CardDescription>Share of sessions by device type</CardDescription>
+          </CardHeader>
+          <CardContent className="flex justify-center">
+            <PieChart
+              data={deviceUsageData}
+              config={deviceChartConfig}
+              dataKey="value"
+              nameKey="device"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent activity</CardTitle>
+            <CardDescription>Latest platform events</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span>User account created</span>
+              <Badge variant="secondary">2m ago</Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Role updated</span>
+              <Badge variant="secondary">11m ago</Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Settings changed</span>
+              <Badge variant="secondary">1h ago</Badge>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/admin-portal/src/pages/login.tsx

@@ -0,0 +1,81 @@
+import { FormEvent, useState } from "react";
+import { Navigate } from "react-router-dom";
+import { AuthLayout } from "@/components/auth-layout";
+import { BRANDING } from "@/config/branding";
+import { THEME } from "@/config/theme";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type LoginPageProps = {
+  isAuthenticated: boolean;
+  onLogin: () => void;
+};
+
+export function LoginPage({ isAuthenticated, onLogin }: LoginPageProps) {
+  const [email, setEmail] = useState("admin@company.com");
+  const [password, setPassword] = useState("admin123");
+  const [error, setError] = useState("");
+
+  if (isAuthenticated) {
+    return <Navigate to="/components" replace />;
+  }
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (email === "admin@company.com" && password === "admin123") {
+      onLogin();
+      return;
+    }
+
+    setError("Invalid credentials. Use admin@company.com / admin123");
+  };
+
+  return (
+    <AuthLayout
+      alternateCta="Sign up"
+      alternateHref="/signup"
+      alternateLabel="Don't have an account?"
+      subtitle={BRANDING.auth.loginSubtitle}
+      title={BRANDING.auth.loginTitle}
+    >
+      <div className="space-y-4">
+        <Button className="w-full" type="button" variant="outline">
+          <span className="mr-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs">
+            G
+          </span>
+          {BRANDING.auth.continueWithGoogleLabel}
+        </Button>
+
+        <div className="text-center text-sm text-muted-foreground">or Sign in with Email</div>
+
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+            />
+          </div>
+          {error ? <p className={cn("text-sm", THEME.classes.destructiveText)}>{error}</p> : null}
+          <Button className={THEME.classes.authSubmit} type="submit" variant="brand">
+            Login Now
+          </Button>
+        </form>
+      </div>
+    </AuthLayout>
+  );
+}

package/templates/admin-portal/src/pages/settings/notifications.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+
+export function SettingsNotificationsPage() {
+  return (
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>Choose how you want to be notified.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <label className="flex items-center justify-between gap-4 rounded-md border p-3">
+          <div>
+            <Label>Email alerts</Label>
+            <p className="text-sm text-muted-foreground">Receive summaries and critical updates.</p>
+          </div>
+          <input type="checkbox" defaultChecked className="h-4 w-4" />
+        </label>
+        <label className="flex items-center justify-between gap-4 rounded-md border p-3">
+          <div>
+            <Label>Push notifications</Label>
+            <p className="text-sm text-muted-foreground">Instant alerts for user activity.</p>
+          </div>
+          <input type="checkbox" className="h-4 w-4" />
+        </label>
+        <Button>Save preferences</Button>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/admin-portal/src/pages/settings/profile.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function SettingsProfilePage() {
+  return (
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle>Profile</CardTitle>
+        <CardDescription>Update your personal account details.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="full-name">Full name</Label>
+          <Input id="full-name" placeholder="Jane Admin" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="admin@company.com" />
+        </div>
+        <Button>Save profile</Button>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/admin-portal/src/pages/signup.tsx

@@ -0,0 +1,81 @@
+import { FormEvent, useState } from "react";
+import { Navigate } from "react-router-dom";
+import { AuthLayout } from "@/components/auth-layout";
+import { BRANDING } from "@/config/branding";
+import { THEME } from "@/config/theme";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type SignupPageProps = {
+  isAuthenticated: boolean;
+  onSignup: () => void;
+};
+
+export function SignupPage({ isAuthenticated, onSignup }: SignupPageProps) {
+  const [storeName, setStoreName] = useState("Rindu Store");
+  const [email, setEmail] = useState("rindustore@gmail.com");
+  const [password, setPassword] = useState("admin123");
+
+  if (isAuthenticated) {
+    return <Navigate to="/components" replace />;
+  }
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    onSignup();
+  };
+
+  return (
+    <AuthLayout
+      alternateCta="Login"
+      alternateHref="/login"
+      alternateLabel="Already have an account?"
+      subtitle={BRANDING.auth.signupSubtitle}
+      title={BRANDING.auth.signupTitle}
+    >
+      <div className="space-y-4">
+        <Button className="w-full" type="button" variant="outline">
+          <span className="mr-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs">
+            G
+          </span>
+          {BRANDING.auth.continueWithGoogleLabel}
+        </Button>
+
+        <div className="text-center text-sm text-muted-foreground">or Sign up with Email</div>
+
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <div className="space-y-2">
+            <Label htmlFor="store-name">Name Store</Label>
+            <Input
+              id="store-name"
+              value={storeName}
+              onChange={(event) => setStoreName(event.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+            />
+          </div>
+          <Button className={THEME.classes.authSubmit} type="submit" variant="brand">
+            Register Now
+          </Button>
+        </form>
+      </div>
+    </AuthLayout>
+  );
+}

package/templates/admin-portal/src/pages/users.tsx

@@ -0,0 +1,12 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function UsersPage() {
+  return (
+    <Card>
+      <CardHeader><CardTitle>Users</CardTitle></CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">User management mockup table can be expanded from here.</p>
+      </CardContent>
+    </Card>
+  );
+}

package/templates/admin-portal/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.overlay.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*", "../../boilerplate/react-base/src/*"]
+    }
+  },
+  "include": ["src", "../../boilerplate/react-base/src/vite-env.d.ts"]
+}

package/templates/blank/README.md

@@ -0,0 +1,15 @@
+# blank template (overlay)
+
+Applied **on top of** `boilerplate/react-base` for a minimal starter.
+
+## Adds
+
+- `src/App.tsx` — single home page
+- `src/main.tsx` — entry with tooltip provider
+- `src/pages/home.tsx`
+
+All UI components and theme still come from the shared boilerplate.
+
+## IDE (TypeScript)
+
+From `ui-platform`, run `npm install` once (installs the boilerplate workspace so React types resolve). `tsconfig.json` here is IDE-only and is not copied by the CLI.

package/templates/blank/src/App.tsx

@@ -0,0 +1,5 @@
+import { HomePage } from "@/pages/home";
+
+export default function App() {
+  return <HomePage />;
+}

package/templates/blank/src/main.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import "./styles/globals.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <TooltipProvider delayDuration={200}>
+      <App />
+      <Toaster richColors closeButton position="top-right" />
+    </TooltipProvider>
+  </React.StrictMode>,
+);

package/templates/blank/src/pages/home.tsx

@@ -0,0 +1,20 @@
+import { APP_TITLE, COMPANY_NAME } from "@/config/constants";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function HomePage() {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-slate-50 p-6">
+      <Card className="w-full max-w-xl">
+        <CardHeader>
+          <CardTitle>{APP_TITLE}</CardTitle>
+          <CardDescription>Minimal Vite + React + TypeScript + Tailwind + shadcn/ui starter.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">Built for {COMPANY_NAME}.</p>
+          <Button>Get Started</Button>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

package/templates/blank/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.overlay.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*", "../../boilerplate/react-base/src/*"]
+    }
+  },
+  "include": ["src", "../../boilerplate/react-base/src/vite-env.d.ts"]
+}

package/templates/tsconfig.overlay.base.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../boilerplate/react-base/tsconfig.app.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler"
+  }
+}