create-einja-app 0.2.15 → 0.2.18

package/templates/default/apps/admin/src/app/dashboard/chats/_components/chat-list.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { ChatUser } from "@/data/chats";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "{{packageName}}/admin-ui/ui/avatar";
+import { ScrollArea } from "{{packageName}}/admin-ui/ui/scroll-area";
+import { Separator } from "{{packageName}}/admin-ui/ui/separator";
+import { Search as SearchIcon } from "lucide-react";
+import { Fragment } from "react";
+
+interface ChatListProps {
+  filteredChatList: ChatUser[];
+  selectedUser: ChatUser | null;
+  search: string;
+  onSearchChange: (search: string) => void;
+  onSelectUser: (user: ChatUser) => void;
+}
+
+export function ChatList({
+  filteredChatList,
+  selectedUser,
+  search,
+  onSearchChange,
+  onSelectUser,
+}: ChatListProps) {
+  return (
+    <>
+      <label
+        className={cn(
+          "focus-within:ring-1 focus-within:ring-ring focus-within:outline-hidden",
+          "flex h-10 w-full items-center space-x-0 rounded-md border border-border ps-2"
+        )}
+      >
+        <SearchIcon size={15} className="me-2 stroke-slate-500" />
+        <span className="sr-only">Search</span>
+        <input
+          type="text"
+          className="w-full flex-1 bg-inherit text-sm focus-visible:outline-hidden"
+          placeholder="Search chat..."
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+        />
+      </label>
+
+      <ScrollArea className="-mx-3 h-full overflow-scroll p-3">
+        {filteredChatList.map((chatUsr) => {
+          const { id, profile, username, messages, fullName } = chatUsr;
+          const lastConvo = messages[0];
+          const lastMsg =
+            lastConvo.sender === "You" ? `You: ${lastConvo.message}` : lastConvo.message;
+          return (
+            <Fragment key={id}>
+              <button
+                type="button"
+                className={cn(
+                  "group hover:bg-accent hover:text-accent-foreground",
+                  "flex w-full rounded-md px-2 py-2 text-start text-sm",
+                  selectedUser?.id === id && "sm:bg-muted"
+                )}
+                onClick={() => onSelectUser(chatUsr)}
+              >
+                <div className="flex gap-2">
+                  <Avatar>
+                    <AvatarImage src={profile} alt={username} />
+                    <AvatarFallback>{username}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <span className="col-start-2 row-span-2 font-medium">{fullName}</span>
+                    <span className="col-start-2 row-span-2 row-start-2 line-clamp-2 text-ellipsis text-muted-foreground group-hover:text-accent-foreground/90">
+                      {lastMsg}
+                    </span>
+                  </div>
+                </div>
+              </button>
+              <Separator className="my-1" />
+            </Fragment>
+          );
+        })}
+      </ScrollArea>
+    </>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/chats/_components/chat-messages.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import type { ChatUser, Convo } from "@/data/chats";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "{{packageName}}/admin-ui/ui/avatar";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import { format } from "date-fns";
+import {
+  ArrowLeft,
+  ImagePlus,
+  MoreVertical,
+  Paperclip,
+  Phone,
+  Plus,
+  Send,
+  Video,
+} from "lucide-react";
+import { Fragment, useState } from "react";
+
+interface ChatMessagesProps {
+  selectedUser: ChatUser;
+  mobileSelectedUser: ChatUser | null;
+  onCloseMobile: () => void;
+}
+
+export function ChatMessages({
+  selectedUser,
+  mobileSelectedUser,
+  onCloseMobile,
+}: ChatMessagesProps) {
+  const [messageText, setMessageText] = useState("");
+
+  const currentMessage = selectedUser?.messages.reduce((acc: Record<string, Convo[]>, obj) => {
+    const key = format(obj.timestamp, "d MMM, yyyy");
+
+    // Create an array for the category if it doesn't exist
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+
+    // Push the current object to the array
+    acc[key].push(obj);
+
+    return acc;
+  }, {});
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // ローカルで処理（APIなし）
+    console.log("Send message:", messageText);
+    setMessageText("");
+  };
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 start-full z-[var(--z-mobile-panel)] hidden w-full flex-1 flex-col border bg-background shadow-xs sm:static sm:z-auto sm:flex sm:rounded-md",
+        mobileSelectedUser && "start-0 flex"
+      )}
+    >
+      {/* Top Part */}
+      <div className="mb-1 flex flex-none justify-between bg-card p-4 shadow-lg sm:rounded-t-md">
+        {/* Left */}
+        <div className="flex gap-3">
+          <Button
+            size="icon"
+            variant="ghost"
+            className="-ms-2 h-full sm:hidden"
+            onClick={onCloseMobile}
+          >
+            <ArrowLeft className="rtl:rotate-180" />
+          </Button>
+          <div className="flex items-center gap-2 lg:gap-4">
+            <Avatar className="size-9 lg:size-11">
+              <AvatarImage src={selectedUser.profile} alt={selectedUser.username} />
+              <AvatarFallback>{selectedUser.username}</AvatarFallback>
+            </Avatar>
+            <div>
+              <span className="col-start-2 row-span-2 text-sm font-medium lg:text-base">
+                {selectedUser.fullName}
+              </span>
+              <span className="col-start-2 row-span-2 row-start-2 line-clamp-1 block max-w-32 text-xs text-nowrap text-ellipsis text-muted-foreground lg:max-w-none lg:text-sm">
+                {selectedUser.title}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Right */}
+        <div className="-me-1 flex items-center gap-1 lg:gap-2">
+          <Button
+            size="icon"
+            variant="ghost"
+            className="hidden size-8 rounded-full sm:inline-flex lg:size-10"
+          >
+            <Video size={22} className="stroke-muted-foreground" />
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="hidden size-8 rounded-full sm:inline-flex lg:size-10"
+          >
+            <Phone size={22} className="stroke-muted-foreground" />
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-10 rounded-md sm:h-8 sm:w-4 lg:h-10 lg:w-6"
+          >
+            <MoreVertical className="stroke-muted-foreground sm:size-5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Conversation */}
+      <div className="flex flex-1 flex-col gap-2 rounded-md px-4 pt-0 pb-4">
+        <div className="flex size-full flex-1">
+          <div className="chat-text-container relative -me-4 flex flex-1 flex-col overflow-y-hidden">
+            <div className="chat-flex flex h-40 w-full grow flex-col-reverse justify-start gap-4 overflow-y-auto py-2 pe-4 pb-4">
+              {currentMessage &&
+                Object.keys(currentMessage).map((key) => (
+                  <Fragment key={key}>
+                    {currentMessage[key].map((msg, index) => (
+                      <div
+                        key={`${msg.sender}-${msg.timestamp}-${index}`}
+                        className={cn(
+                          "chat-box max-w-72 px-3 py-2 wrap-break-word shadow-lg",
+                          msg.sender === "You"
+                            ? "self-end rounded-[16px_16px_0_16px] bg-primary/90 text-primary-foreground/75"
+                            : "self-start rounded-[16px_16px_16px_0] bg-muted"
+                        )}
+                      >
+                        {msg.message}{" "}
+                        <span
+                          className={cn(
+                            "mt-1 block text-xs font-light text-foreground/75 italic",
+                            msg.sender === "You" && "text-end text-primary-foreground/85"
+                          )}
+                        >
+                          {format(msg.timestamp, "h:mm a")}
+                        </span>
+                      </div>
+                    ))}
+                    <div className="text-center text-xs">{key}</div>
+                  </Fragment>
+                ))}
+            </div>
+          </div>
+        </div>
+        <form onSubmit={handleSubmit} className="flex w-full flex-none gap-2">
+          <div className="flex flex-1 items-center gap-2 rounded-md border border-input bg-card px-2 py-1 focus-within:ring-1 focus-within:ring-ring focus-within:outline-hidden lg:gap-4">
+            <div className="space-x-1">
+              <Button size="icon" type="button" variant="ghost" className="h-8 rounded-md">
+                <Plus size={20} className="stroke-muted-foreground" />
+              </Button>
+              <Button
+                size="icon"
+                type="button"
+                variant="ghost"
+                className="hidden h-8 rounded-md lg:inline-flex"
+              >
+                <ImagePlus size={20} className="stroke-muted-foreground" />
+              </Button>
+              <Button
+                size="icon"
+                type="button"
+                variant="ghost"
+                className="hidden h-8 rounded-md lg:inline-flex"
+              >
+                <Paperclip size={20} className="stroke-muted-foreground" />
+              </Button>
+            </div>
+            <label className="flex-1">
+              <span className="sr-only">Chat Text Box</span>
+              <input
+                type="text"
+                placeholder="Type your messages..."
+                className="h-8 w-full bg-inherit focus-visible:outline-hidden"
+                value={messageText}
+                onChange={(e) => setMessageText(e.target.value)}
+              />
+            </label>
+            <Button variant="ghost" size="icon" type="submit" className="hidden sm:inline-flex">
+              <Send size={20} />
+            </Button>
+          </div>
+          <Button type="submit" className="h-full sm:hidden">
+            <Send size={18} /> Send
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/chats/_components/chats-page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { ChatUser } from "@/data/chats";
+import { conversations } from "@/data/chats";
+import { Header } from "{{packageName}}/admin-ui/layout";
+import { Main } from "{{packageName}}/admin-ui/layout";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import { Edit, MessagesSquare } from "lucide-react";
+import { useState } from "react";
+import { ChatList } from "./chat-list";
+import { ChatMessages } from "./chat-messages";
+import { NewChat } from "./new-chat";
+
+export function ChatsPage() {
+  const [search, setSearch] = useState("");
+  const [selectedUser, setSelectedUser] = useState<ChatUser | null>(null);
+  const [mobileSelectedUser, setMobileSelectedUser] = useState<ChatUser | null>(null);
+  const [createConversationDialogOpened, setCreateConversationDialog] = useState(false);
+
+  // Filtered data based on the search query
+  const filteredChatList = conversations.filter(({ fullName }) =>
+    fullName.toLowerCase().includes(search.trim().toLowerCase())
+  );
+
+  const users = conversations.map(({ messages, ...user }) => user);
+
+  return (
+    <>
+      <Header>
+        <div className="flex items-center gap-2">
+          <h1 className="text-2xl font-bold">Chats</h1>
+          <MessagesSquare size={20} />
+        </div>
+      </Header>
+
+      <Main fixed>
+        <section className="flex h-full gap-6">
+          {/* Left Side */}
+          <div className="flex w-full flex-col gap-2 sm:w-56 lg:w-72 2xl:w-80">
+            <div className="sticky top-0 z-[var(--z-sticky)] -mx-4 bg-background px-4 pb-3 shadow-md sm:static sm:z-auto sm:mx-0 sm:p-0 sm:shadow-none">
+              <div className="flex items-center justify-between py-2">
+                <div className="flex gap-2">
+                  <h2 className="text-xl font-bold">Inbox</h2>
+                </div>
+
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => setCreateConversationDialog(true)}
+                  className="rounded-lg"
+                >
+                  <Edit size={24} className="stroke-muted-foreground" />
+                </Button>
+              </div>
+            </div>
+
+            <ChatList
+              filteredChatList={filteredChatList}
+              selectedUser={selectedUser}
+              search={search}
+              onSearchChange={setSearch}
+              onSelectUser={(user) => {
+                setSelectedUser(user);
+                setMobileSelectedUser(user);
+              }}
+            />
+          </div>
+
+          {/* Right Side */}
+          {selectedUser ? (
+            <ChatMessages
+              selectedUser={selectedUser}
+              mobileSelectedUser={mobileSelectedUser}
+              onCloseMobile={() => setMobileSelectedUser(null)}
+            />
+          ) : (
+            <div className="absolute inset-0 start-full z-[var(--z-mobile-panel)] hidden w-full flex-1 flex-col justify-center rounded-md border bg-card shadow-xs sm:static sm:z-auto sm:flex">
+              <div className="flex flex-col items-center space-y-6">
+                <div className="flex size-16 items-center justify-center rounded-full border-2 border-border">
+                  <MessagesSquare className="size-8" />
+                </div>
+                <div className="space-y-2 text-center">
+                  <h2 className="text-xl font-semibold">Your messages</h2>
+                  <p className="text-sm text-muted-foreground">Send a message to start a chat.</p>
+                </div>
+                <Button onClick={() => setCreateConversationDialog(true)}>Send message</Button>
+              </div>
+            </div>
+          )}
+        </section>
+        <NewChat
+          users={users}
+          onOpenChange={setCreateConversationDialog}
+          open={createConversationDialogOpened}
+        />
+      </Main>
+    </>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/chats/_components/new-chat.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import type { ChatUser } from "@/data/chats";
+import { Badge } from "{{packageName}}/admin-ui/ui/badge";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "{{packageName}}/admin-ui/ui/command";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "{{packageName}}/admin-ui/ui/dialog";
+import { Check, X } from "lucide-react";
+import { useState } from "react";
+
+type User = Omit<ChatUser, "messages">;
+
+interface NewChatProps {
+  users: User[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function NewChat({ users, onOpenChange, open }: NewChatProps) {
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+
+  const handleSelectUser = (user: User) => {
+    if (!selectedUsers.find((u) => u.id === user.id)) {
+      setSelectedUsers([...selectedUsers, user]);
+    } else {
+      handleRemoveUser(user.id);
+    }
+  };
+
+  const handleRemoveUser = (userId: string) => {
+    setSelectedUsers(selectedUsers.filter((user) => user.id !== userId));
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    onOpenChange(newOpen);
+    // Reset selected users when dialog closes
+    if (!newOpen) {
+      setSelectedUsers([]);
+    }
+  };
+
+  const handleStartChat = () => {
+    // ローカルで処理（APIなし）
+    console.log("Start chat with:", selectedUsers);
+    handleOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>New message</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-wrap items-baseline-last gap-2">
+            <span className="min-h-6 text-sm text-muted-foreground">To:</span>
+            {selectedUsers.map((user) => (
+              <Badge key={user.id} variant="default">
+                {user.fullName}
+                <button
+                  className="ms-1 rounded-full ring-offset-background outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                  type="button"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleRemoveUser(user.id);
+                    }
+                  }}
+                  onClick={() => handleRemoveUser(user.id)}
+                >
+                  <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                </button>
+              </Badge>
+            ))}
+          </div>
+          <Command className="rounded-lg border">
+            <CommandInput placeholder="Search people..." className="text-foreground" />
+            <CommandList>
+              <CommandEmpty>No people found.</CommandEmpty>
+              <CommandGroup>
+                {users.map((user) => (
+                  <CommandItem
+                    key={user.id}
+                    onSelect={() => handleSelectUser(user)}
+                    className="flex items-center justify-between gap-2 hover:bg-accent hover:text-accent-foreground"
+                  >
+                    <div className="flex items-center gap-2">
+                      <img
+                        src={user.profile || "/placeholder.svg"}
+                        alt={user.fullName}
+                        className="h-8 w-8 rounded-full"
+                      />
+                      <div className="flex flex-col">
+                        <span className="text-sm font-medium">{user.fullName}</span>
+                        <span className="text-xs text-accent-foreground/70">{user.username}</span>
+                      </div>
+                    </div>
+
+                    {selectedUsers.find((u) => u.id === user.id) && <Check className="h-4 w-4" />}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+          <Button variant="default" onClick={handleStartChat} disabled={selectedUsers.length === 0}>
+            Chat
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { ChatsPage } from "./_components/chats-page";
+
+export const metadata: Metadata = {
+  title: "Chats",
+};
+
+export default function Page() {
+  return <ChatsPage />;
+}

package/templates/default/apps/admin/src/app/dashboard/layout.tsx

@@ -0,0 +1,9 @@
+import { AdminLayout } from "@/components/layout/admin-layout";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <AdminLayout>{children}</AdminLayout>;
+}

package/templates/default/apps/admin/src/app/dashboard/not-found.tsx

@@ -0,0 +1,14 @@
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import Link from "next/link";
+
+export default function DashboardNotFound() {
+  return (
+    <div className="flex h-full flex-1 flex-col items-center justify-center gap-4">
+      <h1 className="text-4xl font-bold">404</h1>
+      <p className="text-muted-foreground">ページが見つかりません</p>
+      <Button asChild>
+        <Link href="/dashboard">ダッシュボードに戻る</Link>
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { DashboardPage } from "./_components/dashboard-page";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+};
+
+export default function Page() {
+  return <DashboardPage />;
+}

package/templates/default/apps/admin/src/app/dashboard/settings/_components/content-section.tsx

@@ -0,0 +1,20 @@
+import { Separator } from "{{packageName}}/admin-ui/ui/separator";
+
+type ContentSectionProps = {
+  title: string;
+  desc: string;
+  children: React.ReactNode;
+};
+
+export function ContentSection({ title, desc, children }: ContentSectionProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">{title}</h3>
+        <p className="text-sm text-muted-foreground">{desc}</p>
+      </div>
+      <Separator />
+      <div className="max-w-2xl">{children}</div>
+    </div>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/settings/_components/sidebar-nav.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { buttonVariants } from "{{packageName}}/admin-ui/ui/button";
+import { ScrollArea } from "{{packageName}}/admin-ui/ui/scroll-area";
+import { Bell, Monitor, Palette, UserCog, Wrench } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const sidebarNavItems = [
+  {
+    title: "Profile",
+    href: "/dashboard/settings/profile",
+    icon: UserCog,
+  },
+  {
+    title: "Account",
+    href: "/dashboard/settings/account",
+    icon: Wrench,
+  },
+  {
+    title: "Appearance",
+    href: "/dashboard/settings/appearance",
+    icon: Palette,
+  },
+  {
+    title: "Notifications",
+    href: "/dashboard/settings/notifications",
+    icon: Bell,
+  },
+  {
+    title: "Display",
+    href: "/dashboard/settings/display",
+    icon: Monitor,
+  },
+];
+
+export function SidebarNav() {
+  const pathname = usePathname();
+
+  return (
+    <ScrollArea className="h-full w-full">
+      <nav className="flex flex-col space-y-1">
+        {sidebarNavItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                buttonVariants({ variant: "ghost" }),
+                pathname === item.href
+                  ? "bg-muted hover:bg-muted"
+                  : "hover:bg-transparent hover:underline",
+                "justify-start"
+              )}
+            >
+              <Icon className="mr-2 size-4" />
+              {item.title}
+            </Link>
+          );
+        })}
+      </nav>
+    </ScrollArea>
+  );
+}