create-app-ui 1.0.0

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

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { AppBreadcrumb } from "@/components/app-breadcrumb";
+import { AppHeader } from "@/components/app-header";
+import { AppSidebar } from "@/components/app-sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+export function LayoutShell({ children }: { children: ReactNode }) {
+  return (
+    <TooltipProvider delayDuration={200}>
+    <SidebarProvider defaultOpen>
+      <AppSidebar />
+      <SidebarInset>
+        <AppHeader />
+        <div className="shrink-0 border-b bg-background px-4 py-3 sm:px-6">
+          <AppBreadcrumb />
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-6">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+    </TooltipProvider>
+  );
+}

package/templates/admin-portal/src/components/notifications-sheet.tsx

@@ -0,0 +1,91 @@
+import { Bell, CheckCheck } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { MOCK_NOTIFICATIONS, type NotificationItem } from "@/config/user";
+import { cn } from "@/lib/utils";
+
+function NotificationRow({
+  item,
+  onMarkRead,
+}: {
+  item: NotificationItem;
+  onMarkRead: (id: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onMarkRead(item.id)}
+      className={cn(
+        "flex w-full flex-col gap-1 rounded-lg border p-3 text-left transition-colors hover:bg-muted/60",
+        !item.read && "border-primary/20 bg-primary/5",
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-sm font-medium leading-snug">{item.title}</p>
+        {!item.read && <span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-primary" />}
+      </div>
+      <p className="text-sm text-muted-foreground">{item.description}</p>
+      <p className="text-xs text-muted-foreground">{item.time}</p>
+    </button>
+  );
+}
+
+export function NotificationsSheet() {
+  const [open, setOpen] = useState(false);
+  const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
+
+  const unreadCount = useMemo(() => notifications.filter((item) => !item.read).length, [notifications]);
+
+  const markRead = (id: string) => {
+    setNotifications((current) =>
+      current.map((item) => (item.id === id ? { ...item, read: true } : item)),
+    );
+  };
+
+  const markAllRead = () => {
+    setNotifications((current) => current.map((item) => ({ ...item, read: true })));
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm" className="relative h-9 w-9 p-0" aria-label="Open notifications">
+          <Bell className="h-4 w-4" />
+          {unreadCount > 0 && (
+            <Badge className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px]">
+              {unreadCount > 9 ? "9+" : unreadCount}
+            </Badge>
+          )}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="flex h-full w-full flex-col gap-0 p-0 sm:max-w-md">
+        <SheetHeader className="border-b px-6 py-4 text-left">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <SheetTitle>Notifications</SheetTitle>
+              <SheetDescription>
+                {unreadCount > 0 ? `${unreadCount} unread` : "You're all caught up"}
+              </SheetDescription>
+            </div>
+            {unreadCount > 0 && (
+              <Button variant="outline" size="sm" className="h-8 shrink-0" onClick={markAllRead}>
+                <CheckCheck className="mr-1.5 h-4 w-4" />
+                Mark all read
+              </Button>
+            )}
+          </div>
+        </SheetHeader>
+        <ScrollArea className="min-h-0 flex-1 px-6 py-4">
+          <div className="space-y-3 pr-3">
+            {notifications.map((item) => (
+              <NotificationRow key={item.id} item={item} onMarkRead={markRead} />
+            ))}
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,164 @@
+import { ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuCollapsible,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { isNavGroup, type NavGroupConfig, type NavItemConfig, type NavLinkConfig } from "@/config/navigation";
+import { THEME } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+function navItemActiveClass(isActive: boolean) {
+  return cn(isActive && THEME.classes.navActive);
+}
+
+function NavLinkItem({
+  item,
+  onNavigate,
+}: {
+  item: NavLinkConfig;
+  onNavigate?: () => void;
+}) {
+  const location = useLocation();
+  const Icon = item.icon;
+  const isActive = location.pathname === item.to;
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton asChild isActive={isActive} tooltip={item.label}>
+        <NavLink to={item.to} onClick={onNavigate} className={navItemActiveClass(isActive)}>
+          <Icon />
+          <span>{item.label}</span>
+        </NavLink>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
+
+function NavGroupItem({
+  item,
+  onNavigate,
+}: {
+  item: NavGroupConfig;
+  onNavigate?: () => void;
+}) {
+  const location = useLocation();
+  const { state: sidebarState } = useSidebar();
+  const Icon = item.icon;
+  const isGroupActive = location.pathname === item.basePath || location.pathname.startsWith(`${item.basePath}/`);
+  const [open, setOpen] = useState(isGroupActive);
+
+  useEffect(() => {
+    if (isGroupActive) {
+      setOpen(true);
+    }
+  }, [isGroupActive]);
+
+  if (sidebarState === "collapsed") {
+    return (
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              isActive={isGroupActive}
+              tooltip={item.label}
+              className={navItemActiveClass(isGroupActive)}
+            >
+              <Icon />
+              <span>{item.label}</span>
+              <ChevronRight className="ml-auto h-4 w-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="right" align="start" className="min-w-44">
+            {item.children.map((child) => {
+              const isChildActive = location.pathname === child.to;
+              return (
+                <DropdownMenuItem key={child.to} asChild>
+                  <NavLink
+                    to={child.to}
+                    onClick={onNavigate}
+                    className={cn(
+                      "w-full cursor-pointer",
+                      isChildActive && THEME.classes.navActive,
+                    )}
+                  >
+                    {child.label}
+                  </NavLink>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    );
+  }
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        isActive={isGroupActive}
+        tooltip={item.label}
+        className={navItemActiveClass(isGroupActive)}
+        onClick={() => setOpen((current) => !current)}
+        aria-expanded={open}
+      >
+        <Icon />
+        <span>{item.label}</span>
+        <ChevronRight className={cn("ml-auto h-4 w-4 shrink-0 transition-transform duration-200", open && "rotate-90")} />
+      </SidebarMenuButton>
+      <SidebarMenuCollapsible open={open}>
+        <SidebarMenuSub>
+          {item.children.map((child) => {
+            const isActive = location.pathname === child.to;
+            return (
+              <SidebarMenuSubItem key={child.to}>
+                <SidebarMenuSubButton asChild isActive={isActive}>
+                  <NavLink
+                    to={child.to}
+                    onClick={onNavigate}
+                    className={navItemActiveClass(isActive)}
+                  >
+                    <span>{child.label}</span>
+                  </NavLink>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            );
+          })}
+        </SidebarMenuSub>
+      </SidebarMenuCollapsible>
+    </SidebarMenuItem>
+  );
+}
+
+export function SidebarNavMenu({
+  items,
+  onNavigate,
+}: {
+  items: NavItemConfig[];
+  onNavigate?: () => void;
+}) {
+  return (
+    <SidebarMenu>
+      {items.map((item) =>
+        isNavGroup(item) ? (
+          <NavGroupItem key={item.basePath} item={item} onNavigate={onNavigate} />
+        ) : (
+          <NavLinkItem key={item.to} item={item} onNavigate={onNavigate} />
+        ),
+      )}
+    </SidebarMenu>
+  );
+}

package/templates/admin-portal/src/components/user-avatar.tsx

@@ -0,0 +1,26 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CURRENT_USER } from "@/config/user";
+import { cn } from "@/lib/utils";
+
+const sizeClasses = {
+  sm: "h-8 w-8",
+  md: "h-9 w-9",
+  lg: "h-10 w-10",
+} as const;
+
+type UserAvatarProps = {
+  className?: string;
+  size?: keyof typeof sizeClasses;
+  rounded?: "full" | "lg";
+};
+
+export function UserAvatar({ className, size = "md", rounded = "full" }: UserAvatarProps) {
+  return (
+    <Avatar
+      className={cn(sizeClasses[size], rounded === "lg" && "rounded-lg", className)}
+    >
+      <AvatarImage src={CURRENT_USER.avatarUrl} alt={CURRENT_USER.name} />
+      <AvatarFallback className={cn(rounded === "lg" && "rounded-lg")}>{CURRENT_USER.initials}</AvatarFallback>
+    </Avatar>
+  );
+}

package/templates/admin-portal/src/components/user-menu.tsx

@@ -0,0 +1,163 @@
+import { LogOut, Settings, User } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { UserAvatar } from "@/components/user-avatar";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SidebarMenuButton } from "@/components/ui/sidebar";
+import { CURRENT_USER } from "@/config/user";
+import { useAuth } from "@/context/auth-context";
+import { cn } from "@/lib/utils";
+
+type UserMenuProps = {
+  variant?: "header" | "sidebar";
+};
+
+function LogoutConfirmDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleConfirm = () => {
+    logout();
+    onOpenChange(false);
+    navigate("/login", { replace: true });
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Log out?</AlertDialogTitle>
+          <AlertDialogDescription>
+            You will be signed out of your admin workspace. You can sign in again at any time.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirm}>Log out</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function UserMenuItems({ onLogoutClick }: { onLogoutClick: () => void }) {
+  const navigate = useNavigate();
+
+  const handleLogoutSelect = () => {
+    window.setTimeout(() => onLogoutClick(), 0);
+  };
+
+  return (
+    <>
+      <DropdownMenuLabel className="font-normal">
+        <div className="flex items-center gap-2">
+          <UserAvatar size="md" />
+          <div className="grid text-left text-sm leading-tight">
+            <span className="font-medium">{CURRENT_USER.name}</span>
+            <span className="text-xs text-muted-foreground">{CURRENT_USER.email}</span>
+          </div>
+        </div>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onSelect={() => navigate("/settings/profile")}>
+        <User className="mr-2 h-4 w-4" />
+        Profile
+      </DropdownMenuItem>
+      <DropdownMenuItem onSelect={() => navigate("/settings/notifications")}>
+        <Settings className="mr-2 h-4 w-4" />
+        Settings
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onSelect={handleLogoutSelect}>
+        <LogOut className="mr-2 h-4 w-4" />
+        Log out
+      </DropdownMenuItem>
+    </>
+  );
+}
+
+export function UserMenu({ variant = "header" }: UserMenuProps) {
+  const [logoutDialogOpen, setLogoutDialogOpen] = useState(false);
+
+  const openLogoutDialog = () => setLogoutDialogOpen(true);
+
+  if (variant === "sidebar") {
+    return (
+      <>
+        <div className="flex w-full items-center gap-1">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size="lg"
+                className="min-w-0 flex-1 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <UserAvatar size="lg" rounded="lg" />
+                <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                  <span className="truncate font-medium">{CURRENT_USER.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">{CURRENT_USER.email}</span>
+                </div>
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="top" align="end" className="z-[60] w-56">
+              <UserMenuItems onLogoutClick={openLogoutDialog} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <SidebarMenuButton
+            size="lg"
+            className="w-9 shrink-0 px-0 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:w-8"
+            aria-label="Log out"
+            onClick={openLogoutDialog}
+          >
+            <LogOut className="h-4 w-4 text-muted-foreground" />
+          </SidebarMenuButton>
+        </div>
+        <LogoutConfirmDialog open={logoutDialogOpen} onOpenChange={setLogoutDialogOpen} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn("h-9 gap-2 rounded-full pl-1 pr-2 sm:pl-1 sm:pr-3")}
+          >
+            <UserAvatar size="sm" />
+            <span className="hidden max-w-[120px] truncate text-sm font-medium sm:inline">{CURRENT_USER.name}</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <UserMenuItems onLogoutClick={openLogoutDialog} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <LogoutConfirmDialog open={logoutDialogOpen} onOpenChange={setLogoutDialogOpen} />
+    </>
+  );
+}

package/templates/admin-portal/src/config/branding.ts

@@ -0,0 +1,17 @@
+import heroImage from "@/assets/auth-hero.jpg";
+import logoImage from "@/assets/brand-logo.png";
+
+export const BRANDING = {
+  projectName: "Omobio Common GUI",
+  productName: "Omobio Admin Portal",
+  companyName: "Omobio",
+  logoPath: logoImage,
+  heroImagePath: heroImage,
+  auth: {
+    loginTitle: "Welcome back",
+    loginSubtitle: "Sign in to your admin workspace",
+    signupTitle: "Create your account",
+    signupSubtitle: "Register your store and start managing operations",
+    continueWithGoogleLabel: "Continue with Google",
+  },
+} as const;

package/templates/admin-portal/src/config/chart-data.ts

@@ -0,0 +1,44 @@
+import { chartFill } from "@/config/theme";
+
+export const monthlyRevenueData = [
+  { month: "Jan", revenue: 4200, users: 240 },
+  { month: "Feb", revenue: 3800, users: 198 },
+  { month: "Mar", revenue: 5100, users: 280 },
+  { month: "Apr", revenue: 4600, users: 260 },
+  { month: "May", revenue: 5400, users: 310 },
+  { month: "Jun", revenue: 6200, users: 340 },
+  { month: "Jul", revenue: 5800, users: 320 },
+  { month: "Aug", revenue: 6400, users: 360 },
+];
+
+export const weeklyActiveUsersData = [
+  { week: "W1", users: 1200 },
+  { week: "W2", users: 1450 },
+  { week: "W3", users: 1380 },
+  { week: "W4", users: 1620 },
+  { week: "W5", users: 1780 },
+  { week: "W6", users: 1690 },
+  { week: "W7", users: 1920 },
+  { week: "W8", users: 2100 },
+];
+
+export const trafficSourceData = [
+  { source: "Organic", visitors: 4200 },
+  { source: "Paid", visitors: 2800 },
+  { source: "Referral", visitors: 1900 },
+  { source: "Social", visitors: 1400 },
+  { source: "Email", visitors: 900 },
+];
+
+export const userRoleDistribution = [
+  { role: "Admin", count: 12, fill: chartFill(1) },
+  { role: "Editor", count: 28, fill: chartFill(2) },
+  { role: "Viewer", count: 45, fill: chartFill(3) },
+  { role: "Invited", count: 8, fill: chartFill(4) },
+];
+
+export const deviceUsageData = [
+  { device: "Desktop", value: 58, fill: chartFill(1) },
+  { device: "Mobile", value: 32, fill: chartFill(2) },
+  { device: "Tablet", value: 10, fill: chartFill(3) },
+];

package/templates/admin-portal/src/config/navigation.ts

@@ -0,0 +1,42 @@
+import { BarChart3, Blocks, Settings, Users, type LucideIcon } from "lucide-react";
+
+export type NavLinkConfig = {
+  type: "link";
+  to: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+export type NavGroupConfig = {
+  type: "group";
+  label: string;
+  icon: LucideIcon;
+  /** Prefix used to auto-expand and mark parent active (e.g. `/settings`). */
+  basePath: string;
+  children: { to: string; label: string }[];
+};
+
+export type NavItemConfig = NavLinkConfig | NavGroupConfig;
+
+export const overviewNav: NavLinkConfig[] = [
+  { type: "link", to: "/dashboard", label: "Dashboard", icon: BarChart3 },
+  { type: "link", to: "/users", label: "Users", icon: Users },
+  { type: "link", to: "/components", label: "Components", icon: Blocks },
+];
+
+export const workspaceNav: NavItemConfig[] = [
+  {
+    type: "group",
+    label: "Settings",
+    icon: Settings,
+    basePath: "/settings",
+    children: [
+      { to: "/settings/profile", label: "Profile" },
+      { to: "/settings/notifications", label: "Notifications" },
+    ],
+  },
+];
+
+export function isNavGroup(item: NavItemConfig): item is NavGroupConfig {
+  return item.type === "group";
+}

package/templates/admin-portal/src/context/auth-context.tsx

@@ -0,0 +1,32 @@
+import { createContext, ReactNode, useContext, useMemo, useState } from "react";
+
+type AuthContextValue = {
+  isAuthenticated: boolean;
+  login: () => void;
+  logout: () => void;
+};
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      isAuthenticated,
+      login: () => setIsAuthenticated(true),
+      logout: () => setIsAuthenticated(false),
+    }),
+    [isAuthenticated],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider.");
+  }
+  return context;
+}

package/templates/admin-portal/src/lib/breadcrumbs.ts

@@ -0,0 +1,58 @@
+import { isNavGroup, overviewNav, workspaceNav, type NavItemConfig } from "@/config/navigation";
+
+export type BreadcrumbSegment = {
+  label: string;
+  to?: string;
+};
+
+const allNavItems: NavItemConfig[] = [...overviewNav, ...workspaceNav];
+
+function formatSegmentLabel(segment: string) {
+  return segment
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+export function getBreadcrumbs(pathname: string): BreadcrumbSegment[] {
+  const segments: BreadcrumbSegment[] = [{ label: "Home", to: "/dashboard" }];
+
+  for (const item of allNavItems) {
+    if (!isNavGroup(item)) {
+      if (pathname === item.to) {
+        segments.push({ label: item.label });
+        return segments;
+      }
+      continue;
+    }
+
+    const child = item.children.find((entry) => pathname === entry.to);
+    if (child) {
+      segments.push({ label: item.label, to: item.basePath });
+      segments.push({ label: child.label });
+      return segments;
+    }
+
+    if (pathname === item.basePath) {
+      segments.push({ label: item.label });
+      return segments;
+    }
+  }
+
+  const pathParts = pathname.split("/").filter(Boolean);
+  if (pathParts.length === 0) {
+    return segments;
+  }
+
+  let currentPath = "";
+  pathParts.forEach((part, index) => {
+    currentPath += `/${part}`;
+    const isLast = index === pathParts.length - 1;
+    segments.push({
+      label: formatSegmentLabel(part),
+      to: isLast ? undefined : currentPath,
+    });
+  });
+
+  return segments;
+}

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

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