l-min-components 0.2.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "l-min-components",
+  "version": "0.2.0",
+  "type": "module",
+  "files": [
+    "src/assets",
+    "src/components"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "chart.js": "^4.2.1",
+    "classnames": "^2.3.2",
+    "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
+    "rc-slider": "^10.1.1",
+    "rc-tooltip": "^6.0.1",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^4.10.0",
+    "react-dom": "^18.2.0",
+    "react-flags-select": "^2.2.3",
+    "react-icons": "^4.8.0",
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.8.2",
+    "react-tooltip": "^5.10.1",
+    "styled-components": "^5.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.1.0"
+  }
+}

package/src/assets/Icon.svg

@@ -0,0 +1,3 @@
+<svg width="19" 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/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/assets/svg/Frame 4534413.svg

@@ -0,0 +1,7 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.17966 1.43111C5.59313 1.50244 5.1572 1.71645 4.73316 2.14445C4.40027 2.47338 4.18626 2.83402 4.07133 3.25806C4.00396 3.49584 4 3.94763 4 10.5064C4 17.0652 4.00396 17.517 4.07133 17.7548C4.30515 18.5989 4.99076 19.2885 5.8428 19.5302C6.08851 19.5976 6.39763 19.6016 12.0449 19.6016H17.9895V12.9041C17.9895 9.21845 17.9776 6.15899 17.9617 6.09955C17.9221 5.96084 17.7517 5.76269 17.5971 5.67947C17.4822 5.61606 17.0582 5.6121 11.7279 5.59228L5.98151 5.57247L5.7041 5.43772C5.00661 5.0969 4.59445 4.32411 4.72127 3.58699C4.84412 2.86572 5.4148 2.2792 6.12022 2.14445C6.25496 2.12067 8.41084 2.10482 12.1638 2.10482H18.0014L17.9696 1.95819C17.9102 1.69663 17.7002 1.49055 17.4307 1.43111C17.2484 1.38752 6.53237 1.38752 6.17966 1.43111ZM5.30383 6.01632C5.4148 6.07181 5.60106 6.15503 5.72391 6.20259C5.94188 6.28581 5.94584 6.28581 11.6209 6.2977L17.2959 6.30562V12.6068V18.908H11.8111C8.29591 18.908 6.25496 18.8922 6.12022 18.8684C5.64465 18.7773 5.14531 18.4166 4.91942 18.0045C4.68164 17.5685 4.69353 17.8856 4.69353 11.4694V5.59228L4.89961 5.75477C5.01057 5.84195 5.19287 5.96084 5.30383 6.01632Z" fill="#ADB3B3"/>
+<path d="M8.36646 8.4497C8.33079 8.46952 8.27531 8.53689 8.2436 8.59633C8.12471 8.82619 6.98733 11.7509 6.91203 12.0204C6.85655 12.2066 6.82088 12.492 6.80503 12.817L6.78125 13.3242L7.13396 13.3123L7.48667 13.3004L7.51045 12.8209C7.52233 12.5594 7.54611 12.3255 7.56197 12.2978C7.60556 12.2265 10.237 12.2304 10.2449 12.2978C10.2489 12.3255 10.2608 12.5633 10.2766 12.8249L10.3004 13.3004L10.6531 13.3123L11.0058 13.3242L10.9821 12.817C10.9702 12.5078 10.9305 12.1987 10.883 12.0323C10.7443 11.5171 9.56725 8.59237 9.46025 8.4933C9.37307 8.41404 9.32551 8.40611 8.90147 8.40611C8.64783 8.40611 8.40609 8.42592 8.36646 8.4497ZM9.49196 10.3282C9.74955 10.9781 9.95167 11.521 9.94374 11.5329C9.92393 11.5488 7.85523 11.5448 7.83938 11.525C7.83145 11.5171 8.0296 11.0059 8.27531 10.3876C8.52102 9.76543 8.73502 9.22645 8.74691 9.18682C8.76672 9.13531 8.80635 9.11945 8.8975 9.12738C9.02036 9.13927 9.02432 9.14323 9.49196 10.3282Z" fill="#ADB3B3"/>
+<path d="M11.7109 12.2511V12.6078H13.3833H15.0597L13.4269 14.2406C12.5273 15.1402 11.7743 15.9288 11.7506 15.9882C11.7308 16.0517 11.7109 16.2617 11.7109 16.4559V16.8086H13.8113H15.9157L15.9038 16.4598L15.8919 16.1151L14.2275 16.1032L12.567 16.0952L14.1958 14.4585C15.8206 12.8297 15.8246 12.8258 15.8721 12.6078C15.8959 12.4889 15.9117 12.2828 15.9038 12.152L15.8919 11.9143L13.8034 11.9024L11.7109 11.8944V12.2511Z" fill="#ADB3B3"/>
+<path d="M6.0392 2.9017C5.84105 2.99285 5.62308 3.17911 5.53986 3.34159C5.50815 3.40104 5.48438 3.45652 5.48438 3.47237C5.48438 3.48426 8.1396 3.49219 11.3893 3.49219H17.2942V3.15533V2.81847H11.7578C6.27302 2.81847 6.21753 2.82244 6.0392 2.9017Z" fill="#ADB3B3"/>
+<path d="M5.48438 4.26011C5.48438 4.37503 5.7499 4.66434 5.95994 4.77926L6.1779 4.89815L11.738 4.91004L17.2942 4.91797V4.5613V4.20463H11.3893C6.30868 4.20463 5.48438 4.21255 5.48438 4.26011Z" fill="#ADB3B3"/>
+</svg>

package/src/assets/svg/Property 44.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.58073 16.3346H7.16406C3.83073 16.3346 2.16406 15.5013 2.16406 11.3346V7.16797C2.16406 3.83464 3.83073 2.16797 7.16406 2.16797H13.8307C17.1641 2.16797 18.8307 3.83464 18.8307 7.16797V11.3346C18.8307 14.668 17.1641 16.3346 13.8307 16.3346H13.4141C13.1557 16.3346 12.9057 16.4596 12.7474 16.668L11.4974 18.3346C10.9474 19.068 10.0474 19.068 9.4974 18.3346L8.2474 16.668C8.11406 16.4846 7.80573 16.3346 7.58073 16.3346Z" stroke="#ADB3B3" stroke-width="1.0856" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.33594 7.16797H14.6693" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.33594 11.332H11.3359" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svg/Property 55.svg

@@ -0,0 +1,10 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.47135 10.8828L5.92969 13.4245" stroke="#ADB3B3" stroke-width="1.0856" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.96094 10.9102L8.5026 13.4518" stroke="#ADB3B3" stroke-width="1.0856" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7734 12.168H11.7818" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0547 12.168H15.063" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4141 13.8174V13.8008" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4141 10.5323V10.5156" stroke="#ADB3B3" stroke-width="1.44747" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.9974 18.8333H12.9974C17.1641 18.8333 18.8307 17.1667 18.8307 13V11.3333C18.8307 7.16667 17.1641 5.5 12.9974 5.5H7.9974C3.83073 5.5 2.16406 7.16667 2.16406 11.3333V13C2.16406 17.1667 3.83073 18.8333 7.9974 18.8333Z" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3401 2.16797L11.3318 3.00964C11.3234 3.46797 10.9568 3.83464 10.4984 3.83464H10.4734C10.0151 3.83464 9.64844 4.20964 9.64844 4.66797C9.64844 5.1263 10.0234 5.5013 10.4818 5.5013H11.3151" stroke="#ADB3B3" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/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/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/assets/svg/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9297 5.92969L20.9997 11.9997L14.9297 18.0697" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 12H20.83" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/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/assets/svg/calendar.jsx

@@ -0,0 +1,64 @@
+export const CalendarIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "18"}
+    height={height || "18"}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 1.5V3.75"
+      stroke="#616161"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 1.5V3.75"
+      stroke="#616161"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.625 6.81641H15.375"
+      stroke="#616161"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.75 6.375V12.75C15.75 15 14.625 16.5 12 16.5H6C3.375 16.5 2.25 15 2.25 12.75V6.375C2.25 4.125 3.375 2.625 6 2.625H12C14.625 2.625 15.75 4.125 15.75 6.375Z"
+      stroke="#616161"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.99588 10.2734H9.00262"
+      stroke="#616161"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.22244 10.2734H6.22918"
+      stroke="#616161"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.22244 12.5234H6.22918"
+      stroke="#616161"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/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/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/assets/svg/download.jsx

@@ -0,0 +1,32 @@
+export const DownloadIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "18"}
+    height={height || "19"}
+    viewBox="0 0 18 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.6969 7.41797C15.6969 7.6763 16.9219 9.21797 16.9219 12.593L16.9219 12.7013C16.9219 16.4263 15.4302 17.918 11.7052 17.918L6.27187 17.918C2.54688 17.918 1.05521 16.4263 1.05521 12.7013L1.05521 12.593C1.05521 9.24297 2.26354 7.7013 5.21354 7.4263"
+      stroke="#52565F"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9 1.66797L9 12.4013"
+      stroke="#52565F"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.7891 10.543L8.9974 13.3346L6.20573 10.543"
+      stroke="#52565F"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/assets/svg/eos-icons_machine-learning-outlined.svg

@@ -0,0 +1,6 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0026 8.33203C15.2938 8.48914 12.6887 9.42815 10.5026 11.0354C8.31652 9.42815 5.71138 8.48914 3.00261 8.33203V10.7987C2.55984 10.7996 2.13554 10.9763 1.82301 11.2899C1.51047 11.6035 1.33528 12.0284 1.33594 12.4712V13.3079C1.33594 14.232 3.00261 15.1479 3.00261 15.1479V16.8204C5.21594 16.9627 7.35049 17.6966 9.18344 18.9454C9.64626 19.2665 10.087 19.6184 10.5026 19.9987C10.9182 19.6184 11.359 19.2665 11.8218 18.9454C13.6547 17.6966 15.7893 16.9627 18.0026 16.8204V14.9804C18.4454 14.9795 18.8697 14.8028 19.1822 14.4892C19.4947 14.1755 19.6699 13.7506 19.6693 13.3079V12.4712C19.6699 12.0284 19.4947 11.6035 19.1822 11.2899C18.8697 10.9763 18.4454 10.7996 18.0026 10.7987V8.33203ZM10.5026 17.8504C8.77426 16.5837 6.77882 15.7297 4.66927 15.3537V10.2287C6.28601 10.5544 7.821 11.201 9.18344 12.1304C9.64626 12.4515 10.087 12.8034 10.5026 13.1837C10.9182 12.8034 11.359 12.4515 11.8218 12.1304C13.1841 11.2007 14.7191 10.5538 16.3359 10.2279V15.3537C14.2264 15.7297 12.231 16.5837 10.5026 17.8504ZM9.66927 6.66536H11.3359V7.4987H9.66927V6.66536ZM9.66927 3.33203H11.3359V4.16536H9.66927V3.33203Z" fill="#ADB2B2"/>
+<path d="M9.66355 8.33283H11.3302V9.16617H9.66355V8.33283ZM7.99689 4.16617C8.2179 4.16617 8.42986 4.07837 8.58614 3.92209C8.74242 3.76581 8.83022 3.55385 8.83022 3.33283C8.83099 3.22428 8.81019 3.11665 8.769 3.0162C8.72781 2.91576 8.66707 2.8245 8.59031 2.74774C8.51355 2.67098 8.42229 2.61024 8.32185 2.56905C8.2214 2.52787 8.11378 2.50706 8.00522 2.50783C7.89633 2.50729 7.7884 2.52819 7.68759 2.56936C7.58678 2.61052 7.49507 2.67114 7.41769 2.74774C7.26141 2.90246 7.17299 3.11292 7.17189 3.33283C7.17078 3.55274 7.25708 3.76408 7.4118 3.92036C7.56651 4.07664 7.77698 4.16506 7.99689 4.16617Z" fill="#ADB2B2"/>
+<path d="M12.9974 4.16667C13.4576 4.16667 13.8307 3.79357 13.8307 3.33333C13.8307 2.8731 13.4576 2.5 12.9974 2.5C12.5372 2.5 12.1641 2.8731 12.1641 3.33333C12.1641 3.79357 12.5372 4.16667 12.9974 4.16667Z" fill="#ADB2B2"/>
+<path d="M13.8307 6.66667H7.16406C6.50122 6.666 5.86572 6.4024 5.39703 5.9337C4.92833 5.465 4.66472 4.8295 4.66406 4.16667V2.5C4.66472 1.83716 4.92833 1.20166 5.39703 0.732964C5.86572 0.264266 6.50122 0.000661846 7.16406 0L13.8307 0C14.4936 0.000661846 15.1291 0.264266 15.5978 0.732964C16.0665 1.20166 16.3301 1.83716 16.3307 2.5V4.16667C16.3301 4.8295 16.0665 5.465 15.5978 5.9337C15.1291 6.4024 14.4936 6.666 13.8307 6.66667ZM7.16406 1.66667C6.94312 1.66689 6.73128 1.75476 6.57505 1.91099C6.41882 2.06722 6.33095 2.27905 6.33073 2.5V4.16667C6.33095 4.38761 6.41882 4.59945 6.57505 4.75568C6.73128 4.91191 6.94312 4.99978 7.16406 5H13.8307C14.0517 4.99978 14.2635 4.91191 14.4197 4.75568C14.576 4.59945 14.6638 4.38761 14.6641 4.16667V2.5C14.6638 2.27905 14.576 2.06722 14.4197 1.91099C14.2635 1.75476 14.0517 1.66689 13.8307 1.66667H7.16406Z" fill="#ADB2B2"/>
+</svg>

package/src/assets/svg/learning.jsx

@@ -0,0 +1,21 @@
+const Learn = () => {
+    return (
+
+<svg 
+width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.8307 14.4501V4.39174C18.8307 3.39174 18.0141 2.65008 17.0224 2.73341H16.9724C15.2224 2.88341 12.5641 3.77508 11.0807 4.70841L10.9391 4.80008C10.6974 4.95008 10.2974 4.95008 10.0557 4.80008L9.8474 4.67508C8.36406 3.75008 5.71406 2.86674 3.96406 2.72508C2.9724 2.64174 2.16406 3.39174 2.16406 4.38341V14.4501C2.16406 15.2501 2.81406 16.0001 3.61406 16.1001L3.85573 16.1334C5.66406 16.3751 8.45573 17.2917 10.0557 18.1667L10.0891 18.1834C10.3141 18.3084 10.6724 18.3084 10.8891 18.1834C12.4891 17.3001 15.2891 16.3751 17.1057 16.1334L17.3807 16.1001C18.1807 16.0001 18.8307 15.2501 18.8307 14.4501Z" stroke="#ADB2B2" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
+<path 
+    d="M10.5 5.07422V17.5742" 
+    stroke="#ADB2B2" 
+    stroke-width="1.0856" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+/>
+<path d="M6.96094 7.57422H5.08594" stroke="#ADB2B2" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.58594 10.0742H5.08594" stroke="#ADB2B2" stroke-width="1.0856" stroke-linecap="round" stroke-linejoin="round"/>
+
+</svg>
+
+)}
+
+export default Learn;

package/src/assets/svg/logout.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91406 6.79922C8.1724 3.79922 9.71406 2.57422 13.0891 2.57422H13.1974C16.9224 2.57422 18.4141 4.06589 18.4141 7.79089V13.2242C18.4141 16.9492 16.9224 18.4409 13.1974 18.4409H13.0891C9.73906 18.4409 8.1974 17.2326 7.9224 14.2826" stroke="#ADB3B3" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.999 10.5H3.51562" stroke="#ADB3B3" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.3776 7.70703L2.58594 10.4987L5.3776 13.2904" stroke="#ADB3B3" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svg/material-symbols_spatial-audio-outline-rounded.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3516 6.14453C13.6988 5.50564 13.1746 4.76259 12.7791 3.91536C12.383 3.06814 12.1849 2.29036 12.1849 1.58203C12.1849 1.3737 12.2646 1.19648 12.4241 1.05036C12.5841 0.904809 12.7821 0.832031 13.0182 0.832031C13.2266 0.832031 13.4141 0.911753 13.5807 1.0712C13.7474 1.2312 13.8446 1.42925 13.8724 1.66536C13.9696 2.29036 14.1571 2.88759 14.4349 3.45703C14.7127 4.02648 15.0738 4.53342 15.5182 4.97786C15.9627 5.42231 16.4696 5.78675 17.0391 6.0712C17.6085 6.3562 18.2057 6.54731 18.8307 6.64453C19.0668 6.67231 19.2646 6.76592 19.4241 6.92536C19.5841 7.08536 19.6641 7.26953 19.6641 7.47786C19.6641 7.71398 19.5946 7.91203 19.4557 8.07203C19.3168 8.23148 19.1432 8.3112 18.9349 8.3112C18.2127 8.3112 17.4279 8.10981 16.5807 7.70703C15.7335 7.30425 14.9905 6.78342 14.3516 6.14453ZM16.6849 3.8112C16.3238 3.45009 16.0391 3.06453 15.8307 2.65453C15.6224 2.24509 15.5182 1.86675 15.5182 1.51953C15.5182 1.32509 15.6016 1.16175 15.7682 1.02953C15.9349 0.897865 16.1363 0.832031 16.3724 0.832031C16.5668 0.832031 16.7371 0.904809 16.8832 1.05036C17.0288 1.19648 17.1432 1.38759 17.2266 1.6237C17.296 1.81814 17.3793 1.9987 17.4766 2.16536C17.5738 2.33203 17.6988 2.49175 17.8516 2.64453C18.0043 2.79731 18.1641 2.9187 18.3307 3.0087C18.4974 3.09925 18.6779 3.17925 18.8724 3.2487C19.1085 3.33203 19.2996 3.45009 19.4457 3.60286C19.5913 3.75564 19.6641 3.92925 19.6641 4.1237C19.6641 4.35981 19.5982 4.5612 19.4666 4.72786C19.3343 4.89453 19.171 4.97786 18.9766 4.97786C18.6293 4.97786 18.2507 4.8737 17.8407 4.66536C17.4313 4.45703 17.046 4.17231 16.6849 3.8112ZM8.83073 10.832C7.91406 10.832 7.12934 10.5056 6.47656 9.85286C5.82378 9.20009 5.4974 8.41536 5.4974 7.4987C5.4974 6.58203 5.82378 5.79731 6.47656 5.14453C7.12934 4.49175 7.91406 4.16536 8.83073 4.16536C9.7474 4.16536 10.5321 4.49175 11.1849 5.14453C11.8377 5.79731 12.1641 6.58203 12.1641 7.4987C12.1641 8.41536 11.8377 9.20009 11.1849 9.85286C10.5321 10.5056 9.7474 10.832 8.83073 10.832ZM3.83073 17.4987C3.3724 17.4987 2.98017 17.3356 2.65406 17.0095C2.3274 16.6829 2.16406 16.2904 2.16406 15.832V15.1654C2.16406 14.707 2.28212 14.2765 2.51823 13.8737C2.75434 13.4709 3.08073 13.1654 3.4974 12.957C4.20573 12.5959 5.00434 12.2904 5.89323 12.0404C6.78212 11.7904 7.76128 11.6654 8.83073 11.6654C9.90017 11.6654 10.8793 11.7904 11.7682 12.0404C12.6571 12.2904 13.4557 12.5959 14.1641 12.957C14.5807 13.1654 14.9071 13.4709 15.1432 13.8737C15.3793 14.2765 15.4974 14.707 15.4974 15.1654V15.832C15.4974 16.2904 15.3343 16.6829 15.0082 17.0095C14.6816 17.3356 14.2891 17.4987 13.8307 17.4987H3.83073ZM3.83073 15.832H13.8307V15.1654C13.8307 15.0126 13.7927 14.8737 13.7166 14.7487C13.6399 14.6237 13.5391 14.5265 13.4141 14.457C12.9141 14.207 12.2718 13.957 11.4874 13.707C10.7024 13.457 9.81684 13.332 8.83073 13.332C7.84462 13.332 6.95906 13.457 6.17406 13.707C5.38962 13.957 4.7474 14.207 4.2474 14.457C4.1224 14.5265 4.02184 14.6237 3.94573 14.7487C3.86906 14.8737 3.83073 15.0126 3.83073 15.1654V15.832ZM8.83073 9.16536C9.28906 9.16536 9.68156 9.00203 10.0082 8.67536C10.3343 8.34925 10.4974 7.95703 10.4974 7.4987C10.4974 7.04036 10.3343 6.64786 10.0082 6.3212C9.68156 5.99509 9.28906 5.83203 8.83073 5.83203C8.3724 5.83203 7.98017 5.99509 7.65406 6.3212C7.3274 6.64786 7.16406 7.04036 7.16406 7.4987C7.16406 7.95703 7.3274 8.34925 7.65406 8.67536C7.98017 9.00203 8.3724 9.16536 8.83073 9.16536Z" fill="#ADB2B2"/>
+</svg>

package/src/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/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/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/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/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>
+);

package/src/components/ApiProgress/ApiConsumption/assets/Vector.jsx

@@ -0,0 +1,8 @@
+const Vector = () => {
+    return(
+    <svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.24219 20C9.34219 20 10.2422 19.1 10.2422 18H6.24219C6.24219 19.1 7.14219 20 8.24219 20ZM14.2422 14V9C14.2422 5.93 12.6122 3.36 9.74219 2.68V2C9.74219 1.17 9.07219 0.5 8.24219 0.5C7.41219 0.5 6.74219 1.17 6.74219 2V2.68C3.88219 3.36 2.24219 5.92 2.24219 9V14L0.242188 16V17H16.2422V16L14.2422 14ZM12.2422 15H4.24219V9C4.24219 6.52 5.75219 4.5 8.24219 4.5C10.7322 4.5 12.2422 6.52 12.2422 9V15Z" fill="#313333"/>
+    </svg>
+    )
+};
+export default Vector

package/src/components/ApiProgress/ApiConsumption/index.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+
+import { Container } from "./styles";
+import Switch from "../toggle";
+import ProgressBar from "../ApiProgressBar";
+import { BsCheck } from "react-icons/bs";
+import Alerm from "./assets/Vector"
+
+const ApiConsumption = ({onClick}) => {
+  const [disabled, setDisabled] = useState(false);
+  const [used, setUsed] = useState(300);
+
+  const handleAdjust = (newUsed) => {
+    setUsed(newUsed);
+  };
+  const handleToggle = (e) => {
+    console.log(e.target.checked);
+
+    setDisabled(e.target.checked);
+  };
+
+  return (
+    <Container disabled={disabled}>
+      <div className="switch">
+        <div className="view">
+          <div className="sw-cont">
+            <Switch
+              defaultChecked={false}
+              color="rgba(254, 191, 16, 1)"
+              icon={<BsCheck />}
+              onChange={handleToggle}
+            />
+          </div>
+         
+          <p className="v-text">View Api consumption (sec)</p>
+        </div>
+        
+        <div className="notify">
+          <p>Set Notification</p>
+          <div className="bell" onClick={onClick}>
+            <Alerm/>
+          </div>
+         
+        </div>
+        
+      </div>
+      <ProgressBar
+        total={1000}
+        used={used}
+        available={1000 - used}
+        max={1000}
+        size="sm"
+        disabled={disabled}
+        onAdjust={handleAdjust}
+      />
+    </Container>
+  );
+};
+
+export default ApiConsumption;

package/src/components/ApiProgress/ApiConsumption/styles/index.jsx

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+
+  .switch {
+    display: flex;
+    gap: 20px;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(173, 178, 178, 1);
+    align-items: center;
+
+    .view {
+      display: flex;
+      margin-top: 13px;
+      align-items: center;
+      .sw-cont {
+        label {
+          transform: scale(0.7);
+        }
+      }
+      .v-text {
+        margin-left: 13px;
+        /* // margin-top: 3px; */
+        font-size: 13px;
+      }
+    }
+
+    .notify {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      p {
+        margin-right: 15px;
+        font-size: 13px;
+      }
+      .bell {
+        background: #f5f7f7;
+        border-radius: 11px;
+        color: black;
+        cursor: pointer;
+        padding: 8px 12px;
+        svg {
+        }
+
+        &:hover {
+          background: rgba(0, 194, 194, 0.1);
+        }
+
+        &.active {
+          background: rgba(0, 194, 194, 0.1);
+        }
+      }
+    }
+  }
+`;