Replace native checkboxes with UCheckbox on admin members page

Native <input type="checkbox"> elements were invisible in production
because @tailwindcss/forms is not installed. UCheckbox renders properly
with the Nuxt UI theme.

app/pages/admin/members.vue

@@ -30,12 +30,27 @@
             <option value="practitioner">Practitioner</option>
           </select>
         </div>
-        <button
+        <div class="flex gap-3">
-          @click="showCreateModal = true"
+          <button
-          class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
+            @click="showImportModal = true"
-        >
+            class="border border-guild-600 text-guild-100 px-4 py-2 rounded-lg hover:bg-guild-800 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
-          Add Member
+          >
-        </button>
+            Import CSV
+          </button>
+          <button
+            :disabled="selectedMemberIds.length === 0"
+            @click="openInviteModal"
+            class="border border-guild-600 text-guild-100 px-4 py-2 rounded-lg hover:bg-guild-800 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            Send Invites ({{ selectedMemberIds.length }})
+          </button>
+          <button
+            @click="showCreateModal = true"
+            class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
+          >
+            Add Member
+          </button>
+        </div>
       </div>
 
       <!-- Members Table -->
@@ -56,6 +71,12 @@
         <table v-else class="w-full">
           <thead class="bg-guild-950">
             <tr>
+              <th class="px-4 py-3 text-left">
+                <UCheckbox
+                  :model-value="allVisibleSelected ? true : (someVisibleSelected ? 'indeterminate' : false)"
+                  @update:model-value="toggleSelectAll"
+                />
+              </th>
               <th
                 class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
@@ -79,7 +100,12 @@
               <th
                 class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
               >
-                Slack Status
+                Invite
+              </th>
+              <th
+                class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
+              >
+                Slack
               </th>
               <th
                 class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
@@ -99,6 +125,12 @@
               :key="member._id"
               class="hover:bg-guild-800"
             >
+              <td class="px-4 py-4">
+                <UCheckbox
+                  :model-value="selectedMemberIds.includes(member._id)"
+                  @update:model-value="toggleSelect(member._id)"
+                />
+              </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <div class="text-sm font-medium text-guild-100">
                   {{ member.name }}
@@ -124,6 +156,18 @@
                   ${{ member.contributionTier }}/month
                 </span>
               </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span
+                  :class="
+                    member.inviteEmailSent
+                      ? 'bg-candlelight-900/20 text-candlelight-400'
+                      : 'bg-guild-800 text-guild-500'
+                  "
+                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
+                >
+                  {{ member.inviteEmailSent ? 'Sent' : 'Not sent' }}
+                </span>
+              </td>
               <td class="px-6 py-4 whitespace-nowrap">
                 <span
                   :class="
@@ -255,6 +299,197 @@
         </form>
       </div>
     </div>
+
+    <!-- CSV Import Modal -->
+    <div
+      v-if="showImportModal"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+    >
+      <div class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full mx-4 border border-guild-700 max-h-[90vh] flex flex-col">
+        <div class="px-6 py-4 border-b border-guild-700 flex justify-between items-center">
+          <h3 class="text-display-sm font-semibold text-guild-100">Import Members from CSV</h3>
+          <button @click="closeImportModal" class="text-guild-500 hover:text-guild-300">
+            &times;
+          </button>
+        </div>
+
+        <div class="p-6 space-y-4 overflow-y-auto">
+          <!-- File input -->
+          <div v-if="!csvRows.length">
+            <p class="text-sm text-guild-400 mb-3">
+              Upload a CSV file with columns: <code class="text-guild-200">name,email,circle,contributionTier</code>
+            </p>
+            <p class="text-sm text-guild-500 mb-4">
+              Valid circles: community, founder, practitioner. Valid tiers: 0, 5, 15, 30, 50.
+            </p>
+            <input
+              ref="csvFileInput"
+              type="file"
+              accept=".csv"
+              @change="handleCsvFile"
+              class="block w-full text-sm text-guild-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-candlelight-600 file:text-white hover:file:bg-candlelight-700"
+            />
+          </div>
+
+          <!-- Parse error -->
+          <div v-if="csvParseError" class="p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg">
+            <p class="text-ember-400 text-sm">{{ csvParseError }}</p>
+          </div>
+
+          <!-- Preview table -->
+          <div v-if="csvRows.length" class="space-y-4">
+            <div class="flex justify-between items-center">
+              <p class="text-sm text-guild-300">
+                {{ csvRows.length }} row{{ csvRows.length !== 1 ? 's' : '' }} parsed.
+                <span v-if="csvValidRows.length !== csvRows.length" class="text-ember-400">
+                  {{ csvRows.length - csvValidRows.length }} with errors.
+                </span>
+              </p>
+              <button
+                @click="resetCsvImport"
+                class="text-sm text-guild-400 hover:text-guild-200"
+              >
+                Choose different file
+              </button>
+            </div>
+
+            <div class="overflow-x-auto max-h-64 overflow-y-auto rounded border border-guild-700">
+              <table class="w-full text-sm">
+                <thead class="bg-guild-950 sticky top-0">
+                  <tr>
+                    <th class="px-3 py-2 text-left text-xs text-guild-500 uppercase">Status</th>
+                    <th class="px-3 py-2 text-left text-xs text-guild-500 uppercase">Name</th>
+                    <th class="px-3 py-2 text-left text-xs text-guild-500 uppercase">Email</th>
+                    <th class="px-3 py-2 text-left text-xs text-guild-500 uppercase">Circle</th>
+                    <th class="px-3 py-2 text-left text-xs text-guild-500 uppercase">Tier</th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-guild-800">
+                  <tr v-for="(row, i) in csvRows" :key="i" :class="row.error ? 'bg-ember-500/5' : ''">
+                    <td class="px-3 py-2">
+                      <span v-if="row.error" class="text-ember-400 text-xs">{{ row.error }}</span>
+                      <span v-else class="text-candlelight-400 text-xs">OK</span>
+                    </td>
+                    <td class="px-3 py-2 text-guild-200">{{ row.name }}</td>
+                    <td class="px-3 py-2 text-guild-400">{{ row.email }}</td>
+                    <td class="px-3 py-2 text-guild-400">{{ row.circle }}</td>
+                    <td class="px-3 py-2 text-guild-400">${{ row.contributionTier }}/mo</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <!-- Import results -->
+            <div v-if="importResults" class="p-4 rounded-lg border border-guild-700 bg-guild-800">
+              <p class="text-guild-100 font-medium mb-2">Import complete</p>
+              <p class="text-sm text-candlelight-400">{{ importResults.created }} created</p>
+              <p v-if="importResults.failed" class="text-sm text-ember-400">{{ importResults.failed }} failed</p>
+              <div v-if="importResults.results?.some(r => !r.success)" class="mt-2 space-y-1">
+                <p
+                  v-for="fail in importResults.results.filter(r => !r.success)"
+                  :key="fail.email"
+                  class="text-xs text-ember-400"
+                >
+                  {{ fail.email }}: {{ fail.error }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="px-6 py-4 border-t border-guild-700 flex justify-end gap-3">
+          <button
+            @click="closeImportModal"
+            class="px-4 py-2 text-guild-400 hover:text-guild-100"
+          >
+            {{ importResults ? 'Done' : 'Cancel' }}
+          </button>
+          <button
+            v-if="csvValidRows.length && !importResults"
+            :disabled="importing"
+            @click="submitImport"
+            class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {{ importing ? 'Importing...' : `Import ${csvValidRows.length} member${csvValidRows.length !== 1 ? 's' : ''}` }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Send Invites Modal -->
+    <div
+      v-if="showInviteModal"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+    >
+      <div class="bg-guild-900 rounded-lg shadow-xl max-w-2xl w-full mx-4 border border-guild-700 max-h-[90vh] flex flex-col">
+        <div class="px-6 py-4 border-b border-guild-700 flex justify-between items-center">
+          <h3 class="text-display-sm font-semibold text-guild-100">Send Invite Emails</h3>
+          <button @click="showInviteModal = false" class="text-guild-500 hover:text-guild-300">
+            &times;
+          </button>
+        </div>
+
+        <div class="p-6 space-y-4 overflow-y-auto">
+          <p class="text-sm text-guild-400">
+            Sending to <strong class="text-guild-200">{{ selectedMemberIds.length }}</strong>
+            member{{ selectedMemberIds.length !== 1 ? 's' : '' }}.
+            Each will receive a unique magic login link valid for 48 hours.
+          </p>
+
+          <!-- Email template editor -->
+          <div>
+            <label class="block text-sm font-medium text-guild-100 mb-2">Email template</label>
+            <textarea
+              v-model="inviteTemplate"
+              rows="12"
+              class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
+            ></textarea>
+            <p class="text-xs text-guild-500 mt-1">
+              Available tokens: <code>{name}</code>, <code>{loginLink}</code>, <code>{circle}</code>
+            </p>
+          </div>
+
+          <!-- Preview -->
+          <div v-if="invitePreviewMember">
+            <label class="block text-sm font-medium text-guild-100 mb-2">Preview ({{ invitePreviewMember.name }})</label>
+            <pre class="text-sm text-guild-300 bg-guild-950 border border-guild-700 rounded-lg p-4 whitespace-pre-wrap font-mono overflow-auto max-h-48">{{ invitePreviewText }}</pre>
+          </div>
+
+          <!-- Results -->
+          <div v-if="inviteResults" class="p-4 rounded-lg border border-guild-700 bg-guild-800">
+            <p class="text-guild-100 font-medium mb-2">Invites sent</p>
+            <p class="text-sm text-candlelight-400">{{ inviteResults.sent }} sent</p>
+            <p v-if="inviteResults.failed" class="text-sm text-ember-400">{{ inviteResults.failed }} failed</p>
+            <div v-if="inviteResults.results?.some(r => !r.success)" class="mt-2 space-y-1">
+              <p
+                v-for="fail in inviteResults.results.filter(r => !r.success)"
+                :key="fail.email"
+                class="text-xs text-ember-400"
+              >
+                {{ fail.email }}: {{ fail.error }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="px-6 py-4 border-t border-guild-700 flex justify-end gap-3">
+          <button
+            @click="showInviteModal = false"
+            class="px-4 py-2 text-guild-400 hover:text-guild-100"
+          >
+            {{ inviteResults ? 'Done' : 'Cancel' }}
+          </button>
+          <button
+            v-if="!inviteResults"
+            :disabled="sendingInvites"
+            @click="submitInvites"
+            class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {{ sendingInvites ? 'Sending...' : `Send ${selectedMemberIds.length} invite${selectedMemberIds.length !== 1 ? 's' : ''}` }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -263,6 +498,8 @@ definePageMeta({
   layout: "admin",
 });
 
+const toast = useToast();
+
 const {
   data: members,
   pending,
@@ -275,6 +512,35 @@ const circleFilter = ref("");
 const showCreateModal = ref(false);
 const creating = ref(false);
 
+// Selection
+const selectedMemberIds = ref([]);
+
+// CSV import
+const showImportModal = ref(false);
+const csvFileInput = ref(null);
+const csvRows = ref([]);
+const csvParseError = ref("");
+const importing = ref(false);
+const importResults = ref(null);
+
+// Invite
+const showInviteModal = ref(false);
+const sendingInvites = ref(false);
+const inviteResults = ref(null);
+
+const DEFAULT_INVITE_TEMPLATE = `Hi {name},
+
+You've been invited to Ghost Guild as a member of the {circle} circle.
+
+Sign in here to get started:
+{loginLink}
+
+This link expires in 48 hours. After that, you can always request a new login link at https://ghostguild.org/login.
+
+See you inside.`;
+
+const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
+
 const newMember = reactive({
   name: "",
   email: "",
@@ -298,6 +564,58 @@ const filteredMembers = computed(() => {
   });
 });
 
+// Selection helpers
+const allVisibleSelected = computed(() => {
+  if (!filteredMembers.value.length) return false;
+  return filteredMembers.value.every((m) =>
+    selectedMemberIds.value.includes(m._id)
+  );
+});
+
+const someVisibleSelected = computed(() => {
+  return filteredMembers.value.some((m) =>
+    selectedMemberIds.value.includes(m._id)
+  );
+});
+
+const toggleSelectAll = () => {
+  if (allVisibleSelected.value) {
+    const visibleIds = new Set(filteredMembers.value.map((m) => m._id));
+    selectedMemberIds.value = selectedMemberIds.value.filter(
+      (id) => !visibleIds.has(id)
+    );
+  } else {
+    const currentSet = new Set(selectedMemberIds.value);
+    for (const m of filteredMembers.value) {
+      currentSet.add(m._id);
+    }
+    selectedMemberIds.value = [...currentSet];
+  }
+};
+
+const toggleSelect = (id) => {
+  const idx = selectedMemberIds.value.indexOf(id);
+  if (idx >= 0) {
+    selectedMemberIds.value.splice(idx, 1);
+  } else {
+    selectedMemberIds.value.push(id);
+  }
+};
+
+// Invite preview
+const invitePreviewMember = computed(() => {
+  if (!selectedMemberIds.value.length || !members.value) return null;
+  return members.value.find((m) => m._id === selectedMemberIds.value[0]);
+});
+
+const invitePreviewText = computed(() => {
+  if (!invitePreviewMember.value) return "";
+  return inviteTemplate.value
+    .replace(/\{name\}/g, invitePreviewMember.value.name)
+    .replace(/\{loginLink\}/g, "https://ghostguild.org/api/auth/verify?token=...")
+    .replace(/\{circle\}/g, invitePreviewMember.value.circle);
+});
+
 const getCircleClasses = (circle) => {
   const classes = {
     community: "bg-candlelight-900/20 text-candlelight-400",
@@ -311,6 +629,7 @@ const formatDate = (dateString) => {
   return new Date(dateString).toLocaleDateString();
 };
 
+// --- Create Member ---
 const createMember = async () => {
   creating.value = true;
   try {
@@ -328,15 +647,171 @@ const createMember = async () => {
     });
 
     await refresh();
-    alert("Member created successfully!");
+    toast.add({ title: "Member created", color: "green" });
-  } catch (error) {
+  } catch (err) {
-    console.error("Failed to create member:", error);
+    console.error("Failed to create member:", err);
-    alert("Failed to create member");
+    toast.add({
+      title: "Failed to create member",
+      description: err.data?.statusMessage || err.message,
+      color: "red",
+    });
   } finally {
     creating.value = false;
   }
 };
 
+// --- CSV Import ---
+const VALID_CIRCLES = ["community", "founder", "practitioner"];
+const VALID_TIERS = ["0", "5", "15", "30", "50"];
+
+const handleCsvFile = (event) => {
+  const file = event.target.files[0];
+  if (!file) return;
+
+  csvParseError.value = "";
+  csvRows.value = [];
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const text = e.target.result;
+    parseCsv(text);
+  };
+  reader.readAsText(file);
+};
+
+const parseCsv = (text) => {
+  const lines = text.split(/\r?\n/).filter((l) => l.trim());
+  if (lines.length < 2) {
+    csvParseError.value = "CSV must have a header row and at least one data row.";
+    return;
+  }
+
+  const header = lines[0].split(",").map((h) => h.trim().toLowerCase());
+  const nameIdx = header.indexOf("name");
+  const emailIdx = header.indexOf("email");
+  const circleIdx = header.indexOf("circle");
+  const tierIdx = header.indexOf("contributiontier");
+
+  if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || tierIdx === -1) {
+    csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionTier`;
+    return;
+  }
+
+  const seenEmails = new Set();
+  const rows = [];
+
+  for (let i = 1; i < lines.length; i++) {
+    const cols = lines[i].split(",").map((c) => c.trim());
+    const name = cols[nameIdx] || "";
+    const email = (cols[emailIdx] || "").toLowerCase();
+    const circle = (cols[circleIdx] || "").toLowerCase();
+    const contributionTier = cols[tierIdx] || "";
+
+    let error = null;
+    if (!name) error = "Missing name";
+    else if (!email || !email.includes("@")) error = "Invalid email";
+    else if (!VALID_CIRCLES.includes(circle)) error = `Invalid circle: ${circle}`;
+    else if (!VALID_TIERS.includes(contributionTier)) error = `Invalid tier: ${contributionTier}`;
+    else if (seenEmails.has(email)) error = "Duplicate email in CSV";
+
+    if (!error) seenEmails.add(email);
+
+    rows.push({ name, email, circle, contributionTier, error });
+  }
+
+  csvRows.value = rows;
+};
+
+const csvValidRows = computed(() => csvRows.value.filter((r) => !r.error));
+
+const resetCsvImport = () => {
+  csvRows.value = [];
+  csvParseError.value = "";
+  importResults.value = null;
+  if (csvFileInput.value) csvFileInput.value.value = "";
+};
+
+const closeImportModal = () => {
+  showImportModal.value = false;
+  if (importResults.value) {
+    resetCsvImport();
+    refresh();
+  }
+};
+
+const submitImport = async () => {
+  importing.value = true;
+  try {
+    const payload = csvValidRows.value.map(({ name, email, circle, contributionTier }) => ({
+      name,
+      email,
+      circle,
+      contributionTier,
+    }));
+
+    const result = await $fetch("/api/admin/members/import", {
+      method: "POST",
+      body: { members: payload },
+    });
+
+    importResults.value = result;
+    toast.add({
+      title: `Imported ${result.created} member${result.created !== 1 ? "s" : ""}`,
+      description: result.failed ? `${result.failed} failed` : undefined,
+      color: result.failed ? "orange" : "green",
+    });
+  } catch (err) {
+    console.error("Import failed:", err);
+    toast.add({
+      title: "Import failed",
+      description: err.data?.statusMessage || err.message,
+      color: "red",
+    });
+  } finally {
+    importing.value = false;
+  }
+};
+
+// --- Send Invites ---
+const openInviteModal = () => {
+  inviteResults.value = null;
+  inviteTemplate.value = DEFAULT_INVITE_TEMPLATE;
+  showInviteModal.value = true;
+};
+
+const submitInvites = async () => {
+  sendingInvites.value = true;
+  try {
+    const result = await $fetch("/api/admin/members/invite", {
+      method: "POST",
+      body: {
+        memberIds: selectedMemberIds.value,
+        emailTemplate: inviteTemplate.value,
+      },
+    });
+
+    inviteResults.value = result;
+    await refresh();
+    selectedMemberIds.value = [];
+
+    toast.add({
+      title: `Sent ${result.sent} invite${result.sent !== 1 ? "s" : ""}`,
+      description: result.failed ? `${result.failed} failed` : undefined,
+      color: result.failed ? "orange" : "green",
+    });
+  } catch (err) {
+    console.error("Failed to send invites:", err);
+    toast.add({
+      title: "Failed to send invites",
+      description: err.data?.statusMessage || err.message,
+      color: "red",
+    });
+  } finally {
+    sendingInvites.value = false;
+  }
+};
+
+// --- Existing actions ---
 const sendSlackInvite = (member) => {
   alert(`Slack invite functionality would send invite to ${member.email}`);
   console.log("Send Slack invite to:", member.email);