<template>
  <div class="dashboard">
    <h2>Dashboard</h2>
    <p>Willkommen im myCRM Dashboard!</p>
    
    <div class="dashboard-grid">
      <Card>
        <template #title>Kontakte</template>
        <template #content>
          <p>Gesamt: <strong>0</strong></p>
        </template>
      </Card>
      
      <Card>
        <template #title>Unternehmen</template>
        <template #content>
          <p>Gesamt: <strong>0</strong></p>
        </template>
      </Card>
      
      <Card>
        <template #title>Offene Deals</template>
        <template #content>
          <p>Gesamt: <strong>0</strong></p>
        </template>
      </Card>
      
      <Card>
        <template #title>Umsatz (MTD)</template>
        <template #content>
          <p><strong>0 €</strong></p>
        </template>
      </Card>
    </div>
  </div>
</template>

<script setup>
import Card from 'primevue/card';
</script>

<style scoped lang="scss">
.dashboard {
  h2 {
    margin-bottom: 1rem;
  }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
</style>
