@thunder-stack/create-thunder-app 0.0.1

package/template/client/shared/src/features/home/screen.tsx

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from "react";
+import { View as MotiView } from "moti";
+import { View, Text, ActivityIndicator, TouchableOpacity, Platform, Image } from "react-native";
+import { authClient } from "../../utils/auth";
+import { LoginScreen } from "../auth/login";
+import { DashboardView } from "../dashboard";
+import { UserManagementView } from "../management/users";
+import { RolesManagementView } from "../management/roles";
+
+const logoSource = Platform.select({
+  web: { uri: "/logo.svg" },
+  default: require("../../../../assets/logo.png"),
+});
+
+export function HomeScreen() {
+  const { data: session, isPending: sessionPending } = authClient.useSession();
+  const [me, setMe] = useState<{ roles: string[]; permissions: string[] } | null>(null);
+  const [mePending, setMePending] = useState(false);
+  const [activeTab, setActiveTab] = useState("dashboard"); // "dashboard" | "users" | "roles"
+
+  const fetchProfile = async () => {
+    if (!session) return;
+    setMePending(true);
+    try {
+      const res = await fetch(`${authClient.baseURL}/api/me`, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const data = await res.json();
+      if (!data.error) {
+        setMe({
+          roles: data.roles,
+          permissions: data.permissions,
+        });
+      }
+    } catch (err) {
+      console.error("Failed to load profile details:", err);
+    } finally {
+      setMePending(false);
+    }
+  };
+
+  useEffect(() => {
+    if (session) {
+      fetchProfile();
+    } else {
+      setMe(null);
+    }
+  }, [session]);
+
+  const handleSignOut = async () => {
+    try {
+      await authClient.signOut();
+      setMe(null);
+      setActiveTab("dashboard");
+    } catch (error) {
+      console.error("Sign out failed:", error);
+    }
+  };
+
+  if (sessionPending || (session && mePending)) {
+    return (
+      <View className="flex-1 items-center justify-center bg-slate-950">
+        <ActivityIndicator size="large" color="#3b82f6" />
+      </View>
+    );
+  }
+
+  // If not authenticated, render LoginScreen
+  if (!session) {
+    return (
+      <View className="flex-1 items-center justify-center bg-slate-950 px-6 py-12 relative overflow-hidden">
+        {/* Glowing visual background lights */}
+        <View className="absolute top-1/4 left-1/4 w-80 h-80 bg-blue-600/10 rounded-full blur-3xl" />
+        <View className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-indigo-600/10 rounded-full blur-3xl" />
+
+        {/* Main Branding Header */}
+        <View className="items-center mb-6">
+          <Image
+            source={logoSource}
+            style={{ width: 80, height: 80, marginBottom: 16, borderRadius: 16 }}
+            resizeMode="contain"
+          />
+          <Text className="text-5xl font-black tracking-tight text-white mb-2">
+            THUNDER<Text className="text-yellow-500">.stack</Text>
+          </Text>
+          <Text className="text-slate-400 text-sm font-medium text-center max-w-sm leading-6">
+            Unified Solito Interface • Cross-Platform Web & Mobile
+          </Text>
+        </View>
+
+        <LoginScreen onSuccess={fetchProfile} />
+      </View>
+    );
+  }
+
+  // Permissions mapping helper
+  const hasPermission = (perm: string) => {
+    return me?.permissions?.includes(perm) ?? false;
+  };
+
+  return (
+    <View className="flex-1 bg-slate-950 flex-row flex-wrap">
+      {/* Dynamic Visual Glowing Background Lights */}
+      <View className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-600/5 rounded-full blur-3xl" />
+      <View className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-600/5 rounded-full blur-3xl" />
+
+      {/* Navigation Layout Header/Sidebar */}
+      {/* On Web/Desktop we can render a sidebar, on mobile we render a top header */}
+      <View className="w-full md:w-64 bg-slate-900/40 border-b md:border-b-0 md:border-r border-slate-900 p-6 flex-col justify-between">
+        <View>
+          {/* Logo Branding */}
+          <View className="mb-8 flex-row items-center justify-between">
+            <View className="flex-row items-center gap-3">
+              <Image
+                source={logoSource}
+                style={{ width: 32, height: 32, borderRadius: 8 }}
+                resizeMode="contain"
+              />
+              <Text className="text-2xl font-black text-white tracking-tight">
+                THUNDER<Text className="text-yellow-500">.stack</Text>
+              </Text>
+            </View>
+            <View className="bg-emerald-500/10 border border-emerald-500/20 px-2 py-0.5 rounded-full">
+              <Text className="text-emerald-400 text-[10px] font-bold uppercase tracking-wider">Live</Text>
+            </View>
+          </View>
+
+          {/* Navigation Items */}
+          <View className="gap-2">
+            <TouchableOpacity
+              onPress={() => setActiveTab("dashboard")}
+              className={`w-full px-4 py-3 rounded-xl flex-row items-center gap-3 ${
+                activeTab === "dashboard" ? "bg-blue-600/10 border border-blue-500/20" : "border border-transparent"
+              }`}
+            >
+              <Text className={`font-bold text-sm ${activeTab === "dashboard" ? "text-blue-400" : "text-slate-400"}`}>
+                📊 Dashboard
+              </Text>
+            </TouchableOpacity>
+
+            {hasPermission("manage:user") && (
+              <TouchableOpacity
+                onPress={() => setActiveTab("users")}
+                className={`w-full px-4 py-3 rounded-xl flex-row items-center gap-3 ${
+                  activeTab === "users" ? "bg-blue-600/10 border border-blue-500/20" : "border border-transparent"
+                }`}
+              >
+                <Text className={`font-bold text-sm ${activeTab === "users" ? "text-blue-400" : "text-slate-400"}`}>
+                  👥 Users
+                </Text>
+              </TouchableOpacity>
+            )}
+
+            {(hasPermission("manage:role") || hasPermission("manage:role-perm")) && (
+              <TouchableOpacity
+                onPress={() => setActiveTab("roles")}
+                className={`w-full px-4 py-3 rounded-xl flex-row items-center gap-3 ${
+                  activeTab === "roles" ? "bg-blue-600/10 border border-blue-500/20" : "border border-transparent"
+                }`}
+              >
+                <Text className={`font-bold text-sm ${activeTab === "roles" ? "text-blue-400" : "text-slate-400"}`}>
+                  🔑 Roles & Perms
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+
+        {/* User Card & Logout inside Sidebar */}
+        <View className="mt-8 border-t border-slate-900 pt-6 gap-4">
+          <View className="flex-row items-center gap-3">
+            <View className="w-9 h-9 rounded-full bg-slate-800 border border-slate-700 items-center justify-center">
+              <Text className="text-white text-sm font-bold">
+                {session?.user?.name?.charAt(0) ?? "U"}
+              </Text>
+            </View>
+            <View className="flex-1">
+              <Text className="text-white text-xs font-bold leading-4 truncate max-w-[140px]" numberOfLines={1}>
+                {session?.user?.name}
+              </Text>
+              <Text className="text-slate-500 text-[10px] truncate max-w-[140px]" numberOfLines={1}>
+                {session?.user?.email}
+              </Text>
+            </View>
+          </View>
+
+          <TouchableOpacity
+            onPress={handleSignOut}
+            className="w-full bg-slate-950/40 border border-slate-800/80 py-2.5 rounded-xl items-center"
+          >
+            <Text className="text-slate-400 text-xs font-bold">Sign Out</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* Main Content Area */}
+      <View className="flex-1 min-w-[280px]">
+        {activeTab === "dashboard" && (
+          <DashboardView
+            user={session.user}
+            roles={me?.roles ?? []}
+            permissions={me?.permissions ?? []}
+          />
+        )}
+        {activeTab === "users" && hasPermission("manage:user") && <UserManagementView />}
+        {activeTab === "roles" && (hasPermission("manage:role") || hasPermission("manage:role-perm")) && <RolesManagementView />}
+      </View>
+    </View>
+  );
+}

package/template/client/shared/src/features/management/roles.tsx

@@ -0,0 +1,356 @@
+import React, { useEffect, useState } from "react";
+import { View as MotiView } from "moti";
+import { View, Text, ActivityIndicator, ScrollView, RefreshControl, TextInput, TouchableOpacity } from "react-native";
+import { Card } from "../../components/Card";
+import { authClient } from "../../utils/auth";
+
+function RolesSkeleton() {
+  return (
+    <ScrollView className="flex-1">
+      <View className="p-6 gap-8">
+        <View>
+          <View className="h-3 w-20 bg-slate-800 rounded mb-2" />
+          <View className="h-8 w-48 bg-slate-800 rounded" />
+        </View>
+        
+        {/* Create Role Form Skeleton */}
+        <MotiView
+          from={{ opacity: 0.3 }}
+          animate={{ opacity: 0.7 }}
+          transition={{
+            type: "timing",
+            duration: 900,
+            loop: true,
+          }}
+          className="bg-slate-900/40 border-slate-800 p-6 rounded-2xl border gap-4"
+        >
+          <View className="h-5 w-40 bg-slate-800 rounded mb-2" />
+          <View className="h-10 w-full bg-slate-800 rounded-xl" />
+          <View className="h-10 w-full bg-slate-800 rounded-xl" />
+          <View className="h-10 w-full bg-slate-800 rounded-xl" />
+        </MotiView>
+        
+        {/* Role Cards List Skeleton */}
+        <View className="gap-6">
+          <View className="h-6 w-44 bg-slate-800 rounded mb-2" />
+          {[1, 2].map((i) => (
+            <MotiView
+              key={i}
+              from={{ opacity: 0.3 }}
+              animate={{ opacity: 0.7 }}
+              transition={{
+                type: "timing",
+                duration: 900,
+                loop: true,
+                delay: i * 200,
+              }}
+              className="bg-slate-900/40 border-slate-800 p-6 rounded-2xl border gap-4 min-h-[160px]"
+            >
+              <View className="flex-row justify-between items-start">
+                <View className="gap-2">
+                  <View className="h-5 w-32 bg-slate-800 rounded" />
+                  <View className="h-3.5 w-64 bg-slate-800 rounded" />
+                </View>
+              </View>
+              <View className="mt-2 border-t border-slate-800/60 pt-4 gap-3">
+                <View className="h-3 w-36 bg-slate-800 rounded" />
+                <View className="flex-row gap-2 flex-wrap">
+                  {[1, 2, 3, 4].map((j) => (
+                    <View key={j} className="w-24 h-8 bg-slate-800 rounded-full" />
+                  ))}
+                </View>
+              </View>
+            </MotiView>
+          ))}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+export function RolesManagementView() {
+  const [roles, setRoles] = useState<any[]>([]);
+  const [permissions, setPermissions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [newRoleName, setNewRoleName] = useState("");
+  const [newRoleDesc, setNewRoleDesc] = useState("");
+  const [actionLoading, setActionLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const fetchData = async () => {
+    try {
+      const rolesRes = await fetch(`${authClient.baseURL}/api/management/roles`);
+      const rolesData = await rolesRes.json();
+
+      const permsRes = await fetch(`${authClient.baseURL}/api/management/permissions`);
+      const permsData = await permsRes.json();
+
+      if (rolesRes.status === 403 || permsRes.status === 403) {
+        setError("Permission denied.");
+      } else {
+        setRoles(rolesData);
+        setPermissions(permsData);
+      }
+    } catch (err) {
+      console.error("Failed to load roles and permissions:", err);
+      setError("Failed to fetch data.");
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleCreateRole = async () => {
+    if (!newRoleName) {
+      setError("Role name is required.");
+      return;
+    }
+
+    setActionLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch(`${authClient.baseURL}/api/management/roles`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ name: newRoleName, description: newRoleDesc }),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to create role.");
+      }
+
+      setNewRoleName("");
+      setNewRoleDesc("");
+      await fetchData();
+    } catch (err: any) {
+      setError(err?.message || "An error occurred during role creation.");
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleDeleteRole = async (roleId: string) => {
+    if (roleId === "role_admin" || roleId === "role_user") {
+      setError("Default system roles (Admin/User) cannot be deleted.");
+      return;
+    }
+
+    setActionLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch(`${authClient.baseURL}/api/management/roles/${roleId}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to delete role.");
+      }
+
+      await fetchData();
+    } catch (err: any) {
+      setError(err?.message || "Failed to delete role.");
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleTogglePermission = async (roleId: string, permissionId: string, currentlyAssigned: boolean) => {
+    setActionLoading(true);
+    setError("");
+
+    try {
+      const url = `${authClient.baseURL}/api/management/roles/${roleId}/permissions${
+        currentlyAssigned ? `/${permissionId}` : ""
+      }`;
+      const method = currentlyAssigned ? "DELETE" : "POST";
+
+      const res = await fetch(url, {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: method === "POST" ? JSON.stringify({ permissionId }) : undefined,
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to update permission mapping.");
+      }
+
+      await fetchData();
+    } catch (err: any) {
+      setError(err?.message || "Failed to toggle permission.");
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    fetchData();
+  };
+
+  if (loading) {
+    return <RolesSkeleton />;
+  }
+
+  return (
+    <ScrollView
+      className="flex-1"
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor="#3b82f6" />
+      }
+    >
+      <View className="p-6 gap-8">
+        {/* Title */}
+        <MotiView
+          from={{ opacity: 0, translateY: -10 }}
+          animate={{ opacity: 1, translateY: 0 }}
+          transition={{ type: "timing", duration: 400 }}
+        >
+          <Text className="text-slate-400 text-xs font-bold uppercase tracking-widest mb-1">
+            Administration
+          </Text>
+          <Text className="text-white text-3xl font-black tracking-tight">
+            Roles & Permissions
+          </Text>
+        </MotiView>
+
+        {error ? (
+          <View className="p-4 bg-red-950/40 border border-red-500/20 rounded-xl">
+            <Text className="text-red-400 text-xs font-semibold text-center">{error}</Text>
+          </View>
+        ) : null}
+
+        {/* Create Role Form */}
+        <MotiView
+          from={{ opacity: 0, scale: 0.98 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ type: "timing", duration: 400 }}
+        >
+          <Card className="bg-slate-900/40 border-slate-800 p-6 rounded-2xl border">
+            <Text className="text-white text-lg font-bold mb-4">Create New Custom Role</Text>
+            <View className="gap-4">
+              <View>
+                <Text className="text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2">
+                  Role Name
+                </Text>
+                <TextInput
+                  className="w-full bg-slate-950/60 border border-slate-800 text-white rounded-xl px-4 py-3 text-sm focus:border-blue-500"
+                  placeholder="e.g. Editor"
+                  placeholderTextColor="#64748b"
+                  value={newRoleName}
+                  onChangeText={setNewRoleName}
+                />
+              </View>
+
+              <View>
+                <Text className="text-slate-400 text-xs font-semibold uppercase tracking-wider mb-2">
+                  Description
+                </Text>
+                <TextInput
+                  className="w-full bg-slate-950/60 border border-slate-800 text-white rounded-xl px-4 py-3 text-sm focus:border-blue-500"
+                  placeholder="Role description here..."
+                  placeholderTextColor="#64748b"
+                  value={newRoleDesc}
+                  onChangeText={setNewRoleDesc}
+                />
+              </View>
+
+              {actionLoading ? (
+                <ActivityIndicator size="small" color="#3b82f6" className="my-2" />
+              ) : (
+                <TouchableOpacity
+                  onPress={handleCreateRole}
+                  className="w-full bg-blue-600 border border-blue-500 rounded-xl py-3 items-center"
+                >
+                  <Text className="text-white font-extrabold text-sm">Create Role</Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          </Card>
+        </MotiView>
+
+        {/* Roles List & Matrix */}
+        <View className="gap-6">
+          <Text className="text-white text-xl font-bold">System Role Mappings</Text>
+
+          {roles.map((roleItem, index) => {
+            const rolePerms = roleItem.permissions.map((p: any) => p.name);
+            const isSystemRole = roleItem.id === "role_admin" || roleItem.id === "role_user";
+
+            return (
+              <MotiView
+                key={roleItem.id}
+                from={{ opacity: 0, translateY: 15 }}
+                animate={{ opacity: 1, translateY: 0 }}
+                transition={{ type: "timing", duration: 400, delay: index * 50 }}
+              >
+                <Card className="bg-slate-900/40 border-slate-800 p-6 rounded-2xl border gap-4">
+                  <View className="flex-row justify-between items-start">
+                    <View className="flex-1">
+                      <Text className="text-white text-lg font-extrabold">{roleItem.name}</Text>
+                      <Text className="text-slate-400 text-xs mt-1">{roleItem.description}</Text>
+                    </View>
+                    {!isSystemRole && (
+                      <TouchableOpacity
+                        onPress={() => handleDeleteRole(roleItem.id)}
+                        disabled={actionLoading}
+                        className="bg-red-950/20 border border-red-500/20 px-3 py-1 rounded-md"
+                      >
+                        <Text className="text-red-400 text-xs font-bold">Delete</Text>
+                      </TouchableOpacity>
+                    )}
+                  </View>
+
+                  <View className="mt-2 border-t border-slate-800/60 pt-4">
+                    <Text className="text-slate-500 text-xs font-bold uppercase tracking-wider mb-3">
+                      Permission Assignments
+                    </Text>
+
+                    <View className="flex-row flex-wrap gap-2">
+                      {permissions.map((perm) => {
+                        const isAssigned = rolePerms.includes(perm.name);
+                        return (
+                          <TouchableOpacity
+                            key={perm.id}
+                            onPress={() => handleTogglePermission(roleItem.id, perm.id, isAssigned)}
+                            disabled={actionLoading}
+                            className={`flex-row items-center gap-1.5 px-3 py-1.5 rounded-full border ${
+                              isAssigned
+                                ? "bg-emerald-500/10 border-emerald-500/30"
+                                : "bg-slate-950/40 border-slate-800"
+                            }`}
+                          >
+                            <Text
+                              className={`text-xs font-semibold ${
+                                isAssigned ? "text-emerald-400" : "text-slate-400"
+                              }`}
+                            >
+                              {isAssigned ? "✓" : "+"} {perm.name}
+                            </Text>
+                          </TouchableOpacity>
+                        );
+                      })}
+                    </View>
+                  </View>
+                </Card>
+              </MotiView>
+            );
+          })}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}