monacousa-portal/pages/board/meetings/index.vue

<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>