refactor(times): added a better view for times as we save all db as there respective timezone

frontend/src/lib/umami.utils.ts

@@ -5,6 +5,7 @@ type RuntimeConfig = {
 	appVersion: string;
 	umamiHost: string;
 	umamiWebsiteId: string;
+	timezone: string;
 };
 
 declare global {
@@ -23,6 +24,7 @@ export const runtimeConfig: RuntimeConfig = {
 	appVersion: window.LST_CONFIG?.appVersion ?? "dev",
 	umamiHost: window.LST_CONFIG?.umamiHost ?? "",
 	umamiWebsiteId: window.LST_CONFIG?.umamiWebsiteId ?? "",
+	timezone: window.LST_CONFIG?.timezone ?? "America/Chicago",
 };
 
 export function loadUmami() {

frontend/src/routes/admin/logs.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { createColumnHelper } from "@tanstack/react-table";
-import { format } from "date-fns-tz";
+import { formatInTimeZone } from "date-fns-tz";
 import { useSocketRoom } from "@/hooks/socket.io.hook";
 import { authClient } from "@/lib/auth-client";
 import { Badge } from "../../components/ui/badge";
@@ -73,11 +73,17 @@ function LevelBadge({ level }: { level: string }) {
 function RouteComponent() {
 	const { data: logs } = useSocketRoom<LogEntry>("logs");
 	const columnHelper = createColumnHelper<any>();
+
 	const column = [
 		columnHelper.accessor("createdAt", {
 			header: ({ column }) => <SearchableHeader column={column} title="Time" />,
 			filterFn: "includesString",
-			cell: (i) => format(i.getValue(), "MM/dd/yyyy HH:mm:ss"),
+			cell: (i) =>
+				formatInTimeZone(
+					i.getValue(),
+					`${window.LST_CONFIG?.timezone}`,
+					"MM/dd/yyyy HH:mm:ss",
+				),
 		}),
 		columnHelper.accessor("level", {
 			header: ({ column }) => (
@@ -112,7 +118,20 @@ function RouteComponent() {
 				<SearchableHeader column={column} title="Message" />
 			),
 			filterFn: "includesString",
-			cell: (i) => i.getValue(),
+			cell: (i) => {
+				return i.getValue().length > 50 ? (
+					<Tooltip>
+						<TooltipTrigger>
+							<p>{i.getValue().slice(0, 50)}...</p>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p className="text-wrap max-w-48">{i.getValue()}</p>
+						</TooltipContent>
+					</Tooltip>
+				) : (
+					i.getValue()
+				);
+			},
 		}),
 		columnHelper.accessor("stack", {
 			header: ({ column }) => (
@@ -126,12 +145,9 @@ function RouteComponent() {
 				return (
 					<Tooltip>
 						<TooltipTrigger>
-							<button
-								type="button"
-								className="max-w-[350px] truncate text-left font-mono text-xs text-muted-foreground hover:text-foreground"
-							>
+							<p className="max-w-[350px] truncate text-left font-mono text-xs text-muted-foreground hover:text-foreground">
 								{stack.length !== 0 ? "Hover to see stack error" : "-"}
-							</button>
+							</p>
 						</TooltipTrigger>
 						<TooltipContent
 							side="left"