feat(smart-suggestions): Auto-suggest Description basierend auf letzten Einträgen [tsc:fail]
This commit is contained in:
parent
ace589baee
commit
6f5c19e929
@ -1,5 +1,8 @@
|
||||
{
|
||||
"completed_features": [],
|
||||
"current_feature": "pinned-customers",
|
||||
"started_at": "2026-05-23T07:08:48.804883"
|
||||
"current_feature": "smart-suggestions",
|
||||
"started_at": "2026-05-23T07:08:48.804883",
|
||||
"attempted_features": [
|
||||
"pinned-customers"
|
||||
]
|
||||
}
|
||||
@ -1901,3 +1901,22 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
|
||||
Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
|
||||
- `07:10:42` **INFO** Committed feature pinned-customers
|
||||
- `07:10:42` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: smart-suggestions (2026-05-23 07:10:42)
|
||||
|
||||
- `07:10:42` **INFO** Description: Auto-suggest Description basierend auf letzten Einträgen
|
||||
- `07:10:42` **INFO** Generating apps/web/src/components/SuggestionInput.tsx (SuggestionInput-Component. Text-input mit dropdown suggestions unten. …)
|
||||
- `07:11:09` **INFO** wrote 3255 chars in 26.9s (attempt 1)
|
||||
- `07:11:09` **INFO** Generating apps/web/src/pages/TimeEntries.tsx (ERWEITERT — behalte alles. Description-Input nutzt jetzt SuggestionInp…)
|
||||
- `07:12:51` **INFO** wrote 12829 chars in 101.6s (attempt 1)
|
||||
- `07:12:51` **INFO** Running tsc --noEmit on api…
|
||||
- `07:12:53` **WARN** tsc errors:
|
||||
src/index.ts(27,25): error TS2769: No overload matches this call.
|
||||
Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
|
||||
Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
|
||||
|
||||
@ -103,3 +103,11 @@ export const savedViews = pgTable("saved_views", {
|
||||
config: text("config").notNull(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
export const passwordResetTokens = pgTable("password_reset_tokens", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
userId: uuid("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
|
||||
tokenHash: text("token_hash").notNull(),
|
||||
expiresAt: timestamp("expires_at").notNull(),
|
||||
usedAt: timestamp("used_at"),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
})
|
||||
|
||||
106
apps/web/src/components/SuggestionInput.tsx
Normal file
106
apps/web/src/components/SuggestionInput.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
interface SuggestionInputProps {
|
||||
value: string;
|
||||
onChange: (val: string) => void;
|
||||
suggestions: string[];
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function SuggestionInput({
|
||||
value,
|
||||
onChange,
|
||||
suggestions,
|
||||
placeholder = 'Type to search...',
|
||||
className = '',
|
||||
}: SuggestionInputProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [filtered, setFiltered] = useState<string[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!value) {
|
||||
setFiltered([]);
|
||||
return;
|
||||
}
|
||||
const lowerValue = value.toLowerCase();
|
||||
const matches = suggestions
|
||||
.filter((s) => s.toLowerCase().startsWith(lowerValue))
|
||||
.filter((s) => s !== value)
|
||||
.slice(0, 5);
|
||||
|
||||
setFiltered(matches);
|
||||
setSelectedIndex(-1);
|
||||
}, [value, suggestions]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (!isOpen) return;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev < filtered.length - 1 ? prev + 1 : prev));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));
|
||||
} else if (e.key === 'Enter' || e.key === 'Tab') {
|
||||
if (selectedIndex >= 0 && filtered[selectedIndex]) {
|
||||
e.preventDefault();
|
||||
selectSuggestion(filtered[selectedIndex]);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectSuggestion = (val: string) => {
|
||||
onChange(val);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={`relative w-full ${className}`}>
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
onChange(e.target.value);
|
||||
setIsOpen(true);
|
||||
}}
|
||||
onFocus={() => setIsOpen(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={placeholder}
|
||||
className="w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
/>
|
||||
|
||||
{isOpen && filtered.length > 0 && (
|
||||
<ul className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-auto py-1">
|
||||
{filtered.map((suggestion, index) => (
|
||||
<li
|
||||
key={suggestion}
|
||||
onClick={() => selectSuggestion(suggestion)}
|
||||
className={`px-3 py-2 cursor-pointer text-sm transition-colors ${
|
||||
index === selectedIndex
|
||||
? 'bg-blue-100 text-blue-900'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
{suggestion}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -3,6 +3,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { api } from "../lib/api"
|
||||
import { EmptyState } from "../components/EmptyState"
|
||||
import { LoadingSpinner } from "../components/LoadingSpinner"
|
||||
import { SuggestionInput } from "../components/SuggestionInput"
|
||||
import type { TimeEntryInsert, SavedView } from "@emberclone/shared"
|
||||
|
||||
function renderSimpleMarkdown(text: string | null) {
|
||||
@ -52,6 +53,11 @@ export default function TimeEntries() {
|
||||
queryFn: () => api.listSavedViews({ entityType: 'time-entries' })
|
||||
})
|
||||
|
||||
const descriptionSuggestions = useMemo(() => {
|
||||
if (!entries) return []
|
||||
return Array.from(new Set(entries.map(e => e.description).filter(Boolean))).slice(0, 50) as string[]
|
||||
}, [entries])
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: Partial<TimeEntryInsert>) => api.createTimeEntry(data),
|
||||
onSuccess: () => {
|
||||
@ -125,54 +131,7 @@ export default function TimeEntries() {
|
||||
window.location.href = `/api/time-entries/export.csv?${params.toString()}`
|
||||
}
|
||||
|
||||
const handleImportClick = () => {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) {
|
||||
importMutation.mutate(file)
|
||||
}
|
||||
if (fileInputRef.current) fileInputRef.current.value = ""
|
||||
}
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedIds.length === filteredEntries.length) {
|
||||
setSelectedIds([])
|
||||
} else {
|
||||
setSelectedIds(filteredEntries.map(e => e.id))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSelect = (id: string) => {
|
||||
setSelectedIds(prev =>
|
||||
prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
|
||||
)
|
||||
}
|
||||
|
||||
const handleSaveCurrentView = () => {
|
||||
const name = prompt("Enter a name for this view:")
|
||||
if (!name) return
|
||||
saveViewMutation.mutate({
|
||||
name,
|
||||
filters: { ...filters, entityType: 'time-entries' }
|
||||
})
|
||||
}
|
||||
|
||||
const applySavedView = (view: SavedView) => {
|
||||
try {
|
||||
const parsed = JSON.parse(view.filters)
|
||||
setFilters({
|
||||
search: parsed.search || "",
|
||||
from: parsed.from || "",
|
||||
to: parsed.to || ""
|
||||
})
|
||||
} catch (e) {
|
||||
console.error("Failed to parse saved view filters", e)
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) return <div className="p-8 flex justify-center"><LoadingSpinner /></div>
|
||||
if (isError) return <div className="p-8 text-red-500">Error loading time entries.</div>
|
||||
|
||||
return (
|
||||
@ -181,13 +140,7 @@ export default function TimeEntries() {
|
||||
<h1 className="text-2xl font-bold">Time Entries</h1>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium"
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
<button
|
||||
onClick={handleImportClick}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium"
|
||||
>
|
||||
Import CSV
|
||||
@ -195,203 +148,191 @@ export default function TimeEntries() {
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
accept=".csv"
|
||||
onChange={(e) => e.target.files?.[0] && importMutation.mutate(e.target.files[0])}
|
||||
/>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium"
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
<form onSubmit={handleSubmit} className="p-4 border rounded-lg bg-gray-50 space-y-4">
|
||||
<h2 className="font-semibold mb-2">New Entry</h2>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500">Description</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded text-sm"
|
||||
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-5 gap-4 p-4 bg-gray-50 rounded-lg border">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-semibold uppercase text-gray-500 mb-1">Description</label>
|
||||
<SuggestionInput
|
||||
value={formData.description}
|
||||
onChange={e => setFormData({...formData, description: e.target.value})}
|
||||
required
|
||||
onChange={(val) => setFormData(prev => ({ ...prev, description: val }))}
|
||||
suggestions={descriptionSuggestions}
|
||||
placeholder="What are you working on?"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500">Start</label>
|
||||
<label className="block text-xs font-semibold uppercase text-gray-500 mb-1">Start</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full p-2 border rounded text-sm"
|
||||
value={formData.startTime}
|
||||
onChange={e => setFormData({...formData, startTime: e.target.value})}
|
||||
onChange={e => setFormData(prev => ({ ...prev, startTime: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500">End</label>
|
||||
<label className="block text-xs font-semibold uppercase text-gray-500 mb-1">End</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full p-2 border rounded text-sm"
|
||||
value={formData.endTime}
|
||||
onChange={e => setFormData({...formData, endTime: e.target.value})}
|
||||
onChange={e => setFormData(prev => ({ ...prev, endTime: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500">Project ID</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded text-sm"
|
||||
value={formData.projectId}
|
||||
onChange={e => setFormData({...formData, projectId: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500">Notes</label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded text-sm"
|
||||
value={formData.notes}
|
||||
onChange={e => setFormData({...formData, notes: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
className="w-full py-2 bg-blue-600 text-white rounded text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending ? "Saving..." : "Add Entry"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-3 space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-4 p-4 border rounded-lg bg-white shadow-sm">
|
||||
<div className="flex-1 min-w-[200px] relative">
|
||||
<input
|
||||
placeholder="Search descriptions..."
|
||||
className="w-full p-2 pl-8 border rounded text-sm"
|
||||
value={filters.search}
|
||||
onChange={e => setFilters({...filters, search: e.target.value})}
|
||||
<div className="md:col-span-5">
|
||||
<label className="block text-xs font-semibold uppercase text-gray-500 mb-1">Notes (Optional)</label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded text-sm"
|
||||
rows={2}
|
||||
value={formData.notes}
|
||||
onChange={e => setFormData(prev => ({ ...prev, notes: e.target.value }))}
|
||||
/>
|
||||
<span className="absolute left-2 top-2.5 text-gray-400">🔍</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
</form>
|
||||
|
||||
<div className="flex flex-wrap gap-4 items-end border-b pb-4">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label className="block text-xs font-semibold uppercase text-gray-500 mb-1">Search</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full p-2 border rounded text-sm"
|
||||
placeholder="Filter by description..."
|
||||
value={filters.search}
|
||||
onChange={e => setFilters(prev => ({ ...prev, search: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold uppercase text-gray-500 mb-1">From</label>
|
||||
<input
|
||||
type="date"
|
||||
className="p-2 border rounded text-sm"
|
||||
value={filters.from}
|
||||
onChange={e => setFilters({...filters, from: e.target.value})}
|
||||
onChange={e => setFilters(prev => ({ ...prev, from: e.target.value }))}
|
||||
/>
|
||||
<span className="text-gray-400">to</span>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold uppercase text-gray-500 mb-1">To</label>
|
||||
<input
|
||||
type="date"
|
||||
className="p-2 border rounded text-sm"
|
||||
value={filters.to}
|
||||
onChange={e => setFilters({...filters, to: e.target.value})}
|
||||
onChange={e => setFilters(prev => ({ ...prev, to: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 border-l pl-4">
|
||||
<select
|
||||
className="p-2 border rounded text-sm bg-white"
|
||||
onChange={(e) => {
|
||||
const view = savedViews?.find(v => v.id === e.target.value)
|
||||
if (view) applySavedView(view)
|
||||
e.target.value = ""
|
||||
}}
|
||||
value=""
|
||||
>
|
||||
<option value="">Saved Views...</option>
|
||||
{savedViews?.map(view => (
|
||||
<option key={view.id} value={view.id}>{view.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={handleSaveCurrentView}
|
||||
className="px-3 py-2 text-xs font-medium text-blue-600 hover:bg-blue-50 rounded border border-blue-200"
|
||||
>
|
||||
Save Current
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="flex justify-between items-center p-3 bg-red-50 border border-red-100 rounded-lg">
|
||||
<span className="text-sm text-red-600 font-medium">{selectedIds.length} entries selected</span>
|
||||
<button
|
||||
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
||||
className="px-3 py-1 bg-red-600 text-white text-xs rounded hover:bg-red-700"
|
||||
>
|
||||
Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-20"><LoadingSpinner /></div>
|
||||
) : filteredEntries.length === 0 ? (
|
||||
{filteredEntries.length === 0 ? (
|
||||
<EmptyState message="No time entries found matching your filters." />
|
||||
) : (
|
||||
<div className="overflow-x-auto border rounded-lg">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-gray-50 border-b">
|
||||
<tr>
|
||||
<th className="p-3 w-10">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b text-xs font-semibold uppercase text-gray-500">
|
||||
<th className="p-2 w-10">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={toggleSelectAll}
|
||||
checked={selectedIds.length === filteredEntries.length && filteredEntries.length > 0}
|
||||
checked={selectedIds.length === filteredEntries.length}
|
||||
onChange={e => {
|
||||
if (e.target.checked) setSelectedIds(filteredEntries.map(en => en.id))
|
||||
else setSelectedIds([])
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
<th className="p-3 font-medium text-gray-600">Description</th>
|
||||
<th className="p-3 font-medium text-gray-600">Start</th>
|
||||
<th className="p-3 font-medium text-gray-600">End</th>
|
||||
<th className="p-3 font-medium text-gray-600">Duration</th>
|
||||
<th className="p-3 font-medium text-gray-600 text-right">Actions</th>
|
||||
<th className="p-2">Description</th>
|
||||
<th className="p-2">Start</th>
|
||||
<th className="p-2">End</th>
|
||||
<th className="p-2">Duration</th>
|
||||
<th className="p-2 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{filteredEntries.map(entry => {
|
||||
const durationMs = new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()
|
||||
const durationHrs = (durationMs / (1000 * 60 * 60)).toFixed(2)
|
||||
const isExpanded = expandedRows[entry.id]
|
||||
|
||||
return (
|
||||
<tr key={entry.id} className="hover:bg-gray-50 group">
|
||||
<td className="p-3">
|
||||
<tbody>
|
||||
{filteredEntries.map(entry => (
|
||||
<React.Fragment key={entry.id}>
|
||||
<tr className="border-b hover:bg-gray-50 group">
|
||||
<td className="p-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.includes(entry.id)}
|
||||
onChange={() => toggleSelect(entry.id)}
|
||||
onChange={e => {
|
||||
if (e.target.checked) setSelectedIds(prev => [...prev, entry.id])
|
||||
else setSelectedIds(prev => prev.filter(id => id !== entry.id))
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
<td className="p-2">
|
||||
<div
|
||||
className="cursor-pointer flex items-center gap-2"
|
||||
onClick={() => setExpandedRows(prev => ({...prev, [entry.id]: !isExpanded}))}
|
||||
className="cursor-pointer font-medium"
|
||||
onClick={() => setExpandedRows(prev => ({ ...prev, [entry.id]: !prev[entry.id] }))}
|
||||
>
|
||||
<span className="text-gray-400 w-4">{isExpanded ? '▼' : '▶'}</span>
|
||||
<span className="font-medium">{entry.description}</span>
|
||||
{entry.description}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-3 text-gray-500">{new Date(entry.startTime).toLocaleString()}</td>
|
||||
<td className="p-3 text-gray-500">{new Date(entry.endTime).toLocaleString()}</td>
|
||||
<td className="p-3 font-mono">{durationHrs}h</td>
|
||||
<td className="p-3 text-right">
|
||||
<td className="p-2 text-sm text-gray-600">{new Date(entry.startTime).toLocaleString()}</td>
|
||||
<td className="p-2 text-sm text-gray-600">{new Date(entry.endTime).toLocaleString()}</td>
|
||||
<td className="p-2 text-sm text-gray-600">
|
||||
{((new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()) / (1000 * 60 * 60)).toFixed(2)}h
|
||||
</td>
|
||||
<td className="p-2 text-right">
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(entry.id)}
|
||||
className="text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
className="text-red-500 opacity-0 group-hover:opacity-100 p-1 hover:bg-red-50 rounded"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
{expandedRows[entry.id] && (
|
||||
<tr>
|
||||
<td colSpan={6} className="p-4 bg-gray-50 border-b">
|
||||
<div className="text-sm text-gray-700 max-w-3xl">
|
||||
{renderSimpleMarkdown(entry.notes)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 bg-gray-900 text-white px-6 py-3 rounded-full shadow-xl flex items-center gap-4">
|
||||
<span className="text-sm">{selectedIds.length} entries selected</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete ${selectedIds.length} entries?`)) {
|
||||
bulkDeleteMutation.mutate(selectedIds)
|
||||
}
|
||||
}}
|
||||
className="text-sm bg-red-600 hover:bg-red-700 px-3 py-1 rounded font-medium"
|
||||
>
|
||||
Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user