First pass

src/pages/dashboard/team.astro

@@ -0,0 +1,126 @@
+---
+import DashboardLayout from '../../layouts/DashboardLayout.astro';
+import { Icon } from 'astro-icon/components';
+import { db } from '../../db';
+import { members, users } from '../../db/schema';
+import { eq } from 'drizzle-orm';
+
+const user = Astro.locals.user;
+if (!user) return Astro.redirect('/login');
+
+// Get user's first organization
+const userMembership = await db.select()
+  .from(members)
+  .where(eq(members.userId, user.id))
+  .get();
+
+if (!userMembership) return Astro.redirect('/dashboard');
+
+// Get all team members for this organization
+const teamMembers = await db.select({
+  member: members,
+  user: users,
+})
+  .from(members)
+  .innerJoin(users, eq(members.userId, users.id))
+  .where(eq(members.organizationId, userMembership.organizationId))
+  .all();
+
+const currentUserMember = teamMembers.find(m => m.user.id === user.id);
+const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?.member.role === 'admin';
+---
+
+<DashboardLayout title="Team - Zamaan">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-3xl font-bold">Team Members</h1>
+    <div class="flex gap-2">
+      {isAdmin && (
+        <>
+          <a href="/dashboard/team/settings" class="btn btn-ghost">
+            <Icon name="heroicons:cog-6-tooth" class="w-5 h-5" />
+            Settings
+          </a>
+          <a href="/dashboard/team/invite" class="btn btn-primary">Invite Member</a>
+        </>
+      )}
+    </div>
+  </div>
+
+  <div class="card bg-base-100 shadow-xl border border-base-200">
+    <div class="card-body">
+      <div class="overflow-x-auto">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+              <th>Joined</th>
+              {isAdmin && <th>Actions</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {teamMembers.map(({ member, user: teamUser }) => (
+              <tr>
+                <td>
+                  <div class="flex items-center gap-3">
+                    <div class="avatar placeholder">
+                      <div class="bg-neutral text-neutral-content rounded-full w-10">
+                        <span>{teamUser.name.charAt(0)}</span>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="font-bold">{teamUser.name}</div>
+                      {teamUser.id === user.id && (
+                        <span class="badge badge-sm">You</span>
+                      )}
+                    </div>
+                  </div>
+                </td>
+                <td>{teamUser.email}</td>
+                <td>
+                  <span class={`badge ${
+                    member.role === 'owner' ? 'badge-primary' :
+                    member.role === 'admin' ? 'badge-secondary' :
+                    'badge-ghost'
+                  }`}>
+                    {member.role}
+                  </span>
+                </td>
+                <td>{member.joinedAt?.toLocaleDateString() ?? 'N/A'}</td>
+                {isAdmin && (
+                  <td>
+                    {teamUser.id !== user.id && member.role !== 'owner' && (
+                      <div class="dropdown dropdown-end">
+                        <label tabindex="0" class="btn btn-ghost btn-sm">
+                          <Icon name="heroicons:ellipsis-vertical" class="w-5 h-5" />
+                        </label>
+                        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-200">
+                          <li>
+                            <form method="POST" action={`/api/team/change-role`}>
+                              <input type="hidden" name="userId" value={teamUser.id} />
+                              <input type="hidden" name="role" value={member.role === 'admin' ? 'member' : 'admin'} />
+                              <button type="submit">
+                                {member.role === 'admin' ? 'Make Member' : 'Make Admin'}
+                              </button>
+                            </form>
+                          </li>
+                          <li>
+                            <form method="POST" action={`/api/team/remove`}>
+                              <input type="hidden" name="userId" value={teamUser.id} />
+                              <button type="submit" class="text-error">Remove</button>
+                            </form>
+                          </li>
+                        </ul>
+                      </div>
+                    )}
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</DashboardLayout>