l-min-components 0.2.0

package/src/components/graph/index.styled.js

@@ -0,0 +1,261 @@
+import styled from "styled-components";
+
+export const GraphCard = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 25px 23px;
+  font-family: "Nunito";
+  width: 100%;
+  /* max-width: 720px; */
+  border-radius: 30px;
+  border: 1px solid #C6CCCC;
+  border-radius: 34px;
+`;
+
+export const GraphCardHeader = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  .time-calc-wrapper {
+    max-width: 300px;
+    width: 100%;
+    display: flex;
+    background-color: rgba(0, 194, 194, 0.1);
+    border: 0.5px solid #c6cccc;
+    border-radius: 12px;
+
+    .total-time {
+      width: 48%;
+      padding: 10px 15px;
+      border-right: 0.5px solid #c6cccc;
+      text-align: center;
+      h6 {
+        font-size: 10px;
+        font-weight: 700;
+        color: #313333;
+      }
+
+      h3 {
+        font-size: 20px;
+        font-weight: 700;
+        color: #00c2c2;
+      }
+    }
+
+    .projected-time {
+      width: 47%;
+      padding: 10px 15px;
+      text-align: center;
+
+      h6 {
+        font-size: 10px;
+        font-weight: 700;
+        color: #313333;
+      }
+
+      h3 {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fecf4c;
+      }
+    }
+  }
+
+  .date-wrapper {
+    display: flex;
+    align-items: center;
+
+    span {
+      font-size: 10px;
+      margin: 0 10px;
+    }
+
+    .download__wrapper {
+      padding: 7px 9px;
+      border-radius: 6px;
+      background-color: rgba(176, 220, 220, 0.42);
+      border: 0.5px solid #00c2c2;
+      margin-left: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .datepicker__wrapper {
+      display: flex;
+      align-items: center;
+      width: 120px;
+      border-radius: 10px;
+      padding: 7px 12px;
+      border: 0.5px solid #e0e0e0;
+
+
+      .react-datepicker{
+        background: #FFFFFF;
+        border: none;
+        border-radius: 12px;
+        z-index: 1;
+        // padding: 5px;
+      
+      }
+
+      .react-datepicker__header{
+        background: #FFFFFF;
+        border: none;
+        
+      }
+      .react-datepicker__current-month{
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 20px;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        font-weight: 600;
+        font-size: 16px;
+      }
+
+      .react-datepicker__navigation {
+        background: #F7F7F7;
+        border: 0.458333px solid #E0E0E0;
+        border-radius: 1.83333px;
+        padding: 15px;
+        margin-top: 15px;
+        // margin-right: 10px;
+        
+      }
+      .react-datepicker__navigation--next {
+        margin-right: 22px;
+        font-size: 10px;
+      }
+
+      .react-datepicker__day--keyboard-selected{
+        background: #00C2C2;
+      }
+
+      .react-datepicker__navigation--previous {
+        margin-left: 275px;
+        font-size: 10px;
+      }
+
+      .react-datepicker__navigation-icon--next {
+        width: 10px;
+        height: 20px;
+        font-size: 20px;
+        margin-right: 10px;
+      }
+
+      .react-datepicker__navigation-icon--previous{
+        width: 10px;
+        height: 20px;
+        font-size: 20px;
+        margin-left: 10px;
+      }
+
+      .react-datepicker__navigation-icon--next{
+
+      }
+
+      .react-datepicker__day-names {
+        display: flex;
+        justify-content: space-around;
+        font-weight: 600;
+        font-size: 15px;
+        padding: 5px 5px;
+
+      }
+
+      .datepicker_style{
+        background: #FFFFFF;
+        border-radius: 12px;
+        .react-datepicker__day{
+          width: 46px;
+          height: 33px;
+          padding: 4px;
+          font-size: 14px;
+          &:focus {
+            border: 2px solid rgba(59, 59, 59, 0.282);
+          }
+          color: #444444;
+          &:hover {
+            color: #0094BA;
+            background: rgba(0, 148, 186, 0.04);
+          }
+        }
+
+        .react-datepicker__day--selected{
+          background: #00C2C2;
+          color: #EEEEEE;
+          border-radius: 10px;
+
+          &:hover {
+            color: #0094BA;
+            background: rgba(0, 148, 186, 0.04);
+          }
+        }
+      }
+
+      svg {
+        width: 45px;
+      }
+      .react-datepicker-wrapper {
+        width: auto !important;
+
+        .react-datepicker__input-container input {
+          border: none;
+          font-size: 12px;
+          width: 100%;
+          outline: none;
+        }
+      }
+
+      .react-datepicker__day--selected,
+      .react-datepicker__day--keyboard-selected,
+      .react-datepicker__day--in-selecting-range,
+      .react-datepicker__day--in-range {
+        border-radius: 1.3rem;
+        background-color: rgba(176, 220, 220, 0.42);
+        color: #313333;
+      }
+      .datepicker-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+        color: rgba(176, 220, 220, 0.42);
+        // width: 215px;
+        padding: 8px 16px;
+        border-radius: 12px;
+        font-size: 13px;
+        margin-left: auto;
+      }
+    }
+  }
+`;
+
+export const GraphCardBody = styled.div`
+  width: 100%;
+  display: flex;
+  margin-top: 20px;
+  margin-bottom: 10px;
+`;
+
+export const GraphCardFooter = styled.div`
+  width: 100%;
+  display: flex;
+
+  span {
+    background-color: #f3f3f3;
+    border: 0.5px solid #d9d9d9;
+    font-weight: 500;
+    font-size: 12px;
+    color: #000000;
+    border-radius: 10px;
+    margin-right: 10px;
+    padding: 12px 16px;
+    cursor: pointer;
+
+    &.active {
+      background-color: #00c2c2;
+      color: #ffffff;
+    }
+  }
+`;

package/src/components/header/account-dropdown.jsx

@@ -0,0 +1,86 @@
+import { useState, useEffect } from "react";
+import { CloseIcon } from "./assets/svg/close";
+import { AddIcon } from "./assets/svg/add";
+import {
+  AccountDropdownLayout,
+  AccountDropdownHeader,
+  AccountDropdownBody,
+  AccountDropdownFooter,
+} from "./index.styled";
+/**
+ * @param {{
+ *  type: string,
+ *  text: string,
+ *  onClick: Function,
+ *  style: CSSProperties,
+ * }} props - properties of Header Component
+ *
+ */
+const AccountDropdown = (props) => {
+  return (
+    <>
+      <AccountDropdownLayout>
+        <AccountDropdownHeader>
+          <div>
+            <img src={props.avatar} alt="account photo" />
+          </div>
+          <div>
+            <h1> {props.activeAccountName}</h1>
+            <h2>{props.activeAccountType} </h2>
+          </div>
+          <CloseIcon onClick={(e) => props.setIsOpen(!props.isOpen)} />
+        </AccountDropdownHeader>
+        <AccountDropdownBody>
+          {/* {props.apiAccountType === `${props.accountType}` && ( */}
+          <div>
+            <h3>{props.accountType} </h3>
+            <div className="account-info">
+              <div className="avatar-container">
+                <img src={props.avatar} alt="account photo" />
+              </div>
+              <div className="account-details">
+                <h1> {props.accountName}</h1>
+                <span>{props.notificationCount} </span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3>{props.accountType} </h3>
+            <div className="account-info">
+              <div className="avatar-container">
+                <img src={props.avatar} alt="account photo" />
+              </div>
+              <div className="account-details">
+                <h1> {props.accountName}</h1>
+                <span>{props.notificationCount} </span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3>{props.accountType} </h3>
+            <div className="account-info">
+              <div className="avatar-container">
+                <img src={props.avatar} alt="account photo" />
+              </div>
+              <div className="account-details">
+                <h1> {props.accountName}</h1>
+                <span>{props.notificationCount} </span>
+              </div>
+            </div>
+          </div>
+          {/* // )} */}
+        </AccountDropdownBody>
+
+        <AccountDropdownFooter>
+          <button>
+            <AddIcon /> Add Account
+          </button>
+        </AccountDropdownFooter>
+      </AccountDropdownLayout>
+    </>
+  );
+};
+
+export default AccountDropdown;

package/src/components/header/assets/svg/add.jsx

@@ -0,0 +1,14 @@
+export const AddIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "21"}
+    height={height || "20"}
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.5 5H9.5V9H5.5V11H9.5V15H11.5V11H15.5V9H11.5V5ZM10.5 0C4.98 0 0.5 4.48 0.5 10C0.5 15.52 4.98 20 10.5 20C16.02 20 20.5 15.52 20.5 10C20.5 4.48 16.02 0 10.5 0ZM10.5 18C6.09 18 2.5 14.41 2.5 10C2.5 5.59 6.09 2 10.5 2C14.91 2 18.5 5.59 18.5 10C18.5 14.41 14.91 18 10.5 18Z"
+      fill="#FEBF10"
+    />
+  </svg>
+);

package/src/components/header/assets/svg/arrow-down.jsx

@@ -0,0 +1,14 @@
+export const ArrowDownIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "10"}
+    height={height || "7"}
+    viewBox="0 0 10 7"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.046875 1.13489L4.99646 6.08447L9.94604 1.13489L9.12121 0.309473L4.99646 4.43481L0.871708 0.309473L0.046875 1.13489Z"
+      fill="#323232"
+    />
+  </svg>
+);

package/src/components/header/assets/svg/book.jsx

@@ -0,0 +1,34 @@
+export const BookIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "23"}
+    height={height || "24"}
+    viewBox="0 0 23 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21.0807 16.1404V4.57336C21.0807 3.42336 20.1416 2.57044 19.0011 2.66627H18.9436C16.9311 2.83877 13.8741 3.86419 12.1682 4.93752L12.0053 5.04294C11.7274 5.21544 11.2674 5.21544 10.9895 5.04294L10.7499 4.89919C9.04406 3.83544 5.99656 2.81961 3.98406 2.65669C2.84365 2.56086 1.91406 3.42336 1.91406 4.56377V16.1404C1.91406 17.0604 2.66156 17.9229 3.58156 18.0379L3.85948 18.0763C5.93906 18.3542 9.14948 19.4084 10.9895 20.4146L11.0278 20.4338C11.2866 20.5775 11.6986 20.5775 11.9478 20.4338C13.7878 19.4179 17.0078 18.3542 19.097 18.0763L19.4132 18.0379C20.3332 17.9229 21.0807 17.0604 21.0807 16.1404Z"
+      stroke="#00C2C2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.5 5.35938V19.7344"
+      stroke="#00C2C2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.42969 8.23438H5.27344"
+      stroke="#00C2C2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.14844 11.1094H5.27344"
+      stroke="#00C2C2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/header/assets/svg/close.jsx

@@ -0,0 +1,15 @@
+export const CloseIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "12"}
+    height={height || "12"}
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.8307 1.3415L10.6557 0.166504L5.9974 4.82484L1.33906 0.166504L0.164062 1.3415L4.8224 5.99984L0.164062 10.6582L1.33906 11.8332L5.9974 7.17484L10.6557 11.8332L11.8307 10.6582L7.1724 5.99984L11.8307 1.3415Z"
+      fill="#323232"
+    />
+  </svg>
+);

package/src/components/header/assets/svg/coolicon.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.046875 1.13489L4.99646 6.08447L9.94604 1.13489L9.12121 0.309473L4.99646 4.43481L0.871708 0.309473L0.046875 1.13489Z" fill="#323232"/>
+</svg>

package/src/components/header/assets/svg/message.jsx

@@ -0,0 +1,39 @@
+export const MessageIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "22"}
+    height={width || "22"}
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.96601 16.9366H7.52031C3.95469 16.9366 2.17188 16.0452 2.17188 11.5882V7.13115C2.17188 3.56553 3.95469 1.78271 7.52031 1.78271H14.6516C18.2172 1.78271 20 3.56553 20 7.13115V11.5882C20 15.1538 18.2172 16.9366 14.6516 16.9366H14.2059C13.9295 16.9366 13.6621 17.0703 13.4927 17.2932L12.1556 19.076C11.5673 19.8604 10.6046 19.8604 10.0162 19.076L8.67914 17.2932C8.53651 17.0971 8.20669 16.9366 7.96601 16.9366Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.6517 9.80557H14.6598"
+      stroke="#4A4D4D"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.0814 9.80557H11.0894"
+      stroke="#7C8080"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.51893 9.80557H7.52694"
+      stroke="#7C8080"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/header/assets/svg/notification.jsx

@@ -0,0 +1,32 @@
+export const NotificationIcon = ({ width, height, fill }) => (
+  <svg
+  width={width || "23"}
+  height={height || "23"}
+    viewBox="0 0 23 23"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.891 3.59375C7.94042 3.59375 5.54254 5.99163 5.54254 8.94218V11.5183C5.54254 12.0621 5.31077 12.8911 5.03444 13.3546L4.00932 15.0572C3.37642 16.1091 3.81321 17.2768 4.97204 17.669C8.814 18.9527 12.959 18.9527 16.801 17.669C17.8796 17.3125 18.352 16.0378 17.7637 15.0572L16.7386 13.3546C16.4712 12.8911 16.2394 12.0621 16.2394 11.5183V8.94218C16.2394 6.00055 13.8326 3.59375 10.891 3.59375Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+    />
+    <path
+      d="M12.5404 3.85266C12.2641 3.77244 11.9788 3.71004 11.6846 3.67438C10.8289 3.56741 10.0088 3.62981 9.24219 3.85266C9.5007 3.19302 10.1425 2.72949 10.8913 2.72949C11.6401 2.72949 12.2819 3.19302 12.5404 3.85266Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M13.5672 17.9902C13.5672 19.4611 12.3638 20.6645 10.893 20.6645C10.162 20.6645 9.48455 20.3614 9.00319 19.88C8.52183 19.3987 8.21875 18.7212 8.21875 17.9902"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+    />
+    <circle cx="17.1797" cy="5" r="4.5" fill="#F39B33" stroke="white" />
+  </svg>
+);

package/src/components/header/assets/svg/people.jsx

@@ -0,0 +1,17 @@
+export const PeopleIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "19"}
+    height={height || "19"}
+    viewBox="0 0 19 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.69453 2.88144C10.3479 2.14119 11.3038 1.67432 12.3687 1.67432C14.338 1.67432 15.9344 3.2707 15.9344 5.23994C15.9344 7.20918 14.338 8.80556 12.3687 8.80556C11.3038 8.80556 10.3479 8.33868 9.69453 7.59844M12.3687 17.7196H1.67188V16.8282C1.67188 13.8744 4.06645 11.4798 7.02031 11.4798C9.97417 11.4798 12.3687 13.8744 12.3687 16.8282V17.7196ZM12.3687 17.7196H17.7172V16.8282C17.7172 13.8744 15.3226 11.4798 12.3687 11.4798C11.3946 11.4798 10.4812 11.7402 9.69453 12.1953M10.5859 5.23994C10.5859 7.20918 8.98955 8.80556 7.02031 8.80556C5.05107 8.80556 3.45469 7.20918 3.45469 5.23994C3.45469 3.2707 5.05107 1.67432 7.02031 1.67432C8.98955 1.67432 10.5859 3.2707 10.5859 5.23994Z"
+      stroke="#313333"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/header/assets/svg/search.jsx

@@ -0,0 +1,24 @@
+export const SearchIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "22"}
+    height={height || "22"}
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.2496 19.2194C14.9265 19.2194 18.718 15.428 18.718 10.7511C18.718 6.07413 14.9265 2.28271 10.2496 2.28271C5.57266 2.28271 1.78125 6.07413 1.78125 10.7511C1.78125 15.428 5.57266 19.2194 10.2496 19.2194Z"
+      stroke="#4A4D4D"
+      stroke-width="1.33711"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.6109 20.1109L17.8281 18.3281"
+      stroke="#4A4D4D"
+      stroke-width="1.33711"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/header/assets/svg/setting.jsx

@@ -0,0 +1,14 @@
+export const SettingIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "17"}
+    height={width || "21"}
+    viewBox="0 0 17 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.48398 20.5025L0.015625 15.5998V5.79433L8.48398 0.891602L16.9523 5.79433V15.5998L8.48398 20.5025ZM8.48398 2.95253L1.79844 6.82212V14.572L8.48398 18.4425L15.1695 14.572V6.82212L8.48398 2.95164V2.95253ZM8.48398 14.2627C7.53863 14.26 6.63248 13.8846 5.96219 13.218C4.94264 12.1981 4.63778 10.6645 5.18977 9.33225C5.74176 7.99999 7.04189 7.13144 8.48398 7.13144C9.4291 7.13398 10.335 7.50942 11.0049 8.17617C12.3968 9.56855 12.3968 11.8256 11.0049 13.218C10.3349 13.8845 9.42904 14.2599 8.48398 14.2627ZM8.48398 8.91425C7.63344 8.91407 6.90121 9.51474 6.73511 10.3489C6.56901 11.1831 7.01531 12.0184 7.80105 12.344C8.58679 12.6697 9.49313 12.3949 9.96579 11.6878C10.4384 10.9807 10.3458 10.0381 9.74443 9.43662C9.41083 9.10125 8.95701 8.91317 8.48398 8.91425Z"
+      fill="#4A4D4D"
+    />
+  </svg>
+);