feat(loading-everywhere): LoadingSpinner consistent in allen Pages [tsc:fail]
This commit is contained in:
parent
3fd79e0747
commit
809dc95dd5
@ -1,9 +1,10 @@
|
||||
{
|
||||
"completed_features": [],
|
||||
"current_feature": "accessibility-final",
|
||||
"current_feature": "loading-everywhere",
|
||||
"started_at": "2026-05-23T09:23:38.401372",
|
||||
"attempted_features": [
|
||||
"404-not-found-page",
|
||||
"api-error-pages"
|
||||
"api-error-pages",
|
||||
"accessibility-final"
|
||||
]
|
||||
}
|
||||
@ -3437,3 +3437,23 @@ 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:26:34` **INFO** Committed feature accessibility-final
|
||||
- `09:26:35` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: loading-everywhere (2026-05-23 09:26:35)
|
||||
|
||||
- `09:26:35` **INFO** Description: LoadingSpinner consistent in allen Pages
|
||||
- `09:26:35` **INFO** Generating apps/web/src/pages/Customers.tsx (ERWEITERT — wenn isLoading: zeige <LoadingSpinner /> oder <TableSkelet…)
|
||||
- `09:28:12` **INFO** wrote 11432 chars in 97.3s (attempt 1)
|
||||
- `09:28:12` **INFO** Generating apps/web/src/pages/Projects.tsx (ERWEITERT — wenn isLoading: zeige <LoadingSpinner /> oder <TableSkelet…)
|
||||
- `09:30:23` **INFO** wrote 16295 chars in 131.0s (attempt 1)
|
||||
- `09:30:23` **INFO** Running tsc --noEmit on api…
|
||||
- `09:30:25` **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>,
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { useState, useRef, useMemo } from "react"
|
||||
import { useState, useRef, useMemo, memo } from "react"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { Star, Merge, X, Upload, Plus, Archive, Trash2, Tag as TagIcon, Mail, Phone } from "lucide-react"
|
||||
import { Star, Merge, X, Upload, Plus, Archive, Trash2, Tag as TagIcon, Mail, Phone, Search } from "lucide-react"
|
||||
import { api } from "../lib/api"
|
||||
import { memo } from "react"
|
||||
import type { Customer } from "@emberclone/shared"
|
||||
import Breadcrumb from "../components/Breadcrumb"
|
||||
import LoadingSpinner from "../components/LoadingSpinner"
|
||||
|
||||
const COLOR_PALETTE = [
|
||||
'border-l-4 border-rose-300',
|
||||
@ -22,6 +22,28 @@ function getColorForName(name: string) {
|
||||
return COLOR_PALETTE[Math.abs(hash) % COLOR_PALETTE.length]
|
||||
}
|
||||
|
||||
const TableSkeleton = ({ rows = 8 }: { rows?: number }) => (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: rows }).map((_, i) => (
|
||||
<div key={i} className="flex items-center justify-between p-3 bg-white rounded shadow-sm border-l-4 border-gray-200 animate-pulse">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-4 h-4 bg-gray-200 rounded" />
|
||||
<div className="w-5 h-5 bg-gray-200 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 w-32 bg-gray-200 rounded" />
|
||||
<div className="h-3 w-48 bg-gray-100 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded" />
|
||||
<div className="w-8 h-8 bg-gray-100 rounded" />
|
||||
<div className="w-8 h-8 bg-gray-100 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
|
||||
const CustomerRow = memo(({
|
||||
customer,
|
||||
onArchive,
|
||||
@ -115,91 +137,68 @@ export default function Customers() {
|
||||
const [filterTag, setFilterTag] = useState("")
|
||||
const [showArchived, setShowArchived] = useState(false)
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>([])
|
||||
const [bulkTag, setBulkTag] = useState("")
|
||||
|
||||
const { data: customers = [] } = useQuery({
|
||||
queryKey: ['customers'],
|
||||
const { data: customers, isLoading } = useQuery({
|
||||
queryKey: ['customers', { filterTag, showArchived }],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/customers')
|
||||
const res = await api.get('/customers', {
|
||||
params: { tag: filterTag || undefined, archived: showArchived ? 'true' : 'false' }
|
||||
})
|
||||
return res.data as Customer[]
|
||||
}
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (newCustomer: Partial<Customer>) => {
|
||||
const res = await api.post('/customers', newCustomer)
|
||||
return res.data
|
||||
},
|
||||
mutationFn: (newCustomer: Partial<Customer>) => api.post('/customers', newCustomer),
|
||||
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
|
||||
},
|
||||
const archiveMutation = useMutation({
|
||||
mutationFn: (id: string) => api.patch(`/customers/${id}`, { archived: true }),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['customers'] })
|
||||
})
|
||||
|
||||
const pinMutation = useMutation({
|
||||
mutationFn: ({ id, pinned }: { id: string, pinned: boolean }) => api.patch(`/customers/${id}`, { pinnedAt: pinned ? new Date().toISOString() : null }),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['customers'] })
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
await api.delete(`/customers/${id}`)
|
||||
},
|
||||
mutationFn: (id: string) => api.delete(`/customers/${id}`),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['customers'] })
|
||||
})
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
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])
|
||||
|
||||
const handleCreate = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
createMutation.mutate({
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
tags: tags ? tags.split(',').map(t => t.trim()) : []
|
||||
createMutation.mutate({
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
tags: tags ? tags.split(',').map(t => t.trim()) : []
|
||||
})
|
||||
setName(""); setEmail(""); setPhone(""); setTags("");
|
||||
}
|
||||
|
||||
const handleToggleSelect = (id: string) => {
|
||||
const toggleSelect = (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="p-6 max-w-6xl mx-auto">
|
||||
<Breadcrumb items={[{ label: 'Dashboard', to: '/' }, { label: 'Customers' }]} />
|
||||
<Breadcrumb paths={[{ label: 'Customers', href: '/customers' }]} />
|
||||
|
||||
<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">
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Plus size={20} className="text-blue-500" /> Add Customer
|
||||
<Plus size={20} /> Add Customer
|
||||
</h2>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<form onSubmit={handleCreate} className="space-y-3">
|
||||
<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"
|
||||
className="w-full p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
@ -207,7 +206,7 @@ export default function Customers() {
|
||||
<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"
|
||||
className="w-full p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
@ -215,7 +214,7 @@ export default function Customers() {
|
||||
<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"
|
||||
className="w-full p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="+49 123 456789"
|
||||
/>
|
||||
</div>
|
||||
@ -223,7 +222,7 @@ export default function Customers() {
|
||||
<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"
|
||||
className="w-full p-2 text-sm border rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="VIP, Lead, Tech"
|
||||
/>
|
||||
</div>
|
||||
@ -232,86 +231,65 @@ export default function Customers() {
|
||||
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"}
|
||||
{createMutation.isPending ? 'Saving...' : 'Create Customer'}
|
||||
</button>
|
||||
</form>
|
||||
</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
|
||||
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={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"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2 bg-white border rounded-md px-3 py-1.5 shadow-sm">
|
||||
<Search size={16} className="text-gray-400" />
|
||||
<input
|
||||
className="text-sm outline-none bg-transparent"
|
||||
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"
|
||||
value={filterTag}
|
||||
onChange={e => setFilterTag(e.target.value)}
|
||||
/>
|
||||
{filterTag && (
|
||||
<button onClick={() => setFilterTag("")} className="text-gray-400 hover:text-gray-600">
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<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>
|
||||
<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 => (
|
||||
{isLoading ? (
|
||||
<TableSkeleton />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{customers?.length === 0 && (
|
||||
<div className="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200 text-gray-400">
|
||||
No customers found.
|
||||
</div>
|
||||
)}
|
||||
{customers?.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`)}
|
||||
onSelect={toggleSelect}
|
||||
onArchive={archiveMutation.mutate}
|
||||
onPin={(id, pinned) => pinMutation.mutate({ id, pinned })}
|
||||
onMerge={(id) => console.log('Merge', id)}
|
||||
onDelete={deleteMutation.mutate}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { Copy, Trash2, Edit3, X, Plus, Archive, ArchiveRestore, Euro } from "lucide-react"
|
||||
import { Copy, Trash2, Edit3, X, Plus, Archive, ArchiveRestore, Euro, Search, Loader2 } from "lucide-react"
|
||||
import { api } from "../lib/api"
|
||||
import { useToast } from "../hooks/use-toast"
|
||||
import { Breadcrumb } from "../components/ui/Breadcrumb"
|
||||
|
||||
function TableSkeleton() {
|
||||
return (
|
||||
<div className="space-y-3 animate-pulse">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="h-12 bg-gray-100 dark:bg-gray-800 rounded-lg w-full" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Projects() {
|
||||
const queryClient = useQueryClient()
|
||||
const { toast } = useToast()
|
||||
@ -16,6 +26,7 @@ export default function Projects() {
|
||||
const [bulkPrefix, setBulkPrefix] = useState("")
|
||||
const [editingProject, setEditingProject] = useState<{ id: string; name: string; budget: number } | null>(null)
|
||||
const [showArchived, setShowArchived] = useState(false)
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
|
||||
const { data: projects, isLoading: projectsLoading, isError: projectsError } = useQuery({
|
||||
queryKey: ["projects"],
|
||||
@ -53,6 +64,7 @@ export default function Projects() {
|
||||
setCustomerId("")
|
||||
setIcon("")
|
||||
setBillingRate("")
|
||||
toast.success("Projekt erstellt")
|
||||
}
|
||||
})
|
||||
|
||||
@ -62,6 +74,7 @@ export default function Projects() {
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] })
|
||||
setEditingProject(null)
|
||||
toast.success("Projekt aktualisiert")
|
||||
}
|
||||
})
|
||||
|
||||
@ -69,6 +82,7 @@ export default function Projects() {
|
||||
mutationFn: (id: string) => api.cloneProject(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] })
|
||||
toast.success("Projekt geklont")
|
||||
}
|
||||
})
|
||||
|
||||
@ -76,6 +90,7 @@ export default function Projects() {
|
||||
mutationFn: (id: string) => api.deleteProject(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] })
|
||||
toast.success("Projekt gelöscht")
|
||||
}
|
||||
})
|
||||
|
||||
@ -86,6 +101,7 @@ export default function Projects() {
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] })
|
||||
setSelectedIds([])
|
||||
setBulkPrefix("")
|
||||
toast.success("Projekte umbenannt")
|
||||
}
|
||||
})
|
||||
|
||||
@ -94,6 +110,7 @@ export default function Projects() {
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] })
|
||||
setSelectedIds([])
|
||||
toast.success("Projekte gelöscht")
|
||||
}
|
||||
})
|
||||
|
||||
@ -111,165 +128,240 @@ export default function Projects() {
|
||||
}
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedIds.length === (projects?.length || 0)) {
|
||||
const filtered = projects?.filter(p =>
|
||||
p.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
|
||||
(showArchived ? p.archived : !p.archived)
|
||||
) || []
|
||||
if (selectedIds.length === filtered.length) {
|
||||
setSelectedIds([])
|
||||
} else {
|
||||
setSelectedIds(projects?.map((p: any) => p.id) || [])
|
||||
setSelectedIds(filtered.map((p: any) => p.id))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSelect = (id: string) => {
|
||||
setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id])
|
||||
const filteredProjects = projects?.filter((p: any) => {
|
||||
const matchesSearch = p.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesArchive = showArchived ? p.archived : !p.archived
|
||||
return matchesSearch && matchesArchive
|
||||
}) || []
|
||||
|
||||
if (projectsLoading || customersLoading) {
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
<Breadcrumb items={[{ label: "Projects", href: "/projects" }]} />
|
||||
<div className="mt-8 space-y-6">
|
||||
<div className="h-20 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse w-1/3" />
|
||||
<TableSkeleton />
|
||||
</div>
|
||||
</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>
|
||||
if (projectsError) {
|
||||
return <div className="p-6 text-red-500">Error loading projects.</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
<Breadcrumb items={[{ label: "Projects", href: "/projects" }]} />
|
||||
|
||||
<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}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="p-2 border rounded"
|
||||
/>
|
||||
<select
|
||||
value={customerId}
|
||||
onChange={e => setCustomerId(e.target.value)}
|
||||
className="p-2 border rounded"
|
||||
>
|
||||
<option value="">Select Customer</option>
|
||||
{customers?.map((c: any) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
placeholder="Icon (emoji)"
|
||||
value={icon}
|
||||
onChange={e => setIcon(e.target.value)}
|
||||
className="p-2 border rounded"
|
||||
/>
|
||||
<div className="relative">
|
||||
<Euro className="absolute left-2 top-2.5 text-gray-400" size={16} />
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Rate"
|
||||
value={billingRate}
|
||||
onChange={e => setBillingRate(e.target.value)}
|
||||
className="p-2 pl-7 border rounded w-full"
|
||||
/>
|
||||
<div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
<div className="bg-white dark:bg-gray-900 p-6 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5" /> New Project
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Project Name</label>
|
||||
<input
|
||||
value={name} onChange={e => setName(e.target.value)}
|
||||
className="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700"
|
||||
placeholder="e.g. Website Redesign"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Customer</label>
|
||||
<select
|
||||
value={customerId} onChange={e => setCustomerId(e.target.value)}
|
||||
className="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700"
|
||||
>
|
||||
<option value="">Select Customer</option>
|
||||
{customers?.map((c: any) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Icon</label>
|
||||
<input
|
||||
value={icon} onChange={e => setIcon(e.target.value)}
|
||||
className="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700"
|
||||
placeholder="🚀"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Rate (€)</label>
|
||||
<input
|
||||
type="number" step="0.01" value={billingRate} onChange={e => setBillingRate(e.target.value)}
|
||||
className="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
disabled={createMutation.isPending}
|
||||
className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{createMutation.isPending && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||
Create Project
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<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 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 rename..."
|
||||
value={bulkPrefix}
|
||||
onChange={e => setBulkPrefix(e.target.value)}
|
||||
className="p-1 border rounded text-sm"
|
||||
/>
|
||||
<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 hover:bg-red-700 flex items-center gap-1"
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b text-gray-500 text-sm">
|
||||
<th className="p-2 w-10">
|
||||
<input type="checkbox" onChange={toggleSelectAll} checked={selectedIds.length === (projects?.length || 0)} />
|
||||
</th>
|
||||
<th className="p-2">Project</th>
|
||||
<th className="p-2">Customer</th>
|
||||
<th className="p-2">Rate</th>
|
||||
<th className="p-2 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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(project.id)} onChange={() => toggleSelect(project.id)} />
|
||||
</td>
|
||||
<td className="p-2">
|
||||
<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">{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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{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 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>
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="relative flex-1 min-w-[300px]">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<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"
|
||||
value={searchTerm} onChange={e => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 rounded-lg border dark:bg-gray-900 dark:border-gray-800"
|
||||
placeholder="Search projects..."
|
||||
/>
|
||||
</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"
|
||||
onClick={() => setShowArchived(!showArchived)}
|
||||
className={`p-2 rounded-lg border flex items-center gap-2 transition-colors ${showArchived ? 'bg-blue-50 border-blue-200 text-blue-600' : 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800'}`}
|
||||
>
|
||||
Save Changes
|
||||
{showArchived ? <ArchiveRestore className="w-4 h-4" /> : <Archive className="w-4 h-4" />}
|
||||
{showArchived ? "Show Active" : "Show Archived"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-100 dark:border-blue-800 flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm font-medium">{selectedIds.length} selected</span>
|
||||
<form onSubmit={handleBulkRename} className="flex gap-2">
|
||||
<input
|
||||
value={bulkPrefix} onChange={e => setBulkPrefix(e.target.value)}
|
||||
className="p-1 text-sm rounded border dark:bg-gray-800 dark:border-gray-700"
|
||||
placeholder="Prefix for rename..."
|
||||
/>
|
||||
<button className="text-xs bg-blue-600 text-white px-2 py-1 rounded">Rename</button>
|
||||
</form>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { if(confirm("Delete selected?")) bulkDeleteMutation.mutate(selectedIds) }}
|
||||
className="text-red-600 hover:text-red-700 flex items-center gap-1 text-sm"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800/50 text-sm text-gray-500">
|
||||
<tr>
|
||||
<th className="p-4 w-10">
|
||||
<input type="checkbox" onChange={toggleSelectAll} checked={selectedIds.length === filteredProjects.length && filteredProjects.length > 0} />
|
||||
</th>
|
||||
<th className="p-4 font-medium">Project</th>
|
||||
<th className="p-4 font-medium">Rate</th>
|
||||
<th className="p-4 font-medium text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
{filteredProjects.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="p-8 text-center text-gray-500">No projects found.</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredProjects.map((project: any) => (
|
||||
<tr key={project.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<td className="p-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.includes(project.id)}
|
||||
onChange={e => {
|
||||
if (e.target.checked) setSelectedIds([...selectedIds, project.id])
|
||||
else setSelectedIds(selectedIds.filter(id => id !== project.id))
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xl">{project.icon || "📁"}</span>
|
||||
<div>
|
||||
<div className="font-medium">{project.name}</div>
|
||||
<div className="text-xs text-gray-500">{project.customer?.name || "No customer"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<Euro className="w-3 h-3" />
|
||||
{(project.billingRate / 100).toFixed(2)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<button onClick={() => setEditingProject({ id: project.id, name: project.name, budget: project.budget || 0 })} className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400">
|
||||
<Edit3 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => cloneMutation.mutate(project.id)} className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-600 dark:text-gray-400">
|
||||
<Copy className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => { if(confirm("Delete project?")) deleteMutation.mutate(project.id) }} className="p-1.5 hover:bg-red-50 dark:hover:bg-red-900/20 rounded text-red-600">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editingProject && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-gray-900 p-6 rounded-xl max-w-md w-full shadow-xl">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold">Edit Project</h3>
|
||||
<button onClick={() => setEditingProject(null)}><X className="w-5 h-5" /></button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Name</label>
|
||||
<input
|
||||
value={editingProject.name}
|
||||
onChange={e => setEditingProject({ ...editingProject, name: e.target.value })}
|
||||
className="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Budget (Hours)</label>
|
||||
<input
|
||||
type="number" value={editingProject.budget}
|
||||
onChange={e => setEditingProject({ ...editingProject, budget: parseFloat(e.target.value) })}
|
||||
className="w-full p-2 rounded border dark:bg-gray-800 dark:border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateMutation.mutate({ id: editingProject.id, data: editingProject })}
|
||||
disabled={updateMutation.isPending}
|
||||
className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{updateMutation.isPending ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user