feat(project-favicons): Pro Project ein favicon (emoji oder initial) [tsc:fail]
This commit is contained in:
parent
1150dd635f
commit
2ef0824fb5
@ -1,8 +1,9 @@
|
||||
{
|
||||
"completed_features": [],
|
||||
"current_feature": "popout-tracker",
|
||||
"current_feature": "project-favicons",
|
||||
"started_at": "2026-05-23T08:17:40.778724",
|
||||
"attempted_features": [
|
||||
"voice-input-stub"
|
||||
"voice-input-stub",
|
||||
"popout-tracker"
|
||||
]
|
||||
}
|
||||
@ -2627,3 +2627,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
|
||||
- `08:19:25` **INFO** Committed feature popout-tracker
|
||||
- `08:19:25` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: project-favicons (2026-05-23 08:19:25)
|
||||
|
||||
- `08:19:25` **INFO** Description: Pro Project ein favicon (emoji oder initial)
|
||||
- `08:19:25` **INFO** Generating apps/api/src/db/schema.ts (WICHTIG: BEHALTE ALLE bestehenden Tabellen und Spalten. Füge nur Spalt…)
|
||||
- `08:20:19` **INFO** wrote 6137 chars in 53.2s (attempt 1)
|
||||
- `08:20:19` **INFO** Generating apps/web/src/pages/Projects.tsx (ERWEITERT — füge Icon-Input zum Create-Form (emoji-Picker einfach: tex…)
|
||||
- `08:21:35` **INFO** wrote 9526 chars in 76.8s (attempt 1)
|
||||
- `08:21:35` **INFO** Running tsc --noEmit on api…
|
||||
- `08:21:37` **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
|
||||
|
||||
@ -46,6 +46,7 @@ export const customers = pgTable("customers", {
|
||||
export const projects = pgTable("projects", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
name: text("name").notNull(),
|
||||
icon: text("icon"),
|
||||
customerId: uuid("customer_id").notNull().references(() => customers.id, { onDelete: "cascade" }),
|
||||
budgetHours: integer("budget_hours"),
|
||||
active: boolean("active").notNull().default(true),
|
||||
@ -95,62 +96,59 @@ export const timeEntryTemplates = pgTable("time_entry_templates", {
|
||||
name: text("name").notNull(),
|
||||
description: text("description"),
|
||||
projectId: uuid("project_id").references(() => projects.id, { onDelete: "set null" }),
|
||||
defaultDurationMinutes: integer("default_duration_minutes"),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
export const apiKeys = pgTable("api_keys", {
|
||||
|
||||
export const appSettings = pgTable("app_settings", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
userId: uuid("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
|
||||
key: text("key").notNull().unique(),
|
||||
value: text("value").notNull(),
|
||||
roundingMinutes: integer("rounding_minutes").default(0),
|
||||
updatedAt: timestamp("updated_at").notNull().defaultNow()
|
||||
})
|
||||
|
||||
export const auditLog = pgTable("audit_log", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
userId: uuid("user_id").references(() => users.id),
|
||||
action: text("action").notNull(),
|
||||
entityType: text("entity_type").notNull(),
|
||||
entityId: uuid("entity_id"),
|
||||
oldValue: text("old_value"),
|
||||
newValue: text("new_value"),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
|
||||
export const documents = pgTable("documents", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
projectId: uuid("project_id").references(() => projects.id, { onDelete: "cascade" }),
|
||||
name: text("name").notNull(),
|
||||
keyHash: text("key_hash").notNull(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
lastUsedAt: timestamp("last_used_at"),
|
||||
revokedAt: timestamp("revoked_at"),
|
||||
fileData: bytea("file_data").notNull(),
|
||||
mimeType: text("mime_type").notNull(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
|
||||
export const webhooks = pgTable("webhooks", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
url: text("url").notNull(),
|
||||
secret: text("secret").notNull(),
|
||||
events: text("events").array().notNull(),
|
||||
active: boolean("active").notNull().default(true),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
|
||||
export const savedViews = pgTable("saved_views", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
userId: uuid("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
|
||||
name: text("name").notNull(),
|
||||
entityType: text("entity_type").notNull(),
|
||||
filters: text("filters").notNull(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
|
||||
export const webhooks = pgTable("webhooks", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
url: text("url").notNull(),
|
||||
event: text("event").notNull(),
|
||||
active: boolean("active").notNull().default(true),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
createdBy: uuid("created_by").references(() => users.id, { onDelete: "set null" }),
|
||||
})
|
||||
|
||||
export const auditLog = pgTable("audit_log", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
userId: uuid("user_id").references(() => users.id, { onDelete: "set null" }),
|
||||
action: text("action").notNull(),
|
||||
resourceType: text("resource_type"),
|
||||
resourceId: text("resource_id"),
|
||||
metadata: text("metadata"),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
})
|
||||
|
||||
export const appSettings = pgTable("app_settings", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
workspaceName: text("workspace_name").notNull().default("EmberClone"),
|
||||
defaultBillable: boolean("default_billable").notNull().default(true),
|
||||
weekStart: integer("week_start").notNull().default(1),
|
||||
roundingMinutes: integer("rounding_minutes").notNull().default(0),
|
||||
updatedAt: timestamp("updated_at").notNull().defaultNow(),
|
||||
})
|
||||
|
||||
export const documents = pgTable("documents", {
|
||||
export const apiKeys = pgTable("api_keys", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
userId: uuid("user_id").notNull().references(() => users.id, { onDelete: "cascade" }),
|
||||
filename: text("filename").notNull(),
|
||||
contentType: text("content_type").notNull(),
|
||||
sizeBytes: integer("size_bytes").notNull(),
|
||||
content: text("content").notNull(),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow(),
|
||||
keyHash: text("key_hash").notNull().unique(),
|
||||
name: text("name").notNull(),
|
||||
expiresAt: timestamp("expires_at"),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { Copy, Trash2, Edit3, X } from "lucide-react"
|
||||
import { Copy, Trash2, Edit3, X, Plus } from "lucide-react"
|
||||
import { api } from "../lib/api"
|
||||
import { useToast } from "../hooks/use-toast"
|
||||
|
||||
@ -8,6 +8,7 @@ export default function Projects() {
|
||||
const queryClient = useQueryClient()
|
||||
const { toast } = useToast()
|
||||
const [name, setName] = useState("")
|
||||
const [icon, setIcon] = useState("")
|
||||
const [customerId, setCustomerId] = useState("")
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>([])
|
||||
const [bulkPrefix, setBulkPrefix] = useState("")
|
||||
@ -41,12 +42,13 @@ export default function Projects() {
|
||||
}, [projects])
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: ({ name, customerId }: { name: string; customerId: string }) =>
|
||||
api.createProject({ name, customerId }),
|
||||
mutationFn: ({ name, customerId, icon }: { name: string; customerId: string; icon: string }) =>
|
||||
api.createProject({ name, customerId, icon }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["projects"] })
|
||||
setName("")
|
||||
setCustomerId("")
|
||||
setIcon("")
|
||||
}
|
||||
})
|
||||
|
||||
@ -94,7 +96,7 @@ export default function Projects() {
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!name.trim() || !customerId) return
|
||||
createMutation.mutate({ name, customerId })
|
||||
createMutation.mutate({ name, customerId, icon })
|
||||
}
|
||||
|
||||
const handleBulkRename = (e: React.FormEvent) => {
|
||||
@ -122,208 +124,137 @@ export default function Projects() {
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto space-y-8">
|
||||
<header>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Projects</h1>
|
||||
<p className="text-gray-500">Manage your project portfolio and budgets</p>
|
||||
</header>
|
||||
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h2 className="text-lg font-semibold mb-4">Add New Project</h2>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Project name..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Customer</label>
|
||||
<select
|
||||
value={customerId}
|
||||
onChange={(e) => setCustomerId(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select customer...</option>
|
||||
{customers?.map((c: any) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">Projects</h1>
|
||||
{selectedIds.length > 0 && (
|
||||
<div className="flex gap-2 items-center bg-gray-100 p-2 rounded-lg">
|
||||
<form onSubmit={handleBulkRename} className="flex gap-2">
|
||||
<input
|
||||
className="px-2 py-1 text-sm border rounded"
|
||||
placeholder="Prefix..."
|
||||
value={bulkPrefix}
|
||||
onChange={e => setBulkPrefix(e.target.value)}
|
||||
/>
|
||||
<button type="submit" className="bg-blue-600 text-white px-3 py-1 rounded text-sm">Rename</button>
|
||||
</form>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
||||
className="p-1 text-red-600 hover:bg-red-100 rounded"
|
||||
>
|
||||
Create Project
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<section className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
|
||||
<div className="p-4 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.length === (projects?.length || 0)}
|
||||
onChange={toggleSelectAll}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-700">Select All</span>
|
||||
</label>
|
||||
{selectedIds.length > 0 && (
|
||||
<form onSubmit={handleBulkRename} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={bulkPrefix}
|
||||
onChange={(e) => setBulkPrefix(e.target.value)}
|
||||
placeholder="Prefix..."
|
||||
className="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-2 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
|
||||
>
|
||||
Bulk Rename
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => bulkDeleteMutation.mutate(selectedIds)}
|
||||
className="px-2 py-1 text-sm bg-red-50 text-red-600 rounded-md hover:bg-red-100"
|
||||
>
|
||||
Bulk Delete
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{projects?.length || 0} projects total
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-white p-4 rounded-xl border shadow-sm">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="w-12 px-2 py-2 border rounded text-center"
|
||||
placeholder="🚀"
|
||||
maxLength={2}
|
||||
value={icon}
|
||||
onChange={e => setIcon(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="flex-1 px-3 py-2 border rounded"
|
||||
placeholder="Project Name"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
className="px-3 py-2 border rounded"
|
||||
value={customerId}
|
||||
onChange={e => setCustomerId(e.target.value)}
|
||||
>
|
||||
<option value="">Select Customer</option>
|
||||
{customers?.map((c: any) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus size={18} /> Create Project
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 text-gray-600 text-sm uppercase font-medium">
|
||||
<th className="p-4 w-10">
|
||||
<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-3 w-10">
|
||||
<input type="checkbox" onChange={toggleSelectAll} checked={selectedIds.length === (projects?.length || 0)} />
|
||||
</th>
|
||||
<th className="p-3">Project</th>
|
||||
<th className="p-3">Customer</th>
|
||||
<th className="p-3">Budget</th>
|
||||
<th className="p-3 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{projects?.map((project: any) => (
|
||||
<tr key={project.id} className="border-b hover:bg-gray-50 transition-colors">
|
||||
<td className="p-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.length === (projects?.length || 0)}
|
||||
onChange={toggleSelectAll}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
checked={selectedIds.includes(project.id)}
|
||||
onChange={() => toggleSelect(project.id)}
|
||||
/>
|
||||
</th>
|
||||
<th className="p-4">Project Name</th>
|
||||
<th className="p-4">Budget (h)</th>
|
||||
<th className="p-4">Used (h)</th>
|
||||
<th className="p-4">Status</th>
|
||||
<th className="p-4 text-right">Actions</th>
|
||||
</td>
|
||||
<td className="p-3 font-medium">
|
||||
<span className="mr-2">{project.icon || "📁"}</span>
|
||||
{project.name}
|
||||
</td>
|
||||
<td className="p-3 text-gray-600">{project.customer?.name}</td>
|
||||
<td className="p-3">
|
||||
{editingProject?.id === project.id ? (
|
||||
<input
|
||||
type="number"
|
||||
className="border rounded px-2 py-1 w-24"
|
||||
value={editingProject.budget}
|
||||
onChange={e => setEditingProject({...editingProject, budget: parseFloat(e.target.value) || 0})}
|
||||
/>
|
||||
) : (
|
||||
<span>{project.budget || 0}h</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-3 text-right space-x-2">
|
||||
<button
|
||||
onClick={() => setEditingProject({ id: project.id, name: project.name, budget: project.budget || 0 })}
|
||||
className="p-1 text-gray-500 hover:text-blue-600"
|
||||
>
|
||||
<Edit3 size={16} />
|
||||
</button>
|
||||
{editingProject?.id === project.id && (
|
||||
<button
|
||||
onClick={() => updateMutation.mutate({ id: project.id, name: project.name, budget: editingProject.budget })}
|
||||
className="p-1 text-green-600"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => cloneMutation.mutate(project.id)}
|
||||
className="p-1 text-gray-500 hover:text-blue-600"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(project.id)}
|
||||
className="p-1 text-gray-500 hover:text-red-600"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{projects?.map((project: any) => {
|
||||
const budget = project.budget || 0
|
||||
const used = project.usedHours || 0
|
||||
const ratio = budget > 0 ? used / budget : 0
|
||||
const isOver = ratio > 1
|
||||
const isWarning = ratio >= 0.8 && ratio <= 1
|
||||
|
||||
return (
|
||||
<tr key={project.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="p-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.includes(project.id)}
|
||||
onChange={() => toggleSelect(project.id)}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
</td>
|
||||
<td className="p-4 font-medium text-gray-900">{project.name}</td>
|
||||
<td className="p-4 text-gray-600">{budget}</td>
|
||||
<td className="p-4 text-gray-600">{used}</td>
|
||||
<td className="p-4">
|
||||
{isOver ? (
|
||||
<span className="px-2 py-1 text-xs font-semibold bg-red-100 text-red-700 rounded-full">Over Budget</span>
|
||||
) : isWarning ? (
|
||||
<span className="px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-700 rounded-full">Warning</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-xs font-semibold bg-green-100 text-green-700 rounded-full">OK</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4 text-right space-x-2">
|
||||
<button
|
||||
onClick={() => setEditingProject({ id: project.id, name: project.name, budget })}
|
||||
className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit3 size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => cloneMutation.mutate(project.id)}
|
||||
className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
title="Clone"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(project.id)}
|
||||
className="p-1 text-gray-400 hover:text-red-600 transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{editingProject && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-lg p-6 max-w-md w-full shadow-xl">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-bold">Edit Project</h3>
|
||||
<button onClick={() => setEditingProject(null)} className="text-gray-400 hover:text-gray-600">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editingProject.name}
|
||||
onChange={(e) => setEditingProject({ ...editingProject, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Budget (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={editingProject.budget}
|
||||
onChange={(e) => setEditingProject({ ...editingProject, budget: parseInt(e.target.value) || 0 })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateMutation.mutate(editingProject)}
|
||||
className="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user