feature: visibility for disabled items in admin menu, better disabled item handling

Author: mel1na

backend/controllers/api/v1/item.go

@@ -87,7 +87,7 @@ func CreateItem(c *gin.Context) {
 //	@Router			/items [get]
 func FindItems(c *gin.Context) {
 	var items []models.Item
-	models.DB.Order("created_at ASC").Where("is_active = ?", true).Where("deleted_at IS NULL").Find(&items)
+	models.DB.Order("created_at ASC").Where("deleted_at IS NULL").Find(&items)
 
 	c.Header("Content-Type", "application/json")
 	c.JSON(http.StatusOK, gin.H{"data": items})

backend/controllers/api/v1/purchase.go

@@ -69,12 +69,12 @@ func CreatePurchase(c *gin.Context) {
 	}
 
 	if input.Amount != 0 && len(input.Items) != 0 {
-		c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"message": "only one of 'items' and 'amount' can be specified"})
+		c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"message": "Only one of 'items' and 'amount' can be specified"})
 		return
 	}
 
 	if input.Amount != 0 && input.PaymentType == models.PaymentTypeBalance {
-		c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"message": "balance payment type cannot be used with amount"})
+		c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"message": "Balance payment type cannot be used with amount"})
 		return
 	}
 
@@ -85,6 +85,10 @@ func CreatePurchase(c *gin.Context) {
 
 	for _, v := range input.Items {
 		item := FindItemById(v.ItemId)
+		if item.IsActive != nil && *item.IsActive == false {
+			c.AbortWithStatusJSON(http.StatusBadRequest, gin.H{"message": "Attempted to purchase inactive item"})
+			return
+		}
 		finalCost += item.Price * v.Amount
 		returnedItemsArray = append(returnedItemsArray, models.PurchaseItem{ItemId: v.ItemId, ProductName: item.ProductName, ProductVariant: item.ProductVariant, Price: item.Price, Amount: v.Amount})
 		if v.Amount > 1 {

frontend/app/items/page.tsx

@@ -48,10 +48,13 @@ export default function ItemsPage() {
     return <div className="flex justify-center mt-20">Loading...</div>;
   }
 
+  // Filter to show only active items
+  const activeItems = items.filter((item) => item.is_active === true);
+
   return (
     <div className="p-4">
       <BarcodeSearchInput items={items} visible={false} />
-      <ItemCards items={items} onItemClick={addItem} />
+      <ItemCards items={activeItems} onItemClick={addItem} />
     </div>
   );
 }

frontend/components/item-cards.tsx

@@ -25,49 +25,61 @@ export default function ItemCards({ items, onItemClick }: ItemCardsProps) {
 
   return (
     <div className="w-full px-4 pb-4 gap-4 flex flex-wrap justify-center">
-      {items.map((item) => (
-        <div key={item.id} className="w-48">
-          <Button
-            variant="ghost"
-            className="p-0 w-full min-h-68"
-            onClick={() => handleClick(item)}
-          >
-            <Card className="w-full h-full">
-              <CardContent className="pt-2 px-4 pb-2 h-full flex flex-col items-center justify-center">
-                <div className="aspect-square rounded-md overflow-hidden flex-shrink-0 w-full">
-                  {item.image ? (
-                    <Image
-                      src={item.image}
-                      alt={
-                        item.variant
-                          ? `${item.name} ${item.variant}`
-                          : item.name
-                      }
-                      className="object-contain h-full w-full"
-                      width={100}
-                      height={100}
-                    />
-                  ) : (
-                    <div className="flex items-center justify-center h-full w-full">
-                      <span className="text-gray-400 text-[4rem] font-bold">
-                        ?
-                      </span>
-                    </div>
-                  )}
-                </div>
-                <div className="flex flex-col items-center justify-center text-center mt-3 flex-grow w-full">
-                  <CardTitle className="mt-2 text-center text-base leading-normal w-full whitespace-normal break-words">
-                    {item.variant ? `${item.name} ${item.variant}` : item.name}
-                  </CardTitle>
-                  <span className="text-xs text-gray-500 mt-1">
-                    {(item.price / 100).toFixed(2)}€ / {item.volume}ml
-                  </span>
-                </div>
-              </CardContent>
-            </Card>
-          </Button>
-        </div>
-      ))}
+      {items.map((item) => {
+        const isInactive =
+          item.is_active === false ||
+          item.is_active === null ||
+          item.is_active === undefined;
+        return (
+          <div key={item.id} className="w-48">
+            <Button
+              variant="ghost"
+              className="p-0 w-full min-h-68"
+              onClick={() => handleClick(item)}
+            >
+              <Card
+                className={`w-full h-full ${
+                  isInactive ? "opacity-50 bg-gray-100 dark:bg-gray-800" : ""
+                }`}
+              >
+                <CardContent className="pt-2 px-4 pb-2 h-full flex flex-col items-center justify-center">
+                  <div className="aspect-square rounded-md overflow-hidden flex-shrink-0 w-full">
+                    {item.image ? (
+                      <Image
+                        src={item.image}
+                        alt={
+                          item.variant
+                            ? `${item.name} ${item.variant}`
+                            : item.name
+                        }
+                        className="object-contain h-full w-full"
+                        width={100}
+                        height={100}
+                      />
+                    ) : (
+                      <div className="flex items-center justify-center h-full w-full">
+                        <span className="text-gray-400 text-[4rem] font-bold">
+                          ?
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex flex-col items-center justify-center text-center mt-3 flex-grow w-full">
+                    <CardTitle className="mt-2 text-center text-base leading-normal w-full whitespace-normal break-words">
+                      {item.variant
+                        ? `${item.name} ${item.variant}`
+                        : item.name}
+                    </CardTitle>
+                    <span className="text-xs text-gray-500 mt-1">
+                      {(item.price / 100).toFixed(2)}€ / {item.volume}ml
+                    </span>
+                  </div>
+                </CardContent>
+              </Card>
+            </Button>
+          </div>
+        );
+      })}
     </div>
   );
 }

frontend/types/item.ts

@@ -8,7 +8,7 @@ export type Item = {
   amount?: number;
   barcodes?: string[];
   nutrition_info?: NutritionInfo[];
-  is_active: boolean;
+  is_active?: boolean;
 };
 
 type NutritionInfo = {