Vuetify Playground

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import './styles.css'

createApp(App).use(vuetify).mount('#app')

<script setup lang="ts">
import { computed, ref } from 'vue'
import ProjectCard from './components/ProjectCard.vue'

type ProjectStatus = 'All' | 'On track' | 'At risk'

const focusMode = ref(true)
const filter = ref<ProjectStatus>('All')
const syncLabel = ref('Sync workspace')

const projects = ref([
  {
    name: 'Mobile checkout',
    owner: 'Maya',
    status: 'On track' as const,
    progress: 82,
    due: 'Aug 14',
  },
  {
    name: 'Billing automation',
    owner: 'Noah',
    status: 'At risk' as const,
    progress: 57,
    due: 'Aug 21',
  },
  {
    name: 'Customer insights',
    owner: 'Ari',
    status: 'On track' as const,
    progress: 71,
    due: 'Sep 02',
  },
])

const visibleProjects = computed(() =>
  filter.value === 'All'
    ? projects.value
    : projects.value.filter((project) => project.status === filter.value),
)

function advanceProject(name: string) {
  const project = projects.value.find((item) => item.name === name)
  if (project) project.progress = Math.min(project.progress + 6, 100)
}

function syncWorkspace() {
  syncLabel.value = 'Synced just now'
}
</script>

<template>
  <v-app>
    <v-app-bar flat class="app-bar">
      <v-container class="d-flex align-center py-0">
        <v-avatar color="primary" size="38" rounded="lg" class="font-weight-bold">
          V
        </v-avatar>
        <div class="ml-3">
          <div class="brand-kicker">VUETIFY 4 · VUE 3</div>
          <div class="brand-name">Northstar workspace</div>
        </div>
        <v-spacer />
        <v-chip color="success" variant="tonal" size="small">Live</v-chip>
        <v-avatar color="surface-variant" size="34" class="ml-3">DM</v-avatar>
      </v-container>
    </v-app-bar>

    <v-main class="page-shell">
      <v-container class="py-8 py-md-12">
        <div class="page-heading">
          <div>
            <p class="eyebrow">PRODUCT OPERATIONS</p>
            <h1>Delivery overview</h1>
            <p class="page-copy">
              A responsive workspace built with real Vuetify components,
              theme tokens, and an imported Vue component.
            </p>
          </div>
          <v-btn
            color="primary"
            size="large"
            variant="flat"
            @click="syncWorkspace"
          >
            {{ syncLabel }}
          </v-btn>
        </div>

        <v-row class="mb-2">
          <v-col cols="12" sm="6" lg="4">
            <v-card rounded="xl" variant="flat" class="metric-card">
              <v-card-text>
                <div class="metric-label">Active projects</div>
                <div class="metric-value">12</div>
                <div class="metric-detail text-success">↑ 8.2% this month</div>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="12" sm="6" lg="4">
            <v-card rounded="xl" variant="flat" class="metric-card">
              <v-card-text>
                <div class="metric-label">Tasks completed</div>
                <div class="metric-value">248</div>
                <div class="metric-detail">36 completed this week</div>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="12" sm="6" lg="4">
            <v-card rounded="xl" variant="flat" class="metric-card">
              <v-card-text>
                <div class="d-flex align-center justify-space-between">
                  <div>
                    <div class="metric-label">Delivery score</div>
                    <div class="metric-value">86%</div>
                  </div>
                  <v-progress-circular
                    :model-value="86"
                    color="primary"
                    :size="64"
                    :width="7"
                  >
                    86
                  </v-progress-circular>
                </div>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>

        <v-card rounded="xl" variant="flat" class="projects-panel">
          <v-card-text class="pa-5 pa-md-6">
            <div class="projects-heading">
              <div>
                <h2>Project health</h2>
                <p>Current delivery status and team progress</p>
              </div>
              <div class="filter-row">
                <v-btn
                  v-for="option in (['All', 'On track', 'At risk'] as ProjectStatus[])"
                  :key="option"
                  :color="filter === option ? 'primary' : undefined"
                  :variant="filter === option ? 'tonal' : 'text'"
                  size="small"
                  @click="filter = option"
                >
                  {{ option }}
                </v-btn>
              </div>
            </div>

            <div class="project-grid">
              <ProjectCard
                v-for="project in visibleProjects"
                :key="project.name"
                v-bind="project"
                @advance="advanceProject(project.name)"
              />
            </div>
          </v-card-text>
        </v-card>

        <v-card rounded="xl" variant="outlined" class="focus-card mt-5">
          <v-card-text class="d-flex align-center">
            <div>
              <div class="font-weight-bold">Focus mode</div>
              <div class="text-medium-emphasis text-body-2">
                Reduce notifications while delivery work is active.
              </div>
            </div>
            <v-spacer />
            <v-switch
              v-model="focusMode"
              color="primary"
              hide-details
              inset
              :label="focusMode ? 'On' : 'Off'"
            />
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>