simonfranken/timetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
simon.franken
2026-02-18 10:26:15 +01:00
parent 27ec450d3b
commit 6a6a3ba00b
18 changed files with 386 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/pages/ClientsPage.tsx
View File

@@ -1,6 +1,8 @@
import { useState } from 'react';
import { Plus, Edit2, Trash2, Building2 } from 'lucide-react';
import { useClients } from '@/hooks/useClients';
import { Modal } from '@/components/Modal';
import { Spinner } from '@/components/Spinner';
import type { Client, CreateClientInput, UpdateClientInput } from '@/types';
export function ClientsPage() {
@@ -66,11 +68,7 @@ export function ClientsPage() {
};
if (isLoading) {
return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
</div>
);
return <Spinner />;
}
return (
@@ -145,67 +143,62 @@ export function ClientsPage() {
{/* Modal */}
{isModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full">
<div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900">
{editingClient ? 'Edit Client' : 'Add Client'}
</h2>
<Modal
title={editingClient ? 'Edit Client' : 'Add Client'}
onClose={handleCloseModal}
>
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">
{error}
</div>
)}
<div>
<label className="label">Client Name</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="input"
placeholder="Enter client name"
autoFocus
/>
</div>
<form onSubmit={handleSubmit} className="p-6 space-y-4">
{error && (
<div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">
{error}
</div>
)}
<div>
<label className="label">Description (Optional)</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
className="input"
rows={3}
placeholder="Enter description"
/>
</div>
<div>
<label className="label">Client Name</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="input"
placeholder="Enter client name"
autoFocus
/>
</div>
<div>
<label className="label">Description (Optional)</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
className="input"
rows={3}
placeholder="Enter description"
/>
</div>
<div className="flex justify-end space-x-3 pt-4">
<button
type="button"
onClick={handleCloseModal}
className="btn-secondary"
>
Cancel
</button>
<button
type="submit"
className="btn-primary"
disabled={createClient.isPending || updateClient.isPending}
>
{createClient.isPending || updateClient.isPending
? 'Saving...'
: editingClient
? 'Save Changes'
: 'Add Client'}
</button>
</div>
</form>
</div>
</div>
<div className="flex justify-end space-x-3 pt-4">
<button
type="button"
onClick={handleCloseModal}
className="btn-secondary"
>
Cancel
</button>
<button
type="submit"
className="btn-primary"
disabled={createClient.isPending || updateClient.isPending}
>
{createClient.isPending || updateClient.isPending
? 'Saving...'
: editingClient
? 'Save Changes'
: 'Add Client'}
</button>
</div>
</form>
</Modal>
)}
</div>
);

48
frontend/src/pages/DashboardPage.tsx
View File

@@ -1,10 +1,13 @@
import { Link } from "react-router-dom";
import { Clock, Calendar, Briefcase, TrendingUp } from "lucide-react";
import { useTimeEntries } from "@/hooks/useTimeEntries";
import { ProjectColorDot } from "@/components/ProjectColorDot";
import { StatCard } from "@/components/StatCard";
import {
formatDate,
formatDurationFromDates,
formatDurationHoursMinutes,
calculateDuration,
} from "@/utils/dateUtils";
import { startOfDay, endOfDay } from "date-fns";
@@ -106,13 +109,8 @@ export function DashboardPage() {
<tr key={entry.id}>
<td className="px-4 py-3 whitespace-nowrap">
<div className="flex items-center">
<div
className="w-3 h-3 rounded-full mr-2"
style={{
backgroundColor: entry.project.color || "#6b7280",
}}
/>
<div>
<ProjectColorDot color={entry.project.color} />
<div className="ml-2">
<div className="text-sm font-medium text-gray-900">
{entry.project.name}
</div>
@@ -138,39 +136,3 @@ export function DashboardPage() {
</div>
);
}
interface StatCardProps {
icon: React.ElementType;
label: string;
value: string;
color: "blue" | "green" | "purple" | "orange";
}
function StatCard({ icon: Icon, label, value, color }: StatCardProps) {
const colors = {
blue: "bg-blue-50 text-blue-600",
green: "bg-green-50 text-green-600",
purple: "bg-purple-50 text-purple-600",
orange: "bg-orange-50 text-orange-600",
};
return (
<div className="card p-4">
<div className="flex items-center">
<div className={`p-3 rounded-lg ${colors[color]}`}>
<Icon className="h-6 w-6" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">{label}</p>
<p className="text-2xl font-bold text-gray-900">{value}</p>
</div>
</div>
</div>
);
}
function calculateDuration(startTime: string, endTime: string): number {
return Math.floor(
(new Date(endTime).getTime() - new Date(startTime).getTime()) / 1000,
);
}

91
frontend/src/pages/ProjectsPage.tsx
View File

@@ -2,6 +2,9 @@ import { useState } from 'react';
import { Plus, Edit2, Trash2, FolderOpen } from 'lucide-react';
import { useProjects } from '@/hooks/useProjects';
import { useClients } from '@/hooks/useClients';
import { Modal } from '@/components/Modal';
import { Spinner } from '@/components/Spinner';
import { ProjectColorDot } from '@/components/ProjectColorDot';
import type { Project, CreateProjectInput, UpdateProjectInput } from '@/types';
const PRESET_COLORS = [
@@ -97,11 +100,7 @@ export function ProjectsPage() {
};
if (isLoading) {
return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
</div>
);
return <Spinner />;
}
if (!clients?.length) {
@@ -134,7 +133,7 @@ export function ProjectsPage() {
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-2">
<div className="w-4 h-4 rounded-full" style={{ backgroundColor: project.color || '#6b7280' }} />
<ProjectColorDot color={project.color} size="w-4 h-4" />
<h3 className="font-medium text-gray-900 truncate">{project.name}</h3>
</div>
<p className="mt-1 text-sm text-gray-500">{project.client.name}</p>
@@ -153,42 +152,52 @@ export function ProjectsPage() {
</div>
{isModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<h2 className="text-lg font-semibold mb-4">{editingProject ? 'Edit Project' : 'Add Project'}</h2>
{error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="label">Project Name</label>
<input type="text" value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="input" />
<Modal
title={editingProject ? 'Edit Project' : 'Add Project'}
onClose={handleCloseModal}
>
{error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="label">Project Name</label>
<input type="text" value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="input" />
</div>
<div>
<label className="label">Client</label>
<select value={formData.clientId} onChange={(e) => setFormData({ ...formData, clientId: e.target.value })} className="input">
{clients?.map((client) => (
<option key={client.id} value={client.id}>{client.name}</option>
))}
</select>
</div>
<div>
<label className="label">Color</label>
<div className="flex flex-wrap gap-2">
{PRESET_COLORS.map((color) => (
<button key={color} type="button" onClick={() => setFormData({ ...formData, color })} className={`w-8 h-8 rounded-full ${formData.color === color ? 'ring-2 ring-offset-2 ring-gray-400' : ''}`} style={{ backgroundColor: color }} />
))}
</div>
<div>
<label className="label">Client</label>
<select value={formData.clientId} onChange={(e) => setFormData({ ...formData, clientId: e.target.value })} className="input">
{clients?.map((client) => (
<option key={client.id} value={client.id}>{client.name}</option>
))}
</select>
</div>
<div>
<label className="label">Color</label>
<div className="flex flex-wrap gap-2">
{PRESET_COLORS.map((color) => (
<button key={color} type="button" onClick={() => setFormData({ ...formData, color })} className={`w-8 h-8 rounded-full ${formData.color === color ? 'ring-2 ring-offset-2 ring-gray-400' : ''}`} style={{ backgroundColor: color }} />
))}
</div>
</div>
<div>
<label className="label">Description</label>
<textarea value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} className="input" rows={2} />
</div>
<div className="flex justify-end space-x-3 pt-2">
<button type="button" onClick={handleCloseModal} className="btn-secondary">Cancel</button>
<button type="submit" className="btn-primary">{editingProject ? 'Save' : 'Create'}</button>
</div>
</form>
</div>
</div>
</div>
<div>
<label className="label">Description</label>
<textarea value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} className="input" rows={2} />
</div>
<div className="flex justify-end space-x-3 pt-2">
<button type="button" onClick={handleCloseModal} className="btn-secondary">Cancel</button>
<button
type="submit"
className="btn-primary"
disabled={createProject.isPending || updateProject.isPending}
>
{createProject.isPending || updateProject.isPending
? 'Saving...'
: editingProject
? 'Save'
: 'Create'}
</button>
</div>
</form>
</Modal>
)}
</div>
);

16
frontend/src/pages/StatisticsPage.tsx
View File

@@ -9,7 +9,8 @@ import {
import { useStatistics } from "@/hooks/useTimeEntries";
import { useClients } from "@/hooks/useClients";
import { useProjects } from "@/hooks/useProjects";
import { formatDuration } from "@/utils/dateUtils";
import { ProjectColorDot } from "@/components/ProjectColorDot";
import { formatDuration, toISOTimezone } from "@/utils/dateUtils";
import type { StatisticsFilters } from "@/types";
export function StatisticsPage() {
@@ -64,7 +65,7 @@ export function StatisticsPage() {
onChange={(e) =>
handleFilterChange(
"startDate",
e.target.value ? `${e.target.value}T00:00:00` : undefined,
e.target.value ? toISOTimezone(`${e.target.value}T00:00:00`) : undefined,
)
}
className="input"
@@ -84,7 +85,7 @@ export function StatisticsPage() {
onChange={(e) =>
handleFilterChange(
"endDate",
e.target.value ? `${e.target.value}T23:59:59` : undefined,
e.target.value ? toISOTimezone(`${e.target.value}T23:59:59`) : undefined,
)
}
className="input"
@@ -192,13 +193,8 @@ export function StatisticsPage() {
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
>
<div className="flex items-center gap-3">
<div
className="w-3 h-3 rounded-full"
style={{
backgroundColor: project.projectColor || "#6b7280",
}}
/>
<span className="font-medium text-gray-900">
<ProjectColorDot color={project.projectColor} />
<span className="font-medium text-gray-900">
{project.projectName}
</span>
<span className="text-sm text-gray-500">

75
frontend/src/pages/TimeEntriesPage.tsx
View File

@@ -2,6 +2,9 @@ import { useState } from 'react';
import { Plus, Edit2, Trash2 } from 'lucide-react';
import { useTimeEntries } from '@/hooks/useTimeEntries';
import { useProjects } from '@/hooks/useProjects';
import { Modal } from '@/components/Modal';
import { Spinner } from '@/components/Spinner';
import { ProjectColorDot } from '@/components/ProjectColorDot';
import { formatDate, formatDurationFromDates, getLocalISOString, toISOTimezone } from '@/utils/dateUtils';
import type { TimeEntry, CreateTimeEntryInput, UpdateTimeEntryInput } from '@/types';
@@ -86,7 +89,7 @@ export function TimeEntriesPage() {
};
if (isLoading) {
return <div className="flex justify-center h-64 items-center"><div className="animate-spin h-12 w-12 border-b-2 border-primary-600 rounded-full"></div></div>;
return <Spinner />;
}
return (
@@ -117,8 +120,8 @@ export function TimeEntriesPage() {
<td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{formatDate(entry.startTime)}</td>
<td className="px-4 py-3 whitespace-nowrap">
<div className="flex items-center">
<div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: entry.project.color || '#6b7280' }} />
<div>
<ProjectColorDot color={entry.project.color} />
<div className="ml-2">
<div className="text-sm font-medium text-gray-900">{entry.project.name}</div>
<div className="text-xs text-gray-500">{entry.project.client.name}</div>
</div>
@@ -139,38 +142,48 @@ export function TimeEntriesPage() {
</div>
{isModalOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
<h2 className="text-lg font-semibold mb-4">{editingEntry ? 'Edit Entry' : 'Add Entry'}</h2>
{error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-4">
<Modal
title={editingEntry ? 'Edit Entry' : 'Add Entry'}
onClose={handleCloseModal}
>
{error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="label">Project</label>
<select value={formData.projectId} onChange={(e) => setFormData({ ...formData, projectId: e.target.value })} className="input">
{projects?.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
</select>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="label">Project</label>
<select value={formData.projectId} onChange={(e) => setFormData({ ...formData, projectId: e.target.value })} className="input">
{projects?.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
</select>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="label">Start</label>
<input type="datetime-local" value={formData.startTime} onChange={(e) => setFormData({ ...formData, startTime: e.target.value })} className="input" />
</div>
<div>
<label className="label">End</label>
<input type="datetime-local" value={formData.endTime} onChange={(e) => setFormData({ ...formData, endTime: e.target.value })} className="input" />
</div>
<label className="label">Start</label>
<input type="datetime-local" value={formData.startTime} onChange={(e) => setFormData({ ...formData, startTime: e.target.value })} className="input" />
</div>
<div>
<label className="label">Description</label>
<textarea value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} className="input" rows={2} />
<label className="label">End</label>
<input type="datetime-local" value={formData.endTime} onChange={(e) => setFormData({ ...formData, endTime: e.target.value })} className="input" />
</div>
<div className="flex justify-end space-x-3 pt-2">
<button type="button" onClick={handleCloseModal} className="btn-secondary">Cancel</button>
<button type="submit" className="btn-primary">{editingEntry ? 'Save' : 'Create'}</button>
</div>
</form>
</div>
</div>
</div>
<div>
<label className="label">Description</label>
<textarea value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} className="input" rows={2} />
</div>
<div className="flex justify-end space-x-3 pt-2">
<button type="button" onClick={handleCloseModal} className="btn-secondary">Cancel</button>
<button
type="submit"
className="btn-primary"
disabled={createTimeEntry.isPending || updateTimeEntry.isPending}
>
{createTimeEntry.isPending || updateTimeEntry.isPending
? 'Saving...'
: editingEntry
? 'Save'
: 'Create'}
</button>
</div>
</form>
</Modal>
)}
</div>
);