[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Sidebar } from "./components/sidebar" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "COSOMA Radio Song Tracking System", description: "Track and manage radio songs and royalties", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/components/sidebar.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { BarChart, Radio, Search, DollarSign, Settings } from "lucide-react" const navItems = [ { name: "Dashboard", href: "/", icon: BarChart }, { name: "Radio Monitoring", href: "/radio-monitoring", icon: Radio }, { name: "Song Search & Reports", href: "/song-search", icon: Search }, { name: "Royalty Distribution", href: "/royalty-distribution", icon: DollarSign }, { name: "Settings", href: "/settings", icon: Settings }, ] export function Sidebar() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef, useEffect } from "react" import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, type ChartData, type ChartOptions, } from "chart.js" import { Bar, Line } from "react-chartjs-2" // Register ChartJS components ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend) interface ChartProps { data: ChartData<"bar" | "line"> options?: ChartOptions<"bar" | "line"> type: "bar" | "line" className?: string } export function Chart({ data, options, type, className }: ChartProps) { const chartRef = useRef(null) useEffect(() => { if (chartRef.current) { chartRef.current.update() } }, [chartRef]) // Updated dependency const ChartComponent = type === "bar" ? Bar : Line return (

) } export function BarChart(props: Omit) { return } export function LineChart(props: Omit) { return } [V0_FILE]javascript:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, 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))", }, // Add Malawi flag colors malawi: { black: "#000000", red: "#CE1126", green: "#339E35", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, LineChart } from "@/components/ui/chart" export default function Dashboard() { const barChartData = { labels: ["Afro Pop", "Gospel", "Hip Hop", "Traditional", "Reggae"], datasets: [ { label: "Plays by Genre", data: [400, 300, 200, 150, 100], backgroundColor: [ "rgba(0, 0, 0, 0.7)", // Black "rgba(206, 17, 38, 0.7)", // Red "rgba(51, 158, 53, 0.7)", // Green "rgba(0, 0, 0, 0.5)", // Black (lighter) "rgba(206, 17, 38, 0.5)", // Red (lighter) ], }, ], } const barChartOptions = { responsive: true, plugins: { legend: { position: "top" as const, }, title: { display: true, text: "Plays by Genre", }, }, } const lineChartData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "Royalties", data: [100000, 120000, 90000, 150000, 180000, 200000], borderColor: "rgb(51, 158, 53)", // Malawi green tension: 0.1, }, ], } const lineChartOptions = { responsive: true, plugins: { legend: { position: "top" as const, }, title: { display: true, text: "Royalties Over Time", }, }, scales: { y: { beginAtZero: true, ticks: { callback: (value: number) => `MWK ${value.toLocaleString()}`, }, }, }, } return (

Dashboard

Total Tracks

1,234

+20.1% from last month

Active Stations

+2 from last week

Total Royalties

MWK 12,345,000

+15% from last quarter

System Status

Operational

All systems running

Plays by Genre Royalties Over Time

) } [V0_FILE]typescriptreact:file="app/radio-monitoring/page.tsx" isEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" const stations = [ { name: "MBC Radio 1", currentSong: "Ndirande", artist: "Patience Namadingo", startTime: "10:30:15" }, { name: "Capital FM", currentSong: "Mwano", artist: "Faith Mussa", startTime: "10:28:45" }, { name: "Zodiak Broadcasting", currentSong: "Mthunzi", artist: "Lawi", startTime: "10:31:20" }, ] export default function RadioMonitoring() { return (

Radio Monitoring

Currently Playing Station Current Song Artist Start Time {stations.map((station) => ( {station.name} {station.currentSong} {station.artist} {station.startTime} ))}

) } [V0_FILE]typescriptreact:file="app/song-search/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" const sampleSongs = [ { id: 1, title: "Ndirande", artist: "Patience Namadingo", plays: 1500 }, { id: 2, title: "Mwano", artist: "Faith Mussa", plays: 1200 }, { id: 3, title: "Mthunzi", artist: "Lawi", plays: 1000 }, { id: 4, title: "Zikomo", artist: "Suffix", plays: 800 }, { id: 5, title: "Mapulani", artist: "Tay Grin", plays: 750 }, ] export default function SongSearch() { const [searchTerm, setSearchTerm] = useState("") const filteredSongs = sampleSongs.filter( (song) => song.title.toLowerCase().includes(searchTerm.toLowerCase()) || song.artist.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

Song Search & Reports

Search Songs

setSearchTerm(e.target.value)} className="border-malawi-green" />

Search Results Song Title Artist Total Plays {filteredSongs.map((song) => ( {song.title} {song.artist} {song.plays} ))}

) } [V0_FILE]typescriptreact:file="app/royalty-distribution/page.tsx" isEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" const royaltyData = [ { id: 1, artist: "Patience Namadingo", song: "Ndirande", plays: 1500, amount: "MWK 750,000" }, { id: 2, artist: "Faith Mussa", song: "Mwano", plays: 1200, amount: "MWK 600,000" }, { id: 3, artist: "Lawi", song: "Mthunzi", plays: 1000, amount: "MWK 500,000" }, { id: 4, artist: "Suffix", song: "Zikomo", plays: 800, amount: "MWK 400,000" }, { id: 5, artist: "Tay Grin", song: "Mapulani", plays: 750, amount: "MWK 375,000" }, ] export default function RoyaltyDistribution() { return (

Royalty Distribution

Royalty Distribution Summary Artist Song Total Plays Royalty Amount Action {royaltyData.map((row) => ( {row.artist} {row.song} {row.plays} {row.amount} ))}

) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function Settings() { return (

Settings

General User Management Integrations General Settings

Company Name

Royalty Rate (%)

User Management

User management features will be implemented here.

Integrations

Integration settings with external services will be configured here.

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This