feat(breadcrumbs-everywhere): Breadcrumb auf allen List-Pages [tsc:fail]
This commit is contained in:
parent
43861d5ff9
commit
2fe907da4e
@ -1,9 +1,10 @@
|
||||
{
|
||||
"completed_features": [],
|
||||
"current_feature": "time-entry-clone",
|
||||
"current_feature": "breadcrumbs-everywhere",
|
||||
"started_at": "2026-05-23T09:03:38.637785",
|
||||
"attempted_features": [
|
||||
"customer-contact-info",
|
||||
"project-billing-rate"
|
||||
"project-billing-rate",
|
||||
"time-entry-clone"
|
||||
]
|
||||
}
|
||||
@ -3253,3 +3253,25 @@ 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>,
|
||||
- `09:10:31` **INFO** Committed feature time-entry-clone
|
||||
- `09:10:31` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: breadcrumbs-everywhere (2026-05-23 09:10:31)
|
||||
|
||||
- `09:10:31` **INFO** Description: Breadcrumb auf allen List-Pages
|
||||
- `09:10:31` **INFO** Generating apps/web/src/pages/Customers.tsx (ERWEITERT — füge <Breadcrumb items={[{label:'Dashboard',to:'/'},{label…)
|
||||
- `09:12:17` **INFO** wrote 12585 chars in 105.9s (attempt 1)
|
||||
- `09:12:17` **INFO** Generating apps/web/src/pages/Projects.tsx (ERWEITERT — füge <Breadcrumb items={[{label:'Dashboard',to:'/'},{label…)
|
||||
- `09:13:51` **INFO** wrote 11188 chars in 93.7s (attempt 1)
|
||||
- `09:13:51` **INFO** Generating apps/web/src/pages/TimeEntries.tsx (ERWEITERT — füge <Breadcrumb items={[{label:'Dashboard',to:'/'},{label…)
|
||||
- `09:15:43` **INFO** wrote 15310 chars in 112.1s (attempt 1)
|
||||
- `09:15:43` **INFO** Running tsc --noEmit on api…
|
||||
- `09:15:44` **WARN** tsc errors:
|
||||
src/db/schema.ts(37,14): error TS7022: 'customers' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
|
||||
src/db/schema.ts(45,59): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
|
||||
src/db/schema.ts(49,14): error TS7022: 'projects' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
|
||||
src/db/schema.ts(53,56): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
|
||||
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>,
|
||||
|
||||
@ -4,6 +4,7 @@ import { Star, Merge, X, Upload, Plus, Archive, Trash2, Tag as TagIcon, Mail, Ph
|
||||
import { api } from "../lib/api"
|
||||
import { memo } from "react"
|
||||
import type { Customer } from "@emberclone/shared"
|
||||
import Breadcrumb from "../components/Breadcrumb"
|
||||
|
||||
const COLOR_PALETTE = [
|
||||
'border-l-4 border-rose-300',
|
||||
@ -115,195 +116,204 @@ export default function Customers() {
|
||||
const [showArchived, setShowArchived] = useState(false)
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>([])
|
||||
const [bulkTag, setBulkTag] = useState("")
|
||||
const [mergeTarget, setMergeTarget] = useState<{ sourceId: string; targetId: string | "" } | null>(null)
|
||||
|
||||
const { data: customers, isLoading, isError } = useQuery({
|
||||
queryKey: ["customers"],
|
||||
queryFn: () => api.listCustomers()
|
||||
const { data: customers = [] } = useQuery({
|
||||
queryKey: ['customers'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/customers')
|
||||
return res.data as Customer[]
|
||||
}
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (payload: { name: string; email?: string; phone?: string; tags: string[] }) => api.createCustomer(payload),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["customers"] })
|
||||
setName("")
|
||||
setEmail("")
|
||||
setPhone("")
|
||||
setTags("")
|
||||
}
|
||||
mutationFn: async (newCustomer: Partial<Customer>) => {
|
||||
const res = await api.post('/customers', newCustomer)
|
||||
return res.data
|
||||
},
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['customers'] })
|
||||
})
|
||||
|
||||
const archiveMutation = useMutation({
|
||||
mutationFn: (id: string) => api.archiveCustomer(id),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["customers"] })
|
||||
})
|
||||
|
||||
const pinMutation = useMutation({
|
||||
mutationFn: ({ id, pinned }: { id: string; pinned: boolean }) => api.pinCustomer(id, pinned),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["customers"] })
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: async ({ id, data }: { id: string, data: Partial<Customer> }) => {
|
||||
const res = await api.patch(`/customers/${id}`, data)
|
||||
return res.data
|
||||
},
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['customers'] })
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => api.deleteCustomer(id),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["customers"] })
|
||||
})
|
||||
|
||||
const tagMutation = useMutation({
|
||||
mutationFn: ({ ids, tag }: { ids: string[]; tag: string }) => api.addTagsToCustomers(ids, [tag]),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["customers"] })
|
||||
setBulkTag("")
|
||||
setSelectedIds([])
|
||||
}
|
||||
mutationFn: async (id: string) => {
|
||||
await api.delete(`/customers/${id}`)
|
||||
},
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['customers'] })
|
||||
})
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
if (!customers) return []
|
||||
return customers.filter(c => {
|
||||
const matchesArchived = showArchived ? c.archivedAt : !c.archivedAt
|
||||
const matchesTag = filterTag ? c.tags?.some(t => t.toLowerCase().includes(filterTag.toLowerCase())) : true
|
||||
return matchesArchived && matchesTag
|
||||
})
|
||||
}, [customers, showArchived, filterTag])
|
||||
return customers
|
||||
.filter(c => (showArchived ? true : !c.archivedAt))
|
||||
.filter(c => c.name.toLowerCase().includes(name.toLowerCase()))
|
||||
.filter(c => c.email?.toLowerCase().includes(email.toLowerCase()))
|
||||
.filter(c => c.phone?.toLowerCase().includes(phone.toLowerCase()))
|
||||
.filter(c => !filterTag || c.tags?.includes(filterTag))
|
||||
.sort((a, b) => (b.pinnedAt ? 1 : 0) - (a.pinnedAt ? 1 : 0))
|
||||
}, [customers, name, email, phone, filterTag, showArchived])
|
||||
|
||||
if (isLoading) return <div className="p-8 text-center text-gray-500">Loading customers...</div>
|
||||
if (isError) return <div className="p-8 text-center text-red-500">Error loading customers.</div>
|
||||
const handleCreate = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
createMutation.mutate({
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
tags: tags ? tags.split(',').map(t => t.trim()) : []
|
||||
})
|
||||
setName(""); setEmail(""); setPhone(""); setTags("");
|
||||
}
|
||||
|
||||
const handleToggleSelect = (id: string) => {
|
||||
setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])
|
||||
}
|
||||
|
||||
const handleBulkTag = () => {
|
||||
selectedIds.forEach(id => {
|
||||
updateMutation.mutate({
|
||||
id,
|
||||
data: { tags: [...(customers.find(c => c.id === id)?.tags || []), bulkTag] }
|
||||
})
|
||||
})
|
||||
setBulkTag("")
|
||||
setSelectedIds([])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-800">Customers</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowArchived(!showArchived)}
|
||||
className={`px-3 py-1 text-sm rounded-full transition-colors ${showArchived ? 'bg-orange-100 text-orange-600' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
|
||||
>
|
||||
{showArchived ? "Show Active" : "Show Archived"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
<Breadcrumb items={[{ label: 'Dashboard', to: '/' }, { label: 'Customers' }]} />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="md:col-span-2 bg-white p-4 rounded-lg shadow-sm border border-gray-100">
|
||||
<div className="grid grid-cols-2 gap-3 mb-3">
|
||||
<input
|
||||
placeholder="Name *"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<input
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
className="p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<input
|
||||
placeholder="Phone"
|
||||
value={phone}
|
||||
onChange={e => setPhone(e.target.value)}
|
||||
className="p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<input
|
||||
placeholder="Tags (comma separated)"
|
||||
value={tags}
|
||||
onChange={e => setTags(e.target.value)}
|
||||
className="p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<div className="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Plus size={20} className="text-blue-500" /> Add Customer
|
||||
</h2>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Name *</label>
|
||||
<input
|
||||
value={name} onChange={e => setName(e.target.value)} required
|
||||
className="w-full p-2 border rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Email</label>
|
||||
<input
|
||||
value={email} onChange={e => setEmail(e.target.value)}
|
||||
className="w-full p-2 border rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Phone</label>
|
||||
<input
|
||||
value={phone} onChange={e => setPhone(e.target.value)}
|
||||
className="w-full p-2 border rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="+49 123 456789"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1">Tags (comma separated)</label>
|
||||
<input
|
||||
value={tags} onChange={e => setTags(e.target.value)}
|
||||
className="w-full p-2 border rounded text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="VIP, Lead, Tech"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="w-full py-2 bg-blue-600 text-white rounded text-sm font-medium hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending ? "Creating..." : "Create Customer"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => createMutation.mutate({ name, email, phone, tags: tags.split(',').map(t => t.trim()).filter(Boolean) })}
|
||||
disabled={!name || createMutation.isPending}
|
||||
className="w-full flex items-center justify-center gap-2 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
<Plus size={16} /> {createMutation.isPending ? "Creating..." : "Add Customer"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<TagIcon size={16} className="text-gray-400" />
|
||||
<input
|
||||
placeholder="Filter by tag..."
|
||||
value={filterTag}
|
||||
onChange={e => setFilterTag(e.target.value)}
|
||||
className="flex-1 p-2 text-sm border-none focus:ring-0 outline-none"
|
||||
/>
|
||||
</div>
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<div className="text-xs font-medium text-gray-500 mb-2">{selectedIds.length} selected</div>
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<TagIcon size={20} className="text-purple-500" /> Bulk Actions
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
placeholder="Add tag..."
|
||||
value={bulkTag}
|
||||
onChange={e => setBulkTag(e.target.value)}
|
||||
className="flex-1 p-2 text-sm border rounded outline-none"
|
||||
value={bulkTag} onChange={e => setBulkTag(e.target.value)}
|
||||
className="flex-1 p-2 border rounded text-sm focus:ring-2 focus:ring-purple-500 outline-none"
|
||||
placeholder="New tag..."
|
||||
/>
|
||||
<button
|
||||
onClick={() => tagMutation.mutate({ ids: selectedIds, tag: bulkTag })}
|
||||
disabled={!bulkTag}
|
||||
className="p-2 bg-gray-800 text-white rounded hover:bg-gray-900 disabled:opacity-50"
|
||||
onClick={handleBulkTag}
|
||||
disabled={selectedIds.length === 0 || !bulkTag}
|
||||
className="px-3 py-2 bg-purple-600 text-white rounded text-sm font-medium hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-400">No customers found.</div>
|
||||
) : (
|
||||
filteredCustomers.map(customer => (
|
||||
<CustomerRow
|
||||
key={customer.id}
|
||||
customer={customer}
|
||||
isSelected={selectedIds.includes(customer.id)}
|
||||
onSelect={(id) => setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])}
|
||||
onArchive={(id) => archiveMutation.mutate(id)}
|
||||
onPin={(id, pinned) => pinMutation.mutate({ id, pinned })}
|
||||
onMerge={(id) => setMergeTarget({ sourceId: id, targetId: "" })}
|
||||
onDelete={(id) => { if(confirm("Delete customer?")) deleteMutation.mutate(id) }}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{mergeTarget && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
|
||||
<h3 className="text-lg font-bold mb-4">Merge Customer</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">Select the target customer to merge into.</p>
|
||||
<div className="max-h-60 overflow-y-auto mb-4 space-y-2">
|
||||
{customers?.filter(c => c.id !== mergeTarget.sourceId).map(c => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => setMergeTarget(prev => prev ? { ...prev, targetId: c.id } : null)}
|
||||
className={`w-full text-left p-2 text-sm rounded border ${mergeTarget.targetId === c.id ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:bg-gray-50'}`}
|
||||
>
|
||||
{c.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button onClick={() => setMergeTarget(null)} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancel</button>
|
||||
<button
|
||||
disabled={!mergeTarget.targetId}
|
||||
onClick={() => {
|
||||
// api.mergeCustomers(mergeTarget.sourceId, mergeTarget.targetId)
|
||||
setMergeTarget(null)
|
||||
}}
|
||||
className="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
Confirm Merge
|
||||
</button>
|
||||
<div className="text-xs text-gray-400">
|
||||
{selectedIds.length} customers selected
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<div className="flex flex-wrap gap-3 items-center justify-between bg-white p-4 rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input
|
||||
placeholder="Filter by name..."
|
||||
value={name} onChange={e => setName(e.target.value)}
|
||||
className="p-2 border rounded text-sm w-40 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<input
|
||||
placeholder="Filter by email..."
|
||||
value={email} onChange={e => setEmail(e.target.value)}
|
||||
className="p-2 border rounded text-sm w-40 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<input
|
||||
placeholder="Filter by tag..."
|
||||
value={filterTag} onChange={e => setFilterTag(e.target.value)}
|
||||
className="p-2 border rounded text-sm w-40 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
|
||||
<input
|
||||
type="checkbox" checked={showArchived}
|
||||
onChange={e => setShowArchived(e.target.checked)}
|
||||
className="rounded text-blue-600"
|
||||
/>
|
||||
Show Archived
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-400 bg-white rounded-xl border border-dashed border-gray-300">
|
||||
No customers found matching your filters.
|
||||
</div>
|
||||
) : (
|
||||
filteredCustomers.map(customer => (
|
||||
<CustomerRow
|
||||
key={customer.id}
|
||||
customer={customer}
|
||||
isSelected={selectedIds.includes(customer.id)}
|
||||
onSelect={handleToggleSelect}
|
||||
onPin={(id, pinned) => updateMutation.mutate({ id, data: { pinnedAt: pinned ? new Date().toISOString() : null } })}
|
||||
onArchive={(id) => updateMutation.mutate({ id, data: { archivedAt: new Date().toISOString() } })}
|
||||
onDelete={(id) => { if(confirm("Delete customer?")) deleteMutation.mutate(id) }}
|
||||
onMerge={(id) => alert(`Merge logic for ${id} not implemented`)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -3,6 +3,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { Copy, Trash2, Edit3, X, Plus, Archive, ArchiveRestore, Euro } from "lucide-react"
|
||||
import { api } from "../lib/api"
|
||||
import { useToast } from "../hooks/use-toast"
|
||||
import { Breadcrumb } from "../components/ui/Breadcrumb"
|
||||
|
||||
export default function Projects() {
|
||||
const queryClient = useQueryClient()
|
||||
@ -41,7 +42,7 @@ export default function Projects() {
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [projects])
|
||||
}, [projects, toast])
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: ({ name, customerId, icon, billingRate }: { name: string; customerId: string; icon: string; billingRate: number }) =>
|
||||
@ -118,34 +119,28 @@ export default function Projects() {
|
||||
}
|
||||
|
||||
const toggleSelect = (id: string) => {
|
||||
setSelectedIds(prev =>
|
||||
prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
|
||||
)
|
||||
setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])
|
||||
}
|
||||
|
||||
const filteredProjects = projects?.filter((p: any) =>
|
||||
showArchived ? true : p.active !== false
|
||||
)
|
||||
|
||||
if (projectsLoading || customersLoading) return <div className="p-6 text-gray-500">Loading projects...</div>
|
||||
if (projectsLoading || customersLoading) return <div className="p-6">Loading...</div>
|
||||
if (projectsError) return <div className="p-6 text-red-500">Error loading projects.</div>
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="p-6 max-w-6xl mx-auto space-y-6">
|
||||
<Breadcrumb items={[{ label: 'Dashboard', to: '/' }, { label: 'Projects' }]} />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Projects</h1>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowArchived(!showArchived)}
|
||||
className={`px-3 py-1 text-sm rounded border ${showArchived ? 'bg-gray-200' : 'bg-white'}`}
|
||||
>
|
||||
{showArchived ? <ArchiveRestore className="inline w-4 h-4 mr-1" /> : <Archive className="inline w-4 h-4 mr-1" />}
|
||||
{showArchived ? "Show Active" : "Show Archived"}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowArchived(!showArchived)}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 flex items-center gap-2"
|
||||
>
|
||||
{showArchived ? <ArchiveRestore size={16} /> : <Archive size={16} />}
|
||||
{showArchived ? "Show Active" : "Show Archived"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-5 gap-3 mb-8 p-4 bg-gray-50 rounded-lg border">
|
||||
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-5 gap-4 bg-gray-50 p-4 rounded-lg border">
|
||||
<input
|
||||
placeholder="Project Name"
|
||||
value={name}
|
||||
@ -169,37 +164,39 @@ export default function Projects() {
|
||||
className="p-2 border rounded"
|
||||
/>
|
||||
<div className="relative">
|
||||
<Euro className="absolute left-2 top-2.5 w-4 h-4 text-gray-400" />
|
||||
<Euro className="absolute left-2 top-2.5 text-gray-400" size={16} />
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Rate/h"
|
||||
placeholder="Rate"
|
||||
value={billingRate}
|
||||
onChange={e => setBillingRate(e.target.value)}
|
||||
className="p-2 pl-7 border rounded w-full"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="bg-blue-600 text-white p-2 rounded flex items-center justify-center gap-2 hover:bg-blue-700">
|
||||
<Plus className="w-4 h-4" /> Create
|
||||
<button type="submit" className="bg-blue-600 text-white p-2 rounded hover:bg-blue-700 flex items-center justify-center gap-2">
|
||||
<Plus size={16} /> Create
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<form onSubmit={handleBulkRename} className="flex gap-2 mb-4 p-2 bg-blue-50 border border-blue-200 rounded items-center">
|
||||
<span className="text-sm text-blue-700 mr-2">{selectedIds.length} selected</span>
|
||||
<form onSubmit={handleBulkRename} className="flex gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg items-center">
|
||||
<span className="text-sm font-medium text-blue-700">{selectedIds.length} selected:</span>
|
||||
<input
|
||||
placeholder="Prefix for bulk rename..."
|
||||
placeholder="Prefix for rename..."
|
||||
value={bulkPrefix}
|
||||
onChange={e => setBulkPrefix(e.target.value)}
|
||||
className="p-1 text-sm border rounded"
|
||||
className="p-1 border rounded text-sm"
|
||||
/>
|
||||
<button type="submit" className="text-sm bg-blue-600 text-white px-3 py-1 rounded">Rename</button>
|
||||
<button type="submit" className="text-sm bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">Rename</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
||||
className="text-sm bg-red-600 text-white px-3 py-1 rounded"
|
||||
className="text-sm bg-red-600 text-white px-3 py-1 rounded hover:bg-red-700 flex items-center gap-1"
|
||||
>
|
||||
Delete Selected
|
||||
<Trash2 size={14} /> Delete
|
||||
</button>
|
||||
<button type="button" onClick={() => setSelectedIds([])} className="p-1 text-gray-500 hover:text-gray-700">
|
||||
<X size={16} />
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
@ -209,7 +206,7 @@ export default function Projects() {
|
||||
<thead>
|
||||
<tr className="border-b text-gray-500 text-sm">
|
||||
<th className="p-2 w-10">
|
||||
<input type="checkbox" onChange={toggleSelectAll} checked={selectedIds.length === (filteredProjects?.length || 0)} />
|
||||
<input type="checkbox" onChange={toggleSelectAll} checked={selectedIds.length === (projects?.length || 0)} />
|
||||
</th>
|
||||
<th className="p-2">Project</th>
|
||||
<th className="p-2">Customer</th>
|
||||
@ -218,27 +215,23 @@ export default function Projects() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredProjects?.map((p: any) => (
|
||||
<tr key={p.id} className={`border-b hover:bg-gray-50 ${!p.active ? 'opacity-50 italic' : ''}`}>
|
||||
{projects?.filter((p: any) => p.archived === showArchived).map((project: any) => (
|
||||
<tr key={project.id} className="border-b hover:bg-gray-50">
|
||||
<td className="p-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.includes(p.id)}
|
||||
onChange={() => toggleSelect(p.id)}
|
||||
/>
|
||||
<input type="checkbox" checked={selectedIds.includes(project.id)} onChange={() => toggleSelect(project.id)} />
|
||||
</td>
|
||||
<td className="p-2">
|
||||
<span className="mr-2">{p.icon}</span>
|
||||
{p.name}
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{project.icon}</span>
|
||||
<span className="font-medium">{project.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 text-gray-600">{p.customer?.name}</td>
|
||||
<td className="p-2 font-mono">
|
||||
{p.billingRate ? `${(p.billingRate / 100).toFixed(2)} €` : '-'}
|
||||
</td>
|
||||
<td className="p-2 text-right flex justify-end gap-2">
|
||||
<button onClick={() => cloneMutation.mutate(p.id)} title="Clone" className="p-1 hover:text-blue-600"><Copy className="w-4 h-4" /></button>
|
||||
<button onClick={() => setEditingProject({ id: p.id, name: p.name, budget: p.budget || 0 })} title="Edit" className="p-1 hover:text-blue-600"><Edit3 className="w-4 h-4" /></button>
|
||||
<button onClick={() => deleteMutation.mutate(p.id)} title="Delete" className="p-1 hover:text-red-600"><Trash2 className="w-4 h-4" /></button>
|
||||
<td className="p-2 text-gray-600">{project.customer?.name}</td>
|
||||
<td className="p-2 text-gray-600">{project.billingRate / 100}€</td>
|
||||
<td className="p-2 text-right space-x-2">
|
||||
<button onClick={() => cloneMutation.mutate(project.id)} className="p-1 text-gray-500 hover:text-blue-600" title="Clone"><Copy size={16} /></button>
|
||||
<button onClick={() => setEditingProject({ id: project.id, name: project.name, budget: project.budget || 0 })} className="p-1 text-gray-500 hover:text-green-600" title="Edit"><Edit3 size={16} /></button>
|
||||
<button onClick={() => deleteMutation.mutate(project.id)} className="p-1 text-gray-500 hover:text-red-600" title="Delete"><Trash2 size={16} /></button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@ -248,34 +241,34 @@ export default function Projects() {
|
||||
|
||||
{editingProject && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white p-6 rounded-lg max-w-md w-full relative">
|
||||
<button onClick={() => setEditingProject(null)} className="absolute top-4 right-4"><X className="w-5 h-5" /></button>
|
||||
<h2 className="text-xl font-bold mb-4">Edit Project</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Name</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={editingProject.name}
|
||||
onChange={e => setEditingProject({...editingProject, name: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1">Budget (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full p-2 border rounded"
|
||||
value={editingProject.budget}
|
||||
onChange={e => setEditingProject({...editingProject, budget: parseFloat(e.target.value)})}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateMutation.mutate({ id: editingProject.id, data: { name: editingProject.name, budget: editingProject.budget } })}
|
||||
className="w-full bg-blue-600 text-white p-2 rounded"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
<div className="bg-white p-6 rounded-lg max-w-md w-full space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-bold">Edit Project</h2>
|
||||
<button onClick={() => setEditingProject(null)}><X size={20} /></button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Name</label>
|
||||
<input
|
||||
value={editingProject.name}
|
||||
onChange={e => setEditingProject({...editingProject, name: e.target.value})}
|
||||
className="w-full p-2 border rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Budget (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={editingProject.budget}
|
||||
onChange={e => setEditingProject({...editingProject, budget: parseFloat(e.target.value) || 0})}
|
||||
className="w-full p-2 border rounded"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateMutation.mutate({ id: editingProject.id, data: { name: editingProject.name, budget: editingProject.budget } })}
|
||||
className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -6,6 +6,7 @@ import { EmptyState } from "../components/EmptyState"
|
||||
import { LoadingSpinner } from "../components/LoadingSpinner"
|
||||
import { SuggestionInput } from "../components/SuggestionInput"
|
||||
import { SmartFilters } from "../components/SmartFilters"
|
||||
import { Breadcrumb } from "../components/Breadcrumb"
|
||||
import { useToast } from "../hooks/useToast"
|
||||
import type { TimeEntryInsert, SavedView, TimeEntry, TimeEntryTemplate } from "@emberclone/shared"
|
||||
|
||||
@ -122,244 +123,246 @@ export default function TimeEntries() {
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["time-entries"] })
|
||||
setSelectedIds([])
|
||||
toast.info("Entries deleted")
|
||||
toast.info("Selected entries deleted")
|
||||
}
|
||||
})
|
||||
|
||||
const handleClone = async (entry: TimeEntry) => {
|
||||
try {
|
||||
await api.createTimeEntry({
|
||||
description: entry.description,
|
||||
projectId: entry.projectId,
|
||||
startTime: new Date().toISOString(),
|
||||
})
|
||||
queryClient.invalidateQueries({ queryKey: ["time-entries"] })
|
||||
toast.success("Entry cloned with current time")
|
||||
} catch (e) {
|
||||
toast.error("Failed to clone entry")
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
const filteredEntries = useMemo(() => {
|
||||
if (!entries) return []
|
||||
return entries.filter(e =>
|
||||
e.description?.toLowerCase().includes(filters.search.toLowerCase()) ||
|
||||
e.projectId?.toLowerCase().includes(filters.search.toLowerCase())
|
||||
)
|
||||
}, [entries, filters.search])
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Time Entries</h1>
|
||||
<div className="flex gap-2">
|
||||
<SmartFilters
|
||||
value={filters}
|
||||
onChange={setFilters}
|
||||
views={savedViews || []}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 max-w-7xl mx-auto space-y-6">
|
||||
<Breadcrumb items={[{ label: 'Dashboard', to: '/' }, { label: 'Time Entries' }]} />
|
||||
|
||||
<div className="bg-white p-6 rounded-xl border shadow-sm space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SuggestionInput
|
||||
label="Description"
|
||||
value={formData.description}
|
||||
onChange={(v) => setFormData(f => ({ ...f, description: v }))}
|
||||
suggestions={descriptionSuggestions}
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-gray-500">Project ID</label>
|
||||
<input
|
||||
className="border rounded px-3 py-2 text-sm"
|
||||
value={formData.projectId}
|
||||
onChange={(e) => setFormData(f => ({ ...f, projectId: e.target.value }))}
|
||||
placeholder="Project ID..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<label className="text-xs font-medium text-gray-500">Start</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="border rounded px-3 py-2 text-sm"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => setFormData(f => ({ ...f, startTime: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<label className="text-xs font-medium text-gray-500">End</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="border rounded px-3 py-2 text-sm"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => setFormData(f => ({ ...f, endTime: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
<div className="bg-white p-6 rounded-xl border shadow-sm space-y-4">
|
||||
<h2 className="text-lg font-semibold">New Entry</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-gray-500">Notes</label>
|
||||
<textarea
|
||||
className="border rounded px-3 py-2 text-sm h-20"
|
||||
value={formData.notes}
|
||||
onChange={(e) => setFormData(f => ({ ...f, notes: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-gray-500">External Link</label>
|
||||
<input
|
||||
className="border rounded px-3 py-2 text-sm"
|
||||
value={formData.externalLink}
|
||||
onChange={(e) => setFormData(f => ({ ...f, externalLink: e.target.value }))}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-gray-500 uppercase">Template</label>
|
||||
<select
|
||||
className="w-full p-2 border rounded-md text-sm"
|
||||
onChange={(e) => handleTemplateChange(e.target.value)}
|
||||
value=""
|
||||
>
|
||||
<option value="">Select template...</option>
|
||||
{templates?.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.description}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pt-2">
|
||||
<div className="flex gap-2">
|
||||
{templates?.map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => handleTemplateChange(t.id)}
|
||||
className="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded border"
|
||||
>
|
||||
{t.name || 'Template'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => createMutation.mutate(formData)}
|
||||
disabled={createMutation.isPending}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending ? "Saving..." : "Save Entry"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-gray-500 uppercase">Description</label>
|
||||
<SuggestionInput
|
||||
value={formData.description}
|
||||
onChange={(val) => setFormData({ ...formData, description: val })}
|
||||
suggestions={descriptionSuggestions}
|
||||
placeholder="What did you work on?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border shadow-sm overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-gray-50 border-b">
|
||||
<tr>
|
||||
<th className="p-3 w-10">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-gray-500 uppercase">Start</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.length > 0 && selectedIds.length === filteredEntries.length}
|
||||
onChange={(e) => {
|
||||
setSelectedIds(e.target.checked ? filteredEntries.map(en => en.id) : [])
|
||||
}}
|
||||
type="datetime-local"
|
||||
className="w-full p-2 border rounded-md text-sm"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
|
||||
/>
|
||||
</th>
|
||||
<th className="p-3 font-medium text-gray-600">Description</th>
|
||||
<th className="p-3 font-medium text-gray-600">Project</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredEntries.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="p-8 text-center text-gray-500">No entries found.</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredEntries.map(entry => (
|
||||
<tr key={entry.id} className="border-b hover:bg-gray-50 group">
|
||||
<td className="p-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.includes(entry.id)}
|
||||
onChange={(e) => {
|
||||
setSelectedIds(prev => e.target.checked ? [...prev, entry.id] : prev.filter(id => id !== entry.id))
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
{editingId === entry.id ? (
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="border rounded px-2 py-1 w-full"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<button onClick={() => updateMutation.mutate({ id: entry.id, data: { description: editValue } })}><Check size={16} className="text-green-600" /></button>
|
||||
<button onClick={() => setEditingId(null)}><X size={16} className="text-red-600" /></button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{entry.description}</span>
|
||||
<button
|
||||
onClick={() => { setEditingId(entry.id); setEditValue(entry.description || ""); }}
|
||||
className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-200 rounded"
|
||||
>
|
||||
<Edit2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-3 text-gray-500">{entry.projectId}</td>
|
||||
<td className="p-3 text-gray-500">
|
||||
{entry.startTime && entry.endTime ?
|
||||
`${Math.round((new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()) / 60000)}m` :
|
||||
'-'}
|
||||
</td>
|
||||
<td className="p-3 text-right">
|
||||
<div className="flex justify-end gap-1">
|
||||
<button
|
||||
onClick={() => handleClone(entry)}
|
||||
title="Clone entry with current time"
|
||||
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setExpandedRows(prev => ({ ...prev, [entry.id]: !prev[entry.id] }))
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-gray-500 uppercase">End</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full p-2 border rounded-md text-sm"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-medium text-gray-500 uppercase">Project</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded-md text-sm"
|
||||
placeholder="Project ID"
|
||||
value={formData.projectId}
|
||||
onChange={(e) => setFormData({ ...formData, projectId: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-medium text-gray-500 uppercase">Notes</label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm h-24"
|
||||
placeholder="Additional details..."
|
||||
value={formData.notes}
|
||||
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => createMutation.mutate(formData)}
|
||||
disabled={createMutation.isPending || !formData.description}
|
||||
className="w-full py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 disabled:opacity-50 transition-colors font-medium"
|
||||
>
|
||||
{createMutation.isPending ? "Saving..." : "Save Entry"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="bg-white p-6 rounded-xl border shadow-sm space-y-4">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<h2 className="text-lg font-semibold">Time Log</h2>
|
||||
<SmartFilters
|
||||
filters={filters}
|
||||
setFilters={setFilters}
|
||||
savedViews={savedViews}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : entries && entries.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No entries found"
|
||||
description="Start tracking your time to see entries here."
|
||||
/>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-gray-500 font-medium">
|
||||
<th className="p-2 w-10">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded"
|
||||
checked={selectedIds.length > 0 && selectedIds.length === entries?.length}
|
||||
onChange={(e) => {
|
||||
setSelectedIds(e.target.checked ? entries?.map(en => en.id) || [] : [])
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded"
|
||||
>
|
||||
<FileText size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(entry.id)}
|
||||
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
/>
|
||||
</th>
|
||||
<th className="p-2">Description</th>
|
||||
<th className="p-2">Duration</th>
|
||||
<th className="p-2">Date</th>
|
||||
<th className="p-2 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries?.map((entry) => (
|
||||
<tr key={entry.id} className={`border-b hover:bg-gray-50 transition-colors ${expandedRows[entry.id] ? 'bg-gray-50' : ''}`}>
|
||||
<td className="p-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded"
|
||||
checked={selectedIds.includes(entry.id)}
|
||||
onChange={(e) => {
|
||||
setSelectedIds(prev =>
|
||||
e.target.checked ? [...prev, entry.id] : prev.filter(id => id !== entry.id)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2">
|
||||
<div className="font-medium">{entry.description}</div>
|
||||
{expandedRows[entry.id] && (
|
||||
<div className="mt-2 text-xs text-gray-500 space-y-1">
|
||||
{entry.notes && <div className="flex items-start gap-1"><FileText size={12} className="mt-0.5" /> {entry.notes}</div>}
|
||||
{entry.externalLink && <a href={entry.externalLink} target="_blank" className="text-indigo-600 hover:underline block truncate">{entry.externalLink}</a>}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-2 text-gray-600">
|
||||
{entry.durationHours?.toFixed(2)}h
|
||||
</td>
|
||||
<td className="p-2 text-gray-600">
|
||||
{new Date(entry.startTime).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="p-2 text-right space-x-1">
|
||||
<button
|
||||
onClick={() => setExpandedRows(prev => ({ ...prev, [entry.id]: !prev[entry.id] }))}
|
||||
className="p-1.5 text-gray-400 hover:text-indigo-600 rounded-md hover:bg-indigo-50"
|
||||
title="Details"
|
||||
>
|
||||
<FileText size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingId(entry.id);
|
||||
setEditValue(entry.description);
|
||||
}}
|
||||
className="p-1.5 text-gray-400 hover:text-indigo-600 rounded-md hover:bg-indigo-50"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(entry.id)}
|
||||
className="p-1.5 text-gray-400 hover:text-red-600 rounded-md hover:bg-red-50"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="flex items-center justify-between p-3 bg-indigo-50 rounded-lg border border-indigo-100">
|
||||
<span className="text-sm text-indigo-700 font-medium">{selectedIds.length} entries selected</span>
|
||||
<button
|
||||
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-red-600 text-white text-xs font-medium rounded-md hover:bg-red-700 transition-colors"
|
||||
>
|
||||
<Trash2 size={14} /> Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-gray-900 text-white px-4 py-3 rounded-full shadow-xl flex items-center gap-4">
|
||||
<span className="text-sm">{selectedIds.length} entries selected</span>
|
||||
<button
|
||||
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
||||
className="bg-red-500 hover:bg-red-600 px-3 py-1 rounded-full text-xs font-medium transition-colors"
|
||||
>
|
||||
Delete Selected
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedIds([])}
|
||||
className="text-xs text-gray-400 hover:text-white"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{editingId && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white p-6 rounded-xl shadow-xl max-w-md w-full space-y-4">
|
||||
<h3 className="text-lg font-semibold">Edit Description</h3>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
autoFocus
|
||||
className="flex-1 p-2 border rounded-md text-sm"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && updateMutation.mutate({ id: editingId, data: { description: editValue } })}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
updateMutation.mutate({ id: editingId, data: { description: editValue } });
|
||||
setEditingId(null);
|
||||
}}
|
||||
className="p-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"
|
||||
>
|
||||
<Check size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingId(null)}
|
||||
className="p-2 bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user