studspider-status/src/App.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer">
      <v-list>
        <v-list-item
          prepend-icon="mdi-view-dashboard"
          title="Dashboard"
          value="dashboard"
          to="/"
        />
        <v-list-item
          prepend-icon="mdi-chart-box"
          title="Statistics"
          value="stats"
          to="/stats"
        />
        <v-list-item
          prepend-icon="mdi-code-tags"
          title="Demo"
          value="demo"
          to="/demo"
          color="primary"
        />
        <v-divider class="my-2"></v-divider>
        <v-list-item
          prepend-icon="mdi-cog"
          title="Settings"
          value="settings"
          to="/settings"
        />

      </v-list>
    </v-navigation-drawer>

    <v-app-bar>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

      <v-app-bar-title>Dashboard</v-app-bar-title>
  
    </v-app-bar>

    <v-main>
      <v-container fluid>
        <v-row>
          <!-- Column 1: Database Changes List -->
          <v-col cols="12" md="3">
            <v-card class="mb-4">
              <v-card-title>Recent Changes</v-card-title>
              <v-list>
                <v-list-item
                  v-for="(change, index) in recentChanges"
                  :key="index"
                  :title="change.title"
                  :subtitle="change.timestamp"
                  :prepend-icon="change.type === 'add' ? 'mdi-plus-circle' : change.type === 'remove' ? 'mdi-minus-circle' : 'mdi-pencil'"
                >
                  <template v-slot:prepend>
                    <v-icon :color="change.type === 'add' ? 'success' : change.type === 'remove' ? 'error' : 'info'">
                      {{ change.type === 'add' ? 'mdi-plus-circle' : change.type === 'remove' ? 'mdi-minus-circle' : 'mdi-pencil' }}
                    </v-icon>
                  </template>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>

          <!-- Column 2: Graphs and Statistics -->
          <v-col cols="12" md="6">
            <v-card class="mb-4">
              <v-card-title>Changes Over Time</v-card-title>
              <v-card-text>
                <v-sheet height="300">
                  <!-- Placeholder for line chart - you can add your preferred charting library here -->
                  <v-responsive class="text-center">
                    Line Chart Coming Soon
                  </v-responsive>
                </v-sheet>
              </v-card-text>
            </v-card>

            <v-card class="mb-4">
              <v-card-title>Statistics</v-card-title>
              <v-card-text>
                <v-row>
                  <v-col cols="12" md="4">
                    <v-card variant="outlined">
                      <v-card-text class="text-center">
                        <div class="text-h3">{{ totalSets }}</div>
                        <div class="text-subtitle-1">Total Sets</div>
                      </v-card-text>
                    </v-card>
                  </v-col>
                  <v-col cols="12" md="4">
                    <v-card variant="outlined">
                      <v-card-text class="text-center">
                        <div class="text-h3">{{ totalThemes }}</div>
                        <div class="text-subtitle-1">Total Themes</div>
                      </v-card-text>
                    </v-card>
                  </v-col>
                  <v-col cols="12" md="4">
                    <v-card variant="outlined">
                      <v-card-text class="text-center">
                        <div class="text-h3">{{ changesThisWeek }}</div>
                        <div class="text-subtitle-1">Changes This Week</div>
                      </v-card-text>
                    </v-card>
                  </v-col>
                </v-row>
              </v-card-text>
            </v-card>
          </v-col>

          <!-- Column 3: Pie Chart -->
          <v-col cols="12" md="3">
            <v-card>
              <v-card-title>Theme Distribution</v-card-title>
              <v-card-text>
                <v-pie 
                  title="Sets by theme"
                  animation
                  legend
                  :palette="['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD', 
                    '#D4A5A5', '#9B59B6', '#3498DB', '#E74C3C', '#2ECC71',
                    '#F1C40F', '#1ABC9C', '#D35400', '#C0392B', '#8E44AD',
                    '#2980B9', '#27AE60', '#F39C12', '#16A085', '#E67E22',
                    '#9B59B6', '#2C3E50', '#E84393', '#00B894', '#FD79A8',
                    '#6C5CE7', '#A8E6CF', '#DCEDC1', '#FFD3B6', '#FFAAA5',
                    '#FF8B94', '#A8D8EA']"
                  tooltip
                  reveal
                  :items="items"
                />
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>



<script setup>
  import { ref, computed } from 'vue'

  const drawer = ref(false)
  
  // Statistics
  const totalSets = computed(() => items.reduce((acc, item) => acc + item.value, 0))
  const totalThemes = computed(() => items.length)
  const changesThisWeek = ref(12) // This could be computed from recentChanges if needed

  // Sample recent changes data
  const recentChanges = [
    { 
      title: "Added new Marvel set",
      timestamp: "2 minutes ago",
      type: "add"
    },
    {
      title: "Updated Harry Potter count",
      timestamp: "15 minutes ago",
      type: "update"
    },
    {
      title: "Removed duplicate Friends set",
      timestamp: "1 hour ago",
      type: "remove"
    },
    {
      title: "Added Star Wars set",
      timestamp: "2 hours ago",
      type: "add"
    },
    {
      title: "Updated Technic inventory",
      timestamp: "3 hours ago",
      type: "update"
    }
  ]

  const items = [
    { key: 1, title: "Marvel", value: 1 },
    { key: 2, title: "Duplo", value: 1 },
    { key: 3, title: "Harry Potter", value: 1 },
    { key: 4, title: "Friends", value: 2 }, // Listed twice in original list
    { key: 5, title: "Sonic", value: 1 },
    { key: 6, title: "Mario", value: 1 },
    { key: 7, title: "DC", value: 1 },
    { key: 8, title: "Avatar", value: 1 },
    { key: 9, title: "Classic", value: 1 },
    { key: 10, title: "City", value: 1 },
    { key: 11, title: "Fortnite", value: 1 },
    { key: 12, title: "Wednesday", value: 1 },
    { key: 13, title: "Wicked", value: 1 },
    { key: 14, title: "Speed Champs", value: 1 },
    { key: 15, title: "Animal Crossing", value: 1 },
    { key: 16, title: "Creator", value: 1 },
    { key: 17, title: "Ideas", value: 2 }, // Listed twice in original list
    { key: 18, title: "Ninjago", value: 1 },
    { key: 19, title: "JP", value: 1 },
    { key: 20, title: "Star Wars", value: 1 },
    { key: 21, title: "Architecture", value: 1 },
    { key: 22, title: "Icons", value: 1 },
    { key: 23, title: "Dots", value: 1 },
    { key: 24, title: "Dreamzzz", value: 1 },
    { key: 25, title: "One Piece", value: 1 },
    { key: 26, title: "Bluey", value: 1 },
    { key: 27, title: "Disney", value: 1 },
    { key: 28, title: "Technic", value: 1 },
    { key: 29, title: "Art", value: 1 },
    { key: 30, title: "Botanicals", value: 1 }
  ]
</script>

<script>
  export default {
    data: () => ({ drawer: null }),
  }

</script>