edit price

client/src/api/item-prices.ts

@@ -48,6 +48,15 @@ export interface CreateItemPricePayload {
   note?: string | null;
 }
 
+export interface UpdateItemPricePayload {
+  condition?: PriceCondition;
+  amount?: number;
+  currency?: string;
+  sourceUrl?: string | null;
+  sourceUrlId?: string | null;
+  note?: string | null;
+}
+
 interface SingleItemPriceResponse {
   data: ItemPrice;
 }
@@ -74,6 +83,46 @@ export const createItemPrice = async (
   return response.data;
 };
 
+export const updateItemPrice = async (
+  priceId: string,
+  payload: UpdateItemPricePayload
+): Promise<ItemPrice> => {
+  const body: Record<string, unknown> = {};
+
+  if (payload.condition !== undefined) {
+    body.condition = payload.condition;
+  }
+  if (payload.amount !== undefined) {
+    body.amount = payload.amount;
+  }
+  if (payload.currency !== undefined) {
+    body.currency = payload.currency;
+  }
+  if (payload.sourceUrlId !== undefined) {
+    body.sourceUrlId = payload.sourceUrlId;
+  }
+  if (payload.sourceUrl !== undefined) {
+    body.sourceUrl = payload.sourceUrl;
+  }
+  if (payload.note !== undefined) {
+    body.note = payload.note;
+  }
+
+  if (Object.keys(body).length === 0) {
+    throw new Error('No fields provided to update item price');
+  }
+
+  const response = await apiFetch<SingleItemPriceResponse>(
+    `/prices/${priceId}`,
+    {
+      method: 'PATCH',
+      body
+    }
+  );
+
+  return response.data;
+};
+
 export const deleteItemPrice = async (priceId: string): Promise<void> => {
   await apiFetch<null>(`/prices/${priceId}`, {
     method: 'DELETE'

client/src/pages/project-detail/item-prices-panel.tsx

@@ -1,15 +1,14 @@
 import { FormEvent, useMemo, useState } from 'react';
-import { Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import {
   useCreateItemPriceMutation,
   useDeleteItemPriceMutation,
-  useItemPricesQuery
+  useItemPricesQuery,
+  useUpdateItemPriceMutation
 } from '../../query/item-prices';
 import type { PriceCondition } from '../../api/item-prices';
 import { formatRelativeTime } from '../../utils/relative-time';
 
-const priceConditionOptions: PriceCondition[] = ['new', 'used'];
-
 interface ItemPricesPanelProps {
   itemId: string;
   projectId: string | undefined;
@@ -24,28 +23,64 @@ export function ItemPricesPanel({ itemId, projectId }: ItemPricesPanelProps) {
   const [formError, setFormError] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
   const [pendingDeletionId, setPendingDeletionId] = useState<string | null>(null);
+  const [editingPriceId, setEditingPriceId] = useState<string | null>(null);
+  const [editingCondition, setEditingCondition] = useState<PriceCondition>('new');
+  const [editingAmount, setEditingAmount] = useState('');
+  const [editingCurrency, setEditingCurrency] = useState('EUR');
+  const [editingSourceUrl, setEditingSourceUrl] = useState('');
+  const [editingNote, setEditingNote] = useState('');
 
   const pricesQuery = useItemPricesQuery(itemId, true);
   const createPriceMutation = useCreateItemPriceMutation(itemId, projectId);
   const deletePriceMutation = useDeleteItemPriceMutation(itemId, projectId);
+  const updatePriceMutation = useUpdateItemPriceMutation(itemId, projectId);
 
   const prices = pricesQuery.data?.data ?? [];
+  const sortedPrices = useMemo(
+    () => [...prices].sort((first, second) => first.amount - second.amount),
+    [prices]
+  );
   const errorMessage = useMemo(
     () =>
       formError ??
       actionError ??
       (createPriceMutation.isError ? createPriceMutation.error.message : null) ??
-      (deletePriceMutation.isError ? deletePriceMutation.error.message : null),
+      (deletePriceMutation.isError ? deletePriceMutation.error.message : null) ??
+      (updatePriceMutation.isError ? updatePriceMutation.error.message : null),
     [
       formError,
       actionError,
       createPriceMutation.isError,
       createPriceMutation.error,
       deletePriceMutation.isError,
-      deletePriceMutation.error
+      deletePriceMutation.error,
+      updatePriceMutation.isError,
+      updatePriceMutation.error
     ]
   );
 
+  const resetEditingState = () => {
+    setEditingPriceId(null);
+    setEditingCondition('new');
+    setEditingAmount('');
+    setEditingCurrency('EUR');
+    setEditingSourceUrl('');
+    setEditingNote('');
+    updatePriceMutation.reset();
+  };
+
+  const startEditingPrice = (price: (typeof prices)[number]) => {
+    setFormError(null);
+    setActionError(null);
+    updatePriceMutation.reset();
+    setEditingPriceId(price.id);
+    setEditingCondition(price.condition);
+    setEditingAmount(price.amount.toFixed(2));
+    setEditingCurrency(price.currency.toUpperCase());
+    setEditingSourceUrl(price.sourceUrl ?? '');
+    setEditingNote(price.note ?? '');
+  };
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setFormError(null);
@@ -76,6 +111,56 @@ export function ItemPricesPanel({ itemId, projectId }: ItemPricesPanelProps) {
     }
   };
 
+  const handleCancelEditing = () => {
+    setActionError(null);
+    resetEditingState();
+  };
+
+  const handleUpdatePrice = async () => {
+    if (!editingPriceId) {
+      return;
+    }
+
+    setActionError(null);
+
+    const trimmedAmount = editingAmount.trim();
+    const parsedAmount = Number(trimmedAmount);
+
+    if (trimmedAmount === '' || !Number.isFinite(parsedAmount) || parsedAmount < 0) {
+      setActionError('Amount must be a non-negative number.');
+      return;
+    }
+
+    const trimmedCurrency = editingCurrency.trim().toUpperCase();
+
+    if (!trimmedCurrency) {
+      setActionError('Currency is required.');
+      return;
+    }
+
+    setEditingCurrency(trimmedCurrency);
+
+    const trimmedSourceUrl = editingSourceUrl.trim();
+    const trimmedNote = editingNote.trim();
+
+    try {
+      await updatePriceMutation.mutateAsync({
+        priceId: editingPriceId,
+        payload: {
+          condition: editingCondition,
+          amount: parsedAmount,
+          currency: trimmedCurrency,
+          sourceUrl: trimmedSourceUrl ? trimmedSourceUrl : null,
+          note: trimmedNote ? trimmedNote : null
+        }
+      });
+
+      resetEditingState();
+    } catch (error) {
+      setActionError((error as Error).message);
+    }
+  };
+
   const handleDeletePrice = async (priceId: string) => {
     setActionError(null);
     deletePriceMutation.reset();
@@ -149,17 +234,100 @@ export function ItemPricesPanel({ itemId, projectId }: ItemPricesPanelProps) {
                     Loading prices…
                   </td>
                 </tr>
-              ) : prices.length ? (
+              ) : sortedPrices.length ? (
-                prices.map((price) => {
+                sortedPrices.map((price) => {
                   const lastUpdated = price.updatedAt ?? price.createdAt;
+                  const isEditing = editingPriceId === price.id;
 
                   return (
                     <tr key={price.id}>
-                      <td className="px-4 py-3 capitalize text-slate-800">{price.condition}</td>
+                      <td className="px-4 py-3">
-                      <td className="px-4 py-3 text-slate-800">{price.amount.toFixed(2)}</td>
+                        {isEditing ? (
-                      <td className="px-4 py-3 text-slate-800">{price.currency}</td>
+                          <>
-                      <td className="px-4 py-3 text-slate-800">
+                            <label className="sr-only" htmlFor={`price-edit-condition-${price.id}`}>
-                        {price.sourceUrl ? (
+                              Condition
+                            </label>
+                            <div className="flex items-center gap-2">
+                              <input
+                                id={`price-edit-condition-${price.id}`}
+                                type="checkbox"
+                                checked={editingCondition === 'new'}
+                                onChange={(event) =>
+                                  setEditingCondition(event.target.checked ? 'new' : 'used')
+                                }
+                                className="h-4 w-4 rounded border border-slate-300 text-blue-600 focus:ring-blue-500"
+                              />
+                              <span className="text-sm text-slate-700">New</span>
+                            </div>
+                          </>
+                        ) : (
+                          <span className="capitalize text-slate-800">{price.condition}</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        {isEditing ? (
+                          <>
+                            <label className="sr-only" htmlFor={`price-edit-amount-${price.id}`}>
+                              Amount
+                            </label>
+                            <input
+                              id={`price-edit-amount-${price.id}`}
+                              type="number"
+                              min={0}
+                              step="0.01"
+                              value={editingAmount}
+                              onChange={(event) => setEditingAmount(event.target.value)}
+                              className="w-full rounded-md border border-slate-300 px-2 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                              placeholder="129.99"
+                              required
+                            />
+                          </>
+                        ) : (
+                          <span className="text-slate-800">{price.amount.toFixed(2)}</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        {isEditing ? (
+                          <>
+                            <label className="sr-only" htmlFor={`price-edit-currency-${price.id}`}>
+                              Currency
+                            </label>
+                            <input
+                              id={`price-edit-currency-${price.id}`}
+                              type="text"
+                              value={editingCurrency}
+                              onChange={(event) =>
+                                setEditingCurrency(event.target.value.toUpperCase())
+                              }
+                              maxLength={3}
+                              className="w-full rounded-md border border-slate-300 px-2 py-2 text-sm uppercase shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                              placeholder="EUR"
+                              required
+                            />
+                          </>
+                        ) : (
+                          <span className="text-slate-800">{price.currency}</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3">
+                        {isEditing ? (
+                          <>
+                            <label
+                              className="sr-only"
+                              htmlFor={`price-edit-source-url-${price.id}`}
+                            >
+                              Source URL
+                            </label>
+                            <input
+                              id={`price-edit-source-url-${price.id}`}
+                              type="url"
+                              value={editingSourceUrl}
+                              onChange={(event) => setEditingSourceUrl(event.target.value)}
+                              className="w-full rounded-md border border-slate-300 px-2 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                              placeholder="https://shop.example.com/deal"
+                            />
+                          </>
+                        ) : price.sourceUrl ? (
                           <a
                             href={price.sourceUrl}
                             target="_blank"
@@ -172,21 +340,77 @@ export function ItemPricesPanel({ itemId, projectId }: ItemPricesPanelProps) {
                           <span className="text-slate-400">—</span>
                         )}
                       </td>
-                      <td className="px-4 py-3 text-slate-800">
+                      <td className="px-4 py-3">
-                        {price.note ? price.note : <span className="text-slate-400">—</span>}
+                        {isEditing ? (
+                          <>
+                            <label className="sr-only" htmlFor={`price-edit-note-${price.id}`}>
+                              Notes
+                            </label>
+                            <textarea
+                              id={`price-edit-note-${price.id}`}
+                              value={editingNote}
+                              onChange={(event) => setEditingNote(event.target.value)}
+                              rows={1}
+                              className="w-full rounded-md border border-slate-300 px-2 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                              placeholder="Includes extra grip kit"
+                            />
+                          </>
+                        ) : price.note ? (
+                          price.note
+                        ) : (
+                          <span className="text-slate-400">—</span>
+                        )}
                       </td>
                       <td className="px-4 py-3 text-slate-600">
-                        {lastUpdated ? formatRelativeTime(lastUpdated) : <span className="text-slate-400">—</span>}
+                        {lastUpdated ? (
+                          formatRelativeTime(lastUpdated)
+                        ) : (
+                          <span className="text-slate-400">—</span>
+                        )}
                       </td>
                       <td className="px-4 py-3 text-right">
+                        {isEditing ? (
+                          <div className="flex justify-end gap-2">
+                            <button
+                              type="button"
+                              onClick={handleUpdatePrice}
+                              className="inline-flex items-center rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:bg-blue-400"
+                              disabled={updatePriceMutation.isPending}
+                            >
+                              {updatePriceMutation.isPending ? 'Saving…' : 'Save'}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={handleCancelEditing}
+                              className="inline-flex items-center rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-60"
+                              disabled={updatePriceMutation.isPending}
+                            >
+                              Cancel
+                            </button>
+                          </div>
+                        ) : (
+                          <div className="flex justify-end gap-2">
+                            <button
+                              type="button"
+                              onClick={() => startEditingPrice(price)}
+                              className="inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-60"
+                              disabled={updatePriceMutation.isPending}
+                            >
+                              <Pencil aria-hidden className="h-4 w-4" />
+                            </button>
                             <button
                               type="button"
                               onClick={() => handleDeletePrice(price.id)}
                               className="inline-flex items-center gap-1 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 text-xs font-semibold text-red-600 transition hover:bg-red-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-60"
-                          disabled={deletePriceMutation.isPending && pendingDeletionId === price.id}
+                              disabled={
+                                (deletePriceMutation.isPending && pendingDeletionId === price.id) ||
+                                updatePriceMutation.isPending
+                              }
                             >
                               <Trash2 aria-hidden className="h-4 w-4" />
                             </button>
+                          </div>
+                        )}
                       </td>
                     </tr>
                   );
@@ -203,18 +427,16 @@ export function ItemPricesPanel({ itemId, projectId }: ItemPricesPanelProps) {
                   <label className="sr-only" htmlFor={`price-condition-${itemId}`}>
                     Condition
                   </label>
-                  <select
+                  <div className="flex items-center gap-2">
+                    <input
                       id={`price-condition-${itemId}`}
-                    value={condition}
+                      type="checkbox"
-                    onChange={(event) => setCondition(event.target.value as PriceCondition)}
+                      checked={condition === 'new'}
-                    className="w-full rounded-md border border-slate-300 px-2 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                      onChange={(event) => setCondition(event.target.checked ? 'new' : 'used')}
-                  >
+                      className="h-4 w-4 rounded border border-slate-300 text-blue-600 focus:ring-blue-500"
-                    {priceConditionOptions.map((option) => (
+                    />
-                      <option key={option} value={option}>
+                    <span className="text-sm text-slate-700">New</span>
-                        {option}
+                  </div>
-                      </option>
-                    ))}
-                  </select>
                 </td>
                 <td className="px-4 py-3">
                   <label className="sr-only" htmlFor={`price-amount-${itemId}`}>

client/src/pages/project-detail/project-items-desktop-table.tsx

@@ -111,6 +111,7 @@ export function ProjectItemsDesktopTable({
                             aria-controls={panelId}
                           >
                             <Pencil aria-hidden className="h-4 w-4" />
+                            <span hidden={!isExpanded}>Close</span>
                             <span className="sr-only">Edit Prices</span>
                           </button>
                         </div>

client/src/pages/project-detail/project-items-utils.ts

@@ -122,6 +122,7 @@ export const formatPriceAmount = (amount: number, currency: string | null): stri
 export const getPriceSummaryDisplay = (
   summary: Item['priceSummary'] | null
 ): { primary: string; secondary: string | null } => {
+  console.log(summary);
   if (!summary || summary.priceCount === 0) {
     return { primary: '—', secondary: null };
   }

client/src/query/item-prices.ts

@@ -3,8 +3,10 @@ import {
   createItemPrice,
   deleteItemPrice,
   fetchItemPrices,
+  updateItemPrice,
   type CreateItemPricePayload,
-  type ItemPricesResponse
+  type ItemPricesResponse,
+  type UpdateItemPricePayload
 } from '../api/item-prices';
 import { projectsKeys } from './projects';
 
@@ -71,3 +73,24 @@ export const useDeleteItemPriceMutation = (
     }
   });
 };
+
+export const useUpdateItemPriceMutation = (
+  itemId: string | undefined,
+  projectId: string | undefined
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: { priceId: string; payload: UpdateItemPricePayload }) =>
+      updateItemPrice(variables.priceId, variables.payload),
+    onSuccess: () => {
+      if (itemId) {
+        queryClient.invalidateQueries({ queryKey: itemPricesKeys.list(itemId) });
+      }
+      if (projectId) {
+        queryClient.invalidateQueries({ queryKey: projectsKeys.items(projectId) });
+        queryClient.invalidateQueries({ queryKey: projectsKeys.detail(projectId) });
+      }
+    }
+  });
+};

server/src/db/item-prices-repository.ts

@@ -179,11 +179,10 @@ export const updateItemPrice = async (
   try {
     await client.query('BEGIN');
 
-    const existingResult = await client.query<ItemPriceRow>(
+    const existingResult = await client.query<{ id: string }>(
       `
-        SELECT ${priceColumns}
+        SELECT p.id
         FROM item_prices p
-        LEFT JOIN urls u ON u.id = p.source_url_id
         WHERE p.id = $1
         FOR UPDATE
       `,