Readying for design
This commit is contained in:
parent
d73256ca2b
commit
fadf473dde
50 changed files with 1478 additions and 1259 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="bg-white border-b">
|
||||
<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-gray-900">Member Management</h1>
|
||||
<p class="text-gray-600">
|
||||
<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-gray-300 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-gray-300 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-white rounded-lg shadow overflow-hidden">
|
||||
<div v-if="pending" class="p-8 text-center">
|
||||
<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-gray-50">
|
||||
<thead class="bg-guild-950">
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 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-gray-500 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-gray-500 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-gray-500 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-gray-500 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-gray-500 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-gray-500 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-white divide-y divide-gray-200">
|
||||
<tbody class="bg-guild-900 divide-y divide-guild-700">
|
||||
<tr
|
||||
v-for="member in filteredMembers"
|
||||
:key="member._id"
|
||||
class="hover:bg-gray-50"
|
||||
class="hover:bg-guild-800"
|
||||
>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<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-gray-600">{{ member.email }}</div>
|
||||
<div class="text-sm text-guild-400">{{ member.email }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
|
|
@ -117,7 +117,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>
|
||||
|
|
@ -126,28 +126,28 @@
|
|||
<span
|
||||
:class="
|
||||
member.slackInvited
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-gray-100 text-gray-800'
|
||||
? '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-gray-600">
|
||||
<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-gray-600">
|
||||
<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-600 hover:text-primary-900"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Slack Invite
|
||||
</button>
|
||||
<button
|
||||
@click="editMember(member)"
|
||||
class="text-primary-600 hover:text-primary-900"
|
||||
class="text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
|
||||
<div
|
||||
v-if="!pending && !error && filteredMembers.length === 0"
|
||||
class="p-8 text-center text-gray-500"
|
||||
class="p-8 text-center text-guild-500"
|
||||
>
|
||||
No members found matching your criteria
|
||||
</div>
|
||||
|
|
@ -171,26 +171,26 @@
|
|||
v-if="showCreateModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
|
||||
<div class="px-6 py-4 border-b">
|
||||
<h3 class="text-lg font-semibold">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-gray-700 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-gray-300 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-gray-700 mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Email</label
|
||||
>
|
||||
<input
|
||||
|
|
@ -198,17 +198,17 @@
|
|||
type="email"
|
||||
placeholder="email@example.com"
|
||||
required
|
||||
class="w-full border border-gray-300 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-gray-700 mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Circle</label
|
||||
>
|
||||
<select
|
||||
v-model="newMember.circle"
|
||||
class="w-full border border-gray-300 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 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
||||
>
|
||||
<option value="community">Community</option>
|
||||
<option value="founder">Founder</option>
|
||||
|
|
@ -217,12 +217,12 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1"
|
||||
<label class="block text-sm font-medium text-guild-100 mb-1"
|
||||
>Contribution Tier</label
|
||||
>
|
||||
<select
|
||||
v-model="newMember.contributionTier"
|
||||
class="w-full border border-gray-300 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 rounded-lg px-3 py-2 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
|
||||
>
|
||||
<option value="0">$0/month</option>
|
||||
<option value="5">$5/month</option>
|
||||
|
|
@ -236,14 +236,14 @@
|
|||
<button
|
||||
type="button"
|
||||
@click="showCreateModal = false"
|
||||
class="px-4 py-2 text-gray-600 hover:text-gray-900"
|
||||
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>
|
||||
|
|
@ -296,11 +296,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) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue