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

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useDevopsStore } from '@/stores/devops'
import Card from '@/components/ui/Card.vue'
import CardHeader from '@/components/ui/CardHeader.vue'
import CardTitle from '@/components/ui/CardTitle.vue'
import CardContent from '@/components/ui/CardContent.vue'
import Input from '@/components/ui/Input.vue'
import Button from '@/components/ui/Button.vue'
import { toast } from 'vue-sonner'
import { downloadCsv, downloadIcs } from '@/api/endpoints/exports'
import { isoDateStr } from '@/lib/utils'
import apiClient from '@/api/client'

const authStore = useAuthStore()
const devopsStore = useDevopsStore()

// Profile
const username = ref('')
const dailyOverhead = ref(0)
const savingProfile = ref(false)

// ADO
const adoOrg = ref('')
const adoProject = ref('')
const adoPat = ref('')
const savingAdo = ref(false)

// Export
const exportFrom = ref('')
const exportTo = ref('')

onMounted(() => {
  if (authStore.user) {
    username.value = authStore.user.username
    dailyOverhead.value = authStore.user.daily_overhead_hours ?? 0
  }
  devopsStore.fetchIntegration().then(() => {
    if (devopsStore.integration) {
      adoOrg.value = devopsStore.integration.organization
      adoProject.value = devopsStore.integration.project
    }
  })

  const now = new Date()
  exportTo.value = isoDateStr(now)
  const past = new Date(now)
  past.setDate(now.getDate() - 30)
  exportFrom.value = isoDateStr(past)
})

async function saveProfile() {
  savingProfile.value = true
  try {
    await apiClient.patch('/api/auth/me', {
      username: username.value,
      daily_overhead_hours: dailyOverhead.value,
    })
    await authStore.fetchMe()
    toast.success('Profile saved')
  } catch {
    toast.error('Failed to save profile')
  } finally {
    savingProfile.value = false
  }
}

async function saveAdo() {
  if (!adoOrg.value || !adoProject.value || !adoPat.value) {
    toast.error('All ADO fields are required')
    return
  }
  savingAdo.value = true
  try {
    await devopsStore.saveIntegration({
      organization: adoOrg.value,
      project: adoProject.value,
      pat: adoPat.value,
    })
    adoPat.value = ''
    toast.success('Integration saved')
  } catch {
    toast.error('Failed to save integration')
  } finally {
    savingAdo.value = false
  }
}

async function deleteAdo() {
  if (!confirm('Delete ADO integration?')) return
  try {
    await devopsStore.deleteIntegration()
    adoOrg.value = ''
    adoProject.value = ''
    adoPat.value = ''
    toast.success('Integration deleted')
  } catch {
    toast.error('Failed to delete integration')
  }
}

async function syncNow() {
  try {
    await devopsStore.sync()
    toast.success('Sync complete')
  } catch {
    toast.error(devopsStore.error ?? 'Sync failed')
  }
}
</script>

<template>
  <div class="p-6 space-y-6 max-w-2xl">
    <h2 class="text-lg font-semibold text-foreground">Settings</h2>

    <!-- Profile -->
    <Card>
      <CardHeader>
        <CardTitle class="text-sm">Profile</CardTitle>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="space-y-1.5">
          <label class="text-sm font-medium text-foreground">Username</label>
          <Input v-model="username" placeholder="username" />
        </div>
        <div class="space-y-1.5">
          <label class="text-sm font-medium text-foreground">Daily Overhead Hours</label>
          <Input v-model="dailyOverhead" type="number" min="0" max="8" step="0.25" class="w-32" />
          <p class="text-xs text-muted-foreground">
            Hours per day to add for overhead / meetings
          </p>
        </div>
        <Button :loading="savingProfile" @click="saveProfile">Save Profile</Button>
      </CardContent>
    </Card>

    <!-- Azure DevOps Integration -->
    <Card>
      <CardHeader>
        <CardTitle class="text-sm">Azure DevOps Integration</CardTitle>
      </CardHeader>
      <CardContent class="space-y-4">
        <div v-if="devopsStore.integration" class="text-xs text-muted-foreground space-y-1">
          <p>
            Connected to <strong class="text-foreground">{{ devopsStore.integration.organization }}</strong>
            / <strong class="text-foreground">{{ devopsStore.integration.project }}</strong>
          </p>
          <p v-if="devopsStore.integration.last_synced_at">
            Last synced: {{ new Date(devopsStore.integration.last_synced_at).toLocaleString() }}
          </p>
          <p v-if="devopsStore.integration.last_sync_error" class="text-red-400">
            Error: {{ devopsStore.integration.last_sync_error }}
          </p>
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div class="space-y-1.5">
            <label class="text-sm font-medium text-foreground">Organization</label>
            <Input v-model="adoOrg" placeholder="myorg" />
          </div>
          <div class="space-y-1.5">
            <label class="text-sm font-medium text-foreground">Project</label>
            <Input v-model="adoProject" placeholder="myproject" />
          </div>
        </div>

        <div class="space-y-1.5">
          <label class="text-sm font-medium text-foreground">
            Personal Access Token {{ devopsStore.integration ? '(leave blank to keep current)' : '' }}
          </label>
          <Input v-model="adoPat" type="password" placeholder="••••••••" autocomplete="new-password" />
        </div>

        <div class="flex items-center gap-2">
          <Button :loading="savingAdo" @click="saveAdo">
            {{ devopsStore.integration ? 'Update' : 'Connect' }}
          </Button>
          <Button
            v-if="devopsStore.integration"
            variant="outline"
            :loading="devopsStore.syncing"
            @click="syncNow"
          >
            Sync Now
          </Button>
          <Button
            v-if="devopsStore.integration"
            variant="destructive"
            size="sm"
            @click="deleteAdo"
          >
            Disconnect
          </Button>
        </div>
      </CardContent>
    </Card>

    <!-- Export -->
    <Card>
      <CardHeader>
        <CardTitle class="text-sm">Export</CardTitle>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="flex items-center gap-3 flex-wrap">
          <div class="space-y-1.5">
            <label class="text-xs text-muted-foreground">From</label>
            <Input v-model="exportFrom" type="date" class="h-8 text-xs" />
          </div>
          <div class="space-y-1.5">
            <label class="text-xs text-muted-foreground">To</label>
            <Input v-model="exportTo" type="date" class="h-8 text-xs" />
          </div>
        </div>
        <div class="flex items-center gap-2">
          <Button variant="outline" size="sm" @click="downloadCsv(exportFrom, exportTo)">
            Download CSV
          </Button>
          <Button variant="outline" size="sm" @click="downloadIcs(exportFrom, exportTo)">
            Download ICS
          </Button>
        </div>
      </CardContent>
    </Card>
  </div>
</template>