cc-dashboard/web/src/views/ProjectsView.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { dashboardApi } from '@/api/endpoints/dashboard'
import Card from '@/components/ui/Card.vue'
import CardContent from '@/components/ui/CardContent.vue'
import Progress from '@/components/ui/Progress.vue'
import Spinner from '@/components/ui/Spinner.vue'
import { formatDuration, formatDate } from '@/lib/utils'
import type { ProjectSummary } from '@/types'

const router = useRouter()
const projects = ref<ProjectSummary[]>([])
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    const res = await dashboardApi.projects({})
    projects.value = res.data.sort((a, b) => b.total_hours - a.total_hours)
  } finally {
    loading.value = false
  }
})

const progressColor = (pct: number | null) => {
  if (!pct) return 'default'
  if (pct > 90) return 'danger'
  if (pct > 70) return 'warning'
  return 'success'
}
</script>

<template>
  <div class="p-6">
    <h2 class="text-lg font-semibold text-foreground mb-6">Projects</h2>

    <div v-if="loading" class="flex items-center justify-center h-40">
      <Spinner size="lg" class="text-primary" />
    </div>

    <div v-else-if="projects.length === 0" class="text-center text-muted-foreground py-12">
      No projects found
    </div>

    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <Card
        v-for="proj in projects"
        :key="proj.project_id"
        class="cursor-pointer hover:border-primary/50 transition-colors"
        @click="router.push(`/projects/${proj.project_id}`)"
      >
        <CardContent class="p-4">
          <!-- Header -->
          <div class="flex items-start justify-between gap-2 mb-3">
            <div class="min-w-0">
              <p class="font-semibold text-sm text-foreground truncate">{{ proj.display_name }}</p>
              <p v-if="proj.client" class="text-xs text-muted-foreground truncate">{{ proj.client }}</p>
            </div>
            <span
              v-if="proj.job_number"
              class="text-xs bg-muted text-muted-foreground px-1.5 py-0.5 rounded shrink-0"
            >
              {{ proj.job_number }}
            </span>
          </div>

          <!-- Stats -->
          <div class="space-y-1.5">
            <div class="flex items-center justify-between text-xs">
              <span class="text-muted-foreground">Total hours</span>
              <span class="font-medium text-foreground">{{ formatDuration(proj.total_hours) }}</span>
            </div>
            <div class="flex items-center justify-between text-xs">
              <span class="text-muted-foreground">Sessions</span>
              <span class="text-foreground">{{ proj.session_count }}</span>
            </div>
            <div v-if="proj.last_active" class="flex items-center justify-between text-xs">
              <span class="text-muted-foreground">Last active</span>
              <span class="text-foreground">{{ formatDate(proj.last_active) }}</span>
            </div>
          </div>

          <!-- Budget progress -->
          <div v-if="proj.progress_pct !== null" class="mt-3">
            <div class="flex items-center justify-between text-xs mb-1">
              <span class="text-muted-foreground">Budget</span>
              <span :class="proj.progress_pct > 90 ? 'text-red-400' : 'text-muted-foreground'">
                {{ (proj.progress_pct ?? 0).toFixed(0) }}%
              </span>
            </div>
            <Progress
              :value="proj.progress_pct"
              :color="progressColor(proj.progress_pct)"
            />
          </div>
        </CardContent>
      </Card>
    </div>
  </div>
</template>