ui-soxo-bootstrap-core 2.4.24

package/core/lib/components/global-header/global-header.scss

@@ -0,0 +1,369 @@
+.global-header {
+  .left-bar {
+    position: fixed;
+  }
+
+  .right-section {
+    height: 100vh;
+    &.open {
+    }
+    &.close {
+      margin-left: 80px;
+    }
+  }
+
+  .layout-content {
+    display: flex;
+
+    .ant-btn {
+      // padding: 5px 10px;
+      // outline: none;
+      // border: 0;
+    }
+  }
+
+  // Dark theme specific css
+  // Added considering stoptb
+  &.dark {
+    .left-bar {
+      background-color: #31404f;
+    }
+
+    .sidebar-container {
+      .sidemenu {
+        .ant-menu.ant-menu-dark {
+          background-color: #31404f;
+        }
+
+        .ant-menu-dark .ant-menu-inline.ant-menu-sub {
+          background-color: #2b3946;
+        }
+
+        .intro {
+          border-bottom: none;
+        }
+
+        .menu-item {
+          .menu-collapsed {
+            i {
+              color: white;
+            }
+          }
+        }
+      }
+    }
+
+    .sidebar-container .sidemenu .intro .logo-wrapper small {
+      color: #fff;
+    }
+  }
+
+  // END OF STOPTB SPECIFIC CSS
+
+  .left-bar {
+    transition: 0.3s;
+
+    //If kiosk mode is on
+    &.openkioskon {
+      display: none;
+
+      width: 0;
+    }
+
+    //If kiosk mode is off
+    &.closekioskon {
+      display: none;
+    }
+
+    &.hide {
+      width: 0;
+      display: none;
+    }
+
+    &.open {
+      width: 256px;
+    }
+
+    &.close {
+      width: 106px;
+    }
+
+    .sidebar-container {
+      transition: 0.3s;
+
+      &.open {
+        width: 256px;
+        transition: 0.1s;
+      }
+
+      //If kiosk mode is on
+      &.closekioskon {
+        width: 98px;
+
+        transition: none;
+      }
+
+      &.close {
+        width: 80px;
+      }
+    }
+
+    @media only screen and (min-width: 800px) {
+      width: 256px;
+    }
+  }
+
+  &.connected {
+    .right-section {
+      margin-top: 0px;
+      padding: 0px;
+    }
+  }
+
+  .right-section {
+    margin-top: 0px;
+    width: 100%;
+    overflow-x: scroll;
+    position: relative;
+    padding: 15px;
+    margin-left: 212px;
+
+    &.kioskon {
+      overflow-x: hidden;
+    }
+
+    .menu-caption {
+      margin: 12px 10px;
+
+      &.header-caption {
+        font-size: 14px;
+        font-weight: bold;
+        color: var(--custom-card-text-color);
+        text-transform: uppercase;
+      }
+    }
+
+    .toggler {
+      position: absolute;
+      bottom: 3px;
+      left: -1px;
+      border: 1px solid #c6c6c6;
+
+      &:hover {
+        background-color: hover;
+        border-color: black;
+      }
+    }
+
+   @media only screen and (max-width: 768px) {
+      margin-left: 0 !important; // remove left margin on mobile
+      padding: 10px !important;
+    }
+
+
+  }
+
+  .profile-avatar {
+    .profile-picture {
+      border: 1px solid #e2e2e2;
+      border-radius: 23px;
+      box-shadow: 0 0 8px 2px #d1d1d1;
+      color: #000;
+      height: 40px;
+      margin: 0 10px;
+      object-fit: contain;
+      width: 40px;
+    }
+  }
+
+  .ant-tooltip .ant-tooltip-content .ant-tooltip-arrow + span {
+    opacity: 1 !important;
+  }
+
+  .ant-menu.ant-menu-inline-collapsed > .ant-menu-item + span {
+    opacity: 1 !important;
+  }
+
+  .ant-menu {
+    .ant-menu-item {
+      .ant-menu-submenu-popup {
+        .ant-menu-title-content + span {
+          opacity: 1 !important;
+        }
+      }
+    }
+  }
+
+  .fa {
+    padding-right: 15px;
+  }
+
+  .page-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    // padding: 3px 8px;
+    border-bottom: 1px solid #d7d7d787;
+    position: fixed;
+    height: 56px;
+    top: 0;
+    background: white;
+    z-index: 1000;
+    width: 92%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding: 15px;
+
+    &.open {
+      width: calc(100% - 212px);
+      transition: 0.1s;
+      left: 212px;
+    }
+
+  @media only screen and (max-width: 768px) {
+    padding: 8px 10px 8px 14px !important;
+    left: 0 !important;
+    width: 100% !important;
+
+    &.open {
+      width: 100% !important;
+      left: 0 !important;
+    }
+  }
+
+
+    .page-header-name {
+      display: flex;
+    }
+
+    &.hidden {
+      display: none;
+    }
+
+    .toggle-box {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      h4 {
+        margin-bottom: 0px;
+      }
+    }
+
+    .toggle-menu {
+      margin-right: 10px;
+      cursor: pointer;
+      // padding: 10px;
+      // border-radius: 4px;
+      // border: 1px solid #dcdcdc;
+      margin-right: 10px;
+
+      span {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        border-color: #c1c1c1;
+      }
+    }
+
+    .show-search {
+      margin-right: 10px;
+      font-size: 16px;
+      cursor: pointer;
+
+      &:hover {
+        border-color: #c1c1c1;
+      }
+    }
+
+    .page-menu {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+
+      a {
+        margin: 0px 5px;
+      }
+
+      .branch-selection {
+        margin: 0px 10px;
+      }
+       .branch-switcher {
+        .branches {
+          .ant-select {
+            min-width: 150px;
+          }
+        }
+      }
+    }
+
+    .header-blk {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      .page-heading {
+        margin: 2px 0 0 0;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 26px;
+      }
+    }
+
+    .page-desc {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.side-drawer-content-wrapper {
+  .drawer-content {
+    .ant-drawer-body {
+      padding: 0px;
+    }
+  }
+ 
+}
+
+.sidebar-container {
+  //If kiosk is on
+  &.open .kioskoff {
+    display: none;
+  }
+
+  // .opened{
+  //   width: 200px;
+  //   // transition : 0.1s ;
+  // }
+  // .closed{
+  //   width: 80px;
+  // }
+
+  //   .sidebar-container:hover{
+  //     width: 200px;
+  // }
+
+  .menu-search {
+    padding: 10px;
+  }
+
+  .user-info {
+    padding: 5px 16px;
+  }
+}
+
+.side-drawer-content {
+  .ant-drawer-content-wrapper {
+    width: 217px !important;
+
+    .ant-drawer-content {
+      .ant-drawer-body {
+        padding: 0px;
+      }
+      .ant-drawer-header{
+        padding: 2px 20px;
+      }
+    }
+  }
+}

package/core/lib/components/header/generic-header.js

@@ -0,0 +1,76 @@
+import React, { useState, useContext } from 'react'
+
+import { LeftOutlined } from '@ant-design/icons'
+
+import { GlobalContext } from './../../Store'
+
+import './generic-header.scss'
+import ButtonComponent from '../../elements/basic/button/button'
+/**
+ * Generic Header to be used across the app,
+ * can accept right-text as a props
+ */
+
+function GenericHeader(props) {
+  const { isMobile, user = {} } = useContext(GlobalContext)
+
+  const {
+    heading,
+    children,
+    onBack,
+    onRightClick,
+    isGenericHeader = true,
+  } = props
+
+  const username = localStorage.getItem('userInfo')
+    ? JSON.parse(localStorage.getItem('userInfo')).StaffName
+    : 'User'
+
+  function backbutton() {
+    return (
+      <div>
+        <LeftOutlined />
+        Back
+      </div>
+    )
+  }
+
+  return (
+    <div className="generic-header">
+      {isGenericHeader ? (
+        <div className="main-header">
+          {isMobile ? (
+            <>
+              <LeftOutlined />
+            </>
+          ) : (
+          <>
+              <div
+                className="cancel-icon"
+                onClick={onBack ? () => onBack() : null}
+              >
+                <ButtonComponent
+                  size="small"
+                  children="Back"
+                  icon={<LeftOutlined />}
+                />
+              </div>
+            </>
+          )}
+
+          {/* hide on mobile */}
+        </div>
+      ) : (
+        <div className="custom-header">
+          <div className="text">
+            <h4>{heading ? heading : ''}</h4>
+          </div>
+          <div className="cancel-icon" onClick={onBack ? () => onBack() : null}>
+            <LeftOutlined />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+export default GenericHeader

package/core/lib/components/header/generic-header.scss

@@ -0,0 +1,99 @@
+.user-name{
+  padding: 0px 10px;
+}
+
+.generic-header {
+  width: 100%;
+  // max-width: 500px;
+  top: 0px;
+  // z-index: 500;
+  height: 40px;
+  display: flex;
+  // padding: 0 8px;
+  @media only screen and (max-width: 480px) {
+    height: 22px;
+  }
+ 
+  .main-header {
+    // display: grid;
+    // grid-template-rows: 0.5fr 1fr;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .cancel-icon{
+      // margin-top: 10px;
+    }
+
+    .user-avatar {
+      border-radius: 40px;
+      height: 50px;
+      width: 50px;
+      /* box-shadow: 0px 0px 5px 1px grey; */
+      /* padding: 3px; */
+      border: 1px solid #1a90ff;
+    }
+
+    .back-icon {
+      padding: 5px 0;
+      text-align: left;
+      box-sizing: border-box;
+      cursor: pointer;
+      span {
+        font-family: "Roboto Condensed";
+        margin-left: 1px;
+        color: #463737;
+      }
+      .anticon {
+        margin-left: -12px;
+      }
+    }
+
+    .heading-text {
+      display: grid;
+      grid-template-columns: 1fr 0.5fr;
+
+      .generic-heading {
+        padding: 4px 16px;
+
+        h4 {
+          height: 28px;
+          line-height: 1.56;
+          font-weight: bold;
+          margin: 0px;
+          font-size: 18px;
+        }
+      }
+
+      &.no-right-text {
+        grid-template-columns: 1fr;
+      }
+
+      .right-text {
+        padding: 10px 16px;
+      }
+    }
+  }
+
+  .custom-header {
+    display: grid;
+    grid-template-columns: 90% 10%;
+    padding: 0px 16px;
+    align-items: center;
+
+    .text {
+      font-size: 18px;
+      font-weight: 600;
+      color: #3c415e;
+    }
+
+    .cancel-icon {
+      opacity: 0.7;
+      font-size: 18px;
+      text-align: right;
+      color: #949292;
+
+
+    }
+  }
+}

package/core/lib/components/image-preview/image-preview.js

@@ -0,0 +1,33 @@
+/**
+ * Image Wrapper
+ */
+
+
+import React, { useState } from "react";
+
+
+import { Modal, Button } from 'antd';
+
+import ImageWrapper from './../image-wrapper/image-wrapper';
+
+export default function ImagePreview({ type, content, field }) {
+
+    const [visible, setVisible] = useState(false);
+
+    return (<div className="">
+
+        <Button onClick={() => {
+
+            setVisible(true);
+
+        }}>View Preview</Button>
+
+
+        {/* Add Modal */}
+        <Modal width={'80%'} destroyOnClose title={`Preview`} visible={visible} onCancel={() => { setVisible(false) }} footer={null}>
+
+            <ImageWrapper type={type} content={content} />
+        </Modal>
+
+    </div>)
+}

package/core/lib/components/image-wrapper/image-wrapper.js

@@ -0,0 +1,108 @@
+/**
+ * Image Wrapper
+ */
+
+
+import React from "react";
+
+
+import { Row, Image, Card, Button } from 'antd';
+
+import { DownloadOutlined } from '@ant-design/icons'
+
+// import PdfViewer from './../pdf-viewer/pdf-viewer';
+
+export default function ImageWrapper({ type, content, field,width=200 }) {
+
+
+    return (<div className="vehicle-card card image-wrapper">
+
+        <div gutter={0} className="detail-wrapper">
+
+            <div className="detail-element">
+                <Row span={12}>
+
+                    {
+                        type === 'array' ?
+                            <>
+
+                                {
+                                    content.map((file, key) => {
+
+                                        return (
+                                            <div key={key}>
+                                                <div style={{ padding: '10px 4px 0px 4px', border: '1px solid #efefef', marginBottom: '10px', width: '50%' }}>
+                                                    <DownloadOutlined style={{ marginBottom: '0px !important' }} />
+                                                    <a href={file.url} style={{ paddingLeft: '8px' }} download={`newfilename${file.url}`}>Download</a>
+                                                </div>
+                                                {
+                                                    file.type === "application/pdf" ?
+                                                        <Card>
+                                                            <div>
+                                                                {/* <PdfViewer url={file.url} /> */}
+                                                                <embed src={file.url} width="500" height="375"
+                                                                    type="application/pdf" />
+                                                            </div>
+                                                        </Card>
+                                                        :
+                                                        <Image width={width} height={200} src={file.url} />
+                                                }
+                                            </div>
+                                        )
+                                    })
+                                }
+
+                            </>
+                            :
+                            <div className="">
+
+                                <div className="page-header">
+
+                                    <div className="actions">
+
+
+                                        <a href={content.url} download={`newfilename${content.url}`}>
+
+                                            <Button type="primary" size="small">
+
+                                                <DownloadOutlined style={{ marginBottom: '0px !important' }} />
+
+                                                Download
+                                            </Button>
+                                        </a>
+
+                                    </div>
+
+                                </div>
+                                {
+                                    content.type === "application/pdf"
+                                        ?
+                                        // <PdfViewer url={content.url} />
+                                        <embed src={content.url} width="500" height="375"
+                                            type="application/pdf" />
+                                        :
+                                        <Image width={width} src={content.url} />
+                                }
+
+                                <div>
+
+                                    {
+                                        content.type === "application/pdf"
+                                            ?
+                                            // <PdfViewer url={content.url} />
+                                            <embed src={content.url} width="500" height="375"
+                                                type="application/pdf" />
+                                            :
+                                            <Image width={'100%'} src={content.url} />
+                                    }
+
+                                </div>
+
+                            </div>
+                    }
+
+                </Row>
+            </div>
+        </div>
+    </div>)
+}

package/core/lib/components/image-wrapper/image-wrapper.scss

@@ -0,0 +1,13 @@
+
+.image-wrapper{
+
+    .page-header{
+        display: flex;
+        margin: 10px 0px;
+
+        .actions{
+
+        }
+    }
+
+}