77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
// Flagged responses broken down by report reason, mapped from
|
|
// captain_message_reports.report_reason (sample data).
|
|
const flagReasons = [
|
|
{
|
|
key: 'incorrect',
|
|
label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.INCORRECT'),
|
|
count: 11,
|
|
},
|
|
{
|
|
key: 'incomplete',
|
|
label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.INCOMPLETE'),
|
|
count: 7,
|
|
},
|
|
{
|
|
key: 'outdated',
|
|
label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.OUTDATED'),
|
|
count: 4,
|
|
},
|
|
{
|
|
key: 'inappropriate',
|
|
label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.INAPPROPRIATE'),
|
|
count: 2,
|
|
},
|
|
{ key: 'other', label: t('CAPTAIN.OVERVIEW.FLAG_REASONS.OTHER'), count: 3 },
|
|
];
|
|
|
|
const total = computed(() =>
|
|
flagReasons.reduce((sum, reason) => sum + reason.count, 0)
|
|
);
|
|
|
|
// Flagged responses as a share of all Captain replies (sample data).
|
|
const rate = '1.3%';
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col gap-4 p-5 border rounded-xl bg-n-solid-1 border-n-weak"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-n-slate-12">
|
|
{{ $t('CAPTAIN.OVERVIEW.FLAGGED.TITLE') }}
|
|
</span>
|
|
<span class="text-sm tabular-nums text-n-slate-11">
|
|
{{ $t('CAPTAIN.OVERVIEW.FLAGGED.TOTAL', { count: total, rate }) }}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<div
|
|
v-for="reason in flagReasons"
|
|
:key="reason.key"
|
|
class="flex items-center gap-3"
|
|
>
|
|
<span class="w-28 text-xs truncate text-n-slate-11 shrink-0">
|
|
{{ reason.label }}
|
|
</span>
|
|
<div class="flex-1 h-2 overflow-hidden rounded-full bg-n-alpha-2">
|
|
<div
|
|
class="h-full rounded-full bg-n-amber-9"
|
|
:style="{ width: `${Math.round((reason.count / total) * 100)}%` }"
|
|
/>
|
|
</div>
|
|
<span
|
|
class="w-6 text-xs font-medium text-right tabular-nums text-n-slate-12"
|
|
>
|
|
{{ reason.count }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|