Abacus BO: print list of cats

src/abacus-backoffice/pages/cats.js

@@ -0,0 +1,14 @@
+// @flow
+
+import React, { type Element, type Node } from 'react';
+
+import CatsPageLayout from '../src/cats/CatsPageLayout';
+import LayoutApp from '../src/LayoutApp';
+
+export default function CatsPage(): Node {
+  return <CatsPageLayout />;
+}
+
+CatsPage.getLayout = (page: Element<typeof CatsPage>): Element<typeof LayoutApp> => (
+  <LayoutApp>{page}</LayoutApp>
+);

src/abacus-backoffice/src/Navigation.js

@@ -40,6 +40,9 @@ export default function Navigation(): React.Node {
       <Link href="/employees" xstyle={styles.link} xstyleActive={styles.linkActive}>
         <fbt desc="navigation link to employees">Employees</fbt>
       </Link>
+      <Link href="/cats" xstyle={styles.link} xstyleActive={styles.linkActive}>
+        <fbt desc="navigation link to the list of our cats">Our cats</fbt>
+      </Link>
       <Link href="/pos" xstyle={styles.link} xstyleActive={styles.linkActive}>
         <fbt desc="navigation link to point of sales sessions">POS sessions</fbt>
       </Link>

src/abacus-backoffice/src/cats/CatsPage.js

@@ -0,0 +1,62 @@
+// @flow
+
+import { Table } from '@adeira/sx-design';
+import * as React from 'react';
+import { graphql, useLazyLoadQuery } from '@adeira/relay';
+import fbt from 'fbt';
+
+import type { CatsPageQuery } from './__generated__/CatsPageQuery.graphql';
+
+export default function CatsPage(): React.Node {
+  const data = useLazyLoadQuery<CatsPageQuery>(graphql`
+    query CatsPageQuery {
+      cats {
+        listAllCats {
+          name
+        }
+      }
+    }
+  `);
+
+  return (
+    <Table
+      columns={[
+        {
+          Header: <fbt desc="order of the cat (table header)">Order</fbt>,
+          accessor: 'col1',
+        },
+        {
+          Header: <fbt desc="name of the cat (table header)">Name of the cat</fbt>,
+          accessor: 'col2',
+        },
+        {
+          Header: (
+            <fbt desc="date when the cat castration was performed (table header)">
+              Date of castration
+            </fbt>
+          ),
+          accessor: 'col3',
+        },
+        {
+          Header: (
+            <fbt desc="date of the last deworming (table header)">Date of last deworming</fbt>
+          ),
+          accessor: 'col4',
+        },
+        {
+          Header: <fbt desc="date of the cat adoption (table header)">Date of adoption</fbt>,
+          accessor: 'col5',
+        },
+      ]}
+      data={data.cats.listAllCats.map((cat) => {
+        return {
+          col1: <em>todo</em>,
+          col2: cat.name,
+          col3: <em>todo</em>,
+          col4: <em>todo</em>,
+          col5: <em>todo</em>,
+        };
+      })}
+    />
+  );
+}

src/abacus-backoffice/src/cats/CatsPageLayout.js

@@ -0,0 +1,18 @@
+// @flow
+
+import fbt from 'fbt';
+import * as React from 'react';
+
+import LayoutPage from '../LayoutPage';
+import CatsPage from './CatsPage';
+
+export default function CatsPageLayout(): React.Node {
+  return (
+    <LayoutPage
+      isBeta={true}
+      heading={<fbt desc="list of all our cats title">List of all our cats</fbt>}
+    >
+      <CatsPage />
+    </LayoutPage>
+  );
+}

src/abacus-backoffice/translations/out/es_MX.json

@@ -13,6 +13,12 @@
     "3JkX8r": "Ha ocurrido un error desconocido",
     "3m81kH": "Login with Google",
     "eiaXU": "Cerrar sesión",
+    "45KnjW": "Order",
+    "2ZEsha": "Name of the cat",
+    "1CTaXS": "Date of castration",
+    "qb7pS": "Date of last deworming",
+    "4fmUFn": "Date of adoption",
+    "13fb44": "List of all our cats",
     "28BiKm": "Status",
     "1W8aDx": "Name",
     "U9uFf": "activo",
@@ -46,6 +52,7 @@
     "2bLMT1": "Product add-ons",
     "1drf7n": "Eshop orders",
     "1RC251": "Empleados",
+    "4dPJaM": "Our cats",
     "kNzNr": "Sesiones de TPV",
     "36grCr": "Analytics: redirects",
     "3Eos2U": "Status",
@@ -128,4 +135,4 @@
     "4jOEjB": "All products available across all our services are here.",
     "TeM0w": "Crear un nuevo producto"
   }
-}
+}