'use client';
import * as React from "react"
import { cn } from "@/lib/utils"
import { Ellipsis, FileText } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription
} from "@/components/ui/card"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function StatTable1() {
const [progress,] = React.useState(40)
const [activeTab, setActiveTab] = React.useState('invoices')
return (
<div className="px-4 py-4">
<div className="flex flex-wrap -m-4">
<div className="w-full md:w-2/3 p-4">
<div className="bg-white rounded-md">
<div className="px-4 py-3">
<h3 className="text-xl font-bold">Agents Stats dolor</h3>
<p className="text-sm text-muted-foreground">Lorem ipsum dolor sit amet consectutar</p>
</div>
<div className="flex flex-wrap border-b">
<Button
onClick={() => setActiveTab('invoices')}
variant="ghost"
className={cn(
"relative",
"focus-visible:ring-offset-0",
activeTab === 'invoices'
? "text-black"
: "text-muted-foreground hover:text-primary"
)}
>
Invoices
<span className={cn("absolute", "bottom-0", "left-0", "right-0", "h-0.5", activeTab === "invoices" ? "bg-black" : "bg-transparent")}></span>
</Button>
<Button
onClick={() => setActiveTab('profile')}
variant="ghost"
className={cn(
"relative",
"focus-visible:ring-offset-0",
activeTab === 'profile'
? "text-black"
: "text-muted-foreground hover:text-primary"
)}
>
Profile
<span className={cn("absolute", "bottom-0", "left-0", "right-0", "h-0.5", activeTab === "profile" ? "bg-black" : "bg-transparent")}></span>
</Button>
<Button
onClick={() => setActiveTab('settings')}
variant="ghost"
className={cn(
"relative",
"focus-visible:ring-offset-0",
activeTab === 'settings'
? "text-black"
: "text-muted-foreground hover:text-primary"
)}
>
Settings
<span className={cn("absolute", "bottom-0", "left-0", "right-0", "h-0.5", activeTab === "settings" ? "bg-black" : "bg-transparent")}></span>
</Button>
</div>
<Table className="border-b">
<TableHeader>
<TableRow>
<TableHead className="text-xs w-[250px] bg-secondary">
<div className="flex items-center space-x-1.5">
<Checkbox id="invoice" className="w-3 h-3 border-muted-foreground" />
<label
htmlFor="invoice"
className="text-xs font-medium leading-none"
>
Authors
</label>
</div>
</TableHead>
<TableHead className="text-xs w-[250px] bg-secondary">
Company
</TableHead>
<TableHead className="text-xs w-[250px] bg-secondary">
Progress
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
<div className="flex items-center space-x-2">
<Checkbox id="person" className="w-3 h-3" />
<label
htmlFor="person"
>
</label>
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<h3 className="text-sm">Bernard Ford</h3>
<p className="text-xs text-muted-foreground">berford@gmail.com</p>
</div>
</div>
</div>
</TableCell>
<TableCell>
<h3 className="text-sm">Lorem Ipsum Company</h3>
<p className="text-xs text-muted-foreground">Dolor sit Category</p>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="w-[60%]">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</div>
<Button variant="ghost" size="icon" className="text-muted-foreground">
<Ellipsis />
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center space-x-2">
<Checkbox id="person" className="w-3 h-3" />
<label
htmlFor="person"
>
</label>
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<h3 className="text-sm">Bernard Ford</h3>
<p className="text-xs text-muted-foreground">berford@gmail.com</p>
</div>
</div>
</div>
</TableCell>
<TableCell>
<h3 className="text-sm">Lorem Ipsum Company</h3>
<p className="text-xs text-muted-foreground">Dolor sit Category</p>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="w-[60%]">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</div>
<Button variant="ghost" size="icon" className="text-muted-foreground">
<Ellipsis />
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center space-x-2">
<Checkbox id="person" className="w-3 h-3" />
<label
htmlFor="person"
>
</label>
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<h3 className="text-sm">Bernard Ford</h3>
<p className="text-xs text-muted-foreground">berford@gmail.com</p>
</div>
</div>
</div>
</TableCell>
<TableCell>
<h3 className="text-sm">Lorem Ipsum Company</h3>
<p className="text-xs text-muted-foreground">Dolor sit Category</p>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="w-[60%]">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</div>
<Button variant="ghost" size="icon" className="text-muted-foreground">
<Ellipsis />
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center space-x-2">
<Checkbox id="person" className="w-3 h-3" />
<label
htmlFor="person"
>
</label>
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<h3 className="text-sm">Bernard Ford</h3>
<p className="text-xs text-muted-foreground">berford@gmail.com</p>
</div>
</div>
</div>
</TableCell>
<TableCell>
<h3 className="text-sm">Lorem Ipsum Company</h3>
<p className="text-xs text-muted-foreground">Dolor sit Category</p>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="w-[60%]">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</div>
<Button variant="ghost" size="icon" className="text-muted-foreground">
<Ellipsis />
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center space-x-2">
<Checkbox id="person" className="w-3 h-3" />
<label
htmlFor="person"
>
</label>
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<h3 className="text-sm">Bernard Ford</h3>
<p className="text-xs text-muted-foreground">berford@gmail.com</p>
</div>
</div>
</div>
</TableCell>
<TableCell>
<h3 className="text-sm">Lorem Ipsum Company</h3>
<p className="text-xs text-muted-foreground">Dolor sit Category</p>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="w-[60%]">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</div>
<Button variant="ghost" size="icon" className="text-muted-foreground">
<Ellipsis />
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center space-x-2">
<Checkbox id="person" className="w-3 h-3" />
<label
htmlFor="person"
>
</label>
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<h3 className="text-sm">Bernard Ford</h3>
<p className="text-xs text-muted-foreground">berford@gmail.com</p>
</div>
</div>
</div>
</TableCell>
<TableCell>
<h3 className="text-sm">Lorem Ipsum Company</h3>
<p className="text-xs text-muted-foreground">Dolor sit Category</p>
</TableCell>
<TableCell>
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="w-[60%]">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</div>
<Button variant="ghost" size="icon" className="text-muted-foreground">
<Ellipsis />
</Button>
</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
<Button variant="ghost" className="py-8 text-xs text-muted-foreground flex justify-center gap-1 w-full">
<FileText/> See all Transactions
</Button>
</div>
</div>
<div className="w-full md:w-1/3 p-4">
<Card className="border-0 shadow-none">
<CardHeader className="space-y-0 border-b">
<CardTitle className="text-xl">Social Media Traffic</CardTitle>
<CardDescription className="text-sm">Lorem ipsum dolor sit amet consectutar</CardDescription>
</CardHeader>
<CardContent className="p-0">
<Table>
<TableBody>
<TableRow>
<TableCell className="w-1/2 py-6 border-b">
<div className="flex flex-wrap items-center gap-2">
<Avatar className="w-6 h-6">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<p className="text-sm">Instagram</p>
</div>
</TableCell>
<TableCell className="w-1/2 text-xs font-medium">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</TableCell>
</TableRow>
<TableRow>
<TableCell className="w-1/2 py-7 border-b">
<div className="flex flex-wrap items-center gap-2">
<Avatar className="w-6 h-6">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<p className="text-sm">Twitter</p>
</div>
</TableCell>
<TableCell className="w-1/2 text-xs font-medium">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</TableCell>
</TableRow>
<TableRow>
<TableCell className="w-1/2 py-7 border-b">
<div className="flex flex-wrap items-center gap-2">
<Avatar className="w-6 h-6">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<p className="text-sm">Facebook</p>
</div>
</TableCell>
<TableCell className="w-1/2 text-xs font-medium">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</TableCell>
</TableRow>
<TableRow>
<TableCell className="w-1/2 py-7 border-b">
<div className="flex flex-wrap items-center gap-2">
<Avatar className="w-6 h-6">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<p className="text-sm">Linkedin</p>
</div>
</TableCell>
<TableCell className="w-1/2 text-xs font-medium">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</TableCell>
</TableRow>
<TableRow>
<TableCell className="w-1/2 py-7 border-b">
<div className="flex flex-wrap items-center gap-2">
<Avatar className="w-6 h-6">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<p className="text-sm">Tik Tok</p>
</div>
</TableCell>
<TableCell className="w-1/2 text-xs font-medium">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</TableCell>
</TableRow>
<TableRow>
<TableCell className="w-1/2 py-7 border-b">
<div className="flex flex-wrap items-center gap-2">
<Avatar className="w-6 h-6">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<p className="text-sm">Reddit</p>
</div>
</TableCell>
<TableCell className="w-1/2 text-xs font-medium">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</TableCell>
</TableRow>
<TableRow>
<TableCell className="w-1/2 py-7">
<div className="flex flex-wrap items-center gap-2">
<Avatar className="w-6 h-6">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<p className="text-sm">Product Hunt</p>
</div>
</TableCell>
<TableCell className="w-1/2 text-xs font-medium">
<p className="mb-1 text-xs">{progress + '%'}</p>
<Progress value={progress} className="h-1" />
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
</div>
</div>
</div>
)
}
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
