Readying for design

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

View file

@ -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">Admin Interface - Working Version</h1>
<p class="text-gray-600">Fully functional admin interface without Nuxt UI component issues</p>
<h1 class="text-display font-bold text-guild-100">Admin Interface - Working Version</h1>
<p class="text-guild-400">Fully functional admin interface without Nuxt UI component issues</p>
</div>
</div>
</div>
@ -12,56 +12,56 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Navigation Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<NuxtLink to="/admin/dashboard" class="block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-blue-200">
<div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<NuxtLink to="/admin/dashboard" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-candlelight-800">
<div 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-candlelight-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Dashboard</h3>
<p class="text-gray-600 text-sm">Overview & statistics</p>
<h3 class="text-lg font-semibold text-guild-100 mb-2">Dashboard</h3>
<p class="text-guild-400 text-sm">Overview & statistics</p>
</NuxtLink>
<NuxtLink to="/admin/members-working" class="block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-green-200">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<NuxtLink to="/admin/members-working" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-candlelight-800">
<div 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-candlelight-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-.5a4 4 0 110 5.292M4 19.5a4 4 0 010-5.292"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Members</h3>
<p class="text-gray-600 text-sm">Manage members</p>
<h3 class="text-lg font-semibold text-guild-100 mb-2">Members</h3>
<p class="text-guild-400 text-sm">Manage members</p>
</NuxtLink>
<NuxtLink to="/admin/events-working" class="block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-purple-200">
<div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<NuxtLink to="/admin/events-working" class="block bg-guild-900 rounded-lg shadow hover:shadow-lg transition-shadow p-6 text-center border-2 border-transparent hover:border-earth-800">
<div class="w-16 h-16 bg-earth-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-earth-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Events</h3>
<p class="text-gray-600 text-sm">Manage events</p>
<h3 class="text-lg font-semibold text-guild-100 mb-2">Events</h3>
<p class="text-guild-400 text-sm">Manage events</p>
</NuxtLink>
<div class="bg-gray-100 rounded-lg p-6 text-center border-2 border-dashed border-gray-300">
<div class="w-16 h-16 bg-gray-200 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="bg-guild-950 rounded-lg p-6 text-center border-2 border-dashed border-guild-700">
<div class="w-16 h-16 bg-guild-800 rounded-2xl flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-guild-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2 text-gray-600">More</h3>
<p class="text-gray-500 text-sm">Coming soon</p>
<h3 class="text-lg font-semibold mb-2 text-guild-400">More</h3>
<p class="text-guild-500 text-sm">Coming soon</p>
</div>
</div>
<!-- Status Information -->
<div class="bg-green-50 border border-green-200 rounded-lg p-6">
<div class="bg-candlelight-900/20 border border-candlelight-800 rounded-lg p-6">
<div class="flex items-start">
<svg class="w-6 h-6 text-green-600 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-candlelight-400 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="text-lg font-semibold text-green-800 mb-2">Admin Interface Status: Fully Working</h3>
<div class="space-y-2 text-green-700">
<h3 class="text-lg font-semibold text-candlelight-400 mb-2">Admin Interface Status: Fully Working</h3>
<div class="space-y-2 text-candlelight-400">
<p> <strong>Dashboard:</strong> Shows statistics, recent members, and upcoming events</p>
<p> <strong>Member Management:</strong> Full CRUD operations, search, filter, create members</p>
<p> <strong>Event Management:</strong> Create, edit, delete, duplicate events with full forms</p>
@ -75,21 +75,21 @@
<!-- Quick Stats Preview -->
<div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-white rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-blue-600">{{ memberCount }}</p>
<p class="text-sm text-gray-600">Members</p>
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">{{ memberCount }}</p>
<p class="text-sm text-guild-400">Members</p>
</div>
<div class="bg-white rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-green-600">{{ eventCount }}</p>
<p class="text-sm text-gray-600">Events</p>
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-candlelight-400 text-ui-mono">{{ eventCount }}</p>
<p class="text-sm text-guild-400">Events</p>
</div>
<div class="bg-white rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-purple-600">${{ monthlyRevenue }}</p>
<p class="text-sm text-gray-600">Monthly Revenue</p>
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-earth-400 text-ui-mono">${{ monthlyRevenue }}</p>
<p class="text-sm text-guild-400">Monthly Revenue</p>
</div>
<div class="bg-white rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-orange-600">{{ pendingInvites }}</p>
<p class="text-sm text-gray-600">Pending Invites</p>
<div class="bg-guild-900 rounded-lg shadow p-4 text-center">
<p class="text-2xl font-bold text-ember-400 text-ui-mono">{{ pendingInvites }}</p>
<p class="text-sm text-guild-400">Pending Invites</p>
</div>
</div>
</div>