Oliver/cc-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(reports): SegmentedControl, Button, EmptyState

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-13 11:12:50 +01:00
parent ba99a4dd65
commit 13c262184a
1 changed files with 19 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
web/src/views/ReportsView.vue
View file

@ -6,11 +6,14 @@ import CardContent from '@/components/ui/CardContent.vue'
import Badge from '@/components/ui/Badge.vue'
import Button from '@/components/ui/Button.vue'
import Spinner from '@/components/ui/Spinner.vue'
import SegmentedControl from '@/components/ui/SegmentedControl.vue'
import EmptyState from '@/components/ui/EmptyState.vue'
import { toast } from 'vue-sonner'
import { formatDate, isoDateStr } from '@/lib/utils'
import { marked } from 'marked'
import type { AiReport } from '@/types'
import { useAuthStore } from '@/stores/auth'
import { FileText, Calendar } from 'lucide-vue-next'
const authStore = useAuthStore()
@ -82,26 +85,14 @@ async function downloadReport(report: AiReport, fmt: 'md' | 'html') {
<h2 class="text-lg font-semibold text-foreground flex-1">AI Reports</h2>
<div class="flex items-center gap-2">
<div class="flex items-center rounded-md border border-border overflow-hidden">
<button
:class="[
'px-3 py-1.5 text-xs font-medium transition-colors',
generateType === 'daily'
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-muted',
]"
@click="generateType = 'daily'"
>Daily</button>
<button
:class="[
'px-3 py-1.5 text-xs font-medium transition-colors',
generateType === 'weekly'
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-muted',
]"
@click="generateType = 'weekly'"
>Weekly</button>
</div>
<SegmentedControl
v-model="generateType"
:options="[
{ value: 'daily', label: 'Daily' },
{ value: 'weekly', label: 'Weekly' },
]"
aria-label="Report type"
/>
<Button size="sm" :loading="generating" @click="generate">
Generate Now
</Button>
@ -114,8 +105,12 @@ async function downloadReport(report: AiReport, fmt: 'md' | 'html') {
</div>
<!-- Reports list -->
<div v-else-if="reports.length === 0" class="text-center text-muted-foreground py-12 text-sm">
No reports generated yet
<div v-else-if="reports.length === 0" class="py-12">
<EmptyState
title="No reports yet"
description="Reports are generated automatically after sessions."
:icons="[FileText, Calendar]"
/>
</div>
<div v-else class="space-y-3">
@ -153,14 +148,8 @@ async function downloadReport(report: AiReport, fmt: 'md' | 'html') {
<!-- Expanded content -->
<div v-if="expandedId === report.id" class="mt-4 pt-4 border-t border-border">
<div class="flex gap-2 mb-3">
<button
class="text-xs px-2.5 py-1 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/30 transition-colors"
@click="downloadReport(report, 'md')"
>↓ Markdown</button>
<button
class="text-xs px-2.5 py-1 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/30 transition-colors"
@click="downloadReport(report, 'html')"
>↓ HTML</button>
<Button variant="outline" size="sm" @click="downloadReport(report, 'md')">↓ Markdown</Button>
<Button variant="outline" size="sm" @click="downloadReport(report, 'html')">↓ HTML</Button>
</div>
<div
class="prose prose-sm prose-invert max-w-none text-sm text-foreground break-words"