From 9bad4099e7419d00c26be70932fb16e6f74d015e Mon Sep 17 00:00:00 2001
From: Debajyoti14 <debajyotisaha14@gmail.com>
Date: Thu, 25 Jul 2024 00:52:13 +0530
Subject: [PATCH 1/4] Dashboard UI Updated

---
 ui/components/Overview/Overview.tsx         |  10 +-
 ui/components/custom/DonutChartForStats.tsx |   4 +-
 ui/components/custom/PieChart.tsx           | 114 ++++-
 ui/components/ui/select.tsx                 | 160 +++++++
 ui/package-lock.json                        | 503 ++++++++++++++++++++
 ui/package.json                             |   1 +
 6 files changed, 773 insertions(+), 19 deletions(-)
 create mode 100644 ui/components/ui/select.tsx

diff --git a/ui/components/Overview/Overview.tsx b/ui/components/Overview/Overview.tsx
index 4d8a0b4..9a07a91 100644
--- a/ui/components/Overview/Overview.tsx
+++ b/ui/components/Overview/Overview.tsx
@@ -164,15 +164,15 @@ const Overview = () => {
                                 chartConfig={userChartConfig}
                                 key='name'
                             />
-                            <Card className='flex flex-col justify-between'>
+                            <Card className='flex flex-col'>
                                 <CardHeader>
-                                    <CardTitle>Blocked Users</CardTitle>
+                                    <CardTitle className="text-xl mb-10">Blocked Users</CardTitle>
                                 </CardHeader>
-                                <CardContent className='flex flex-col gap-5 items-center'>
-                                    <p className="text-5xl font-bold">
+                                <CardContent className='flex gap-10 items-end justify-center'>
+                                    <FaUsersSlash size={120} className='text-gray-300' />
+                                    <p className="text-5xl font-bold mb-4">
                                         {overview?.blocked_user_count}
                                     </p>
-                                    <FaUsersSlash size={80} className='text-gray-300' />
                                 </CardContent>
                             </Card>
                             <DonutChartStats
diff --git a/ui/components/custom/DonutChartForStats.tsx b/ui/components/custom/DonutChartForStats.tsx
index b463ddd..f0ceabd 100644
--- a/ui/components/custom/DonutChartForStats.tsx
+++ b/ui/components/custom/DonutChartForStats.tsx
@@ -30,8 +30,8 @@ export function DonutChartStats({ title, chartData, chartConfig, key }: DonutCha
 
     return (
         <Card className="flex flex-col">
-            <CardHeader className="items-center pb-0">
-                <CardTitle>{title}</CardTitle>
+            <CardHeader className="items-start pb-0">
+                <CardTitle className="text-xl">{title}</CardTitle>
             </CardHeader>
             <CardContent className="flex-1 pb-0">
                 <ChartContainer
diff --git a/ui/components/custom/PieChart.tsx b/ui/components/custom/PieChart.tsx
index 12180d1..f81efb4 100644
--- a/ui/components/custom/PieChart.tsx
+++ b/ui/components/custom/PieChart.tsx
@@ -1,10 +1,11 @@
 "use client"
 
-import { Pie, PieChart } from "recharts"
+import { Label, Pie, PieChart, Sector } from "recharts"
 
 import {
     Card,
     CardContent,
+    CardDescription,
     CardHeader,
     CardTitle,
 } from "@/components/ui/card"
@@ -13,9 +14,13 @@ import {
     ChartContainer,
     ChartLegend,
     ChartLegendContent,
+    ChartStyle,
     ChartTooltip,
     ChartTooltipContent,
 } from "@/components/ui/chart"
+import React from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { PieSectorDataItem } from "recharts/types/polar/Pie";
 
 
 interface ChartPieProps {
@@ -26,15 +31,59 @@ interface ChartPieProps {
 }
 
 export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps) {
+    const id = "pie-interactive"
+    const [active, setActive] = React.useState(chartData[0].name)
+    const activeIndex = React.useMemo(
+        () => chartData.findIndex((item: any) => item.name === active),
+        [active, chartData]
+    )
+    const options = React.useMemo(() => chartData.map((item: any) => item.name), [chartData])
     return (
-        <Card className="flex flex-col">
-            <CardHeader className="items-center pb-0">
-                <CardTitle>{title}</CardTitle>
+        <Card data-chart={id} className="flex flex-col">
+            <ChartStyle id={id} config={chartConfig} />
+            <CardHeader className="flex-row items-start space-y-0 pb-0">
+                <div className="grid gap-1">
+                    <CardTitle className="text-xl">{title}</CardTitle>
+                </div>
+                <Select value={active} onValueChange={setActive}>
+                    <SelectTrigger
+                        className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
+                        aria-label="Select a value"
+                    >
+                        <SelectValue placeholder="Select" />
+                    </SelectTrigger>
+                    <SelectContent align="end" className="rounded-xl">
+                        {options.map((key: string) => {
+                            const config = chartConfig[key as keyof typeof chartConfig]
+                            if (!config) {
+                                return null
+                            }
+                            return (
+                                <SelectItem
+                                    key={key}
+                                    value={key}
+                                    className="rounded-lg [&_span]:flex"
+                                >
+                                    <div className="flex items-center gap-2 text-xs">
+                                        <span
+                                            className="flex h-3 w-3 shrink-0 rounded-sm"
+                                            style={{
+                                                backgroundColor: `var(--color-${key})`,
+                                            }}
+                                        />
+                                        {config?.label}
+                                    </div>
+                                </SelectItem>
+                            )
+                        })}
+                    </SelectContent>
+                </Select>
             </CardHeader>
-            <CardContent className="flex-1 pb-0">
+            <CardContent className="flex flex-1 justify-center pb-0">
                 <ChartContainer
+                    id={id}
                     config={chartConfig}
-                    className="mx-auto aspect-square max-h-[250px]"
+                    className="mx-auto aspect-square w-full max-h-[250px]"
                 >
                     <PieChart>
                         <ChartTooltip
@@ -46,14 +95,55 @@ export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps)
                             dataKey="count"
                             nameKey={key}
                             innerRadius={60}
-                        />
-                        <ChartLegend
-                            content={<ChartLegendContent nameKey={key} />}
-                            className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
-                        />
+                            strokeWidth={5}
+                            activeIndex={activeIndex}
+                            activeShape={({
+                                outerRadius = 0,
+                                ...props
+                            }: PieSectorDataItem) => (
+                                <g>
+                                    <Sector {...props} outerRadius={outerRadius} />
+                                    <Sector
+                                        {...props}
+                                        outerRadius={outerRadius + 10}
+                                        innerRadius={outerRadius + 2}
+                                    />
+                                </g>
+                            )}
+                        >
+                            <Label
+                                content={({ viewBox }) => {
+                                    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                        return (
+                                            <text
+                                                x={viewBox.cx}
+                                                y={viewBox.cy}
+                                                textAnchor="middle"
+                                                dominantBaseline="middle"
+                                            >
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={viewBox.cy}
+                                                    className="fill-foreground text-3xl font-bold"
+                                                >
+                                                    {chartData[activeIndex].count.toLocaleString()}
+                                                </tspan>
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={(viewBox.cy || 0) + 24}
+                                                    className="fill-muted-foreground"
+                                                >
+                                                    {chartData[activeIndex].name.toLocaleString()}
+                                                </tspan>
+                                            </text>
+                                        )
+                                    }
+                                }}
+                            />
+                        </Pie>
                     </PieChart>
                 </ChartContainer>
             </CardContent>
         </Card>
     )
-}
+}
\ No newline at end of file
diff --git a/ui/components/ui/select.tsx b/ui/components/ui/select.tsx
new file mode 100644
index 0000000..cbe5a36
--- /dev/null
+++ b/ui/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 8a97ce1..45d90f5 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -11,6 +11,7 @@
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
@@ -461,6 +462,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@@ -945,6 +952,502 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
+      "integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-select/node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
diff --git a/ui/package.json b/ui/package.json
index 16a7519..1706934 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,6 +12,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",

From 615a9eedabc3479df4f3154abe3f6bedd17635fb Mon Sep 17 00:00:00 2001
From: Debajyoti14 <debajyotisaha14@gmail.com>
Date: Thu, 25 Jul 2024 15:05:10 +0530
Subject: [PATCH 2/4] Changed in Session Model Done for storing os,device and
 browser

---
 src/core/session.rs              | 40 +++++++++++++++++++++++++++++++
 src/handlers/overview_handler.rs | 41 +++++---------------------------
 src/models/session_model.rs      | 21 +++++++++-------
 3 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/src/core/session.rs b/src/core/session.rs
index a933d7f..5e93bda 100644
--- a/src/core/session.rs
+++ b/src/core/session.rs
@@ -7,6 +7,7 @@ use crate::{
     },
 };
 use bson::{doc, DateTime};
+use woothee::parser::Parser;
 use futures::StreamExt;
 use mongodb::{Client, Collection};
 use serde::{Deserialize, Serialize};
@@ -22,6 +23,10 @@ pub struct Session {
     pub id_token: String,
     pub refresh_token: String,
     pub user_agent: String,
+    pub os: String,
+    pub device: String,
+    pub browser: String,
+    pub browser_version: String,
     pub is_revoked: bool,
     pub created_at: DateTime,
     pub updated_at: DateTime,
@@ -39,6 +44,25 @@ impl Session {
             Err(_) => "".to_string(),
         };
 
+        let parser = Parser::new();
+
+        let user_agent_data = parser.parse(user_agent);
+
+        let os = user_agent_data.as_ref().map_or_else(String::new, |result| result.os.to_string());
+
+        let device = user_agent_data
+            .as_ref()
+            .map_or_else(String::new, |result| result.category.to_string());
+
+        let browser = user_agent_data
+            .as_ref()
+            .map_or_else(String::new, |result| result.name.to_string());
+
+        let browser_version = user_agent_data
+            .as_ref()
+            .map_or_else(String::new, |result| result.version.to_string());
+
+
         Self {
             uid: user.uid.to_string(),
             session_id: Uuid::new_v4().to_string(),
@@ -46,6 +70,10 @@ impl Session {
             id_token,
             refresh_token,
             user_agent: user_agent.to_string(),
+            os,
+            device,
+            browser,
+            browser_version,
             is_revoked: false,
             created_at: DateTime::now(),
             updated_at: DateTime::now(),
@@ -297,6 +325,10 @@ impl Session {
                         session_id: decrypted_session.session_id,
                         email: decrypted_session.email,
                         user_agent: decrypted_session.user_agent,
+                        os: decrypted_session.os,
+                        device: decrypted_session.device,
+                        browser: decrypted_session.browser,
+                        browser_version: decrypted_session.browser_version,
                         is_revoked: decrypted_session.is_revoked,
                         created_at: decrypted_session.created_at,
                         updated_at: decrypted_session.updated_at,
@@ -396,6 +428,10 @@ impl Session {
                                 session_id: decrypted_session.session_id,
                                 email: decrypted_session.email,
                                 user_agent: decrypted_session.user_agent,
+                                os: decrypted_session.os,
+                                device: decrypted_session.device,
+                                browser: decrypted_session.browser,
+                                browser_version: decrypted_session.browser_version,
                                 is_revoked: decrypted_session.is_revoked,
                                 created_at: decrypted_session.created_at,
                                 updated_at: decrypted_session.updated_at,
@@ -452,6 +488,10 @@ impl Session {
                     session_id: data.session_id,
                     email: data.email,
                     user_agent: data.user_agent,
+                    os: data.os,
+                    device: data.device,
+                    browser: data.browser,
+                    browser_version: data.browser_version,
                     is_revoked: data.is_revoked,
                     created_at: data.created_at,
                     updated_at: data.updated_at,
diff --git a/src/handlers/overview_handler.rs b/src/handlers/overview_handler.rs
index b8a1936..415ae73 100644
--- a/src/handlers/overview_handler.rs
+++ b/src/handlers/overview_handler.rs
@@ -2,7 +2,6 @@ use axum::{extract::State, Json};
 use axum_macros::debug_handler;
 use bson::doc;
 use bson::DateTime;
-use woothee::parser::{Parser, WootheeResult};
 
 use crate::core::session::Session;
 use crate::errors::Result;
@@ -30,49 +29,21 @@ pub async fn get_all_overview_handler(
     let active_session_count = all_sessions.iter().filter(|s| !s.is_revoked).count();
     let revoked_session_count = all_sessions.iter().filter(|s| s.is_revoked).count();
 
-    // create a user-agent map from all_sessions where is_revoked = false
-    let user_agents: Vec<String> = all_sessions
+    let os_types: Vec<String> = all_sessions
         .iter()
-        .filter(|s| !s.is_revoked)
-        .map(|s| s.user_agent.clone())
+        .map(|session| session.os.clone())
         .collect();
 
-    println!(">> user_agents: {:?}", user_agents);
-
-    let parser = Parser::new();
-
-    // find out os_types, device_types, browser_types from all_sessions using user-agent-parser
-    let results: Vec<Option<WootheeResult>> =
-        user_agents.iter().map(|ua| parser.parse(ua)).collect();
-
-    // get os_types as a string[] from results
-    let os_types: Vec<String> = results
-        .iter()
-        .map(|r| {
-            r.as_ref()
-                .map_or_else(String::new, |result| result.os.to_string())
-        })
-        .collect();
-
-    // get device_types as a string[] from results
-    let device_types: Vec<String> = results
+    let device_types: Vec<String> = all_sessions
         .iter()
-        .map(|r| {
-            r.as_ref()
-                .map_or_else(String::new, |result| result.category.to_string())
-        })
+        .map(|session| session.device.clone())
         .collect();
 
-    // get browser_types as a string[] from results
-    let browser_types: Vec<String> = results
+    let browser_types: Vec<String> = all_sessions
         .iter()
-        .map(|r| {
-            r.as_ref()
-                .map_or_else(String::new, |result| result.name.to_string())
-        })
+        .map(|session| session.browser.clone())
         .collect();
 
-    println!(">> results USER AGENTSSS: {:?}", results);
     println!(">> os_types: {:?}", os_types);
     println!(">> device_types: {:?}", device_types);
     println!(">> browser_types: {:?}", browser_types);
diff --git a/src/models/session_model.rs b/src/models/session_model.rs
index d8623b8..82fcd5a 100644
--- a/src/models/session_model.rs
+++ b/src/models/session_model.rs
@@ -8,13 +8,17 @@ pub struct VerifySession {
 
 #[derive(Deserialize, Debug, Clone, Serialize)]
 pub struct SessionResponse {
-    pub uid : String,
-    pub session_id : String,
-    pub email : String,
-    pub user_agent : String,
-    pub is_revoked : bool,
-    pub created_at : DateTime,
-    pub updated_at : DateTime,
+    pub uid: String,
+    pub session_id: String,
+    pub email: String,
+    pub user_agent: String,
+    pub os: String,
+    pub device: String,
+    pub browser: String,
+    pub browser_version: String,
+    pub is_revoked: bool,
+    pub created_at: DateTime,
+    pub updated_at: DateTime,
 }
 
 #[derive(Deserialize, Debug, Clone)]
@@ -54,7 +58,6 @@ pub struct RevokeSessionsResult {
     pub message: String,
 }
 
-
 #[derive(Deserialize, Debug, Clone)]
 pub struct DeleteAllSessionsPayload {
     pub uid: String,
@@ -80,4 +83,4 @@ pub struct DeleteSessionsResult {
 pub struct SessionDetailsPayload {
     pub uid: String,
     pub session_id: String,
-}
\ No newline at end of file
+}

From 507824f8d3869c54a5078980d81a4522790912b5 Mon Sep 17 00:00:00 2001
From: Debajyoti14 <debajyotisaha14@gmail.com>
Date: Thu, 25 Jul 2024 17:20:48 +0530
Subject: [PATCH 3/4] Fixed a lot UI issues

---
 src/core/session.rs                          |  18 ++
 src/models/session_model.rs                  |   2 +
 ui/app/api/user/get-recent/route.ts          |  25 ++
 ui/components/Overview/Overview.tsx          | 258 ++++++++++++++++++-
 ui/components/custom/DonutChartForStats.tsx  |  90 ++++---
 ui/components/custom/PieChart.tsx            |  36 ++-
 ui/components/session/SessionTableAll.tsx    |  30 +--
 ui/components/session/SessionTableUser.tsx   |  23 +-
 ui/components/shared/Navbar.tsx              |   2 +-
 ui/components/shared/Sidebar/SidebarItem.tsx |   3 +
 ui/interfaces/ISession.ts                    |   6 +
 11 files changed, 405 insertions(+), 88 deletions(-)
 create mode 100644 ui/app/api/user/get-recent/route.ts

diff --git a/src/core/session.rs b/src/core/session.rs
index 5e93bda..6e90d42 100644
--- a/src/core/session.rs
+++ b/src/core/session.rs
@@ -24,6 +24,8 @@ pub struct Session {
     pub refresh_token: String,
     pub user_agent: String,
     pub os: String,
+    pub os_version: String,
+    pub vendor: String,
     pub device: String,
     pub browser: String,
     pub browser_version: String,
@@ -50,6 +52,14 @@ impl Session {
 
         let os = user_agent_data.as_ref().map_or_else(String::new, |result| result.os.to_string());
 
+        let os_version = user_agent_data
+            .as_ref()
+            .map_or_else(String::new, |result| result.os_version.to_string());
+
+        let vendor = user_agent_data
+            .as_ref()
+            .map_or_else(String::new, |result| result.vendor.to_string());
+
         let device = user_agent_data
             .as_ref()
             .map_or_else(String::new, |result| result.category.to_string());
@@ -71,6 +81,8 @@ impl Session {
             refresh_token,
             user_agent: user_agent.to_string(),
             os,
+            os_version,
+            vendor,
             device,
             browser,
             browser_version,
@@ -326,6 +338,8 @@ impl Session {
                         email: decrypted_session.email,
                         user_agent: decrypted_session.user_agent,
                         os: decrypted_session.os,
+                        os_version: decrypted_session.os_version,
+                        vendor: decrypted_session.vendor,
                         device: decrypted_session.device,
                         browser: decrypted_session.browser,
                         browser_version: decrypted_session.browser_version,
@@ -429,6 +443,8 @@ impl Session {
                                 email: decrypted_session.email,
                                 user_agent: decrypted_session.user_agent,
                                 os: decrypted_session.os,
+                                os_version: decrypted_session.os_version,
+                                vendor: decrypted_session.vendor,
                                 device: decrypted_session.device,
                                 browser: decrypted_session.browser,
                                 browser_version: decrypted_session.browser_version,
@@ -489,6 +505,8 @@ impl Session {
                     email: data.email,
                     user_agent: data.user_agent,
                     os: data.os,
+                    os_version: data.os_version,
+                    vendor: data.vendor,
                     device: data.device,
                     browser: data.browser,
                     browser_version: data.browser_version,
diff --git a/src/models/session_model.rs b/src/models/session_model.rs
index 82fcd5a..48d35af 100644
--- a/src/models/session_model.rs
+++ b/src/models/session_model.rs
@@ -13,6 +13,8 @@ pub struct SessionResponse {
     pub email: String,
     pub user_agent: String,
     pub os: String,
+    pub os_version: String,
+    pub vendor: String,
     pub device: String,
     pub browser: String,
     pub browser_version: String,
diff --git a/ui/app/api/user/get-recent/route.ts b/ui/app/api/user/get-recent/route.ts
new file mode 100644
index 0000000..18b0387
--- /dev/null
+++ b/ui/app/api/user/get-recent/route.ts
@@ -0,0 +1,25 @@
+export async function POST(req: Request) {
+    const endPoint: (string | undefined) = `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/user/get-recent`;
+
+    const { limit } = await req.json();
+
+    if (endPoint) {
+        try {
+            const res = await fetch(endPoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json', // Set the appropriate content type for your request
+                    'x-api-key': process.env.X_API_KEY!,
+                },
+                cache: 'no-cache',
+                body: JSON.stringify({
+                    limit
+                }),
+            });
+            const data = await res.json();
+            return Response.json({ data })
+        } catch (error) {
+            console.error('Error during request:', error);
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/components/Overview/Overview.tsx b/ui/components/Overview/Overview.tsx
index 9a07a91..1240898 100644
--- a/ui/components/Overview/Overview.tsx
+++ b/ui/components/Overview/Overview.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 "use client";
 import React, { useEffect, useState } from 'react'
 import { Loader } from '../custom/Loader';
@@ -5,11 +6,27 @@ import { IOverview } from '@/interfaces/IOverview';
 import { DonutChartStats } from '../custom/DonutChartForStats';
 import { ChartConfig } from '../ui/chart';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 import { FaUsersSlash } from 'react-icons/fa';
 import { ChartPie } from '../custom/PieChart';
+import { IUser } from '@/interfaces/IUser';
+import { ColumnDef } from '@tanstack/react-table';
+import { LuArrowUpRight } from 'react-icons/lu';
+import { useRouter } from 'next/navigation';
+import { Badge } from '../ui/badge';
+import { TiTick } from 'react-icons/ti';
+import { GoClockFill } from 'react-icons/go';
+import { IoIosWarning, IoMdMore } from 'react-icons/io';
+import { format } from 'date-fns';
+import { toast } from '../ui/use-toast';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { DataTable } from '../ui/data-table';
 
 const Overview = () => {
     const [overview, setOverview] = useState<IOverview | null>(null)
+    const [recentUsers, setRecentUsers] = useState<IUser[]>([])
     const [loading, setLoading] = useState(true)
 
     const userChartData = [
@@ -125,6 +142,214 @@ const Overview = () => {
 
     const sessionOSChartConfig = generateChartConfig(osTypeCounts, 2);
 
+    // delete user function
+    const deleteUser = async (email: string) => {
+        try {
+            setLoading(true)
+            await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/user/delete`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    email
+                }),
+            });
+        } catch (error) {
+            console.error('Error during POST request:', error);
+        }
+        setLoading(false)
+    }
+
+    const router = useRouter();
+
+    const columns: ColumnDef<IUser>[] = [
+        {
+            accessorKey: "name",
+            header: "Name",
+            cell: ({ row }) => {
+                const user = row.original;
+                return (
+                    <div className="flex w-44 hover:underline truncate group cursor-pointer items-center" onClick={() => router.push(`/users/${user.uid}`)}>
+                        <div>{user.name}</div>
+                        <div
+                            className="ml-1 underline hidden group-hover:block transition-all duration-300 ease-in-out"
+                        >
+                            <LuArrowUpRight className="ml-1" size={16} />
+                        </div>
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "email",
+            header: "Email",
+        },
+        {
+            accessorKey: "role",
+            header: "Role",
+        },
+        {
+            accessorKey: "email_verified",
+            header: "Email Verification",
+            cell: ({ row }) => {
+                return (
+                    <Badge
+                        className={`${row.original?.email_verified ? "bg-green-500 hover:bg-green-500" : "bg-yellow-500 hover:bg-yellow-500"
+                            } flex gap-1 w-fit rounded`}
+                    >
+                        {row.original?.email_verified ? <TiTick /> : <GoClockFill />}
+
+                        {row.original?.email_verified ? "Verified" : "Pending"}
+                    </Badge>
+                )
+            },
+        },
+        {
+            accessorKey: "is_active",
+            header: "Account Status",
+            cell: ({ row }) => {
+                return (
+                    <Badge
+                        className={`${row.original?.is_active
+                            ? "bg-green-500 hover:bg-green-500"
+                            : "bg-red-500 text-white hover:bg-red-500"
+                            } flex gap-1 w-fit rounded`}
+                    >
+                        {row.original?.is_active ? <TiTick /> : <IoIosWarning />}
+
+                        {row.original?.is_active ? "Active" : "Suspended"}
+                    </Badge>
+                )
+            },
+        },
+        {
+            accessorKey: "created_at",
+            header: "Created At",
+            cell: ({ row }) => {
+                return (
+                    <div className='w-fit'>
+                        {format(
+                            new Date(parseInt(row.original?.created_at.$date.$numberLong!)),
+                            "PP - p"
+                        )}
+                    </div>
+                )
+            },
+        },
+        {
+            accessorKey: "updated_at",
+            header: "Action",
+            cell: ({ row }) => {
+                const user = row.original;
+                const [name, setName] = useState(user.name);
+                const [role, setRole] = useState(user.role)
+                // edit user function
+                const editUser = async (email: string, name: string, role: string) => {
+                    if (name === "" || role === "") {
+                        toast({
+                            title: "Error",
+                            description: "Fill all the fields correctly.",
+                            variant: "destructive"
+                        });
+                        return;
+                    };
+                    try {
+                        setLoading(true)
+                        if (role !== user?.role) {
+                            await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/user/update-role`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify({
+                                    email: user?.email,
+                                    role
+                                }),
+                            });
+                        }
+                        if (name !== user?.name) {
+                            await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/user/update`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                },
+                                body: JSON.stringify({
+                                    email,
+                                    name
+                                }),
+                            });
+                        }
+                        await getRecentUsers()
+                    } catch (error) {
+                        console.error('Error during POST request:', error);
+                    }
+                    setLoading(false)
+                }
+
+                return (
+                    <div>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <IoMdMore size={20} />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuItem asChild className="hover:bg-accent hover:cursor-pointer">
+                                    <AlertDialog>
+                                        <AlertDialogTrigger className="relative flex items-center w-32 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent cursor-pointer">
+                                            Update
+                                        </AlertDialogTrigger>
+                                        <AlertDialogContent>
+                                            <AlertDialogHeader>
+                                                <AlertDialogTitle className='mb-2'>Update User Name</AlertDialogTitle>
+                                                <AlertDialogDescription className='space-y-2'>
+                                                    <h1>Name</h1>
+                                                    <Input type="text" placeholder="Enter Name" value={name} onChange={(e) => setName(e.target.value)} />
+                                                    <h1>Role</h1>
+                                                    <Input type="text" placeholder="Enter Role" value={role} onChange={(e) => setRole(e.target.value)} />
+                                                </AlertDialogDescription>
+                                            </AlertDialogHeader>
+                                            <AlertDialogFooter>
+                                                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                                <Button variant="destructive" onClick={async () => {
+                                                    await editUser(user.email, name, role);
+                                                }}>{loading ? <Loader /> : <h1>Continue</h1>}</Button>
+                                            </AlertDialogFooter>
+                                        </AlertDialogContent>
+                                    </AlertDialog>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem asChild className="hover:bg-accent hover:cursor-pointer">
+                                    <AlertDialog>
+                                        <AlertDialogTrigger className="relative flex items-center w-32 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent cursor-pointer">
+                                            Delete
+                                        </AlertDialogTrigger>
+                                        <AlertDialogContent>
+                                            <AlertDialogHeader>
+                                                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                                                <AlertDialogDescription>
+                                                    This action cannot be undone.
+                                                </AlertDialogDescription>
+                                            </AlertDialogHeader>
+                                            <AlertDialogFooter>
+                                                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                                <Button variant="destructive" onClick={async () => {
+                                                    setLoading(true);
+                                                    await deleteUser(user.email);
+                                                    await getRecentUsers();
+                                                    setLoading(false);
+                                                }}>{loading ? <Loader /> : <h1>Continue</h1>}</Button>
+                                            </AlertDialogFooter>
+                                        </AlertDialogContent>
+                                    </AlertDialog>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                )
+            },
+        },
+    ];
+
 
     const getOverview = async () => {
         try {
@@ -144,8 +369,32 @@ const Overview = () => {
         setLoading(false)
     }
 
+    const getRecentUsers = async () => {
+        try {
+            setLoading(true)
+            const res = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/user/get-recent`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ limit: 5 }),
+                cache: 'no-cache',
+            });
+            const { data } = await res.json();
+            setRecentUsers(data);
+        } catch (error) {
+            console.error('Error during POST request:', error);
+        }
+        setLoading(false)
+    }
+
+    const fetchAllData = async () => {
+        await Promise.all([getOverview(), getRecentUsers()])
+    }
+
     useEffect(() => {
-        getOverview()
+        fetchAllData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     return (
@@ -200,6 +449,13 @@ const Overview = () => {
                                 key='name'
                             />
                         </div>
+                        <div className='mt-5'>
+                            <h1 className='font-bold text-xl my-3'>Recent Users</h1>
+                            <DataTable
+                                data={recentUsers ? recentUsers : []}
+                                columns={columns}
+                            />
+                        </div>
                     </div>
             }
         </div>
diff --git a/ui/components/custom/DonutChartForStats.tsx b/ui/components/custom/DonutChartForStats.tsx
index f0ceabd..176598b 100644
--- a/ui/components/custom/DonutChartForStats.tsx
+++ b/ui/components/custom/DonutChartForStats.tsx
@@ -15,6 +15,7 @@ import {
     ChartTooltip,
     ChartTooltipContent,
 } from "@/components/ui/chart"
+import { FaClock, FaUsersSlash } from "react-icons/fa"
 
 interface DonutChartProps {
     title: string;
@@ -24,7 +25,7 @@ interface DonutChartProps {
 }
 
 export function DonutChartStats({ title, chartData, chartConfig, key }: DonutChartProps) {
-    const totalVisitors = React.useMemo(() => {
+    const totalCount = React.useMemo(() => {
         return chartData.reduce((acc: any, curr: { count: any }) => acc + curr.count, 0)
     }, [chartData])
 
@@ -38,49 +39,56 @@ export function DonutChartStats({ title, chartData, chartConfig, key }: DonutCha
                     config={chartConfig}
                     className="mx-auto aspect-square max-h-[250px]"
                 >
-                    <PieChart>
-                        <ChartTooltip
-                            cursor={false}
-                            content={<ChartTooltipContent />}
-                        />
-                        <Pie
-                            data={chartData}
-                            dataKey="count"
-                            nameKey={key}
-                            innerRadius={60}
-                            strokeWidth={5}
-                        >
-                            <Label
-                                content={({ viewBox }) => {
-                                    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                                        return (
-                                            <text
-                                                x={viewBox.cx}
-                                                y={viewBox.cy}
-                                                textAnchor="middle"
-                                                dominantBaseline="middle"
-                                            >
-                                                <tspan
+                    {totalCount === 0 ?
+                        <CardContent className='flex gap-10 items-end justify-center mt-16'>
+                            <FaClock size={120} className='text-gray-300' />
+                            <p className="text-5xl font-bold mb-4">
+                                {totalCount}
+                            </p>
+                        </CardContent>
+                        : <PieChart>
+                            <ChartTooltip
+                                cursor={false}
+                                content={<ChartTooltipContent />}
+                            />
+                            <Pie
+                                data={chartData}
+                                dataKey="count"
+                                nameKey={key}
+                                innerRadius={60}
+                                strokeWidth={5}
+                            >
+                                <Label
+                                    content={({ viewBox }) => {
+                                        if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                            return (
+                                                <text
                                                     x={viewBox.cx}
                                                     y={viewBox.cy}
-                                                    className="fill-foreground text-3xl font-bold"
-                                                >
-                                                    {totalVisitors.toLocaleString()}
-                                                </tspan>
-                                                <tspan
-                                                    x={viewBox.cx}
-                                                    y={(viewBox.cy || 0) + 24}
-                                                    className="fill-muted-foreground"
+                                                    textAnchor="middle"
+                                                    dominantBaseline="middle"
                                                 >
-                                                    {title}
-                                                </tspan>
-                                            </text>
-                                        )
-                                    }
-                                }}
-                            />
-                        </Pie>
-                    </PieChart>
+                                                    <tspan
+                                                        x={viewBox.cx}
+                                                        y={viewBox.cy}
+                                                        className="fill-foreground text-3xl font-bold"
+                                                    >
+                                                        {totalCount.toLocaleString()}
+                                                    </tspan>
+                                                    <tspan
+                                                        x={viewBox.cx}
+                                                        y={(viewBox.cy || 0) + 24}
+                                                        className="fill-muted-foreground"
+                                                    >
+                                                        {title}
+                                                    </tspan>
+                                                </text>
+                                            )
+                                        }
+                                    }}
+                                />
+                            </Pie>
+                        </PieChart>}
                 </ChartContainer>
             </CardContent>
         </Card>
diff --git a/ui/components/custom/PieChart.tsx b/ui/components/custom/PieChart.tsx
index f81efb4..8bb9337 100644
--- a/ui/components/custom/PieChart.tsx
+++ b/ui/components/custom/PieChart.tsx
@@ -1,19 +1,15 @@
 "use client"
 
 import { Label, Pie, PieChart, Sector } from "recharts"
-
 import {
     Card,
     CardContent,
-    CardDescription,
     CardHeader,
     CardTitle,
 } from "@/components/ui/card"
 import {
     ChartConfig,
     ChartContainer,
-    ChartLegend,
-    ChartLegendContent,
     ChartStyle,
     ChartTooltip,
     ChartTooltipContent,
@@ -31,13 +27,21 @@ interface ChartPieProps {
 }
 
 export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps) {
+    console.log("ChartPie", chartData[0]?.name);
+
     const id = "pie-interactive"
-    const [active, setActive] = React.useState(chartData[0].name)
-    const activeIndex = React.useMemo(
-        () => chartData.findIndex((item: any) => item.name === active),
-        [active, chartData]
-    )
+    const [active, setActive] = React.useState(chartData[0]?.name)
+    console.log("active", active);
+
+    const activeIndex = React.useMemo(() => {
+        const index = (chartData as []).findIndex((item: any) => item.name === active);
+        return index === -1 ? 0 : index;
+    }, [active, chartData]);
+
+    console.log("activeIndex", activeIndex);
+
     const options = React.useMemo(() => chartData.map((item: any) => item.name), [chartData])
+
     return (
         <Card data-chart={id} className="flex flex-col">
             <ChartStyle id={id} config={chartConfig} />
@@ -45,7 +49,7 @@ export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps)
                 <div className="grid gap-1">
                     <CardTitle className="text-xl">{title}</CardTitle>
                 </div>
-                <Select value={active} onValueChange={setActive}>
+                {(chartData as []).length > 0 && <Select value={active} onValueChange={setActive}>
                     <SelectTrigger
                         className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
                         aria-label="Select a value"
@@ -77,7 +81,7 @@ export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps)
                             )
                         })}
                     </SelectContent>
-                </Select>
+                </Select>}
             </CardHeader>
             <CardContent className="flex flex-1 justify-center pb-0">
                 <ChartContainer
@@ -85,7 +89,7 @@ export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps)
                     config={chartConfig}
                     className="mx-auto aspect-square w-full max-h-[250px]"
                 >
-                    <PieChart>
+                    {(chartData as []).length > 0 ? <PieChart>
                         <ChartTooltip
                             cursor={false}
                             content={<ChartTooltipContent hideLabel />}
@@ -141,7 +145,13 @@ export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps)
                                 }}
                             />
                         </Pie>
-                    </PieChart>
+                    </PieChart> :
+                        <CardContent className='flex gap-10 items-end justify-center mt-24'>
+                            <p className="text-xl font-bold mb-4">
+                                No Data to show
+                            </p>
+                        </CardContent>
+                    }
                 </ChartContainer>
             </CardContent>
         </Card>
diff --git a/ui/components/session/SessionTableAll.tsx b/ui/components/session/SessionTableAll.tsx
index 06ecb07..8ea5132 100644
--- a/ui/components/session/SessionTableAll.tsx
+++ b/ui/components/session/SessionTableAll.tsx
@@ -20,14 +20,12 @@ import React, { useCallback, useEffect } from "react";
 import { IoMdMore } from "react-icons/io";
 import { AlertDialogHeader, AlertDialogFooter } from "../ui/alert-dialog";
 import { Button } from "../ui/button";
-import { Card, CardHeader, CardTitle, CardContent } from "../ui/card";
 import { DataTable } from "../ui/data-table";
-import UAParser from "ua-parser-js";
 import { addDays, format } from "date-fns";
 
 const SessionTableAll: React.FC = () => {
     const [loading, setLoading] = React.useState(false);
-    const [sessions, setSessions] = React.useState([]);
+    const [sessions, setSessions] = React.useState<ISession[]>([]);
 
     // fetch all sessions
     const fetchAllSessions = useCallback(async () => {
@@ -97,24 +95,18 @@ const SessionTableAll: React.FC = () => {
         fetchAllSessions();
     }, [fetchAllSessions]);
 
-    const parser = new UAParser("user-agent");
-
     const sessionColumns: ColumnDef<ISession>[] = [
         {
             accessorKey: "user_agent",
             header: "User Agent",
             cell: ({ row }) => {
-                parser.setUA(row.original.user_agent);
-                const result = parser.getResult();
-
-                console.log(result);
-
+                const session = row.original;
                 return (
                     // render device type and browser name with logo
                     <div className="flex gap-2 h-36 items-center">
                         <div className="flex gap-2 items-center">
                             <div>
-                                {result.device.type === "mobile" &&
+                                {session.device === "smartphone" &&
                                     (
                                         <img
                                             src={`/user-agent/devices/phone.svg`}
@@ -122,41 +114,41 @@ const SessionTableAll: React.FC = () => {
                                             className="w-24 h-24"
                                         />
                                     )}
-                                {result.device.type === undefined &&
+                                {session.device === "pc" &&
                                     (
                                         <img
                                             src={`/user-agent/devices/desktop.svg`}
                                             alt="device-logo"
-                                            className="w-32 h-32 text-white"
+                                            className="w-24 h-24 text-white"
                                         />
                                     )}
                             </div>
                             <div className="flex flex-col gap-2">
-                                <p className=" whitespace-nowrap">{result.device?.vendor} - {result.device?.model}</p>
-                                <p className=" whitespace-nowrap">{result.os?.name} - Version: {result.os?.version ? result.os.version : "Unknown"}</p>
+                                <p className=" whitespace-nowrap">{session?.device === "smartphone" ? "Smartphone" : session?.device === "pc" ? "Desktop" : ""} ({session.vendor})</p>
+                                <p className=" whitespace-nowrap">{session?.os} - Version {session.os_version}</p>
                                 <div className=" flex gap-1 items-center">
-                                    {result.browser.name?.includes("Chrome") && (
+                                    {session?.browser.includes("Chrome") && (
                                         <img
                                             src={`/user-agent/browsers/chrome.png`}
                                             alt="browser-logo"
                                             className="w-4 h-4"
                                         />
                                     )}
-                                    {result.browser.name?.includes("Mozilla") && (
+                                    {session?.browser.includes("Mozilla") && (
                                         <img
                                             src={`/user-agent/browsers/mozilla.png`}
                                             alt="browser-logo"
                                             className="w-4 h-4"
                                         />
                                     )}
-                                    {result.browser.name?.includes("Safari") && (
+                                    {session?.browser.includes("Safari") && (
                                         <img
                                             src={`/user-agent/browsers/safari.png`}
                                             alt="browser-logo"
                                             className="w-4 h-4"
                                         />
                                     )}
-                                    <p className=" whitespace-nowrap">{result.browser?.name} - Version: {result.browser?.version}</p>
+                                    <p className=" whitespace-nowrap">{session?.browser} - Version: {session?.browser_version}</p>
                                 </div>
                             </div>
                         </div>
diff --git a/ui/components/session/SessionTableUser.tsx b/ui/components/session/SessionTableUser.tsx
index f5b99b5..b0a0f28 100644
--- a/ui/components/session/SessionTableUser.tsx
+++ b/ui/components/session/SessionTableUser.tsx
@@ -157,17 +157,14 @@ const SessionTable: React.FC<SessionTableProps> = ({ userID }) => {
             accessorKey: "user_agent",
             header: "User Agent",
             cell: ({ row }) => {
-                parser.setUA(row.original.user_agent);
-                const result = parser.getResult();
-
-                console.log(result);
+                const session = row.original;
 
                 return (
                     // render device type and browser name with logo
                     <div className="flex gap-2 h-36 items-center">
                         <div className="flex gap-2 items-center">
                             <div>
-                                {result.device.type === "mobile" &&
+                                {session.device === "smartphone" &&
                                     (
                                         <img
                                             src={`/user-agent/devices/phone.svg`}
@@ -175,41 +172,41 @@ const SessionTable: React.FC<SessionTableProps> = ({ userID }) => {
                                             className="w-24 h-24"
                                         />
                                     )}
-                                {result.device.type === undefined &&
+                                {session.device === "pc" &&
                                     (
                                         <img
                                             src={`/user-agent/devices/desktop.svg`}
                                             alt="device-logo"
-                                            className="w-32 h-32 text-white"
+                                            className="w-24 h-24 text-white"
                                         />
                                     )}
                             </div>
                             <div className="flex flex-col gap-2">
-                                <p className=" whitespace-nowrap">{result.device?.vendor} - {result.device?.model}</p>
-                                <p className=" whitespace-nowrap">{result.os?.name} - Version: {result.os?.version ? result.os.version : "Unknown"}</p>
+                                <p className=" whitespace-nowrap">{session?.device === "smartphone" ? "Smartphone" : session?.device === "pc" ? "Desktop" : ""} ({session.vendor})</p>
+                                <p className=" whitespace-nowrap">{session?.os} - Version {session.os_version}</p>
                                 <div className=" flex gap-1 items-center">
-                                    {result.browser.name?.includes("Chrome") && (
+                                    {session?.browser.includes("Chrome") && (
                                         <img
                                             src={`/user-agent/browsers/chrome.png`}
                                             alt="browser-logo"
                                             className="w-4 h-4"
                                         />
                                     )}
-                                    {result.browser.name?.includes("Mozilla") && (
+                                    {session?.browser.includes("Mozilla") && (
                                         <img
                                             src={`/user-agent/browsers/mozilla.png`}
                                             alt="browser-logo"
                                             className="w-4 h-4"
                                         />
                                     )}
-                                    {result.browser.name?.includes("Safari") && (
+                                    {session?.browser.includes("Safari") && (
                                         <img
                                             src={`/user-agent/browsers/safari.png`}
                                             alt="browser-logo"
                                             className="w-4 h-4"
                                         />
                                     )}
-                                    <p className=" whitespace-nowrap">{result.browser?.name} - Version: {result.browser?.version}</p>
+                                    <p className=" whitespace-nowrap">{session?.browser} - Version: {session?.browser_version}</p>
                                 </div>
                             </div>
                         </div>
diff --git a/ui/components/shared/Navbar.tsx b/ui/components/shared/Navbar.tsx
index 6fca5d7..d3ebdf8 100644
--- a/ui/components/shared/Navbar.tsx
+++ b/ui/components/shared/Navbar.tsx
@@ -38,7 +38,7 @@ const Navbar = () => {
     }
 
     return (
-        <div className="flex justify-between pr-5 items-center h-20 border-b fixed w-screen top-0 z-50">
+        <div className="flex justify-between pr-5 items-center h-20 border-b fixed w-screen top-0 z-50 bg-background">
             <div className="flex items-center h-28">
                 <div className="p-3 w-56 border-r h-full items-center flex gap-2">
                     <img
diff --git a/ui/components/shared/Sidebar/SidebarItem.tsx b/ui/components/shared/Sidebar/SidebarItem.tsx
index b1ae762..7b03fa0 100644
--- a/ui/components/shared/Sidebar/SidebarItem.tsx
+++ b/ui/components/shared/Sidebar/SidebarItem.tsx
@@ -17,6 +17,9 @@ const SidebarItem: React.FC<Props> = ({ item, path, router }) => {
         if (path.includes("/user/")) {
             return (item.link === "/user")
         }
+        if (path.includes("/users/")) {
+            return (item.link === "/users")
+        }
         return (path === item.link);
     }
 
diff --git a/ui/interfaces/ISession.ts b/ui/interfaces/ISession.ts
index 55903cb..f1556de 100644
--- a/ui/interfaces/ISession.ts
+++ b/ui/interfaces/ISession.ts
@@ -3,6 +3,12 @@ export interface ISession {
     email: string;
     uid: string;
     user_agent: string;
+    os: string;
+    device: string;
+    browser: string;
+    browser_version: string;
+    os_version: String,
+    vendor: String,
     is_revoked: boolean;
     created_at: DateRecord;
     updated_at: DateRecord;

From a36b11f23e9d22800cf1607ec0fe1da913cb750b Mon Sep 17 00:00:00 2001
From: Debajyoti14 <debajyotisaha14@gmail.com>
Date: Fri, 26 Jul 2024 16:09:40 +0530
Subject: [PATCH 4/4] Fixed UI Issues in Dashboard

---
 ui/app/layout.tsx                   |  2 +-
 ui/components/Overview/Overview.tsx | 10 +++++++---
 ui/components/custom/PieChart.tsx   | 14 ++++----------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
index f9482b3..96536cb 100644
--- a/ui/app/layout.tsx
+++ b/ui/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
           <TooltipProvider>
             <main className="w-screen">
               <Navbar />
-              <div className="flex items-start h-[calc(100vh-4rem)]">
+              <div className="flex items-start min-h-[calc(100vh-4rem)]">
                 <Sidebar items={AppPages} />
                 <div className="p-4 ml-56 min-h-[calc(100vh-5rem)] w-[calc(100vw-14rem)] mt-20">
                   {children}
diff --git a/ui/components/Overview/Overview.tsx b/ui/components/Overview/Overview.tsx
index 1240898..ce83078 100644
--- a/ui/components/Overview/Overview.tsx
+++ b/ui/components/Overview/Overview.tsx
@@ -77,7 +77,8 @@ const Overview = () => {
     const deviceCounts: CountObject = (overview ?? {
         device_types: [],
     }).device_types.reduce((acc, device) => {
-        acc[device] = (acc[device] || 0) + 1;
+        const sanitizedKey = device.replace(/\s+/g, ''); // Remove whitespace from the key
+        acc[sanitizedKey] = (acc[sanitizedKey] || 0) + 1;
         return acc;
     }, {} as CountObject);
 
@@ -85,7 +86,8 @@ const Overview = () => {
     const browserCounts: CountObject = (overview ?? {
         browser_types: [],
     }).browser_types.reduce((acc, browser) => {
-        acc[browser] = (acc[browser] || 0) + 1;
+        const sanitizedKey = browser.replace(/\s+/g, ''); // Remove whitespace from the key
+        acc[sanitizedKey] = (acc[sanitizedKey] || 0) + 1;
         return acc;
     }, {} as CountObject);
 
@@ -93,10 +95,12 @@ const Overview = () => {
     const osTypeCounts: CountObject = (overview ?? {
         os_types: [],
     }).os_types.reduce((acc, os) => {
-        acc[os] = (acc[os] || 0) + 1;
+        const sanitizedKey = os.replace(/\s+/g, ''); // Remove whitespace from the key
+        acc[sanitizedKey] = (acc[sanitizedKey] || 0) + 1;
         return acc;
     }, {} as CountObject);
 
+
     // Define a function to generate colors dynamically
     const generateColor = (index: number, themeNo: number) => {
         return `hsl(var(--chart-${index + 1}-${themeNo}))`;
diff --git a/ui/components/custom/PieChart.tsx b/ui/components/custom/PieChart.tsx
index 8bb9337..3dd4b9f 100644
--- a/ui/components/custom/PieChart.tsx
+++ b/ui/components/custom/PieChart.tsx
@@ -6,17 +6,17 @@ import {
     CardContent,
     CardHeader,
     CardTitle,
-} from "@/components/ui/card"
+} from "../ui/card"
 import {
     ChartConfig,
     ChartContainer,
     ChartStyle,
     ChartTooltip,
     ChartTooltipContent,
-} from "@/components/ui/chart"
+} from "../ui/chart"
 import React from "react";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { PieSectorDataItem } from "recharts/types/polar/Pie";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 
 interface ChartPieProps {
@@ -27,19 +27,13 @@ interface ChartPieProps {
 }
 
 export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps) {
-    console.log("ChartPie", chartData[0]?.name);
-
     const id = "pie-interactive"
     const [active, setActive] = React.useState(chartData[0]?.name)
-    console.log("active", active);
-
     const activeIndex = React.useMemo(() => {
         const index = (chartData as []).findIndex((item: any) => item.name === active);
         return index === -1 ? 0 : index;
     }, [active, chartData]);
 
-    console.log("activeIndex", activeIndex);
-
     const options = React.useMemo(() => chartData.map((item: any) => item.name), [chartData])
 
     return (
@@ -72,7 +66,7 @@ export function ChartPie({ title, chartData, chartConfig, key }: ChartPieProps)
                                         <span
                                             className="flex h-3 w-3 shrink-0 rounded-sm"
                                             style={{
-                                                backgroundColor: `var(--color-${key})`,
+                                                backgroundColor: config ? chartConfig[key as keyof typeof chartConfig].color : undefined,
                                             }}
                                         />
                                         {config?.label}