imbric-theme 0.3.3 → 0.3.6

package/layout/DynamicTable/constants.js

@@ -0,0 +1,323 @@
+export const options = {
+
+    bookings: [
+        {
+            id: 346248956,
+            idUser: 146280,
+            idAuthorization: 817457,
+            status: 30,
+            origin: {
+                addressField: "Cines Embajadores, Glorieta Sta. María de la Cabeza, 5, 28045 Madrid",
+                lat: 40.40068,
+                lon: -3.698589
+            },
+            destination: {
+                addressField: "Estación de Chamartín, Madrid, España",
+                lat: 40.47237,
+                lon: -3.683141
+            },
+            timeBookingStartRealTimestamp: 1653559804000,
+            asap: true,
+            paymentMethod: 50,
+            entryChannel: 15,
+            idSupplierFleet: 57,
+            idSupplier: 57,
+            distanceMeters: 10501,
+            durationMinutes: 0,
+            location: "MADRID",
+            passengerName: "Alberto Alvarez Gonzalez",
+            phoneNumberPassenger: "453654654",
+            phoneNumberTaxiDriver: "600000000",
+            idSupplierTax: "11",
+            idSupplierServic: "15828",
+            cancelledWithCharg: false,
+            priceCustomer: "25.00000",
+            priceSupplier: "25.00000",
+            phoneNumberSupplier: "676800672",
+            idAuthorizationGroup: 335,
+            supplierTaxiDescription: "Seat León | 4",
+            subscriberCode: "6300",
+            userNumber: "93271095",
+            idService: 1946195318,
+            shared: false,
+            timeZone: "Europe/Madrid",
+            notes: "2022-05-26 10:10:03 | 11 | Laura | 150 | Servicio solicitado Portal - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML  like Gecko) Chrome/101.0.4951.64 Safari/537.36. WL 4069\n2022-05-26 10:10:03 | 33 | SYSTEM | 114 | El número de vuelo es a.\n2022-05-26 10:10:03 | 33 | SYSTEM | 149 | Servicio enviado a MADRID_TAKSEE_TAXI (57)\n2022-05-26 10:10:12 | 44 | SYSTEM | 110 | Ha ocurrido un error enviando el email de confirmación al usuario\n2022-05-26 10:10:12 | 11 | SYSTEM | 130 | Confirmado por: MADRID_TAKSEE_TAXI (Taxi: 11). Num. servicio: 15828\n2022-05-26 10:10:44 | 33 | SYSTEM | 136 | Finalizado por SPARTAN. Importe 25 EUR establecido por SPARTAN (25.0 + 0.00 peaje)(40.4777 -3.7073)\n2022-05-26 10:10:44 | 33 | SYSTEM | 145 | Recibo enviado KO - 25€ + 0€ (peaje)",
+            tollCustomer: 0.00000,
+            tollSupplier: 0.00000,
+            paymentMethodCustomer: 4,
+            createdBy: 146280,
+            bookingBreakTitle1: "Evento",
+            bookingBreakTitle2: "Descripción actuación",
+            bookingBreakTitle3: "Centro de coste",
+            bookingBreakTitle4: "CIF visita comercial",
+            bookingBreakValue1: "Ev. Gen. - Acciones comerciales",
+            bookingBreakValue2: "a",
+            bookingBreakValue3: "",
+            bookingBreakValue4: "02661135N",
+            authorizationBreakTitle1: "Num.Empleado",
+            authorizationBreakTitle2: "Centro Empleado",
+            authorizationBreakTitle3: "ID Empresa",
+            authorizationBreakTitle7: "Nombre de la empresa",
+            authorizationBreakValue1: "U0193271",
+            authorizationBreakValue2: "5570",
+            authorizationBreakValue3: "95",
+            authorizationBreakValue5: "SC",
+            authorizationBreakValue6: "U0193271095",
+            authorizationBreakValue7: "FACILITIES"
+        },
+        {
+            id: 346248955,
+            idUser: 146280,
+            idAuthorization: 817457,
+            status: 30,
+            origin: {
+                addressField: "Estación de Chamartín, Madrid, España",
+                lat: 40.47237,
+                lon: -3.683141
+            },
+            destination: {
+                addressField: "Cines Embajadores, Glorieta Sta. María de la Cabeza, 5, 28045 Madrid",
+                lat: 40.40068,
+                lon: -3.698589
+            },
+            timeBookingStartRealTimestamp: 1653559749000,
+            asap: true,
+            paymentMethod: 50,
+            entryChannel: 15,
+            idSupplierFleet: 57,
+            idSupplier: 57,
+            distanceMeters: 10501,
+            durationMinutes: 0,
+            location: "MADRID",
+            passengerName: "Zombre Apellido1 Apellido2",
+            phoneNumberPassenger: "453654654",
+            phoneNumberTaxiDriver: "600000000",
+            idSupplierTaxi: "11",
+            idSupplierService: "15827",
+            cancelledWithCharge: false,
+            priceCustomer: "22.50000",
+            priceSupplier: "22.50000",
+            phoneNumberSupplier: "676800672",
+            idAuthorizationGroup: 335,
+            supplierTaxiDescription: "Seat León | 4",
+            subscriberCode: "6300",
+            userNumber: "93271095",
+            idService: 1946195317,
+            shared: false,
+            timeZone: "Europe/Madrid",
+            notes: "2022-05-26 10:09:09 | 11 | Laura | 150 | Servicio solicitado Portal - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML  like Gecko) Chrome/101.0.4951.64 Safari/537.36. WL 4069\n2022-05-26 10:09:09 | 33 | SYSTEM | 114 | El número de vuelo es 1.\n2022-05-26 10:09:09 | 33 | SYSTEM | 149 | Servicio enviado a MADRID_TAKSEE_TAXI (57)\n2022-05-26 10:09:18 | 44 | SYSTEM | 110 | Ha ocurrido un error enviando el email de confirmación al usuario\n2022-05-26 10:09:18 | 11 | SYSTEM | 130 | Confirmado por: MADRID_TAKSEE_TAXI (Taxi: 11). Num. servicio: 15827\n2022-05-26 10:09:51 | 33 | SYSTEM | 136 | Finalizado por SPARTAN. Importe 22.5 EUR establecido por SPARTAN (22.5 + 0.00 peaje)(40.4777 -3.7073)\n2022-05-26 10:09:52 | 33 | SYSTEM | 145 | Recibo enviado KO - 22.5€ + 0€ (peaje)",
+            tollCustomer: 0.00000,
+            tollSupplier: 0.00000,
+            paymentMethodCustomer: 4,
+            createdBy: 146280,
+            bookingBreakTitle1: "Evento",
+            bookingBreakTitle2: "Descripción actuación",
+            bookingBreakTitle3: "Centro de coste",
+            bookingBreakTitle4: "CIF visita comercial",
+            bookingBreakValue1: "Ev. Gen. - Acciones comerciales",
+            bookingBreakValue2: "sasasa",
+            bookingBreakValue3: "",
+            bookingBreakValue4: "02661135N",
+            authorizationBreakTitle1: "Num.Empleado",
+            authorizationBreakTitle2: "Centro Empleado",
+            authorizationBreakTitle3: "ID Empresa",
+            authorizationBreakTitle7: "Nombre de la empresa",
+            authorizationBreakValue1: "U0193271",
+            authorizationBreakValue2: "5570",
+            authorizationBreakValue3: "95",
+            authorizationBreakValue5: "SC",
+            authorizationBreakValue6: "U0193271095",
+            authorizationBreakValue7: "FACILITIES"
+        },
+        {
+            id: 346248954,
+            idUser: 146280,
+            idAuthorization: 817457,
+            status: 30,
+            origin: {
+                addressField: "Cines Embajadores, Glorieta Sta. María de la Cabeza, 5, 28045 Madrid",
+                lat: 40.40068,
+                lon: -3.698589
+            },
+            destination: {
+                addressField: "Estación de Chamartín, Madrid, España",
+                lat: 40.47237,
+                lon: -3.683141
+            },
+            timeBookingStartRealTimestamp: 1653559603000,
+            asap: true,
+            paymentMethod: 50,
+            entryChannel: 15,
+            idSupplierFleet: 57,
+            idSupplier: 57,
+            distanceMeters: 10501,
+            durationMinutes: 0,
+            location: "MADRID",
+            passengerName: "Sandra Vicente Garcia",
+            phoneNumberPassenger: "453654654",
+            phoneNumberTaxiDriver: "600000000",
+            idSupplierTaxi: "11",
+            idSupplierService: "15826",
+            cancelledWithCharge: false,
+            priceCustomer: "23.00000",
+            priceSupplier: "23.00000",
+            phoneNumberSupplier: "676800672",
+            idAuthorizationGroup: 335,
+            supplierTaxiDescription: "Seat León | 4",
+            subscriberCode: "6300",
+            userNumber: "93271095",
+            idService: 1946195316,
+            shared: false,
+            timeZone: "Europe/Madrid",
+            notes: "2022-05-26 10:06:42 | 11 | Laura | 150 | Servicio solicitado Portal - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML  like Gecko) Chrome/101.0.4951.64 Safari/537.36. WL 4069\n2022-05-26 10:06:42 | 33 | SYSTEM | 114 | El número de vuelo es 1.\n2022-05-26 10:06:42 | 33 | SYSTEM | 149 | Servicio enviado a MADRID_TAKSEE_TAXI (57)\n2022-05-26 10:06:51 | 44 | SYSTEM | 110 | Ha ocurrido un error enviando el email de confirmación al usuario\n2022-05-26 10:06:51 | 11 | SYSTEM | 130 | Confirmado por: MADRID_TAKSEE_TAXI (Taxi: 11). Num. servicio: 15826\n2022-05-26 10:08:15 | 33 | SYSTEM | 136 | Finalizado por SPARTAN. Importe 23 EUR establecido por SPARTAN (23.0 + 0.00 peaje)(40.4777 -3.7073)\n2022-05-26 10:08:16 | 33 | SYSTEM | 145 | Recibo enviado KO - 23€ + 0€ (peaje)",
+            tollCustomer: 0.00000,
+            tollSupplier: 0.00000,
+            paymentMethodCustomer: 4,
+            createdBy: 146280,
+            bookingBreakTitle1: "Evento",
+            bookingBreakTitle2: "Descripción actuación",
+            bookingBreakTitle3: "Centro de coste",
+            bookingBreakTitle4: "CIF visita comercial",
+            bookingBreakValue1: "Ev. Gen. - Acciones comerciales",
+            bookingBreakValue2: "sasasa",
+            bookingBreakValue3: "",
+            bookingBreakValue4: "02661135N",
+            authorizationBreakTitle1: "Num.Empleado",
+            authorizationBreakTitle2: "Centro Empleado",
+            authorizationBreakTitle3: "ID Empresa",
+            authorizationBreakTitle7: "Nombre de la empresa",
+            authorizationBreakValue1: "U0193271",
+            authorizationBreakValue2: "5570",
+            authorizationBreakValue3: "95",
+            authorizationBreakValue5: "SC",
+            authorizationBreakValue6: "U0193271095",
+            authorizationBreakValue7: "FACILITIES"
+        }
+    ],
+
+    columns: [
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'timeBookingStartRealTimestamp',
+            subAccessor: '',
+            title: 'Fecha',
+            viewIsFilter: true,
+            typeFilter: 'date',
+            subTypeFilter: false,
+            idInput: 'fecha',
+            nameInput: 'Fecha',
+            placeholder: 'Fecha'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'passengerName',
+            subAccessor: '',
+            title: 'Pasajero',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'pasajero',
+            nameInput: 'Pasajero',
+            placeholder: 'Pasajero'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'origin',
+            subAccessor: 'addressField',
+            title: 'Recogida',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'recogida',
+            nameInput: 'Recogida',
+            placeholder: 'Recogida'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'destination',
+            subAccessor: 'addressField',
+            title: 'Destino',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: false,
+            idInput: 'destino',
+            nameInput: 'Destino',
+            placeholder: 'Destino'
+        },
+        {
+            activeView: true,
+            sortable: true,
+            accessor: 'priceCustomer',
+            subAccessor: '',
+            title: 'Precio',
+            viewIsFilter: true,
+            typeFilter: 'text',
+            subTypeFilter: true,
+            idInput: 'precio',
+            nameInput: 'Precio',
+            placeholder: 'Precio'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'id',
+            subAccessor: '',
+            title: 'ID',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'id',
+            nameInput: 'id',
+            placeholder: 'id'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'idService',
+            subAccessor: '',
+            title: 'ID Reserva',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'IDReserva',
+            nameInput: 'ID Reserva',
+            placeholder: 'ID Reserva'
+        },
+        {
+            activeView: false,
+            sortable: true,
+            accessor: 'idSupplier',
+            subAccessor: '',
+            title: 'ID Proveedor',
+            viewIsFilter: true,
+            typeFilter: 'number',
+            subTypeFilter: false,
+            idInput: 'IDProveedor',
+            nameInput: 'ID Proveedor',
+            placeholder: 'ID Proveedor'
+        },
+    ],
+
+    opAddColumns: [
+        {
+            label: 'ID',
+            value: 'id',
+            activeView: false,
+        },
+        {
+            label: 'ID Reserva',
+            value: 'idService',
+            activeView: false,
+        },
+        {
+            label: 'ID Proveedor',
+            value: 'idSupplier',
+            activeView: false,
+        }
+    ]
+
+}

package/layout/DynamicTable/index.js

@@ -0,0 +1,3 @@
+export { default, DynamicTable } from './DynamicTable'
+export { options } from './constants'
+export { default as styles } from './DynamicTable.module.css'

package/layout/Navbar/Navbar.js

@@ -6,16 +6,14 @@ import withStyles from '../../hocs/withStyles'
 import Heading from '../../atoms/Heading/Heading'
 import Tabs from '../../molecules/Tabs/Tabs'
 
-export const Navbar = ({ getStyles, isPlayground, children }) => {
+export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout }) => {
   return (
     <>
-      <header className={getStyles('navbar', {
-        'is-playground': isPlayground,
-      })}>
+      <header className={getStyles('navbar')}>
 
         <Heading
-          color="primary"
-          size="sm"
+          color="base"
+          size="xs"
           weight="light"
           isInline
         >
@@ -50,14 +48,21 @@ export const Navbar = ({ getStyles, isPlayground, children }) => {
               view: true
             }
           ]}
-          viewTabs
+          viewTabs={viewTabsNav}
         />
 
 
         {/* <div className={getStyles('navbar__title', 'navbar__item')}>Taksee</div> */}
         {/* <div className={getStyles('navbar__item')}>Legal</div>
         <div className={getStyles('navbar__item')}>User Guide</div> */}
-        <div className={getStyles('navbar__item')}>Logout</div>
+
+        {viewOptionsNav ? (
+          <div onClick={linkLogout} className={getStyles('navbar__item', { 'is-playground': viewTabsNav })}>
+            Logout
+          </div>
+        ) : null}
+
+
       </header>
 
 
@@ -67,12 +72,15 @@ export const Navbar = ({ getStyles, isPlayground, children }) => {
 
 Navbar.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
-  isPlayground: PropTypes.bool,
+  children: PropTypes.any.isRequired,
+  viewTabsNav: PropTypes.bool,
+  viewOptionsNav: PropTypes.bool,
+  linkLogout: PropTypes.func,
 }
 
 Navbar.defaultProps = {
-  isPlayground: false,
+  viewTabsNav: false,
+  viewOptionsNav: true,
   getStyles: () => { },
 }
 

package/layout/Navbar/Navbar.module.css

@@ -6,13 +6,15 @@
 
 .navbar {
     display: flex;
-    flex-shrink: 0;
     align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
     color: #000;
-    background-color: #FFFFFF;
     box-shadow: 0px 1px 4px rgb(100 116 139 / 12%);
     width: calc(100%);
     padding-left: 18px;
+    min-height: 51px;
+    background-color: #f2fcfc;
 }
 
 .navbar__title {

package/layout/Navbar/Navbar.stories.js

@@ -8,7 +8,8 @@ export default {
   title: 'Layout/Navbar',
   component: Navbar,
   args: {
-    isPlayground: true,
+    viewTabsNav: false,
+    viewOptionsNav: true,
     children: 'Taksee',
   },
   argTypes: {

package/layout/Sidebar/Sidebar.module.css

@@ -95,6 +95,7 @@
 .pro-sidebar-content {
   flex-grow: 1;
   margin-top: 38px;
+  background-color: #f2fcfc;
 }
 
 .pro-sidebar-inner .pro-sidebar-layout ul {

package/molecules/CheckList/CheckList.js

@@ -0,0 +1,135 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Icon from '../../atoms/Icon'
+import Paragraph from '../../atoms/Paragraph'
+
+import styles from './CheckList.module.css'
+import withStyles from '../../hocs/withStyles'
+
+
+// export const handleChange = e => {
+//   const { name, value } = e.target;
+
+//   this.setState({
+//     [name]: value
+//   });
+// }
+
+// const handleChange = ({ onChange }) => () => {
+//   // onChange()
+
+//   const { name, value } = e.target;
+
+//   this.setState({
+//     [name]: value
+//   });
+
+// }
+
+// export const handleClick = ({ onClick }) => (event) => {
+//   onClick(event)
+// }
+
+// const handleChange = ({ onChange }) => () => {
+//   onChange()
+// }
+
+
+export const CheckList = ({ getStyles, options, onChange }) => {
+
+  // this.state = {};
+
+  return (
+
+    <div className={getStyles('check-list')}>
+
+      <ul id="platform"  className={getStyles('boxul')}>
+        {options.data.map((item, index) => (
+          <li key={index} className={getStyles('boxlist')}>
+
+            <label className={getStyles('rad-label')}>
+
+              <input
+                className={getStyles('rad-input')}
+                id={item.id}
+                value={item.value}
+                name={item.name}
+                type="radio"
+                onChange={onChange}
+              />
+
+              <div className={getStyles('rad-design')} ></div>
+
+              <div className={getStyles('rad-text')}>
+                <Paragraph
+                  className={getStyles('title-list')}
+                  color="primary"
+                  isInline
+                  size="sm"
+                >
+                  {item.title}
+                </Paragraph>
+
+                <Paragraph
+                  className={getStyles('subtitle-list')}
+                  color="muted"
+                  isInline
+                  size="xs"
+                >
+                  {item.subTitle}
+                </Paragraph>
+              </div>
+
+            </label>
+
+
+          </li>
+        ))}
+      </ul>
+
+      {/* <div className="radio-buttons">
+        Windows
+        <input
+          id="windows"
+          value="windows"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+        Mac
+        <input
+          id="mac"
+          value="mac"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+        Linux
+        <input
+          id="linux"
+          value="linux"
+          name="platform"
+          type="radio"
+          onChange={handleChange}
+        />
+      </div> */}
+
+    </div>
+
+  )
+}
+
+CheckList.propTypes = {
+  // children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+CheckList.defaultProps = {
+  getStyles: () => { },
+  onChange: () => {},
+}
+
+export default withStyles(styles)(CheckList)

package/molecules/CheckList/CheckList.module.css

@@ -0,0 +1,94 @@
+
+.boxul {
+  display: block;
+  list-style-type: disc;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0px;
+}
+
+
+.check-list {
+  display: flex;
+}
+
+.boxlist {
+  list-style-type: none;
+}
+
+.title-list {
+  padding-left: 0px;
+}
+
+.subtitle-list {
+  display: flex;
+}
+
+.rad-label {
+  display: flex;
+  align-items: center;
+
+  border-radius: 100px;
+  padding: 12px 16px;
+  margin: 6px 0;
+
+  cursor: pointer;
+  transition: .3s;
+}
+
+.rad-label:hover,
+.rad-label:focus-within {
+  background: hsla(0, 0%, 80%, .14);
+}
+
+.rad-input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  z-index: -1;
+}
+
+.rad-design {
+  width: 22px;
+  height: 22px;
+  border-radius: 100px;
+
+  background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));
+  position: relative;
+}
+
+.rad-design::before {
+  content: '';
+
+  display: inline-block;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+
+  background: hsl(0, 0%, 90%);
+  transform: scale(1.1);
+  transition: .3s;
+}
+
+.rad-input:checked+.rad-design::before {
+  transform: scale(0);
+}
+
+.rad-text {
+  /* color: hsl(0, 0%, 60%); */
+  margin-left: 14px;
+  /* letter-spacing: 3px;
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 900; */
+  transition: .3s;
+}
+
+.rad-input:checked~.rad-text {
+  color: hsl(0, 0%, 40%);
+}

package/molecules/CheckList/CheckList.stories.js

@@ -0,0 +1,25 @@
+import { CheckList, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(CheckList, styles)
+const ListTemplate = getListTemplate(CheckList, styles)
+
+export default {
+  title: 'Molecules/CheckList',
+  component: CheckList,
+  args: {
+    options: options,
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }