349 lines
12 KiB
Vue
349 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="bg-guild-900 border-b border-guild-700">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="py-6">
|
|
<h1 class="text-display font-bold text-guild-100">Member Management</h1>
|
|
<p class="text-guild-400">
|
|
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-guild-700 bg-guild-900 text-guild-100 placeholder-guild-500 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
|
/>
|
|
<select
|
|
v-model="circleFilter"
|
|
class="border border-guild-700 bg-guild-900 text-guild-100 rounded-lg px-4 py-2 focus:ring-2 focus:ring-candlelight-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-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>
|
|
|
|
<!-- Members Table -->
|
|
<div class="bg-guild-900 rounded-lg shadow overflow-hidden">
|
|
<div v-if="pending" class="p-8 text-center text-guild-100">
|
|
<div class="inline-flex items-center">
|
|
<div
|
|
class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mr-3"
|
|
></div>
|
|
Loading members...
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="error" class="p-8 text-center text-ember-400">
|
|
Error loading members: {{ error }}
|
|
</div>
|
|
|
|
<table v-else class="w-full">
|
|
<thead class="bg-guild-950">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
|
>
|
|
Name
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
|
>
|
|
Email
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
|
>
|
|
Circle
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
|
>
|
|
Contribution
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
|
>
|
|
Slack Status
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
|
>
|
|
Joined
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
|
|
>
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-guild-900 divide-y divide-guild-700">
|
|
<tr
|
|
v-for="member in filteredMembers"
|
|
:key="member._id"
|
|
class="hover:bg-guild-800"
|
|
>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm font-medium text-guild-100">
|
|
{{ member.name }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-guild-400">
|
|
{{ 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-candlelight-900/20 text-candlelight-400"
|
|
>
|
|
${{ member.contributionTier }}/month
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span
|
|
:class="
|
|
member.slackInvited
|
|
? 'bg-candlelight-900/20 text-candlelight-400'
|
|
: 'bg-guild-800 text-guild-300'
|
|
"
|
|
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-guild-400 text-ui-mono">
|
|
{{ formatDate(member.createdAt) }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
|
|
<div class="flex gap-2">
|
|
<button
|
|
@click="sendSlackInvite(member)"
|
|
class="text-candlelight-400 hover:text-candlelight-300"
|
|
>
|
|
Slack Invite
|
|
</button>
|
|
<button
|
|
@click="editMember(member)"
|
|
class="text-candlelight-400 hover:text-candlelight-300"
|
|
>
|
|
Edit
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div
|
|
v-if="!pending && !error && filteredMembers.length === 0"
|
|
class="p-8 text-center text-guild-500"
|
|
>
|
|
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-guild-900 rounded-lg shadow-xl max-w-md w-full mx-4 border border-guild-700">
|
|
<div class="px-6 py-4 border-b border-guild-700">
|
|
<h3 class="text-display-sm font-semibold text-guild-100">Add New Member</h3>
|
|
</div>
|
|
|
|
<form @submit.prevent="createMember" class="p-6 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-guild-100 mb-1"
|
|
>Name</label
|
|
>
|
|
<input
|
|
v-model="newMember.name"
|
|
placeholder="Full name"
|
|
required
|
|
class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-guild-100 mb-1"
|
|
>Email</label
|
|
>
|
|
<input
|
|
v-model="newMember.email"
|
|
type="email"
|
|
placeholder="email@example.com"
|
|
required
|
|
class="w-full border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-guild-100 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-guild-100 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-guild-400 hover:text-guild-100"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
:disabled="creating"
|
|
class="bg-candlelight-600 text-white px-4 py-2 rounded-lg hover:bg-candlelight-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-candlelight-900/20 text-candlelight-400",
|
|
founder: "bg-earth-900/20 text-earth-400",
|
|
practitioner: "bg-candlelight-900/20 text-candlelight-400",
|
|
};
|
|
return classes[circle] || "bg-guild-800 text-guild-300";
|
|
};
|
|
|
|
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>
|