refactor pages

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>