From 975dd0bf1909eedd4b50bf96a06eb422011d1c19 Mon Sep 17 00:00:00 2001
From: Braighton Polack <braighton.polack@gmail.com>
Date: Mon, 28 Jul 2025 21:35:43 -0700
Subject: [PATCH] add batch total volume to cocktail sheet

---
 src/components/cocktails/cocktail-sheet.tsx | 47 +++++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/cocktails/cocktail-sheet.tsx b/src/components/cocktails/cocktail-sheet.tsx
index 8000b1b..8ecae6c 100644
--- a/src/components/cocktails/cocktail-sheet.tsx
+++ b/src/components/cocktails/cocktail-sheet.tsx
@@ -7,9 +7,9 @@ import {
   Plus,
   Settings2,
   Share,
-  X
+  X,
 } from 'lucide-react'
-import { Fragment, useState } from 'react'
+import { Fragment, useMemo, useState } from 'react'
 import {
   convertToPreferredUnits,
   simplifyValue,
@@ -79,6 +79,34 @@ export function CocktailSheet({
   const { data } = cocktailQuery
   const { data: userCocktailData } = userCocktailQuery
 
+  const batchTotalVolume = useMemo(() => {
+    if (!data) return { value: 0, units: 'ml' }
+
+    let units = 'ml'
+
+    const totalValue = data.ingredients.reduce((total, ingredient) => {
+      if (ingredient.units === 'oz' || ingredient.units === 'ml') {
+        const volume = convertToPreferredUnits(
+          ingredient.amount
+            ? new Prisma.Decimal(ingredient.amount).toNumber() * batchValue
+            : 0,
+          ingredient.units,
+          user?.preferredUnits,
+        )
+        units = volume.units || 'ml'
+        return total + volume.value
+      } else {
+        // Ignore non-volume ingredients
+        return total
+      }
+    }, 0)
+
+    return {
+      value: totalValue,
+      units,
+    }
+  }, [data, batchValue, user])
+
   const handlePreferredUnitsChange = async (preferredUnits: PreferredUnits) => {
     if (updateUser.isPending) {
       return
@@ -235,7 +263,7 @@ export function CocktailSheet({
                 <TooltipTrigger asChild>
                   <Button
                     className="[&_svg]:size-5"
-                    variant='outline'
+                    variant="outline"
                     size="icon"
                     onClick={handleShareClick}
                   >
@@ -354,6 +382,19 @@ export function CocktailSheet({
                       )
                     })}
                 </div>
+                {/* Show a badge for the batch total volume */}
+                {batchValue !== 1 && (
+                  <Badge variant="secondary" className="text-xs mt-4 ml-4">
+                    Total batch volume:{' '}
+                    {simplifyValue(
+                      batchTotalVolume.value,
+                      batchTotalVolume.units,
+                    )}{' '}
+                    <span className="text-muted-foreground">
+                      {batchTotalVolume.units}
+                    </span>
+                  </Badge>
+                )}
               </div>
               <div className="cocktail__instructions mb-6">
                 <div className="cocktail__label text-sm text-muted-foreground py-2 pl-4">