A dashboard with sidebar, charts and data table

templ Dashboard01Preview() {
	@PreviewLayout("Dashboard 01 Preview") {
		<div class="flex h-screen bg-background">
			@ui.Sidebar(ui.SidebarProps{
				Side:        "left",
				Variant:     "inset",
				Collapsible: "icon",
				DOMProps: ui.DOMProps{
					Class: "border-r border-border/70",
				},
			}) {
				@ui.SidebarHeader(ui.DOMProps{Class: "p-4 border-b border-border/70"}) {
					<div class="flex items-center gap-2 font-semibold">
						<span class="flex size-7 items-center justify-center rounded-md bg-primary text-xs text-primary-foreground">D</span>
						<span>Dashboard</span>
					</div>
				}
				@ui.SidebarContent(ui.DOMProps{}) {
					@ui.SidebarGroup(ui.DOMProps{}) {
						@ui.SidebarMenu(ui.DOMProps{}) {
							@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{IsActive: true}) { <span>Overview</span> } }
							@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{}) { <span>Analytics</span> } }
							@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{}) { <span>Reports</span> } }
						}
					}
					@ui.SidebarGroup(ui.DOMProps{Class: "mt-4"}) {
						@ui.SidebarGroupLabel(ui.DOMProps{}) { <span>Settings</span> }
						@ui.SidebarGroupContent(ui.DOMProps{}) {
							@ui.SidebarMenu(ui.DOMProps{}) {
								@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{}) { <span>Profile</span> } }
								@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{}) { <span>Team</span> } }
							}
						}
					}
				}
			}
			<main class="flex-1 overflow-auto">
				<div class="p-6 space-y-6">
					<div class="flex items-center justify-between">
						<h1 class="text-2xl font-semibold">Dashboard</h1>
						@ui.Button(ui.ButtonProps{Label: "New Report", Variant: ui.ButtonVariantDefault, Size: ui.ButtonSizeSM, DOMProps: ui.DOMProps{Attrs: t.Attributes{"type": "button"}}})
					</div>
					<div class="grid gap-4 md:grid-cols-3">
						@ui.Card(ui.DOMProps{}) {
							@ui.CardHeader(ui.DOMProps{Class: "pb-2"}) {
								@ui.CardDescription(ui.DOMProps{}) { <span>Total Revenue</span> }
								@ui.CardTitle(ui.DOMProps{}) { <span>$45,231.89</span> }
							}
							@ui.CardContent(ui.DOMProps{Class: "pt-0"}) {
								<p class="text-xs text-muted-foreground">+20.1% from last month</p>
							}
						}
						@ui.Card(ui.DOMProps{}) {
							@ui.CardHeader(ui.DOMProps{Class: "pb-2"}) {
								@ui.CardDescription(ui.DOMProps{}) { <span>Subscriptions</span> }
								@ui.CardTitle(ui.DOMProps{}) { <span>+2350</span> }
							}
							@ui.CardContent(ui.DOMProps{Class: "pt-0"}) {
								<p class="text-xs text-muted-foreground">+180.1% from last month</p>
							}
						}
						@ui.Card(ui.DOMProps{}) {
							@ui.CardHeader(ui.DOMProps{Class: "pb-2"}) {
								@ui.CardDescription(ui.DOMProps{}) { <span>Sales</span> }
								@ui.CardTitle(ui.DOMProps{}) { <span>+12,234</span> }
							}
							@ui.CardContent(ui.DOMProps{Class: "pt-0"}) {
								<p class="text-xs text-muted-foreground">+19% from last month</p>
							}
						}
					</div>
					@ui.Card(ui.DOMProps{}) {
						@ui.CardHeader(ui.DOMProps{}) {
							@ui.CardTitle(ui.DOMProps{}) { <span>Recent Activity</span> }
							@ui.CardDescription(ui.DOMProps{}) { <span>Latest transactions and updates</span> }
						}
						@ui.CardContent(ui.DOMProps{}) {
							@ui.Table(ui.DOMProps{}) {
								@ui.TableHeader(ui.DOMProps{}) {
									@ui.TableRow(ui.DOMProps{}) {
										@ui.TableHead(ui.DOMProps{}) { <span>Invoice</span> }
										@ui.TableHead(ui.DOMProps{}) { <span>Status</span> }
										@ui.TableHead(ui.DOMProps{}) { <span>Method</span> }
										@ui.TableHead(ui.DOMProps{}) { <span>Amount</span> }
									}
								}
								@ui.TableBody(ui.DOMProps{}) {
									@ui.TableRow(ui.DOMProps{}) {
										@ui.TableCell(ui.DOMProps{}) { <span>INV001</span> }
										@ui.TableCell(ui.DOMProps{}) { @ui.Badge(ui.BadgeProps{Label: "Paid", Variant: ui.BadgeVariantSecondary}) }
										@ui.TableCell(ui.DOMProps{}) { <span>Credit Card</span> }
										@ui.TableCell(ui.DOMProps{}) { <span>$250.00</span> }
									}
									@ui.TableRow(ui.DOMProps{}) {
										@ui.TableCell(ui.DOMProps{}) { <span>INV002</span> }
										@ui.TableCell(ui.DOMProps{}) { @ui.Badge(ui.BadgeProps{Label: "Pending", Variant: ui.BadgeVariantOutline}) }
										@ui.TableCell(ui.DOMProps{}) { <span>PayPal</span> }
										@ui.TableCell(ui.DOMProps{}) { <span>$150.00</span> }
									}
								}
							}
						}
					}
				</div>
			</main>
		</div>
	}
}