refactor pages

src/App.vue

@@ -9,7 +9,14 @@
           to="/"
         />
         <v-list-item
-          prepend-icon="mdi-file-search"
+          prepend-icon="mdi-toy-brick-plus"
+          title="Changes"
+          value="changes"
+          to="/changes"
+        />
+
+        <v-list-item
+          prepend-icon="mdi-toy-brick-search"
           title="Review"
           value="review"
           to="/review"
@@ -21,16 +28,10 @@
           to="/stats"
         />
 
-        <v-list-item
-          prepend-icon="mdi-code-tags"
-          title="Demo"
-          value="demo"
-          to="/demo"
-        />
         <v-divider class="my-2"></v-divider>
         <v-list-item
-          prepend-icon="mdi-cog"
-          title="Settings"
+          prepend-icon="mdi-sync-off"
+          title="Run sync (DISABLED)"
           value="settings"
           to="/settings"
           disabled="true"
@@ -39,14 +40,14 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar>
+    <v-app-bar density="compact">
       <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-title><a href="/">Dashboard</a></v-app-bar-title>
   
     </v-app-bar>
 
-    <v-main>
+    <v-main class="pa-0">
       <router-view />
     </v-main>
   </v-app>

src/components/AppFooter.vue

@@ -25,15 +25,15 @@
       class="text-caption text-disabled"
       style="position: absolute; right: 16px;"
     >
-      &copy; 2025-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">PLAY-WELL TEKNOLOGIES</span>
+      &copy; {{ copyrightYear }} <span class="d-none d-sm-inline-block">PLAY-WELL TEKNOLOGIES</span>
       —
       <a
         class="text-decoration-none on-surface"
-        href="https://www.mozilla.org/en-US/MPL/"
+        href="https://www.mozilla.org/en-US/MPL/2.0"
         rel="noopener noreferrer"
         target="_blank"
       >
-        MPL 2.0 License
+        MPL 2.0
       </a>
     </div>
 
@@ -41,6 +41,14 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
+
+const copyrightYear = computed(() => {
+  const currentYear = new Date().getFullYear()
+  const startYear = 2025
+  return currentYear > startYear ? `${startYear}-${currentYear}` : `${startYear}`
+})
+
 /*
   const items = [
     {

src/pages/changes.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-container fluid class="pa-0 ma-0">
+    <v-card style="height: calc(100vh - 64px); display: flex; flex-direction: column;">
+      <v-card-title class="text-h5">Recent Changes</v-card-title>
+      
+      <v-card-text style="overflow-y: auto; flex: 1; padding: 0;">
+        <v-list>
+          <template v-for="(item, index) in changeItems" :key="item.id">
+            <v-list-item
+              :title="item.title"
+              :subtitle="item.description"
+              :prepend-icon="item.icon"
+              three-line
+            >
+              <template v-slot:append>
+                <v-chip 
+                  :color="getTypeColor(item.type)"
+                  size="small"
+                >
+                  {{ item.type }}
+                </v-chip>
+              </template>
+            </v-list-item>
+            
+            <v-divider v-if="index < changeItems.length - 1"></v-divider>
+          </template>
+        </v-list>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<route lang="yaml">
+name: changes
+layout: default
+</route>
+
+<script setup>
+import { ref } from 'vue'
+
+// Sample change items - replace with actual data from your API
+const changeItems = ref([
+  {
+    id: 1,
+    title: 'Added set 76218 (MV)',
+    description: 'Marvel Spider-Man set added to inventory. Quantity: 5 units. Added 2 minutes ago.',
+    type: 'Add',
+    icon: 'mdi-plus-circle'
+  },
+  {
+    id: 2,
+    title: 'Marked for Review 76389 (HP)',
+    description: 'Harry Potter Hogwarts Chamber flagged for manual review. Price mismatch detected. 15 minutes ago.',
+    type: 'Review',
+    icon: 'mdi-pencil'
+  },
+  {
+    id: 3,
+    title: 'Removed duplicate 71404 (FR)',
+    description: 'Friends Beach House duplicate entry removed from database. 1 hour ago.',
+    type: 'Remove',
+    icon: 'mdi-minus-circle'
+  },
+  {
+    id: 4,
+    title: 'Added set 75396 (SW)',
+    description: 'Star Wars AT-TE Walker added to inventory. Quantity: 2 units. 2 hours ago.',
+    type: 'Add',
+    icon: 'mdi-plus-circle'
+  },
+  {
+    id: 5,
+    title: 'Updated set 75387 (SW)',
+    description: 'Star Wars Millennium Falcon inventory count updated from 3 to 5. 3 hours ago.',
+    type: 'Update',
+    icon: 'mdi-pencil'
+  },
+  {
+    id: 6,
+    title: 'Added set 60320 (City)',
+    description: 'City Fire Station added to inventory. Quantity: 8 units. 4 hours ago.',
+    type: 'Add',
+    icon: 'mdi-plus-circle'
+  },
+  {
+    id: 7,
+    title: 'Updated set 42143 (Technic)',
+    description: 'Technic Ferrari price updated to match Square. 5 hours ago.',
+    type: 'Update',
+    icon: 'mdi-pencil'
+  }
+])
+
+const getTypeColor = (type) => {
+  switch(type) {
+    case 'Add': return 'success'
+    case 'Remove': return 'error'
+    case 'Update': return 'info'
+    case 'Review': return 'warning'
+    default: return 'default'
+  }
+}
+</script>

src/pages/index.vue

@@ -1,11 +1,10 @@
 <template>
-<v-main>
-    <v-container fluid>
-      <v-row>
+    <v-container fluid class="pa-0 ma-0">
+      <v-row class="ma-0">
         <!-- 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-card-title><a href="changes/">Recent Changes</a></v-card-title>
             <v-list>
               <v-list-item
                 v-for="(change, index) in recentChanges"
@@ -22,6 +21,13 @@
               </v-list-item>
             </v-list>
           </v-card>
+
+          <v-card class="mb-4">
+            <v-card-text class="text-center">
+              <div class="text-h4">{{ itemsWaitingForReview }}</div>
+              <div class="text-subtitle-1"><a href="/review">Items waiting for review</a></div>
+            </v-card-text>
+          </v-card>
         </v-col>
 
         <!-- Column 2: Graphs and Statistics -->
@@ -73,11 +79,10 @@
 
         <!-- Column 3: Pie Chart -->
         <v-col cols="12" md="3">
-          <v-card>
+          <v-card style="max-height: calc(100vh - 100px); display: flex; flex-direction: column;">
             <v-card-title>Theme Distribution</v-card-title>
-            <v-card-text>
+            <v-card-text style="overflow-y: auto; flex: 1;">
               <v-pie 
-                title="Sets by theme"
                 animation
                 legend
                 :palette="['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD', 
@@ -96,7 +101,6 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-main>
 </template>
 
 
@@ -110,6 +114,7 @@
   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
+  const itemsWaitingForReview = ref(7) // Number of items waiting for review
 
   // Sample recent changes data
   const recentChanges = [

src/pages/review.vue

@@ -1,11 +1,88 @@
 <template>
-this is the page that shows items needed for manual review
-</template>
+  <v-container fluid class="pa-0 ma-0">
+    <v-card style="height: calc(100vh - 64px); display: flex; flex-direction: column;">
+      <v-card-title class="text-h5">Manual Review Items</v-card-title>
       
+      <v-card-text style="overflow-y: auto; flex: 1; padding: 0;">
+        <v-list>
+          <template v-for="(item, index) in reviewItems" :key="item.id">
+            <v-list-item
+              :title="item.title"
+              :subtitle="item.description"
+              :prepend-icon="item.icon"
+              three-line
+            >
+              <template v-slot:append>
+                <v-chip 
+                  :color="getStatusColor(item.status)"
+                  size="small"
+                >
+                  {{ item.status }}
+                </v-chip>
+              </template>
+            </v-list-item>
+            
+            <v-divider v-if="index < reviewItems.length - 1"></v-divider>
+          </template>
+        </v-list>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
 
 <route lang="yaml">
 name: review
 layout: default
 </route>
 
-<script setup> </script>
+<script setup>
+import { ref } from 'vue'
+
+// Sample review items - replace with actual data from your API
+const reviewItems = ref([
+  {
+    id: 1,
+    title: 'LEGO Set 76218 - Marvel Spider-Man',
+    description: 'Inventory mismatch detected. Square shows 5 units, database shows 3 units.',
+    status: 'Pending',
+    icon: 'mdi-alert-circle'
+  },
+  {
+    id: 2,
+    title: 'LEGO Set 76389 - Harry Potter Hogwarts Chamber',
+    description: 'Price discrepancy found. Needs verification.',
+    status: 'Urgent',
+    icon: 'mdi-alert'
+  },
+  {
+    id: 3,
+    title: 'LEGO Set 71404 - Friends Beach House',
+    description: 'Duplicate entry detected in system.',
+    status: 'Review',
+    icon: 'mdi-file-document-multiple'
+  },
+  {
+    id: 4,
+    title: 'LEGO Set 75396 - Star Wars AT-TE Walker',
+    description: 'New set added to Square but not in Brickset database.',
+    status: 'Pending',
+    icon: 'mdi-plus-circle'
+  },
+  {
+    id: 5,
+    title: 'LEGO Set 75387 - Star Wars Millennium Falcon',
+    description: 'Stock level adjustment required.',
+    status: 'Review',
+    icon: 'mdi-pencil'
+  }
+])
+
+const getStatusColor = (status) => {
+  switch(status) {
+    case 'Urgent': return 'error'
+    case 'Pending': return 'warning'
+    case 'Review': return 'info'
+    default: return 'default'
+  }
+}
+</script>