[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/dashboards") } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Dashboard Application", description: "A customizable dashboard application", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .react-grid-item.react-grid-placeholder { @apply bg-primary/30 rounded-md; } .react-resizable-handle { @apply absolute w-5 h-5 bottom-0 right-0 cursor-se-resize; background-image: url('data:image/svg+xml;utf8,'); background-position: bottom right; padding: 0 3px 3px 0; background-repeat: no-repeat; background-origin: content-box; box-sizing: border-box; } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/dashboards/layout.tsx" isMerged="true" import type React from "react" import { DashboardSidebar } from "@/components/dashboard-sidebar" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/dashboards/page.tsx" isMerged="true" import { DashboardList } from "@/components/dashboard-list" export default function DashboardsPage() { return (

My Dashboards

) } [V0_FILE]typescriptreact:file="app/dashboards/[id]/page.tsx" isMerged="true" import { DashboardHeader } from "@/components/dashboard-header" import { DashboardGrid } from "@/components/dashboard-grid" import { notFound } from "next/navigation" export default function DashboardPage({ params, }: { params: { id: string } }) { // In a real app, you would fetch the dashboard data from an API // For now, we'll just check if the ID is valid if (params.id !== "1" && params.id !== "2" && params.id !== "3") { notFound() } return (

) } [V0_FILE]typescriptreact:file="app/dashboards/[id]/share/page.tsx" isMerged="true" import { DashboardGrid } from "@/components/dashboard-grid" import { notFound } from "next/navigation" export default function SharedDashboardPage({ params, }: { params: { id: string } }) { // In a real app, you would fetch the dashboard data from an API // For now, we'll just check if the ID is valid if (params.id !== "1" && params.id !== "2" && params.id !== "3") { notFound() } return (

Shared Dashboard

) } [V0_FILE]typescriptreact:file="components/dashboard-sidebar.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { LayoutDashboard, Plus, Settings, Menu, X, Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" export function DashboardSidebar() { const pathname = usePathname() const [isOpen, setIsOpen] = useState(false) const [newDashboardName, setNewDashboardName] = useState("") const [sidebarOpen, setSidebarOpen] = useState(false) const { theme, setTheme } = useTheme() // Mock dashboards data const dashboards = [ { id: "1", name: "Analytics Dashboard" }, { id: "2", name: "Sales Overview" }, { id: "3", name: "Marketing Metrics" }, ] const handleCreateDashboard = () => { // In a real app, you would create a new dashboard in the database console.log("Creating dashboard:", newDashboardName) setNewDashboardName("") setIsOpen(false) } const toggleTheme = () => { setTheme(theme === "dark" ? "light" : "dark") } return ( <>

setSidebarOpen(false)} />

Dashboards

) } [V0_FILE]typescriptreact:file="components/dashboard-list.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { LayoutDashboard, Plus, Share2 } from "lucide-react" export function DashboardList() { const [isOpen, setIsOpen] = useState(false) const [newDashboardName, setNewDashboardName] = useState("") // Mock dashboards data const dashboards = [ { id: "1", name: "Analytics Dashboard", widgets: 8 }, { id: "2", name: "Sales Overview", widgets: 5 }, { id: "3", name: "Marketing Metrics", widgets: 3 }, ] const handleCreateDashboard = () => { // In a real app, you would create a new dashboard in the database console.log("Creating dashboard:", newDashboardName) setNewDashboardName("") setIsOpen(false) } return (

Your Dashboards

{dashboards.map((dashboard) => (

{dashboard.name}

{dashboard.widgets} widgets

))}

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Plus, Share2, Settings, Palette, ChevronDown, Menu } from "lucide-react" import { DashboardSettings } from "@/components/dashboard-settings" export function DashboardHeader({ dashboardId, }: { dashboardId: string }) { const [isAddWidgetOpen, setIsAddWidgetOpen] = useState(false) const [isSettingsOpen, setIsSettingsOpen] = useState(false) const [widgetText, setWidgetText] = useState("") // Mock dashboard data const dashboardNames = { "1": "Analytics Dashboard", "2": "Sales Overview", "3": "Marketing Metrics", } const dashboardName = dashboardNames[dashboardId as keyof typeof dashboardNames] || "Dashboard" const handleAddWidget = () => { // In a real app, you would process the text and add a widget console.log("Adding widget with text:", widgetText) setWidgetText("") setIsAddWidgetOpen(false) } const handleShare = () => { // In a real app, you would generate a shareable link const shareUrl = `${window.location.origin}/dashboards/${dashboardId}/share` navigator.clipboard.writeText(shareUrl) alert(`Share link copied: ${shareUrl}`) } return (

{dashboardName}

setIsSettingsOpen(true)}> Customize Appearance

) } [V0_FILE]typescriptreact:file="components/dashboard-settings.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export function DashboardSettings({ dashboardId, }: { dashboardId: string }) { // Mock dashboard settings const [settings, setSettings] = useState({ name: `Dashboard ${dashboardId}`, primaryColor: "#3b82f6", secondaryColor: "#f59e0b", fontFamily: "Inter", logoUrl: "/placeholder.svg", }) const handleSave = () => { // In a real app, you would save the settings to the database console.log("Saving settings:", settings) // Close the dialog // This would be handled by the parent component } return ( Appearance Advanced

Dashboard Name setSettings({ ...settings, name: e.target.value })} />

Primary Color

setSettings({ ...settings, primaryColor: e.target.value })} className="w-12 h-10 p-1" /> setSettings({ ...settings, primaryColor: e.target.value })} />

Secondary Color

setSettings({ ...settings, secondaryColor: e.target.value })} className="w-12 h-10 p-1" /> setSettings({ ...settings, secondaryColor: e.target.value })} />

Font Family

Logo URL setSettings({ ...settings, logoUrl: e.target.value })} />

Data Refresh Rate (seconds)

Cache Time (minutes)

) } [V0_FILE]typescriptreact:file="components/dashboard-grid.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Responsive, WidthProvider } from "react-grid-layout" import "react-grid-layout/css/styles.css" import "react-resizable/css/styles.css" import { Widget } from "@/components/widget" import { WidgetSettings } from "@/components/widget-settings" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" const ResponsiveGridLayout = WidthProvider(Responsive) // Mock widget data const initialWidgets = { "1": [ { i: "widget-1", x: 0, y: 0, w: 2, h: 2, type: "chart", title: "Revenue by Region", data: { type: "bar", labels: ["North", "South", "East", "West"], values: [4000, 3000, 5000, 7000], }, }, { i: "widget-2", x: 2, y: 0, w: 2, h: 2, type: "table", title: "Top Products", data: { headers: ["Product", "Sales", "Revenue"], rows: [ ["Product A", "120", "$12,000"], ["Product B", "85", "$8,500"], ["Product C", "65", "$6,500"], ], }, }, { i: "widget-3", x: 0, y: 2, w: 4, h: 2, type: "iframe", title: "External Content", data: { url: "https://example.com/embed", }, }, ], "2": [ { i: "widget-1", x: 0, y: 0, w: 4, h: 2, type: "chart", title: "Sales Trend", data: { type: "line", labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], values: [1200, 1900, 1500, 2000, 2400, 2800], }, }, { i: "widget-2", x: 0, y: 2, w: 2, h: 2, type: "pie", title: "Sales by Channel", data: { labels: ["Online", "Retail", "Direct"], values: [55, 30, 15], }, }, ], "3": [ { i: "widget-1", x: 0, y: 0, w: 2, h: 2, type: "chart", title: "Campaign Performance", data: { type: "bar", labels: ["Email", "Social", "PPC", "Organic"], values: [45, 70, 30, 50], }, }, ], } export function DashboardGrid({ dashboardId, isShared = false, }: { dashboardId: string isShared?: boolean }) { const [widgets, setWidgets] = useState([]) const [layouts, setLayouts] = useState({}) const [currentWidget, setCurrentWidget] = useState(null) const [isSettingsOpen, setIsSettingsOpen] = useState(false) useEffect(() => { // In a real app, you would fetch the widgets from an API const dashboardWidgets = initialWidgets[dashboardId as keyof typeof initialWidgets] || [] setWidgets(dashboardWidgets) // Create layouts for react-grid-layout const lg = dashboardWidgets.map((widget) => ({ i: widget.i, x: widget.x, y: widget.y, w: widget.w, h: widget.h, })) setLayouts({ lg, md: lg, sm: dashboardWidgets.map((widget, index) => ({ i: widget.i, x: 0, y: index * 2, w: 2, h: widget.h, })), xs: dashboardWidgets.map((widget, index) => ({ i: widget.i, x: 0, y: index * 2, w: 1, h: widget.h, })), }) }, [dashboardId]) const handleLayoutChange = (layout: any, layouts: any) => { if (!isShared) { setLayouts(layouts) // Update widget positions const updatedWidgets = widgets.map((widget) => { const layoutItem = layout.find((item: any) => item.i === widget.i) if (layoutItem) { return { ...widget, x: layoutItem.x, y: layoutItem.y, w: layoutItem.w, h: layoutItem.h, } } return widget }) setWidgets(updatedWidgets) } } const handleWidgetSettings = (widget: any) => { setCurrentWidget(widget) setIsSettingsOpen(true) } const handleUpdateWidget = (updatedWidget: any) => { const updatedWidgets = widgets.map((widget) => (widget.i === updatedWidget.i ? updatedWidget : widget)) setWidgets(updatedWidgets) setIsSettingsOpen(false) } const handleRemoveWidget = (widgetId: string) => { const updatedWidgets = widgets.filter((widget) => widget.i !== widgetId) setWidgets(updatedWidgets) setIsSettingsOpen(false) } return ( <> {widgets.map((widget) => (

handleWidgetSettings(widget)} />

))} ) } [V0_FILE]typescriptreact:file="components/widget.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Settings } from "lucide-react" import { BarChart, LineChart, PieChart } from "@/components/charts" import { DataTable } from "@/components/data-table" export function Widget({ widget, onSettings, }: { widget: any onSettings?: () => void }) { const renderWidgetContent = () => { switch (widget.type) { case "chart": if (widget.data.type === "bar") { return } else if (widget.data.type === "line") { return } return

Unsupported chart type

case "pie": return case "table": return case "iframe": return

[V0_FILE]typescriptreact:file="src/app/components/iframe/iframe.component.scss" .iframe-container { width: 100%; height: 100%; overflow: hidden; iframe { width: 100%; height: 100%; border: 0; } } [V0_FILE]typescriptreact:file="src/app/services/dashboard.service.ts" import { Injectable } from "@angular/core" import { type Observable, of } from "rxjs" import type { Dashboard } from "../models/dashboard.model" @Injectable({ providedIn: "root", }) export class DashboardService { // Mock data for dashboards private dashboards: Dashboard[] = [ { id: "1", name: "Analytics Dashboard", description: "Key performance indicators and metrics", widgetCount: 8, appearance: { primaryColor: "#3f51b5", secondaryColor: "#ff4081", fontFamily: "Roboto", logoUrl: "/assets/logo.png", }, advanced: { refreshRate: 30, cacheTime: 5, }, }, { id: "2", name: "Sales Overview", description: "Sales performance and trends", widgetCount: 5, appearance: { primaryColor: "#2196f3", secondaryColor: "#ff9800", fontFamily: "Roboto", logoUrl: "/assets/logo.png", }, advanced: { refreshRate: 60, cacheTime: 10, }, }, { id: "3", name: "Marketing Metrics", description: "Campaign performance and ROI", widgetCount: 3, appearance: { primaryColor: "#4caf50", secondaryColor: "#f44336", fontFamily: "Roboto", logoUrl: "/assets/logo.png", }, advanced: { refreshRate: 120, cacheTime: 15, }, }, ] constructor() {} getDashboards(): Observable { // In a real app, this would be an HTTP request to an API return of(this.dashboards) } getDashboard(id: string): Observable { // In a real app, this would be an HTTP request to an API const dashboard = this.dashboards.find((d) => d.id === id) return of(dashboard as Dashboard) } createDashboard(dashboard: Partial): Observable { // In a real app, this would be an HTTP request to an API const newDashboard: Dashboard = { id: Date.now().toString(), name: dashboard.name || "New Dashboard", description: dashboard.description || "", widgetCount: 0, appearance: dashboard.appearance || { primaryColor: "#3f51b5", secondaryColor: "#ff4081", fontFamily: "Roboto", logoUrl: "/assets/logo.png", }, advanced: dashboard.advanced || { refreshRate: 30, cacheTime: 5, }, } this.dashboards.push(newDashboard) return of(newDashboard) } updateDashboard(dashboard: Dashboard): Observable { // In a real app, this would be an HTTP request to an API const index = this.dashboards.findIndex((d) => d.id === dashboard.id) if (index !== -1) { this.dashboards[index] = dashboard } return of(dashboard) } deleteDashboard(id: string): Observable { // In a real app, this would be an HTTP request to an API this.dashboards = this.dashboards.filter((d) => d.id !== id) return of(true) } } [V0_FILE]typescriptreact:file="src/app/services/widget.service.ts" import { Injectable } from "@angular/core" import { type Observable, of } from "rxjs" import type { Widget } from "../models/widget.model" @Injectable({ providedIn: "root", }) export class WidgetService { // Mock data for widgets private widgets: Widget[] = [ { id: "1", dashboardId: "1", title: "Revenue by Region", type: "chart", data: { type: "bar", labels: ["North", "South", "East", "West"], values: [4000, 3000, 5000, 7000], }, gridItem: { x: 0, y: 0, cols: 2, rows: 2, }, appearance: { backgroundColor: "#ffffff", textColor: "#000000", fontSize: "md", }, }, { id: "2", dashboardId: "1", title: "Top Products", type: "table", data: { headers: ["Product", "Sales", "Revenue"], rows: [ ["Product A", "120", "$12,000"], ["Product B", "85", "$8,500"], ["Product C", "65", "$6,500"], ], }, gridItem: { x: 2, y: 0, cols: 2, rows: 2, }, appearance: { backgroundColor: "#ffffff", textColor: "#000000", fontSize: "md", }, }, { id: "3", dashboardId: "1", title: "Sales Trend", type: "chart", data: { type: "line", labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], values: [1200, 1900, 1500, 2000, 2400, 2800], }, gridItem: { x: 0, y: 2, cols: 4, rows: 2, }, appearance: { backgroundColor: "#ffffff", textColor: "#000000", fontSize: "md", }, }, { id: "4", dashboardId: "2", title: "Sales by Channel", type: "pie", data: { labels: ["Online", "Retail", "Direct"], values: [55, 30, 15], }, gridItem: { x: 0, y: 0, cols: 2, rows: 2, }, appearance: { backgroundColor: "#ffffff", textColor: "#000000", fontSize: "md", }, }, { id: "5", dashboardId: "3", title: "Campaign Performance", type: "chart", data: { type: "bar", labels: ["Email", "Social", "PPC", "Organic"], values: [45, 70, 30, 50], }, gridItem: { x: 0, y: 0, cols: 2, rows: 2, }, appearance: { backgroundColor: "#ffffff", textColor: "#000000", fontSize: "md", }, }, ] constructor() {} getWidgetsByDashboardId(dashboardId: string): Observable { // In a real app, this would be an HTTP request to an API const dashboardWidgets = this.widgets.filter((w) => w.dashboardId === dashboardId) return of(dashboardWidgets) } getWidget(id: string): Observable { // In a real app, this would be an HTTP request to an API const widget = this.widgets.find((w) => w.id === id) return of(widget as Widget) } addWidget(widget: Partial): Observable { // In a real app, this would be an HTTP request to an API const newWidget: Widget = { id: Date.now().toString(), dashboardId: widget.dashboardId || "", title: widget.title || "New Widget", type: widget.type || "chart", data: widget.data || {}, gridItem: widget.gridItem || { x: 0, y: 0, cols: 2, rows: 2, }, appearance: widget.appearance || { backgroundColor: "#ffffff", textColor: "#000000", fontSize: "md", }, } this.widgets.push(newWidget) return of(newWidget) } updateWidget(widget: Widget): Observable { // In a real app, this would be an HTTP request to an API const index = this.widgets.findIndex((w) => w.id === widget.id) if (index !== -1) { this.widgets[index] = widget } return of(widget) } deleteWidget(id: string): Observable { // In a real app, this would be an HTTP request to an API this.widgets = this.widgets.filter((w) => w.id !== id) return of(true) } processTextToSql(query: string): Observable { // In a real app, this would call a Text-to-SQL API // For demo purposes, we'll return mock data based on the query let result if (query.toLowerCase().includes("sales") && query.toLowerCase().includes("region")) { result = { title: "Sales by Region", type: "bar", data: { type: "bar", labels: ["North", "South", "East", "West"], values: [4200, 3800, 5100, 6700], }, } } else if (query.toLowerCase().includes("trend") || query.toLowerCase().includes("time")) { result = { title: "Sales Trend", type: "chart", data: { type: "line", labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], values: [1200, 1900, 1500, 2000, 2400, 2800], }, } } else if (query.toLowerCase().includes("channel") || query.toLowerCase().includes("distribution")) { result = { title: "Sales by Channel", type: "pie", data: { labels: ["Online", "Retail", "Direct"], values: [55, 30, 15], }, } } else if (query.toLowerCase().includes("product")) { result = { title: "Top Products", type: "table", data: { headers: ["Product", "Sales", "Revenue"], rows: [ ["Product A", "120", "$12,000"], ["Product B", "85", "$8,500"], ["Product C", "65", "$6,500"], ], }, } } else { // Default result result = { title: "Query Results", type: "bar", data: { type: "bar", labels: ["Category A", "Category B", "Category C", "Category D"], values: [40, 60, 25, 85], }, } } return of(result) } } [V0_FILE]typescriptreact:file="src/app/services/theme.service.ts" import { Injectable } from "@angular/core" import { BehaviorSubject, type Observable } from "rxjs" @Injectable({ providedIn: "root", }) export class ThemeService { private darkTheme = new BehaviorSubject(false) constructor() { // Check if user has a preference stored const storedTheme = localStorage.getItem("theme") if (storedTheme) { this.darkTheme.next(storedTheme === "dark") } else { // Check if user prefers dark mode const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches this.darkTheme.next(prefersDark) } } get isDarkTheme$(): Observable { return this.darkTheme.asObservable() } toggleDarkTheme(): void { const newValue = !this.darkTheme.value this.darkTheme.next(newValue) localStorage.setItem("theme", newValue ? "dark" : "light") } } [V0_FILE]typescriptreact:file="src/app/models/dashboard.model.ts" export interface Dashboard { id: string name: string description?: string widgetCount: number appearance?: { primaryColor: string secondaryColor: string fontFamily: string logoUrl: string } advanced?: { refreshRate: number cacheTime: number } } [V0_FILE]typescriptreact:file="src/app/models/widget.model.ts" export interface Widget { id: string dashboardId: string title: string type: "chart" | "pie" | "table" | "iframe" data: any gridItem: { x: number y: number cols: number rows: number } appearance?: { backgroundColor: string textColor: string fontSize: "sm" | "md" | "lg" } } [V0_FILE]typescriptreact:file="src/styles.scss" @import '@angular/material/prebuilt-themes/indigo-pink.css'; html, body { height: 100%; margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } .dark-theme { @import '@angular/material/prebuilt-themes/purple-green.css'; background-color: #303030; color: #ffffff; } .mat-card { margin-bottom: 16px; } .spacer { flex: 1 1 auto; } .full-width { width: 100%; }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This