Merge pull request #20 from Solar-Gators/az/time-display

refactor: fixed derived values time display and date selector

Author: Hqllow

components/pages/StatsGraphTab.tsx

@@ -753,14 +753,17 @@ export default function StatsGraphTab() {
           <div className="flex flex-col gap-3">
             <Input
               type="time"
-              id="time-picker"
+              id="time-picker-start"
               step="1"
               defaultValue="01:00:00"
-              onChange={(time) => {
-                startDate?.setHours(parseInt(time.target.value.split(":")[0]));
-                startDate?.setMinutes(
-                  parseInt(time.target.value.split(":")[1]),
-                );
+              onChange={(e) => {
+                if (startDate) {
+                  const newDate = new Date(startDate);
+                  const [hours, minutes] = e.target.value.split(":");
+                  newDate.setHours(parseInt(hours));
+                  newDate.setMinutes(parseInt(minutes));
+                  setStartDate(newDate);
+                }
               }}
               className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
             />
@@ -798,9 +801,18 @@ export default function StatsGraphTab() {
           <div className="flex flex-col gap-3">
             <Input
               type="time"
-              id="time-picker"
+              id="time-picker-end"
               step="1"
               defaultValue="01:00:00"
+              onChange={(e) => {
+                if (endDate) {
+                  const newDate = new Date(endDate);
+                  const [hours, minutes] = e.target.value.split(":");
+                  newDate.setHours(parseInt(hours));
+                  newDate.setMinutes(parseInt(minutes));
+                  setEndDate(newDate);
+                }
+              }}
               className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
             />
           </div>

components/ui/badge.tsx

@@ -24,7 +24,8 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {

components/ui/button.tsx

@@ -34,7 +34,8 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }

components/ui/sheet.tsx

@@ -50,7 +50,8 @@ const sheetVariants = cva(
 );
 
 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<

lib/db-utils.ts

@@ -172,7 +172,10 @@ export async function fetchTelemetryDataInRange(
         }
       }
 
-      return mapTelemetryData<number>(transformedRow);
+      return {
+        ...mapTelemetryData<number>(transformedRow),
+        created_at: transformedRow.created_at,
+      };
     });
   } catch (error) {
     console.error("Error fetching telemetry data in range:", error);