create-einja-app 0.2.15 → 0.2.18

package/templates/default/apps/admin/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/dashboard");
+}

package/templates/default/apps/admin/src/components/layout/admin-layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { CommandMenu } from "{{packageName}}/admin-ui/command-menu";
+import { SidebarInset, SidebarProvider } from "{{packageName}}/admin-ui/ui/sidebar";
+import { AppSidebar } from "./app-sidebar";
+import { navGroups } from "./nav-config";
+
+export function AdminLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>{children}</SidebarInset>
+      <CommandMenu navGroups={navGroups} />
+    </SidebarProvider>
+  );
+}

package/templates/default/apps/admin/src/components/layout/app-sidebar.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { NavGroup, NavUser, ThemeSwitch } from "{{packageName}}/admin-ui/layout";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "{{packageName}}/admin-ui/ui/sidebar";
+import { navGroups } from "./nav-config";
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  A
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">Admin</span>
+                  <span className="truncate text-xs">管理画面</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        {navGroups.map((group) => (
+          <NavGroup key={group.title} group={group} />
+        ))}
+      </SidebarContent>
+      <SidebarFooter>
+        <ThemeSwitch />
+        <NavUser
+          user={{
+            name: "Admin User",
+            email: "admin@example.com",
+            avatar: "",
+          }}
+        />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/templates/default/apps/admin/src/components/layout/nav-config.ts

@@ -0,0 +1,131 @@
+import type { NavGroupType } from "{{packageName}}/admin-ui/layout";
+import {
+  AlertTriangle,
+  HelpCircle,
+  LayoutDashboard,
+  ListChecks,
+  MessageSquare,
+  Package,
+  Settings,
+  Shield,
+  Users,
+} from "lucide-react";
+
+export const navGroups: NavGroupType[] = [
+  {
+    title: "General",
+    items: [
+      {
+        title: "Dashboard",
+        url: "/dashboard",
+        icon: LayoutDashboard,
+      },
+      {
+        title: "Tasks",
+        url: "/dashboard/tasks",
+        icon: ListChecks,
+      },
+      {
+        title: "Apps",
+        url: "/dashboard/apps",
+        icon: Package,
+      },
+      {
+        title: "Chats",
+        url: "/dashboard/chats",
+        icon: MessageSquare,
+        badge: "5",
+      },
+      {
+        title: "Users",
+        url: "/dashboard/users",
+        icon: Users,
+      },
+    ],
+  },
+  {
+    title: "Other",
+    items: [
+      {
+        title: "Settings",
+        icon: Settings,
+        items: [
+          {
+            title: "Profile",
+            url: "/dashboard/settings/profile",
+          },
+          {
+            title: "Account",
+            url: "/dashboard/settings/account",
+          },
+          {
+            title: "Appearance",
+            url: "/dashboard/settings/appearance",
+          },
+          {
+            title: "Notifications",
+            url: "/dashboard/settings/notifications",
+          },
+          {
+            title: "Display",
+            url: "/dashboard/settings/display",
+          },
+        ],
+      },
+      {
+        title: "Help Center",
+        url: "/dashboard/help-center",
+        icon: HelpCircle,
+      },
+    ],
+  },
+  {
+    title: "Pages",
+    items: [
+      {
+        title: "Auth",
+        icon: Shield,
+        items: [
+          {
+            title: "Sign In",
+            url: "/sign-in",
+          },
+          {
+            title: "Sign Up",
+            url: "/sign-up",
+          },
+          {
+            title: "Forgot Password",
+            url: "/forgot-password",
+          },
+          {
+            title: "OTP",
+            url: "/otp",
+          },
+        ],
+      },
+      {
+        title: "Errors",
+        icon: AlertTriangle,
+        items: [
+          {
+            title: "401",
+            url: "/401",
+          },
+          {
+            title: "403",
+            url: "/403",
+          },
+          {
+            title: "500",
+            url: "/500",
+          },
+          {
+            title: "Maintenance",
+            url: "/maintenance",
+          },
+        ],
+      },
+    ],
+  },
+];

package/templates/default/apps/admin/src/components/providers/theme-provider.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/templates/default/apps/admin/src/components/shared/long-text.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "{{packageName}}/admin-ui/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "{{packageName}}/admin-ui/ui/tooltip";
+import { useRef, useState } from "react";
+
+type LongTextProps = {
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function LongText({ children, className = "", contentClassName = "" }: LongTextProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOverflown, setIsOverflown] = useState(false);
+
+  // Use ref callback to check overflow when element is mounted
+  const refCallback = (node: HTMLDivElement | null) => {
+    ref.current = node;
+    if (node && checkOverflow(node)) {
+      queueMicrotask(() => setIsOverflown(true));
+    }
+  };
+
+  if (!isOverflown)
+    return (
+      <div ref={refCallback} className={cn("truncate", className)}>
+        {children}
+      </div>
+    );
+
+  return (
+    <>
+      <div className="hidden sm:block">
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div ref={refCallback} className={cn("truncate", className)}>
+                {children}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className={contentClassName}>{children}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div className="sm:hidden">
+        <Popover>
+          <PopoverTrigger asChild>
+            <div ref={refCallback} className={cn("truncate", className)}>
+              {children}
+            </div>
+          </PopoverTrigger>
+          <PopoverContent className={cn("w-fit", contentClassName)}>
+            <p>{children}</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  );
+}
+
+const checkOverflow = (textContainer: HTMLDivElement | null) => {
+  if (textContainer) {
+    return (
+      textContainer.offsetHeight < textContainer.scrollHeight ||
+      textContainer.offsetWidth < textContainer.scrollWidth
+    );
+  }
+  return false;
+};

package/templates/default/apps/admin/src/components/shared/search-input.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { Search } from "lucide-react";
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export function SearchInput({ className, ...props }: SearchInputProps) {
+  return (
+    <div className={cn("relative", className)}>
+      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+      <Input type="search" className="pl-8" {...props} />
+    </div>
+  );
+}

package/templates/default/apps/admin/src/components/shared/select-dropdown.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { FormControl } from "{{packageName}}/admin-ui/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "{{packageName}}/admin-ui/ui/select";
+import { Loader } from "lucide-react";
+
+type SelectDropdownProps = {
+  onValueChange?: (value: string) => void;
+  defaultValue: string | undefined;
+  placeholder?: string;
+  isPending?: boolean;
+  items: { label: string; value: string }[] | undefined;
+  disabled?: boolean;
+  className?: string;
+  isControlled?: boolean;
+};
+
+export function SelectDropdown({
+  defaultValue,
+  onValueChange,
+  isPending,
+  items,
+  placeholder,
+  disabled,
+  className = "",
+  isControlled = false,
+}: SelectDropdownProps) {
+  const defaultState = isControlled
+    ? { value: defaultValue, onValueChange }
+    : { defaultValue, onValueChange };
+  return (
+    <Select {...defaultState}>
+      <FormControl>
+        <SelectTrigger disabled={disabled} className={cn(className)}>
+          <SelectValue placeholder={placeholder ?? "Select"} />
+        </SelectTrigger>
+      </FormControl>
+      <SelectContent>
+        {isPending ? (
+          <SelectItem disabled value="loading" className="h-14">
+            <div className="flex items-center justify-center gap-2">
+              <Loader className="h-5 w-5 animate-spin" />
+              {"  "}
+              Loading...
+            </div>
+          </SelectItem>
+        ) : (
+          items?.map(({ label, value }) => (
+            <SelectItem key={value} value={value}>
+              {label}
+            </SelectItem>
+          ))
+        )}
+      </SelectContent>
+    </Select>
+  );
+}

package/templates/default/apps/admin/src/data/apps.tsx

@@ -0,0 +1,116 @@
+import {
+  BookOpen,
+  CreditCard,
+  Figma,
+  FileText,
+  GitBranch,
+  Github,
+  Mail,
+  MessageCircle,
+  MessageSquare,
+  Package,
+  Phone,
+  Trello,
+  Users,
+  Video,
+} from "lucide-react";
+
+export type App = {
+  name: string;
+  logo: React.ReactElement;
+  connected: boolean;
+  desc: string;
+};
+
+export const apps: App[] = [
+  {
+    name: "Telegram",
+    logo: <MessageCircle className="h-8 w-8" />,
+    connected: false,
+    desc: "Connect with Telegram for real-time communication.",
+  },
+  {
+    name: "Notion",
+    logo: <FileText className="h-8 w-8" />,
+    connected: true,
+    desc: "Effortlessly sync Notion pages for seamless collaboration.",
+  },
+  {
+    name: "Figma",
+    logo: <Figma className="h-8 w-8" />,
+    connected: true,
+    desc: "View and collaborate on Figma designs in one place.",
+  },
+  {
+    name: "Trello",
+    logo: <Trello className="h-8 w-8" />,
+    connected: false,
+    desc: "Sync Trello cards for streamlined project management.",
+  },
+  {
+    name: "Slack",
+    logo: <MessageSquare className="h-8 w-8" />,
+    connected: false,
+    desc: "Integrate Slack for efficient team communication",
+  },
+  {
+    name: "Zoom",
+    logo: <Video className="h-8 w-8" />,
+    connected: true,
+    desc: "Host Zoom meetings directly from the dashboard.",
+  },
+  {
+    name: "Stripe",
+    logo: <CreditCard className="h-8 w-8" />,
+    connected: false,
+    desc: "Easily manage Stripe transactions and payments.",
+  },
+  {
+    name: "Gmail",
+    logo: <Mail className="h-8 w-8" />,
+    connected: true,
+    desc: "Access and manage Gmail messages effortlessly.",
+  },
+  {
+    name: "Medium",
+    logo: <BookOpen className="h-8 w-8" />,
+    connected: false,
+    desc: "Explore and share Medium stories on your dashboard.",
+  },
+  {
+    name: "Skype",
+    logo: <Phone className="h-8 w-8" />,
+    connected: false,
+    desc: "Connect with Skype contacts seamlessly.",
+  },
+  {
+    name: "Docker",
+    logo: <Package className="h-8 w-8" />,
+    connected: false,
+    desc: "Effortlessly manage Docker containers on your dashboard.",
+  },
+  {
+    name: "GitHub",
+    logo: <Github className="h-8 w-8" />,
+    connected: false,
+    desc: "Streamline code management with GitHub integration.",
+  },
+  {
+    name: "GitLab",
+    logo: <GitBranch className="h-8 w-8" />,
+    connected: false,
+    desc: "Efficiently manage code projects with GitLab integration.",
+  },
+  {
+    name: "Discord",
+    logo: <Users className="h-8 w-8" />,
+    connected: false,
+    desc: "Connect with Discord for seamless team communication.",
+  },
+  {
+    name: "WhatsApp",
+    logo: <MessageCircle className="h-8 w-8" />,
+    connected: false,
+    desc: "Easily integrate WhatsApp for direct messaging.",
+  },
+];

package/templates/default/apps/admin/src/data/chats.ts

@@ -0,0 +1,114 @@
+export type Convo = {
+  sender: string;
+  message: string;
+  timestamp: string;
+};
+
+export type ChatUser = {
+  id: string;
+  profile: string;
+  username: string;
+  fullName: string;
+  title: string;
+  messages: Convo[];
+};
+
+export const conversations: ChatUser[] = [
+  {
+    id: "conv1",
+    profile: "https://randomuser.me/api/portraits/men/32.jpg",
+    username: "alex_dev",
+    fullName: "Alex John",
+    title: "Senior Backend Dev",
+    messages: [
+      {
+        sender: "You",
+        message: "See you later, Alex!",
+        timestamp: "2024-08-24T11:15:15",
+      },
+      {
+        sender: "Alex",
+        message: "Alright, talk to you later!",
+        timestamp: "2024-08-24T11:11:30",
+      },
+      {
+        sender: "You",
+        message: "For sure. Anyway, I should get back to reviewing the project.",
+        timestamp: "2024-08-23T09:26:50",
+      },
+      {
+        sender: "Alex",
+        message: "Yeah, let me know what you think.",
+        timestamp: "2024-08-23T09:25:15",
+      },
+      {
+        sender: "You",
+        message: "Oh, nice! I've been waiting for that. I'll check it out later.",
+        timestamp: "2024-08-23T09:24:30",
+      },
+      {
+        sender: "Alex",
+        message: "They've added a dark mode option! It looks really sleek.",
+        timestamp: "2024-08-23T09:23:10",
+      },
+      {
+        sender: "You",
+        message: "No, not yet. What's new?",
+        timestamp: "2024-08-23T09:22:00",
+      },
+      {
+        sender: "Alex",
+        message: "By the way, have you seen the new feature update?",
+        timestamp: "2024-08-23T09:21:05",
+      },
+    ],
+  },
+  {
+    id: "conv2",
+    profile: "https://randomuser.me/api/portraits/women/44.jpg",
+    username: "sarah_designer",
+    fullName: "Sarah Miller",
+    title: "Lead Designer",
+    messages: [
+      {
+        sender: "You",
+        message: "Thanks! Looking forward to it.",
+        timestamp: "2024-08-23T14:30:00",
+      },
+      {
+        sender: "Sarah",
+        message: "I'll send you the final mockups by tomorrow.",
+        timestamp: "2024-08-23T14:28:00",
+      },
+      {
+        sender: "You",
+        message: "That sounds great!",
+        timestamp: "2024-08-23T14:25:00",
+      },
+    ],
+  },
+  {
+    id: "conv3",
+    profile: "https://randomuser.me/api/portraits/men/45.jpg",
+    username: "mike_pm",
+    fullName: "Mike Johnson",
+    title: "Project Manager",
+    messages: [
+      {
+        sender: "Mike",
+        message: "Can we schedule a meeting for tomorrow?",
+        timestamp: "2024-08-22T10:00:00",
+      },
+      {
+        sender: "You",
+        message: "Sure, what time works for you?",
+        timestamp: "2024-08-22T10:05:00",
+      },
+      {
+        sender: "Mike",
+        message: "How about 2 PM?",
+        timestamp: "2024-08-22T10:10:00",
+      },
+    ],
+  },
+];