From 51541af7f215a08f7716b52974f3c2297b4774a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20Gro=C3=9F?= <mail@gross-johannes.de>
Date: Fri, 17 Jan 2025 16:41:08 +0100
Subject: [PATCH] fix: Fixed number localization and cocktail queue mobile
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Johannes Groß <mail@gross-johannes.de>
---
 components/cocktails/CocktailRecipeForm.tsx   | 37 ++++++--
 .../CompactCocktailRecipeInstruction.tsx      | 23 ++++-
 components/ingredients/IngredientForm.tsx     |  7 +-
 components/modals/CocktailDetailModal.tsx     | 26 +++++-
 components/modals/CocktailRatingsModal.tsx    |  8 +-
 pages/workspaces/[workspaceId]/index.tsx      | 18 ++--
 .../manage/calculations/[id].tsx              | 84 ++++++++++++++++---
 .../[workspaceId]/manage/cocktails/index.tsx  |  8 +-
 .../[workspaceId]/manage/garnishes/index.tsx  |  8 +-
 .../[workspaceId]/manage/glasses/index.tsx    |  8 +-
 .../manage/ingredients/index.tsx              | 14 +++-
 .../[workspaceId]/manage/settings/index.tsx   | 24 +++++-
 12 files changed, 219 insertions(+), 46 deletions(-)

diff --git a/components/cocktails/CocktailRecipeForm.tsx b/components/cocktails/CocktailRecipeForm.tsx
index 9edfdc0e..a702b912 100644
--- a/components/cocktails/CocktailRecipeForm.tsx
+++ b/components/cocktails/CocktailRecipeForm.tsx
@@ -837,13 +837,20 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                                     ?.IngredientVolume.find((volumeUnits) => volumeUnits.unitId == stepIngredient.unitId) != undefined ? (
                                     <>
                                       <div>
-                                        {stepIngredient.amount ?? 0} {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')} x{' '}
+                                        {stepIngredient.amount?.toLocaleString(undefined, {
+                                          minimumFractionDigits: 0,
+                                          maximumFractionDigits: 2,
+                                        }) ?? 0}{' '}
+                                        {userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')} x{' '}
                                         {(
                                           (stepIngredient.ingredient?.price ?? 0) /
                                           (ingredients
                                             .find((ingredient) => ingredient.id == stepIngredient.ingredientId)
                                             ?.IngredientVolume.find((volumeUnits) => volumeUnits.unitId == stepIngredient.unitId)?.volume ?? 1)
-                                        ).toFixed(2)}{' '}
+                                        ).toLocaleString(undefined, {
+                                          minimumFractionDigits: 2,
+                                          maximumFractionDigits: 2,
+                                        })}{' '}
                                         €/{userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}
                                       </div>
                                       <div className={'text-end'}>
@@ -854,7 +861,10 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                                               .find((ingredient) => ingredient.id == stepIngredient.ingredientId)
                                               ?.IngredientVolume.find((volumeUnits) => volumeUnits.unitId == stepIngredient.unitId)?.volume ?? 1)) *
                                           (stepIngredient.amount ?? 0)
-                                        ).toFixed(2)}
+                                        ).toLocaleString(undefined, {
+                                          minimumFractionDigits: 2,
+                                          maximumFractionDigits: 2,
+                                        })}
                                         €
                                       </div>
                                     </>
@@ -882,10 +892,20 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                         <>
                           <div key={`price-calculation-step-garnish-name`}>{garnish?.garnish?.name}</div>
                           <div key={`price-calculation-step-garnish-price`} className={'grid grid-cols-2'}>
-                            <div>1 x {(garnish?.garnish?.price ?? 0).toFixed(2)}</div>
+                            <div>
+                              1 x{' '}
+                              {(garnish?.garnish?.price ?? 0).toLocaleString(undefined, {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2,
+                              })}
+                            </div>
                             <div className={'text-end'}>
                               {(values.steps as CocktailRecipeStepFull[]).some((step) => step.ingredients.length > 0) ? '+ ' : ''}
-                              {(garnish?.garnish?.price ?? 0).toFixed(2)}€
+                              {(garnish?.garnish?.price ?? 0).toLocaleString(undefined, {
+                                minimumFractionDigits: 2,
+                                maximumFractionDigits: 2,
+                              })}
+                              €
                             </div>
                           </div>
                         </>
@@ -896,7 +916,12 @@ export function CocktailRecipeForm(props: CocktailRecipeFormProps) {
                     <div className={'grid grid-cols-3'}>
                       <div></div>
                       <div></div>
-                      <div className={'text-end font-bold'}>{calcCocktailTotalPrice(values, ingredients).toFixed(2) + ' €'}</div>
+                      <div className={'text-end font-bold'}>
+                        {calcCocktailTotalPrice(values, ingredients).toLocaleString(undefined, {
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2,
+                        }) + ' €'}
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/components/cocktails/CompactCocktailRecipeInstruction.tsx b/components/cocktails/CompactCocktailRecipeInstruction.tsx
index ae11a98a..02ce24d0 100644
--- a/components/cocktails/CompactCocktailRecipeInstruction.tsx
+++ b/components/cocktails/CompactCocktailRecipeInstruction.tsx
@@ -29,7 +29,16 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
       </div>
       {props.showPrice == true ? (
         <div className={'col-span-1 text-right text-xl font-bold'}>
-          {(props.specialPrice ?? props.cocktailRecipe.price) != undefined ? (props.specialPrice ?? props.cocktailRecipe.price + ' €') : ''}
+          {(props.specialPrice ?? props.cocktailRecipe.price) != undefined
+            ? (props.specialPrice?.toLocaleString(undefined, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+              }) ??
+              props.cocktailRecipe.price?.toLocaleString(undefined, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+              }) + ' €')
+            : ''}
         </div>
       ) : (
         <></>
@@ -65,7 +74,10 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
                   {(props.showRating.ratings.length > 0
                     ? props.showRating.ratings.reduce((acc, rating) => acc + rating.rating, 0) / props.showRating.ratings.length
                     : 0
-                  ).toFixed(1)}
+                  ).toLocaleString(undefined, {
+                    minimumFractionDigits: 1,
+                    maximumFractionDigits: 1,
+                  })}
                   <StarsComponent
                     rating={
                       props.showRating.ratings.length > 0
@@ -103,7 +115,12 @@ export function CompactCocktailRecipeInstruction(props: CompactCocktailRecipeIns
                       className={`flex flex-row gap-2 pl-2 ${stepIngredient.optional && 'italic'}`}
                     >
                       <div className={'flex flex-row gap-1'}>
-                        <div>{stepIngredient.amount ?? ''}</div>
+                        <div>
+                          {stepIngredient.amount?.toLocaleString(undefined, {
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 2,
+                          }) ?? ''}
+                        </div>
                         <div>{userContext.getTranslation(stepIngredient?.unit?.name ?? '', 'de')}</div>
                       </div>
                       <div>
diff --git a/components/ingredients/IngredientForm.tsx b/components/ingredients/IngredientForm.tsx
index 37e3d85d..e8a32e41 100644
--- a/components/ingredients/IngredientForm.tsx
+++ b/components/ingredients/IngredientForm.tsx
@@ -411,7 +411,12 @@ export function IngredientForm(props: IngredientFormProps) {
                       ) : (
                         (values.units as FormUnitValue[]).map((unit, index) => (
                           <tr key={`selected-units-${unit.unitId}`}>
-                            <td>{unit.volume.toFixed(2)}</td>
+                            <td>
+                              {unit.volume.toLocaleString(undefined, {
+                                minimumFractionDigits: 0,
+                                maximumFractionDigits: 2,
+                              })}
+                            </td>
                             <td>{userContext.getTranslation(allUnits.find((availableUnit) => availableUnit.id == unit.unitId)?.name ?? 'N/A', 'de')}</td>
                             <td>
                               {values.price != undefined ? (values.price / unit.volume).toFixed(2).replace(/\D00(?=\D*$)/, '') : '-'} €/
diff --git a/components/modals/CocktailDetailModal.tsx b/components/modals/CocktailDetailModal.tsx
index 31b6ec6e..6a48aca0 100644
--- a/components/modals/CocktailDetailModal.tsx
+++ b/components/modals/CocktailDetailModal.tsx
@@ -75,7 +75,12 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
               {loadedCocktail.price != undefined ? (
                 <>
                   {' - '}
-                  <span className={'font-bold'}>{loadedCocktail.price + ' €'}</span>
+                  <span className={'font-bold'}>
+                    {loadedCocktail.price.toLocaleString(undefined, {
+                      minimumFractionDigits: 0,
+                      maximumFractionDigits: 2,
+                    }) + ' €'}
+                  </span>
                 </>
               ) : (
                 <></>
@@ -169,7 +174,12 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
                               key={`cocktail-details-step-ingredient-${stepIngredient.id}`}
                               className={`flex flex-row gap-2 pl-3 ${stepIngredient.optional ? 'italic' : ''}`}
                             >
-                              <div className={'font-bold'}>{stepIngredient.amount}</div>
+                              <div className={'font-bold'}>
+                                {stepIngredient.amount?.toLocaleString(undefined, {
+                                  minimumFractionDigits: 0,
+                                  maximumFractionDigits: 2,
+                                })}
+                              </div>
                               <div className={'font-bold'}>{userContext.getTranslation(stepIngredient.unit?.name ?? '', 'de')}</div>
                               <div>{stepIngredient.ingredient?.shortName ?? stepIngredient.ingredient?.name}</div>
                               {stepIngredient.optional && <div>(optional)</div>}
@@ -259,7 +269,10 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
                       {ratingsLoading ? (
                         <Loading />
                       ) : (cocktailRatings ?? []).length > 0 ? (
-                        (cocktailRatings.reduce((acc, rating) => acc + rating.rating, 0) / cocktailRatings.length).toFixed(1)
+                        (cocktailRatings.reduce((acc, rating) => acc + rating.rating, 0) / cocktailRatings.length).toLocaleString(undefined, {
+                          minimumFractionDigits: 1,
+                          maximumFractionDigits: 1,
+                        })
                       ) : (
                         'Keine Bewertungen'
                       )}
@@ -424,7 +437,12 @@ export function CocktailDetailModal(props: CocktailDetailModalProps) {
               {userContext.isUserPermitted(Role.MANAGER) && ingredients && (
                 <>
                   <div className={'font-bold'}>Materialkosten</div>
-                  <div>{calcCocktailTotalPrice(loadedCocktail, ingredients).toFixed(2) + ' €'}</div>
+                  <div>
+                    {calcCocktailTotalPrice(loadedCocktail, ingredients).toLocaleString(undefined, {
+                      minimumFractionDigits: 0,
+                      maximumFractionDigits: 2,
+                    }) + ' €'}
+                  </div>
                 </>
               )}
             </div>
diff --git a/components/modals/CocktailRatingsModal.tsx b/components/modals/CocktailRatingsModal.tsx
index ed99eed1..c68e4245 100644
--- a/components/modals/CocktailRatingsModal.tsx
+++ b/components/modals/CocktailRatingsModal.tsx
@@ -66,7 +66,13 @@ export default function CocktailRatingsModal(props: CocktailRatingModalProps) {
   return (
     <div className={'flex flex-col gap-2'}>
       <div className={'flex flex-row items-center gap-1 text-2xl font-bold'}>
-        {props.cocktailName} - {cocktailRatings.length > 0 ? parseFloat(avgRating.toFixed(1).toString()).toLocaleString() : 'N/A'}{' '}
+        {props.cocktailName} -{' '}
+        {cocktailRatings.length > 0
+          ? avgRating.toLocaleString(undefined, {
+              minimumFractionDigits: 1,
+              maximumFractionDigits: 1,
+            })
+          : 'N/A'}{' '}
         <StarsComponent rating={avgRating} /> ({cocktailRatings.length})<div className={'flex-grow'}></div>
         <button
           type={'button'}
diff --git a/pages/workspaces/[workspaceId]/index.tsx b/pages/workspaces/[workspaceId]/index.tsx
index cc18996c..ff1060ee 100644
--- a/pages/workspaces/[workspaceId]/index.tsx
+++ b/pages/workspaces/[workspaceId]/index.tsx
@@ -359,18 +359,18 @@ export default function OverviewPage() {
                     .sortBy(['cocktailName', (item) => -(item.notes ?? '')]) // Sortiere nach cocktailName (asc) und notes (desc)
                     .value()
                     .map((cocktailQueueItem, index) => (
-                      <div key={`cocktailQueue-item-${index}`} className={'flex w-full flex-row justify-between gap-2 pb-1 pt-1 lg:flex-col'}>
-                        <div className={'flex flex-row items-center justify-between'}>
-                          <div className={'flex flex-row items-center gap-1'}>
-                            <div className={'font-bold'}>
-                              <strong>{cocktailQueueItem.count}x</strong> {cocktailQueueItem.cocktailName}
-                            </div>
+                      <div key={`cocktailQueue-item-${index}`} className={'flex w-full flex-row flex-wrap justify-between gap-2 pb-1 pt-1 lg:flex-col'}>
+                        <div className={'flex flex-row flex-wrap items-center justify-between gap-1'}>
+                          <div className={'font-bold'}>
+                            <strong>{cocktailQueueItem.count}x</strong> {cocktailQueueItem.cocktailName}
+                          </div>
+                          <span className={'flex flex-wrap gap-1'}>
                             {cocktailQueueItem.notes && <span className={'italic'}>mit Notiz</span>}
                             (seit {new Date(cocktailQueueItem.oldestTimestamp).toFormatTimeString()} Uhr)
-                          </div>
+                          </span>
                         </div>
-                        {cocktailQueueItem.notes && <span className={'pb-1 italic'}>Notiz: {cocktailQueueItem.notes}</span>}
-                        <div className={'space between flex flex-row gap-2'}>
+                        {cocktailQueueItem.notes && <span className={'italic lg:pb-1'}>Notiz: {cocktailQueueItem.notes}</span>}
+                        <div className={'flex w-full flex-row gap-2'}>
                           <div
                             className={'btn btn-square btn-outline btn-sm'}
                             onClick={() =>
diff --git a/pages/workspaces/[workspaceId]/manage/calculations/[id].tsx b/pages/workspaces/[workspaceId]/manage/calculations/[id].tsx
index cabae72b..f5aa111a 100644
--- a/pages/workspaces/[workspaceId]/manage/calculations/[id].tsx
+++ b/pages/workspaces/[workspaceId]/manage/calculations/[id].tsx
@@ -481,7 +481,12 @@ export default function CalculationPage() {
         .sortBy((group) => group[0].ingredient.name)
         .map(
           (items, key) =>
-            `${ingredientShoppingUnits.find((ingredient) => ingredient.ingredientId == items[0].ingredient.id)?.checked ? 'true' : 'false'},${items[0].ingredient.name},${calculateTotalIngredientAmount(items).toFixed(2)},${userContext.getTranslation(
+            `${ingredientShoppingUnits.find((ingredient) => ingredient.ingredientId == items[0].ingredient.id)?.checked ? 'true' : 'false'},${items[0].ingredient.name},${calculateTotalIngredientAmount(
+              items,
+            ).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })},${userContext.getTranslation(
               units.find((unit) => unit.id == ingredientShoppingUnits.find((ingredient) => ingredient.ingredientId == items[0].ingredient.id)?.unitId)?.name ??
                 'N/A',
               'de',
@@ -702,7 +707,12 @@ export default function CalculationPage() {
                             {showSalesStuff ? (
                               <>
                                 <td>
-                                  <span>{`${cocktail.cocktail.price ?? '-'} €`}</span>
+                                  <span>{`${
+                                    cocktail.cocktail.price?.toLocaleString(undefined, {
+                                      minimumFractionDigits: 0,
+                                      maximumFractionDigits: 2,
+                                    }) ?? '-'
+                                  } €`}</span>
                                 </td>
                                 <td>
                                   <div className={'join print:hidden'}>
@@ -727,7 +737,13 @@ export default function CalculationPage() {
                                     />
                                     <span className={'btn btn-secondary join-item btn-sm'}> €</span>
                                   </div>
-                                  <div className={'hidden print:flex'}>{cocktail.customPrice ?? '-'} €</div>
+                                  <div className={'hidden print:flex'}>
+                                    {cocktail.customPrice?.toLocaleString(undefined, {
+                                      minimumFractionDigits: 0,
+                                      maximumFractionDigits: 2,
+                                    }) ?? '-'}{' '}
+                                    €
+                                  </div>
                                 </td>
                               </>
                             ) : (
@@ -812,16 +828,37 @@ export default function CalculationPage() {
                             <tr key={'cocktail-' + cocktail.cocktail.id}>
                               <td>{cocktail.cocktail.name}</td>
                               <td>{cocktail.plannedAmount} x</td>
-                              <td>{calcCocktailTotalPrice(cocktail.cocktail, ingredients).toFixed(2)} €</td>
-                              <td>{(cocktail.plannedAmount * calcCocktailTotalPrice(cocktail.cocktail, ingredients)).toFixed(2)} €</td>
+                              <td>
+                                {calcCocktailTotalPrice(cocktail.cocktail, ingredients).toLocaleString(undefined, {
+                                  minimumFractionDigits: 2,
+                                  maximumFractionDigits: 2,
+                                })}{' '}
+                                €
+                              </td>
+                              <td>
+                                {(cocktail.plannedAmount * calcCocktailTotalPrice(cocktail.cocktail, ingredients)).toLocaleString(undefined, {
+                                  minimumFractionDigits: 2,
+                                  maximumFractionDigits: 2,
+                                })}{' '}
+                                €
+                              </td>
                               {showSalesStuff ? (
                                 <>
-                                  <td>{(cocktail.plannedAmount * (cocktail.customPrice ?? cocktail.cocktail.price ?? 0)).toFixed(2)}€</td>
+                                  <td>
+                                    {(cocktail.plannedAmount * (cocktail.customPrice ?? cocktail.cocktail.price ?? 0)).toLocaleString(undefined, {
+                                      minimumFractionDigits: 2,
+                                      maximumFractionDigits: 2,
+                                    })}
+                                    €
+                                  </td>
                                   <td>
                                     {(
                                       cocktail.plannedAmount * (cocktail.customPrice ?? cocktail.cocktail.price ?? 0) -
                                       cocktail.plannedAmount * calcCocktailTotalPrice(cocktail.cocktail, ingredients)
-                                    ).toFixed(2)}{' '}
+                                    ).toLocaleString(undefined, {
+                                      minimumFractionDigits: 2,
+                                      maximumFractionDigits: 2,
+                                    })}{' '}
                                     €
                                   </td>
                                 </>
@@ -840,7 +877,10 @@ export default function CalculationPage() {
                           {cocktailCalculationItems
                             .map((cocktail) => cocktail.plannedAmount * calcCocktailTotalPrice(cocktail.cocktail, ingredients))
                             .reduce((acc, curr) => acc + curr, 0)
-                            .toFixed(2)}{' '}
+                            .toLocaleString(undefined, {
+                              minimumFractionDigits: 2,
+                              maximumFractionDigits: 2,
+                            })}{' '}
                           €
                         </td>
                         {showSalesStuff ? (
@@ -849,7 +889,10 @@ export default function CalculationPage() {
                               {cocktailCalculationItems
                                 .map((cocktail) => cocktail.plannedAmount * (cocktail.customPrice ?? cocktail.cocktail.price ?? 0))
                                 .reduce((acc, curr) => acc + curr, 0)
-                                .toFixed(2)}{' '}
+                                .toLocaleString(undefined, {
+                                  minimumFractionDigits: 2,
+                                  maximumFractionDigits: 2,
+                                })}{' '}
                               €
                             </td>
                             <td>
@@ -860,7 +903,10 @@ export default function CalculationPage() {
                                     cocktail.plannedAmount * calcCocktailTotalPrice(cocktail.cocktail, ingredients),
                                 )
                                 .reduce((acc, curr) => acc + curr, 0)
-                                .toFixed(2)}{' '}
+                                .toLocaleString(undefined, {
+                                  minimumFractionDigits: 2,
+                                  maximumFractionDigits: 2,
+                                })}{' '}
                               €
                             </td>
                           </>
@@ -949,7 +995,11 @@ export default function CalculationPage() {
                               <td className={'flex flex-col'}>
                                 {items.map((item) => (
                                   <div key={`shopping-ingredient-${key}-unit-${item.unit.id}`}>
-                                    {item.amount.toFixed(2)} {userContext.getTranslation(item.unit.name ?? 'N/A', 'de')}
+                                    {item.amount.toLocaleString(undefined, {
+                                      minimumFractionDigits: 0,
+                                      maximumFractionDigits: 2,
+                                    })}{' '}
+                                    {userContext.getTranslation(item.unit.name ?? 'N/A', 'de')}
                                   </div>
                                 ))}
                               </td>
@@ -987,7 +1037,10 @@ export default function CalculationPage() {
                                 </select>
                               </td>
                               <td>
-                                {calculateTotalIngredientAmount(items).toFixed(2)}{' '}
+                                {calculateTotalIngredientAmount(items).toLocaleString(undefined, {
+                                  minimumFractionDigits: 0,
+                                  maximumFractionDigits: 2,
+                                })}{' '}
                                 {userContext.getTranslation(
                                   units.find(
                                     (unit) =>
@@ -1025,7 +1078,12 @@ export default function CalculationPage() {
                           .map((garnishCalculationItem) => (
                             <tr key={'garnishCalculation-' + garnishCalculationItem.garnish.id}>
                               <td>{garnishCalculationItem.garnish.name}</td>
-                              <td>{garnishCalculationItem.amount.toFixed(0)}</td>
+                              <td>
+                                {garnishCalculationItem.amount.toLocaleString(undefined, {
+                                  minimumFractionDigits: 0,
+                                  maximumFractionDigits: 0,
+                                })}
+                              </td>
                             </tr>
                           ))
                       )}
diff --git a/pages/workspaces/[workspaceId]/manage/cocktails/index.tsx b/pages/workspaces/[workspaceId]/manage/cocktails/index.tsx
index 256c707a..6e2dfa3a 100644
--- a/pages/workspaces/[workspaceId]/manage/cocktails/index.tsx
+++ b/pages/workspaces/[workspaceId]/manage/cocktails/index.tsx
@@ -84,7 +84,13 @@ export default function CocktailsOverviewPage() {
             {cocktailRecipe.name} {isArchived && '(Archiviert)'}
           </td>
           <td className={''}>
-            <span className={'whitespace-nowrap'}>{cocktailRecipe.price ?? '-'} €</span>
+            <span className={'whitespace-nowrap'}>
+              {cocktailRecipe.price?.toLocaleString(undefined, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+              }) ?? '-'}{' '}
+              €
+            </span>
           </td>
           <td className={'flex items-center gap-1'}>
             {cocktailRecipe.tags.map((tag) => (
diff --git a/pages/workspaces/[workspaceId]/manage/garnishes/index.tsx b/pages/workspaces/[workspaceId]/manage/garnishes/index.tsx
index 193fb4ac..035f28df 100644
--- a/pages/workspaces/[workspaceId]/manage/garnishes/index.tsx
+++ b/pages/workspaces/[workspaceId]/manage/garnishes/index.tsx
@@ -97,7 +97,13 @@ export default function ManageGlassesOverviewPage() {
                         <td>
                           <div className="font-bold">{garnish.name}</div>
                         </td>
-                        <td>{garnish.price ?? '-'} €</td>
+                        <td>
+                          {garnish.price?.toLocaleString(undefined, {
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 2,
+                          }) ?? '-'}{' '}
+                          €
+                        </td>
                         <ManageColumn entity={'garnishes'} id={garnish.id} onRefresh={() => fetchGarnishes(workspaceId, setGarnishes, setLoading)} />
                       </tr>
                     ))
diff --git a/pages/workspaces/[workspaceId]/manage/glasses/index.tsx b/pages/workspaces/[workspaceId]/manage/glasses/index.tsx
index db55c92b..817a1a17 100644
--- a/pages/workspaces/[workspaceId]/manage/glasses/index.tsx
+++ b/pages/workspaces/[workspaceId]/manage/glasses/index.tsx
@@ -102,7 +102,13 @@ export default function ManageGlassesOverviewPage() {
                         <td>
                           <div className="font-bold">{glass.name}</div>
                         </td>
-                        <td>{glass.deposit} €</td>
+                        <td>
+                          {glass.deposit.toLocaleString(undefined, {
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 2,
+                          })}{' '}
+                          €
+                        </td>
                         <ManageColumn entity={'glasses'} id={glass.id} onRefresh={() => fetchGlasses(workspaceId, setGlasses, setLoading)} />
                       </tr>
                     ))
diff --git a/pages/workspaces/[workspaceId]/manage/ingredients/index.tsx b/pages/workspaces/[workspaceId]/manage/ingredients/index.tsx
index efdab743..feb4160c 100644
--- a/pages/workspaces/[workspaceId]/manage/ingredients/index.tsx
+++ b/pages/workspaces/[workspaceId]/manage/ingredients/index.tsx
@@ -132,7 +132,13 @@ export default function IngredientsOverviewPage() {
                             <span>Anzeigen</span>
                           </button>
                         </td>
-                        <td className={'whitespace-nowrap'}>{ingredient.price ?? '-'} €</td>
+                        <td className={'whitespace-nowrap'}>
+                          {ingredient.price?.toLocaleString(undefined, {
+                            minimumFractionDigits: 0,
+                            maximumFractionDigits: 2,
+                          }) ?? '-'}{' '}
+                          €
+                        </td>
                         <td className={''}>
                           {ingredient.IngredientVolume.map((volume) => (
                             <div key={`ingredient-${ingredient.id}-volume-unit-${volume.id}`} className={'whitespace-nowrap'}>
@@ -143,7 +149,11 @@ export default function IngredientsOverviewPage() {
                         <td>
                           {ingredient.IngredientVolume.map((volume) => (
                             <div key={`ingredient-${ingredient.id}-volume-unit-price-${volume.id}`} className={'whitespace-nowrap'}>
-                              {((ingredient.price ?? 0) / volume.volume).toFixed(2)} €/{userContext.getTranslation(volume.unit.name, 'de')}
+                              {((ingredient.price ?? 0) / volume.volume).toLocaleString(undefined, {
+                                minimumFractionDigits: 0,
+                                maximumFractionDigits: 2,
+                              })}{' '}
+                              €/{userContext.getTranslation(volume.unit.name, 'de')}
                             </div>
                           ))}
                         </td>
diff --git a/pages/workspaces/[workspaceId]/manage/settings/index.tsx b/pages/workspaces/[workspaceId]/manage/settings/index.tsx
index 47afb6de..2007efaf 100644
--- a/pages/workspaces/[workspaceId]/manage/settings/index.tsx
+++ b/pages/workspaces/[workspaceId]/manage/settings/index.tsx
@@ -926,11 +926,19 @@ export default function WorkspaceSettingPage() {
                               .map((conversion) => (
                                 <tr key={`unit-conversion-${conversion.id}`}>
                                   <td>{userContext.getTranslation(units.find((unit) => unit.id == conversion.fromUnitId)?.name ?? '', 'de')}</td>
-                                  <td className={'text-right'}>{conversion.factor.toFixed(2)}</td>
+                                  <td className={'text-right'}>
+                                    {conversion.factor.toLocaleString(undefined, {
+                                      minimumFractionDigits: 2,
+                                      maximumFractionDigits: 2,
+                                    })}
+                                  </td>
                                   <td>{userContext.getTranslation(units.find((unit) => unit.id == conversion.toUnitId)?.name ?? '', 'de')}</td>
                                   <td>
                                     1 {userContext.getTranslation(units.find((unit) => unit.id == conversion.toUnitId)?.name ?? '', 'de')} ={' '}
-                                    {(1 / conversion.factor).toFixed(2)}{' '}
+                                    {(1 / conversion.factor).toLocaleString(undefined, {
+                                      minimumFractionDigits: 2,
+                                      maximumFractionDigits: 2,
+                                    })}{' '}
                                     {userContext.getTranslation(units.find((unit) => unit.id == conversion.fromUnitId)?.name ?? '', 'de')}
                                   </td>
                                   <td className={'flex flex-row justify-end gap-2'}>
@@ -986,11 +994,19 @@ export default function WorkspaceSettingPage() {
                                 .map((conversion) => (
                                   <tr key={`unit-conversion-${conversion.id}`}>
                                     <td>{userContext.getTranslation(units.find((unit) => unit.id == conversion.fromUnitId)?.name ?? 'N/A', 'de')}</td>
-                                    <td className={'text-right'}>{conversion.factor.toFixed(2)}</td>
+                                    <td className={'text-right'}>
+                                      {conversion.factor.toLocaleString(undefined, {
+                                        minimumFractionDigits: 2,
+                                        maximumFractionDigits: 2,
+                                      })}
+                                    </td>
                                     <td>{userContext.getTranslation(units.find((unit) => unit.id == conversion.toUnitId)?.name ?? 'N/A', 'de')}</td>
                                     <td>
                                       1 {userContext.getTranslation(units.find((unit) => unit.id == conversion.toUnitId)?.name ?? 'N/A', 'de')} ={' '}
-                                      {(1 / conversion.factor).toFixed(2)}{' '}
+                                      {(1 / conversion.factor).toLocaleString(undefined, {
+                                        minimumFractionDigits: 2,
+                                        maximumFractionDigits: 2,
+                                      })}{' '}
                                       {userContext.getTranslation(units.find((unit) => unit.id == conversion.fromUnitId)?.name ?? 'N/A', 'de')}
                                     </td>
                                     <td className={''}></td>