improve graphs and table

apps/web/src/pages/index.tsx

@@ -6,8 +6,15 @@ import { ReportLineChart } from "@/components/report/chart/ReportLineChart";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Combobox } from "@/components/ui/combobox";
 import { useDispatch, useSelector } from "@/redux";
-import { changeInterval } from "@/components/report/reportSlice";
+import {
+  changeDateRanges,
+  changeInterval,
+} from "@/components/report/reportSlice";
 import { type IInterval } from "@/types";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuShortcut, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { User } from "lucide-react";
+import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
 
 export default function Home() {
   const dispatch = useDispatch();
@@ -24,6 +31,50 @@ export default function Home() {
         <meta name="description" content="Generated by create-t3-app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
+      <nav className="flex h-20 items-center border-b border-border px-8 justify-between bg-black text-white">
+        <div className="flex flex-col [&_*]:leading-tight">
+          <span className="text-2xl font-extrabold">MIXAN</span>
+          <span className="text-xs text-muted">v0.0.1</span>
+        </div>
+        <div className="flex gap-4 uppercase text-sm">
+          <a href="#">Dashboards</a>
+          <a href="#">Reports</a>
+          <a href="#">Events</a>
+          <a href="#">Users</a>
+        </div>
+
+        <div>
+       
+          <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button>
+          <Avatar className="text-black">
+            <AvatarFallback>CL</AvatarFallback>
+          </Avatar>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[200px]">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <User className="mr-2 h-4 w-4" />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+            <User className="mr-2 h-4 w-4" />
+              Organization
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-red-600">
+            <User className="mr-2 h-4 w-4" />
+              Logout
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+        </div>
+      </nav>
       <main className="grid min-h-screen grid-cols-[400px_minmax(0,1fr)] divide-x">
         <div>
           <ReportSidebar />
@@ -32,12 +83,55 @@ export default function Home() {
         <div className="flex flex-col gap-4 p-4">
           <div className="flex gap-4">
             <RadioGroup>
-              <RadioGroupItem>7 days</RadioGroupItem>
-              <RadioGroupItem>14 days</RadioGroupItem>
-              <RadioGroupItem>1 month</RadioGroupItem>
-              <RadioGroupItem>3 month</RadioGroupItem>
-              <RadioGroupItem>6 month</RadioGroupItem>
-              <RadioGroupItem>1 year</RadioGroupItem>
+              <RadioGroupItem
+                onClick={() => {
+                  dispatch(changeDateRanges(1));
+                }}
+              >
+                Today
+              </RadioGroupItem>
+              <RadioGroupItem
+                onClick={() => {
+                  dispatch(changeDateRanges(1));
+                }}
+              >
+                7 days
+              </RadioGroupItem>
+              <RadioGroupItem
+                onClick={() => {
+                  dispatch(changeDateRanges(14));
+                }}
+              >
+                14 days
+              </RadioGroupItem>
+              <RadioGroupItem
+                onClick={() => {
+                  dispatch(changeDateRanges(30));
+                }}
+              >
+                1 month
+              </RadioGroupItem>
+              <RadioGroupItem
+                onClick={() => {
+                  dispatch(changeDateRanges(90));
+                }}
+              >
+                3 month
+              </RadioGroupItem>
+              <RadioGroupItem
+                onClick={() => {
+                  dispatch(changeDateRanges(180));
+                }}
+              >
+                6 month
+              </RadioGroupItem>
+              <RadioGroupItem
+                onClick={() => {
+                  dispatch(changeDateRanges(356));
+                }}
+              >
+                1 year
+              </RadioGroupItem>
             </RadioGroup>
             <div className="w-full max-w-[200px]">
               <Combobox
@@ -70,6 +164,7 @@ export default function Home() {
               events={events}
               breakdowns={breakdowns}
               interval={interval}
+              showTable
             />
           )}
         </div>