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-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">Admin Dashboard</h1>
|
||||
<p class="text-muted">
|
||||
<h1 class="text-display font-bold text-guild-100">Admin Dashboard</h1>
|
||||
<p class="text-guild-400">
|
||||
Manage Ghost Guild members, events, and community operations
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -14,19 +14,19 @@
|
|||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Quick Stats -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-muted">Total Members</p>
|
||||
<p class="text-2xl font-bold text-blue-600">
|
||||
<p class="text-sm text-guild-400">Total Members</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
{{ stats.totalMembers || 0 }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center"
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-blue-600"
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -42,19 +42,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-muted">Active Events</p>
|
||||
<p class="text-2xl font-bold text-green-600">
|
||||
<p class="text-sm text-guild-400">Active Events</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
{{ stats.activeEvents || 0 }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center"
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-green-600"
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -70,19 +70,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-muted">Monthly Revenue</p>
|
||||
<p class="text-2xl font-bold text-purple-600">
|
||||
<p class="text-sm text-guild-400">Monthly Revenue</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
${{ stats.monthlyRevenue || 0 }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center"
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-purple-600"
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -98,19 +98,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-muted">Pending Slack Invites</p>
|
||||
<p class="text-2xl font-bold text-orange-600">
|
||||
<p class="text-sm text-guild-400">Pending Slack Invites</p>
|
||||
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">
|
||||
{{ stats.pendingSlackInvites || 0 }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center"
|
||||
class="w-12 h-12 bg-candlelight-900/20 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-orange-600"
|
||||
class="w-6 h-6 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -129,13 +129,13 @@
|
|||
|
||||
<!-- Quick Actions -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
|
||||
class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8 text-blue-600"
|
||||
class="w-8 h-8 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -148,28 +148,28 @@
|
|||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-2 text-highlighted">
|
||||
<h3 class="text-display-sm font-semibold mb-2 text-guild-100">
|
||||
Add New Member
|
||||
</h3>
|
||||
<p class="text-muted text-sm mb-4">
|
||||
<p class="text-guild-400 text-sm mb-4">
|
||||
Add a new member to the Ghost Guild community
|
||||
</p>
|
||||
<button
|
||||
@click="navigateTo('/admin/members')"
|
||||
class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
|
||||
>
|
||||
Manage Members
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-elevated rounded-lg shadow p-6">
|
||||
<div class="bg-guild-900 rounded-lg shadow p-6">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
|
||||
class="w-16 h-16 bg-candlelight-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8 text-green-600"
|
||||
class="w-8 h-8 text-candlelight-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -182,15 +182,15 @@
|
|||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-2 text-highlighted">
|
||||
<h3 class="text-display-sm font-semibold mb-2 text-guild-100">
|
||||
Create Event
|
||||
</h3>
|
||||
<p class="text-muted text-sm mb-4">
|
||||
<p class="text-guild-400 text-sm mb-4">
|
||||
Schedule a new community event or workshop
|
||||
</p>
|
||||
<button
|
||||
@click="navigateTo('/admin/events')"
|
||||
class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
|
||||
class="w-full bg-candlelight-600 text-white py-2 px-4 rounded-lg hover:bg-candlelight-700 focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2"
|
||||
>
|
||||
Manage Events
|
||||
</button>
|
||||
|
|
@ -200,15 +200,15 @@
|
|||
|
||||
<!-- Recent Activity -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-elevated rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-default">
|
||||
<div class="bg-guild-900 rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-guild-700">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold text-highlighted">
|
||||
<h3 class="text-display-sm font-semibold text-guild-100">
|
||||
Recent Members
|
||||
</h3>
|
||||
<button
|
||||
@click="navigateTo('/admin/members')"
|
||||
class="text-sm text-primary hover:text-primary"
|
||||
class="text-sm text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
View All
|
||||
</button>
|
||||
|
|
@ -218,20 +218,20 @@
|
|||
<div class="p-6">
|
||||
<div v-if="pending" class="text-center py-4">
|
||||
<div
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
|
||||
></div>
|
||||
</div>
|
||||
<div v-else-if="recentMembers.length" class="space-y-3">
|
||||
<div
|
||||
v-for="member in recentMembers"
|
||||
:key="member._id"
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-default"
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-highlighted">
|
||||
<p class="font-medium text-guild-100">
|
||||
{{ member.name }}
|
||||
</p>
|
||||
<p class="text-sm text-muted">
|
||||
<p class="text-sm text-guild-400">
|
||||
{{ member.email }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -242,27 +242,27 @@
|
|||
>
|
||||
{{ member.circle }}
|
||||
</span>
|
||||
<p class="text-xs text-dimmed">
|
||||
<p class="text-xs text-guild-500 text-ui-mono">
|
||||
{{ formatDate(member.createdAt) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-6 text-dimmed">
|
||||
<div v-else class="text-center py-6 text-guild-500">
|
||||
No recent members
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-elevated rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-default">
|
||||
<div class="bg-guild-900 rounded-lg shadow">
|
||||
<div class="px-6 py-4 border-b border-guild-700">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold text-highlighted">
|
||||
<h3 class="text-display-sm font-semibold text-guild-100">
|
||||
Upcoming Events
|
||||
</h3>
|
||||
<button
|
||||
@click="navigateTo('/admin/events')"
|
||||
class="text-sm text-primary hover:text-primary"
|
||||
class="text-sm text-candlelight-400 hover:text-candlelight-300"
|
||||
>
|
||||
View All
|
||||
</button>
|
||||
|
|
@ -272,20 +272,20 @@
|
|||
<div class="p-6">
|
||||
<div v-if="pending" class="text-center py-4">
|
||||
<div
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto"
|
||||
class="animate-spin rounded-full h-6 w-6 border-b-2 border-candlelight-500 mx-auto"
|
||||
></div>
|
||||
</div>
|
||||
<div v-else-if="upcomingEvents.length" class="space-y-3">
|
||||
<div
|
||||
v-for="event in upcomingEvents"
|
||||
:key="event._id"
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-default"
|
||||
class="flex items-center justify-between p-3 rounded-lg border border-guild-700"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-highlighted">
|
||||
<p class="font-medium text-guild-100">
|
||||
{{ event.title }}
|
||||
</p>
|
||||
<p class="text-sm text-muted">
|
||||
<p class="text-sm text-guild-400">
|
||||
{{ formatDateTime(event.startDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -296,13 +296,13 @@
|
|||
>
|
||||
{{ event.eventType }}
|
||||
</span>
|
||||
<p class="text-xs text-dimmed">
|
||||
<p class="text-xs text-guild-500">
|
||||
{{ event.location || "Online" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-6 text-dimmed">
|
||||
<div v-else class="text-center py-6 text-guild-500">
|
||||
No upcoming events
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -327,21 +327,21 @@ const upcomingEvents = computed(
|
|||
|
||||
const getCircleBadgeClasses = (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-accented text-default";
|
||||
return classes[circle] || "bg-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const getEventTypeBadgeClasses = (type) => {
|
||||
const classes = {
|
||||
community: "bg-blue-100 text-blue-800",
|
||||
workshop: "bg-green-100 text-green-800",
|
||||
social: "bg-purple-100 text-purple-800",
|
||||
showcase: "bg-orange-100 text-orange-800",
|
||||
community: "bg-candlelight-900/20 text-candlelight-400",
|
||||
workshop: "bg-candlelight-900/20 text-candlelight-400",
|
||||
social: "bg-earth-900/20 text-earth-400",
|
||||
showcase: "bg-ember-900/20 text-ember-400",
|
||||
};
|
||||
return classes[type] || "bg-accented text-default";
|
||||
return classes[type] || "bg-guild-800 text-guild-300";
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue