<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/ui/tooltip';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Progress } from '@/components/ui/progress';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Home, User, Check } from 'lucide-vue-next';
</script>
<template>
<Tabs class="w-full">
<TabsList class="grid w-full grid-cols-3 justify-between bg-gray-100 dark:bg-black p-2">
<TabsTrigger class="text-center p-2" value="emails">
Emails
</TabsTrigger>
<TabsTrigger class="text-center p-2" value="calls">
Calls
</TabsTrigger>
<TabsTrigger class="text-center p-2" value="statistics">
Statistics
</TabsTrigger>
</TabsList>
<!-- Emails Tab -->
<TabsContent value="emails">
<Card class="p-4 shadow-lg">
<CardHeader>
<CardTitle>Send New Email</CardTitle>
</CardHeader>
<CardContent class="space-y-4">
<Input type="text" placeholder="Salutation" class="border p-2" />
<Input type="text" placeholder="Recipient's Name" class="border p-2" />
<Button class="bg-blue-500 dark:bg-blue-700 text-white p-2 rounded">Send Email</Button>
</CardContent>
</Card>
<Accordion class="my-4">
<AccordionItem value="statistics">
<AccordionTrigger class="py-2">Email Statistics</AccordionTrigger>
<AccordionContent class="p-2">
<p>Email preview based on the entered information will appear here.</p>
</AccordionContent>
</AccordionItem>
</Accordion>
</TabsContent>
<!-- Calls Tab -->
<TabsContent value="calls" class="space-y-4">
<Table>
<TableHeader>
<TableRow>
<TableHead>Agent</TableHead>
<TableHead>Call Description</TableHead>
<TableHead>Time</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>John Doe</TableCell>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>Follow-up call with client</TooltipTrigger>
<TooltipContent>Additional details about the call</TooltipContent>
</Tooltip>
</TooltipProvider>
<TableCell>10:00 AM</TableCell>
</TableRow>
</TableBody>
</Table>
<Card class="p-4 shadow-lg">
<CardContent>
<p>Summary of calls made by agents, including daily, weekly, and monthly statistics.</p>
</CardContent>
</Card>
</TabsContent>
<!-- Statistics Tab -->
<TabsContent value="statistics" class="grid grid-cols-2 gap-4">
<Card class="p-4 shadow-lg">
<CardHeader>
<CardTitle>Total Emails</CardTitle>
</CardHeader>
<CardContent>
<Progress :model-value="50" class="w-full h-2 bg-gray-200 dark:bg-gray-700" />
</CardContent>
</Card>
<Card class="p-4 shadow-lg">
<CardHeader>
<CardTitle>Total Calls</CardTitle>
</CardHeader>
<CardContent>
<Progress :model-value="75" class="w-full h-2 bg-gray-200 dark:bg-gray-700" />
</CardContent>
</Card>
<Card class="p-4 shadow-lg">
<CardHeader>
<CardTitle>Agents Online</CardTitle>
</CardHeader>
<CardContent>
<Avatar>
<AvatarImage src="/placeholder.svg" alt="Agent" />
<AvatarFallback>AD</AvatarFallback>
</Avatar>
</CardContent>
</Card>
<Card class="p-4 shadow-lg">
<CardHeader>
<CardTitle>Average Handle Time</CardTitle>
</CardHeader>
<CardContent>
<p>3m 45s</p>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</template>