Merge pull request #84 from beatz174-bit/codex/update-read-only-view-in-productrow-a6vr8p

Remove unit text from ProductRow read-only view

src/components/ProductRow.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ProductRow } from './ProductRow';
+import { Product } from '../models/Product';
+
+const product: Product = {
+  id: 'prod-1',
+  name: 'Sparkling Water',
+  category: 'Drinks',
+  unit_type: 'bottle',
+  barcode: '123456',
+  archived: false,
+  created_at: 0,
+  updated_at: 0,
+};
+
+const categories = ['Drinks', 'Snacks'];
+
+describe('ProductRow', () => {
+  it('shows name, category, and barcode without unit text in read-only mode', () => {
+    render(
+      <ProductRow
+        product={product}
+        categories={categories}
+        onSave={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('Sparkling Water')).toBeInTheDocument();
+    expect(screen.getByText('Drinks')).toBeInTheDocument();
+    expect(screen.getByText(/Barcode: 123456/)).toBeInTheDocument();
+    expect(screen.queryByText(/bottle/i)).not.toBeInTheDocument();
+  });
+});

src/components/ProductRow.tsx

@@ -154,30 +154,18 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
             </Stack>
           </Stack>
         ) : (
-          <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" spacing={1.5} alignItems="center" sx={{ flex: 1, minWidth: 0 }}>
+            <div>
-              <Stack spacing={0.25} sx={{ minWidth: 0 }}>
+              <Typography variant="subtitle1">{product.name}</Typography>
-                <Typography variant="subtitle1" noWrap>
+              <Typography variant="caption" color="text.secondary">
-                  {product.name}
+                {product.category}
-                </Typography>
+              </Typography>
-                <Typography variant="caption" color="text.secondary" noWrap>
+            </div>
-                  {product.category} • {product.unit_type || DEFAULT_UNIT_TYPE}
+            {product.barcode ? (
-                </Typography>
+              <Typography variant="caption" color="text.secondary">
-              </Stack>
+                Barcode: {product.barcode}
-              {product.barcode ? (
+              </Typography>
-                <Typography variant="caption" color="text.secondary" noWrap>
+            ) : null}
-                  Barcode: {product.barcode}
-                </Typography>
-              ) : null}
-            </Stack>
-            <Box display="flex" alignItems="center" gap={0.5} sx={{ ml: 1 }}>
-              <IconButton aria-label={`Edit ${product.name}`} onClick={() => setIsEditing(true)} size="small">
-                <EditIcon fontSize="small" />
-              </IconButton>
-              <IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)} size="small">
-                <DeleteIcon fontSize="small" />
-              </IconButton>
-            </Box>
           </Stack>
         )}
       </CardContent>