First pass

src/pages/dashboard/team/settings.astro

@@ -0,0 +1,105 @@
+---
+import DashboardLayout from '../../../layouts/DashboardLayout.astro';
+import { Icon } from 'astro-icon/components';
+import { db } from '../../../db';
+import { categories, members } from '../../../db/schema';
+import { eq } from 'drizzle-orm';
+
+const user = Astro.locals.user;
+if (!user) return Astro.redirect('/login');
+
+// Get user's membership to check if they're admin
+const userMembership = await db.select()
+  .from(members)
+  .where(eq(members.userId, user.id))
+  .get();
+
+if (!userMembership) return Astro.redirect('/dashboard');
+
+const isAdmin = userMembership.role === 'owner' || userMembership.role === 'admin';
+if (!isAdmin) return Astro.redirect('/dashboard/team');
+
+// Get all categories for the organization
+const allCategories = await db.select()
+  .from(categories)
+  .where(eq(categories.organizationId, userMembership.organizationId))
+  .all();
+---
+
+<DashboardLayout title="Team Settings - Zamaan">
+  <div class="flex items-center gap-3 mb-6">
+    <a href="/dashboard/team" class="btn btn-ghost btn-sm">
+      <Icon name="heroicons:arrow-left" class="w-5 h-5" />
+    </a>
+    <h1 class="text-3xl font-bold">Team Settings</h1>
+  </div>
+
+  <!-- Categories Section -->
+  <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
+    <div class="card-body">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">
+          <Icon name="heroicons:tag" class="w-6 h-6" />
+          Work Categories
+        </h2>
+        <a href="/dashboard/team/settings/categories/new" class="btn btn-primary btn-sm">
+          <Icon name="heroicons:plus" class="w-5 h-5" />
+          Add Category
+        </a>
+      </div>
+      
+      <p class="text-base-content/70 mb-4">
+        Categories help organize time tracking by type of work. All team members use the same categories.
+      </p>
+
+      {allCategories.length === 0 ? (
+        <div class="alert alert-info">
+          <Icon name="heroicons:information-circle" class="w-6 h-6" />
+          <div>
+            <div class="font-bold">No categories yet</div>
+            <div class="text-sm">Create your first category to start organizing time entries.</div>
+          </div>
+        </div>
+      ) : (
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {allCategories.map(category => (
+            <div class="card bg-base-200 border border-base-300">
+              <div class="card-body p-4">
+                <div class="flex items-center gap-3">
+                  {category.color && (
+                    <span class="w-4 h-4 rounded-full flex-shrink-0" style={`background-color: ${category.color}`}></span>
+                  )}
+                  <div class="flex-grow min-w-0">
+                    <h3 class="font-semibold truncate">{category.name}</h3>
+                    <p class="text-xs text-base-content/60">
+                      Created {category.createdAt?.toLocaleDateString() ?? 'N/A'}
+                    </p>
+                  </div>
+                  <a 
+                    href={`/dashboard/team/settings/categories/${category.id}/edit`} 
+                    class="btn btn-ghost btn-xs"
+                  >
+                    <Icon name="heroicons:pencil" class="w-4 h-4" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+
+  <!-- Future Settings Sections -->
+  <div class="card bg-base-100 shadow-xl border border-base-200">
+    <div class="card-body">
+      <h2 class="card-title">
+        <Icon name="heroicons:cog-6-tooth" class="w-6 h-6" />
+        Organization Settings
+      </h2>
+      <p class="text-base-content/70">
+        Additional organization settings coming soon...
+      </p>
+    </div>
+  </div>
+</DashboardLayout>