Complete management interface and small changes

app/components/cards/drink.page.tsx

@@ -1,7 +1,8 @@
 
 import { Manufacturer } from '@zenstackhq/runtime/models';
-import { Col, Container, Image, Row, Table } from 'react-bootstrap';
-import { ContainerWithSection, DrinkComposite, isDrinkWithContainersAndSection, isDrinkWithManufacturer, isDrinkWithStyle } from '~/models/types';
+import { Alert, Badge, Col, Container, Image, Row, Table } from 'react-bootstrap';
+import { ContainerWithSection, DrinkComposite, containerTypeToString, isBeer, isDrinkWithContainersAndSection, isDrinkWithManufacturer, isDrinkWithStyle } from '~/models/types';
+import { volume } from '~/utils/conversions';
 
 interface Arguments {
     drink: DrinkComposite
@@ -10,8 +11,10 @@ interface Arguments {
 function DrinkPage(arg:Arguments) {
 
   var borderColor = "#bbb";
+  var style = (<></>);
   if(isDrinkWithStyle(arg.drink)){
     borderColor = "#" + arg.drink.style.color;
+    style = (<Badge bg="info">{arg.drink.style.name}</Badge>);
   }
 
   var manufacturer: Manufacturer | undefined = undefined;
@@ -19,40 +22,48 @@ function DrinkPage(arg:Arguments) {
     manufacturer = arg.drink.manufacturer;
   }
 
+  var glass = false;
+  var ibu = (<></>);
+  if(isBeer(arg.drink)){
+    glass = arg.drink.glass;
+    if(arg.drink.ibu)
+      ibu = (<Badge bg={arg.drink.ibu > 45 ? "warning" : "secondary"}>IBU: {arg.drink.ibu}</Badge>);
+  }
+
   var containers : ContainerWithSection[] = [];
   var totalinventory = 0;
+  var containerWithMultiplePortions = false;
   if(isDrinkWithContainersAndSection(arg.drink)){
     containers = arg.drink.containers;
     containers.map((container) => {
       totalinventory += container.inventory;
+
+      if((container.portions || 0) > 1){
+        containerWithMultiplePortions = true;
+      }
     })
   }
 
   return (
     <Container>
+        {glass ? (
+        <Alert variant='info'>
+          There is a glass available for this beer!
+        </Alert>
+        ): ""}
+
         <div className="p-5 mb-4 bg-body-tertiary rounded-3 border" style={{ borderColor: `${borderColor}`, borderWidth: '2px' }} >
             <Container fluid>
                 <Row>
                     <Col md={11}>
                         <h1 className="display-5 fw-bold">{arg.drink.name}</h1>
-                        ABV: {arg.drink.abv}% {arg.drink.gluten ? "" : " | Gluten-free"} {arg.drink.organic ? " | Organic" : ""}
+                        <Badge bg={arg.drink.abv > 0 ? "warning" : "secondary"}>ABV: {arg.drink.abv}%</Badge> {style} {ibu} {arg.drink.sugar ? "" : <Badge bg="success">Sugar-free</Badge>} {arg.drink.gluten ? "" : <Badge bg="success">Gluten-free</Badge>} {arg.drink.organic ? <Badge bg="success">Organic</Badge> : ""}
                         <p className="col-md-8 fs-4">{arg.drink.description}</p>
                     </Col>
                     <Col md={1}>
                         <Image src={arg.drink.image ?? undefined} fluid rounded/>
                     </Col>
                 </Row>
-                <Row>
-                    <Col>
-                        
-                    </Col>
-                    <Col>
-                        
-                    </Col>
-                    <Col>
-                        
-                    </Col>
-                </Row>
 
             </Container>
         </div>
@@ -69,6 +80,7 @@ function DrinkPage(arg:Arguments) {
                           <tr>
                             <th>Section</th>
                             <th>Container</th>
+                            <th>Volume</th>
                             <th>Amount</th>
                           </tr>
                         </thead>
@@ -76,13 +88,19 @@ function DrinkPage(arg:Arguments) {
                           {containers.map((container) => (
                               <tr key={container.barcode}>
                                 <td>{container.section.name}</td>
-                                <td>{container.type}</td>
+                                <td>{containerTypeToString(container.type)}</td>
+                                <td>{volume(container.volume)}</td>
                                 <td>{container.inventory}</td>
                               </tr>
                           ))}
                         </tbody>
                       </Table>
                     )}
+                    {containerWithMultiplePortions ? (
+                     <Alert variant="warning">
+                        This drink contains multiple portions! These should be scanned <u>only</u> when the container is empty!
+                      </Alert>
+                    ) : ""}
                 </div>
             </Col>
             { manufacturer ? (

app/components/filters/drink.filter.tsx

@@ -90,7 +90,7 @@ function DrinkFilter(arg : Arguments) {
             </Form.Group>
             <Form.Group controlId="drink-modifiers" className='mb-2'>
               <Form.Label>Drink</Form.Label>
-              { ["Gluten-free", "Organic"].map(key => (
+              { ["Sugar-free", "Gluten-free", "Organic"].map(key => (
                   <Form.Check
                     id={"drinkmod-" + key}
                     type="checkbox"