create-einja-app 0.1.1

package/templates/turborepo-pandacss/apps/web/src/app/(authenticated)/data/_components/UserTable.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import type { UserListItem } from "@/application/use-cases/UserUseCases";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DataTable } from "@/components/ui/data-table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown, Edit, Eye, MoreHorizontal, Trash2 } from "lucide-react";
+
+/**
+ * ステータスバッジを表示
+ */
+function getStatusBadge(status: UserListItem["status"]) {
+  switch (status) {
+    case "active":
+      return <Badge variant="default">アクティブ</Badge>;
+    case "inactive":
+      return <Badge variant="secondary">非アクティブ</Badge>;
+    case "pending":
+      return <Badge variant="outline">保留中</Badge>;
+    default:
+      return <Badge variant="outline">{status}</Badge>;
+  }
+}
+
+/**
+ * ロールバッジを表示
+ */
+function getRoleBadge(role: UserListItem["role"]) {
+  switch (role) {
+    case "admin":
+      return <Badge variant="destructive">管理者</Badge>;
+    case "moderator":
+      return <Badge variant="default">モデレーター</Badge>;
+    case "user":
+      return <Badge variant="secondary">ユーザー</Badge>;
+    default:
+      return <Badge variant="outline">{role}</Badge>;
+  }
+}
+
+/**
+ * 日付をフォーマット
+ */
+function formatDate(dateString: string | null): string {
+  if (!dateString) return "-";
+  const date = new Date(dateString);
+  return date.toLocaleDateString("ja-JP");
+}
+
+/**
+ * テーブルの列定義
+ */
+const columns: ColumnDef<UserListItem>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          名前
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const name = row.getValue("name") as string;
+      return <div className="font-medium">{name || "-"}</div>;
+    },
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          メールアドレス
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      return <div className="text-muted-foreground">{row.getValue("email")}</div>;
+    },
+  },
+  {
+    accessorKey: "status",
+    header: "ステータス",
+    cell: ({ row }) => {
+      const status = row.getValue("status") as UserListItem["status"];
+      return getStatusBadge(status);
+    },
+  },
+  {
+    accessorKey: "role",
+    header: "ロール",
+    cell: ({ row }) => {
+      const role = row.getValue("role") as UserListItem["role"];
+      return getRoleBadge(role);
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          作成日
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      return <div>{formatDate(row.getValue("createdAt"))}</div>;
+    },
+  },
+  {
+    accessorKey: "lastLogin",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          最終ログイン
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      return <div>{formatDate(row.getValue("lastLogin"))}</div>;
+    },
+  },
+  {
+    id: "actions",
+    header: "操作",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const user = row.original;
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">メニューを開く</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => console.log("詳細表示:", user.id)}>
+              <Eye className="mr-2 h-4 w-4" />
+              詳細表示
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => console.log("編集:", user.id)}>
+              <Edit className="mr-2 h-4 w-4" />
+              編集
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => console.log("削除:", user.id)}
+              className="text-destructive"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              削除
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+interface UserTableProps {
+  users: readonly UserListItem[];
+}
+
+/**
+ * ユーザーテーブルコンポーネント
+ */
+export function UserTable({ users }: UserTableProps) {
+  return (
+    <DataTable
+      columns={columns}
+      data={users as UserListItem[]}
+      searchKey="name"
+      searchPlaceholder="ユーザー名で検索..."
+      enableColumnVisibility={true}
+      enablePagination={true}
+      pageSize={10}
+    />
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/app/(authenticated)/data/page.tsx

@@ -0,0 +1,57 @@
+import { userUseCases } from "@/application/use-cases/UserUseCases";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { UserTable } from "./_components/UserTable";
+
+export default async function DataPage() {
+  const result = await userUseCases.list({}, { page: 1, limit: 100 });
+
+  if (!result.isSuccess) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">データ管理</h1>
+            <p className="text-muted-foreground">
+              ユーザーデータの管理と操作を行うことができます。
+            </p>
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>エラー</CardTitle>
+              <CardDescription>データの取得中にエラーが発生しました。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-destructive">{result.error.message}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  const { items: users } = result.value;
+
+  return (
+    <div className="container mx-auto p-6">
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">データ管理</h1>
+          <p className="text-muted-foreground">ユーザーデータの管理と操作を行うことができます。</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>ユーザー一覧</CardTitle>
+            <CardDescription>
+              システムに登録されているユーザーの一覧です。検索、フィルタリング、ソートが可能です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <UserTable users={users} />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/app/(authenticated)/layout-client.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Sidebar } from "@/components/shared/Sidebar";
+import { Header } from "@/components/shared/header";
+import { useState } from "react";
+
+interface AuthenticatedLayoutClientProps {
+  children: React.ReactNode;
+  user:
+    | {
+        id?: string;
+        name?: string | null;
+        email?: string | null;
+        image?: string | null;
+      }
+    | undefined;
+}
+
+export function AuthenticatedLayoutClient({ children, user }: AuthenticatedLayoutClientProps) {
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+
+  return (
+    <div className="flex h-screen bg-background">
+      <Sidebar isMobileOpen={isMobileOpen} setIsMobileOpen={setIsMobileOpen} />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header user={user} onMobileMenuToggle={() => setIsMobileOpen(!isMobileOpen)} />
+        <main className="flex-1 overflow-auto p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/app/(authenticated)/layout.tsx

@@ -0,0 +1,17 @@
+import { auth } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import { AuthenticatedLayoutClient } from "./layout-client";
+
+interface AuthenticatedLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
+  const session = await auth();
+
+  if (!session) {
+    redirect("/signin");
+  }
+
+  return <AuthenticatedLayoutClient user={session.user}>{children}</AuthenticatedLayoutClient>;
+}

package/templates/turborepo-pandacss/apps/web/src/app/(authenticated)/profile/page.tsx

@@ -0,0 +1,59 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { auth } from "@/lib/auth";
+
+export default async function ProfilePage() {
+  const session = await auth();
+
+  if (!session?.user) {
+    return <div>ユーザー情報が見つかりません</div>;
+  }
+
+  const { user } = session;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold">プロフィール</h1>
+        <p className="text-muted-foreground">あなたのアカウント情報を確認できます。</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>ユーザー情報</CardTitle>
+          <CardDescription>現在のアカウント情報です。</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <span className="text-sm font-medium text-muted-foreground">名前</span>
+              <p className="text-sm">{user.name || "未設定"}</p>
+            </div>
+
+            <div>
+              <span className="text-sm font-medium text-muted-foreground">メールアドレス</span>
+              <p className="text-sm">{user.email || "未設定"}</p>
+            </div>
+
+            <div>
+              <span className="text-sm font-medium text-muted-foreground">ユーザーID</span>
+              <p className="text-sm font-mono">{user.id || "未設定"}</p>
+            </div>
+
+            {user.image && (
+              <div>
+                <span className="text-sm font-medium text-muted-foreground">プロフィール画像</span>
+                <div className="mt-2">
+                  <img
+                    src={user.image}
+                    alt={user.name || "Profile"}
+                    className="w-16 h-16 rounded-full object-cover"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from "@/lib/auth";
+
+export const { GET, POST } = handlers;

package/templates/turborepo-pandacss/apps/web/src/app/api/auth/signup/route.ts

@@ -0,0 +1,70 @@
+import { prisma } from "{{packageName}}/server-core/infrastructure/database/client";
+import bcrypt from "bcryptjs";
+import { type NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+
+const signupSchema = z.object({
+  name: z.string().min(1, "名前は必須です"),
+  email: z.string().email("有効なメールアドレスを入力してください"),
+  password: z.string().min(8, "パスワードは8文字以上で入力してください"),
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    // バリデーション
+    const { name, email, password } = signupSchema.parse(body);
+
+    // 既存ユーザーのチェック
+    const existingUser = await prisma.user.findUnique({
+      where: { email },
+    });
+
+    if (existingUser) {
+      return NextResponse.json(
+        { error: "このメールアドレスは既に使用されています" },
+        { status: 400 }
+      );
+    }
+
+    // パスワードをハッシュ化
+    const hashedPassword = await bcrypt.hash(password, 12);
+
+    // ユーザーを作成
+    const user = await prisma.user.create({
+      data: {
+        name,
+        email,
+        password: hashedPassword,
+      },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        createdAt: true,
+      },
+    });
+
+    return NextResponse.json(
+      {
+        message: "アカウントが正常に作成されました",
+        user,
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error("Signup error:", error);
+
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: error.errors[0].message }, { status: 400 });
+    }
+
+    return NextResponse.json(
+      {
+        error: "アカウント作成中にエラーが発生しました",
+      },
+      { status: 500 }
+    );
+  }
+}

package/templates/turborepo-pandacss/apps/web/src/app/error.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { css } from "@/styled-system/css";
+import { flex } from "@/styled-system/patterns";
+
+type ErrorPageProps = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+export default function ErrorPage({ error, reset }: ErrorPageProps) {
+  const handleHomeClick = () => {
+    window.location.href = "/";
+  };
+
+  return (
+    <div
+      className={css({
+        minH: "100vh",
+        display: "flex",
+        flexDir: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        p: "4",
+        bg: "white",
+      })}
+    >
+      <div
+        className={css({
+          textAlign: "center",
+        })}
+      >
+        <h1 className={css({ mb: "4" })}>エラーが発生しました</h1>
+        <p
+          className={css({
+            color: "gray.600",
+            mb: "8",
+            fontSize: "lg",
+          })}
+        >
+          申し訳ありません。予期せぬエラーが発生しました。
+        </p>
+        <div className={flex({ gap: "4", justify: "center" })}>
+          <button
+            type="button"
+            onClick={reset}
+            className={css({
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              px: "6",
+              py: "3",
+              bg: "blue.500",
+              color: "white",
+              fontWeight: "semibold",
+              rounded: "md",
+              _hover: { bg: "blue.600" },
+              _active: { bg: "blue.700" },
+              transition: "all 0.2s",
+            })}
+          >
+            もう一度試す
+          </button>
+          <button
+            type="button"
+            onClick={handleHomeClick}
+            className={css({
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              px: "6",
+              py: "3",
+              border: "1px solid",
+              borderColor: "blue.500",
+              color: "blue.500",
+              fontWeight: "semibold",
+              rounded: "md",
+              _hover: { bg: "blue.50" },
+              _active: { bg: "blue.100" },
+              transition: "all 0.2s",
+            })}
+          >
+            トップページへ戻る
+          </button>
+        </div>
+        {process.env.NODE_ENV === "development" && (
+          <pre
+            className={css({
+              mt: "8",
+              p: "4",
+              bg: "gray.100",
+              rounded: "md",
+              textAlign: "left",
+              overflow: "auto",
+              maxW: "full",
+              fontFamily: "mono",
+              fontSize: "sm",
+            })}
+          >
+            {error.message}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/turborepo-pandacss/apps/web/src/app/global-error.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { css } from "@/styled-system/css";
+import { flex } from "@/styled-system/patterns";
+
+type GlobalErrorPageProps = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+export default function GlobalError({ error, reset }: GlobalErrorPageProps) {
+  const handleHomeClick = () => {
+    window.location.href = "/";
+  };
+
+  return (
+    <html lang="ja">
+      <body>
+        <div
+          className={css({
+            minH: "100vh",
+            display: "flex",
+            flexDir: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            p: "4",
+            bg: "gray.50",
+          })}
+        >
+          <div
+            className={css({
+              textAlign: "center",
+            })}
+          >
+            <h1 className={css({ mb: "4" })}>システムエラー</h1>
+            <p
+              className={css({
+                color: "gray.600",
+                mb: "8",
+                fontSize: "lg",
+              })}
+            >
+              申し訳ありません。システムエラーが発生しました。
+            </p>
+            <div className={flex({ gap: "4", justify: "center" })}>
+              <button
+                type="button"
+                onClick={reset}
+                className={css({
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  px: "6",
+                  py: "3",
+                  bg: "blue.500",
+                  color: "white",
+                  fontWeight: "semibold",
+                  rounded: "md",
+                  _hover: { bg: "blue.600" },
+                  _active: { bg: "blue.700" },
+                  transition: "all 0.2s",
+                })}
+              >
+                もう一度試す
+              </button>
+              <button
+                type="button"
+                onClick={handleHomeClick}
+                className={css({
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  px: "6",
+                  py: "3",
+                  border: "1px solid",
+                  borderColor: "blue.500",
+                  color: "blue.500",
+                  fontWeight: "semibold",
+                  rounded: "md",
+                  _hover: { bg: "blue.50" },
+                  _active: { bg: "blue.100" },
+                  transition: "all 0.2s",
+                })}
+              >
+                トップページへ戻る
+              </button>
+            </div>
+            {process.env.NODE_ENV === "development" && (
+              <pre
+                className={css({
+                  mt: "8",
+                  p: "4",
+                  bg: "gray.100",
+                  rounded: "md",
+                  textAlign: "left",
+                  overflow: "auto",
+                  maxW: "full",
+                  fontFamily: "mono",
+                  fontSize: "sm",
+                })}
+              >
+                {error.message}
+              </pre>
+            )}
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}