Dashboard

<div className="bg-page p-4 w-full">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Aktive prosjekter</CardDescription>
      <CardTitle className="text-3xl">12</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-xs text-muted">+2 fra forrige måned</p>
    </CardContent>
  </Card>
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Timer denne uken</CardDescription>
      <CardTitle className="text-3xl">34,5</CardTitle>
    </CardHeader>
    <CardContent>
      <Progress value={86} className="mt-1" />
      <p className="text-xs text-muted mt-1">86 % av mål</p>
    </CardContent>
  </Card>
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Åpne oppgaver</CardDescription>
      <CardTitle className="text-3xl">7</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-xs text-muted">3 forfaller denne uken</p>
    </CardContent>
  </Card>
</div>
</div>

<div className="bg-page p-4 w-full">
<Card>
  <CardHeader>
    <CardTitle>Oppgaver</CardTitle>
    <CardDescription>Oversikt over aktive oppgaver i teamet.</CardDescription>
  </CardHeader>
  <CardContent>
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Oppgave</TableHead>
          <TableHead>Ansvarlig</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Frist</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">Redesign forsiden</TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarFallback className="text-xs">ON</AvatarFallback>
              </Avatar>
              Ola
            </div>
          </TableCell>
          <TableCell><Badge>Pågår</Badge></TableCell>
          <TableCell>15. mar</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Implementer søkefunksjon</TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarFallback className="text-xs">KH</AvatarFallback>
              </Avatar>
              Kari
            </div>
          </TableCell>
          <TableCell><Badge variant="secondary">Til review</Badge></TableCell>
          <TableCell>12. mar</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Fikse ytelsesproblem</TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarFallback className="text-xs">PJ</AvatarFallback>
              </Avatar>
              Per
            </div>
          </TableCell>
          <TableCell><Badge variant="destructive">Blokkert</Badge></TableCell>
          <TableCell>10. mar</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Skrive dokumentasjon</TableCell>
          <TableCell>
            <div className="flex items-center gap-2">
              <Avatar className="h-6 w-6">
                <AvatarFallback className="text-xs">LB</AvatarFallback>
              </Avatar>
              Lisa
            </div>
          </TableCell>
          <TableCell><Badge variant="outline">Ikke startet</Badge></TableCell>
          <TableCell>20. mar</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </CardContent>
</Card>
</div>

<div className="bg-page p-4 w-full">
<Card>
  <CardHeader>
    <CardTitle>Prosjekter</CardTitle>
    <CardDescription>Fremdrift for aktive prosjekter.</CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-5">
    <div>
      <div className="flex items-center justify-between mb-1">
        <p className="text-sm font-medium">Designsystem</p>
        <span className="text-sm text-muted">75 %</span>
      </div>
      <Progress value={75} />
    </div>
    <Separator />
    <div>
      <div className="flex items-center justify-between mb-1">
        <p className="text-sm font-medium">Kundeportal</p>
        <span className="text-sm text-muted">42 %</span>
      </div>
      <Progress value={42} />
    </div>
    <Separator />
    <div>
      <div className="flex items-center justify-between mb-1">
        <p className="text-sm font-medium">Intern dashboard</p>
        <span className="text-sm text-muted">91 %</span>
      </div>
      <Progress value={91} />
    </div>
  </CardContent>
</Card>
</div>