progress

client/package.json

@@ -16,6 +16,7 @@
   "description": "React frontend for the best-choice project",
   "dependencies": {
     "@tanstack/react-query": "^5.90.2",
+    "lucide-react": "^0.545.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.4"

client/src/api/items.ts

@@ -88,6 +88,7 @@ export interface ImportedItemData {
   model: string | null;
   note: string | null;
   attributes: Record<string, unknown>;
+  sourceUrl?: string | null;
 }
 
 export const createItem = async (
@@ -131,3 +132,55 @@ export const importItemFromUrl = async (
 
   return response.data;
 };
+
+export interface UpdateItemPayload {
+  manufacturer?: string | null;
+  model?: string;
+  status?: ItemStatus;
+  note?: string | null;
+  attributes?: Record<string, unknown>;
+  sourceUrl?: string | null;
+  sourceUrlId?: string | null;
+}
+
+export const updateItem = async (
+  itemId: string,
+  payload: UpdateItemPayload
+): Promise<Item> => {
+  const body: Record<string, unknown> = {};
+
+  if ('manufacturer' in payload) {
+    body.manufacturer = payload.manufacturer ?? null;
+  }
+
+  if ('model' in payload) {
+    body.model = payload.model;
+  }
+
+  if ('status' in payload) {
+    body.status = payload.status;
+  }
+
+  if ('note' in payload) {
+    body.note = payload.note ?? null;
+  }
+
+  if ('attributes' in payload) {
+    body.attributes = payload.attributes ?? {};
+  }
+
+  if ('sourceUrl' in payload) {
+    body.sourceUrl = payload.sourceUrl ?? null;
+  }
+
+  if ('sourceUrlId' in payload) {
+    body.sourceUrlId = payload.sourceUrlId ?? null;
+  }
+
+  const response = await apiFetch<SingleItemResponse>(`/items/${itemId}`, {
+    method: 'PATCH',
+    body
+  });
+
+  return response.data;
+};

client/src/api/projects.ts

@@ -111,9 +111,31 @@ export const updateProject = async (
   projectId: string,
   payload: UpdateProjectPayload
 ): Promise<Project> => {
+  const body: Record<string, unknown> = {};
+
+  if (payload.name !== undefined) {
+    body.name = payload.name;
+  }
+
+  if (payload.description !== undefined) {
+    body.description = payload.description ?? null;
+  }
+
+  if (payload.status !== undefined) {
+    body.status = payload.status;
+  }
+
+  if (payload.attributes !== undefined) {
+    body.attributes = payload.attributes;
+  }
+
+  if (payload.priorityRules !== undefined) {
+    body.priorityRules = payload.priorityRules;
+  }
+
   const response = await apiFetch<SingleProjectResponse>(`/projects/${projectId}`, {
     method: 'PATCH',
-    body: payload
+    body
   });
 
   return response.data;

client/src/components/item-form-modal.tsx

@@ -3,7 +3,7 @@ import type { CreateItemPayload, ImportedItemData } from '../api/items';
 
 export interface ItemFormModalProps {
   isOpen: boolean;
-  mode: 'url' | 'manual';
+  mode: 'url' | 'manual' | 'edit';
   initialUrl: string | null;
   onClose: () => void;
   onSuccess: () => void;
@@ -67,7 +67,8 @@ export function ItemFormModal({
     }
 
     setError(null);
-    setSourceUrl(initialUrl ?? '');
+    const resolvedSourceUrl = initialData?.sourceUrl ?? initialUrl ?? '';
+    setSourceUrl(resolvedSourceUrl);
     setManufacturer(initialData?.manufacturer ?? '');
     setModel(initialData?.model ?? '');
     setNote(initialData?.note ?? '');
@@ -160,14 +161,19 @@ export function ItemFormModal({
     }
 
     try {
-      await onSubmit({
+      const payload: CreateItemPayload = {
         manufacturer: manufacturer.trim() ? manufacturer.trim() : null,
         model: model.trim(),
-        status: 'active',
         note: note.trim() ? note.trim() : null,
         attributes: attributesPayload,
         sourceUrl: sourceUrl.trim() ? sourceUrl.trim() : null
-      });
+      };
+
+      if (mode !== 'edit') {
+        payload.status = 'active';
+      }
+
+      await onSubmit(payload);
       onSuccess();
     } catch (submitError) {
       setError((submitError as Error).message);
@@ -201,11 +207,17 @@ export function ItemFormModal({
         <div className="flex-1 overflow-y-auto px-8 py-6">
           <header className="mb-6">
             <h2 className="text-xl font-semibold text-slate-900">
-              {mode === 'url' ? 'Review Item Details' : 'Add Item Manually'}
+              {mode === 'url'
+                ? 'Review Item Details'
+                : mode === 'edit'
+                  ? 'Edit Item'
+                  : 'Add Item Manually'}
             </h2>
             <p className="text-sm text-slate-500">
               {mode === 'url'
                 ? 'Double-check the imported information and fill in any gaps.'
+                : mode === 'edit'
+                  ? 'Update this item with the latest information.'
                   : 'Provide the specs and notes for this item.'}
             </p>
           </header>
@@ -249,7 +261,7 @@ export function ItemFormModal({
           >
             <div className="flex flex-col gap-2 md:col-span-2">
               <label className="text-sm font-medium text-slate-700" htmlFor="modal-item-source-url">
-                Source URL {mode === 'manual' ? '(optional)' : ''}
+                Source URL {mode === 'url' ? '' : '(optional)'}
               </label>
               <input
                 id="modal-item-source-url"

client/src/pages/project-detail/project-detail-page.tsx

@@ -2,11 +2,18 @@ import { useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   useCreateItemMutation,
+  useUpdateItemMutation,
   useProjectItemsQuery,
   useProjectQuery,
   useUpdateProjectMutation
 } from '../../query/projects';
-import { importItemFromUrl, type ImportedItemData } from '../../api/items';
+import {
+  importItemFromUrl,
+  type CreateItemPayload,
+  type ImportedItemData,
+  type Item,
+  type UpdateItemPayload
+} from '../../api/items';
 import { ItemFormModal } from '../../components/item-form-modal';
 import { ProjectHeader } from './project-header';
 import { ProjectDescriptionSection } from './project-description-section';
@@ -18,18 +25,20 @@ export function ProjectDetailPage() {
   const projectQuery = useProjectQuery(projectId);
   const itemsQuery = useProjectItemsQuery(projectId);
   const createItemMutation = useCreateItemMutation(projectId);
+  const updateItemMutation = useUpdateItemMutation(projectId);
   const updateProjectMutation = useUpdateProjectMutation(projectId);
 
   const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
   const [quickUrl, setQuickUrl] = useState('');
   const [quickError, setQuickError] = useState<string | null>(null);
   const [isItemModalOpen, setIsItemModalOpen] = useState(false);
-  const [itemModalMode, setItemModalMode] = useState<'url' | 'manual'>('manual');
+  const [itemModalMode, setItemModalMode] = useState<'url' | 'manual' | 'edit'>('manual');
   const [modalInitialUrl, setModalInitialUrl] = useState<string | null>(null);
   const [importedItemData, setImportedItemData] = useState<ImportedItemData | null>(null);
   const [isImportingItem, setIsImportingItem] = useState(false);
   const [importError, setImportError] = useState<string | null>(null);
   const importRequestIdRef = useRef(0);
+  const [itemBeingEdited, setItemBeingEdited] = useState<Item | null>(null);
 
   const project = projectQuery.data;
   const items = useMemo(() => itemsQuery.data?.data ?? [], [itemsQuery.data]);
@@ -57,7 +66,7 @@ export function ProjectDetailPage() {
     return Array.from(attributeSet);
   }, [projectAttributes, items]);
 
-  const openItemModal = (mode: 'url' | 'manual', initialUrl: string | null) => {
+  const openItemModal = (mode: 'url' | 'manual' | 'edit', initialUrl: string | null) => {
     setItemModalMode(mode);
     setModalInitialUrl(initialUrl);
     setIsItemModalOpen(true);
@@ -68,6 +77,8 @@ export function ProjectDetailPage() {
       return;
     }
 
+    setItemBeingEdited(null);
+
     const trimmed = quickUrl.trim();
     if (!trimmed) {
       setQuickError('Enter a URL to import item details.');
@@ -82,6 +93,7 @@ export function ProjectDetailPage() {
     setQuickError(null);
     setImportError(null);
     setImportedItemData(null);
+    setItemBeingEdited(null);
 
     const requestId = importRequestIdRef.current + 1;
     importRequestIdRef.current = requestId;
@@ -118,9 +130,20 @@ export function ProjectDetailPage() {
     setImportedItemData(null);
     setIsImportingItem(false);
     importRequestIdRef.current += 1;
+    setItemBeingEdited(null);
     openItemModal('manual', quickUrl.trim() || null);
   };
 
+  const handleEditItem = (item: Item) => {
+    setQuickError(null);
+    setImportError(null);
+    setImportedItemData(null);
+    setIsImportingItem(false);
+    importRequestIdRef.current += 1;
+    setItemBeingEdited(item);
+    openItemModal('edit', item.sourceUrl ?? null);
+  };
+
   const handleModalClose = () => {
     setIsItemModalOpen(false);
     setQuickError(null);
@@ -128,6 +151,7 @@ export function ProjectDetailPage() {
     setImportedItemData(null);
     setIsImportingItem(false);
     importRequestIdRef.current += 1;
+    setItemBeingEdited(null);
   };
 
   const handleModalSuccess = () => {
@@ -140,6 +164,7 @@ export function ProjectDetailPage() {
     setImportedItemData(null);
     setIsImportingItem(false);
     importRequestIdRef.current += 1;
+    setItemBeingEdited(null);
   };
 
   const handleDescriptionUpdate = async (description: string | null) => {
@@ -150,6 +175,26 @@ export function ProjectDetailPage() {
     await updateProjectMutation.mutateAsync({ attributes });
   };
 
+  const handleUpdateItemSubmit = (payload: CreateItemPayload) => {
+    if (!itemBeingEdited) {
+      return Promise.reject(new Error('No item selected for editing'));
+    }
+
+    const updatePayload: UpdateItemPayload = {
+      manufacturer: payload.manufacturer,
+      model: payload.model,
+      note: payload.note,
+      attributes: payload.attributes,
+      sourceUrl: payload.sourceUrl,
+      sourceUrlId: payload.sourceUrlId
+    };
+
+    return updateItemMutation.mutateAsync({
+      itemId: itemBeingEdited.id,
+      payload: updatePayload
+    });
+  };
+
   if (!projectId) {
     return <p className="text-sm text-red-600">Project identifier is missing from the URL.</p>;
   }
@@ -177,6 +222,31 @@ export function ProjectDetailPage() {
     setExpandedItemId((current) => (current === itemId ? null : itemId));
   };
 
+  const modalInitialData =
+    itemModalMode === 'url'
+      ? importedItemData
+      : itemModalMode === 'edit' && itemBeingEdited
+        ? {
+            manufacturer: itemBeingEdited.manufacturer,
+            model: itemBeingEdited.model,
+            note: itemBeingEdited.note,
+            attributes: itemBeingEdited.attributes ?? {},
+            sourceUrl: itemBeingEdited.sourceUrl ?? null
+          }
+        : null;
+
+  const itemModalSubmit =
+    itemModalMode === 'edit' ? handleUpdateItemSubmit : createItemMutation.mutateAsync;
+
+  const itemModalIsSubmitting = itemModalMode === 'edit'
+    ? updateItemMutation.isPending
+    : createItemMutation.isPending;
+
+  const itemModalInitialDataLoading =
+    itemModalMode === 'url' ? isImportingItem : false;
+
+  const itemModalInitialDataError = itemModalMode === 'url' ? importError : null;
+
   return (
     <div className="flex flex-col gap-10">
       <section className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
@@ -211,6 +281,7 @@ export function ProjectDetailPage() {
         onAddUrl={handleAddUrlClick}
         onAddManual={handleAddManualClick}
         isImportingFromUrl={isImportingItem}
+        onEditItem={handleEditItem}
       />
 
       <ItemFormModal
@@ -219,12 +290,12 @@ export function ProjectDetailPage() {
         initialUrl={modalInitialUrl}
         onClose={handleModalClose}
         onSuccess={handleModalSuccess}
-        onSubmit={createItemMutation.mutateAsync}
+        onSubmit={itemModalSubmit}
-        isSubmitting={createItemMutation.isPending}
+        isSubmitting={itemModalIsSubmitting}
         projectAttributes={projectAttributes}
-        initialData={itemModalMode === 'url' ? importedItemData : null}
+        initialData={modalInitialData}
-        isInitialDataLoading={itemModalMode === 'url' ? isImportingItem : false}
+        isInitialDataLoading={itemModalInitialDataLoading}
-        initialDataError={itemModalMode === 'url' ? importError : null}
+        initialDataError={itemModalInitialDataError}
       />
     </div>
   );

client/src/pages/project-detail/project-items-section.tsx

@@ -1,4 +1,5 @@
 import { Fragment, useEffect, useMemo, useState } from 'react';
+import { ExternalLink, Pencil } from 'lucide-react';
 import type { Item } from '../../api/items';
 import { ItemPricesPanel } from './item-prices-panel';
 
@@ -15,6 +16,7 @@ interface ProjectItemsSectionProps {
   onAddUrl: () => void;
   onAddManual: () => void;
   isImportingFromUrl: boolean;
+  onEditItem: (item: Item) => void;
 }
 
 const formatAttributeValue = (value: unknown): string => {
@@ -180,7 +182,8 @@ export function ProjectItemsSection({
   onQuickUrlChange,
   onAddUrl,
   onAddManual,
-  isImportingFromUrl
+  isImportingFromUrl,
+  onEditItem
 }: ProjectItemsSectionProps) {
   const baseColumnCount = 2; // Item, Prices (status indicator lives inside item cell)
   const [showDifferencesOnly, setShowDifferencesOnly] = useState(false);
@@ -309,31 +312,40 @@ export function ProjectItemsSection({
                       <tr className="hover:bg-slate-50">
                         <td className="px-4 py-3 align-top">
                           <div className="flex flex-col gap-1">
-                            <span className="inline-flex items-center gap-2 text-slate-900">
+                            <div className="flex items-center gap-2">
+                              <button
+                                type="button"
+                                onClick={() => onEditItem(item)}
+                                className="group inline-flex items-center gap-2 rounded-md text-left text-slate-900 transition hover:text-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                                title="Edit item details"
+                              >
                                 <span
                                   aria-hidden
                                   className={`inline-block h-2.5 w-2.5 rounded-full ${
                                     item.status === 'active' ? 'bg-emerald-500' : 'bg-slate-300'
                                   }`}
                                 />
-                              <span className="font-semibold">
+                                <span className="font-semibold group-hover:underline">
                                   {item.manufacturer ? `${item.manufacturer} ${item.model}` : item.model}
                                 </span>
-                            </span>
+                              </button>
-                            {item.note ? (
-                              <span className="text-xs text-slate-500">{item.note}</span>
-                            ) : null}
                               {item.sourceUrl ? (
                                 <a
                                   href={item.sourceUrl}
                                   target="_blank"
                                   rel="noreferrer"
-                                className="text-xs font-medium text-blue-600 hover:text-blue-700"
+                                  className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-blue-200 text-blue-600 transition hover:bg-blue-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                                  title="Open source link"
                                 >
-                                View source
+                                  <ExternalLink aria-hidden className="h-4 w-4" />
+                                  <span className="sr-only">Open source link</span>
                                 </a>
                               ) : null}
                             </div>
+                            {item.note ? (
+                              <span className="text-xs text-slate-500">{item.note}</span>
+                            ) : null}
+                          </div>
                         </td>
                         {visibleAttributes.map((attribute) => (
                           <td key={attribute} className="px-4 py-3 align-top text-xs text-slate-600">
@@ -357,19 +369,7 @@ export function ProjectItemsSection({
                               aria-label={priceButtonLabel}
                               title={priceButtonLabel}
                             >
-                              <svg
+                              <Pencil aria-hidden className="h-5 w-5 text-slate-400 transition hover:text-blue-600" />
-                                aria-hidden="true"
-                                className="h-4 w-4"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                              >
-                                <path d="M14.243 2.929a2 2 0 00-2.828 0L4 10.344V13h2.656l7.415-7.414a2 2 0 000-2.828z" />
-                                <path
-                                  fillRule="evenodd"
-                                  d="M3.25 15a1.75 1.75 0 001.75 1.75h10A1.75 1.75 0 0016.75 15v-4a.75.75 0 00-1.5 0v4a.25.25 0 01-.25.25h-10a.25.25 0 01-.25-.25v-10a.25.25 0 01.25-.25h4a.75.75 0 000-1.5h-4A1.75 1.75 0 003.25 5v10z"
-                                  clipRule="evenodd"
-                                />
-                              </svg>
                               <span className="sr-only">{priceButtonLabel}</span>
                             </button>
                           </div>
@@ -399,33 +399,40 @@ export function ProjectItemsSection({
 
             return (
               <div key={item.id} className="rounded-xl border border-slate-200 p-4 shadow-sm">
-                <div className="flex items-start justify-between gap-3">
+                <div className="flex items-start gap-3">
-                  <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => onEditItem(item)}
+                    className="group flex flex-1 items-center gap-2 text-left text-slate-900 transition hover:text-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                    title="Edit item details"
+                  >
                     <span
                       aria-hidden
                       className={`inline-block h-2.5 w-2.5 rounded-full ${
                         item.status === 'active' ? 'bg-emerald-500' : 'bg-slate-300'
                       }`}
                     />
-                    <h3 className="text-lg font-semibold text-slate-900">
+                    <span className="text-lg font-semibold group-hover:underline">
                       {item.manufacturer ? `${item.manufacturer} ${item.model}` : item.model}
-                    </h3>
+                    </span>
-                  </div>
+                  </button>
-                </div>
-
-                {item.note ? (
-                  <p className="mt-1 text-sm text-slate-600">Note: {item.note}</p>
-                ) : null}
                   {item.sourceUrl ? (
                     <a
                       href={item.sourceUrl}
                       target="_blank"
                       rel="noreferrer"
-                    className="mt-1 inline-flex text-xs font-medium text-blue-600 hover:text-blue-700"
+                      className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-blue-200 text-blue-600 transition hover:bg-blue-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                      title="Open source link"
                     >
-                    View source
+                      <ExternalLink aria-hidden className="h-5 w-5" />
+                      <span className="sr-only">Open source link</span>
                     </a>
                   ) : null}
+                </div>
+
+                {item.note ? (
+                  <p className="mt-1 text-sm text-slate-600">Note: {item.note}</p>
+                ) : null}
 
                 <div className="mt-3 space-y-2">
                   {visibleAttributes.map((attribute) => (
@@ -450,14 +457,7 @@ export function ProjectItemsSection({
                   onClick={() => onToggleItem(item.id)}
                   className="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-md border border-blue-200 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-blue-600 transition hover:bg-blue-50"
                 >
-                  <svg aria-hidden="true" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                  <Pencil aria-hidden className="h-5 w-5 text-slate-400 transition hover:text-blue-600" />
-                    <path d="M14.243 2.929a2 2 0 00-2.828 0L4 10.344V13h2.656l7.415-7.414a2 2 0 000-2.828z" />
-                    <path
-                      fillRule="evenodd"
-                      d="M3.25 15a1.75 1.75 0 001.75 1.75h10A1.75 1.75 0 0016.75 15v-4a.75.75 0 00-1.5 0v4a.25.25 0 01-.25.25h-10a.25.25 0 01-.25-.25v-10a.25.25 0 01.25-.25h4a.75.75 0 000-1.5h-4A1.75 1.75 0 003.25 5v10z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
                   {priceButtonLabel}
                 </button>
 

client/src/query/projects.ts

@@ -11,8 +11,10 @@ import {
 import {
   createItem,
   fetchProjectItems,
+  updateItem,
   type CreateItemPayload,
-  type ProjectItemsResponse
+  type ProjectItemsResponse,
+  type UpdateItemPayload
 } from '../api/items';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
@@ -98,3 +100,19 @@ export const useCreateItemMutation = (projectId: string | undefined) => {
     }
   });
 };
+
+export const useUpdateItemMutation = (projectId: string | undefined) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ itemId, payload }: { itemId: string; payload: UpdateItemPayload }) =>
+      updateItem(itemId, payload),
+    onSuccess: () => {
+      if (!projectId) {
+        return;
+      }
+      queryClient.invalidateQueries({ queryKey: projectsKeys.items(projectId) });
+      queryClient.invalidateQueries({ queryKey: projectsKeys.detail(projectId) });
+    }
+  });
+};