From e9649b4f0b39638a0a833327ff11665089b8517f Mon Sep 17 00:00:00 2001 From: Adam Jolicoeur Date: Thu, 5 Mar 2026 15:17:49 -0500 Subject: [PATCH] fix: improve mobile rendering --- dev-dist/sw.js | 2 +- src/components/ArchiveEditDialog.tsx | 12 ++-- src/components/ArchiveFilter.tsx | 18 +++--- src/components/ArchiveItem.tsx | 8 +-- src/components/Navigation.tsx | 14 +++-- src/components/ui/badge.tsx | 43 ++++++++----- src/components/ui/card.tsx | 52 +++++++++------- src/pages/Archive.tsx | 93 +++++++++++++++++++++------- 8 files changed, 152 insertions(+), 90 deletions(-) diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 5d7361f..526657f 100644 --- a/dev-dist/sw.js +++ b/dev-dist/sw.js @@ -79,7 +79,7 @@ define(['./workbox-21a80088'], (function (workbox) { 'use strict'; */ workbox.precacheAndRoute([{ "url": "index.html", - "revision": "0.14orerfhgvg" + "revision": "0.iqaev82ti8g" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { diff --git a/src/components/ArchiveEditDialog.tsx b/src/components/ArchiveEditDialog.tsx index a5422a9..2108b6e 100644 --- a/src/components/ArchiveEditDialog.tsx +++ b/src/components/ArchiveEditDialog.tsx @@ -273,24 +273,24 @@ export const ArchiveEditDialog: React.FC = ({ size="sm" className="text-blue-600 hover:text-blue-700" > - - Restore + + Restore ) : ( diff --git a/src/components/ArchiveFilter.tsx b/src/components/ArchiveFilter.tsx index eecab45..0f304db 100644 --- a/src/components/ArchiveFilter.tsx +++ b/src/components/ArchiveFilter.tsx @@ -54,7 +54,7 @@ export const ArchiveFilter: React.FC = ({ return ( - +
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 56c2c5f..8f1e48b 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -12,7 +12,7 @@ import { ProjectManagement } from '@/components/ProjectManagement'; import { UserMenu } from '@/components/UserMenu'; import { AuthDialog } from '@/components/AuthDialog'; import { Link } from 'react-router-dom'; -import { CogIcon, Printer, Database, CalendarClock } from 'lucide-react'; +import { CogIcon, Printer, CalendarClock } from 'lucide-react'; import { NavLink } from 'react-router-dom'; import { formatDuration } from '@/utils/timeUtil'; import { SyncStatus } from '@/components/SyncStatus'; @@ -36,7 +36,7 @@ const SiteNavigationMenu = () => { isSyncing, lastSyncTime, hasUnsavedChanges, - forceSyncToDatabase, // Use manual sync instead of refresh + forceSyncToDatabase // Use manual sync instead of refresh } = useTimeTracking(); const runningTime = isDayStarted ? getTotalDayDuration() : 0; @@ -51,7 +51,11 @@ const SiteNavigationMenu = () => { to="/" className="flex items-center text-gray-900 hover:text-blue-700" > - Logo + Logo TimeTracker @@ -102,9 +106,7 @@ const SiteNavigationMenu = () => {
- +
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 7953f2e..67354e9 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,37 +1,46 @@ -import * as React from "react" -import { cva, type VariantProps } from "class-variance-authority" - -import { cn } from "@/lib/util" +import * as React from 'react'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/lib/util'; const badgeVariants = cva( - "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { default: - "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', secondary: - "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', destructive: - "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", - outline: "text-foreground", + 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', + outline: 'text-foreground' }, + color: { + indigo: 'border-indigo-500 bg-indigo-100 text-black-800', + green: 'border-green-500 bg-green-100 text-black-800', + gray: 'border-gray-500 bg-gray-100 text-black-800', + purple: 'border-purple-500 bg-purple-100 text-black-800' + } }, defaultVariants: { - variant: "default", - }, + variant: 'default' + } } -) +); export interface BadgeProps - extends React.HTMLAttributes, + extends + Omit, 'color'>, VariantProps {} -function Badge({ className, variant, ...props }: BadgeProps) { +function Badge({ className, variant, color, ...props }: BadgeProps) { return ( -
- ) +
+ ); } -export { Badge, badgeVariants } +export { Badge, badgeVariants }; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index fcfcaca..277554c 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,9 +1,6 @@ -import * as React from "react" - -import { cn } from "@/lib/util" - - +import * as React from 'react'; +import { cn } from '@/lib/util'; const Card = React.forwardRef< HTMLDivElement, @@ -12,13 +9,13 @@ const Card = React.forwardRef<
-)) -Card.displayName = "Card" +)); +Card.displayName = 'Card'; const CardHeader = React.forwardRef< HTMLDivElement, @@ -26,11 +23,11 @@ const CardHeader = React.forwardRef< >(({ className, ...props }, ref) => (
-)) -CardHeader.displayName = "CardHeader" +)); +CardHeader.displayName = 'CardHeader'; const CardTitle = React.forwardRef< HTMLParagraphElement, @@ -39,13 +36,13 @@ const CardTitle = React.forwardRef<

-)) -CardTitle.displayName = "CardTitle" +)); +CardTitle.displayName = 'CardTitle'; const CardDescription = React.forwardRef< HTMLParagraphElement, @@ -53,19 +50,19 @@ const CardDescription = React.forwardRef< >(({ className, ...props }, ref) => (

-)) -CardDescription.displayName = "CardDescription" +)); +CardDescription.displayName = 'CardDescription'; const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -

-)) -CardContent.displayName = "CardContent" +
+)); +CardContent.displayName = 'CardContent'; const CardFooter = React.forwardRef< HTMLDivElement, @@ -73,10 +70,17 @@ const CardFooter = React.forwardRef< >(({ className, ...props }, ref) => (
-)) -CardFooter.displayName = "CardFooter" +)); +CardFooter.displayName = 'CardFooter'; -export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent +}; diff --git a/src/pages/Archive.tsx b/src/pages/Archive.tsx index b475d89..a98472c 100644 --- a/src/pages/Archive.tsx +++ b/src/pages/Archive.tsx @@ -11,6 +11,8 @@ import { ProjectManagement } from '@/components/ProjectManagement'; import { ArchiveFilter, ArchiveFilterState } from '@/components/ArchiveFilter'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardTitle } from '@/components/ui/card'; +import { Flex } from '@radix-ui/themes'; +import { Badge } from '@/components/ui/badge'; import { Archive as ArchiveIcon, Database } from 'lucide-react'; import { Link } from 'react-router-dom'; import { useAuth } from '@/hooks/useAuth'; @@ -30,10 +32,10 @@ const ArchiveContent: React.FC = () => { const [showExportDialog, setShowExportDialog] = useState(false); const [showProjectManagement, setShowProjectManagement] = useState(false); const [filters, setFilters] = useState({ - startDate: "", - endDate: "", - project: "", - category: "" + startDate: '', + endDate: '', + project: '', + category: '' }); // Filter and sort archived days @@ -76,15 +78,28 @@ const ArchiveContent: React.FC = () => { // Sort from newest to oldest return filtered.sort( - (a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime() + (a, b) => + new Date(b.startTime).getTime() - new Date(a.startTime).getTime() ); }, [archivedDays, filters]); // Calculate summary stats based on filtered days - const totalHoursWorked = filteredDays.reduce((sum, day) => sum + getHoursWorkedForDay(day), 0); - const totalBillableHours = filteredDays.reduce((sum, day) => sum + getBillableHoursForDay(day), 0); - const totalNonBillableHours = filteredDays.reduce((sum, day) => sum + getNonBillableHoursForDay(day), 0); - const totalRevenue = filteredDays.reduce((sum, day) => sum + getRevenueForDay(day), 0); + const totalHoursWorked = filteredDays.reduce( + (sum, day) => sum + getHoursWorkedForDay(day), + 0 + ); + const totalBillableHours = filteredDays.reduce( + (sum, day) => sum + getBillableHoursForDay(day), + 0 + ); + const totalNonBillableHours = filteredDays.reduce( + (sum, day) => sum + getNonBillableHoursForDay(day), + 0 + ); + const totalRevenue = filteredDays.reduce( + (sum, day) => sum + getRevenueForDay(day), + 0 + ); const handleEdit = (day: DayRecord) => { setEditingDay(day); @@ -104,7 +119,7 @@ const ArchiveContent: React.FC = () => {

- + Archive {isAuthenticated && user?.email && ( <> @@ -129,7 +144,7 @@ const ArchiveContent: React.FC = () => { ) : ( -
+
{/* Filter Component */} {

No archived days match your filter criteria.

- @@ -154,15 +178,29 @@ const ArchiveContent: React.FC = () => { ) : ( <> {/* Summary Stats */} -
+
+ + + {filteredDays.length} days + + + {totalBillableHours.toFixed(1)}h billable + + + {totalNonBillableHours.toFixed(1)}h non-billable + + + ${totalRevenue.toFixed(2)} revenue + + +
+
{filteredDays.length}
-
- Days Shown -
+
Days Shown
 @@ -170,7 +208,9 @@ const ArchiveContent: React.FC = () => {
{totalBillableHours.toFixed(1)}h
-
Billable Hours
+
+ Billable Hours +
@@ -178,7 +218,9 @@ const ArchiveContent: React.FC = () => {
{totalNonBillableHours.toFixed(1)}h
-
Non-billable Hours
+
+ Non-billable Hours +
{totalHoursWorked.toFixed(1)}h total work
@@ -195,16 +237,21 @@ const ArchiveContent: React.FC = () => {
- ${totalBillableHours > 0 ? (totalRevenue / totalBillableHours).toFixed(2) : '0.00'} + $ + {totalBillableHours > 0 + ? (totalRevenue / totalBillableHours).toFixed(2) + : '0.00'} +
+
+ Avg Billable Rate
-
Avg Billable Rate
{/* Archived Days */}
- {filteredDays.map((day) => ( + {filteredDays.map(day => ( ))}
@@ -237,9 +284,7 @@ const ArchiveContent: React.FC = () => { }; const Archive: React.FC = () => { - return ( - - ); + return ; }; export default Archive;