ghostguild-org/app/pages/admin/members.vue

<template>
  <div>
    <div class="bg-elevated border-b border-default">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="py-6">
          <h1 class="text-2xl font-bold text-highlighted">Member Management</h1>
          <p class="text-muted">
            Manage Ghost Guild members, their contributions, and access levels
          </p>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- Search and Actions -->
      <div class="mb-6 flex justify-between items-center">
        <div class="flex gap-4 items-center">
          <input
            v-model="searchQuery"
            placeholder="Search members..."
            class="border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
          <select
            v-model="circleFilter"
            class="border border-default bg-elevated text-default rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          >
            <option value="">All Circles</option>
            <option value="community">Community</option>
            <option value="founder">Founder</option>
            <option value="practitioner">Practitioner</option>
          </select>
        </div>
        <button
          @click="showCreateModal = true"
          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
          Add Member
        </button>
      </div>

      <!-- Members Table -->
      <div class="bg-elevated rounded-lg shadow overflow-hidden">
        <div v-if="pending" class="p-8 text-center text-default">
          <div class="inline-flex items-center">
            <div
              class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
            ></div>
            Loading members...
          </div>
        </div>

        <div v-else-if="error" class="p-8 text-center text-red-600">
          Error loading members: {{ error }}
        </div>

        <table v-else class="w-full">
          <thead class="bg-muted">
            <tr>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Name
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Email
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Circle
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Contribution
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Slack Status
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Joined
              </th>
              <th
                class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody class="bg-elevated divide-y divide-default">
            <tr
              v-for="member in filteredMembers"
              :key="member._id"
              class="hover:bg-muted"
            >
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-highlighted">
                  {{ member.name }}
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-muted">
                  {{ member.email }}
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="getCircleClasses(member.circle)"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ member.circle }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800"
                >
                  ${{ member.contributionTier }}/month
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="
                    member.slackInvited
                      ? 'bg-green-100 text-green-800'
                      : 'bg-accented text-default'
                  "
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ member.slackInvited ? "Invited" : "Pending" }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
                {{ formatDate(member.createdAt) }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
                <div class="flex gap-2">
                  <button
                    @click="sendSlackInvite(member)"
                    class="text-primary hover:text-primary"
                  >
                    Slack Invite
                  </button>
                  <button
                    @click="editMember(member)"
                    class="text-primary hover:text-primary"
                  >
                    Edit
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>

        <div
          v-if="!pending && !error && filteredMembers.length === 0"
          class="p-8 text-center text-dimmed"
        >
          No members found matching your criteria
        </div>
      </div>
    </div>

    <!-- Create Member Modal -->
    <div
      v-if="showCreateModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-elevated rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-default">
          <h3 class="text-lg font-semibold text-highlighted">Add New Member</h3>
        </div>

        <form @submit.prevent="createMember" class="p-6 space-y-4">
          <div>
            <label class="block text-sm font-medium text-default mb-1"
              >Name</label
            >
            <input
              v-model="newMember.name"
              placeholder="Full name"
              required
              class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-default mb-1"
              >Email</label
            >
            <input
              v-model="newMember.email"
              type="email"
              placeholder="email@example.com"
              required
              class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-default mb-1"
              >Circle</label
            >
            <USelect
              v-model="newMember.circle"
              :items="[
                { label: 'Community', value: 'community' },
                { label: 'Founder', value: 'founder' },
                { label: 'Practitioner', value: 'practitioner' },
              ]"
              class="w-full"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-default mb-1"
              >Contribution Tier</label
            >
            <USelect
              v-model="newMember.contributionTier"
              :items="[
                { label: '$0/month', value: '0' },
                { label: '$5/month', value: '5' },
                { label: '$15/month', value: '15' },
                { label: '$30/month', value: '30' },
                { label: '$50/month', value: '50' },
              ]"
              class="w-full"
            />
          </div>

          <div class="flex justify-end gap-3 pt-4">
            <button
              type="button"
              @click="showCreateModal = false"
              class="px-4 py-2 text-muted hover:text-default"
            >
              Cancel
            </button>
            <button
              type="submit"
              :disabled="creating"
              class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {{ creating ? "Creating..." : "Create Member" }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: "admin",
});

const {
  data: members,
  pending,
  error,
  refresh,
} = await useFetch("/api/admin/members");

const searchQuery = ref("");
const circleFilter = ref("");
const showCreateModal = ref(false);
const creating = ref(false);

const newMember = reactive({
  name: "",
  email: "",
  circle: "community",
  contributionTier: "0",
});

const filteredMembers = computed(() => {
  if (!members.value) return [];

  return members.value.filter((member) => {
    const matchesSearch =
      !searchQuery.value ||
      member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      member.email.toLowerCase().includes(searchQuery.value.toLowerCase());

    const matchesCircle =
      !circleFilter.value || member.circle === circleFilter.value;

    return matchesSearch && matchesCircle;
  });
});

const getCircleClasses = (circle) => {
  const classes = {
    community: "bg-blue-100 text-blue-800",
    founder: "bg-purple-100 text-purple-800",
    practitioner: "bg-green-100 text-green-800",
  };
  return classes[circle] || "bg-gray-100 text-gray-800";
};

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString();
};

const createMember = async () => {
  creating.value = true;
  try {
    await $fetch("/api/admin/members", {
      method: "POST",
      body: newMember,
    });

    showCreateModal.value = false;
    Object.assign(newMember, {
      name: "",
      email: "",
      circle: "community",
      contributionTier: "0",
    });

    await refresh();
    alert("Member created successfully!");
  } catch (error) {
    console.error("Failed to create member:", error);
    alert("Failed to create member");
  } finally {
    creating.value = false;
  }
};

const sendSlackInvite = (member) => {
  alert(`Slack invite functionality would send invite to ${member.email}`);
  console.log("Send Slack invite to:", member.email);
};

const editMember = (member) => {
  alert(`Edit functionality would open editor for ${member.name}`);
  console.log("Edit member:", member._id);
};
</script>