staging changes before experimentation

src/App.vue

@@ -1,19 +1,122 @@
 <template>
   <v-app id="inspire">
     <v-navigation-drawer v-model="drawer">
-      <!--  -->
+      <v-list>
-      hello bleb smooch
+        <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>Inventory System Status</v-app-bar-title>
+      <v-app-bar-title>Dashboard</v-app-bar-title>
   
     </v-app-bar>
 
     <v-main>
-<v-pie 
+      <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
@@ -27,8 +130,12 @@
                   tooltip
                   reveal
                   :items="items"
-/>
+                />
-
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-main>
   </v-app>
 </template>
@@ -36,9 +143,44 @@
 
 
 <script setup>
-  import { ref } from 'vue'
+  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 drawer = ref(null)
   const items = [
     { key: 1, title: "Marvel", value: 1 },
     { key: 2, title: "Duplo", value: 1 },

src/App.vue.bak

@@ -0,0 +1,96 @@
+<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"
+        />
+        <v-list-item
+          prepend-icon="mdi-chart-box"
+          title="Statistics"
+          value="stats"
+        />
+        <v-list-item
+          prepend-icon="mdi-cog"
+          title="Settings"
+          value="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-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-main>
+  </v-app>
+</template>
+
+
+
+<script setup>
+  import { ref } from 'vue'
+
+  const drawer = ref(false)
+  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>

src/components/DynamicPieChart.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-pie 
+    title="Dynamic Sets by Theme"
+    animation
+    legend
+    :palette="palette"
+    tooltip
+    reveal
+    :items="dynamicItems"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// Sample API endpoint - replace with your actual data source
+const API_URL = 'https://api.example.com/themes'
+
+const 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'
+]
+
+const dynamicItems = ref([])
+
+// Simulated API call - replace this with your actual data fetching logic
+const fetchThemeData = async () => {
+  try {
+    // In a real application, you would fetch data from your API
+    // const response = await fetch(API_URL)
+    // const data = await response.json()
+    
+    // For demonstration, we'll simulate some dynamic data
+    const mockData = await simulateAPICall()
+    dynamicItems.value = mockData
+  } catch (error) {
+    console.error('Error fetching theme data:', error)
+  }
+}
+
+// This function simulates an API call - replace with your actual data source
+const simulateAPICall = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // This generates random values for demonstration
+      const themes = [
+        'Marvel', 'Duplo', 'Harry Potter', 'Friends', 'Star Wars',
+        'City', 'Technic', 'Creator', 'Ninjago', 'Disney'
+      ]
+      
+      const data = themes.map((theme, index) => ({
+        key: index + 1,
+        title: theme,
+        value: Math.floor(Math.random() * 5) + 1 // Random value between 1-5
+      }))
+      
+      resolve(data)
+    }, 1000) // Simulate network delay
+  })
+}
+
+// Fetch data when component mounts
+onMounted(() => {
+  fetchThemeData()
+})
+</script>

src/pages/demo.vue

@@ -0,0 +1,113 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <v-card class="mb-4">
+          <v-card-title>Demo Components</v-card-title>
+          <v-card-text>
+            <v-row>
+              <!-- Basic Card -->
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>Basic Card</v-card-title>
+                  <v-card-text>
+                    This is a basic card component with title and content.
+                  </v-card-text>
+                </v-card>
+              </v-col>
+
+              <!-- Card with Actions -->
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>Interactive Card</v-card-title>
+                  <v-card-text>
+                    This card has buttons and actions.
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-btn color="primary">Action</v-btn>
+                    <v-btn color="secondary">Cancel</v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-col>
+
+              <!-- Card with Icon -->
+              <v-col cols="12" md="4">
+                <v-card>
+                  <v-card-title>
+                    <v-icon start>mdi-star</v-icon>
+                    Card with Icon
+                  </v-card-title>
+                  <v-card-text>
+                    This card shows how to use icons.
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- Form Elements -->
+            <v-row class="mt-4">
+              <v-col cols="12" md="6">
+                <v-card>
+                  <v-card-title>Form Elements</v-card-title>
+                  <v-card-text>
+                    <v-text-field
+                      label="Text Input"
+                      placeholder="Enter some text"
+                      variant="outlined"
+                    ></v-text-field>
+                    <v-select
+                      label="Select Option"
+                      :items="['Option 1', 'Option 2', 'Option 3']"
+                      variant="outlined"
+                    ></v-select>
+                    <v-checkbox
+                      label="Checkbox Example"
+                    ></v-checkbox>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+
+              <!-- Data Display -->
+              <v-col cols="12" md="6">
+                <v-card>
+                  <v-card-title>Data Display</v-card-title>
+                  <v-card-text>
+                    <v-list>
+                      <v-list-item
+                        v-for="(item, i) in demoItems"
+                        :key="i"
+                        :title="item.title"
+                        :subtitle="item.subtitle"
+                        :prepend-icon="item.icon"
+                      ></v-list-item>
+                    </v-list>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+const demoItems = [
+  {
+    title: 'List Item 1',
+    subtitle: 'With an icon and subtitle',
+    icon: 'mdi-account'
+  },
+  {
+    title: 'List Item 2',
+    subtitle: 'Another example item',
+    icon: 'mdi-bell'
+  },
+  {
+    title: 'List Item 3',
+    subtitle: 'One more for good measure',
+    icon: 'mdi-cog'
+  }
+]
+</script>