UI fixes

webapp/src/components/AccordionTreeView.js

@@ -16,7 +16,7 @@ import LinearProgress from '@material-ui/core/LinearProgress'
 
 import { formatAsset, getLastChars } from '../utils'
 
-const VACCINE_PARENT = 'container'
+const VACCINE_PARENT = 'case'
 
 const useStyles = makeStyles(theme => ({
   accordionWrapper: {
@@ -212,7 +212,7 @@ const AccordionTreeView = ({ data }) => {
         formatAsset(
           {
             assets: data || [],
-            category: 'order'
+            category: 'pallet'
           },
           t
         )

webapp/src/language/en.json

@@ -299,13 +299,23 @@
     "cases": "Cases per pallet",
     "vaccines": "VAccines per cases",
     "successMessage": "REquest processed successfully",
-    "isRequired":"*field required.",
-    "dateMessage":"*date must be greater than current."
+    "isRequired": "*field required.",
+    "dateMessage": "*date must be greater than current."
   },
   "AssetInfo": {
     "update": "Update asset",
     "detach": "Detach items",
     "offer": "Offer",
     "history": "History"
+  },
+  "about": {
+    "title1": "What Is Inmutrust?",
+    "content1": "Inmutrust leverages blockchain technology to guarantee transparency and trust in the distribution of vaccines. Deploying blockchain allows Inmutrust to integrate features to offer full traceability of the logistics of vaccines in global environments and according to health entities' standards. The platform includes features for different users, such as permits and authorization management, to handle transactions properly. It also allows full visibility and traceability of the inventory of vaccines. Blockchain enables immutable registries of data, meaning these records cannot be altered without consent. Moreover, Inmustrust allows a user to register control points and operative data within the platform. Inmustrust was developed by EOS Costa Rica, together with LACChain. LACChain is an initiative by the Inter-American Development Bank to promote the development of the blockchain ecosystem in Latin America and the Caribbean. For more information about both organizations, please visit https://eoscostarica.io/ and https://www.lacchain.net/.",
+    "title2": "For Whom Is Inmutrust?",
+    "content2": "We designed Inmutrust to help government entities quickly implement it for the benefit of the population. Inmutrust can increase transparency and trust regarding the vaccines' distribution since blockchain enables immutable registries, meaning they cannot be altered or hacked.",
+    "title3": "Project Background",
+    "content3": "Amid the COVID-19 pandemic, pharmaceutical companies developed vaccines against the SARS-CoV-2 virus outbreak. Governments and institutions are also leading a global effort to vaccinate the world population's totality and end the pandemic. To date, several vaccines have demonstrated their efficacy upon continuous studies. Each of these vaccines has different requirements in terms of storage temperatures, expiration times, and handling, requiring precise traceability across logistics operations to safeguard its integrity. The team of LACChain leads a project to create and promote a solution that deploys blockchain technology to guarantee full traceability of the vaccines, regardless of their origin. This solution will help track each vaccine from the manufacturer to its application, certifying that it did not have any irregularities during its supply chain process. ",
+    "title4": "Why blockchain?",
+    "content4": "A blockchain can register transactions immutably and securely, meaning each vaccine's data cannot be altered or hacked. The team of EOS Costa Rica is currently developing a solution deploying the EOSIO blockchain protocol. This technology guarantees reliable and near-real-time traceability of the vaccines. Moreover, EOSIO technology is highly scalable and enables improved efficiency when storing data, ideal for executing millions of transactions in a safe environment."
   }
 }

webapp/src/language/es.json

@@ -292,13 +292,23 @@
     "cases": "Cajas por paleta",
     "vaccines": "Vacunas por caja",
     "successMessage": "Solicitud procesada correctamente",
-    "isRequired":"*campo requerido.",
-    "dateMessage":"*fecha debe ser mayor a hoy."
+    "isRequired": "*campo requerido.",
+    "dateMessage": "*fecha debe ser mayor a hoy."
   },
   "AssetInfo": {
     "update": "Actualizar datos de control",
     "detach": "Separar ítems",
     "offer": "Ofertar",
     "history": "Historial"
+  },
+  "about": {
+    "title1": "¿Qué es Inmutrust?",
+    "content1": "Inmutrust es una plataforma que utiliza los beneficios de la tecnología blockchain para garantizar transparencia y confianza en la distribución de vacunas. El uso de blockchain permite a Inmutrust integrar funcionalidades para una completa trazabilidad de la logística de vacunas en ambientes globales y de acuerdo a los estándares de las entidades de salud. La plataforma incluye funcionalidades para diferentes usuarios, con gestión de permisos y autorizaciones para el adecuado manejo de las transacciones. Además, permite visibilidad y trazabilidad total del inventario de vacunas. Al implementar blockchain, estos registros se mantienen de forma inmutable, por lo que no pueden ser alterados sin permiso. Asimismo, Inmutrust permite el registro de puntos de control y datos operativos dentro de la plataforma. Inmutrust es un proyecto desarrollado por la empresa EOS Costa Rica, en conjunto con LACChain. LACChain es una iniciativa del Banco Interamericano de Desarrollo para impulsar y promover el desarrollo del ecosistema blockchain en Latinoamérica y el Caribe. Para más información sobre ambas organizaciones, puede dirigirse a https://eoscostarica.io/ y https://www.lacchain.net/.",
+    "title2": "¿Para quién es Inmutrust?",
+    "content2": "Inmutrust es una plataforma diseñada para que las entidades de gobierno correspondientes puedan implementarla fácilmente para beneficio de la población. Inmutrust tiene la capacidad de aumentar la transparencia y confianza de la población con respecto a la distribución de las vacunas, ya que los registros en una blockchain se mantienen inmutables, por lo que no pueden ser alterados o hackeados.",
+    "title3": "Antecedentes del proyecto",
+    "content3": "Durante la pandemia de la COVID-19, compañías farmacéuticas han desarrollado una vacuna contra el virus SARS-CoV-2. Los gobiernos e instituciones han liderado un esfuerzo global y planean vacunar a la totalidad de la población mundial para terminar la pandemia. A la fecha, han sido aprobadas varias vacunas con eficacia demostrada luego de rigurosos estudios. Cada una de estas vacunas tiene diferentes requisitos en términos de temperaturas de almacenamiento, tiempos de expiración y el manejo de los lotes, lo que requiere trazabilidad precisa a través de las operaciones logísticas con el fin de salvaguardar la integridad de las vacunas. El equipo de LACChain lidera el proyecto para crear y promover una solución que asegure la trazabilidad de las vacunas, independiente de su origen. Esta solución pretende facilitar el rastreo de los lotes de vacunas desde su fabricante hasta la aplicación de la inyección, certificando que no hubo irregularidades durante el proceso de cadena de suministro. ",
+    "title4": "¿Por qué blockchain?",
+    "content4": "Una blockchain puede registrar transacciones de forma inmutable y segura, lo que quiere decir que los datos de cada vacuna no podrán ser alterados o hackeados. El equipo de EOS Costa Rica ha estado a cargo del desarrollo implementando tecnología blockchain EOSIO. Esta tecnología permite garantizar trazabilidad confiable y en tiempo real de las vacunas. Además, EOSIO es una tecnología escalable que permite eficiencia para el registro de datos, ideal para ejecutar millones de transacciones en un ambiente seguro. "
   }
 }

webapp/src/routes/About.js

@@ -9,42 +9,51 @@ const useStyles = makeStyles(theme => ({
   title: {
     marginBottom: theme.spacing(1),
     fontWeight: 400
+  },
+  openDataLabel: {
+    margin: theme.spacing(2)
   }
 }))
 
 const About = () => {
   const classes = useStyles()
-  const { t } = useTranslation('aboutRoute')
+  const { t } = useTranslation('about')
 
   return (
-    <Box>
+    <Box margin={1}>
       <Grid container direction="column">
         <Grid item xs>
           <Grid container direction="column">
-            <Typography variant="h3" className={classes.title}>
-              {t('title')}
+            <Typography variant="h4">{t('title1')}</Typography>
+            <Typography className={classes.openDataLabel}>
+              {t('content1')}
             </Typography>
-            <Typography variant="h4">{t('subtitle1')}</Typography>
-            <Typography variant="body2" align="justify" paragraph>
-              {t('paragraph1')}
+          </Grid>
+        </Grid>
+
+        <Grid item xs>
+          <Grid container direction="column">
+            <Typography variant="h4">{t('title2')}</Typography>
+            <Typography className={classes.openDataLabel}>
+              {t('content2')}
             </Typography>
           </Grid>
         </Grid>
 
         <Grid item xs>
           <Grid container direction="column">
-            <Typography variant="h4">{t('subtitle2')}</Typography>
-            <Typography variant="body2" align="justify" paragraph>
-              {t('paragraph2')}
+            <Typography variant="h4">{t('title3')}</Typography>
+            <Typography className={classes.openDataLabel}>
+              {t('content3')}
             </Typography>
           </Grid>
         </Grid>
 
         <Grid item xs>
           <Grid container direction="column">
-            <Typography variant="h4">{t('subtitle3')}</Typography>
-            <Typography variant="body2" align="justify" paragraph>
-              {t('paragraph3')}
+            <Typography variant="h4">{t('title4')}</Typography>
+            <Typography className={classes.openDataLabel}>
+              {t('content4')}
             </Typography>
           </Grid>
         </Grid>

webapp/src/routes/Inventory.js

@@ -5,9 +5,8 @@ import { useLocation } from 'react-router-dom'
 import { useLazyQuery } from '@apollo/react-hooks'
 import Fab from '@material-ui/core/Fab'
 import AddIcon from '@material-ui/icons/Add'
-import { useSharedState } from '../context/state.context'
-import ExploreIcon from '@material-ui/icons/Explore'
 
+import { useSharedState } from '../context/state.context'
 import MasterDetail from '../layouts/MasterDetail'
 import Filter from '../components/Filter'
 import ListItems from '../components/ListItems'
@@ -104,6 +103,15 @@ const statusMap = {
 }
 const FILTERS = ['pallet', 'case', 'vaccine']
 
+const VaccineSvg = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18">
+    <path
+      d="M18 3.6655L14.3345 0L12.9523 1.38222L14.0938 2.5235L11.7371 4.88021L10.5958 3.73893L8.70922 1.87181L7.331 3.25004L8.71908 4.63812L3.02084 10.3364L1.63839 11.7186L3.02459 13.0987L0 18L4.90133 14.9754L6.28448 16.3586L7.66365 14.9792L13.3619 9.28116L14.75 10.669L16.1282 9.29078L13.1095 6.27205L15.4662 3.91534L16.6178 5.04771L18 3.6655ZM6.28049 13.5962L4.40376 11.7195L9.83339 6.29011L11.7101 8.16685L6.28049 13.5962Z"
+      fill="white"
+    />
+  </svg>
+)
+
 // TODO: format date
 const Inventory = () => {
   const classes = useStyles()
@@ -306,7 +314,7 @@ const Inventory = () => {
               aria-label="add"
               onClick={() => handleOpenModal('vaccinate')}
             >
-              <ExploreIcon />
+              <VaccineSvg />
             </Fab>
           )}
         </>

webapp/src/utils/asset-info-format.js

@@ -16,23 +16,14 @@ const countChildren = (obj, path) => {
 }
 
 const formatString = (category, path) => {
-  const { batch, box, wrapper, container, order } = path
+  const { pallet, case: box } = path
 
   switch (category) {
-    case 'order':
-      return `${order.quantity} ${order.name}/${batch.quantity} ${batch.name}/${box.quantity} ${box.name}/${wrapper.quantity} ${wrapper.name}/${container.quantity} ${container.name}`
+    case 'case':
+      return `${box.quantity} ${box.name}`
 
-    case 'batch':
-      return `${batch.quantity} ${batch.name}/${box.quantity} ${box.name}/${wrapper.quantity} ${wrapper.name}/${container.quantity} ${container.name}`
-
-    case 'box':
-      return `${box.quantity} ${box.name}/${wrapper.quantity} ${wrapper.name}/${container.quantity} ${container.name}`
-
-    case 'wrapper':
-      return `${wrapper.quantity} ${wrapper.name}/${container.quantity} ${container.name}`
-
-    case 'container':
-      return `${container.quantity} ${container.name}`
+    case 'pallet':
+      return `${pallet.quantity} ${pallet.name}/${box.quantity} ${box.name}`
 
     default:
       return ''
@@ -45,10 +36,7 @@ export const formatAsset = (data, t) => {
     batch: { name: t('palletAbbr'), quantity: 0 },
     pallet: { name: t('caseAbbr'), quantity: 0 },
     case: { name: t('vaccineAbbr'), quantity: 0 },
-    vaccine: { name: '', quantity: 0 },
-    box: { name: t('wrapperAbbr'), quantity: 0 },
-    wrapper: { name: t('containerAbbr'), quantity: 0 },
-    container: { name: t('vaccineAbbr'), quantity: 0 }
+    vaccine: { name: '', quantity: 0 }
   }
 
   countChildren(data, path)