@lastbrain/module-auth 0.1.2 → 0.1.4

package/src/web/admin/users.tsx

@@ -1,3 +1,292 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Spinner,
+  Chip,
+  Input,
+  Button,
+  Pagination,
+  Avatar,
+  addToast,
+} from "@lastbrain/ui";
+import { Users, Search, RefreshCw } from "lucide-react";
+
+interface User {
+  id: string;
+  email: string;
+  created_at: string;
+  email_confirmed_at?: string;
+  last_sign_in_at?: string;
+  role?: string;
+  full_name?: string;
+  avatar_path?: string;
+  metadata?: Record<string, any>;
+  profile: {
+    first_name?: string;
+    last_name?: string;
+    avatar_url?: string;
+    company?: string;
+    location?: string;
+    bio?: string;
+    phone?: string;
+    website?: string;
+    language?: string;
+    timezone?: string;
+  };
+}
+
+interface PaginationData {
+  page: number;
+  per_page: number;
+  total: number;
+  total_pages: number;
+}
+
 export function AdminUsersPage() {
-  return <div>Admin Users Page</div>;
+  const [users, setUsers] = useState<User[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [pagination, setPagination] = useState<PaginationData>({
+    page: 1,
+    per_page: 20,
+    total: 0,
+    total_pages: 0,
+  });
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const params = new URLSearchParams({
+        page: pagination.page.toString(),
+        per_page: pagination.per_page.toString(),
+      });
+
+      if (searchQuery) {
+        params.append("search", searchQuery);
+      }
+
+      const response = await fetch(`/api/admin/users?${params}`);
+
+      if (response.status === 403) {
+        setError("You don't have permission to access this page");
+        addToast({
+          title: "Access Denied",
+          description: "Superadmin access required",
+          color: "danger",
+        });
+        return;
+      }
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch users");
+      }
+
+      const result = await response.json();
+      setUsers(result.data || []);
+      if (result.pagination) {
+        setPagination(result.pagination);
+      }
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+      addToast({
+        title: "Error",
+        description: "Failed to load users",
+        color: "danger",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [pagination.page, pagination.per_page, searchQuery]);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  const handleSearch = () => {
+    setPagination((prev) => ({ ...prev, page: 1 }));
+    fetchUsers();
+  };
+
+  const handlePageChange = (page: number) => {
+    setPagination((prev) => ({ ...prev, page }));
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  if (error && users.length === 0) {
+    return (
+      <div className="pt-12 pb-12 max-w-7xl mx-auto px-4">
+        <Card>
+          <CardBody>
+            <p className="text-danger">{error}</p>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-12 pb-12 max-w-7xl mx-auto px-4">
+      <div className="flex items-center gap-2 mb-8">
+        <Users className="w-8 h-8" />
+        <h1 className="text-3xl font-bold">User Management</h1>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col md:flex-row gap-4 w-full">
+            <div className="flex gap-2 flex-1">
+              <Input
+                placeholder="Search by email or name..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === "Enter") {
+                    handleSearch();
+                  }
+                }}
+                startContent={<Search className="w-4 h-4 text-default-400" />}
+                className="flex-1"
+              />
+              <Button
+                color="primary"
+                onPress={handleSearch}
+                isDisabled={isLoading}
+              >
+                Search
+              </Button>
+            </div>
+            <Button
+              variant="flat"
+              onPress={fetchUsers}
+              isDisabled={isLoading}
+              startContent={<RefreshCw className="w-4 h-4" />}
+            >
+              Refresh
+            </Button>
+          </div>
+        </CardHeader>
+        <CardBody>
+          {isLoading ? (
+            <div className="flex justify-center items-center py-12">
+              <Spinner size="lg" label="Loading users..." />
+            </div>
+          ) : users.length === 0 ? (
+            <div className="text-center py-12 text-default-500">
+              No users found
+            </div>
+          ) : (
+            <>
+              <Table aria-label="Users table">
+                <TableHeader>
+                  <TableColumn>USER</TableColumn>
+                  <TableColumn>EMAIL</TableColumn>
+                  <TableColumn>ROLE</TableColumn>
+                  <TableColumn>COMPANY</TableColumn>
+                  <TableColumn>LAST SIGN IN</TableColumn>
+                  <TableColumn>CREATED</TableColumn>
+                  <TableColumn>STATUS</TableColumn>
+                </TableHeader>
+                <TableBody>
+                  {users.map((user) => {
+                    const fullName =
+                      user.profile?.first_name && user.profile?.last_name
+                        ? `${user.profile.first_name} ${user.profile.last_name}`
+                        : user.full_name || "N/A";
+
+                    const roleColor =
+                      user.role === "admin" || user.role === "superadmin"
+                        ? "danger"
+                        : user.role === "moderator"
+                          ? "secondary"
+                          : "default";
+
+                    return (
+                      <TableRow key={user.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Avatar
+                              src={`/api/storage/${user.profile?.avatar_url}`}
+                              name={fullName}
+                              size="sm"
+                            />
+                            <span className="text-small font-medium">
+                              {fullName}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">{user.email}</span>
+                        </TableCell>
+                        <TableCell>
+                          <Chip color={roleColor} size="sm" variant="flat">
+                            {user.role || "user"}
+                          </Chip>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">
+                            {user.profile?.company || "-"}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">
+                            {user.last_sign_in_at
+                              ? formatDate(user.last_sign_in_at)
+                              : "Never"}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-small">
+                            {formatDate(user.created_at)}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <Chip color="success" size="sm" variant="flat">
+                            Active
+                          </Chip>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+
+              {pagination.total_pages > 1 && (
+                <div className="flex justify-center mt-4">
+                  <Pagination
+                    total={pagination.total_pages}
+                    page={pagination.page}
+                    onChange={handlePageChange}
+                    showControls
+                  />
+                </div>
+              )}
+
+              <div className="mt-4 text-small text-default-500 text-center">
+                Showing {users.length} of {pagination.total} users
+              </div>
+            </>
+          )}
+        </CardBody>
+      </Card>
+    </div>
+  );
 }

package/src/web/auth/dashboard.tsx

@@ -1,3 +1,209 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Spinner,
+  Chip,
+  Divider,
+  Avatar,
+} from "@lastbrain/ui";
+import { User, Mail, Calendar, Shield } from "lucide-react";
+
+interface UserData {
+  id: string;
+  email: string;
+  created_at: string;
+  profile: {
+    first_name?: string;
+    last_name?: string;
+    avatar_url?: string;
+    bio?: string;
+    company?: string;
+    location?: string;
+  } | null;
+}
+
 export function DashboardPage() {
-  return <div className="pt-12">Welcome to your dashboard!</div>;
+  const [userData, setUserData] = useState<UserData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchUserData();
+  }, []);
+
+  const fetchUserData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch("/api/auth/me");
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch user data");
+      }
+
+      const result = await response.json();
+      setUserData(result.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px]">
+        <Spinner color="primary" size="lg">
+          {" "}
+          <span className="text-xs text-default-700">Loading dashboard...</span>
+        </Spinner>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="pt-12">
+        <Card className="max-w-2xl mx-auto">
+          <CardBody>
+            <p className="text-danger">Error: {error}</p>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!userData) {
+    return null;
+  }
+
+  const fullName =
+    userData.profile?.first_name && userData.profile?.last_name
+      ? `${userData.profile.first_name} ${userData.profile.last_name}`
+      : "User";
+
+  return (
+    <div className="pt-12 pb-12 max-w-6xl mx-auto px-4">
+      <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Profile Summary Card */}
+        <Card className="col-span-full md:col-span-1">
+          <CardHeader className="flex gap-3">
+            <Avatar
+              src={userData.profile?.avatar_url}
+              icon={<User />}
+              size="lg"
+              className="flex-shrink-0"
+            />
+            <div className="flex flex-col">
+              <p className="text-xl font-semibold">{fullName}</p>
+              <p className="text-small text-default-500">{userData.email}</p>
+            </div>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="space-y-3">
+              <div className="flex items-center gap-2">
+                <Mail className="w-4 h-4 text-default-400" />
+                <span className="text-small">{userData.email}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Calendar className="w-4 h-4 text-default-400" />
+                <span className="text-small">
+                  Member since{" "}
+                  {new Date(userData.created_at).toLocaleDateString()}
+                </span>
+              </div>
+              {userData.profile?.company && (
+                <div className="flex items-center gap-2">
+                  <Shield className="w-4 h-4 text-default-400" />
+                  <span className="text-small">{userData.profile.company}</span>
+                </div>
+              )}
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Account Status Card */}
+        <Card>
+          <CardHeader>
+            <h3 className="text-lg font-semibold">Account Status</h3>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <span className="text-small">Status</span>
+                <Chip color="success" size="sm" variant="flat">
+                  Active
+                </Chip>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-small">Profile</span>
+                <Chip
+                  color={userData.profile ? "success" : "warning"}
+                  size="sm"
+                  variant="flat"
+                >
+                  {userData.profile ? "Complete" : "Incomplete"}
+                </Chip>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Bio Card (if available) */}
+        {userData.profile?.bio && (
+          <Card className="col-span-full">
+            <CardHeader>
+              <h3 className="text-lg font-semibold">Bio</h3>
+            </CardHeader>
+            <Divider />
+            <CardBody>
+              <p className="text-small text-default-600">
+                {userData.profile.bio}
+              </p>
+            </CardBody>
+          </Card>
+        )}
+
+        {/* Quick Stats */}
+        <Card className="col-span-full">
+          <CardHeader>
+            <h3 className="text-lg font-semibold">Quick Stats</h3>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="text-center">
+                <p className="text-2xl font-bold text-primary">0</p>
+                <p className="text-small text-default-500">Projects</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-success">0</p>
+                <p className="text-small text-default-500">Tasks</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-warning">0</p>
+                <p className="text-small text-default-500">Notifications</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-secondary">
+                  {Math.floor(
+                    (Date.now() - new Date(userData.created_at).getTime()) /
+                      (1000 * 60 * 60 * 24)
+                  )}
+                </p>
+                <p className="text-small text-default-500">Days active</p>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  );
 }