refactor pages

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 class="pa-0 ma-0">
-    <v-container fluid>
+      <v-row class="ma-0">
-      <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-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
+  <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>