88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<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>
|
|
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> |