[V0_FILE]typescriptreact:file="campaign-dashboard.tsx" import { CalendarIcon } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function CampaignDashboard() { return (

{/* Sidebar */}

REPORTRAX

{/* Main Content */}

Campaigns

{/* Stats Cards */}

TOTAL CAMPAIGNS

1180

APPROVED CAMPAIGNS

1163

APPROVAL PENDING CAMPAIGNS

{/* Date Filter */}

Date Filter

{/* Table Controls */}

Show entries

Search:

{/* Campaigns Table */} Id Camp-Id Name Mode Impressions Clicks CTR Report Type Assignee {campaignData.map((campaign) => ( {campaign.id} {campaign.campId} {campaign.name} {campaign.mode} {campaign.impressions.toLocaleString()} {campaign.clicks.toLocaleString()} {campaign.ctr}% {campaign.reportType} {campaign.assignee} ))}

{/* Pagination */}

Showing 1 to 10 of 10 entries

) } const campaignData = [ { id: "2129", campId: "IMD/16/2129", name: "POKKT Branding CMHK J...", mode: "CPM", impressions: 125014, clicks: 2996, ctr: 2.4, reportType: "CPC", assignee: "Nidhhi", }, { id: "2128", campId: "IMD/16/2128", name: "YT Dear Lottery - Punjab...", mode: "CPM", impressions: 278410, clicks: 949, ctr: 0.34, reportType: "CPCV", assignee: "Sharmila", }, // Add more campaign data as needed ] [V0_FILE]typescriptreact:file="tailwind.config.js" isFixed="true" isQuickEdit="true" module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, navy: { 800: "#1a2234", 900: "#111827", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], }

About

Tags

Share

More from rahulsheal97-gmailcom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rahulsheal97-gmailcom

More Templates Like This