jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

90
app/pages/admin/members.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div class="bg-elevated border-b border-default">
<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-2xl font-bold text-highlighted">Member Management</h1>
<p class="text-muted">
<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>
@ -18,11 +18,11 @@
<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"
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-default bg-elevated text-default rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
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>
@ -32,80 +32,80 @@
</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"
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-elevated rounded-lg shadow overflow-hidden">
<div v-if="pending" class="p-8 text-center text-default">
<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-blue-600 mr-3"
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-red-600">
<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-muted">
<thead class="bg-guild-950">
<tr>
<th
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
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-dimmed uppercase tracking-wider"
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-dimmed uppercase tracking-wider"
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-dimmed uppercase tracking-wider"
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-dimmed uppercase tracking-wider"
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-dimmed uppercase tracking-wider"
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-dimmed uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-guild-500 uppercase tracking-wider"
>
Actions
</th>
</tr>
</thead>
<tbody class="bg-elevated divide-y divide-default">
<tbody class="bg-guild-900 divide-y divide-guild-700">
<tr
v-for="member in filteredMembers"
:key="member._id"
class="hover:bg-muted"
class="hover:bg-guild-800"
>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-highlighted">
<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-muted">
<div class="text-sm text-guild-400">
{{ member.email }}
</div>
</td>
@ -119,7 +119,7 @@
</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"
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-candlelight-900/20 text-candlelight-400"
>
${{ member.contributionTier }}/month
</span>
@ -128,28 +128,28 @@
<span
:class="
member.slackInvited
? 'bg-green-100 text-green-800'
: 'bg-accented text-default'
? '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-muted">
<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-muted">
<td class="px-6 py-4 whitespace-nowrap text-sm text-guild-400">
<div class="flex gap-2">
<button
@click="sendSlackInvite(member)"
class="text-primary hover:text-primary"
class="text-candlelight-400 hover:text-candlelight-300"
>
Slack Invite
</button>
<button
@click="editMember(member)"
class="text-primary hover:text-primary"
class="text-candlelight-400 hover:text-candlelight-300"
>
Edit
</button>
@ -161,7 +161,7 @@
<div
v-if="!pending && !error && filteredMembers.length === 0"
class="p-8 text-center text-dimmed"
class="p-8 text-center text-guild-500"
>
No members found matching your criteria
</div>
@ -173,26 +173,26 @@
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 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-default mb-1"
<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-default bg-elevated text-default placeholder-dimmed rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
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-default mb-1"
<label class="block text-sm font-medium text-guild-100 mb-1"
>Email</label
>
<input
@ -200,12 +200,12 @@
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"
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-default mb-1"
<label class="block text-sm font-medium text-guild-100 mb-1"
>Circle</label
>
<USelect
@ -220,7 +220,7 @@
</div>
<div>
<label class="block text-sm font-medium text-default mb-1"
<label class="block text-sm font-medium text-guild-100 mb-1"
>Contribution Tier</label
>
<USelect
@ -240,14 +240,14 @@
<button
type="button"
@click="showCreateModal = false"
class="px-4 py-2 text-muted hover:text-default"
class="px-4 py-2 text-guild-400 hover:text-guild-100"
>
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"
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>
@ -300,11 +300,11 @@ const filteredMembers = computed(() => {
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",
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-gray-100 text-gray-800";
return classes[circle] || "bg-guild-800 text-guild-300";
};
const formatDate = (dateString) => {