Complete infrastructure reorganization to role-based structure
All checks were successful
Build And Push Image / docker (push) Successful in 1m50s
All checks were successful
Build And Push Image / docker (push) Successful in 1m50s
- Created all missing admin pages (users, settings, events, members, payments) - Created board pages (governance, meetings) - Updated dashboard router to use new /admin, /board, /member structure - Added isMember alias to useAuth composable for consistency - All pages now use correct role-based layouts and middleware - Build verified successfully The platform now has a clean separation: - /admin/* - Administrator dashboard and tools - /board/* - Board member governance and meetings - /member/* - Member portal and resources Next steps: Complete remaining member pages and clean up old dashboard files
This commit is contained in:
293
pages/board/meetings/index.vue
Normal file
293
pages/board/meetings/index.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<!-- Header -->
|
||||
<v-row class="mb-6">
|
||||
<v-col>
|
||||
<h1 class="text-h3 font-weight-bold mb-2">Board Meetings</h1>
|
||||
<p class="text-body-1 text-medium-emphasis">Schedule and manage board meetings</p>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="flat"
|
||||
prepend-icon="mdi-calendar-plus"
|
||||
@click="showScheduleDialog = true"
|
||||
>
|
||||
Schedule Meeting
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Meeting Tabs -->
|
||||
<v-tabs v-model="activeTab" color="primary" class="mb-6">
|
||||
<v-tab value="upcoming">Upcoming</v-tab>
|
||||
<v-tab value="past">Past Meetings</v-tab>
|
||||
<v-tab value="calendar">Calendar View</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-window v-model="activeTab">
|
||||
<!-- Upcoming Meetings -->
|
||||
<v-window-item value="upcoming">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="meeting in upcomingMeetings"
|
||||
:key="meeting.id"
|
||||
cols="12"
|
||||
>
|
||||
<v-card elevation="2" class="mb-3">
|
||||
<v-card-text>
|
||||
<v-row align="center">
|
||||
<v-col cols="auto">
|
||||
<v-avatar color="primary" size="56">
|
||||
<v-icon>mdi-calendar</v-icon>
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h3 class="text-h6 mb-1">{{ meeting.title }}</h3>
|
||||
<div class="text-body-2 text-medium-emphasis mb-2">
|
||||
<v-icon size="small" class="mr-1">mdi-calendar</v-icon>
|
||||
{{ formatDate(meeting.date) }}
|
||||
<v-icon size="small" class="ml-3 mr-1">mdi-clock</v-icon>
|
||||
{{ meeting.time }}
|
||||
<v-icon size="small" class="ml-3 mr-1">mdi-map-marker</v-icon>
|
||||
{{ meeting.location }}
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
<v-chip size="small" variant="tonal" class="mr-2">
|
||||
<v-icon start size="small">mdi-account-group</v-icon>
|
||||
{{ meeting.attendees }} Confirmed
|
||||
</v-chip>
|
||||
<v-chip size="small" variant="tonal" color="info">
|
||||
{{ meeting.type }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<v-btn variant="outlined" color="primary" class="mr-2" @click="viewMeeting(meeting)">
|
||||
View Details
|
||||
</v-btn>
|
||||
<v-btn variant="flat" color="primary" @click="joinMeeting(meeting)">
|
||||
Join Meeting
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Past Meetings -->
|
||||
<v-window-item value="past">
|
||||
<v-data-table
|
||||
:headers="pastMeetingHeaders"
|
||||
:items="pastMeetings"
|
||||
class="elevation-2"
|
||||
hover
|
||||
>
|
||||
<template v-slot:item.title="{ item }">
|
||||
<div class="font-weight-medium">{{ item.title }}</div>
|
||||
</template>
|
||||
<template v-slot:item.date="{ item }">
|
||||
{{ formatDate(item.date) }}
|
||||
</template>
|
||||
<template v-slot:item.attendees="{ item }">
|
||||
<v-chip size="small" variant="tonal">
|
||||
{{ item.attendees }}/{{ item.totalInvited }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn icon="mdi-file-document" size="small" variant="text" @click="viewMinutes(item)" />
|
||||
<v-btn icon="mdi-download" size="small" variant="text" @click="downloadMaterials(item)" />
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-window-item>
|
||||
|
||||
<!-- Calendar View -->
|
||||
<v-window-item value="calendar">
|
||||
<v-card elevation="2">
|
||||
<v-card-text>
|
||||
<div class="text-center py-12">
|
||||
<v-icon size="64" color="primary" class="mb-4">mdi-calendar-month</v-icon>
|
||||
<h3 class="text-h5 mb-2">Calendar View</h3>
|
||||
<p class="text-body-1 text-medium-emphasis">
|
||||
Interactive calendar view coming soon
|
||||
</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
|
||||
<!-- Schedule Meeting Dialog -->
|
||||
<v-dialog v-model="showScheduleDialog" max-width="600">
|
||||
<v-card>
|
||||
<v-card-title>Schedule Board Meeting</v-card-title>
|
||||
<v-card-text>
|
||||
<v-form ref="meetingForm">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="meetingForm.title"
|
||||
label="Meeting Title"
|
||||
variant="outlined"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-select
|
||||
v-model="meetingForm.type"
|
||||
label="Meeting Type"
|
||||
:items="['Regular', 'Special', 'Emergency', 'Annual']"
|
||||
variant="outlined"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="meetingForm.date"
|
||||
label="Date"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="meetingForm.time"
|
||||
label="Time"
|
||||
type="time"
|
||||
variant="outlined"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="meetingForm.location"
|
||||
label="Location"
|
||||
variant="outlined"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
v-model="meetingForm.agenda"
|
||||
label="Agenda"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn variant="text" @click="showScheduleDialog = false">Cancel</v-btn>
|
||||
<v-btn color="primary" variant="flat" @click="scheduleMeeting">Schedule</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'board',
|
||||
middleware: 'board'
|
||||
});
|
||||
|
||||
// State
|
||||
const activeTab = ref('upcoming');
|
||||
const showScheduleDialog = ref(false);
|
||||
|
||||
// Form data
|
||||
const meetingForm = ref({
|
||||
title: '',
|
||||
type: '',
|
||||
date: '',
|
||||
time: '',
|
||||
location: '',
|
||||
agenda: ''
|
||||
});
|
||||
|
||||
// Mock data
|
||||
const upcomingMeetings = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: 'Monthly Board Meeting - February',
|
||||
date: new Date('2024-02-15'),
|
||||
time: '10:00 AM',
|
||||
location: 'Board Room / Zoom',
|
||||
type: 'Regular',
|
||||
attendees: 8
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Strategic Planning Session',
|
||||
date: new Date('2024-02-28'),
|
||||
time: '2:00 PM',
|
||||
location: 'Conference Center',
|
||||
type: 'Special',
|
||||
attendees: 12
|
||||
}
|
||||
]);
|
||||
|
||||
const pastMeetings = ref([
|
||||
{
|
||||
id: 3,
|
||||
title: 'Monthly Board Meeting - January',
|
||||
date: new Date('2024-01-15'),
|
||||
time: '10:00 AM',
|
||||
attendees: 9,
|
||||
totalInvited: 10
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Annual General Meeting',
|
||||
date: new Date('2024-01-05'),
|
||||
time: '6:00 PM',
|
||||
attendees: 45,
|
||||
totalInvited: 50
|
||||
}
|
||||
]);
|
||||
|
||||
// Table headers
|
||||
const pastMeetingHeaders = [
|
||||
{ title: 'Meeting', key: 'title' },
|
||||
{ title: 'Date', key: 'date' },
|
||||
{ title: 'Time', key: 'time' },
|
||||
{ title: 'Attendance', key: 'attendees' },
|
||||
{ title: 'Actions', key: 'actions', align: 'end' }
|
||||
];
|
||||
|
||||
// Methods
|
||||
const formatDate = (date: Date) => {
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
const viewMeeting = (meeting: any) => {
|
||||
console.log('View meeting:', meeting);
|
||||
};
|
||||
|
||||
const joinMeeting = (meeting: any) => {
|
||||
console.log('Join meeting:', meeting);
|
||||
};
|
||||
|
||||
const viewMinutes = (meeting: any) => {
|
||||
console.log('View minutes:', meeting);
|
||||
};
|
||||
|
||||
const downloadMaterials = (meeting: any) => {
|
||||
console.log('Download materials:', meeting);
|
||||
};
|
||||
|
||||
const scheduleMeeting = () => {
|
||||
console.log('Schedule meeting:', meetingForm.value);
|
||||
showScheduleDialog.value = false;
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user