ca-grow-ops-manager/frontend/src/pages/DashboardPage.tsx

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "react-router-dom";

export default function DashboardPage() {
    return (
        <div className="min-h-screen bg-background">
            <header className="border-b">
                <div className="container flex h-16 items-center px-4">
                    <h2 className="text-lg font-semibold text-primary">Grow Ops Manager</h2>
                    <div className="ml-auto flex items-center space-x-4">
                        <Button variant="ghost" asChild>
                            <Link to="/">Logout</Link>
                        </Button>
                    </div>
                </div>
            </header>
            <main className="container py-8">
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">$45,231.89</div>
                            <p className="text-xs text-muted-foreground">+20.1% from last month</p>
                        </CardContent>
                    </Card>
                    {/* Add more cards */}
                </div>
            </main>
        </div>
    );
}