Merge pull request #10 from beatz174-bit/codex/find-purpose-of-unit-type-and-bulk-name

Use fixed unit and bulk labels in product UI

src/components/ProductRow.tsx

@@ -13,7 +13,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import { ChangeEvent, useEffect, useState } from 'react';
-import { Product } from '../models/Product';
+import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE, Product } from '../models/Product';
 
 interface ProductRowProps {
   product: Product;
@@ -23,8 +23,6 @@ interface ProductRowProps {
     updates: {
       name: string;
       category: string;
-      unit_type: string;
-      bulk_name?: string;
       units_per_bulk?: number;
     },
   ) => Promise<void> | void;
@@ -34,16 +32,12 @@ interface ProductRowProps {
 interface ProductFormState {
   name: string;
   category: string;
-  unitType: string;
-  bulkName: string;
   unitsPerBulk: string;
 }
 
 const getInitialFormState = (product: Product): ProductFormState => ({
   name: product.name,
   category: product.category,
-  unitType: product.unit_type,
-  bulkName: product.bulk_name ?? '',
   unitsPerBulk: product.units_per_bulk?.toString() ?? '',
 });
 
@@ -64,8 +58,6 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
     await onSave(product.id, {
       name: formState.name,
       category: formState.category,
-      unit_type: formState.unitType,
-      bulk_name: formState.bulkName || undefined,
       units_per_bulk: formState.unitsPerBulk ? Number(formState.unitsPerBulk) : undefined,
     });
     setIsEditing(false);
@@ -95,27 +87,11 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
                 </MenuItem>
               ))}
             </TextField>
-            <Stack direction="row" spacing={1}>
-              <TextField
-                label="Unit Type"
-                value={formState.unitType}
-                onChange={handleChange('unitType')}
-                size="small"
-                fullWidth
-              />
-              <TextField
-                label="Units per Bulk"
-                type="number"
-                value={formState.unitsPerBulk}
-                onChange={handleChange('unitsPerBulk')}
-                size="small"
-                fullWidth
-              />
-            </Stack>
             <TextField
-              label="Bulk Name"
+              label="Units per Bulk"
-              value={formState.bulkName}
+              type="number"
-              onChange={handleChange('bulkName')}
+              value={formState.unitsPerBulk}
+              onChange={handleChange('unitsPerBulk')}
               size="small"
             />
           </Stack>
@@ -124,12 +100,12 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
             <div>
               <Typography variant="subtitle1">{product.name}</Typography>
               <Typography variant="caption" color="text.secondary">
-                {product.category} • {product.unit_type}
+                {product.category} • {product.unit_type || DEFAULT_UNIT_TYPE}
               </Typography>
             </div>
-            {product.bulk_name && product.units_per_bulk ? (
+            {product.units_per_bulk ? (
               <Typography variant="caption" color="text.secondary">
-                {product.units_per_bulk} per {product.bulk_name}
+                {product.units_per_bulk} per {product.bulk_name || DEFAULT_BULK_NAME}
               </Typography>
             ) : null}
           </Stack>

src/db/seed.ts

@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import { StockFillDB } from './index';
+import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE } from '../models/Product';
 
 const now = () => Date.now();
 
@@ -30,8 +31,8 @@ export const seedDatabase = async (db: StockFillDB) => {
         id: uuidv4(),
         name: 'Sparkling Water 500ml',
         category: 'Drinks',
-        unit_type: 'bottle',
+        unit_type: DEFAULT_UNIT_TYPE,
-        bulk_name: 'case',
+        bulk_name: DEFAULT_BULK_NAME,
         units_per_bulk: 12,
         archived: false,
         created_at: now(),
@@ -41,8 +42,8 @@ export const seedDatabase = async (db: StockFillDB) => {
         id: uuidv4(),
         name: 'Salted Chips 50g',
         category: 'Snacks',
-        unit_type: 'bag',
+        unit_type: DEFAULT_UNIT_TYPE,
-        bulk_name: 'box',
+        bulk_name: DEFAULT_BULK_NAME,
         units_per_bulk: 24,
         archived: false,
         created_at: now(),
@@ -52,8 +53,8 @@ export const seedDatabase = async (db: StockFillDB) => {
         id: uuidv4(),
         name: 'Chocolate Bar',
         category: 'Confectionery',
-        unit_type: 'bar',
+        unit_type: DEFAULT_UNIT_TYPE,
-        bulk_name: 'slab',
+        bulk_name: DEFAULT_BULK_NAME,
         units_per_bulk: 32,
         archived: false,
         created_at: now(),

src/models/Product.ts

@@ -10,3 +10,6 @@ export interface Product {
   created_at: number;
   updated_at: number;
 }
+
+export const DEFAULT_UNIT_TYPE = 'unit';
+export const DEFAULT_BULK_NAME = 'carton';

src/screens/ManageProductsScreen.tsx

@@ -14,6 +14,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { ProductRow } from '../components/ProductRow';
 import { useCategories, useProducts } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
+import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE } from '../models/Product';
 
 export const ManageProductsScreen = () => {
   const db = useDatabase();
@@ -22,8 +23,6 @@ export const ManageProductsScreen = () => {
   const [search, setSearch] = useState('');
   const [name, setName] = useState('');
   const [category, setCategory] = useState('');
-  const [unitType, setUnitType] = useState('unit');
-  const [bulkName, setBulkName] = useState('case');
   const [unitsPerBulk, setUnitsPerBulk] = useState(6);
 
   const categoryOptions = useMemo(() => {
@@ -53,8 +52,8 @@ export const ManageProductsScreen = () => {
       id: uuidv4(),
       name,
       category,
-      unit_type: unitType,
+      unit_type: DEFAULT_UNIT_TYPE,
-      bulk_name: bulkName,
+      bulk_name: DEFAULT_BULK_NAME,
       units_per_bulk: unitsPerBulk,
       archived: false,
       created_at: Date.now(),
@@ -68,12 +67,15 @@ export const ManageProductsScreen = () => {
     updates: {
       name: string;
       category: string;
-      unit_type: string;
-      bulk_name?: string;
       units_per_bulk?: number;
     },
   ) => {
-    await db.products.update(productId, { ...updates, updated_at: Date.now() });
+    await db.products.update(productId, {
+      ...updates,
+      unit_type: DEFAULT_UNIT_TYPE,
+      bulk_name: DEFAULT_BULK_NAME,
+      updated_at: Date.now(),
+    });
   };
 
   const deleteProduct = async (productId: string) => {
@@ -111,8 +113,6 @@ export const ManageProductsScreen = () => {
               </MenuItem>
             ))}
           </TextField>
-          <TextField label="Unit Type" value={unitType} onChange={(event) => setUnitType(event.target.value)} />
-          <TextField label="Bulk Name" value={bulkName} onChange={(event) => setBulkName(event.target.value)} />
           <TextField
             label="Units per Bulk"
             type="number"