IPA

2024-06-18 13:31:13 +05:30
commit 1cf6f290de
2171 changed files with 271106 additions and 0 deletions
--- a/1
+++ b/1
--- a/ipa-agent/assets/css/style.css
+++ b/ipa-agent/assets/css/style.css
--- a/ipa-agent/assets/images/appointments.svg
+++ b/ipa-agent/assets/images/appointments.svg
@@ -0,0 +1,12 @@
 <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1604_2263)">
 <path d="M1 6.49935C1 3.51397 1 2.02089 1.92783 1.09385C2.85487 0.166016 4.34796 0.166016 7.33333 0.166016H10.5C13.4854 0.166016 14.9785 0.166016 15.9055 1.09385C16.8333 2.02089 16.8333 3.51397 16.8333 6.49935V8.08268C16.8333 11.0681 16.8333 12.5611 15.9055 13.4882C14.9785 14.416 13.4854 14.416 10.5 14.416H7.33333C4.34796 14.416 2.85487 14.416 1.92783 13.4882C1 12.5611 1 11.0681 1 8.08268V6.49935Z" stroke="black"/>
 <path d="M4.96094 0.166016V-1.02148M12.8776 0.166016V-1.02148M1.39844 4.12435H16.4401" stroke="black" stroke-linecap="round"/>
 <path d="M13.6641 10.4583C13.6641 10.6683 13.5807 10.8697 13.4322 11.0181C13.2837 11.1666 13.0824 11.25 12.8724 11.25C12.6624 11.25 12.4611 11.1666 12.3126 11.0181C12.1641 10.8697 12.0807 10.6683 12.0807 10.4583C12.0807 10.2484 12.1641 10.047 12.3126 9.89854C12.4611 9.75007 12.6624 9.66667 12.8724 9.66667C13.0824 9.66667 13.2837 9.75007 13.4322 9.89854C13.5807 10.047 13.6641 10.2484 13.6641 10.4583ZM13.6641 7.29167C13.6641 7.50163 13.5807 7.70299 13.4322 7.85146C13.2837 7.99993 13.0824 8.08333 12.8724 8.08333C12.6624 8.08333 12.4611 7.99993 12.3126 7.85146C12.1641 7.70299 12.0807 7.50163 12.0807 7.29167C12.0807 7.0817 12.1641 6.88034 12.3126 6.73187C12.4611 6.58341 12.6624 6.5 12.8724 6.5C13.0824 6.5 13.2837 6.58341 13.4322 6.73187C13.5807 6.88034 13.6641 7.0817 13.6641 7.29167ZM9.70573 10.4583C9.70573 10.6683 9.62232 10.8697 9.47386 11.0181C9.32539 11.1666 9.12403 11.25 8.91406 11.25C8.7041 11.25 8.50274 11.1666 8.35427 11.0181C8.2058 10.8697 8.1224 10.6683 8.1224 10.4583C8.1224 10.2484 8.2058 10.047 8.35427 9.89854C8.50274 9.75007 8.7041 9.66667 8.91406 9.66667C9.12403 9.66667 9.32539 9.75007 9.47386 9.89854C9.62232 10.047 9.70573 10.2484 9.70573 10.4583ZM9.70573 7.29167C9.70573 7.50163 9.62232 7.70299 9.47386 7.85146C9.32539 7.99993 9.12403 8.08333 8.91406 8.08333C8.7041 8.08333 8.50274 7.99993 8.35427 7.85146C8.2058 7.70299 8.1224 7.50163 8.1224 7.29167C8.1224 7.0817 8.2058 6.88034 8.35427 6.73187C8.50274 6.58341 8.7041 6.5 8.91406 6.5C9.12403 6.5 9.32539 6.58341 9.47386 6.73187C9.62232 6.88034 9.70573 7.0817 9.70573 7.29167ZM5.7474 10.4583C5.7474 10.6683 5.66399 10.8697 5.51552 11.0181C5.36706 11.1666 5.16569 11.25 4.95573 11.25C4.74577 11.25 4.5444 11.1666 4.39594 11.0181C4.24747 10.8697 4.16406 10.6683 4.16406 10.4583C4.16406 10.2484 4.24747 10.047 4.39594 9.89854C4.5444 9.75007 4.74577 9.66667 4.95573 9.66667C5.16569 9.66667 5.36706 9.75007 5.51552 9.89854C5.66399 10.047 5.7474 10.2484 5.7474 10.4583ZM5.7474 7.29167C5.7474 7.50163 5.66399 7.70299 5.51552 7.85146C5.36706 7.99993 5.16569 8.08333 4.95573 8.08333C4.74577 8.08333 4.5444 7.99993 4.39594 7.85146C4.24747 7.70299 4.16406 7.50163 4.16406 7.29167C4.16406 7.0817 4.24747 6.88034 4.39594 6.73187C4.5444 6.58341 4.74577 6.5 4.95573 6.5C5.16569 6.5 5.36706 6.58341 5.51552 6.73187C5.66399 6.88034 5.7474 7.0817 5.7474 7.29167Z" fill="black"/>
 </g>
 <defs>
 <clipPath id="clip0_1604_2263">
 <rect width="19" height="19" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/arrow_less.svg
+++ b/ipa-agent/assets/images/arrow_less.svg
@@ -0,0 +1,3 @@
 <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.4049 19.7887C14.2493 19.7893 14.0956 19.7549 13.955 19.6882C13.8143 19.6215 13.6905 19.5242 13.5924 19.4033L8.56119 13.1533C8.40798 12.9669 8.32422 12.7331 8.32422 12.4919C8.32422 12.2506 8.40798 12.0168 8.56119 11.8304L13.7695 5.58041C13.9463 5.36768 14.2004 5.2339 14.4758 5.20851C14.7513 5.18311 15.0255 5.26818 15.2383 5.44499C15.451 5.6218 15.5848 5.87587 15.6102 6.15132C15.6356 6.42676 15.5505 6.70101 15.3737 6.91374L10.7174 12.4971L15.2174 18.0804C15.3448 18.2333 15.4257 18.4195 15.4506 18.6169C15.4755 18.8144 15.4433 19.0148 15.3578 19.1945C15.2723 19.3743 15.1372 19.5257 14.9683 19.631C14.7994 19.7363 14.6039 19.7911 14.4049 19.7887Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/back_btn.svg
+++ b/ipa-agent/assets/images/back_btn.svg
@@ -0,0 +1,4 @@
 <svg width="86" height="28" viewBox="0 0 86 28" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M38.816 14.256C39.2213 14.32 39.5893 14.4853 39.92 14.752C40.2613 15.0187 40.528 15.3493 40.72 15.744C40.9227 16.1387 41.024 16.56 41.024 17.008C41.024 17.5733 40.88 18.0853 40.592 18.544C40.304 18.992 39.8827 19.3493 39.328 19.616C38.784 19.872 38.1387 20 37.392 20H33.232V8.848H37.232C37.9893 8.848 38.6347 8.976 39.168 9.232C39.7013 9.47733 40.1013 9.81333 40.368 10.24C40.6347 10.6667 40.768 11.1467 40.768 11.68C40.768 12.3413 40.5867 12.8907 40.224 13.328C39.872 13.7547 39.4027 14.064 38.816 14.256ZM34.688 13.664H37.136C37.8187 13.664 38.3467 13.504 38.72 13.184C39.0933 12.864 39.28 12.4213 39.28 11.856C39.28 11.2907 39.0933 10.848 38.72 10.528C38.3467 10.208 37.808 10.048 37.104 10.048H34.688V13.664ZM37.264 18.8C37.9893 18.8 38.5547 18.6293 38.96 18.288C39.3653 17.9467 39.568 17.472 39.568 16.864C39.568 16.2453 39.3547 15.76 38.928 15.408C38.5013 15.0453 37.9307 14.864 37.216 14.864H34.688V18.8H37.264ZM43.7805 15.584C43.7805 14.688 43.9618 13.904 44.3245 13.232C44.6872 12.5493 45.1832 12.0213 45.8125 11.648C46.4525 11.2747 47.1618 11.088 47.9405 11.088C48.7085 11.088 49.3752 11.2533 49.9405 11.584C50.5058 11.9147 50.9272 12.3307 51.2045 12.832V11.232H52.6765V20H51.2045V18.368C50.9165 18.88 50.4845 19.3067 49.9085 19.648C49.3432 19.9787 48.6818 20.144 47.9245 20.144C47.1458 20.144 46.4418 19.952 45.8125 19.568C45.1832 19.184 44.6872 18.6453 44.3245 17.952C43.9618 17.2587 43.7805 16.4693 43.7805 15.584ZM51.2045 15.6C51.2045 14.9387 51.0712 14.3627 50.8045 13.872C50.5378 13.3813 50.1752 13.008 49.7165 12.752C49.2685 12.4853 48.7725 12.352 48.2285 12.352C47.6845 12.352 47.1885 12.48 46.7405 12.736C46.2925 12.992 45.9352 13.3653 45.6685 13.856C45.4018 14.3467 45.2685 14.9227 45.2685 15.584C45.2685 16.256 45.4018 16.8427 45.6685 17.344C45.9352 17.8347 46.2925 18.2133 46.7405 18.48C47.1885 18.736 47.6845 18.864 48.2285 18.864C48.7725 18.864 49.2685 18.736 49.7165 18.48C50.1752 18.2133 50.5378 17.8347 50.8045 17.344C51.0712 16.8427 51.2045 16.2613 51.2045 15.6ZM55.873 15.6C55.873 14.6933 56.0543 13.904 56.417 13.232C56.7797 12.5493 57.281 12.0213 57.921 11.648C58.5717 11.2747 59.313 11.088 60.145 11.088C61.2223 11.088 62.1077 11.3493 62.801 11.872C63.505 12.3947 63.969 13.12 64.193 14.048H62.625C62.4757 13.5147 62.1823 13.0933 61.745 12.784C61.3183 12.4747 60.785 12.32 60.145 12.32C59.313 12.32 58.641 12.608 58.129 13.184C57.617 13.7493 57.361 14.5547 57.361 15.6C57.361 16.656 57.617 17.472 58.129 18.048C58.641 18.624 59.313 18.912 60.145 18.912C60.785 18.912 61.3183 18.7627 61.745 18.464C62.1717 18.1653 62.465 17.7387 62.625 17.184H64.193C63.9583 18.08 63.489 18.8 62.785 19.344C62.081 19.8773 61.201 20.144 60.145 20.144C59.313 20.144 58.5717 19.9573 57.921 19.584C57.281 19.2107 56.7797 18.6827 56.417 18C56.0543 17.3173 55.873 16.5173 55.873 15.6ZM72.3118 20L68.8718 16.128V20H67.4158V8.16H68.8718V15.12L72.2478 11.232H74.2798L70.1518 15.6L74.2958 20H72.3118Z" fill="black"/>
 <path d="M14.4049 21.7887C14.2493 21.7893 14.0956 21.7549 13.955 21.6882C13.8143 21.6215 13.6905 21.5242 13.5924 21.4033L8.56119 15.1533C8.40798 14.9669 8.32422 14.7331 8.32422 14.4919C8.32422 14.2506 8.40798 14.0168 8.56119 13.8304L13.7695 7.58041C13.9463 7.36768 14.2004 7.2339 14.4758 7.20851C14.7513 7.18311 15.0255 7.26818 15.2383 7.44499C15.451 7.6218 15.5848 7.87587 15.6102 8.15132C15.6356 8.42676 15.5505 8.70101 15.3737 8.91374L10.7174 14.4971L15.2174 20.0804C15.3448 20.2333 15.4257 20.4195 15.4506 20.6169C15.4755 20.8144 15.4433 21.0148 15.3578 21.1945C15.2723 21.3743 15.1372 21.5257 14.9683 21.631C14.7994 21.7363 14.6039 21.7911 14.4049 21.7887Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/bell_icon.png
+++ b/ipa-agent/assets/images/bell_icon.png
--- a/ipa-agent/assets/images/contacted.svg
+++ b/ipa-agent/assets/images/contacted.svg
@@ -0,0 +1,6 @@
 <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.70792 0.0250778C4.91538 0.389252 1.04057 3.87561 0.137413 8.63902C-0.00825683 9.40621 -0.0471021 11.0863 0.064578 11.8972C0.22967 13.0722 0.535577 14.0774 1.05999 15.1505C2.63322 18.3552 5.69229 20.5208 9.27091 20.953C9.87786 21.0258 11.2714 21.0112 11.9172 20.9287C15.8018 20.4188 19.1959 17.6171 20.4341 13.8928C20.8225 12.7178 20.973 11.8049 20.973 10.5376C20.973 9.22169 20.8419 8.38167 20.4632 7.21145C19.4726 4.19123 17.1516 1.78283 14.1508 0.651459C12.8252 0.156181 11.1355 -0.0817471 9.70792 0.0250778ZM11.8153 0.92823C13.3642 1.14188 14.8015 1.72456 16.1805 2.69569C16.7632 3.10357 17.8946 4.23493 18.3024 4.81761C19.2833 6.21604 19.8562 7.63389 20.0796 9.23141C20.1913 10.0326 20.1524 11.533 20.0068 12.271C19.628 14.1453 18.7734 15.8302 17.5401 17.1121L17.0934 17.5783L17.0885 13.6549V9.73639H17.9431C18.4093 9.73639 18.8366 9.71697 18.8851 9.68784C18.9337 9.66356 18.9968 9.57616 19.0211 9.49361C19.1279 9.19256 19.0648 9.12458 17.8363 8.30883L16.7001 7.55135V5.82759C16.7001 4.16695 16.6952 4.09898 16.603 4.00672C16.5107 3.91446 16.4427 3.90961 15.156 3.90961C14.0683 3.90961 13.7867 3.92417 13.709 3.97758C13.6264 4.04071 13.6119 4.12811 13.5924 4.75449L13.5682 5.46342L12.1115 4.49228C10.7519 3.57942 10.6402 3.5163 10.4605 3.53086C10.2955 3.54543 9.63023 3.97273 6.16329 6.28402C3.9054 7.78928 2.03112 9.05175 2.00199 9.09545C1.90487 9.21684 1.9243 9.5276 2.03598 9.63928C2.12823 9.73154 2.19621 9.73639 3.00711 9.73639H3.88113V13.6549L3.87627 17.5783L3.42955 17.1121C2.09424 15.7234 1.18624 13.8297 0.89004 11.8195C0.768649 10.9794 0.817205 9.44506 0.992009 8.61959C1.39017 6.72103 2.21563 5.15751 3.54123 3.79307C4.39583 2.91419 5.22129 2.31209 6.28468 1.79739C8.00844 0.962219 9.91671 0.661169 11.8153 0.92823ZM12.1746 5.53625C13.5827 6.47339 13.8352 6.62877 13.9906 6.62877C14.112 6.62877 14.2091 6.59478 14.2722 6.53166C14.3645 6.4394 14.3693 6.37142 14.3693 5.56053V4.68651H15.1463H15.9232V6.32772C15.9232 7.56592 15.9377 7.98836 15.9863 8.04663C16.0154 8.09033 16.3262 8.31369 16.6758 8.5419L17.307 8.95949H16.9137C16.2679 8.95949 16.3407 8.38167 16.3116 13.6792L16.2873 18.2581L15.8018 18.5834C14.617 19.3749 13.1894 19.9139 11.7521 20.1081C11.0918 20.1955 9.87786 20.1955 9.21749 20.1081C7.78022 19.9139 6.35266 19.3749 5.16302 18.5785L4.68231 18.2581L4.65803 13.6792C4.6289 8.38167 4.70173 8.95949 4.05593 8.95949H3.66262L7.0373 6.70646C8.89217 5.46342 10.4411 4.44858 10.4751 4.44858C10.5042 4.44373 11.2714 4.93415 12.1746 5.53625Z" fill="black"/>
 <path d="M10.387 9.10552C10.2801 9.21235 10.2559 9.48427 10.3384 9.63965C10.3967 9.75133 10.6346 9.83387 10.8919 9.83387C11.2221 9.83387 11.6883 9.96983 12.0864 10.1738C13.0236 10.6642 13.6257 11.5576 13.7374 12.6259C13.7616 12.8492 13.8005 13.0775 13.8296 13.126C13.9462 13.3445 14.3977 13.3494 14.5143 13.1357C14.5968 12.9852 14.5677 12.3491 14.4657 11.9412C14.2715 11.1886 13.9219 10.5962 13.3392 10.0524C12.6206 9.37259 11.7514 9.01327 10.8385 9.00841C10.5472 9.00841 10.4647 9.02783 10.387 9.10552Z" fill="black"/>
 <path d="M6.98769 9.73677C6.2642 9.89215 5.65239 10.47 5.42417 11.2129C5.33677 11.4945 5.32706 11.6256 5.35134 12.0384C5.49215 14.539 7.00712 16.826 9.26985 17.9671C10.4206 18.5449 11.7608 18.8217 12.9019 18.71C13.6205 18.642 14.2275 18.2196 14.5528 17.5592C14.7276 17.2048 14.7325 17.1854 14.7325 16.6367C14.7325 16.1608 14.7179 16.0394 14.6256 15.8452C14.5722 15.7238 14.4703 15.5878 14.4071 15.5441C14.3343 15.4956 13.7856 15.4082 12.8096 15.2916C11.0227 15.0731 11.2024 15.0294 10.7508 15.7821C10.7071 15.8549 10.6877 15.8549 10.508 15.7772C9.80398 15.4859 8.98337 14.7478 8.5415 14.0098L8.34728 13.6941L8.52208 13.5922C8.84741 13.3931 9.02707 13.1843 9.02707 12.9949C9.02707 12.8978 8.90082 12.1986 8.7503 11.4363C8.44925 9.92129 8.43468 9.89215 8.07536 9.78533C7.8083 9.70764 7.24504 9.68336 6.98769 9.73677ZM7.6772 10.5768C7.75489 10.6545 8.17733 12.7084 8.13848 12.8104C8.12392 12.8541 7.97825 12.9367 7.81316 12.9949C7.30331 13.1794 7.26932 13.3688 7.60922 14.0535C8.2356 15.3062 9.30384 16.2628 10.5712 16.7046C11.1684 16.9134 11.2995 16.8552 11.4549 16.3405C11.552 16.0151 11.5617 16.0006 11.7074 16.0006C12.0424 16.0006 13.8585 16.2579 13.8924 16.3113C13.9507 16.3939 13.9361 16.8163 13.873 17.03C13.7953 17.2873 13.4554 17.6612 13.1689 17.802C12.965 17.8991 12.8679 17.9137 12.4163 17.9088C11.1684 17.8894 10.0273 17.5252 8.91053 16.7872C8.46867 16.4958 7.61407 15.6413 7.2936 15.1703C6.62838 14.1943 6.24478 13.1017 6.1768 11.9947C6.15252 11.5674 6.15738 11.5479 6.31761 11.242C6.55068 10.7953 6.95856 10.5282 7.43441 10.5185C7.53153 10.5137 7.64321 10.5428 7.6772 10.5768Z" fill="black"/>
 <path d="M10.3941 11.0429C10.2582 11.1789 10.2533 11.4945 10.3844 11.6256C10.4378 11.679 10.5641 11.7373 10.6661 11.7519C11.0448 11.8101 11.2245 11.883 11.4187 12.0578C11.6226 12.2374 11.7926 12.5433 11.7974 12.723C11.7974 12.7764 11.8217 12.9026 11.8508 13.0046C11.8897 13.1503 11.9382 13.2086 12.0693 13.262C12.215 13.3202 12.2587 13.3202 12.4044 13.262C12.6035 13.1746 12.6472 13.0532 12.6132 12.6307C12.5403 11.7567 11.7683 11.0138 10.87 10.9604C10.5398 10.941 10.4864 10.9507 10.3941 11.0429Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/cross_blue.svg
+++ b/ipa-agent/assets/images/cross_blue.svg
@@ -0,0 +1,3 @@
 <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.5 0C3.81282 0 0 3.81317 0 8.5C0 13.1868 3.81282 17 8.5 17C13.1872 17 17 13.1868 17 8.5C17 3.81317 13.1872 0 8.5 0ZM8.5 15.5833C4.59446 15.5833 1.41667 12.4059 1.41667 8.5C1.41667 4.59411 4.59446 1.41667 8.5 1.41667C12.4055 1.41667 15.5833 4.59411 15.5833 8.5C15.5833 12.4059 12.4055 15.5833 8.5 15.5833ZM11.8341 6.16746L9.50165 8.5L11.8342 10.8325C12.1109 11.1092 12.1109 11.5574 11.8342 11.8342C11.6958 11.9725 11.5146 12.0417 11.3333 12.0417C11.1521 12.0417 10.9709 11.9725 10.8325 11.8341L8.5 9.50165L6.16746 11.8342C6.02912 11.9725 5.84793 12.0417 5.66667 12.0417C5.4854 12.0417 5.30421 11.9725 5.16587 11.8341C4.8892 11.5575 4.8892 11.1092 5.16587 10.8325L7.49835 8.5L5.1658 6.16746C4.88913 5.89078 4.88913 5.44255 5.1658 5.1658C5.44248 4.88906 5.89071 4.88913 6.16746 5.1658L8.5 7.49835L10.8325 5.1658C11.1092 4.88913 11.5574 4.88913 11.8342 5.1658C12.1109 5.44248 12.1109 5.89078 11.8341 6.16746Z" fill="#001B9C"/>
 </svg>
--- a/ipa-agent/assets/images/dashboard.svg
+++ b/ipa-agent/assets/images/dashboard.svg
@@ -0,0 +1,3 @@
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.22656 2.37004C1.22656 1.67379 1.79098 1.10938 2.48722 1.10938H7.52987C8.22612 1.10938 8.79053 1.67379 8.79053 2.37004V8.67334C8.79053 9.36959 8.22611 9.93401 7.52987 9.93401H2.48722C1.79098 9.93401 1.22656 9.36959 1.22656 8.67334V2.37004ZM13.8332 2.37004C13.8332 1.67379 14.3976 1.10938 15.0938 1.10938H20.1365C20.8327 1.10938 21.3971 1.67379 21.3971 2.37004V4.89136C21.3971 5.5876 20.8327 6.15202 20.1365 6.15202H15.0938C14.3976 6.15202 13.8332 5.5876 13.8332 4.89136V2.37004ZM1.22656 16.2373C1.22656 15.5411 1.79098 14.9767 2.48722 14.9767H7.52987C8.22612 14.9767 8.79053 15.5411 8.79053 16.2373V20.0193C8.79053 20.7155 8.22611 21.28 7.52987 21.28H2.48722C1.79098 21.28 1.22656 20.7155 1.22656 20.0193V16.2373ZM13.8332 12.4553C13.8332 11.7591 14.3976 11.1947 15.0938 11.1947H20.1365C20.8327 11.1947 21.3971 11.7591 21.3971 12.4553V20.0193C21.3971 20.7155 20.8327 21.28 20.1365 21.28H15.0938C14.3976 21.28 13.8332 20.7155 13.8332 20.0193V12.4553Z" stroke="black" stroke-width="1.03927"/>
 </svg>
--- a/ipa-agent/assets/images/del_btn.png
+++ b/ipa-agent/assets/images/del_btn.png
--- a/ipa-agent/assets/images/del_icon.svg
+++ b/ipa-agent/assets/images/del_icon.svg
@@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="16" xml:space="preserve" version="1.1" viewBox="0 0 14 16">
  <image width="14" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAYAAAAmlE46AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABnSURBVHgB7ZLBCYAwDEVfRbfw4Cg6mpPVTTxYcArRVBSKCsF48NIHLW34L7nEcSGA54EauvTvJLhi5Y18ZguM3MQJWjlDMsHHmiqaJ2bxT3Hn08qN0GjSnGTKeEmLvhI3KOJyZON7A3cMGOPF2o28AAAAAElFTkSuQmCC"/>
 </svg>
--- a/ipa-agent/assets/images/edit_btn.svg
+++ b/ipa-agent/assets/images/edit_btn.svg
@@ -0,0 +1,4 @@
 <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="0.5" y="0.5" width="33" height="33" rx="2.5" fill="white" stroke="#DDDDDD"/>
 <path d="M11.3893 24.7696L11.3857 24.7732H8.47917V21.8598C8.47917 21.8588 8.47918 21.858 8.47921 21.8572C8.48007 21.8563 8.48117 21.8551 8.48257 21.8537L18.5992 11.7371L21.5151 14.653L11.3893 24.7696ZM24.6336 11.5348L24.6333 11.5352L23.2183 12.9501L20.3022 10.034L21.7172 8.61908L21.7175 8.61873C21.7617 8.57449 21.8141 8.53939 21.8718 8.51544C21.9296 8.49149 21.9915 8.47917 22.054 8.47917C22.1165 8.47917 22.1784 8.49149 22.2361 8.51544C22.2938 8.53939 22.3463 8.57449 22.3904 8.61873L22.3908 8.61908L24.6333 10.8616L24.6336 10.8619C24.6779 10.9061 24.7129 10.9585 24.7369 11.0163C24.7608 11.074 24.7732 11.1359 24.7732 11.1984C24.7732 11.2609 24.7608 11.3228 24.7369 11.3805C24.7129 11.4382 24.6778 11.4907 24.6336 11.5348Z" stroke="#00A611" stroke-width="0.958333"/>
 </svg>
--- a/ipa-agent/assets/images/edit_icon.png
+++ b/ipa-agent/assets/images/edit_icon.png
--- a/ipa-agent/assets/images/edit_icon.svg
+++ b/ipa-agent/assets/images/edit_icon.svg
@@ -0,0 +1,3 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.25 4.49977L13.5 6.74977M9.75 14.9998H15.75M3.75 11.9998L3 14.9998L6 14.2498L14.6895 5.56027C14.9707 5.27898 15.1287 4.89752 15.1287 4.49977C15.1287 4.10203 14.9707 3.72056 14.6895 3.43927L14.5605 3.31027C14.2792 3.02907 13.8977 2.87109 13.5 2.87109C13.1023 2.87109 12.7208 3.02907 12.4395 3.31027L3.75 11.9998Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/ipa-agent/assets/images/edit_oth.png
+++ b/ipa-agent/assets/images/edit_oth.png
--- a/ipa-agent/assets/images/edit_pen.svg
+++ b/ipa-agent/assets/images/edit_pen.svg
@@ -0,0 +1,19 @@
 <svg width="48" height="45" viewBox="0 0 48 45" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_d_1502_4285)">
 <rect x="3" y="1" width="42" height="39" rx="3" fill="white"/>
 <rect x="3.2" y="1.2" width="41.6" height="38.6" rx="2.8" stroke="#CCCCCC" stroke-width="0.4"/>
 </g>
 <path d="M12.625 27.0985V30.7718C12.625 31.1102 12.8908 31.376 13.2292 31.376H16.9025C17.0596 31.376 17.2167 31.3156 17.3254 31.1947L30.5204 18.0118L25.9892 13.4806L12.8063 26.6635C12.6854 26.7843 12.625 26.9293 12.625 27.0985ZM34.0246 14.5077C34.1366 14.3959 34.2255 14.2631 34.2861 14.1169C34.3467 13.9707 34.3779 13.814 34.3779 13.6558C34.3779 13.4975 34.3467 13.3408 34.2861 13.1947C34.2255 13.0485 34.1366 12.9157 34.0246 12.8039L31.1971 9.97642C31.0853 9.8644 30.9525 9.77553 30.8063 9.71489C30.6602 9.65426 30.5035 9.62305 30.3452 9.62305C30.187 9.62305 30.0303 9.65426 29.8841 9.71489C29.7379 9.77553 29.6051 9.8644 29.4933 9.97642L27.2821 12.1877L31.8133 16.7189L34.0246 14.5077Z" fill="#F5BE3B"/>
 <defs>
 <filter id="filter0_d_1502_4285" x="0" y="0" width="48" height="45" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="2"/>
 <feGaussianBlur stdDeviation="1.5"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1502_4285"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1502_4285" result="shape"/>
 </filter>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/eye_icon.png
+++ b/ipa-agent/assets/images/eye_icon.png
--- a/ipa-agent/assets/images/favicon_icon.png
+++ b/ipa-agent/assets/images/favicon_icon.png
--- a/ipa-agent/assets/images/fb.svg
+++ b/ipa-agent/assets/images/fb.svg
@@ -0,0 +1,10 @@
 <svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1502_12490)">
 <path d="M15.9997 29.9665C14.0387 29.9665 12.0968 29.5923 10.285 28.8653C8.4732 28.1383 6.82697 27.0727 5.44028 25.7293C4.05359 24.386 2.95361 22.7912 2.20314 21.036C1.45267 19.2808 1.06641 17.3997 1.06641 15.4999C1.06641 13.6001 1.45267 11.7189 2.20314 9.96372C2.95361 8.20854 4.05359 6.61375 5.44028 5.27039C6.82697 3.92704 8.4732 2.86143 10.285 2.13441C12.0968 1.40739 14.0387 1.0332 15.9997 1.0332C19.9603 1.0332 23.7587 2.55737 26.5592 5.27039C29.3597 7.98342 30.9331 11.6631 30.9331 15.4999C30.9331 19.3367 29.3597 23.0163 26.5592 25.7293C23.7587 28.4424 19.9603 29.9665 15.9997 29.9665ZM15.9997 29.9665V13.4332C15.9997 12.337 16.4493 11.2856 17.2494 10.5105C18.0496 9.73534 19.1348 9.29987 20.2664 9.29987H21.3331M10.6664 17.5665H21.3331" stroke="white" stroke-width="2"/>
 </g>
 <defs>
 <clipPath id="clip0_1502_12490">
 <rect width="32" height="31" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/home_icon.png
+++ b/ipa-agent/assets/images/home_icon.png
--- a/ipa-agent/assets/images/ipa_facebook.svg
+++ b/ipa-agent/assets/images/ipa_facebook.svg
@@ -0,0 +1,11 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1502_12407)">
 <path d="M20 10C20 4.47719 15.5228 0 10 0C4.47719 0 0 4.47719 0 10C0 14.9912 3.65687 19.1284 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79687C8.4375 5.29062 9.93047 3.90625 12.2147 3.90625C13.3088 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.9499 6.5625 11.5625 7.33336 11.5625 8.12422V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3431 19.1284 20 14.9913 20 10Z" fill="#1877F2"/>
 <path d="M13.8926 12.8906L14.3359 10H11.5625V8.12422C11.5625 7.33328 11.9499 6.5625 13.1922 6.5625H14.4531V4.10156C14.4531 4.10156 13.3088 3.90625 12.2146 3.90625C9.93047 3.90625 8.4375 5.29063 8.4375 7.79688V10H5.89844V12.8906H8.4375V19.8785C8.95439 19.9595 9.4768 20.0001 10 20C10.5232 20.0002 11.0456 19.9595 11.5625 19.8785V12.8906H13.8926Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_1502_12407">
 <rect width="20" height="20" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/ipa_foot.svg
+++ b/ipa-agent/assets/images/ipa_foot.svg
@@ -0,0 +1,27 @@
 <svg width="137" height="49" viewBox="0 0 137 49" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1502_12434)">
 <path d="M26.4947 40.8327C23.9539 41.8762 23.1826 45.9142 25.1789 47.8651C27.7197 50.4059 32.2113 48.6818 32.2113 45.1429C32.2113 43.0105 31.5762 41.9216 29.9428 41.0596C28.491 40.2883 27.9012 40.2429 26.4947 40.8327ZM30.578 42.7383C32.166 45.0068 30.7595 48.092 28.128 48.092C25.4512 48.092 24.0447 45.0522 25.678 42.7383C26.1771 42.0123 26.8123 41.7401 28.128 41.7401C29.4437 41.7401 30.0789 42.0123 30.578 42.7383Z" fill="white"/>
 <path d="M131.21 41.0602C129.985 41.6046 129.712 41.9222 129.849 42.9204C129.985 44.3269 130.529 44.6898 133.297 45.3704C134.93 45.7787 135.248 46.0509 135.112 46.8676C135.021 47.6389 134.612 47.9111 133.342 48.0019C132.299 48.0926 131.437 47.8657 130.983 47.4574C130.121 46.55 129.758 46.55 129.758 47.412C129.758 48.2741 131.164 49 132.934 49C135.066 49 136.11 48.2741 136.11 46.7315C136.11 45.2343 135.384 44.6898 132.798 44.2361C130.847 43.8731 130.348 43.3287 131.119 42.4213C131.754 41.65 134.749 41.4685 134.749 42.1944C134.749 42.4213 135.066 42.6481 135.429 42.6481C136.246 42.6481 136.291 42.013 135.52 41.3778C134.522 40.5157 132.707 40.3796 131.21 41.0602Z" fill="white"/>
 <path d="M0.453125 44.9167C0.453125 47.3213 0.634606 49 0.906829 49C1.17905 49 1.36053 48.4102 1.36053 47.6389C1.36053 46.3231 1.45127 46.2778 3.31146 46.2778C5.57998 46.2778 6.80498 45.2796 6.80498 43.4194C6.80498 41.5593 5.71609 40.8333 2.90313 40.8333H0.453125V44.9167ZM5.62535 42.7389C6.44201 44.0546 5.44387 45.1435 3.22072 45.2796L1.36053 45.4157V43.5556V41.6954L3.22072 41.8315C4.44572 41.9222 5.30775 42.2398 5.62535 42.7389Z" fill="white"/>
 <path d="M12.25 44.9167C12.25 48.2287 12.3861 49 12.9306 49C13.3843 49 13.6111 48.5463 13.6111 47.6389C13.6111 46.6407 13.838 46.2778 14.4278 46.2778C14.8815 46.2778 15.8343 46.8676 16.5602 47.6389C18.3296 49.4537 19.5093 49.4537 17.9667 47.6389L16.8324 46.2778L17.9667 45.1435C19.237 43.8731 19.3278 43.238 18.3296 41.8315C17.7398 40.9694 17.2407 40.8333 14.9269 40.8333H12.25V44.9167ZM17.4676 43.3287C17.4676 44.5991 17.3315 44.6898 15.562 44.8259L13.6111 44.962V43.3287V41.6954L15.562 41.8315C17.3315 41.9676 17.4676 42.0583 17.4676 43.3287Z" fill="white"/>
 <path d="M37.6562 44.9167C37.6562 48.2287 37.7924 49 38.3368 49C38.7905 49 39.0174 48.5463 39.0174 47.6389C39.0174 46.3685 39.1535 46.2778 40.6507 46.2778C41.5127 46.2778 42.647 46.0963 43.1007 45.8241C44.2803 45.1889 44.6433 43.238 43.7812 41.9222C43.1914 40.9694 42.7377 40.8333 40.3785 40.8333H37.6562V44.9167ZM42.8738 43.5556C42.8738 45.0981 42.8285 45.1435 40.9683 45.2796L39.0174 45.4157V43.5556V41.6954L40.9683 41.8315C42.8285 41.9676 42.8738 42.013 42.8738 43.5556Z" fill="white"/>
 <path d="M49.9062 44.9167V49H52.8553C54.534 49 55.8044 48.8185 55.8044 48.5463C55.8044 48.2741 54.6701 48.0926 53.309 48.0926C50.859 48.0926 50.8137 48.0926 50.8137 46.7315C50.8137 45.4157 50.859 45.3704 53.0822 45.3704C54.3525 45.3704 55.3507 45.1435 55.3507 44.9167C55.3507 44.6444 54.3525 44.463 53.0822 44.463C50.859 44.463 50.8137 44.4176 50.8137 43.1019C50.8137 41.7407 50.859 41.7407 53.309 41.7407C54.6701 41.7407 55.8044 41.5139 55.8044 41.287C55.8044 41.0148 54.534 40.8333 52.8553 40.8333H49.9062V44.9167Z" fill="white"/>
 <path d="M61.25 44.9167C61.25 47.3213 61.4315 49 61.7037 49C61.9759 49 62.1574 48.4102 62.1574 47.6389C62.1574 46.5046 62.3389 46.2778 63.2009 46.2778C63.7907 46.2778 64.8343 46.8676 65.5602 47.6389C66.2861 48.4102 67.1935 49 67.5565 49C68.0556 49 67.7833 48.5463 66.8306 47.5481C65.3787 46.0963 65.3787 46.0963 66.3769 45.5972C67.012 45.2796 67.4204 44.6444 67.5111 43.737C67.738 41.65 66.6491 40.8333 63.7 40.8333H61.25V44.9167ZM66.2407 42.4213C66.513 42.7843 66.6491 43.4648 66.4676 44.0093C66.2407 44.7352 65.787 44.9167 64.1537 44.9167C62.1574 44.9167 62.1574 44.9167 62.1574 43.3287C62.1574 41.7861 62.2028 41.7407 63.9269 41.7407C64.8796 41.7407 65.9231 42.013 66.2407 42.4213Z" fill="white"/>
 <path d="M72.5938 41.287C72.5938 41.5139 73.3197 41.7407 74.1817 41.7407H75.7697V45.3704C75.7697 47.5028 75.9512 49 76.2234 49C76.4956 49 76.6771 47.5028 76.6771 45.3704V41.7407H78.265C79.1271 41.7407 79.853 41.5139 79.853 41.287C79.853 41.0148 78.3558 40.8333 76.2234 40.8333C74.091 40.8333 72.5938 41.0148 72.5938 41.287Z" fill="white"/>
 <path d="M84.8438 41.0602C84.8438 41.1509 85.4789 42.2398 86.2049 43.4194C87.1123 44.8259 87.566 46.1417 87.566 47.2759C87.566 48.5009 87.7475 49 88.2465 49C88.7456 49 88.9271 48.5009 88.9271 47.2759C88.9271 46.0963 89.3808 44.8259 90.3336 43.3741C91.1049 42.1944 91.6039 41.1056 91.4225 40.9241C91.1049 40.6065 90.2428 41.5139 88.9271 43.5102L88.2012 44.5537L86.9762 42.6935C85.9326 41.1056 84.8438 40.2889 84.8438 41.0602Z" fill="white"/>
 <path d="M105.668 44.7348C103.989 48.5006 103.671 50.4061 105.123 48.183C105.713 47.3663 106.257 47.1848 108.072 47.1848C109.932 47.1848 110.386 47.3209 110.568 48.0922C110.749 48.8182 112.065 49.4534 112.065 48.8182C112.065 48.0469 108.39 40.833 107.981 40.833C107.709 40.833 106.666 42.6024 105.668 44.7348ZM109.025 44.3265C109.66 45.9598 109.66 46.0506 108.843 46.1867C108.39 46.2774 107.573 46.2774 107.119 46.1867C106.303 46.0506 106.303 45.9598 106.938 44.3265C107.301 43.4191 107.8 42.6478 107.981 42.6478C108.163 42.6478 108.662 43.4191 109.025 44.3265Z" fill="white"/>
 <path d="M117.508 44.9167V49H119.595C122.226 49 123.315 48.4102 124.132 46.4593C124.676 45.1435 124.676 44.6898 124.132 43.3741C123.315 41.4231 122.226 40.8333 119.595 40.8333H117.508V44.9167ZM122.499 42.6481C124.54 44.6898 122.998 48.0926 120.003 48.0926H118.415V44.9167V41.7407H120.003C121.001 41.7407 121.954 42.1037 122.499 42.6481Z" fill="white"/>
 <path d="M9.07407 5.12725L0.226852 10.2541L0.0907407 19.8726L0 29.4911H2.26852H4.53704V21.1884V12.8856L11.5694 8.93836L18.6019 4.94577L21.188 6.48836L23.8194 7.98558L23.9556 16.4698L24.0463 24.9541H22.2315H20.4167V17.7856C20.4167 11.2069 20.3259 10.5263 19.5546 9.8004C18.5111 8.84762 19.0556 8.66614 13.0213 11.9782L8.16667 14.655V25.9522V37.2041H22.2315H36.2963V23.6837V10.2087L34.3907 9.16521C33.3019 8.62077 32.3491 8.16706 32.213 8.16706C32.0769 8.16706 32.0315 13.6569 32.1222 20.4171L32.2583 32.6671H22.2315H12.25V25.0448L12.2954 17.468L14.337 16.243L16.3787 14.9726L16.288 22.1411L16.2426 29.2643L22.413 29.4004L28.5833 29.5365V17.7856V6.03466L23.5926 3.04021C20.8704 1.36151 18.4657 0.000396729 18.2843 0.000396729C18.1028 0.000396729 13.9287 2.31429 9.07407 5.12725Z" fill="white"/>
 <path d="M40.832 24.0463V36.75H43.3274H45.8228V24.0463V11.3426H43.3274H40.832V24.0463Z" fill="white"/>
 <path d="M49.9062 24.0463V36.75H52.6285H55.3507V28.538V20.3713L57.71 23.4565C59.0257 25.1352 61.7025 28.5833 63.6535 31.0787C65.6498 33.5741 67.3738 35.888 67.4646 36.1602C67.6007 36.5231 68.4627 36.75 69.4609 36.75H71.2303V24.0463V11.3426H68.735H66.2396L66.1488 18.7833L66.0127 26.2694L60.16 18.7833L54.3072 11.3426H52.084H49.9062V24.0463Z" fill="white"/>
 <path d="M74.8594 24.0009V36.75H80.939C88.6066 36.75 91.0112 36.0694 93.9603 33.075C99.7677 27.1315 98.2705 16.4241 91.0112 12.5676C89.3779 11.7056 88.3344 11.5694 82.0279 11.4333L74.8594 11.2519V24.0009ZM90.0584 18.2389C92.7807 21.188 93.189 25.4981 91.0112 28.6741C89.6047 30.8065 87.8807 31.487 83.6159 31.6685L79.8501 31.85V24.0463V16.2426L84.2057 16.4241L88.5612 16.5602L90.0584 18.2389Z" fill="white"/>
 <path d="M100.723 24.0463V36.75H103.218H105.713V24.0463V11.3426H103.218H100.723V24.0463Z" fill="white"/>
 <path d="M117.283 13.7019C112.473 24.4546 107.392 35.7065 107.21 36.1602C107.029 36.6139 107.755 36.75 109.842 36.75H112.746L113.653 34.4815L114.606 32.1676L121.048 32.0769L127.491 31.9861L128.489 34.3454L129.533 36.75H132.391C133.934 36.75 135.204 36.7046 135.204 36.6139C135.204 36.5231 132.663 30.8519 129.578 24.0009L123.952 11.5694L121.184 11.4333L118.371 11.2972L117.283 13.7019ZM123.045 21.687C123.952 23.8648 124.859 26.0426 125.041 26.4509C125.268 27.1315 124.905 27.2222 121.139 27.2222C117.328 27.2222 116.965 27.1315 117.237 26.4056C118.145 24.0009 120.958 17.6944 121.139 17.6944C121.275 17.6944 122.137 19.5093 123.045 21.687Z" fill="white"/>
 <path d="M0 35.1624V37.2041H2.26852H4.53704V35.1624V33.1208H2.26852H0V35.1624Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_1502_12434">
 <rect width="136.111" height="49" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/ipa_google.svg
+++ b/ipa-agent/assets/images/ipa_google.svg
@@ -0,0 +1,14 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1502_12476)">
 <path d="M6.96721 0.658267C4.9689 1.3515 3.24556 2.66728 2.05032 4.41233C0.855082 6.15739 0.250946 8.23974 0.326651 10.3535C0.402355 12.4673 1.15391 14.5011 2.47092 16.1562C3.78794 17.8113 5.60099 19.0004 7.64377 19.5489C9.2999 19.9762 11.035 19.995 12.7 19.6036C14.2083 19.2648 15.6028 18.5401 16.7469 17.5005C17.9376 16.3854 18.802 14.9668 19.2469 13.3973C19.7304 11.6905 19.8164 9.89567 19.4985 8.15045H10.1985V12.0083H15.5844C15.4768 12.6236 15.2461 13.2108 14.9062 13.7349C14.5663 14.2589 14.1242 14.7091 13.6063 15.0583C12.9487 15.4935 12.2073 15.7862 11.4297 15.9176C10.6499 16.0627 9.85011 16.0627 9.07033 15.9176C8.27995 15.7544 7.53227 15.4282 6.87502 14.9598C5.819 14.2123 5.02608 13.1503 4.6094 11.9255C4.18579 10.6776 4.18579 9.32486 4.6094 8.07702C4.906 7.20235 5.39632 6.40598 6.04377 5.74733C6.7847 4.97975 7.72273 4.43108 8.75495 4.16151C9.78718 3.89195 10.8737 3.91191 11.8953 4.2192C12.6935 4.46409 13.4233 4.89214 14.0266 5.4692C14.6339 4.86504 15.2401 4.25931 15.8453 3.65202C16.1578 3.32545 16.4985 3.01452 16.8063 2.68014C15.8852 1.82314 14.8042 1.15624 13.625 0.717642C11.4777 -0.0620611 9.12811 -0.0830148 6.96721 0.658267Z" fill="white"/>
 <path d="M6.96563 0.65805C9.12635 -0.0837359 11.4759 -0.0633337 13.6234 0.715863C14.8028 1.15744 15.8834 1.82755 16.8031 2.68774C16.4906 3.02211 16.1609 3.33461 15.8422 3.65961C15.2359 4.26482 14.6302 4.86795 14.025 5.46899C13.4217 4.89192 12.6919 4.46387 11.8937 4.21899C10.8725 3.91061 9.78597 3.8895 8.75347 4.15796C7.72097 4.42642 6.78236 4.97408 6.04062 5.74086C5.39318 6.39951 4.90285 7.19589 4.60625 8.07055L1.36719 5.56274C2.52658 3.26361 4.53398 1.50496 6.96563 0.65805Z" fill="#E33629"/>
 <path d="M0.510152 8.04688C0.68412 7.18402 0.973161 6.34843 1.36953 5.5625L4.60859 8.07656C4.18498 9.3244 4.18498 10.6772 4.60859 11.925C3.52942 12.7583 2.44974 13.5958 1.36953 14.4375C0.377575 12.463 0.0750466 10.2133 0.510152 8.04688Z" fill="#F8BD00"/>
 <path d="M10.1999 8.14844H19.4999C19.8179 9.89366 19.7318 11.6885 19.2484 13.3953C18.8034 14.9648 17.9391 16.3834 16.7484 17.4984C15.703 16.6828 14.653 15.8734 13.6077 15.0578C14.126 14.7082 14.5683 14.2576 14.9082 13.733C15.2481 13.2084 15.4786 12.6205 15.5859 12.0047H10.1999C10.1984 10.7203 10.1999 9.43437 10.1999 8.14844Z" fill="#4385F4"/>
 <path d="M1.36719 14.4373C2.4474 13.604 3.52708 12.7665 4.60625 11.9248C5.02376 13.1501 5.81782 14.2121 6.875 14.9592C7.5343 15.4254 8.28359 15.7489 9.075 15.9092C9.85477 16.0542 10.6546 16.0542 11.4344 15.9092C12.2119 15.7778 12.9533 15.485 13.6109 15.0498C14.6562 15.8654 15.7063 16.6748 16.7516 17.4904C15.6076 18.5306 14.2132 19.2559 12.7047 19.5951C11.0397 19.9865 9.30457 19.9678 7.64844 19.5404C6.3386 19.1907 5.11512 18.5742 4.05469 17.7295C2.93239 16.8383 2.01568 15.7153 1.36719 14.4373Z" fill="#319F43"/>
 </g>
 <defs>
 <clipPath id="clip0_1502_12476">
 <rect width="20" height="20" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/ipa_line.svg
+++ b/ipa-agent/assets/images/ipa_line.svg
@@ -0,0 +1,3 @@
 <svg width="270" height="1" viewBox="0 0 270 1" fill="none" xmlns="http://www.w3.org/2000/svg">
 <line y1="0.5" x2="270" y2="0.5" stroke="#DEDEDE"/>
 </svg>
--- a/ipa-agent/assets/images/ipa_logo.svg
+++ b/ipa-agent/assets/images/ipa_logo.svg
--- a/ipa-agent/assets/images/leads.svg
+++ b/ipa-agent/assets/images/leads.svg
@@ -0,0 +1,3 @@
 <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.2495 0C9.92329 0 8.65144 0.520594 7.7137 1.44726C6.77596 2.37392 6.24914 3.63074 6.24914 4.94124C6.24914 6.25174 6.77596 7.50856 7.7137 8.43523C8.65144 9.36189 9.92329 9.88248 11.2495 9.88248C12.5756 9.88248 13.8475 9.36189 14.7852 8.43523C15.7229 7.50856 16.2498 6.25174 16.2498 4.94124C16.2498 3.63074 15.7229 2.37392 14.7852 1.44726C13.8475 0.520594 12.5756 0 11.2495 0ZM7.49922 4.94124C7.49922 3.95837 7.89433 3.01575 8.59764 2.32075C9.30094 1.62576 10.2548 1.23531 11.2495 1.23531C12.2441 1.23531 13.198 1.62576 13.9013 2.32075C14.6046 3.01575 14.9997 3.95837 14.9997 4.94124C14.9997 5.92411 14.6046 6.86673 13.9013 7.56173C13.198 8.25673 12.2441 8.64717 11.2495 8.64717C10.2548 8.64717 9.30094 8.25673 8.59764 7.56173C7.89433 6.86673 7.49922 5.92411 7.49922 4.94124ZM17.3311 18.2789C15.9922 19.1226 14.2634 19.5933 12.3783 19.7254C12.2843 19.4801 12.1385 19.2573 11.9507 19.072L11.4007 18.5284C13.5071 18.5087 15.351 18.0602 16.6585 17.2363C17.9711 16.4086 18.7499 15.2067 18.7499 13.5884C18.7499 13.2608 18.6182 12.9466 18.3838 12.7149C18.1493 12.4833 17.8314 12.3531 17.4998 12.3531H9.67935C9.52318 11.9171 9.31236 11.5021 9.05181 11.1178H17.4998C18.1629 11.1178 18.7988 11.3781 19.2677 11.8414C19.7366 12.3048 20 12.9332 20 13.5884C20 15.6773 18.9587 17.2523 17.3311 18.2789ZM4.37402 18.5297C5.35658 18.5297 6.26414 18.2085 6.99419 17.6686L10.1819 20.8187C10.2399 20.8761 10.3088 20.9217 10.3847 20.9528C10.4605 20.9839 10.5418 20.9999 10.624 21C10.7061 21.0001 10.7874 20.9841 10.8633 20.9531C10.9392 20.9221 11.0082 20.8766 11.0663 20.8193C11.1244 20.762 11.1705 20.6939 11.202 20.6189C11.2335 20.5439 11.2497 20.4636 11.2498 20.3824C11.2499 20.3013 11.2337 20.2209 11.2024 20.1459C11.171 20.0709 11.125 20.0027 11.0669 19.9453L7.87924 16.7953C8.46929 16.0155 8.77573 15.0618 8.74893 14.0885C8.72214 13.1152 8.36368 12.1793 7.7316 11.4324C7.09952 10.6855 6.23082 10.1713 5.26617 9.97306C4.30152 9.77481 3.29739 9.90411 2.41636 10.34C1.53534 10.776 0.829009 11.493 0.411736 12.375C-0.00553727 13.2571 -0.109321 14.2524 0.117189 15.2C0.343699 16.1476 0.887242 16.9919 1.65981 17.5962C2.43237 18.2005 3.38873 18.5294 4.37402 18.5297ZM4.37402 17.2943C3.54517 17.2943 2.75026 16.969 2.16418 16.3898C1.57809 15.8106 1.24883 15.0251 1.24883 14.2061C1.24883 13.387 1.57809 12.6015 2.16418 12.0223C2.75026 11.4432 3.54517 11.1178 4.37402 11.1178C5.20288 11.1178 5.99778 11.4432 6.58387 12.0223C7.16996 12.6015 7.49922 13.387 7.49922 14.2061C7.49922 15.0251 7.16996 15.8106 6.58387 16.3898C5.99778 16.969 5.20288 17.2943 4.37402 17.2943Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/linkdin.svg
+++ b/ipa-agent/assets/images/linkdin.svg
@@ -0,0 +1,10 @@
 <svg width="37" height="38" viewBox="0 0 37 38" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1502_12492)">
 <path d="M27.75 4.75C28.9766 4.75 30.153 5.25045 31.0204 6.14124C31.8877 7.03204 32.375 8.24022 32.375 9.5V28.5C32.375 29.7598 31.8877 30.968 31.0204 31.8588C30.153 32.7496 28.9766 33.25 27.75 33.25H9.25C8.02337 33.25 6.84699 32.7496 5.97963 31.8588C5.11228 30.968 4.625 29.7598 4.625 28.5V9.5C4.625 8.24022 5.11228 7.03204 5.97963 6.14124C6.84699 5.25045 8.02337 4.75 9.25 4.75H27.75ZM27.75 7.91667H9.25C8.84112 7.91667 8.449 8.08348 8.15988 8.38041C7.87076 8.67735 7.70833 9.08007 7.70833 9.5V28.5C7.70833 28.9199 7.87076 29.3227 8.15988 29.6196C8.449 29.9165 8.84112 30.0833 9.25 30.0833H27.75C28.1589 30.0833 28.551 29.9165 28.8401 29.6196C29.1292 29.3227 29.2917 28.9199 29.2917 28.5V9.5C29.2917 9.08007 29.1292 8.67735 28.8401 8.38041C28.551 8.08348 28.1589 7.91667 27.75 7.91667ZM12.3333 15.8333C12.7109 15.8334 13.0754 15.9758 13.3576 16.2335C13.6398 16.4912 13.82 16.8463 13.8642 17.2314L13.875 17.4167V25.3333C13.8746 25.7369 13.7241 26.125 13.4544 26.4185C13.1846 26.7119 12.8159 26.8885 12.4237 26.9122C12.0314 26.9358 11.6452 26.8048 11.3438 26.5457C11.0425 26.2867 10.8489 25.9193 10.8025 25.5186L10.7917 25.3333V17.4167C10.7917 16.9967 10.9541 16.594 11.2432 16.2971C11.5323 16.0001 11.9245 15.8333 12.3333 15.8333ZM16.9583 14.25C17.3194 14.2499 17.669 14.38 17.9462 14.6176C18.2235 14.8551 18.4107 15.1851 18.4753 15.5499C18.7856 15.3652 19.1063 15.1997 19.4358 15.0543C20.4641 14.6031 22.0042 14.3545 23.3948 14.8026C24.124 15.0401 24.8563 15.4834 25.399 16.2387C25.8846 16.9116 26.1467 17.7302 26.1991 18.6501L26.2083 19V25.3333C26.2079 25.7369 26.0574 26.125 25.7877 26.4185C25.5179 26.7119 25.1493 26.8885 24.757 26.9122C24.3648 26.9358 23.9785 26.8048 23.6772 26.5457C23.3759 26.2867 23.1822 25.9193 23.1358 25.5186L23.125 25.3333V19C23.125 18.4775 23.0017 18.2337 22.9215 18.1213C22.8064 17.9742 22.6479 17.8697 22.4698 17.8236C21.9333 17.6494 21.1609 17.7413 20.6475 17.9661C19.8767 18.3049 19.1706 18.8369 18.6896 19.3293L18.5 19.5383V25.3333C18.4996 25.7369 18.3491 26.125 18.0794 26.4185C17.8096 26.7119 17.4409 26.8885 17.0487 26.9122C16.6564 26.9358 16.2702 26.8048 15.9688 26.5457C15.6675 26.2867 15.4739 25.9193 15.4275 25.5186L15.4167 25.3333V15.8333C15.4167 15.4134 15.5791 15.0107 15.8682 14.7137C16.1573 14.4168 16.5495 14.25 16.9583 14.25ZM12.3333 11.0833C12.7422 11.0833 13.1343 11.2501 13.4235 11.5471C13.7126 11.844 13.875 12.2467 13.875 12.6667C13.875 13.0866 13.7126 13.4893 13.4235 13.7863C13.1343 14.0832 12.7422 14.25 12.3333 14.25C11.9245 14.25 11.5323 14.0832 11.2432 13.7863C10.9541 13.4893 10.7917 13.0866 10.7917 12.6667C10.7917 12.2467 10.9541 11.844 11.2432 11.5471C11.5323 11.2501 11.9245 11.0833 12.3333 11.0833Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_1502_12492">
 <rect width="37" height="38" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/login_img.webp
+++ b/ipa-agent/assets/images/login_img.webp
--- a/ipa-agent/assets/images/my_profile.svg
+++ b/ipa-agent/assets/images/my_profile.svg
@@ -0,0 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.73633 0.0529766C6.93164 0.287352 5.39258 0.920164 3.89258 2.04126C3.41211 2.39673 2.38867 3.42407 2.02539 3.90845C0.990234 5.29516 0.337891 6.8186 0.0761719 8.47094C-0.0253906 9.11157 -0.0253906 10.8772 0.0761719 11.5178C0.396484 13.5452 1.32227 15.4163 2.73242 16.8928C4.27148 18.5022 6.14648 19.4983 8.36133 19.885C9.04102 20.0022 10.4824 20.0295 11.2012 19.9358C15.5059 19.3967 18.9512 16.2053 19.8105 11.967C19.9941 11.0686 20.041 9.68579 19.9277 8.74438C19.3652 4.22485 15.7559 0.615477 11.2363 0.0529766C10.6504 -0.0173359 9.2793 -0.0173359 8.73633 0.0529766ZM10.6973 0.990477C10.9082 1.0022 11.2793 1.04516 11.5254 1.08813C14.9199 1.67798 17.7168 4.19751 18.6738 7.52563C18.9395 8.44751 18.9902 8.83032 18.9902 9.99438C18.9902 11.0959 18.9629 11.3538 18.752 12.1858C18.373 13.7092 17.5098 15.2405 16.4355 16.303L16.1191 16.6155V16.4319C16.1191 16.1428 15.9785 15.3889 15.8418 14.9709C15.2949 13.26 14.0176 11.8616 12.3613 11.1663L12.0176 11.0217L12.3223 10.7834C13.2598 10.0452 13.8027 8.82251 13.7246 7.6311C13.6777 6.96704 13.4316 6.24048 13.0762 5.72094C12.3145 4.61548 10.916 3.97876 9.58789 4.13501C8.02539 4.31469 6.77539 5.37719 6.37305 6.87329C5.98633 8.31469 6.49023 9.87329 7.64258 10.7795C7.81445 10.9124 7.95117 11.0256 7.94336 11.0334C7.93945 11.0374 7.79492 11.0959 7.62305 11.1663C5.57227 11.9788 4.06445 14.0295 3.86523 16.2795L3.83398 16.6038L3.43945 16.1975C2.13086 14.8538 1.26367 13.0334 1.01758 11.1233C0.966797 10.7209 0.958984 10.4163 0.974609 9.76391C0.994141 8.81469 1.06445 8.33032 1.29883 7.52563C2.35742 3.83813 5.64648 1.19751 9.45898 0.970945C9.7168 0.95532 10.0176 0.951414 10.123 0.95532C10.2324 0.963133 10.4902 0.978758 10.6973 0.990477ZM10.6309 5.17016C11.5371 5.37719 12.334 6.12329 12.623 7.03735C13.0293 8.31469 12.4238 9.72876 11.2207 10.3225C9.64258 11.1038 7.77539 10.2561 7.30664 8.54907C7.21289 8.20923 7.20898 7.52954 7.30273 7.18188C7.52148 6.34204 8.16211 5.61938 8.9707 5.29126C9.18164 5.20532 9.32617 5.17016 9.75195 5.09594C9.90039 5.0686 10.3691 5.11157 10.6309 5.17016ZM11.1973 11.8225C12.2168 12.0842 13.0293 12.5569 13.7246 13.2913C14.3301 13.928 14.7754 14.7327 14.9941 15.5686C15.0996 15.9749 15.1152 16.1116 15.1309 16.7209L15.1504 17.4124L14.8457 17.6116C14.4238 17.885 13.4512 18.3577 12.9551 18.5295C11.9863 18.8655 11.0488 19.0217 9.98633 19.0217C8.89258 19.0217 7.9668 18.8616 6.94336 18.4983C6.43555 18.3186 5.54492 17.8811 5.10742 17.5999L4.82227 17.4124L4.8418 16.7209C4.85742 16.1116 4.87305 15.9749 4.97852 15.5686C5.45117 13.7561 6.86914 12.3264 8.66992 11.8499C9.22852 11.7014 9.44336 11.678 10.123 11.6936C10.6621 11.7053 10.8105 11.7209 11.1973 11.8225Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/my_properties.svg
+++ b/ipa-agent/assets/images/my_properties.svg
@@ -0,0 +1,12 @@
 <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.2417 0.461193C9.48446 0.705265 7.21536 0.9112 7.2001 0.9112C7.18103 0.915012 7.13527 0.949335 7.09332 0.991285C7.02086 1.06374 7.01705 1.11713 7.01705 1.83028C7.01705 2.78368 6.99417 2.74555 7.55095 2.74555H7.93232V5.18626V7.62697H8.2374H8.54249V5.18626V2.74555H12.5087H16.4748V10.0677V17.3898H15.5023C14.9684 17.3898 14.5299 17.3822 14.5299 17.3746C14.5299 17.3669 14.5566 17.2869 14.5871 17.1991C14.6176 17.1114 14.6443 16.9169 14.6443 16.7682C14.6443 16.4402 14.5642 16.2534 14.2934 15.9597C14.0913 15.7385 14.0341 15.5974 14.0341 15.3381C14.0341 15.1436 13.9121 14.7699 13.79 14.5754C13.5498 14.2055 13.2485 14.0377 12.8137 14.0338C12.4476 14.0338 12.2112 14.1368 11.9709 14.4076C11.7154 14.6936 11.6163 15.0025 11.5552 15.7004C11.5552 15.7042 11.4637 15.8148 11.3493 15.9406C11.0595 16.2648 10.9832 16.4364 10.9832 16.7682C10.9832 16.9169 11.0099 17.1114 11.0404 17.1991C11.0709 17.2869 11.0976 17.3669 11.0976 17.3746C11.0976 17.3822 10.3845 17.3898 9.51497 17.3898H7.93232V15.3305C7.93232 13.3207 7.93232 13.2711 7.85604 13.1948C7.78358 13.1224 7.73019 13.1186 6.71196 13.1186C5.69372 13.1186 5.64033 13.1224 5.56788 13.1948C5.4916 13.2711 5.4916 13.3207 5.4916 15.3305V17.3898H5.03397H4.57634V14.7089V12.0279L6.38018 11.2385C7.37553 10.8037 8.21071 10.449 8.24122 10.449C8.26791 10.449 9.1031 10.8037 10.0946 11.2385L11.8985 12.0279V12.8783V13.7288H12.2036H12.5087V13.0232C12.5087 12.6304 12.5239 12.3177 12.543 12.3177C12.562 12.3177 12.6688 12.3597 12.7832 12.4131C13.0311 12.5313 13.2447 12.5351 13.3476 12.4321C13.4201 12.3597 13.4239 12.3063 13.4239 11.4406C13.4239 10.6168 13.4163 10.5177 13.3553 10.4567C13.2485 10.3499 8.37851 8.23715 8.24122 8.23715C8.09249 8.23715 3.16911 10.3804 3.09665 10.4757C3.06233 10.5215 3.05089 10.7808 3.05089 11.4482C3.05089 12.3063 3.0547 12.3597 3.12716 12.4321C3.23013 12.5351 3.44369 12.5313 3.69158 12.4131C3.80599 12.3597 3.91277 12.3177 3.93184 12.3177C3.9509 12.3177 3.96616 13.3741 3.96616 14.8538V17.3898H2.89835H1.83053V14.7966V12.2033H2.13562H2.44071V11.8982V11.5931H1.52545H0.610178V8.23715V4.88117H3.96616H7.32214V4.57608V4.27099H6.34204H5.36194L4.74795 3.66081L4.13396 3.05064H2.75343C1.42248 3.05064 1.36909 3.05445 1.29663 3.12691C1.22798 3.19555 1.22036 3.25276 1.22036 3.73709V4.27099H0.68645C0.202121 4.27099 0.144917 4.27862 0.0762723 4.34726C0 4.42354 0 4.47311 0 8.23715C0 12.0012 0 12.0508 0.0762723 12.127C0.144917 12.1957 0.202121 12.2033 0.68645 12.2033H1.22036V14.7966V17.3898H0.610178H0V17.6949V18H9.15267H18.3053V17.6949V17.3898H17.6952H17.085V10.0677V2.74555H17.4663C18.0422 2.74555 18.0003 2.85233 18.0003 1.37265C18.0003 -0.0841541 18.0269 -0.00406837 17.5541 0.00355911C17.3901 0.00737381 14.9989 0.213308 12.2417 0.461193ZM17.3901 1.39171V2.13537H12.5087H7.62723V1.83028C7.62723 1.66248 7.63104 1.52519 7.63867 1.52519C7.64248 1.52138 9.81624 1.32688 12.4705 1.09044C15.1248 0.850182 17.3176 0.655687 17.3443 0.651873C17.3786 0.64806 17.3901 0.819672 17.3901 1.39171ZM4.09963 3.9659L4.40472 4.27099H3.11572H1.83053V3.9659V3.66081H2.81445H3.79455L4.09963 3.9659ZM10.5256 9.89989C11.7536 10.4376 12.7718 10.8876 12.787 10.9029C12.8023 10.9181 12.8099 11.105 12.8061 11.3185L12.7947 11.7037L10.5828 10.7351C9.17555 10.1173 8.32512 9.7626 8.24503 9.7626C8.16113 9.7626 7.39841 10.0753 6.01407 10.6817C4.85473 11.1889 3.85175 11.6275 3.7831 11.658L3.65726 11.7114L3.6687 11.3033L3.68014 10.8952L5.93017 9.91133C7.16959 9.36979 8.2069 8.9236 8.2374 8.9236C8.26791 8.9236 9.29759 9.36217 10.5256 9.89989ZM7.32214 15.5593V17.3898H6.71196H6.10178V15.5593V13.7288H6.71196H7.32214V15.5593ZM13.0959 14.7622C13.2599 14.8919 13.3476 15.1093 13.401 15.5326C13.4621 15.9902 13.4964 16.0703 13.7824 16.3907C13.9693 16.6004 13.996 16.65 13.996 16.7873C13.996 16.9894 13.8892 17.161 13.6832 17.2754C13.5269 17.3669 13.4926 17.3708 12.8137 17.3708C12.112 17.3708 12.1082 17.3708 11.929 17.264C11.7192 17.1419 11.6315 17.0008 11.6315 16.7835C11.6315 16.65 11.662 16.5966 11.8451 16.3907C12.1158 16.0894 12.1883 15.9254 12.2226 15.5402C12.257 15.155 12.379 14.8652 12.5544 14.7584C12.7222 14.6555 12.9625 14.6593 13.0959 14.7622Z" fill="black"/>
 <path d="M9.5333 3.7381C9.46084 3.81056 9.45703 3.86395 9.45703 4.88218C9.45703 5.90042 9.46084 5.95381 9.5333 6.02627C9.60576 6.09873 9.65915 6.10254 10.6774 6.10254C11.6956 6.10254 11.749 6.09873 11.8215 6.02627C11.8939 5.95381 11.8977 5.90042 11.8977 4.88218C11.8977 3.86395 11.8939 3.81056 11.8215 3.7381C11.749 3.66564 11.6956 3.66183 10.6774 3.66183C9.65915 3.66183 9.60576 3.66564 9.5333 3.7381ZM11.2876 4.88218V5.49236H10.6774H10.0672V4.88218V4.272H10.6774H11.2876V4.88218Z" fill="black"/>
 <path d="M13.1935 3.7381C13.121 3.81056 13.1172 3.86395 13.1172 4.88218C13.1172 5.90042 13.121 5.95381 13.1935 6.02627C13.2659 6.09873 13.3193 6.10254 14.3375 6.10254C15.3558 6.10254 15.4092 6.09873 15.4816 6.02627C15.5541 5.95381 15.5579 5.90042 15.5579 4.88218C15.5579 3.86395 15.5541 3.81056 15.4816 3.7381C15.4092 3.66564 15.3558 3.66183 14.3375 3.66183C13.3193 3.66183 13.2659 3.66564 13.1935 3.7381ZM14.9477 4.88218V5.49236H14.3375H13.7274V4.88218V4.272H14.3375H14.9477V4.88218Z" fill="black"/>
 <path d="M1.29893 5.56807C1.22266 5.64434 1.22266 5.69392 1.22266 8.2376C1.22266 10.7813 1.22266 10.8309 1.29893 10.9071C1.36757 10.9758 1.42478 10.9834 1.90911 10.9834H2.44301V10.6783V10.3732H2.13792H1.83283V8.2376V6.10197H2.90065H3.96846V7.62742V9.15286H4.27355H4.57864V7.62742V6.10197H5.95154H7.32444V5.79688V5.4918H4.34982C1.42478 5.4918 1.3752 5.4918 1.29893 5.56807Z" fill="black"/>
 <path d="M9.5333 7.09299C9.46466 7.16164 9.45703 7.21884 9.45703 7.70317V8.23708H9.76212H10.0672V7.93199V7.6269H10.6774H11.2876V8.38962V9.15234H11.5927H11.8977V8.1608C11.8977 7.21884 11.8939 7.16545 11.8215 7.09299C11.749 7.02053 11.6956 7.01672 10.6774 7.01672C9.65915 7.01672 9.60576 7.02053 9.5333 7.09299Z" fill="black"/>
 <path d="M13.1935 7.09357C13.121 7.16603 13.1172 7.21942 13.1172 8.23765C13.1172 9.25589 13.121 9.30928 13.1935 9.38174C13.2659 9.45419 13.3193 9.45801 14.3375 9.45801C15.3558 9.45801 15.4092 9.45419 15.4816 9.38174C15.5541 9.30928 15.5579 9.25589 15.5579 8.23765C15.5579 7.21942 15.5541 7.16603 15.4816 7.09357C15.4092 7.02111 15.3558 7.0173 14.3375 7.0173C13.3193 7.0173 13.2659 7.02111 13.1935 7.09357ZM14.9477 8.23765V8.84783H14.3375H13.7274V8.23765V7.62747H14.3375H14.9477V8.23765Z" fill="black"/>
 <path d="M14.0352 10.6779V10.9829H14.4928H14.9504V11.5931V12.2033H14.4928H14.0352V12.5084V12.8135H14.7216C15.3585 12.8135 15.4119 12.8097 15.4843 12.7372C15.5568 12.6647 15.5606 12.6114 15.5606 11.5931C15.5606 10.5749 15.5568 10.5215 15.4843 10.449C15.4119 10.3766 15.3585 10.3728 14.7216 10.3728H14.0352V10.6779Z" fill="black"/>
 <path d="M6.40625 12.2037V12.5088H6.71134H7.01643V12.2037V11.8986H6.71134H6.40625V12.2037Z" fill="black"/>
 <path d="M2.44141 13.4234V13.7285H2.7465H3.05158V13.4234V13.1183H2.7465H2.44141V13.4234Z" fill="black"/>
 <path d="M8.61924 13.8049C8.54678 13.8774 8.54297 13.9308 8.54297 14.7964C8.54297 15.6621 8.54678 15.7155 8.61924 15.788C8.6917 15.8604 8.74509 15.8643 9.76332 15.8643C10.7816 15.8643 10.8349 15.8604 10.9074 15.788C10.9799 15.7155 10.9837 15.6621 10.9837 14.7964C10.9837 13.9308 10.9799 13.8774 10.9074 13.8049C10.8349 13.7324 10.7816 13.7286 9.76332 13.7286C8.74509 13.7286 8.6917 13.7324 8.61924 13.8049ZM10.3735 14.7964V15.2541H9.76332H9.15315V14.7964V14.3388H9.76332H10.3735V14.7964Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/my_property.svg
+++ b/ipa-agent/assets/images/my_property.svg
@@ -0,0 +1,28 @@
 <svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1604_2209)">
 <path d="M21.9439 23.6955H12.299C12.1661 23.6955 12.0586 23.5878 12.0586 23.4547V1.58351C12.0586 1.45045 12.1661 1.34277 12.299 1.34277H21.9439C22.0768 1.34277 22.1843 1.45045 22.1843 1.58351V23.4547C22.1843 23.5878 22.0768 23.6955 21.9439 23.6955ZM12.5394 23.214H21.7036V1.82425H12.5394V23.214Z" fill="black"/>
 <path d="M12.2955 23.695H2.65054C2.51767 23.695 2.41016 23.5873 2.41016 23.4543V6.33254C2.41016 6.19947 2.51767 6.0918 2.65054 6.0918H12.2955C12.4284 6.0918 12.5359 6.19947 12.5359 6.33254V23.4543C12.5359 23.5873 12.4284 23.695 12.2955 23.695ZM2.89093 23.2135H12.0551V6.57328H2.89093V23.2135Z" fill="black"/>
 <path d="M23.3558 23.6944H1.24038C1.10752 23.6944 1 23.5867 1 23.4536C1 23.3206 1.10752 23.2129 1.24038 23.2129H23.3558C23.4886 23.2129 23.5962 23.3206 23.5962 23.4536C23.5962 23.5867 23.4886 23.6944 23.3558 23.6944Z" fill="black"/>
 <path d="M15.9186 4.71289H14.957V5.19437H15.9186V4.71289Z" fill="black"/>
 <path d="M19.2819 4.71289H18.3203V5.19437H19.2819V4.71289Z" fill="black"/>
 <path d="M15.9186 8.08496H14.957V8.56644H15.9186V8.08496Z" fill="black"/>
 <path d="M19.2819 8.08496H18.3203V8.56644H19.2819V8.08496Z" fill="black"/>
 <path d="M15.9186 11.4541H14.957V11.9356H15.9186V11.4541Z" fill="black"/>
 <path d="M19.2819 11.4541H18.3203V11.9356H19.2819V11.4541Z" fill="black"/>
 <path d="M15.9186 14.8242H14.957V15.3057H15.9186V14.8242Z" fill="black"/>
 <path d="M6.27404 9.04688H5.3125V9.52836H6.27404V9.04688Z" fill="black"/>
 <path d="M6.27404 12.417H5.3125V12.8985H6.27404V12.417Z" fill="black"/>
 <path d="M6.27404 15.7891H5.3125V16.2705H6.27404V15.7891Z" fill="black"/>
 <path d="M9.63732 9.04688H8.67578V9.52836H9.63732V9.04688Z" fill="black"/>
 <path d="M9.64123 12.417H8.67969V12.8985H9.64123V12.417Z" fill="black"/>
 <path d="M9.64123 15.7891H8.67969V16.2705H9.64123V15.7891Z" fill="black"/>
 <path d="M19.2819 14.8242H18.3203V15.3057H19.2819V14.8242Z" fill="black"/>
 <path d="M19.0436 23.6952H15.1974C15.0645 23.6952 14.957 23.5875 14.957 23.4544V18.3072C14.957 17.9089 15.2805 17.585 15.6782 17.585H18.5628C18.9605 17.585 19.284 17.9089 19.284 18.3072V23.4544C19.284 23.5875 19.1764 23.6952 19.0436 23.6952ZM15.4378 23.2137H18.8032V18.3072C18.8032 18.1746 18.6952 18.0664 18.5628 18.0664H15.6782C15.5458 18.0664 15.4378 18.1746 15.4378 18.3072V23.2137Z" fill="black"/>
 <path d="M9.39904 23.6951H5.55288C5.42002 23.6951 5.3125 23.5874 5.3125 23.4544V19.2701C5.3125 18.8718 5.63599 18.5479 6.03365 18.5479H8.91827C9.31594 18.5479 9.63942 18.8718 9.63942 19.2701V23.4544C9.63942 23.5874 9.53191 23.6951 9.39904 23.6951ZM5.79327 23.2136H9.15865V19.2701C9.15865 19.1375 9.05067 19.0293 8.91827 19.0293H6.03365C5.90125 19.0293 5.79327 19.1375 5.79327 19.2701V23.2136Z" fill="black"/>
 </g>
 <defs>
 <clipPath id="clip0_1604_2209">
 <rect width="25" height="26" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/images/phone_icon.svg
+++ b/ipa-agent/assets/images/phone_icon.svg
@@ -0,0 +1,3 @@
 <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.73351 2.58247L7.83726 2.85247C7.03923 3.09313 6.32656 3.55675 5.78312 4.18877C5.23969 4.82078 4.8881 5.59489 4.76976 6.41997C4.39851 9.00497 5.22851 12.0275 7.22976 15.4937C9.22601 18.9512 11.4235 21.1787 13.8423 22.1537C14.6194 22.4669 15.4702 22.5504 16.2934 22.3942C17.1166 22.238 17.8776 21.8486 18.486 21.2725L19.1635 20.63C19.6034 20.2136 19.8772 19.6517 19.934 19.0486C19.9908 18.4456 19.8267 17.8424 19.4723 17.3512L17.7773 15.0012C17.5481 14.684 17.2254 14.4464 16.8544 14.3217C16.4834 14.1971 16.0827 14.1917 15.7085 14.3062L13.1448 15.09L13.0785 15.1025C12.796 15.1437 12.1435 14.5325 11.331 13.125C10.481 11.6525 10.306 10.7912 10.5398 10.5687L11.8435 9.35247C12.3203 8.90805 12.646 8.32552 12.7749 7.68662C12.9038 7.04771 12.8294 6.38448 12.5623 5.78997L11.7348 3.95122C11.4859 3.3979 11.0444 2.95394 10.4924 2.70211C9.94046 2.45028 9.3145 2.40776 8.73351 2.58247ZM10.5973 4.46372L11.4223 6.30247C11.5829 6.65901 11.6279 7.05693 11.5507 7.44032C11.4736 7.82371 11.2783 8.1733 10.9923 8.43997L9.68476 9.65747C8.84726 10.45 9.12476 11.8025 10.2498 13.75C11.3073 15.5825 12.2723 16.4875 13.3098 16.33L13.4648 16.2975L16.0748 15.5012C16.1995 15.4629 16.3331 15.4646 16.4569 15.5061C16.5806 15.5475 16.6883 15.6267 16.7648 15.7325L18.4598 18.0825C18.6372 18.328 18.7195 18.6297 18.6912 18.9314C18.6629 19.233 18.526 19.5142 18.306 19.7225L17.6273 20.365C17.1927 20.7763 16.6492 21.0541 16.0613 21.1656C15.4735 21.277 14.866 21.2174 14.311 20.9937C12.1885 20.1387 10.1823 18.105 8.31351 14.8687C6.43976 11.625 5.68101 8.86622 6.00726 6.59747C6.09171 6.00801 6.34282 5.45495 6.73103 5.0034C7.11924 4.55186 7.62838 4.22063 8.19851 4.04872L9.09476 3.77872C9.38533 3.69141 9.69774 3.71276 9.97373 3.83879C10.2497 3.96483 10.4705 4.18695 10.5948 4.46372" fill="white"/>
 </svg>
--- a/ipa-agent/assets/images/profile.svg
+++ b/ipa-agent/assets/images/profile.svg
--- a/ipa-agent/assets/images/profile_icon.png
+++ b/ipa-agent/assets/images/profile_icon.png
--- a/ipa-agent/assets/images/recently_view.svg
+++ b/ipa-agent/assets/images/recently_view.svg
@@ -0,0 +1,9 @@
 <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.3104 0.149269C17.2034 0.271549 17.1881 0.370903 17.2263 0.684248C17.2569 0.898241 17.2951 1.11987 17.3181 1.17337C17.341 1.24216 17.1194 1.16573 16.7601 0.982309C15.8889 0.554325 15.1323 0.378546 14.1005 0.378546C12.4727 0.378546 11.0664 0.944096 10.0118 2.01406L9.66785 2.36561H5.64786C1.24574 2.36561 1.23045 2.36561 0.672546 2.82417C0.519695 2.95409 0.305703 3.22922 0.198707 3.45086L0 3.84827V12.1787C0 20.1422 0.00764257 20.532 0.145209 20.8224C0.320988 21.1969 0.695474 21.5867 1.10053 21.8007L1.41387 21.9688L7.8642 21.9917C14.9412 22.0147 14.8037 22.0223 15.3616 21.5561C15.5144 21.4338 15.736 21.151 15.8583 20.9294L16.0876 20.5167L16.1105 16.1987L16.1335 11.873L16.6837 11.5978C18.2505 10.8259 19.435 9.35092 19.8401 7.6772C20.0235 6.93587 20.0159 5.55256 19.8325 4.84945C19.542 3.72599 19.3051 3.41265 18.8924 3.60371C18.6097 3.74128 18.602 3.93998 18.8466 4.59724C19.0147 5.04815 19.0606 5.32329 19.0835 6.03405C19.1293 7.08872 19.0147 7.6772 18.5944 8.54081C18.2275 9.28214 17.2493 10.3062 16.5079 10.7189C13.6343 12.3086 10.0423 10.7189 9.20165 7.48614C9.01059 6.76773 9.03351 5.6137 9.24751 4.92587C9.53792 4.00112 9.91241 3.37443 10.585 2.70953C11.8307 1.45615 13.5197 0.959381 15.2011 1.33387C15.736 1.45615 16.8213 1.96056 16.8671 2.10577C16.8824 2.15162 16.6684 2.22805 16.3551 2.28155C15.9271 2.35797 15.7895 2.41911 15.6902 2.56432C15.5908 2.71717 15.5832 2.7936 15.652 2.94645C15.7055 3.0458 15.7972 3.1528 15.8736 3.18337C16.0494 3.25215 18.174 2.82417 18.3116 2.69424C18.3727 2.6331 18.4186 2.50318 18.4186 2.41147C18.4186 2.03698 18.0135 0.256266 17.8989 0.126341C17.746 -0.0494385 17.4786 -0.0417957 17.3104 0.149269ZM8.7431 3.77185C8.07055 5.23158 8.01705 6.88237 8.59025 8.40324C8.89595 9.22864 9.29336 9.8324 9.97355 10.5049C11.1734 11.7048 12.8319 12.3162 14.5438 12.194L15.2087 12.1405V16.2751V20.4021L14.9336 20.7078C14.7731 20.8836 14.5438 21.0441 14.3833 21.0899C14.1999 21.1358 11.8842 21.1663 7.98648 21.1663H1.86479L1.52851 20.9982C1.33745 20.8988 1.10817 20.7078 1.01646 20.5626L0.840682 20.3027V12.2092C0.840682 3.48143 0.817755 3.9247 1.2381 3.53493C1.32981 3.44322 1.49794 3.33622 1.60494 3.29037C1.71958 3.24451 3.19459 3.21394 5.4033 3.21394L9.01059 3.2063L8.7431 3.77185Z" fill="black"/>
 <path d="M2.82861 8.36478C2.69104 8.53291 2.71397 8.86919 2.87447 8.99147C2.97382 9.06789 3.41709 9.09082 4.71632 9.09082C6.32126 9.09082 6.42826 9.08318 6.57347 8.93797C6.75689 8.75455 6.76453 8.64755 6.60404 8.41827C6.4894 8.25014 6.45883 8.25014 4.70868 8.25014C3.21074 8.25014 2.90504 8.26542 2.82861 8.36478Z" fill="black"/>
 <path d="M2.87447 11.4081C2.71397 11.5304 2.69104 11.8666 2.82861 12.0348C2.91268 12.1341 3.30245 12.1494 5.49587 12.1494C7.39887 12.1494 8.09434 12.1265 8.16312 12.0577C8.30069 11.9201 8.27012 11.5762 8.11727 11.4387C7.98734 11.324 7.69693 11.3087 5.49587 11.3087C3.54701 11.3087 2.98146 11.3317 2.87447 11.4081Z" fill="black"/>
 <path d="M2.82999 14.6314C2.70771 14.7766 2.70771 15.0976 2.82999 15.2428C2.91406 15.3421 3.57896 15.3574 8.03458 15.3574H13.1475L13.2774 15.1587C13.392 14.9753 13.392 14.9371 13.2927 14.7537L13.178 14.555L8.04987 14.532C3.55604 14.5167 2.91406 14.532 2.82999 14.6314Z" fill="black"/>
 <path d="M2.79003 17.834C2.65246 18.0403 2.73653 18.3613 2.94288 18.4454C3.01166 18.4683 5.31972 18.4912 8.07104 18.4912C12.9699 18.4912 13.0693 18.4912 13.2221 18.3384C13.4056 18.1549 13.4208 17.9333 13.2527 17.7728C13.1457 17.6658 12.5649 17.6505 8.02519 17.6505H2.90467L2.79003 17.834Z" fill="black"/>
 <path d="M13.3734 3.59543C12.7315 3.70243 11.9366 4.11513 11.3787 4.63482C10.8361 5.15451 10.3164 5.94934 10.3164 6.28561C10.3164 6.62953 10.7673 7.40143 11.2717 7.91348C12.7162 9.38085 15.2306 9.47257 16.8049 8.11983C17.2329 7.75299 17.7526 7.04987 17.9208 6.61425L18.0507 6.27033L17.8138 5.75828C17.5157 5.12394 16.6597 4.24505 16.0483 3.94699C15.2611 3.56486 14.3211 3.44258 13.3734 3.59543ZM15.0472 4.51254C15.7579 4.67303 16.4381 5.17744 16.889 5.88056L17.1259 6.25504L16.9578 6.57603C16.7285 7.02694 16.0636 7.66128 15.5745 7.89055C14.0842 8.59367 12.3723 8.13512 11.4781 6.79767L11.1647 6.33147L11.3558 6.01048C12.1583 4.71125 13.511 4.16862 15.0472 4.51254Z" fill="black"/>
 <path d="M13.8658 5.72836C13.6442 5.81243 13.4531 6.10285 13.4531 6.32448C13.4531 6.5614 13.8505 6.95117 14.0951 6.95117C14.2021 6.95117 14.3779 6.8671 14.4925 6.76775C15.0199 6.31684 14.5002 5.46087 13.8658 5.72836Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/red_del.png
+++ b/ipa-agent/assets/images/red_del.png
--- a/ipa-agent/assets/images/whatsapp.svg
+++ b/ipa-agent/assets/images/whatsapp.svg
@@ -0,0 +1,3 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M28.5742 7.36509C27.199 5.97598 25.561 4.87459 23.7557 4.12517C21.9504 3.37574 20.0139 2.99328 18.0592 3.00009C9.86922 3.00009 3.19422 9.67509 3.19422 17.8651C3.19422 20.4901 3.88422 23.0401 5.17422 25.2901L3.07422 33.0001L10.9492 30.9301C13.1242 32.1151 15.5692 32.7451 18.0592 32.7451C26.2492 32.7451 32.9242 26.0701 32.9242 17.8801C32.9242 13.9051 31.3792 10.1701 28.5742 7.36509ZM18.0592 30.2251C15.8392 30.2251 13.6642 29.6251 11.7592 28.5001L11.3092 28.2301L6.62922 29.4601L7.87422 24.9001L7.57422 24.4351C6.34084 22.4655 5.68593 20.189 5.68422 17.8651C5.68422 11.0551 11.2342 5.50509 18.0442 5.50509C21.3442 5.50509 24.4492 6.79509 26.7742 9.13509C27.9254 10.281 28.8378 11.6441 29.4583 13.1452C30.0788 14.6464 30.3953 16.2558 30.3892 17.8801C30.4192 24.6901 24.8692 30.2251 18.0592 30.2251ZM24.8392 20.9851C24.4642 20.8051 22.6342 19.9051 22.3042 19.7701C21.9592 19.6501 21.7192 19.5901 21.4642 19.9501C21.2092 20.3251 20.5042 21.1651 20.2942 21.4051C20.0842 21.6601 19.8592 21.6901 19.4842 21.4951C19.1092 21.3151 17.9092 20.9101 16.4992 19.6501C15.3892 18.6601 14.6542 17.4451 14.4292 17.0701C14.2192 16.6951 14.3992 16.5001 14.5942 16.3051C14.7592 16.1401 14.9692 15.8701 15.1492 15.6601C15.3292 15.4501 15.4042 15.2851 15.5242 15.0451C15.6442 14.7901 15.5842 14.5801 15.4942 14.4001C15.4042 14.2201 14.6542 12.3901 14.3542 11.6401C14.0542 10.9201 13.7392 11.0101 13.5142 10.9951H12.7942C12.5392 10.9951 12.1492 11.0851 11.8042 11.4601C11.4742 11.8351 10.5142 12.7351 10.5142 14.5651C10.5142 16.3951 11.8492 18.1651 12.0292 18.4051C12.2092 18.6601 14.6542 22.4101 18.3742 24.0151C19.2592 24.4051 19.9492 24.6301 20.4892 24.7951C21.3742 25.0801 22.1842 25.0351 22.8292 24.9451C23.5492 24.8401 25.0342 24.0451 25.3342 23.1751C25.6492 22.3051 25.6492 21.5701 25.5442 21.4051C25.4392 21.2401 25.2142 21.1651 24.8392 20.9851Z" fill="white"/>
 </svg>
--- a/ipa-agent/assets/images/wishlisted.svg
+++ b/ipa-agent/assets/images/wishlisted.svg
@@ -0,0 +1,9 @@
 <svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.198199 0.0540199C0.141026 0.0826073 0.0743246 0.158836 0.0457382 0.230303C0.00762304 0.316063 -0.00667016 3.27475 0.00285864 10.4547L0.0171518 20.5552L0.131497 20.8411C0.288723 21.2365 0.765163 21.713 1.16061 21.8702L1.44647 21.9846L8.49778 21.9988C13.286 22.0036 15.6253 21.9941 15.7921 21.9607C16.6449 21.7845 17.3215 21.0888 17.4834 20.2265C17.5073 20.074 17.5263 19.5738 17.5168 19.1021C17.5025 18.3493 17.493 18.2445 17.412 18.154C17.3262 18.0587 17.2786 18.0539 16.3066 18.0539H15.2871L15.2775 9.11591L15.2632 0.177895L15.1489 0.0873718C15.0393 -0.00315285 14.8583 -0.00315285 7.66878 0.00161171C2.61375 0.00161171 0.269665 0.0206699 0.198199 0.0540199ZM14.5247 9.40654V18.0539H8.97422H3.42846L3.33317 18.154C3.25218 18.2445 3.23789 18.3398 3.22359 19.2117C3.2093 20.1455 3.20454 20.1788 3.08066 20.4171C2.77574 20.9936 2.12778 21.3128 1.57035 21.1508C1.3083 21.0746 1.06532 20.8792 0.927152 20.6315L0.803278 20.398V10.5786V0.759151H7.66401H14.5247V9.40654ZM16.7164 19.4928C16.7164 20.1121 16.7068 20.1979 16.602 20.4123C16.4639 20.7077 16.1923 20.9697 15.8826 21.1127L15.6444 21.2223L9.58407 21.2365C6.24899 21.2413 3.51899 21.2365 3.51899 21.227C3.51899 21.2127 3.58092 21.1127 3.65239 20.9983C3.92396 20.5886 3.96207 20.4266 3.9859 19.5881L4.00495 18.8162H10.3607H16.7164V19.4928Z" fill="black"/>
 <path d="M2.6156 11.3176C2.4822 11.4891 2.48697 11.694 2.63466 11.8369C2.74424 11.9513 2.76806 11.9561 3.46367 11.9561C4.23074 11.9561 4.37843 11.9227 4.46419 11.7321C4.54042 11.5654 4.53089 11.4606 4.41655 11.3176L4.32126 11.1938H3.51608H2.71089L2.6156 11.3176Z" fill="black"/>
 <path d="M5.80481 11.2986C5.67141 11.4463 5.68094 11.694 5.82863 11.8369L5.94298 11.9561H9.23518H12.5274L12.6417 11.8369C12.7894 11.694 12.7942 11.4891 12.6608 11.3176L12.5655 11.1938H9.23518H5.90486L5.80481 11.2986Z" fill="black"/>
 <path d="M2.73254 13.4898C2.48479 13.6232 2.44191 13.9138 2.64202 14.1044C2.76113 14.214 2.78495 14.2188 3.5282 14.2188H4.2905L4.40485 14.0853C4.58113 13.8805 4.52872 13.5898 4.29527 13.485C4.1428 13.4183 2.86118 13.4183 2.73254 13.4898Z" fill="black"/>
 <path d="M5.92665 13.4898C5.68843 13.628 5.64555 13.8757 5.82659 14.0853L5.94094 14.2188H9.2379H12.5349L12.6492 14.0853C12.8255 13.8805 12.7731 13.5898 12.5396 13.485C12.3729 13.4088 6.06005 13.4136 5.92665 13.4898Z" fill="black"/>
 <path d="M2.63474 15.8392C2.5585 15.9107 2.51562 16.0107 2.51562 16.1013C2.51562 16.1918 2.5585 16.2918 2.63474 16.3633C2.74908 16.4777 2.76337 16.4824 3.51615 16.4824C4.26892 16.4824 4.28322 16.4777 4.39756 16.3633C4.47379 16.2918 4.51667 16.1918 4.51667 16.1013C4.51667 16.0107 4.47379 15.9107 4.39756 15.8392C4.28322 15.7249 4.26892 15.7201 3.51615 15.7201C2.76337 15.7201 2.74908 15.7249 2.63474 15.8392Z" fill="black"/>
 <path d="M5.83005 15.8392C5.75382 15.9107 5.71094 16.0107 5.71094 16.1013C5.71094 16.1918 5.75382 16.2918 5.83005 16.3633L5.94439 16.4824H9.23659H12.5288L12.6431 16.3633C12.8004 16.2109 12.8004 15.9917 12.6431 15.8392L12.5288 15.7201H9.23659H5.94439L5.83005 15.8392Z" fill="black"/>
 </svg>
--- a/ipa-agent/assets/images/youtube.svg
+++ b/ipa-agent/assets/images/youtube.svg
@@ -0,0 +1,10 @@
 <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1502_12496)">
 <path d="M19.5 6.5C20.8894 6.5 22.3145 6.53575 23.6957 6.59425L25.3273 6.67225L26.8889 6.76488L28.3514 6.864L29.6871 6.968C31.1367 7.07895 32.5007 7.69754 33.5392 8.71494C34.5777 9.73234 35.2242 11.0834 35.3649 12.5304L35.4299 13.221L35.5518 14.6997C35.6655 16.2321 35.75 17.9026 35.75 19.5C35.75 21.0974 35.6655 22.7679 35.5518 24.3003L35.4299 25.779C35.4087 26.0163 35.3876 26.2454 35.3649 26.4696C35.2241 27.9169 34.5774 29.2681 33.5386 30.2856C32.4998 31.303 31.1354 31.9214 29.6855 32.032L28.353 32.1344L26.8905 32.2351L25.3273 32.3277L23.6957 32.4057C22.298 32.4665 20.8991 32.4979 19.5 32.5C18.1009 32.4979 16.702 32.4665 15.3043 32.4057L13.6727 32.3277L12.1111 32.2351L10.6486 32.1344L9.31287 32.032C7.86329 31.921 6.49927 31.3025 5.46077 30.2851C4.42226 29.2677 3.77581 27.9166 3.63512 26.4696L3.57013 25.779L3.44825 24.3003C3.324 22.7031 3.25787 21.102 3.25 19.5C3.25 17.9026 3.3345 16.2321 3.44825 14.6997L3.57013 13.221C3.59125 12.9837 3.61237 12.7546 3.63512 12.5304C3.77575 11.0836 4.42198 9.7328 5.46015 8.71543C6.49832 7.69807 7.86196 7.07932 9.31125 6.968L10.6454 6.864L12.1079 6.76488L13.6711 6.67225L15.3026 6.59425C16.7009 6.53353 18.1004 6.5021 19.5 6.5ZM19.5 9.75C18.1594 9.75 16.7797 9.78575 15.4375 9.841L13.8483 9.91738L12.3224 10.0068L10.8891 10.1042L9.57613 10.2066C8.88604 10.2556 8.23557 10.5473 7.74003 11.0301C7.24448 11.5128 6.93586 12.1554 6.86888 12.844C6.67875 14.8086 6.5 17.2542 6.5 19.5C6.5 21.7458 6.67875 24.1914 6.86888 26.156C7.007 27.573 8.1315 28.6747 9.57613 28.7934L10.8891 28.8941L12.3224 28.9916L13.8483 29.0826L15.4375 29.159C16.7797 29.2143 18.1594 29.25 19.5 29.25C20.8406 29.25 22.2202 29.2143 23.5625 29.159L25.1517 29.0826L26.6776 28.9932L28.1109 28.8958L29.4239 28.7934C30.114 28.7444 30.7644 28.4527 31.26 27.9699C31.7555 27.4872 32.0641 26.8446 32.1311 26.156C32.3213 24.1914 32.5 21.7458 32.5 19.5C32.5 17.2542 32.3213 14.8086 32.1311 12.844C32.0641 12.1554 31.7555 11.5128 31.26 11.0301C30.7644 10.5473 30.114 10.2556 29.4239 10.2066L28.1109 10.1059L26.6776 10.0084L25.1517 9.91738L23.5625 9.841C22.2091 9.78277 20.8546 9.75243 19.5 9.75ZM16.25 15.5594C16.2499 15.4006 16.2886 15.2441 16.3627 15.1037C16.4369 14.9632 16.5442 14.843 16.6754 14.7534C16.8065 14.6639 16.9576 14.6078 17.1154 14.5899C17.2732 14.5721 17.433 14.593 17.5809 14.651L17.7125 14.716L24.5375 18.655C24.6734 18.7334 24.7884 18.8435 24.8727 18.9758C24.9569 19.1082 25.008 19.2589 25.0216 19.4153C25.0351 19.5716 25.0108 19.7289 24.9505 19.8738C24.8903 20.0186 24.796 20.1469 24.6756 20.2475L24.5375 20.345L17.7125 24.2856C17.575 24.3653 17.42 24.4101 17.2612 24.4162C17.1024 24.4223 16.9445 24.3894 16.8013 24.3205C16.6581 24.2516 16.5339 24.1488 16.4395 24.0209C16.3451 23.893 16.2834 23.744 16.2597 23.5869L16.25 23.4406V15.5594Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_1502_12496">
 <rect width="39" height="39" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/ipa-agent/assets/js/custom.js
+++ b/ipa-agent/assets/js/custom.js
@@ -0,0 +1,308 @@
 // left side open nav  start
 const header = document.querySelector('.header');
 const sidebar = document.querySelector('.header .inn_nav');
 const overlay = document.querySelector('.header .overlay');
 const hamburgerIcon = document.querySelector('.header .ham_burger');
 const closeBtn = document.querySelector('.header .nav_cross_btn');
 function openSidebar() {
    header.classList.add('active');
 }
 function closeSidebar() {
    header.classList.remove('active');
 }
 hamburgerIcon.addEventListener('click', () => {
    openSidebar();
 });
 overlay.addEventListener('click', () => {
    closeSidebar();
 });
 closeBtn.addEventListener('click', () => {
    closeSidebar();
 });
 // left side open nav end
 /*jslint browser: true*/
 /*global $, jQuery, alert*/
 (function($) {
    'use strict';
    $(function() {
        $(document).ready(function() {
            function triggerClick(elem) {
                $(elem).click();
            }
            var $progressWizard = $('.stepper'),
                $tab_active,
                $tab_prev,
                $tab_next,
                $btn_prev = $progressWizard.find('.prev-step'),
                $btn_next = $progressWizard.find('.next-step'),
                $tab_toggle = $progressWizard.find('[data-toggle="tab"]'),
                $tooltips = $progressWizard.find('[data-toggle="tab"][title]');
            // To do:
            // Disable User select drop-down after first step.
            // Add support for payment type switching.
            //Initialize tooltips
            $tooltips.tooltip();
            //Wizard
            $tab_toggle.on('show.bs.tab', function(e) {
                var $target = $(e.target);
                if (!$target.parent().hasClass('active, disabled')) {
                    $target.parent().prev().addClass('completed');
                }
                if ($target.parent().hasClass('disabled')) {
                    return false;
                }
            });
            // $tab_toggle.on('click', function(event) {
            //     event.preventDefault();
            //     event.stopPropagation();
            //     return false;
            // });
            $btn_next.on('click', function() {
                $tab_active = $progressWizard.find('.active');
                $tab_active.next().removeClass('disabled');
                $tab_next = $tab_active.next().find('a[data-toggle="tab"]');
                triggerClick($tab_next);
            });
            $btn_prev.click(function() {
                $tab_active = $progressWizard.find('.active');
                $tab_prev = $tab_active.prev().find('a[data-toggle="tab"]');
                triggerClick($tab_prev);
            });
        });
    });
 }(jQuery, this));   
 // otp start 
 let digitValidate = function (ele) {
    ele.value = ele.value.replace(/[^0-9]/g, "");
 };
 let tabChange = function (val) {
    let ele = document.querySelectorAll("#otp_main input");
    if (ele[val - 1].value != "") {
        ele[val].focus();
    } else if (ele[val - 1].value == "") {
        ele[val - 2].focus();
    }
 };
 // otp end 
 // checkbox for 'all' start
 function checkAll(source) {
    const checkboxes = document.querySelectorAll('.status-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = source.checked;
    });
 }
 function checkAll2(source) {
    const checkboxes = document.querySelectorAll('.status-checkbox2');
    checkboxes.forEach(checkbox => {
        checkbox.checked = source.checked;
    });
 }
 // checkbox for 'all' end
 // drag&drop upload start 
 document.addEventListener('DOMContentLoaded', function () {
    const uploadContainer = document.getElementById('upload-container');
    const fileInput = document.getElementById('file-input');
    const preview = document.getElementById('preview');
    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadContainer.addEventListener(eventName, preventDefaults, false);
    });
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    // Highlight drag area
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadContainer.addEventListener(eventName, () => uploadContainer.classList.add('highlight'), false);
    });
    ['dragleave', 'drop'].forEach(eventName => {
        uploadContainer.addEventListener(eventName, () => uploadContainer.classList.remove('highlight'), false);
    });
    // Handle dropped files
    uploadContainer.addEventListener('drop', handleDrop, false);
    function handleDrop(e) {
        let dt = e.dataTransfer;
        let files = dt.files;
        handleFiles(files);
    }
    function handleFiles(files) {
        ([...files]).forEach(previewFile);
    }
    function previewFile(file) {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
            let img = document.createElement('img');
            img.src = reader.result;
            let removeButton = document.createElement('button');
            removeButton.textContent = '✖';
            removeButton.addEventListener('click', () => {
                img.parentNode.remove();
            });
            let imageContainer = document.createElement('div');
            imageContainer.classList.add('up_imgs')
            imageContainer.appendChild(img);
            imageContainer.appendChild(removeButton);
            preview.appendChild(imageContainer);
        }
    }
    // Handle file selection via file input
    uploadContainer.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', (e) => {
        let files = e.target.files;
        handleFiles(files);
    });
 });
 // drag&drop upload end 
 // drag&drop video start
 document.addEventListener('DOMContentLoaded', function () {
    const uploadContainer = document.getElementById('upload-container2');
    const fileInput = document.getElementById('file-input2');
    const preview = document.getElementById('preview2');
    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadContainer.addEventListener(eventName, preventDefaults, false);
    });
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    // Highlight drag area
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadContainer.addEventListener(eventName, () => uploadContainer.classList.add('highlight'), false);
    });
    ['dragleave', 'drop'].forEach(eventName => {
        uploadContainer.addEventListener(eventName, () => uploadContainer.classList.remove('highlight'), false);
    });
    // Handle dropped files
    uploadContainer.addEventListener('drop', handleDrop, false);
    function handleDrop(e) {
        let dt = e.dataTransfer;
        let files = dt.files;
        handleFiles(files);
    }
    function handleFiles(files) {
        ([...files]).forEach(previewFile);
    }
    function previewFile(file) {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
            let video = document.createElement('video');
            video.src = reader.result;
            video.controls = true;
            let removeButton = document.createElement('button');
            removeButton.textContent = '✖';
            removeButton.addEventListener('click', () => {
                video.parentNode.remove();
            });
            let videoContainer = document.createElement('div');
            videoContainer.classList.add('up_imgs');
            videoContainer.appendChild(video);
            videoContainer.appendChild(removeButton);
            preview.appendChild(videoContainer);
        }
    }
    // Handle file selection via file input
    uploadContainer.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', (e) => {
        let files = e.target.files;
        handleFiles(files);
    });
 });
 // drag&drop video end
 // ====counter===
 // Get the elements
 const counterElement = document.getElementById('counter');
 const incrementBtn = document.getElementById('incrementBtn');
 const decrementBtn = document.getElementById('decrementBtn');
 // Initialize the counter
 let counter = 0;
 // Update the counter display
 function updateCounter() {
    counterElement.textContent = counter;
 }
 // Increment button event listener
 incrementBtn.addEventListener('click', () => {
    counter++;
    updateCounter();
 });
 // Decrement button event listener
 decrementBtn.addEventListener('click', () => {
    counter--;
    updateCounter();
 });
--- a/ipa-agent/components/footer-link.php
+++ b/ipa-agent/components/footer-link.php
@@ -0,0 +1,118 @@
 <footer class="footer">
    <div class="container">
        <div class="inn_foot">
            <div class="social_logo">
                <a href="" class="f_logo">
                    <img loading="lazy" src="../assets/images/ipa_foot.svg" alt="ipa_foot">
                </a>
                <!-- <ul class="social">
                    <li>
                        <a href="">
                            <img loading="lazy" src="../assets/images/fb.svg" alt="fb">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img loading="lazy" src="../assets/images/whatsapp.svg" alt="whatsapp">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img loading="lazy" src="../assets/images/youtube.svg" alt="youtube">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img loading="lazy" src="../assets/images/linkdin.svg" alt="linkdin">
                        </a>
                    </li>
                </ul> -->
                <p>Copyright © 2024 <br> Indiapropertyads All Rights <br> reserved.</p>
            </div>
            <ul class="f1">
                <li>
                    <h3>Quicks links</h3>
                </li>
                <li>
                    <a href="">Properties</a>
                </li>
                <li>
                    <a href="">About us</a>
                </li>
                <li>
                    <a href="">Blogs </a>
                </li>
                <li>
                    <a href="">FAQ’s</a>
                </li>
                <li>
                    <a href="">Privacy policy </a>
                </li>
                <li>
                    <a href="">Terms & Condition</a>
                </li>
            </ul>
            <ul class="f2">
                <li>
                    <h3>Email</h3>
                </li>
                <li>
                    <a href="indiaproperty@gmail.com">indiaproperty@gmail.com</a>
                </li>
                <li>
                    <h3>Email</h3>
                </li>
                <li>
                    <a href="+9196309280567">+9196309280567</a>
                </li>
                <li>
                    <h3>Address</h3>
                </li>
                <li>
                    Mumbai, Maharashtra,400024
                </li>
            </ul>
            <ul class="f3">
                <li>
                    <h3>Social</h3>
                </li>
                <li>
                    <a href="">
                        Facebook
                    </a>
                </li>
                <li>
                    <a href="">
                    WhatsApp
                    </a>
                </li>
                <li>
                    <a href="">
                    Youtube
                    </a>
                </li>
                <li>
                    <a href="">
                    LinkedIn
                    </a>
                </li>
            </ul>
        </div>
    </div>
 </footer>
 <!-- <div class="copyright">
    <p>Copyright © Indiapropertyads 2023</p>
 </div> -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="../layouts/modern-light-menu/app.js"></script>
 <script src="../assets/js/custom.js"></script>
--- a/ipa-agent/components/footer.php
+++ b/ipa-agent/components/footer.php
@@ -0,0 +1,5 @@
 </body>
 </html>
--- a/ipa-agent/components/header-link.php
+++ b/ipa-agent/components/header-link.php
@@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../assets/images/favicon_icon.png" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="../layouts/modern-light-menu/css/light/plugins.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../assets/css/style.css">
    <title>IPA Customer</title>
 </head>
 <body>
--- a/ipa-agent/components/header-other.php
+++ b/ipa-agent/components/header-other.php
@@ -0,0 +1,36 @@
 <?php include('../components/header-link.php') ?>
 <header class="header">
    <div class="container">
        <div class="ipa_logo">
            <img loading="lazy" src="../assets/images/ipa_logo.svg" alt="ipa_logo">
        </div>
        <nav class="nav_bar">
            <ul>
                <li>
                    <a href="">Properties</a>
                </li>
                <li>
                    <a href="">Blogs</a>
                </li>
                <li>
                    <a href="">Contact</a>
                </li>
                <li>
                    <a href="">About Us</a>
                </li>
            </ul>
            <div class="log_reg">
                <ul>
                    <li>
                        <a href="sign-in.php" class="login">Login</a>
                    </li>
                    <li>
                        <a href="sign-up.php">Register</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
 </header>
--- a/ipa-agent/components/header.php
+++ b/ipa-agent/components/header.php
@@ -0,0 +1,73 @@
 <?php include( '../components/header-link.php' ) ?>
 <header class='header'>
    <div class='container'>
        <div class='ipa_logo'>
            <img loading='lazy' src='../assets/images/ipa_logo.svg' alt='ipa_logo'>
        </div>
        <div class='inn_nav'>
            <div class="nav_cross">
                <i class="nav_cross_btn">✕</i>
            </div>
            <nav class='nav_bar'>
                <ul>
                    <li>
                        <a href=''>Properties</a>
                    </li>
                    <li>
                        <a href=''>Blogs</a>
                    </li>
                    <li>
                        <a href=''>Contact</a>
                    </li>
                    <li>
                        <a href=''>About Us</a>
                    </li>
                </ul>
                <div class='listings'>
                    <a href='property-listings.php' class='add_list'>
                        Add Listing
                        <img loading='lazy' src='../assets/images/home_icon.png' alt='home_icon'>
                    </a>
                    <a href=''>
                        <img loading='lazy' src='../assets/images/bell_icon.png' alt='bell_icon'>
                    </a>
                    <div class='dropdown'>
                        <a href='' class='dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'
                            data-bs-auto-close='outside'>
                            <img loading='lazy' src='../assets/images/profile_icon.png' alt='profile_icon'>
                        </a>
                        <form class='dropdown-menu'>
                            <div class='dropdown-item'>
                                <a href='my-profile.php'>
                                    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'
                                        fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'
                                        stroke-linejoin='round' class='feather feather-user'>
                                        <path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'></path>
                                        <circle cx='12' cy='7' r='4'></circle>
                                    </svg> <span>Profile</span>
                                </a>
                            </div>
                            <div class='dropdown-item'>
                                <a href='sign-in.php'>
                                    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'
                                        fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'
                                        stroke-linejoin='round' class='feather feather-log-out'>
                                        <path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'></path>
                                        <polyline points='16 17 21 12 16 7'></polyline>
                                        <line x1='21' y1='12' x2='9' y2='12'></line>
                                    </svg> <span>Log Out</span>
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
        <div class="ham_burger">
            <i class="bi bi-list"></i>
        </div>
        <div class="overlay"></div>
    </div>
 </header>
--- a/ipa-agent/components/sidebar.php
+++ b/ipa-agent/components/sidebar.php
@@ -0,0 +1,70 @@
 <!-- sidebar start  -->
 <section class="sidebar_sec">
    <div class="inn_sidebar">
        <ul>
            <li class="<?php if ($currentPage == 'dashboard') {
                            echo 'active';
                        } ?>">
                <a href="index.php">
                    <span>
                        <img loading="lazy" src="../assets/images/dashboard.svg" alt="dashboard">
                    </span>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="<?php if ($currentPage == 'property-listing') {
                            echo 'active';
                        } ?>">
                <a href="property-listing.php">
                    <span>
                        <img loading="lazy" src="../assets/images/my_property.svg" alt="my_property">
                    </span>
                    <span>Property Listing</span>
                </a>
            </li>
            <!-- <li class="<?php if ($currentPage == 'property-listings') {
                            echo 'active';
                        } ?>">
                <a href="property-listings.php">
                    <span>
                        <img loading="lazy" src="../assets/images/my_property.svg" alt="my_property">
                    </span>
                    <span>Property Listing</span>
                </a>
            </li> -->
            <li class="<?php if ($currentPage == 'leads') {
                            echo 'active';
                        } ?>">
                <a href="leads.php">
                    <span>
                        <img loading="lazy" src="../assets/images/leads.svg" alt="leads">
                    </span>
                    <span> Leads</span>
                </a>
            </li>
            <li class="<?php if ($currentPage == 'appointments') {
                            echo 'active';
                        } ?>">
                <a href="appointments.php">
                    <span>
                        <img loading="lazy" src="../assets/images/appointments.svg" alt="appointments">
                    </span>
                    <span>Appointments</span>
                </a>
            </li>
            <li class="<?php if ($currentPage == 'my-profile') {
                            echo 'active';
                        } ?>">
                <a href="my-profile.php">
                    <span>
                        <img loading="lazy" src="../assets/images/my_profile.svg" alt="my_profile">
                    </span>
                    <span>My Profile</span>
                </a>
            </li>
        </ul>
    </div>
 </section>
 <!-- sidebar end -->
--- a/ipa-agent/layouts/modern-light-menu/app.js
+++ b/ipa-agent/layouts/modern-light-menu/app.js
@@ -0,0 +1,477 @@
 var App = function() {
    var MediaSize = {
        xl: 1200,
        lg: 992,
        md: 991,
        sm: 576
    };
    var Dom = {
        main: document.querySelector('html, body'),
        id: {
            container: document.querySelector("#container"),
        },
        class: {
            navbar: document.querySelector(".navbar"),
            overlay: document.querySelector('.overlay'),
            search: document.querySelector('.toggle-search'),
            searchOverlay: document.querySelector('.search-overlay'),
            searchForm: document.querySelector('.search-form-control'),
            mainContainer: document.querySelector('.main-container'),
            mainHeader: document.querySelector('.header.navbar')
        }
    }
    var categoryScroll = {
        scrollCat: function() {
            var sidebarWrapper = document.querySelectorAll('.sidebar-wrapper li.active')[0];
            var sidebarWrapperTop = sidebarWrapper.offsetTop - 12;
            setTimeout(() => {
                const scroll = document.querySelector('.menu-categories');
                scroll.scrollTop = sidebarWrapperTop;
            }, 50);
        }
    }
    var toggleFunction = {
        sidebar: function($recentSubmenu) {
            var sidebarCollapseEle = document.querySelectorAll('.sidebarCollapse');
            sidebarCollapseEle.forEach(el => {
                el.addEventListener('click', function (sidebar) {
                    sidebar.preventDefault();
                    getSidebar = document.querySelector('.sidebar-wrapper');
                    if ($recentSubmenu === true) {
                        if (document.querySelector('.collapse.submenu').classList.contains('show')) {
                            document.querySelector('.submenu.show').classList.add('mini-recent-submenu');
                            getSidebar.querySelector('.collapse.submenu').classList.remove('show');
                            getSidebar.querySelector('.collapse.submenu').classList.remove('show');
                            document.querySelector('.collapse.submenu').parentNode.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');
                        } else {
                            if (Dom.class.mainContainer.classList.contains('sidebar-closed')) {
                                if (document.querySelector('.collapse.submenu').classList.contains('recent-submenu')) {
                                    getSidebar.querySelector('.collapse.submenu.recent-submenu').classList.add('show');
                                    document.querySelector('.collapse.submenu.recent-submenu').parentNode.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'true');
                                    document.querySelector('.submenu').classList.remove('mini-recent-submenu');
                                } else {
                                    document.querySelector('li.active .submenu').classList.add('recent-submenu');
                                    getSidebar.querySelector('.collapse.submenu.recent-submenu').classList.add('show');
                                    document.querySelector('.collapse.submenu.recent-submenu').parentNode.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'true');
                                    document.querySelector('.submenu').classList.remove('mini-recent-submenu');
                                }
                            }
                        }
                    }
                    Dom.class.mainContainer.classList.toggle("sidebar-closed");
                    Dom.class.mainHeader.classList.toggle('expand-header');
                    Dom.class.mainContainer.classList.toggle("sbar-open");
                    Dom.class.overlay.classList.toggle('show');
                    Dom.main.classList.toggle('sidebar-noneoverflow');
                });
            });
        },
        onToggleSidebarSubmenu: function() {
            ['mouseenter', 'mouseleave'].forEach(function(e){
                document.querySelector('.sidebar-wrapper').addEventListener(e, function() {
                    if (document.querySelector('body').classList.contains('alt-menu')) {
                        if (document.querySelector('.main-container').classList.contains('sidebar-closed')) {
                            if (e === 'mouseenter') {
                                document.querySelector('li.menu .submenu').classList.remove('show');
                                document.querySelector('li.menu.active .submenu').classList.add('recent-submenu');
                                document.querySelector('li.menu.active').querySelector('.collapse.submenu.recent-submenu').classList.add('show');
                                document.querySelector('.collapse.submenu.recent-submenu').parentNode.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'true');
                            } else if (e === 'mouseleave') {
                                getMenuList = document.querySelectorAll('li.menu');
                                getMenuList.forEach(element => {
                                    var submenuShowEle = element.querySelector('.collapse.submenu.show');
                                    if (submenuShowEle) {
                                        submenuShowEle.classList.remove('show');
                                    }
                                    var submenuExpandedToggleEle = element.querySelector('.dropdown-toggle[aria-expanded="true"]');
                                    if (submenuExpandedToggleEle) {
                                        submenuExpandedToggleEle.setAttribute('aria-expanded', 'false');
                                    }
                                });
                            }
                        }
                    } else {
                        if (document.querySelector('.main-container').classList.contains('sidebar-closed')) {
                            if (e === 'mouseenter') {
                                document.querySelector('li.menu .submenu').classList.remove('show');
                                if (document.querySelector('li.menu.active .submenu')) {
                                    document.querySelector('li.menu.active .submenu').classList.add('recent-submenu');
                                    document.querySelector('li.menu.active').querySelector('.collapse.submenu.recent-submenu').classList.add('show');
                                    document.querySelector('.collapse.submenu.recent-submenu').parentNode.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'true');
                                }
                            } else if (e === 'mouseleave') {
                                getMenuList = document.querySelectorAll('li.menu');
                                getMenuList.forEach(element => {
                                    var submenuShowEle = element.querySelector('.collapse.submenu.show');
                                    if (submenuShowEle) {
                                        submenuShowEle.classList.remove('show');
                                    }
                                    var submenuExpandedToggleEle = element.querySelector('.dropdown-toggle[aria-expanded="true"]');
                                    if (submenuExpandedToggleEle) {
                                        submenuExpandedToggleEle.setAttribute('aria-expanded', 'false');
                                    }
                                });
                            }
                        }
                    }
                });
            });
        },
        offToggleSidebarSubmenu: function () {
            // $('.sidebar-wrapper').off('mouseenter mouseleave');
        },
        overlay: function() {
            document.querySelector('#dismiss, .overlay').addEventListener('click', function () {
                // hide sidebar
                Dom.class.mainContainer.classList.add('sidebar-closed');
                Dom.class.mainContainer.classList.remove('sbar-open');
                // hide overlay
                Dom.class.overlay.classList.remove('show');
                Dom.main.classList.remove('sidebar-noneoverflow');
            });            
        },
        search: function() {
            if (Dom.class.search) {
                Dom.class.search.addEventListener('click', function(event) {
                    this.classList.add('show-search');
                    Dom.class.searchOverlay.classList.add('show');
                    document.querySelector('body').classList.add('search-active');
                });
                Dom.class.searchOverlay.addEventListener('click', function(event) {
                    this.classList.remove('show');
                    Dom.class.search.classList.remove('show-search');
                    document.querySelector('body').classList.remove('search-active');
                });
                document.querySelector('.search-close').addEventListener('click', function(event) {
                    event.stopPropagation();
                    Dom.class.searchOverlay.classList.remove('show');
                    Dom.class.search.classList.remove('show-search');
                    document.querySelector('body').classList.remove('search-active');
                    document.querySelector('.search-form-control').value = ''
                });
            }
        },
        themeToggle: function (layoutName) {
            var togglethemeEl = document.querySelector('.theme-toggle');
            var getBodyEl = document.body;
            togglethemeEl.addEventListener('click', function() {
                var getLocalStorage = localStorage.getItem("theme");
                var parseObj = JSON.parse(getLocalStorage);
                if (parseObj.settings.layout.darkMode) {
                    var getObjectSettings = parseObj.settings.layout;
                    var newParseObject = {...getObjectSettings, darkMode: false};
                    var newObject = { ...parseObj, settings: { layout: newParseObject }}
                    localStorage.setItem("theme", JSON.stringify(newObject))
                    var getUpdatedLocalObject = localStorage.getItem("theme");
                    var getUpdatedParseObject = JSON.parse(getUpdatedLocalObject);
                    if (!getUpdatedParseObject.settings.layout.darkMode) {
                        document.body.classList.remove('dark')
                        ifStarterKit = document.body.getAttribute('page') === 'starter-pack' ? true : false;
                        if (ifStarterKit) {
                            document.querySelector('.navbar-logo').setAttribute('src', '../../src/assets/img/logo2.svg')
                        } else {
                            document.querySelector('.navbar-logo').setAttribute('src', getUpdatedParseObject.settings.layout.logo.lightLogo)
                        }
                    }
                } else {
                    var getObjectSettings = parseObj.settings.layout;
                    var newParseObject = {...getObjectSettings, darkMode: true};
                    var newObject = { ...parseObj, settings: { layout: newParseObject }}
                    localStorage.setItem("theme", JSON.stringify(newObject))
                    var getUpdatedLocalObject = localStorage.getItem("theme");
                    var getUpdatedParseObject = JSON.parse(getUpdatedLocalObject);
                    if (getUpdatedParseObject.settings.layout.darkMode) {
                        document.body.classList.add('dark')
                        ifStarterKit = document.body.getAttribute('page') === 'starter-pack' ? true : false;
                        if (ifStarterKit) {
                            document.querySelector('.navbar-logo').setAttribute('src', '../../src/assets/img/logo.svg')
                        } else {
                            document.querySelector('.navbar-logo').setAttribute('src', getUpdatedParseObject.settings.layout.logo.darkLogo)
                        }
                    }
                }
                // localStorage.clear()
            })
        }
    }
    var inBuiltfunctionality = {
        mainCatActivateScroll: function() {
            if (document.querySelector('.menu-categories')) {
                const ps = new PerfectScrollbar('.menu-categories', {
                    wheelSpeed:.5,
                    swipeEasing:!0,
                    minScrollbarLength:40,
                    maxScrollbarLength:300
                });
            }
        },
        notificationScroll: function() {
            if (document.querySelector('.notification-scroll')) {
                const notificationS = new PerfectScrollbar('.notification-scroll', {
                    wheelSpeed:.5,
                    swipeEasing:!0,
                    minScrollbarLength:40,
                    maxScrollbarLength:300
                });
            }
        },
        preventScrollBody: function() {
            var nonScrollableElement = document.querySelectorAll('#sidebar, .user-profile-dropdown .dropdown-menu, .notification-dropdown .dropdown-menu,  .language-dropdown .dropdown-menu')
            var preventScrolling = function(e) {
                e = e || window.event;
                if (e.preventDefault)
                    e.preventDefault();
                e.returnValue = false;  
                nonScrollableElement.scrollTop -= e. wheelDeltaY; 
            }
            nonScrollableElement.forEach(preventScroll => {
                preventScroll.addEventListener('mousewheel', preventScrolling);
                preventScroll.addEventListener('DOMMouseScroll', preventScrolling);
            });
        },
        searchKeyBind: function() {
            if (Dom.class.search) {
                Mousetrap.bind('ctrl+/', function() {
                    document.body.classList.add('search-active');
                    Dom.class.search.classList.add('show-search');
                    Dom.class.searchOverlay.classList.add('show');
                    Dom.class.searchForm.focus();
                    return false;
                });                
            }
        },
        bsTooltip: function() {
            var bsTooltip = document.querySelectorAll('.bs-tooltip')
            for (let index = 0; index < bsTooltip.length; index++) {
                var tooltip = new bootstrap.Tooltip(bsTooltip[index])
            }
        },
        bsPopover: function() {
            var bsPopover = document.querySelectorAll('.bs-popover')
            for (let index = 0; index < bsPopover.length; index++) {
                var popover = new bootstrap.Popover(bsPopover[index])
            }
        },
        onCheckandChangeSidebarActiveClass: function() {
            if (document.body.classList.contains('alt-menu')) {
                document.querySelector('.sidebar-wrapper li.menu.active [aria-expanded="true"]').setAttribute('aria-expanded', 'false');
            }
        },
        MaterialRippleEffect: function() {
            getAllBtn = document.querySelectorAll('button.btn, a.btn');
            getAllBtn.forEach(btn => {
                if (!btn.classList.contains('_no--effects')) {
                    btn.classList.add('_effect--ripple');
                }
            });
            if (document.querySelector('._effect--ripple')) {
                Waves.attach('._effect--ripple', 'waves-light');
                Waves.init();
            }
        }
    }
    var _mobileResolution = {
        onRefresh: function() {
            var windowWidth = window.innerWidth;
            if ( windowWidth <= MediaSize.md ) {
                categoryScroll.scrollCat();
                toggleFunction.sidebar();
            }
        },
        onResize: function() {
            window.addEventListener('resize', function(event) {
                event.preventDefault();
                var windowWidth = window.innerWidth;
                if ( windowWidth <= MediaSize.md ) {
                    toggleFunction.offToggleSidebarSubmenu();
                }
            });
        }
    }
    var _desktopResolution = {
        onRefresh: function() {
            var windowWidth = window.innerWidth;
            if ( windowWidth > MediaSize.md ) {
                categoryScroll.scrollCat();
                toggleFunction.sidebar();
                toggleFunction.onToggleSidebarSubmenu();
            }
        },
        onResize: function() {
            window.addEventListener('resize', function(event) {
                event.preventDefault();
                var windowWidth = window.innerWidth;
                if ( windowWidth > MediaSize.md ) {
                    toggleFunction.onToggleSidebarSubmenu();
                }
            });
        }
    }
    function sidebarFunctionality() {
        function sidebarCloser() {
            if (window.innerWidth <= 991 ) {
                if (!document.querySelector('body').classList.contains('alt-menu')) {
                    Dom.id.container.classList.add("sidebar-closed");
                    Dom.class.overlay.classList.remove('show');
                } else {
                    Dom.class.navbar.classList.remove("expand-header");
                    Dom.class.overlay.classList.remove('show');
                    Dom.id.container.classList.remove('sbar-open');
                    Dom.main.classList.remove('sidebar-noneoverflow');
                }
            } else if (window.innerWidth > 991 ) {
                if (!document.querySelector('body').classList.contains('alt-menu')) {
                    Dom.id.container.classList.remove("sidebar-closed");
                    Dom.class.navbar.classList.remove("expand-header");
                    Dom.class.overlay.classList.remove('show');
                    Dom.id.container.classList.remove('sbar-open');
                    Dom.main.classList.remove('sidebar-noneoverflow');
                } else {
                    Dom.main.classList.add('sidebar-noneoverflow');
                    Dom.id.container.classList.add("sidebar-closed");
                    Dom.class.navbar.classList.add("expand-header");
                    Dom.class.overlay.classList.add('show');
                    Dom.id.container.classList.add('sbar-open');
                    document.querySelector('.sidebar-wrapper [aria-expanded="true"]').parentNode.querySelector('.collapse').classList.remove('show');
                }
            }
        }
        function sidebarMobCheck() {
            if (window.innerWidth <= 991 ) {
                if ( document.querySelector('.main-container').classList.contains('sbar-open') ) {
                    return;
                } else {
                    sidebarCloser()
                }
            } else if (window.innerWidth > 991 ) {
                sidebarCloser();
            }
        }
        sidebarCloser();
        window.addEventListener('resize', function(event) {
            sidebarMobCheck();
        });
    }
    return {
        init: function(Layout) {
            toggleFunction.overlay();
            toggleFunction.search();
            toggleFunction.themeToggle(Layout);
            /*
                Desktop Resoltion fn
            */
            _desktopResolution.onRefresh();
            _desktopResolution.onResize();
            /*
                Mobile Resoltion fn
            */
            _mobileResolution.onRefresh();
            _mobileResolution.onResize();
            sidebarFunctionality();
            /*
                In Built Functionality fn
            */
            inBuiltfunctionality.mainCatActivateScroll();
            inBuiltfunctionality.notificationScroll();
            inBuiltfunctionality.preventScrollBody();
            inBuiltfunctionality.searchKeyBind();
            inBuiltfunctionality.bsTooltip();
            inBuiltfunctionality.bsPopover();
            inBuiltfunctionality.onCheckandChangeSidebarActiveClass();
            inBuiltfunctionality.MaterialRippleEffect();
        }
    }
 }();
 window.addEventListener('load', function() {
    App.init('layout');
 })
--- a/ipa-agent/layouts/modern-light-menu/css/light/loader.css
+++ b/ipa-agent/layouts/modern-light-menu/css/light/loader.css
@@ -0,0 +1,39 @@
 /*
 	===============================
 			@Import	Function
 	===============================
 */
 /*
 	===============================
 			@Import	Mixins
 	===============================
 */
 div#load_screen {
  background: rgb(236, 239, 255);
  opacity: 1;
  position: fixed;
  z-index: 999999;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
 }
 div#load_screen .loader {
  display: flex;
  justify-content: center;
  height: 100vh;
 }
 div#load_screen .loader-content {
  right: 0;
  align-self: center;
 }
 div#load_screen .loader-content .spinner-grow {
  width: 2.5rem;
  height: 2.5rem;
 }
 .spinner-grow {
  color: #29A243;
 }
 /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2xpZ2h0L2Jhc2UvX2Z1bmN0aW9ucy5zY3NzIiwiLi4vLi4vLi4vbGlnaHQvYmFzZS9fbWl4aW5zLnNjc3MiLCJsb2FkZXIuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FDQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQ0NBO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBQ0U7RUFDQTtFQUNBOztBQUdGO0VBQ0U7RUFDQTs7QUFFQTtFQUNFO0VBQ0E7OztBQU1OO0VBQ0UiLCJmaWxlIjoibG9hZGVyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qXHJcblx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxyXG5cdFx0XHRASW1wb3J0XHRGdW5jdGlvblxyXG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cclxuKi9cclxuXHJcbiIsIi8qXHJcblx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxyXG5cdFx0XHRASW1wb3J0XHRNaXhpbnNcclxuXHQ9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XHJcbiovXHJcblxyXG4vLyBCb3JkZXJcclxuJGRpcmVjdGlvbjogJyc7XHJcbkBtaXhpbiBib3JkZXIoJGRpcmVjdGlvbiwgJHdpZHRoLCAkc3R5bGUsICRjb2xvcikge1xyXG5cclxuICAgQGlmICRkaXJlY3Rpb24gPT0gJycge1xyXG4gICAgICAgIGJvcmRlcjogJHdpZHRoICRzdHlsZSAkY29sb3I7XHJcbiAgIH0gQGVsc2Uge1xyXG4gICAgICAgIGJvcmRlci0jeyRkaXJlY3Rpb259OiAkd2lkdGggJHN0eWxlICRjb2xvcjtcclxuICAgfVxyXG59IiwiQGltcG9ydCAnLi4vLi4vLi4vbGlnaHQvYmFzZS9iYXNlJztcclxuZGl2I2xvYWRfc2NyZWVuIHtcclxuICBiYWNrZ3JvdW5kOiByZ2IoMjM2LCAyMzksIDI1NSk7XHJcbiAgb3BhY2l0eTogMTtcclxuICBwb3NpdGlvbjogZml4ZWQ7XHJcbiAgei1pbmRleDogOTk5OTk5O1xyXG4gIHRvcDogMHB4O1xyXG4gIGJvdHRvbTogMDtcclxuICBsZWZ0OiAwO1xyXG4gIHJpZ2h0OiAwO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG5cclxuICAubG9hZGVyIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICAgIGhlaWdodDogMTAwdmg7XHJcbiAgfVxyXG5cclxuICAubG9hZGVyLWNvbnRlbnQge1xyXG4gICAgcmlnaHQ6IDA7XHJcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XHJcblxyXG4gICAgLnNwaW5uZXItZ3JvdyB7XHJcbiAgICAgIHdpZHRoOiAyLjVyZW07XHJcbiAgICAgIGhlaWdodDogMi41cmVtXHJcbiAgICB9XHJcbiAgICBcclxuICB9XHJcbn1cclxuXHJcbi5zcGlubmVyLWdyb3cge1xyXG4gIGNvbG9yOiAjMzA0YWNhO1xyXG59Il19 */
--- a/ipa-agent/layouts/modern-light-menu/css/light/plugins.css
+++ b/ipa-agent/layouts/modern-light-menu/css/light/plugins.css
@@ -0,0 +1,13 @@
@import url('../../../../src/assets/css/light/main.css');
@import url('../../../../src/plugins/css/light/perfect-scrollbar/perfect-scrollbar.css');
@import url('../../../../src/plugins/src/waves/waves.min.css');
@import url('./structure.css');
 /*
    Importing highlight.js CSS code 
    Just for demo purpose only
 	@Note:-  monokai-sublime.css stylesheet is for highliting the code;
 */
@import '../../../../src/plugins/src/highlight/styles/monokai-sublime.css';
--- a/ipa-agent/layouts/modern-light-menu/css/light/structure.css
+++ b/ipa-agent/layouts/modern-light-menu/css/light/structure.css
--- a/ipa-agent/layouts/modern-light-menu/loader.js
+++ b/ipa-agent/layouts/modern-light-menu/loader.js
@@ -0,0 +1,165 @@
 window.addEventListener("load", function(){
    // Remove Loader
    var load_screen = document.getElementById("load_screen");
    document.body.removeChild(load_screen);
    var layoutName = 'Modern Light Menu';
    var settingsObject = {
        admin: 'Cork Admin Template',
        settings: {
            layout: {
                name: layoutName,
                toggle: true,
                darkMode: false,
                boxed: true,
                logo: {
                    darkLogo: '../src/assets/img/logo.svg',
                    lightLogo: '../src/assets/img/logo2.svg'
                }
            }
        },
        reset: false
    }
    if (settingsObject.reset) {
        localStorage.clear()
    }
    if (localStorage.length === 0) {
        corkThemeObject = settingsObject;
    } else {
        getcorkThemeObject = localStorage.getItem("theme");
        getParseObject = JSON.parse(getcorkThemeObject)
        ParsedObject = getParseObject;
        if (getcorkThemeObject !== null) {
            if (ParsedObject.admin === 'Cork Admin Template') {
                if (ParsedObject.settings.layout.name === layoutName) {
                    corkThemeObject = ParsedObject;
                } else {
                    corkThemeObject = settingsObject;
                }
            } else {
                if (ParsedObject.admin === undefined) {
                    corkThemeObject = settingsObject;
                }
            }
        }  else {
            corkThemeObject = settingsObject;
        }
    }
    // Get Dark Mode Information i.e darkMode: true or false
    if (corkThemeObject.settings.layout.darkMode) {
        localStorage.setItem("theme", JSON.stringify(corkThemeObject));
        getcorkThemeObject = localStorage.getItem("theme");
        getParseObject = JSON.parse(getcorkThemeObject)
        if (getParseObject.settings.layout.darkMode) {
            ifStarterKit = document.body.getAttribute('page') === 'starter-pack' ? true : false;
            document.body.classList.add('dark');
            if (ifStarterKit) {
                if (document.querySelector('.navbar-logo')) {
                    document.querySelector('.navbar-logo').setAttribute('src', '../../src/assets/img/logo.svg')
                }
            } else {
                if (document.querySelector('.navbar-logo')) {
                    document.querySelector('.navbar-logo').setAttribute('src', getParseObject.settings.layout.logo.darkLogo)
                }
            }
        }
    } else {
        localStorage.setItem("theme", JSON.stringify(corkThemeObject));
        getcorkThemeObject = localStorage.getItem("theme");
        getParseObject = JSON.parse(getcorkThemeObject)
        if (!getParseObject.settings.layout.darkMode) {
            ifStarterKit = document.body.getAttribute('page') === 'starter-pack' ? true : false;
            document.body.classList.remove('dark');
            if (ifStarterKit) {
                if (document.querySelector('.navbar-logo')) {
                    document.querySelector('.navbar-logo').setAttribute('src', '../../src/assets/img/logo2.svg')
                }
            } else {
                if (document.querySelector('.navbar-logo')) {
                    document.querySelector('.navbar-logo').setAttribute('src', getParseObject.settings.layout.logo.lightLogo)
                }
            }
        }
    }
    // Get Layout Information i.e boxed: true or false
    if (corkThemeObject.settings.layout.boxed) {
        localStorage.setItem("theme", JSON.stringify(corkThemeObject));
        getcorkThemeObject = localStorage.getItem("theme");
        getParseObject = JSON.parse(getcorkThemeObject)
        if (getParseObject.settings.layout.boxed) {
            if (document.body.getAttribute('layout') !== 'full-width') {
                document.body.classList.add('layout-boxed');
                if (document.querySelector('.header-container')) {
                    document.querySelector('.header-container').classList.add('container-xxl');
                }
                if (document.querySelector('.middle-content')) {
                    document.querySelector('.middle-content').classList.add('container-xxl');
                }
            } else {
                document.body.classList.remove('layout-boxed');
                if (document.querySelector('.header-container')) {
                    document.querySelector('.header-container').classList.remove('container-xxl');
                }
                if (document.querySelector('.middle-content')) {
                    document.querySelector('.middle-content').classList.remove('container-xxl');
                }
            }
        }
    } else {
        localStorage.setItem("theme", JSON.stringify(corkThemeObject));
        getcorkThemeObject = localStorage.getItem("theme");
        getParseObject = JSON.parse(getcorkThemeObject)
        if (!getParseObject.settings.layout.boxed) {
            if (document.body.getAttribute('layout') !== 'boxed') {
                document.body.classList.remove('layout-boxed');
                if (document.querySelector('.header-container')) {
                    document.querySelector('.header-container').classList.remove('container-xxl');
                }
                if (document.querySelector('.middle-content')) {
                    document.querySelector('.middle-content').classList.remove('container-xxl');
                }
            } else {
                document.body.classList.add('layout-boxed');
                if (document.querySelector('.header-container')) {
                    document.querySelector('.header-container').classList.add('container-xxl');
                }
                if (document.querySelector('.middle-content')) {
                    document.querySelector('.middle-content').classList.add('container-xxl');
                }
            }
        }
    }
 });
--- a/ipa-agent/pages/appointments.php
+++ b/ipa-agent/pages/appointments.php
@@ -0,0 +1,151 @@
 <?php $currentPage = 'appointments' ?>
 <?php include( '../components/header.php' ) ?>
 <!-- BEGIN PAGE LEVEL STYLE -->
 <link href='../src/plugins/src/fullcalendar/fullcalendar.min.css' rel='stylesheet' type='text/css' />
 <link href='../src/plugins/css/light/fullcalendar/custom-fullcalendar.css' rel='stylesheet' type='text/css' />
 <link href='../src/assets/css/light/components/modal.css' rel='stylesheet' type='text/css'>
 <link href='../src/plugins/css/dark/fullcalendar/custom-fullcalendar.css' rel='stylesheet' type='text/css' />
 <!-- END PAGE LEVEL STYLE -->
 <div class='main_content'>
    <div class='row'>
        <div class='col-md-3'>
            <?php include( '../components/sidebar.php' ) ?>
        </div>
        <div class='col-md-9'>
            <div class='inner_contents'>
                <div class='appoint_page'>
                    <div class='head_btns'>
                        <div class='h_para'>
                            <h2 class=''>Appointments</h2>
                            <p>There is the latest update for the last 7 days.</p>
                        </div>
                        <!-- <div class='view_more'>
                            <a href='#'>Add New Appointment</a>
                        </div> -->
                    </div>
                </div>
                <div class="appoint_req">
                    <p class="h6">Appointment request</p>
                    <div class="name_time">
                        <p>
                            <img loading="lazy" src="../assets/images/profile.svg" alt="profile">
                            <span>John doe</span>
                        </p>
                        <span>|</span>
                        <p>Time : 5:20 pm</p>
                    </div>
                    <div class="name_time">
                        <button type="button" class="active btn-primary">Accept appointment</button>
                        <button type="button" class="btn-primary">Reject appointment</button>
                    </div>
                </div>
                <div class='calendar-container'>
                    <div class='calendar'></div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add new Appointment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="">
                            <label class="form-label">Enter Title</label>
                            <input id="event-title" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-12 d-none">
                        <div class="">
                            <label class="form-label">Enter Start Date</label>
                            <input id="event-start-date" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-12 d-none">
                        <div class="">
                            <label class="form-label">Enter End Date</label>
                            <input id="event-end-date" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="d-flex mt-4">
                            <div class="n-chk">
                                <div class="form-check form-check-primary form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Work"
                                        id="rwork">
                                    <label class="form-check-label" for="rwork">Work</label>
                                </div>
                            </div>
                            <div class="n-chk">
                                <div class="form-check form-check-warning form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Travel"
                                        id="rtravel">
                                    <label class="form-check-label" for="rtravel">Travel</label>
                                </div>
                            </div>
                            <div class="n-chk">
                                <div class="form-check form-check-success form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Personal"
                                        id="rPersonal">
                                    <label class="form-check-label" for="rPersonal">Personal</label>
                                </div>
                            </div>
                            <div class="n-chk">
                                <div class="form-check form-check-danger form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Important"
                                        id="rImportant">
                                    <label class="form-check-label" for="rImportant">Important</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success btn-update-event" data-fc-event-public-id="">Update
                    changes</button>
                <button type="button" class="btn btn-primary btn-add-event">Add Event</button>
            </div>
        </div>
    </div>
 </div>
 <!-- modal end  -->
 <?php include( '../components/footer-link.php' ) ?>
 <!-- BEGIN PAGE LEVEL SCRIPTS -->
 <script src="../src/plugins/src/fullcalendar/fullcalendar.min.js"></script>
 <script src="../src/plugins/src/uuid/uuid4.min.js"></script>
 <!-- END PAGE LEVEL SCRIPTS -->
 <!--  BEGIN CUSTOM SCRIPTS FILE  -->
 <script src="../src/plugins/src/fullcalendar/custom-fullcalendar.js"></script>
 <!--  END CUSTOM SCRIPTS FILE  -->
 <?php include( '../components/footer.php' ) ?>
--- a/ipa-agent/pages/edit-profile.php
+++ b/ipa-agent/pages/edit-profile.php
@@ -0,0 +1,225 @@
 <?php $currentPage = "my-profile" ?>
 <?php include('../components/header.php') ?>
 <!--FILEPOND  -->
 <link href="../src/plugins/src/flatpickr/flatpickr.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="../src/plugins/src/filepond/filepond.min.css">
 <link rel="stylesheet" href="../src/plugins/src/filepond/FilePondPluginImagePreview.min.css">
 <link href="../src/plugins/css/light/filepond/custom-filepond.css" rel="stylesheet" type="text/css" />
 <link href="../src/plugins/css/light/flatpickr/custom-flatpickr.css" rel="stylesheet" type="text/css">
 <link href="../src/assets/css/light/apps/invoice-edit.css" rel="stylesheet" type="text/css" />
 <div class="main_content">
    <div class="row">
        <div class="col-md-3">
            <?php include('../components/sidebar.php') ?>
        </div>
        <div class="col-md-9">
            <div class="inner_contents">
                <h2 class="h2_heading">Edit Profile</h2>
                <div class="form_sec my_profile">
                    <form action="">
                        <div class="row">
                            <div class="col-md-12 main_prof">
                                <!-- <div class="profile_edit" id="upload-container">
                                    <p>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="feather feather-edit-3">
                                            <path d="M12 20h9"></path>
                                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                        </svg>
                                    </p>
                                    <input type="file" id="file-input" accept="image/*">
                                    <div id="preview">
                                        <img loading="lazy" src="../assets/images/profile.svg" alt="profile">
                                    </div>
                                </div> -->
                                <div class="profile-image">
                                    <div class="img-uploader-content">
                                        <input type="file" class="filepond" name="filepond"
                                            accept="image/png, image/jpeg, image/gif" />
                                    </div>
                                </div>
                                <div class="view_public_pro">
                                    <div class="view_more">
                                        <a href="">View Public Profile</a>
                                    </div>
                                    <div class="view_more other_view">
                                        <a href="">
                                            Edit Profile
                                            <img loading="lazy" src="../assets/images/edit_oth.png" alt="edit_oth">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <p class="det_head">Personal details</p>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            First Name</label>
                                        <input type="text" class="form-control" id="" value="Akanksha" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Last name</label>
                                        <input type="text" class="form-control" id="" value="Surve">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Gender</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select gender</option>
                                            <option value="" selected>Male</option>
                                            <option value="">Female</option>
                                            <option value="">Other</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Email Address</label>
                                        <input type="email" class="form-control" id="" value="anilvarma@gmail.com">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            DOB</label>
                                        <input type="date" class="form-control" id="" value="1996-03-12">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Phone Number</label>
                                        <input type="number" class="form-control" id="" value="919855487466" />
                                    </div>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <p class="det_head">Address</p>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Street Address</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select Street Address</option>
                                            <option value="">Andheri</option>
                                            <option value="" selected>Maharashtra, Mumbai</option>
                                            <option value="">Chennai</option>
                                            <option value="">Hariyana</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            City</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select city</option>
                                            <option value="">Panjab</option>
                                            <option value="" selected>Mumbai</option>
                                            <option value="">Chennai</option>
                                            <option value="">Hariyana</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            State</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select State</option>
                                            <option value="" selected>UP</option>
                                            <option value="">Maharashtra</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Zip code</label>
                                        <input type="text" class="form-control" id="" value="25252" />
                                    </div>
                                </div>
                                <div class="col-md-12 view_more">
                                    <a href="">Save</a>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <p class="det_head">Reset Password</p>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Current Password</label>
                                        <input type="password" class="form-control" id="" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            New Password</label>
                                        <input type="password" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Confirm Password</label>
                                        <input type="password" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-12 view_more">
                                    <a href="">Save</a>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <div class="col-md-12 red_del">
                                    <a href="">
                                        <img loading="lazy" src="../assets/images/red_del.png" alt="red_del">
                                        Delete account
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>
 <?php include('../components/footer-link.php') ?>
 <!-- FILEPOND  -->
 <script src="../src/plugins/src/filepond/filepond.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginFileValidateType.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageExifOrientation.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImagePreview.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageCrop.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageResize.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageTransform.min.js"></script>
 <script src="../src/plugins/src/filepond/filepondPluginFileValidateSize.min.js"></script>
 <script src="../src/plugins/src/flatpickr/flatpickr.js"></script>
 <script src="../src/assets/js/apps/invoice-edit.js"></script>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/forgot-password-email.php
+++ b/ipa-agent/pages/forgot-password-email.php
@@ -0,0 +1,30 @@
 <?php include('../components/header.php') ?>
 <seciton class="form_sec">
    <div class="container">
    <a href="sign-in.php" class="back_btn">
            <img loading="lazy" src="../assets/images/back_btn.svg" alt="back_btn">
        </a>
        <div class="row">
            <div class="col-md-6">
                <img loading="lazy" src="../assets/images/login_img.webp" alt="login_img">
            </div>
            <div class="col-md-6">
                <form>
                    <h2 class="h2_head">Forgot password</h2>
                    <div class="label_input other_">
                        <label for="" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="" placeholder="Enter your email address">
                    </div>
                    <a href="forgot-password-otp.php" class="login_btn">Continue</a>
                </form>
            </div>
        </div>
    </div>
 </seciton>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/forgot-password-otp.php
+++ b/ipa-agent/pages/forgot-password-otp.php
@@ -0,0 +1,43 @@
 <?php include('../components/header.php') ?>
 <seciton class="form_sec">
    <div class="container">
    <a href="forgot-password-email.php" class="back_btn">
            <img loading="lazy" src="../assets/images/back_btn.svg" alt="back_btn">
        </a>
        <div class="row">
            <div class="col-md-6">
                <img loading="lazy" src="../assets/images/login_img.webp" alt="login_img">
            </div>
            <div class="col-md-6">
                <form>
                    <h2 class="h2_head">Forgot password</h2>
                    <p class="otp_para">
                        OTP Has been sent to the email address
                        <a href="">
                            mihirs@gmail.com
                            <img loading="lazy" src="../assets/images/edit_icon.svg" alt="edit_icon">
                        </a>
                    </p>
                    <div class="otp_main" id="otp_main">
                        <label for="" class="form-label">Enter OTP</label>
                        <div class="otp_input">
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(1)' maxlength=1>
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(2)' maxlength=1>
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(3)' maxlength=1>
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(4)' maxlength=1>
                        </div>
                    </div>
                    <a href="reset-password.php" class="login_btn">Verify OTP</a>
                    <p class="regis">Didn’t receive any code? <a href="">Resend</a></p>
                </form>
            </div>
        </div>
    </div>
 </seciton>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/index.php
+++ b/ipa-agent/pages/index.php
@@ -0,0 +1,266 @@
 <?php $currentPage = 'dashboard' ?>
 <?php include( '../components/header.php' ) ?>
 <div class='main_content'>
    <div class='row'>
        <div class='col-md-3'>
            <?php include( '../components/sidebar.php' ) ?>
        </div>
        <div class='col-md-9'>
            <div class='inner_contents'>
                <h2 class='h2_heading'>Dashboard</h2>
                <div class='profile_main'>
                    <div class='name_edit'>
                        <h5 class='h5_heading'>Anil Varma <span>Agent</span></h5>
                        <a href='edit-profile.php'>
                            <img loading='lazy' src='../assets/images/edit_pen.svg' alt='edit_pen'>
                        </a>
                    </div>
                    <div class='row'>
                        <div class='col-md-7'>
                            <div class='profile_inn'>
                                <div class='prof_img'>
                                    <img loading='lazy' src='../assets/images/profile.svg' alt='profile'>
                                </div>
                                <div class='prof_cont'>
                                    <p><strong>Phone number</strong> : <span>91 98554 87466</span></p>
                                    <p><strong>DOB</strong> : <span>12/03/1996</span></p>
                                </div>
                            </div>
                        </div>
                        <div class='col-md-5'>
                            <div class='prof_cont'>
                                <p><strong>Email address </strong> : <span>anilvarma@gmail.com</span></p>
                                <p><strong>State & City</strong> : <span>Maharashtra, Mumbai</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <h5 class='h5_heading'>My earnings</h5>
                <div class='my_earnings'>
                    <div class='inn_earn'>
                        <div class='num'><span>09</span></div>
                        <div class='earn_content'>Number of properties listed</div>
                    </div>
                    <div class='inn_earn inn_earn2'>
                        <div class='num'><span>04</span></div>
                        <div class='earn_content'>Properties sold</div>
                    </div>
                    <div class='inn_earn'>
                        <div class='num'><span>06</span></div>
                        <div class='earn_content'>Properties rented</div>
                    </div>
                </div>
                <div class='property_table'>
                    <div class='prop_btns'>
                        <h5 class='h5_heading m-0'>Properties</h5>
                        <div class='inn_btn'>
                            <div class='view_more m-0'>
                                <a href='#'>View all</a>
                            </div>
                            <div class='dropdown'>
                                <button type='button' class='btn dropdown-toggle' data-bs-toggle='dropdown'
                                    aria-expanded='false' data-bs-auto-close='outside'>
                                    Filter
                                    <svg xmlns='http://www.w3.org/2000/svg' width='23' height='15' viewBox='0 0 23 15'
                                        fill='none'>
                                        <path d='M1 1H22' stroke='black' stroke-width='1.67' stroke-linecap='round'
                                            stroke-linejoin='round' />
                                        <path d='M4.9375 7.5625H18.0625' stroke='black' stroke-width='1.67'
                                            stroke-linecap='round' stroke-linejoin='round' />
                                        <path d='M10.1875 14.125H12.8125' stroke='black' stroke-width='1.67'
                                            stroke-linecap='round' stroke-linejoin='round' />
                                    </svg>
                                </button>
                                <form class='dropdown-menu'>
                                    <p class="m-2 fs-5">Filter</p>
                                    <div class='m-2'>
                                        <div class='accordion' id='accordionPanelsStayOpenExample'>
                                            <div class='accordion-item'>
                                                <h2 class='accordion-header'>
                                                    <button class='accordion-button' type='button'
                                                        data-bs-toggle='collapse'
                                                        data-bs-target='#panelsStayOpen-collapseOne'
                                                        aria-expanded='true' aria-controls='panelsStayOpen-collapseOne'>
                                                        Status
                                                    </button>
                                                </h2>
                                                <div id='panelsStayOpen-collapseOne'
                                                    class='accordion-collapse collapse show'>
                                                    <div class='accordion-body'>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox' class='form-check-input'
                                                                id='dropdownCheck1' onclick='checkAll(this)'>
                                                            <label class='form-check-label' for='dropdownCheck1'>
                                                                All
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox'
                                                                id='dropdownCheck2'>
                                                            <label class='form-check-label' for='dropdownCheck2'>
                                                                Sold
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox'
                                                                id='dropdownCheck3'>
                                                            <label class='form-check-label' for='dropdownCheck3'>
                                                                Rented
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox'
                                                                id='dropdownCheck4'>
                                                            <label class='form-check-label' for='dropdownCheck4'>
                                                                Listed
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class='accordion-item'>
                                                <h2 class='accordion-header'>
                                                    <button class='accordion-button collapsed' type='button'
                                                        data-bs-toggle='collapse'
                                                        data-bs-target='#panelsStayOpen-collapseTwo'
                                                        aria-expanded='false'
                                                        aria-controls='panelsStayOpen-collapseTwo'>
                                                        Property type
                                                    </button>
                                                </h2>
                                                <div id='panelsStayOpen-collapseTwo'
                                                    class='accordion-collapse collapse'>
                                                    <div class='accordion-body'>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox' class='form-check-input'
                                                                id='dropdownCheck5' onclick='checkAll2(this)'>
                                                            <label class='form-check-label' for='dropdownCheck5'>
                                                                All
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox2'
                                                                id='dropdownCheck6'>
                                                            <label class='form-check-label' for='dropdownCheck6'>
                                                                Residential
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox2'
                                                                id='dropdownCheck9'>
                                                            <label class='form-check-label' for='dropdownCheck7'>
                                                                Commercial
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class='accordion-item'>
                                                <h2 class='accordion-header'>
                                                    <button class='accordion-button collapsed' type='button'
                                                        data-bs-toggle='collapse'
                                                        data-bs-target='#panelsStayOpen-collapseThree'
                                                        aria-expanded='false'
                                                        aria-controls='panelsStayOpen-collapseThree'>
                                                        Price
                                                    </button>
                                                </h2>
                                                <div id='panelsStayOpen-collapseThree'
                                                    class='accordion-collapse collapse'>
                                                    <div class='accordion-body'>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input'
                                                                id='dropdownCheck8'>
                                                            <label class='form-check-label' for='dropdownCheck8'>
                                                                Low to high
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input'
                                                                id='dropdownCheck9'>
                                                            <label class='form-check-label' for='dropdownCheck9'>
                                                                High to low
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="table_div">
                    <table>
                        <thead>
                            <th>Sr. no.</th>
                            <th>Property Id</th>
                            <th>Location</th>
                            <th>Property Type</th>
                            <th>Price</th>
                            <th>Status</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>08765786</td>
                                <td>Mumbai</td>
                                <td>Residential</td>
                                <td>₹20, 0000</td>
                                <td>Sold</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>08765786</td>
                                <td>Mumbai</td>
                                <td>Residential</td>
                                <td>₹20, 0000</td>
                                <td>Sold</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>08765786</td>
                                <td>Mumbai</td>
                                <td>Residential</td>
                                <td>₹20, 0000</td>
                                <td>Sold</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>08765786</td>
                                <td>Mumbai</td>
                                <td>Residential</td>
                                <td>₹20, 0000</td>
                                <td>Sold</td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                </div>
                <div class='view_more'>
                    <a href='properties.php'>View More</a>
                </div>
            </div>
        </div>
    </div>
 </div>
 <?php include('../components/footer-link.php') ?>
 <?php include( '../components/footer.php' ) ?>
--- a/ipa-agent/pages/leads.php
+++ b/ipa-agent/pages/leads.php
@@ -0,0 +1,101 @@
 <?php $currentPage = "leads" ?>
 <?php include('../components/header.php') ?>
 <div class="main_content">
    <div class="row">
        <div class="col-md-3">
            <?php include('../components/sidebar.php') ?>
        </div>
        <div class="col-md-9">
            <div class="inner_contents">
                <h2 class="h2_heading">Leads</h2>
                <div class="leads-page">
                     <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="Responses-tab" data-bs-toggle="tab"
                                data-bs-target="#Responses-tab-pane" type="button" role="tab"
                                aria-controls="Responses-tab-pane" aria-selected="true">All Responses(2)</button>
                        </li>
                        <li class="verti_line">|</li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="Respondents-tab" data-bs-toggle="tab"
                                data-bs-target="#Respondents-tab-pane" type="button" role="tab"
                                aria-controls="Respondents-tab-pane" aria-selected="false">All Respondents(2)</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="Responses-tab-pane" role="tabpanel"
                            aria-labelledby="Responses-tab" tabindex="0">
                            <div class="review">
                                <div class="row">
                                    <div class="col-md-4">
                                         <p>Vinodhini <span>(individual)</span></p>
                                         <p>+91-8070911256 <i class="bi bi-check2"></i> | vinodinivijayaraj@wdi...</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p>Viewed Contact <span>on 20 Feb, 2024</span></p>
                                    </div>
                                    <div class="col-md-4">
                                        <p>k73796751 : <span>Underscreening</span></p>
                                        <p>Rs10 Lac, 4 Bed, Flat/Apartment for Sale...</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><span>Interested In:</span></p>
                                        <p>(10 L | 1500 sq.ft.)</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><span>Focus Area:</span>  residential-land Rs. 5 Lacs to 10 Lacs, Andheri, Mumbai</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><span>Planning to Buy within:</span> NA</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><span>Interested in Site Visit?</span> NA</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <p><span>Status:</span>New <span>Update Status</span></p>
                                    </div>
                                    <div class="col-md-4">
                                        <p>Give Feedback: <i class="bi bi-emoji-smile"></i></p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><span>Report as Broker</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="contact">
                                <div class="row">
                                    <div class="col-md-4">
                                        <p>Kartikey Gautam <span>(Dealer)</span></p>
                                        <p>+91-7508071112 <i class="bi bi-check2"></i> | <span>vinodinivijayaraj@wdi...</span></p>
                                    </div>
                                    <div class="col-md-4">
                                        <p>Viewed Contact <span>on 20 Feb, 2024</span></p>
                                    </div>
                                    <div class="col-md-4">
                                        <p>k73796751 : <span>Underscreening</span></p>
                                        <p><span>Rs10 Lac, 4 Bed, Flat/Apartment for Sale... </span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="Respondents-tab-pane" role="tabpanel"
                            aria-labelledby="Respondents-tab" tabindex="0">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/my-profile.php
+++ b/ipa-agent/pages/my-profile.php
@@ -0,0 +1,225 @@
 <?php $currentPage = "my-profile" ?>
 <?php include('../components/header.php') ?>
 <!--FILEPOND  -->
 <link href="../src/plugins/src/flatpickr/flatpickr.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="../src/plugins/src/filepond/filepond.min.css">
 <link rel="stylesheet" href="../src/plugins/src/filepond/FilePondPluginImagePreview.min.css">
 <link href="../src/plugins/css/light/filepond/custom-filepond.css" rel="stylesheet" type="text/css" />
 <link href="../src/plugins/css/light/flatpickr/custom-flatpickr.css" rel="stylesheet" type="text/css">
 <link href="../src/assets/css/light/apps/invoice-edit.css" rel="stylesheet" type="text/css" />
 <div class="main_content">
    <div class="row">
        <div class="col-md-3">
            <?php include('../components/sidebar.php') ?>
        </div>
        <div class="col-md-9">
            <div class="inner_contents">
                <h2 class="h2_heading">My Profile</h2>
                <div class="form_sec my_profile">
                    <form action="">
                        <div class="row">
                            <div class="col-md-12 main_prof">
                                <!-- <div class="profile_edit">
                                    <p>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="feather feather-edit-3">
                                            <path d="M12 20h9"></path>
                                            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                        </svg>
                                    </p>
                                    <input type="file" id="file-input" accept="image/*">
                                    <div id="preview">
                                        <img loading="lazy" src="../assets/images/profile.svg" alt="profile">
                                    </div>
                                </div> -->
                                <div class="profile-image">
                                    <div class="img-uploader-content">
                                        <input type="file" class="filepond" name="filepond"
                                            accept="image/png, image/jpeg, image/gif" />
                                    </div>
                                </div>
                                <!-- <input type="text" class="h5_heading" value="Anil Varma" /> -->
                                <div class="view_public_pro">
                                    <div class="view_more">
                                        <a href="">View Public Profile</a>
                                    </div>
                                    <div class="view_more other_view">
                                        <a href="edit-profile.php">
                                            Edit Profile
                                            <img loading="lazy" src="../assets/images/edit_oth.png" alt="edit_oth">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <p class="det_head">Personal details</p>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            First Name</label>
                                        <input type="text" class="form-control" id="" value="" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Last name</label>
                                        <input type="text" class="form-control" id="" value="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Gender</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select gender</option>
                                            <option value="">Male</option>
                                            <option value="">Female</option>
                                            <option value="">Other</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Email Address</label>
                                        <input type="email" class="form-control" id="" value="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            DOB</label>
                                        <input type="date" class="form-control" id="" value="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Phone Number</label>
                                        <input type="number" class="form-control" id="" value="" />
                                    </div>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <p class="det_head">Address</p>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Street Address</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select Street Address</option>
                                            <option value="">Andheri</option>
                                            <option value="">Maharashtra, Mumbai</option>
                                            <option value="">Chennai</option>
                                            <option value="">Hariyana</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            City</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select city</option>
                                            <option value="">Panjab</option>
                                            <option value="">Mumbai</option>
                                            <option value="">Chennai</option>
                                            <option value="">Hariyana</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            State</label>
                                        <select name="" id="" class="form-select">
                                            <option value="">Select State</option>
                                            <option value="">UP</option>
                                            <option value="">Maharashtra</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Zip code</label>
                                        <input type="text" class="form-control" id="" value="25252" />
                                    </div>
                                </div>
                                <div class="col-md-12 view_more">
                                    <a href="">Save</a>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <p class="det_head">Reset Password</p>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Current Password</label>
                                        <input type="password" class="form-control" id="" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            New Password</label>
                                        <input type="password" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="label_input">
                                        <label for="" class="form-label">
                                            Confirm Password</label>
                                        <input type="password" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-12 view_more">
                                    <a href="">Save</a>
                                </div>
                            </div>
                            <div class="row bor_row">
                                <div class="col-md-12 red_del">
                                    <a href="">
                                        <img loading="lazy" src="../assets/images/red_del.png" alt="red_del">
                                        Delete account
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
 </div>
 <?php include('../components/footer-link.php') ?>
 <!-- FILEPOND  -->
 <script src="../src/plugins/src/filepond/filepond.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginFileValidateType.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageExifOrientation.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImagePreview.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageCrop.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageResize.min.js"></script>
 <script src="../src/plugins/src/filepond/FilePondPluginImageTransform.min.js"></script>
 <script src="../src/plugins/src/filepond/filepondPluginFileValidateSize.min.js"></script>
 <script src="../src/plugins/src/flatpickr/flatpickr.js"></script>
 <script src="../src/assets/js/apps/invoice-edit.js"></script>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/otp.php
+++ b/ipa-agent/pages/otp.php
@@ -0,0 +1,43 @@
 <?php include('../components/header.php') ?>
 <seciton class="form_sec">
    <div class="container">
        <a href="sign-up.php" class="back_btn">
            <img loading="lazy" src="../assets/images/back_btn.svg" alt="back_btn">
        </a>
        <div class="row">
            <div class="col-md-6">
                <img loading="lazy" src="../assets/images/login_img.webp" alt="login_img">
            </div>
            <div class="col-md-6">
                <form>
                    <h2 class="h2_head">OTP</h2>
                    <p class="otp_para">
                        OTP Has been sent to the email address
                        <a href="">
                            mihirs@gmail.com
                            <img loading="lazy" src="../assets/images/edit_icon.svg" alt="edit_icon">
                        </a>
                    </p>
                    <div class="otp_main" id="otp_main">
                        <label for="" class="form-label">Enter OTP</label>
                        <div class="otp_input">
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(1)' maxlength=1>
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(2)' maxlength=1>
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(3)' maxlength=1>
                            <input type="text" oninput='digitValidate(this)' onkeyup='tabChange(4)' maxlength=1>
                        </div>
                    </div>
                    <a href="otp.php" class="login_btn">Verify OTP</a>
                    <p class="regis">Didn’t receive any code? <a href="">Resend</a></p>
                </form>
            </div>
        </div>
    </div>
 </seciton>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/properties.php
+++ b/ipa-agent/pages/properties.php
@@ -0,0 +1,395 @@
 <?php $currentPage = 'dashboard' ?>
 <?php include( '../components/header.php' ) ?>
 <!-- BEGIN PAGE LEVEL CUSTOM STYLES -->
 <link rel="stylesheet" type="text/css" href="../src/plugins/src/table/datatable/datatables.css">
 <link rel="stylesheet" type="text/css" href="../src/plugins/css/light/table/datatable/dt-global_style.css">
 <link rel="stylesheet" type="text/css" href="../src/plugins/css/light/table/datatable/custom_dt_custom.css">
 <link href='../src/assets/css/light/components/modal.css' rel='stylesheet' type='text/css'>
 <!-- END PAGE LEVEL CUSTOM STYLES -->
 <div class='main_content'>
    <div class='row'>
        <div class='col-md-3'>
            <?php include( '../components/sidebar.php' ) ?>
        </div>
        <div class='col-md-9'>
            <div class='inner_contents'>
                <div class='property_table'>
                    <div class='prop_btns'>
                        <h5 class='h5_heading m-0'>Properties</h5>
                        <div class='inn_btn'>
                            <div class='view_more m-0'>
                                <a href='#'>View all</a>
                            </div>
                            <div class='dropdown'>
                                <button type='button' class='btn dropdown-toggle' data-bs-toggle='dropdown'
                                    aria-expanded='false' data-bs-auto-close='outside'>
                                    Filter
                                    <svg xmlns='http://www.w3.org/2000/svg' width='23' height='15' viewBox='0 0 23 15'
                                        fill='none'>
                                        <path d='M1 1H22' stroke='black' stroke-width='1.67' stroke-linecap='round'
                                            stroke-linejoin='round' />
                                        <path d='M4.9375 7.5625H18.0625' stroke='black' stroke-width='1.67'
                                            stroke-linecap='round' stroke-linejoin='round' />
                                        <path d='M10.1875 14.125H12.8125' stroke='black' stroke-width='1.67'
                                            stroke-linecap='round' stroke-linejoin='round' />
                                    </svg>
                                </button>
                                <form class='dropdown-menu'>
                                    <p class='m-2 fs-5'>Filter</p>
                                    <div class='m-2'>
                                        <div class='accordion' id='accordionPanelsStayOpenExample'>
                                            <div class='accordion-item'>
                                                <h2 class='accordion-header'>
                                                    <button class='accordion-button' type='button'
                                                        data-bs-toggle='collapse'
                                                        data-bs-target='#panelsStayOpen-collapseOne'
                                                        aria-expanded='true' aria-controls='panelsStayOpen-collapseOne'>
                                                        Status
                                                    </button>
                                                </h2>
                                                <div id='panelsStayOpen-collapseOne'
                                                    class='accordion-collapse collapse show'>
                                                    <div class='accordion-body'>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox' class='form-check-input'
                                                                id='dropdownCheck1' onclick='checkAll(this)'>
                                                            <label class='form-check-label' for='dropdownCheck1'>
                                                                All
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox'
                                                                id='dropdownCheck2'>
                                                            <label class='form-check-label' for='dropdownCheck2'>
                                                                Sold
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox'
                                                                id='dropdownCheck3'>
                                                            <label class='form-check-label' for='dropdownCheck3'>
                                                                Rented
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox'
                                                                id='dropdownCheck4'>
                                                            <label class='form-check-label' for='dropdownCheck4'>
                                                                Listed
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class='accordion-item'>
                                                <h2 class='accordion-header'>
                                                    <button class='accordion-button collapsed' type='button'
                                                        data-bs-toggle='collapse'
                                                        data-bs-target='#panelsStayOpen-collapseTwo'
                                                        aria-expanded='false'
                                                        aria-controls='panelsStayOpen-collapseTwo'>
                                                        Property type
                                                    </button>
                                                </h2>
                                                <div id='panelsStayOpen-collapseTwo'
                                                    class='accordion-collapse collapse'>
                                                    <div class='accordion-body'>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox' class='form-check-input'
                                                                id='dropdownCheck5' onclick='checkAll2(this)'>
                                                            <label class='form-check-label' for='dropdownCheck5'>
                                                                All
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox2'
                                                                id='dropdownCheck6'>
                                                            <label class='form-check-label' for='dropdownCheck6'>
                                                                Residential
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox'
                                                                class='form-check-input status-checkbox2'
                                                                id='dropdownCheck9'>
                                                            <label class='form-check-label' for='dropdownCheck7'>
                                                                Commercial
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class='accordion-item'>
                                                <h2 class='accordion-header'>
                                                    <button class='accordion-button collapsed' type='button'
                                                        data-bs-toggle='collapse'
                                                        data-bs-target='#panelsStayOpen-collapseThree'
                                                        aria-expanded='false'
                                                        aria-controls='panelsStayOpen-collapseThree'>
                                                        Price
                                                    </button>
                                                </h2>
                                                <div id='panelsStayOpen-collapseThree'
                                                    class='accordion-collapse collapse'>
                                                    <div class='accordion-body'>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox' class='form-check-input'
                                                                id='dropdownCheck8'>
                                                            <label class='form-check-label' for='dropdownCheck8'>
                                                                Low to high
                                                            </label>
                                                        </div>
                                                        <div class='form-check my-2'>
                                                            <input type='checkbox' class='form-check-input'
                                                                id='dropdownCheck9'>
                                                            <label class='form-check-label' for='dropdownCheck9'>
                                                                High to low
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <a href='#' class='del_icon'>
                                <img loading='lazy' src='../assets/images/del_btn.png' alt='del_btn'>
                            </a>
                        </div>
                    </div>
                    <table id='blacklisted_vendors' class='table style-3 dt-table-hover'>
                        <thead>
                            <tr>
                                <th class='checkbox-column dt-no-sorting'><input type='checkbox'></th>
                                <th class='checkbox-column text-center'>Sr.no</th>
                                <th class='text-center'>Property Id</th>
                                <th class='text-center'>Location</th>
                                <th class='text-center'>Property Type</th>
                                <th class='text-center'>CountPricery</th>
                                <th class='text-center'>Status</th>
                                <th class='text-center dt-no-sorting'>Action</th>
                            </tr>
                        </thead>
                        <tbody class='text-center'>
                            <?php for ( $x = 0; $x <= 6; $x++ ) {
    ?>
                            <tr>
                                <td class='checkbox-column'><input type='checkbox'></td>
                                <td class='checkbox-column'><?php echo $x + 1 ?></td>
                                <td>08765786</td>
                                <td>Mumbai</td>
                                <td>Residential</td>
                                <td>₹20, 0000</td>
                                <td class='text-center'>Sold</td>
                                <td class='text-center table_action'>
                                    <a href='' data-bs-toggle="modal" data-bs-target="#view_details">
                                        <img loading='lazy' src='../assets/images/eye_icon.png' alt='eye_icon'>
                                    </a>
                                    <a href='' data-bs-toggle="modal" data-bs-target="#edit_details">
                                        <img loading='lazy' src='../assets/images/edit_icon.png' alt='eye_icon'>
                                    </a>
                                </td>
                            </tr>
                            <?php }
    ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
 </div>
 <!-- Modal view start-->    
 <div class="modal fade" id="view_details" tabindex="-1" aria-labelledby="view_detailsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="view_detailsLabel">Properties Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Property ID</label>
                            <div class="form-control">0822525205</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Location</label>
                            <div class="form-control">Mumbai</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Property Type</label>
                            <div class="form-control">Residential</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Price</label>
                            <div class="form-control">₹20, 000</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Status</label>
                            <div class="form-control">Sold</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
                <a type="button" class="btn btn-success">Save</a>
            </div>
        </div>
    </div>
 </div>
 <!-- modal view end  -->
 <!-- Modal edit start-->    
 <div class="modal fade" id="edit_details" tabindex="-1" aria-labelledby="edit_detailsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="edit_detailsLabel">Properties Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Property ID</label>
                            <input type="number" class="form-control" value="0822525205">
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Location</label>
                            <select name="" id="" class="form-select">
                                <option value="">Select Location</option>
                                <option value="" selected>Mumbai</option>
                                <option value="">Goa</option>
                                <option value="">Panjab</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Property Type</label>
                            <select name="" id="" class="form-select">
                                <option value="">Select property type</option>
                                <option value="" selected>Residential</option>
                                <option value="">Panjab</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Price</label>
                            <input type="number" class="form-control" value="₹20,000">
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="">
                            <label class="form-label">Status</label>
                            <select name="" id="" class="form-select">
                                <option value="">Select status</option>
                                <option value="" selected>Sold</option>
                                <option value="">buy</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
                <a type="button" class="btn btn-success">Save</a>
            </div>
        </div>
    </div>
 </div>
 <!-- modal edit end  -->
 <?php include('../components/footer-link.php') ?>
 <!-- BEGIN PAGE LEVEL SCRIPTS -->
 <script src="../src/plugins/src/table/datatable/datatables.js"></script>
 <!-- END PAGE LEVEL SCRIPTS -->
 <script>
 c2 = $('#blacklisted_vendors').DataTable({
    headerCallback: function(e, a, t, n, s) {
        e.getElementsByTagName("th")[0].innerHTML = `
                <div class="form-check form-check-primary d-block new-control">
                    <input class="form-check-input chk-parent" type="checkbox" id="form-check-default">
                </div>`
    },
    columnDefs: [{
        targets: 0,
        width: "30px",
        className: "",
        orderable: !1,
        render: function(e, a, t, n) {
            return `
                    <div class="form-check form-check-primary d-block new-control">
                        <input class="form-check-input child-chk" type="checkbox" id="form-check-default">
                    </div>`
        }
    }],
    "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
        "<'table-responsive'tr>" +
        "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
    "oLanguage": {
        "oPaginate": {
            "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
            "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
        },
        "sInfo": "Showing page _PAGE_ of _PAGES_",
        "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
        "sSearchPlaceholder": "Search...",
        "sLengthMenu": "Results :  _MENU_",
    },
    "lengthMenu": [5, 10, 20, 50],
    "pageLength": 10
 });
 multiCheck(c2);
 </script>
 <?php include( '../components/footer.php' ) ?>
--- a/ipa-agent/pages/property-listing.php
+++ b/ipa-agent/pages/property-listing.php
@@ -0,0 +1,288 @@
 <?php $currentPage = "property-listing" ?>
 <?php include('../components/header.php') ?>
 <div class="main_content">
    <div class="row">
        <div class="col-md-3">
            <?php include('../components/sidebar.php') ?>
        </div>
        <div class="col-md-9">
            <div class="inner_contents">
                <h2 class="h2_heading">Property Listing</h2>
                <div class="locality_search">
                    <div class="inn_loc">
                        <div class="search">
                            <span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-search">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                </svg></span>
                            <span><input type="text" placeholder="Enter locality"></span>
                        </div>
                    </div>
                    <div class="inn_loc">
                        <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false" data-bs-auto-close="outside">
                                Status
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
                            </button>
                            <form class="dropdown-menu">
                                <div class="m-3">
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input" id="dropdownCheck1"
                                            onclick="checkAll(this)">
                                        <label class="form-check-label" for="dropdownCheck1">
                                            All
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input status-checkbox"
                                            id="dropdownCheck2">
                                        <label class="form-check-label" for="dropdownCheck2">
                                            Sold
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input status-checkbox"
                                            id="dropdownCheck3">
                                        <label class="form-check-label" for="dropdownCheck3">
                                            Rented
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input status-checkbox"
                                            id="dropdownCheck4">
                                        <label class="form-check-label" for="dropdownCheck4">
                                            Listed
                                        </label>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="inn_loc">
                        <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false" data-bs-auto-close="outside">
                                Property Type
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
                            </button>
                            <form class="dropdown-menu">
                                <div class="m-3">
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input" id="dropdownCheck5"
                                            onclick="checkAll(this)">
                                        <label class="form-check-label" for="dropdownCheck5">
                                            All
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input status-checkbox"
                                            id="dropdownCheck6">
                                        <label class="form-check-label" for="dropdownCheck6">
                                            Residential
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input status-checkbox"
                                            id="dropdownCheck7">
                                        <label class="form-check-label" for="dropdownCheck7">
                                            Commercial
                                        </label>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="inn_loc">
                        <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false" data-bs-auto-close="outside">
                                Price
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
                            </button>
                            <form class="dropdown-menu">
                                <div class="m-3">
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input" id="dropdownCheck8">
                                        <label class="form-check-label" for="dropdownCheck8">
                                            Low to high
                                        </label>
                                    </div>
                                    <div class="form-check my-2">
                                        <input type="checkbox" class="form-check-input" id="dropdownCheck9">
                                        <label class="form-check-label" for="dropdownCheck9">
                                            How to low
                                        </label>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="all_products">
                    <div class="row">
                        <div class="col-md-4">
                            <p>1 ALL PRODUCTS</p>
                        </div>
                        <div class="col-md-2 checks">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="dropdownCheck5">
                                <label class="form-check-label" for="dropdownCheck5">
                                    Select All
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <a href="" class="del">
                                <img loading="lazy" src="../assets/images/del_icon.svg" alt="del_icon">
                                <span>Delete</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="showing_in">
                    <label for="">Showing in:</label>
                    <span>ALL
                        <a href=""><img loading="lazy" src="../assets/images/cross_blue.svg" alt="cross_blue"></a>
                    </span>
                    <span>Residential
                        <a href=""><img loading="lazy" src="../assets/images/cross_blue.svg" alt="cross_blue"></a>
                    </span>
                    <span>Low to high
                        <a href=""><img loading="lazy" src="../assets/images/cross_blue.svg" alt="cross_blue"></a>
                    </span>
                </div>
                <div class="bhk_flat">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="4bhk">
                                <label class="form-check-label" for="4bhk">
                                    4 BHK Flat/Apartment for Sale in S A Sheeba Apartment, Andheri West,Western Mumbai
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4 three_btn">
                            <a href="" class="common_btn active">Preview</a>
                            <div class="edit_del">
                                <a href="">
                                    <img loading="lazy" src="../assets/images/edit_btn.svg" alt="edit_btn">
                                </a>
                                <a href="">
                                    <img loading="lazy" src="../assets/images/del_btn.png" alt="del_btn">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="price_lac">
                        <p> <span>Price:</span> Rs10 Lac <span> | Super built-up Area:</span> 1500 sq.ft</p>
                        <div class="two_box">
                            <div class="inn_box">
                                <p>k73796734 :</p>
                                <p>Underscreening</p>
                                <p><span>Expiry On: </span> 21 Apr 2024</p>
                            </div>
                            <div class="inn_box">
                                <p><span>Posted On: </span> 20 Feb 2024</p>
                                <div class="progress_value">
                                    <div class="progress" role="progressbar" aria-label="Basic example"
                                        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                        <div class="progress-bar" style="width: 85%"></div>
                                    </div>
                                    <div>85 % Complete</div>
                                </div>
                                <p><span>Verification Requested</span></p>
                            </div>
                        </div>
                        <p><span>Summary view: 0 Details view: 0</span></p>
                        <div class="view_resp">
                            <a href="#">View 2 Responses</a>
                            <div><a href="#">Get Verified </a><span> (28 days remaining)</span></div>
                        </div>
                    </div>
                </div>
                <div class="bhk_flat">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="4bhk">
                                <label class="form-check-label" for="4bhk">
                                    4 BHK Flat/Apartment for Sale in S A Sheeba Apartment, Andheri West,Western Mumbai
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4 three_btn">
                            <a href="" class="common_btn active">Preview</a>
                            <div class="edit_del">
                                <a href="">
                                    <img loading="lazy" src="../assets/images/edit_btn.svg" alt="edit_btn">
                                </a>
                                <a href="">
                                    <img loading="lazy" src="../assets/images/del_btn.png" alt="del_btn">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="price_lac">
                        <p> <span>Price:</span> Rs10 Lac <span> | Super built-up Area:</span> 1500 sq.ft</p>
                        <div class="two_box">
                            <div class="inn_box">
                                <p>k73796734 :</p>
                                <p>Underscreening</p>
                                <p><span>Expiry On: </span> 21 Apr 2024</p>
                            </div>
                            <div class="inn_box">
                                <p><span>Posted On: </span> 20 Feb 2024</p>
                                <div class="progress_value">
                                    <div class="progress" role="progressbar" aria-label="Basic example"
                                        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                        <div class="progress-bar" style="width: 85%"></div>
                                    </div>
                                    <div>85 % Complete</div>
                                </div>
                                <p><span>Verification Requested</span></p>
                            </div>
                        </div>
                        <p><span>Summary view: 0 Details view: 0</span></p>
                        <div class="view_resp">
                            <a href="#">View 2 Responses</a>
                            <div><a href="#">Get Verified </a><span> (28 days remaining)</span></div>
                        </div>
                    </div>
                </div>
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end">
                        <li class="page-item disabled">
                            <a class="page-link">Previous</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
 </div>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/property-listings.php
+++ b/ipa-agent/pages/property-listings.php
@@ -0,0 +1,614 @@
 <?php $currentPage = "property-listing" ?>
 <?php include('../components/header.php') ?>
 <div class="main_content">
    <div class="row">
        <div class="col-md-3">
            <?php include('../components/sidebar.php') ?>
        </div>
        <div class="col-md-9">
            <div class="inner_contents">
                <h2 class="main-head">Property Listing</h2>
                <div class="step-box other_step_box">
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <button class="nav-link active" id="nav-step1-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-step1" type="button" role="tab" aria-controls="nav-step1"
                            aria-selected="true">
                            <span class="num">1</span>
                            <span class="num_data">Basic details</span>
                        </button>
                        <button class="nav-link" id="nav-step2-tab" data-bs-toggle="tab" data-bs-target="#nav-step2"
                            type="button" role="tab" aria-controls="nav-step2" aria-selected="false">
                            <span class="num">2</span>
                            <span class="num_data">Location details</span>
                        </button>
                        <button class="nav-link" id="nav-step3-tab" data-bs-toggle="tab" data-bs-target="#nav-step3"
                            type="button" role="tab" aria-controls="nav-step3" aria-selected="false">
                            <span class="num">3</span>
                            <span class="num_data">Property profile</span>
                        </button>
                        <button class="nav-link" id="nav-step4-tab" data-bs-toggle="tab" data-bs-target="#nav-step4"
                            type="button" role="tab" aria-controls="nav-step4" aria-selected="false">
                            <span class="num">4</span>
                            <span class="num_data">Videos & Photos</span>
                        </button>
                        <button class="nav-link" id="nav-step5-tab" data-bs-toggle="tab" data-bs-target="#nav-step5"
                            type="button" role="tab" aria-controls="nav-step5" aria-selected="false">
                            <span class="num">5</span>
                            <span class="num_data">Pricing & others</span>
                        </button>
                        <button class="nav-link last_child" id="nav-step6-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-step6" type="button" role="tab" aria-controls="nav-step6"
                            aria-selected="false">
                            <span class="num">6</span>
                            <span class="num_data">Amenities</span>
                        </button>
                    </div>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-step1" role="tabpanel"
                            aria-labelledby="nav-step1-tab" tabindex="0">
                            <h3>I’m Looking to </h3>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">Sell</button>
                                <button type="button" class="btn-primary">Rent</button>
                            </div>
                            <h3>What kind of property do you have?</h3>
                            <div class="mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault"
                                        id="flexRadioDefault1">
                                    <label class="form-check-label" for="flexRadioDefault1">
                                        Residential
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="flexRadioDefault"
                                        id="flexRadioDefault2" checked>
                                    <label class="form-check-label" for="flexRadioDefault2">
                                        Commercial
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3 btns_div">
                                <button type="button" class="active btn-primary">Flat/Apartment</button>
                                <button type="button" class="btn-primary">Independent house / villa</button>
                            </div>
                            <div class="next-btn">
                                <button type="button" class="yellow-btn next-step" id="step1-next">Continue</button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-step2" role="tabpanel" aria-labelledby="nav-step2-tab"
                            tabindex="0">
                            <h3 class="mb-4">Where is your property located ? </h3>
                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">City</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">Locality</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">Sub locality ( Optional )</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label class="form-label">Apartment/society</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="next-btn">
                                    <button type="button" class="yellow-btn next-step" id="step2-next">Continue</button>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-step3" role="tabpanel" aria-labelledby="nav-step3-tab"
                            tabindex="0">
                            <h3 class="mb-3">Tell us about your property ?</h3>
                            <h4>Your apartment is a</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">1 BHK</button>
                                <button type="button" class="btn-primary">2 BHK</button>
                                <button type="button" class="btn-primary">3 BHK</button>
                                <button type="button" class="btn-primary">Other</button>
                            </div>
                            <div class="mb-4">
                                <h3>Add room details</h3>
                                <div class="row">
                                    <h4>No of bedrooms</h4>
                                    <div class="col-md-6 mb-4 btns_div">
                                        <button type="button" class="active btn-primary">1</button>
                                        <button type="button" class="btn-primary">2</button>
                                        <button type="button" class="btn-primary">3</button>
                                        <button type="button" class="btn-primary">4</button>
                                        <button type="button" class="btn-primary">5</button>
                                    </div>
                                    <h4>No of bedrooms</h4>
                                    <div class="col-md-6 mb-4 btns_div">
                                        <button type="button" class="active btn-primary">1</button>
                                        <button type="button" class="btn-primary">2</button>
                                        <button type="button" class="btn-primary">3</button>
                                        <button type="button" class="btn-primary">4</button>
                                        <button type="button" class="btn-primary">5</button>
                                    </div>
                                    <h4>Balconies</h4>
                                    <div class="col-md-6 btns_div">
                                        <button type="button" class="active btn-primary">1</button>
                                        <button type="button" class="btn-primary">2</button>
                                        <button type="button" class="btn-primary">3</button>
                                        <button type="button" class="btn-primary">4</button>
                                        <button type="button" class="btn-primary">5</button>
                                    </div>
                                </div>
                            </div>
                            <h3>Add room details</h3>
                            <h4>Atleast one area type is mandatory</h4>
                            <div class="mb-4 col-md-5">
                                <select class="form-select form-select-md mb-3" aria-label="Large select example">
                                    <option selected>Carpet area</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <h4>Other rooms</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="btn-primary"><i class="bi bi-plus-lg me-1"></i> Pooja
                                    room</button>
                                <button type="button" class="btn-primary"><i class="bi bi-plus-lg me-1"></i> Study
                                    room</button>
                                <button type="button" class="btn-primary"><i class="bi bi-plus-lg me-1"></i>
                                    Servant room</button>
                                <button type="button" class="btn-primary"><i class="bi bi-plus-lg me-1"></i> Store
                                    room</button>
                            </div>
                            <h4>Reserved parking</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="btn-primary">Furnishing</button>
                                <button type="button" class="btn-primary">Semi - furnished</button>
                                <button type="button" class="btn-primary">Un - furnished</button>
                            </div>
                            <h4>Furnishing</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="btn-primary">Furnishing</button>
                                <button type="button" class="btn-primary">Semi - furnished</button>
                                <button type="button" class="btn-primary">Un - furnished</button>
                            </div>
                            <h4>Reserved parking</h4>
                            <div class="mb-4">
                                <div class="d-flex align-items-center mb-3">
                                    <p class="mb-0 me-3">Covered parking</p>
                                    <div class="d-flex count-num align-items-center">
                                        <div class="button" id="decrementBtn"><i class="bi bi-dash-lg"></i></div>
                                        <div class="counter" id="counter">0</div>
                                        <div class="button" id="incrementBtn"><i class="bi bi-plus-lg"></i></div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <p class="mb-0 me-3">Open parking</p>
                                    <div class="d-flex count-num align-items-center">
                                        <div class="button" id="decrementBtn"><i class="bi bi-dash-lg"></i></div>
                                        <div class="counter" id="counter">0</div>
                                        <div class="button" id="incrementBtn"><i class="bi bi-plus-lg"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4 col-md-7">
                                <h3>Floor details</h3>
                                <h4>Total no of floors and your floor details</h4>
                                <div class="btns_div">
                                    <div class="w-100">
                                        <input type="password" class="form-control" placeholder="Total floors">
                                    </div>
                                    <select class="form-select form-select-md"
                                        aria-label="Large select example">
                                        <option selected>Property on floors</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                            <h3>Availability status</h3>
                            <div class="mb-4 btns_div">
                                <button type="button" class="btn-primary">Ready to move</button>
                                <button type="button" class="btn-primary">Under construction</button>
                            </div>
                            <h3>Age of property</h3>
                            <div class="mb-4 btns_div">
                                <button type="button" class="btn-primary">0-1 Years</button>
                                <button type="button" class="btn-primary">1-5 Years</button>
                                <button type="button" class="btn-primary">5-10 Years</button>
                                <button type="button" class="btn-primary">10+ Years</button>
                            </div>
                            <div class="mb-4">
                                <h3>Possesion by</h3>
                                <select class="w-50 form-select form-select-md mb-3" aria-label="Large select example">
                                    <option selected>Expected by</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <!-- <button type="button" class="btn btn-primary prev-step">Previous</button> -->
                            <div class="next-btn">
                                <button type="button" class="yellow-btn next-step" id="step3-next">Continue</button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-step4" role="tabpanel" aria-labelledby="nav-step4-tab"
                            tabindex="0">
                            <h3 class="mb-4">Add one video of property</h3>
                            <div class="video-upload mb-4">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item w-50" role="presentation">
                                        <button class="nav-link w-100 active" id="video-tab" data-bs-toggle="tab"
                                            data-bs-target="#video-tab-pane" type="button" role="tab"
                                            aria-controls="video-tab-pane" aria-selected="true">Upload video</button>
                                    </li>
                                    <li class="nav-item w-50 " role="presentation">
                                        <button class="nav-link w-100" id="youtube-tab" data-bs-toggle="tab"
                                            data-bs-target="#youtube-tab-pane" type="button" role="tab"
                                            aria-controls="youtube-tab-pane" aria-selected="false">Youtube
                                            video</button>
                                    </li>
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="video-tab-pane" role="tabpanel"
                                        aria-labelledby="video-tab" tabindex="0">
                                        <div class="image-box">
                                            <p>Drag or upload your videos here</p>
                                            <button type="button" class="active btn-primary me-2"
                                                id="upload-container2">
                                                Upload
                                                <input type="file" id="file-input2" accept="video/*">
                                            </button>
                                            <div id="preview2"></div>
                                        </div>
                                        <div class="image-upload">
                                            <h3 class="mx-4">Add images of your property</h3>
                                            <div class="image-box">
                                                <p>Drag or upload your images here</p>
                                                <button type="button" class="active btn-primary me-2"
                                                    id="upload-container">
                                                    Upload
                                                    <input type="file" id="file-input" accept="image/*">
                                                </button>
                                                <div id="preview"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="youtube-tab-pane" role="tabpanel"
                                        aria-labelledby="youtube-tab" tabindex="0">
                                        <div class="d-flex justify-content-between align-items-center mx-3 mt-3 mb-4">
                                            <h3 class="mb-0">Enter Url</h3>
                                            <span><i class="bi bi-trash"></i></span>
                                        </div>
                                        <div class="youtube-box">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    https://designreset.com/cork-admin/designreset.com/cork-admin/
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    https://designreset.com/cork-admin/designreset.com/cork-admin/
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    https://designreset.com/cork-admin/designreset.com/cork-admin/
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    https://designreset.com/cork-admin/designreset.com/cork-admin/
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value=""
                                                    id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    https://designreset.com/cork-admin/designreset.com/cork-admin/
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <button type="button" class="btn btn-primary prev-step">Previous</button> -->
                            <div class="next-btn">
                                <button type="button" class="yellow-btn next-step" id="step4-next">Continue without
                                    photos</button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-step5" role="tabpanel" aria-labelledby="nav-step5-tab"
                            tabindex="0">
                            <h3 class="mb-4">Add pricing and details</h3>
                            <h4>Ownership </h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">Freehold</button>
                                <button type="button" class="btn-primary">Leasehold</button>
                                <button type="button" class="btn-primary">Co-operative society</button>
                                <button type="button" class="btn-primary">Power of attorney</button>
                            </div>
                            <div class="mb-3">
                                <h4>Price details </h4>
                                <div class="row">
                                    <div class="mb-3 col-md-6">
                                        <input type="text" class="form-control">
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="d-flex mb-3">
                                    <div class="form-check  me-5">
                                        <input class="form-check-input" type="checkbox" value="" id="Price1">
                                        <label class="form-check-label colour-gray" for="Price1">
                                            All inclusive price
                                        </label>
                                    </div>
                                    <div class="form-check me-3">
                                        <input class="form-check-input" type="checkbox" value="" id="Price2">
                                        <label class="form-check-label colour-gray" for="Price2">
                                            Tax & Govt charges excluded
                                        </label>
                                    </div>
                                    <div class="form-check me-3">
                                        <input class="form-check-input" type="checkbox" value="" id="Price3">
                                        <label class="form-check-label colour-gray" for="Price3">
                                            Price negotiable
                                        </label>
                                    </div>
                                </div>
                                <p><i class="bi bi-plus-lg me-2"></i> Add more pricing details</p>
                            </div>
                            <div class="mb-4">
                                <h3>Do you charge brokerage ?</h3>
                                <div class="d-flex mb-3">
                                    <div class="form-check me-5">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault"
                                            id="flexRadioDefault1">
                                        <label class="form-check-label" for="flexRadioDefault1">
                                            Yes
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault"
                                            id="flexRadioDefault2" checked>
                                        <label class="form-check-label" for="flexRadioDefault2">
                                            No
                                        </label>
                                    </div>
                                </div>
                                <div class="btns_div">
                                    <button type="button" class="active btn-primary me-2">Fixed</button>
                                    <button type="button" class="btn-primary me-2">Percentage of price</button>
                                </div>
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label">Enter brokerage here</label>
                                <input type="email" class="form-control mb-3">
                                <div class="form-check  me-3">
                                    <input class="form-check-input" type="checkbox" value="" id="brokerage">
                                    <label class="form-check-label colour-gray" for="brokerage">
                                        Brokerage negotiable
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div>
                                    <label class="mb-2">What makes your property unique ?</label>
                                    <textarea class="form-control" id="floatingTextarea2"
                                        style="height: 140px"></textarea>
                                </div>
                            </div>
                            <!-- <button type="button" class="btn btn-primary prev-step">Previous</button> -->
                            <div class="next-btn">
                                <button type="button" class="yellow-btn next-step" id="step5-next">Continue</button>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-step6" role="tabpanel" aria-labelledby="nav-step6-tab"
                            tabindex="0">
                            <h3 class="mb-4">Add amenities/unique features </h3>
                            <h4>Ownership </h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">Maintenance staff</button>
                                <button type="button" class="btn-primary">Water storage</button>
                                <button type="button" class="btn-primary">Security/ Fire alarm</button>
                                <button type="button" class="btn-primary">Visitor parking</button>
                                <button type="button" class="btn-primary">Lifts</button>
                                <button type="button" class="btn-primary">Feng shui/vaastu compliant</button>
                                <button type="button" class="btn-primary">Park</button>
                                <button type="button" class="btn-primary">Intercom facility</button>
                            </div>
                            <h4>Property features </h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">High ceiling height</button>
                                <button type="button" class="btn-primary">False ceiling</button>
                                <button type="button" class="btn-primary">Piped-gas</button>
                                <button type="button" class="btn-primary">Internet/wifi connectivity</button>
                                <button type="button" class="btn-primary">Centrally air conditioned</button>
                                <button type="button" class="btn-primary">Water purifier</button>
                                <button type="button" class="btn-primary">Recently renovated</button>
                                <button type="button" class="btn-primary">Private garden / Terrace</button>
                                <button type="button" class="btn-primary">Natural light</button>
                                <button type="button" class="btn-primary">Airy rooms</button>
                                <button type="button" class="btn-primary">Spacious interior</button>
                            </div>
                            <h4>Additional features</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">Separate entry for servants
                                    room</button>
                                <button type="button" class="btn-primary">Waste disposal</button>
                                <button type="button" class="btn-primary">No open drainage around</button>
                                <button type="button" class="btn-primary">Rain water harvesting</button>
                                <button type="button" class="btn-primary">Bank attached property</button>
                                <button type="button" class="btn-primary">Low density society</button>
                            </div>
                            <h4>Water Source</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">Municipal Corporation</button>
                                <button type="button" class="btn-primary">Borewell/Tank</button>
                                <button type="button" class="btn-primary">24*7 Water</button>
                            </div>
                            <h4>Overlooking</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">Pool</button>
                                <button type="button" class="btn-primary">Park/Garden</button>
                                <button type="button" class="btn-primary">Club</button>
                                <button type="button" class="btn-primary">Main road</button>
                                <button type="button" class="btn-primary">Others</button>
                            </div>
                            <div class="mb-4 overloging-chek">
                                <h4 class="mb-2">Overlooking</h4>
                                <div class="row p-2">
                                    <div class="col-md-6 form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="friendly1">
                                        <label class="form-check-label colour-gray" for="friendly1">
                                            In a gated society
                                        </label>
                                    </div>
                                    <div class="col-md-6 form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="friendly2">
                                        <label class="form-check-label colour-gray" for="friendly2">
                                            Corner property
                                        </label>
                                    </div>
                                    <div class="col-md-6 form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="friendly3">
                                        <label class="form-check-label colour-gray" for="friendly3">
                                            Pet friendly
                                        </label>
                                    </div>
                                    <div class="col-md-6 form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="friendly4">
                                        <label class="form-check-label colour-gray" for="friendly4">
                                            Wheelchair friendly
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <h4>Power backup</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">North</button>
                                <button type="button" class="btn-primary">South</button>
                                <button type="button" class="btn-primary">East</button>
                                <button type="button" class="active btn-primary">West</button>
                                <button type="button" class="btn-primary">North - east</button>
                                <button type="button" class="btn-primary">North - west</button>
                                <button type="button" class="btn-primary">South - east</button>
                                <button type="button" class="btn-primary">South - west</button>
                            </div>
                            <div class="mb-4 row gap-3">
                                <div class="col-md-6">
                                    <select class="form-select" aria-label="Default select example">
                                        <option selected>Open this select menu</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <select class="form-select" aria-label="Default select example">
                                        <option selected>Open this select menu</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                            <h4>Location advantages</h4>
                            <div class="mb-4 btns_div">
                                <button type="button" class="active btn-primary">Close to metro station</button>
                                <button type="button" class="btn-primary">Close to school</button>
                                <button type="button" class="btn-primary">Close to hospital</button>
                                <button type="button" class="active btn-primary">Close to market</button>
                                <button type="button" class="btn-primary">Close to railway station</button>
                                <button type="button" class="btn-primary">Close to airport</button>
                                <button type="button" class="btn-primary">Close to mall</button>
                                <button type="button" class="btn-primary">Close to highway</button>
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Add other feature</label>
                                <input type="text" class="form-control">
                            </div>
                            <!-- <button type="button" class="btn btn-primary prev-step">Previous</button> -->
                            <div class="next-btn">
                                <button type="button" class="yellow-btn next-step">Post property</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <?php include('../components/footer-link.php') ?>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
    const step1Next = document.getElementById('step1-next');
    const step2Next = document.getElementById('step2-next');
    const step3Next = document.getElementById('step3-next');
    const step4Next = document.getElementById('step4-next');
    const step5Next = document.getElementById('step5-next');
    step1Next.addEventListener('click', function() {
        const nextTab = new bootstrap.Tab(document.getElementById('nav-step2-tab'));
        nextTab.show();
    });
    step2Next.addEventListener('click', function() {
        const nextTab = new bootstrap.Tab(document.getElementById('nav-step3-tab'));
        nextTab.show();
    });
    step3Next.addEventListener('click', function() {
        const nextTab = new bootstrap.Tab(document.getElementById('nav-step4-tab'));
        nextTab.show();
    });
    step4Next.addEventListener('click', function() {
        const nextTab = new bootstrap.Tab(document.getElementById('nav-step5-tab'));
        nextTab.show();
    });
    step5Next.addEventListener('click', function() {
        const nextTab = new bootstrap.Tab(document.getElementById('nav-step6-tab'));
        nextTab.show();
    });
 });
 </script>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/reset-password.php
+++ b/ipa-agent/pages/reset-password.php
@@ -0,0 +1,34 @@
 <?php include('../components/header.php') ?>
 <seciton class="form_sec">
    <div class="container">
    <a href="forgot-password-otp.php" class="back_btn">
            <img loading="lazy" src="../assets/images/back_btn.svg" alt="back_btn">
        </a>
        <div class="row">
            <div class="col-md-6">
                <img loading="lazy" src="../assets/images/login_img.webp" alt="login_img">
            </div>
            <div class="col-md-6">
                <form>
                    <h2 class="h2_head">Reset password</h2>
                    <div class="label_input">
                        <label for="" class="form-label">New password</label>
                        <input type="password" class="form-control" id="" placeholder="Enter your new password">
                    </div>
                    <div class="label_input">
                        <label for="" class="form-label">Confirm password</label>
                        <input type="password" class="form-control" id="" placeholder="Enter your confirm password">
                    </div>
                    <a href="" class="login_btn">Reset password</a>
                </form>
            </div>
        </div>
    </div>
 </seciton>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/sign-in.php
+++ b/ipa-agent/pages/sign-in.php
@@ -0,0 +1,52 @@
 <?php include('../components/header.php') ?>
 <seciton class="form_sec">
    <div class="container">
        <div class="back_btn">&nbsp;</div>
        <div class="row">
            <div class="col-md-6">
                <img loading="lazy" src="../assets/images/login_img.webp" alt="login_img">
            </div>
            <div class="col-md-6">
                <form>
                    <h2 class="h2_head">Login</h2>
                    <div class="label_input">
                        <label for="" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="" placeholder="Enter your email address">
                    </div>
                    <div class="label_input">
                        <label for="" class="form-label">Password</label>
                        <input type="password" class="form-control" id="" placeholder="Enter your password">
                    </div>
                    <div class="forgot_pass">
                        <a href="forgot-password-email.php">Forgot Password?</a>
                    </div>
                    <a href="index.php" class="login_btn">Login</a>
                    <div class="or">
                        <img loading="lazy" src="../assets/images/ipa_line.svg" alt="ipa_line">
                        <span>OR</span>
                        <img loading="lazy" src="../assets/images/ipa_line.svg" alt="ipa_line">
                    </div>
                    <div class="google">
                        <a href="">
                        <img loading="lazy" src="../assets/images/ipa_google.svg" alt="ipa_google">
                        Login using Google
                        </a>
                    </div>
                    <div class="google">
                        <a href="">
                        <img loading="lazy" src="../assets/images/ipa_facebook.svg" alt="ipa_facebook">
                        Login using Google
                        </a>
                    </div>
                    <p class="regis">New to IPA? <a href="sign-up.php">Register</a></p>
                </form>
            </div>
        </div>
    </div>
 </seciton>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/pages/sign-up.php
+++ b/ipa-agent/pages/sign-up.php
@@ -0,0 +1,74 @@
 <?php include('../components/header.php') ?>
 <seciton class="form_sec">
    <div class="container">
        <a href="sign-in.php" class="back_btn">
            <img loading="lazy" src="../assets/images/back_btn.svg" alt="back_btn">
        </a>
        <div class="row">
            <div class="col-md-6">
                <img loading="lazy" src="../assets/images/login_img.webp" alt="login_img">
            </div>
            <div class="col-md-6">
                <form>
                    <h2 class="h2_head">Create account</h2>
                    <div class="label_input">
                        <label for="" class="form-label">Name</label>
                        <input type="text" class="form-control" id="" placeholder="Enter your name">
                    </div>
                    <div class="row">
                    <div class="col-md-6">
                        <div class="label_input">
                            <label for="" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="" placeholder="Enter your email address">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="label_input">
                            <label for="" class="form-label">Phone number</label>
                            <input type="tel" class="form-control" id="" placeholder="Enter your phone number">
                        </div>
                    </div>
                    </div>
                    <div class="label_input">
                        <label for="" class="form-label">Date of birth</label>
                        <input type="date" class="form-control" id="" placeholder="Enter your date of birth">
                    </div>
                    <div class="label_input">
                        <label for="" class="form-label">Are you a real estate agent ?</label>
                        <div class="inn_check">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                    id="flexRadioDefault1" checked>
                                <label class="form-check-label" for="flexRadioDefault1">
                                    Yes
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                    id="flexRadioDefault2">
                                <label class="form-check-label" for="flexRadioDefault1">
                                    No
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            I Accept the terms & conditions
                        </label>
                    </div>
                    <a href="otp.php" class="login_btn">Continue</a>
                    <p class="regis">Already have an account ? <a href="sign-in.php">Login</a></p>
                </form>
            </div>
        </div>
    </div>
 </seciton>
 <?php include('../components/footer-link.php') ?>
 <?php include('../components/footer.php') ?>
--- a/ipa-agent/scss/layouts/modern-light-menu/light/loader.scss
+++ b/ipa-agent/scss/layouts/modern-light-menu/light/loader.scss
@@ -0,0 +1,33 @@
@import '../../../light/base/base';
 div#load_screen {
  background: rgb(236, 239, 255);
  opacity: 1;
  position: fixed;
  z-index: 999999;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  .loader {
    display: flex;
    justify-content: center;
    height: 100vh;
  }
  .loader-content {
    right: 0;
    align-self: center;
    .spinner-grow {
      width: 2.5rem;
      height: 2.5rem
    }
  }
 }
 .spinner-grow {
  color: #304aca;
 }
--- a/ipa-agent/scss/layouts/modern-light-menu/light/structure.scss
+++ b/ipa-agent/scss/layouts/modern-light-menu/light/structure.scss
--- a/ipa-agent/scss/light/assets/apps/blog-create.scss
+++ b/ipa-agent/scss/light/assets/apps/blog-create.scss
@@ -0,0 +1,32 @@
@import '../../base/base';
 .blog-create-section {
  border-radius: 8px;
  border: 1px solid #e0e6ed;
 }
 .ql-toolbar.ql-snow {
  border-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #bfc9d4;
  + .ql-container.ql-snow {
    margin-top: 0;
    padding: 13px 0;
    border: 1px solid #bfc9d4;
    border-top: none;
    border-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #fff;
    height: 280px;
  }
 }
 .multiple-file-upload .filepond {
  margin: 0;
 }
 .tagify {
  border: 1px solid #bfc9d4;
 }
--- a/ipa-agent/scss/light/assets/apps/blog-post.scss
+++ b/ipa-agent/scss/light/assets/apps/blog-post.scss
@@ -0,0 +1,197 @@
@import '../../base/base';
 .single-post-content {
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid #e0e6ed;
    padding: 32px;
  }
  .featured-image {
    position: relative;
    background: lightblue url("../../../img/lightbox-2.jpeg") no-repeat fixed center;
    height: 650px;
    background-position: center;
    background-size: cover;
    background-attachment: inherit;
    border-radius: 20px;
    overflow: hidden;
    .featured-image-overlay {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 0;
      background-color: rgba(22, 28, 36, 0.72);
    }
    .post-header {
      max-width: 1152px;
      margin: 0 auto;
    }
    .post-info {
      position: relative;
      height: 100%;
    }
    .post-title {
      padding: 48px;
      width: 100%;
      position: absolute;
      top: 0;
      max-width: 1152px;
      margin: 0 auto;
      left: 0;
      right: 0;
      h1 {
        font-weight: 700;
        letter-spacing: 2px;
        color: #e0e6ed;
      }
    }
    .post-meta-info {
      padding: 48px;
      width: 100%;
      position: absolute;
      bottom: 0;
      max-width: 1152px;
      margin: 0 auto;
      left: 0;
      right: 0;
      .media {
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 12px;
        }
        .media-body {
          align-self: center;
          h5 {
            color: #fff;
          }
          p {
            color: #e0e6ed;
          }
        }
      }
      .btn-share {
        padding: 7.5px 9px;
      }
    }
  }
  .post-content {
    margin: 0 auto;
    padding: 48px 0;
    padding-bottom: 0;
    p {
      font-size: 15px;
      font-weight: 100;
      color: $dark;
    }
    img {
      border-radius: 8px;
    }
    .full-width {
      width: 100%;
    }
  }
  .post-info {
    padding-top: 15px;
    .comment-count {
      font-size: 17px;
      font-weight: 100;
      vertical-align: super;
      color: #888ea8;
      letter-spacing: 2px;
    }
  }
  .post-comments .media {
    position: relative;
    &.primary-comment {
      border-bottom: 1px solid #e0e6ed;
      &:hover .btn-reply {
        display: block;
      }
    }
    img {
      border-radius: 15px;
      border: none;
    }
    .media-heading {
      color: $dark;
      font-size: 16px;
      letter-spacing: 1px;
      font-weight: 700;
    }
    .media-info {
      color: #888ea8;
    }
    .media-body .media-text {
      color: #515365;
      font-size: 15px;
    }
    .btn-reply {
      position: absolute;
      top: 0;
      right: 0;
      display: none;
    }
  }
  @media (max-width: 991px) {
    .featured-image {
      height: 350px;
      .post-title, .post-meta-info {
        padding: 24px 26px;
      }
    }
    .post-content, .post-info {
      padding: 24px 26px;
    }
    .post-content {
      padding-bottom: 0;
    }
  }
  @media (max-width: 767px) {
    .post-comments .media:not(.primary-comment) {
      margin-left: -73px;
    }
  }
  @media (max-width: 575px) {
    .post-comments .media {
      display: block;
      &:not(.primary-comment) {
        margin-left: auto;
      }
      .media-body {
        margin-top: 25px;
      }
    }
  }
--- a/ipa-agent/scss/light/assets/apps/chat.scss
+++ b/ipa-agent/scss/light/assets/apps/chat.scss
@@ -0,0 +1,963 @@
@import '../../base/base';
 .layout-px-spacing {
  min-height: calc(100vh - 142px) !important;
 }
 .wrapper {
  position: relative;
  left: 50%;
  width: 1000px;
  height: 600px;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
 }
 .chat-system {
  display: flex;
  height: calc(100vh - 104px);
  height: calc(100vh - 158px);
  box-shadow: none;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  .hamburger {
    display: none;
  }
  .user-list-box {
    width: 30%;
    max-width: 400px;
    border-right: 1px solid #e0e6ed;
    border-bottom-left-radius: 8px;
    background: #fff;
    border-top-left-radius: 8px;
    .search {
      position: relative;
      padding: 13px 0 13px 0;
      display: flex;
      svg {
        content: "\f169";
        position: absolute;
        left: 11px;
        color: $l-dark;
        top: 25px;
        left: 30px;
      }
    }
    input {
      border-radius: 4px;
      padding-left: 38px;
      font-size: 16px;
      width: 100%;
      color: $primary;
      border: 0;
      outline: none;
      padding: 12px 16px 12px 20px;
      background: #fff;
      margin: 0 20px 0 20px;
      border: 1px dashed #bfc9d4;
      box-shadow: none;
      &::placeholder {
        color: #bfc9d4;
      }
    }
    .people {
      padding: 0;
      overflow: auto;
      position: relative;
      margin: auto;
      width: 100%;
      overflow: auto;
      height: calc(100vh - 238px);
      .person {
        position: relative;
        width: 100%;
        padding: 20px 20px;
        cursor: pointer;
        border-bottom: 1px solid #e0e6ed;
        &.border-none {
          border-bottom: none;
        }
      }
    }
  }
 }
 .person {
  display: inline-block;
 }
 .chat-system {
  .user-list-box .people .person {
    .user-info {
      display: flex;
      .f-head img {
        width: 45px;
        height: 45px;
        margin-right: 12px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid #bfc9d4;
      }
      .f-body {
        width: 100%;
        .meta-info {
          .user-name {
            font-size: 14px;
            color: $dark;
            font-weight: 700;
          }
          .user-meta-time {
            font-size: 12px;
            position: absolute;
            top: 16px;
            right: 11px;
            color: #888ea8;
            font-weight: 700;
            float: right;
          }
        }
        .preview {
          font-size: 13px;
          display: inline-block;
          overflow: hidden !important;
          width: 70%;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #888ea8;
          font-weight: 600;
        }
      }
    }
    &:hover .user-info .f-body .meta-info {
      .user-name, .user-meta-time {
        color: $primary;
      }
    }
    &.active:after, &:hover:after {
      display: none;
    }
  }
  .chat-box {
    position: relative;
    width: 100%;
    height: 616px;
    background-image: url(../../../img/bg.png);
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    height: calc(100vh - 158px);
    .chat-not-selected {
      display: flex;
      height: 100%;
      justify-content: center;
      p {
        align-self: center;
        font-size: 18px;
        color: #e0e6ed;
        margin-bottom: 0;
        font-weight: 600;
        background: #0e1726;
        padding: 7px 20px;
        border-radius: 8px;
        -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        svg {
          vertical-align: middle;
          color: #888ea8;
        }
      }
    }
    .overlay-phone-call {
      &.phone-call-show {
        opacity: 1;
        z-index: 4;
      }
      display: none;
      position: absolute;
      width: 100%;
      height: calc(100vh - 104px);
      z-index: -1;
      opacity: 0;
      transition: all 0.4s ease-in-out;
      background-color: rgb(3 3 5 / 66%);
      background-attachment: fixed;
      background-size: contain;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      > div {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        .calling-user-info {
          padding: 20px 16px;
          svg {
            font-size: 28px;
            margin-right: 12px;
            color: #fff;
            vertical-align: middle;
            cursor: pointer;
          }
          .user-name {
            font-size: 20px;
            color: #fff;
            vertical-align: middle;
            margin-right: 8px;
          }
          .call-status {
            vertical-align: sub;
            color: #fff;
            font-size: 10px;
            font-weight: 600;
          }
        }
        .calling-user-img {
          text-align: center;
          img {
            border-radius: 50%;
            border: 4px solid #ebedf2;
          }
          .timer {
            visibility: hidden;
            font-size: 16px;
            font-weight: 600;
            margin-top: 7px;
            color: #fff;
            .minutes, .seconds {
              color: #ffffff;
            }
          }
        }
        .calling-options {
          text-align: center;
          svg {
            font-size: 25px;
            border-radius: 50%;
            padding: 11px;
            background: rgb(21 21 22 / 28%);
            margin-bottom: 23px;
            color: #fff;
            cursor: pointer;
            width: 48px;
            height: 46px;
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
            box-shadow: 0px 0px 20px rgb(0 0 0 / 67%);
            &:hover {
              -webkit-transform: translateY(-5px) scale(1.02);
              transform: translateY(-5px) scale(1.02);
            }
            &:not(:last-child) {
              margin-right: 7px;
            }
            &.switch-to-microphone {
              position: relative;
              &.micro-off:after {
                content: '';
                height: 35px;
                width: 2px;
                background: #fff;
                position: absolute;
                left: 20px;
                top: 6px;
              }
            }
            &.cancel-call {
              background-color: $danger;
            }
          }
        }
      }
    }
    .overlay-video-call {
      &.video-call-show {
        opacity: 1;
        z-index: 4;
      }
      display: none;
      position: absolute;
      width: 100%;
      height: calc(100vh - 104px);
      z-index: -1;
      opacity: 0;
      transition: all 0.4s ease-in-out;
      background-color: rgb(3 3 5 / 66%);
      background-attachment: fixed;
      background-size: contain;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      &.onConnect {
        background-image: url(../../../assets/img/video-chat-2.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        background-attachment: unset;
      }
      .video-caller {
        position: absolute;
        height: 112px;
        width: 173px;
        bottom: 8px;
        right: 8px;
      }
      > div {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        .calling-user-info {
          padding: 20px 16px;
          svg {
            font-size: 28px;
            margin-right: 12px;
            color: #fff;
            cursor: pointer;
          }
          .user-name {
            font-size: 20px;
            color: #fff;
            margin-right: 8px;
          }
          .call-status {
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            margin-top: 10px;
          }
          .timer {
            visibility: hidden;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            .minutes, .seconds {
              margin-bottom: 0;
              color: #ffffff;
            }
          }
        }
        .calling-user-img {
          text-align: center;
          img {
            border-radius: 50%;
            border: 4px solid #ebedf2;
          }
        }
        .calling-options {
          text-align: center;
          svg {
            font-size: 25px;
            border-radius: 50%;
            padding: 11px;
            background: rgb(21, 21, 22, 0.56);
            margin-bottom: 23px;
            color: #fff;
            cursor: pointer;
            width: 48px;
            height: 46px;
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.67);
            &:hover {
              -webkit-transform: translateY(-5px) scale(1.02);
              transform: translateY(-5px) scale(1.02);
            }
            &:not(:last-child) {
              margin-right: 7px;
            }
            &.switch-to-phone-call {}
            &.switch-to-microphone {
              position: relative;
              &.micro-off:after {
                content: '';
                height: 35px;
                width: 2px;
                background: #fff;
                position: absolute;
                transform: rotate(46deg);
                left: 20px;
                top: 6px;
              }
            }
            &.add-more-caller {}
            &.cancel-call {
              background-color: $danger;
              &:hover {}
            }
          }
        }
      }
    }
    .chat-box-inner {
      height: auto;
      .chat-meta-user {
        display: none;
        &.chat-active {
          display: flex;
          width: 100%;
          justify-content: space-between;
          background-color: #fff;
          border-top-right-radius: 8px;
          box-shadow: none;
        }
        .current-chat-user-name {
          padding: 14px 15px 15px 15px;
          span {
            font-size: 15px;
            color: #888ea8;
            img {
              width: 45px;
              height: 45px;
              border-radius: 7px;
              border-radius: 10px;
              margin-top: 0px;
              -webkit-transition: all 0.35s ease;
              transition: all 0.35s ease;
              margin-right: 10px;
            }
            .name {
              color: $dark;
              font-weight: 600;
            }
          }
        }
        &.chat-active .chat-action-btn {
          svg {
            cursor: pointer;
            color: #888ea8;
            margin-right: 6px;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            fill: rgba(0, 23, 55, 0.08);
            &:hover {
              color: $primary;
              fill: rgb(27 85 226 / 10%);
            }
            &:not(:last-child) {
              margin-right: 9px;
            }
          }
          .dropdown-menu {
            top: 15px !important;
            padding: 10px;
            background: #fff;
            color: $primary;
            fill: rgb(27 85 226 / 10%);;
            border-width: initial;
            border-style: none;
            border-color: initial;
            border-image: initial;
            border: 1px solid #e0e6ed;
            &.show {
              top: 35px !important;
            }
            a {
              font-size: 12px;
              font-weight: 700;
              color: #888ea8;
              padding: 11px 8px;
              &:hover {
                background-color: transparent;
                color: $primary;
              }
              svg {
                color: #888ea8;
                margin-right: 6px;
                vertical-align: middle;
                width: 20px;
                height: 20px;
                fill: rgba(0, 23, 55, 0.08);
              }
              &.dropdown-item {
                &.active, &:active {
                  background-color: transparent;
                }
              }
              &:hover svg {
                color: $primary;
                fill: none;
              }
            }
          }
        }
      }
      .chat-conversation-box {
        position: relative;
        margin: auto;
        width: 100%;
        height: calc(100% - 138px);
        overflow: auto;
        .chat-conversation-box-scroll {}
        .chat {
          position: relative;
          display: none;
          overflow: hidden;
          padding: 30px 40px 0;
          -webkit-justify-content: flex-end;
          justify-content: flex-end;
          -webkit-flex-direction: column;
          flex-direction: column;
          &.active-chat {
            display: block;
            display: -webkit-flex;
            display: flex;
            .bubble {
              -moz-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
              -o-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
              -webkit-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
              transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
              &:nth-of-type(1) {
                -moz-animation-duration: 0.15s;
                -webkit-animation-duration: 0.15s;
                animation-duration: 0.15s;
              }
              &:nth-of-type(2) {
                -moz-animation-duration: 0.3s;
                -webkit-animation-duration: 0.3s;
                animation-duration: 0.3s;
              }
              &:nth-of-type(3) {
                -moz-animation-duration: 0.45s;
                -webkit-animation-duration: 0.45s;
                animation-duration: 0.45s;
              }
              &:nth-of-type(4) {
                -moz-animation-duration: 0.6s;
                -webkit-animation-duration: 0.6s;
                animation-duration: 0.6s;
              }
              &:nth-of-type(5) {
                -moz-animation-duration: 0.75s;
                -webkit-animation-duration: 0.75s;
                animation-duration: 0.75s;
              }
              &:nth-of-type(6) {
                -moz-animation-duration: 0.9s;
                -webkit-animation-duration: 0.9s;
                animation-duration: 0.9s;
              }
              &:nth-of-type(7) {
                -moz-animation-duration: 1.05s;
                -webkit-animation-duration: 1.05s;
                animation-duration: 1.05s;
              }
              &:nth-of-type(8) {
                -moz-animation-duration: 1.2s;
                -webkit-animation-duration: 1.2s;
                animation-duration: 1.2s;
              }
              &:nth-of-type(9) {
                -moz-animation-duration: 1.35s;
                -webkit-animation-duration: 1.35s;
                animation-duration: 1.35s;
              }
              &:nth-of-type(10) {
                -moz-animation-duration: 1.5s;
                -webkit-animation-duration: 1.5s;
                animation-duration: 1.5s;
              }
            }
          }
        }
      }
    }
    .chat-footer {
      display: none;
      &.chat-active {
        display: block;
        padding: 6px 10px;
        background: #fff;
        border-bottom-right-radius: 8px;
        border: 1px solid #e0e6ed;
        border-left: none;
      }
    }
    .chat-form {
      position: relative;
    }
    .chat-input {
      svg {
        position: absolute;
        color: #888ea8;
        left: 11px;
        top: 12px;
        fill: rgba(0, 23, 55, 0.08);
      }
      input {
        font-size: 16px;
        width: 100%;
        color: $primary;
        border: 0;
        outline: none;
        padding: 12px 16px 12px 43px;
        border: 1px dashed #bfc9d4;
        background: #fff;
        box-shadow: none;
      }
    }
    .bubble {
      font-size: 16px;
      position: relative;
      display: inline-block;
      clear: both;
      margin-bottom: 8px;
      padding: 9px 18px;
      vertical-align: top;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      word-break: break-word;
      max-width: 370px;
      &:before {
        position: absolute;
        top: 18px;
        display: block;
        width: 8px;
        height: 6px;
        content: '\00a0';
        -moz-transform: rotate(29deg) skew(-35deg);
        -ms-transform: rotate(29deg) skew(-35deg);
        -webkit-transform: rotate(29deg) skew(-35deg);
        transform: rotate(29deg) skew(-35deg);
      }
      &.you {
        float: left;
        color: #0e1726;
        background-color: #fff;
        -webkit-align-self: flex-start;
        align-self: flex-start;
        -moz-animation-name: slideFromLeft;
        -webkit-animation-name: slideFromLeft;
        animation-name: slideFromLeft;
        -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        &:before {
          left: -3px;
          background-color: #fff;
        }
      }
      &.me {
        float: right;
        color: #fff;
        background-color: $primary;
        -webkit-align-self: flex-end;
        align-self: flex-end;
        -moz-animation-name: slideFromRight;
        -webkit-animation-name: slideFromRight;
        animation-name: slideFromRight;
        -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        &:before {
          right: -3px;
          background-color: $primary;
        }
      }
    }
    .conversation-start {
      position: relative;
      width: 100%;
      margin-bottom: 27px;
      text-align: center;
      span {
        font-size: 12px;
        color: #e0e6ed;
        margin-bottom: 0;
        font-weight: 700;
        background: #0e1726;
        padding: 7px 20px;
        border-radius: 8px;
        -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
      }
    }
  }
 }
@keyframes slideFromLeft {
  0% {
    margin-left: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    margin-left: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
 }
@-webkit-keyframes slideFromLeft {
  0% {
    margin-left: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    margin-left: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
 }
@keyframes slideFromRight {
  0% {
    margin-right: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    margin-right: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
 }
@-webkit-keyframes slideFromRight {
  0% {
    margin-right: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    margin-right: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
 }
 .credits {
  color: white;
  font-size: 11px;
  position: absolute;
  bottom: 10px;
  right: 15px;
  a {
    color: white;
    text-decoration: none;
  }
 }
@media (max-width: 1199px) {
  .chat-system {
    .user-list-box {
      width: 40%;
    }
    .chat-box {
      width: 60%;
      .overlay-video-call .video-caller {
        height: 68px;
        width: 68px;
      }
    }
  }
 }
@media (max-width: 991px) {
  .chat-system .chat-box {
    .overlay-video-call .video-caller {
      height: 67px;
      width: 83px;
    }
    border-radius: 8px;
  }
 }
@media (max-width: 767px) {
  .chat-system {
    .hamburger {
      padding: 7px 10px 7px 10px;
      font-size: 20px;
      border-radius: 0;
      color: #fff;
      align-self: center;
      position: fixed;
      top: 218px;
      right: 9px;
      display: block;
      z-index: 78;
      background-color: #515365;
      border-radius: 50%;
    }
    .user-list-box {
      position: absolute;
      z-index: 40;
      left: -341px;
      width: 255px;
      &.user-list-box-show {
        position: absolute;
        z-index: 34;
        left: 15px;
        border-radius: 0;
      }
    }
    .chat-box {
      width: 100%;
      .overlay-video-call .video-caller {
        height: 75px;
        width: 110px;
      }
    }
  }
 }
@media (max-width: 575px) {
  .chat-system .chat-box {
    .overlay-video-call .video-caller {
      bottom: 83px;
    }
    .conversation-start span {
      &:before, &:after {
        background-color: transparent;
      }
    }
  }
 }
@-moz-document url-prefix() {
  .chat-system .chat-box {
    .overlay-phone-call, .overlay-video-call {
      background-color: rgb(3, 3, 5);
    }
  }
 }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .chat-system .chat-box {
    .overlay-phone-call {
      background-image: none;
    }
    .overlay-video-call {
      background-image: none;
      &.onConnect {
        background-attachment: local;
      }
    }
  }
 }
--- a/ipa-agent/scss/light/assets/apps/contacts.scss
+++ b/ipa-agent/scss/light/assets/apps/contacts.scss
@@ -0,0 +1,508 @@
@import '../../base/base';
 /*----------Theme checkbox---------*/
 /*
  Filtered List Search
 */
 .filtered-list-search form {
    > div {
      position: relative;
      width: 80%;
      svg {
        position: absolute;
        right: 11px;
        color: $l-dark;
        height: 36px;
        width: 19px;
        top: 5px;
      }
    }
    input {
      background: #fff;
      border: 1px solid #e0e6ed;
      width: 100% !important;
      &:focus {
        border-color: #d3d3d3;
      }
      &::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #888ea8;
      }
      &::-moz-placeholder {
        /* Firefox 19+ */
        color: #888ea8;
      }
      &:-ms-input-placeholder {
        /* IE 10+ */
        color: #888ea8;
      }
      &:-moz-placeholder {
        /* Firefox 18- */
        color: #888ea8;
      }
    }
  }
  .searchable-container {
    .switch {
      text-align: right;
      .view-grid, .view-list {
        padding: 10px;
        background: #fff;
        border-radius: 8px;
        cursor: pointer;
        color: #888ea8;
        // box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        border: 1px solid #e0e6ed;
        width: 43px;
        height: 41px;
        // fill: rgba(0, 23, 55, 0.08);
      }
    }
    #btn-add-contact {
      padding: 9px;
      background: #fff;
      border-radius: 8px;
      cursor: pointer;
      margin-right: 35px;
      // box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
      border: 1px solid #e0e6ed;
      width: 43px;
      height: 41px;
      color: $primary;
      fill: none;
      &:hover {
        color: #888ea8;
        // fill: rgba(0, 23, 55, 0.08);
      }
    }
    .add-contact-box .add-contact-content {
      .contact-name .validation-text, .contact-email .validation-text, .contact-occupation .validation-text, .contact-phone .validation-text, .contact-location .validation-text {
        display: none;
        color: $danger;
        font-weight: 600;
        text-align: left;
        margin-top: 6px;
        font-size: 12px;
        letter-spacing: 1px;
      }
      .contact-name svg, .contact-email svg, .contact-occupation svg, .contact-phone svg, .contact-location svg {
        align-self: center;
        font-size: 19px;
        margin-right: 14px;
        color: $info;
        font-weight: 600;
      }
      .contact-name #c-name::-webkit-input-placeholder, .contact-email #c-email::-webkit-input-placeholder, .contact-occupation #c-occupation::-webkit-input-placeholder, .contact-phone #c-phone::-webkit-input-placeholder, .contact-location #c-location::-webkit-input-placeholder, .contact-name #c-name::-ms-input-placeholder, .contact-email #c-email::-ms-input-placeholder, .contact-occupation #c-occupation::-ms-input-placeholder, .contact-phone #c-phone::-ms-input-placeholder, .contact-location #c-location::-ms-input-placeholder, .contact-name #c-name::-moz-input-placeholder, .contact-email #c-email::-moz-input-placeholder, .contact-occupation #c-occupation::-moz-input-placeholder, .contact-phone #c-phone::-moz-input-placeholder {
        color: $l-dark;
        font-weight: 600;
      }
      .contact-location #c-location {
        &::-moz-input-placeholder {
          color: $l-dark;
          font-weight: 600;
        }
        resize: none;
      }
    }
    .switch {
      .view-grid:hover, .view-list:hover, .active-view {
        color: $primary;
        fill: none;
      }
    }
    .searchable-items.list .items {
      &.items-header-section {
        h4 {
          display: inline-block;
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 0;
          margin-left: 39px;
          color: $dark;
        }
        .n-chk {
          display: inline-block;
        }
      }
      .item-content {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: center;
        align-items: center;
        padding: .75rem .625rem;
        position: relative;
        display: inline-flex;
        min-width: 0;
        word-wrap: break-word;
        justify-content: space-between;
        background: #fff;
        margin-bottom: 8px;
        border-radius: 8px;
        padding: 13px 18px;
        width: 100%;
        min-width: 767px;
        // transition: all 0.35s ease;
        // box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
        border: 1px solid #e0e6ed;
        &:hover {
          // background: #eceffe;
          background: #fafafa;
          .action-btn {
            .edit {
              color: #00ab55;
              fill: #fff;
            }
            .delete {
              color: $danger;
              fill: #fff;
            }
          }
          .user-meta-info .user-name, .user-email p, .user-location p, .user-phone p {
            color: $primary;
          }
        }
      }
      .user-profile {
        display: flex;
      }
      .user-profile img {
        width: 43px;
        height: 43px;
        border-radius: 8px;
        margin-right: 11px;
        margin-left: 18px;
      }
      .user-meta-info {
        .user-name {
          margin-bottom: 0;
          color: $dark;
          font-weight: 600;
          font-size: 15px;
        }
        .user-work {
          margin-bottom: 0;
          color: #506690;
          font-weight: 500;
          font-size: 13px;
        }
      }
      .user-email {
        p {
          margin-bottom: 0;
          color: #506690;
          font-weight: 600;
        }
        .info-title {
          display: none;
        }
      }
      .user-location {
        p {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 0;
        }
        .info-title {
          display: none;
        }
      }
      .user-phone {
        p {
          margin-bottom: 0;
          color: #506690;
          font-weight: 600;
          font-size: 13px;
        }
        .info-title {
          display: none;
        }
      }
      .action-btn {
        font-weight: 600;
        color: $l-dark;
        .delete-multiple {
          margin-right: 5px;
          cursor: pointer;
          color: $danger;
          width: 20px;
          fill: none;
          &:hover {
            color: $danger;
          }
        }
        .edit, .delete {
          margin-right: 5px;
          cursor: pointer;
          color: #888ea8;
          width: 20px;
          fill: rgb(136 142 168 / 9%);
        }
      }
    }
  }
  .searchable-items.grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .searchable-container .searchable-items.grid .items {
    margin-bottom: 30px;
    border-radius: 6px;
    width: 100%;
    color: #0e1726;
    // transition: all 0.35s ease;
    width: 33%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    .item-content {
      background-color: #fff;
      border: 1px solid #e0e6ed;
      padding: 13px 18px;
      border-radius: 6px;
      &:hover {
        background: #fafafa;
        .action-btn {
          .edit {
            color: #00ab55;
            fill: #fff;
          }
          .delete {
            color: $danger;
            fill: #fff;
          }
        }
        .user-meta-info .user-name, .user-email p, .user-location p, .user-phone p {
          // color: $primary;
        }
      }
    }
    &.items-header-section {
      display: none;
    }
    .user-profile {
      text-align: center;
      margin-top: 20px;
      .n-chk {
        display: none;
      }
      img {
        border-radius: 12px;
      }
    }
    .user-meta-info {
      margin-top: 10px;
      .user-name {
        font-size: 21px;
        font-weight: 600;
        margin-bottom: 0;
        color: #009688;
      }
      .user-work {
        font-weight: 700;
        font-size: 13px;
      }
    }
    .user-email {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      .info-title {
        font-size: 14px;
        font-weight: 600;
        color: $dark;
        margin-bottom: 11px;
      }
      p {
        color: #888ea8;
        font-size: 13px;
        margin-bottom: 11px;
      }
    }
    .user-location {
      .info-title {
        font-size: 14px;
        font-weight: 600;
        color: $dark;
        margin-bottom: 11px;
        margin-right: 10px;
      }
      display: flex;
      justify-content: space-between;
      p {
        color: #888ea8;
        font-size: 13px;
        margin-bottom: 11px;
      }
    }
    .user-phone {
      .info-title {
        font-size: 14px;
        font-weight: 600;
        color: $dark;
        margin-bottom: 11px;
      }
      display: flex;
      justify-content: space-between;
      p {
        color: #888ea8;
        font-size: 13px;
        margin-bottom: 11px;
        margin-right: 0;
      }
    }
    .action-btn {
      font-weight: 600;
      color: $l-dark;
      text-align: center;
      margin: 20px 0;
      .edit, .delete {
        margin-right: 5px;
        cursor: pointer;
        color: #888ea8;
        width: 20px;
        fill: rgba(136, 142, 168, 0.09);
      }
      // .edit:hover, .delete:hover {
      //   color: #009688;
      // }
    }
  }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .new-control.new-checkbox .new-control-indicator {
      top: -13px;
      left: -8px;
    }
  }
  @media (max-width: 1199px) {
    .searchable-container .searchable-items {
      &.list {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      &.grid .items {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }
    }
  }
  @media (max-width: 767px) {
    .searchable-container .searchable-items {
      &.list {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        .items {
          min-width: 767px;
        }
      }
      &.grid .items {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
      }
    }
  }
  @media (max-width: 575px) {
    .searchable-container .searchable-items.grid .items {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
    .filtered-list-search form > div {
      width: 100%;
    }
  }
--- a/ipa-agent/scss/light/assets/apps/ecommerce-create.scss
+++ b/ipa-agent/scss/light/assets/apps/ecommerce-create.scss
@@ -0,0 +1,32 @@
@import '../../base/base';
 .ecommerce-create-section {
  border-radius: 8px;
  border: 1px solid #e0e6ed;
 }
 .ql-toolbar.ql-snow {
  border-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #bfc9d4;
  + .ql-container.ql-snow {
    margin-top: 0;
    padding: 13px 0;
    border: 1px solid #bfc9d4;
    border-top: none;
    border-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #fff;
    height: 280px;
  }
 }
 .multiple-file-upload .filepond {
  margin: 0;
 }
 .tagify {
  border: 1px solid #bfc9d4;
 }
--- a/ipa-agent/scss/light/assets/apps/ecommerce-details.scss
+++ b/ipa-agent/scss/light/assets/apps/ecommerce-details.scss
@@ -0,0 +1,515 @@
@import '../../base/base';
 .widget-content-area {
  border: 1px solid #e0e6ed;
  h1, h2, h3, h4, h5, h6 {
    color: #3b3f5c;
  }
 }
 .swiper-container .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .swiper-pagination {
  bottom: -37px;
  left: 0;
  right: 0;
  .swiper-pagination-bullet {
    margin-right: 5px;
    &.swiper-pagination-bullet-active {
      background-color: #6c4dff;
    }
  }
 }
 /*
    ===============================
        Product Details Content
    ===============================
 */
 #main-slider .splide__track {
  border-radius: 12px;
 }
 .splide--nav > {
  .splide__slider > .splide__track > .splide__list > .splide__slide.is-active, .splide__track > .splide__list > .splide__slide.is-active {
    border: none;
  }
 }
 #main-slider .splide__list .glightbox {
  display: block;
  height: 100%;
  img {
    display: block;
    width: 100%;
    border-radius: 12px;
    height: 100%;
  }
 }
 #thumbnail-slider {
  margin-top: 30px;
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
  .splide__track {
    border-radius: 8px;
  }
  .splide__slide {
    border-radius: 8px;
    filter: blur(1px);
    transition: filter .5s;
    &.is-active {
      filter: blur(0);
    }
  }
  .splide__arrow--prev {
    left: -13px;
  }
  .splide__arrow--next {
    right: -13px;
  }
  .splide__arrow {
    opacity: 1;
    background: #e0e6ed;
  }
 }
 /*
    ===============================
        Product Details Content
    ===============================
 */
 .product-details-content {
  hr {
    border-top: 1px solid #bfc9d4;
  }
  .bootstrap-touchspin-injected {
    input {
      border: 1px solid #e0e6ed;
    }
    .input-group-prepend {
      button {
        background-color: #eaeaec;
        border-color: #e0e6ed;
        box-shadow: none;
        color: #000!important;
        &:hover {
          background-color: #d3d3d3;
          border-color: #d3d3d3;
          color: #000!important;
        }
      }
    }
    .input-group-append {
      button {
        background-color: #eaeaec;
        border-color: #e0e6ed;
        box-shadow: none;
        color: #000!important;
        &:hover {
          background-color: #d3d3d3;
          border-color: #d3d3d3;
          color: #000!important;
        }
      }
    }
  }
  .product-helpers {
    font-size: 13px;
    font-weight: 600;
    color: #3b3f5c;
    &:hover {
      text-decoration: underline;
    }
  }
  .product-title {
    font-weight: 700;
  }
  .review {
    display: inline-block;
    cursor: pointer;
    svg {
      fill: $warning;
      color: $warning;
      stroke-width: 0;
      width: 20px;
      height: 20px;
      vertical-align: sub;
    }
    .rating-score {
      font-weight: 700;
      color: #000;
    }
    .rating-count {
      color: #888ea8;
      font-weight: 600;
    }
  }
  .pricing {
    font-size: 25px;
    font-weight: 700;
    color: #3b3f5c;
    .regular-price {
      margin-right: 5px;
      color: #888ea8;
      font-size: 16px;
      text-decoration: line-through;
      vertical-align: middle;
      display: inline-block;
    }
    .discounted-price {
      vertical-align: middle;
      display: inline-block;
    }
  }
  .color-swatch {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    .form-check {
      margin-right: 0;
      margin-bottom: 0;
      .form-check-input {
        border: none;
      }
    }
    .form-check-input {
      &:checked {
        &[type=radio] {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
        }
        border: none;
      }
      width: 26px;
      height: 26px;
      cursor: pointer;
      border-radius: 8px;
    }
  }
  .secure-info {
    padding: 12px 12px;
    background: #f1f2f3;
    border-radius: 14px;
    display: flex;
    svg {
      margin-right: 10px;
      color: #e2a03f;
      fill: #e2a03f5e;
    }
    p {
      margin-bottom: 0;
      font-size: 12px;
      font-weight: 600;
      color: #000;
      letter-spacing: 1px;
      align-self: center;
    }
  }
  .size-selector, .quantity-selector {
    font-size: 16px;
    font-weight: 600;
    color: #000;
  }
  .product-description {
    font-size: 15px;
    font-weight: 200;
    color: #bfc9d4;
  }
 }
 /*
    =================================
        Production Descriptions
    =================================
 */
 .production-descriptions {
  padding: 20px;
  .pro-des-content {
    max-width: 1040px;
    margin: 0 auto;
    .accordion {
      hr {
        border-top: 1px solid #bfc9d4;
      }
      .card {
        border: none;
        border-bottom: 1px solid #e0e6ed;
        box-shadow: none;
        border-radius: 0;
        margin-bottom: 0;
        &:first-child {
          border-top: 1px solid #e0e6ed;
        }
        .card-header {
          section {
            > div {
              padding: 13px 0;
              color: #3b3f5c;
              font-size: 15px;
              font-weight: 600;
              .accordion-icon {
                svg {
                  width: 26px;
                  height: 26px;
                  color: #4361ee;
                  fill: none;
                  stroke-width: 1.5;
                  margin-right: 0;
                }
              }
              &:not(.collapsed) {
                border-bottom: 1px solid #e0e6ed;
                color: #4361ee;
              }
              &.collapsed {
                .accordion-icon {
                  svg {
                    color: #3b3f5c;
                  }
                }
              }
            }
          }
        }
        .card-body {
          padding: 24px 0;
          p {
            font-size: 14px;
            color: #3b3f5c;
          }
          .media {
            img {
              border: none;
              width: 48px;
              height: 48px;
              border-radius: 8px;
            }
            .media-body {
              position: relative;
              h4 {
                font-size: 16px;
                font-weight: 600;
              }
              .stars svg {
                fill: $warning;
                color: $warning;
                stroke-width: 0;
                width: 17px;
                height: 17px;
                &.empty-star {
                  stroke-width: 1px;
                  fill: #fcf5e9;
                  opacity: .5;
                }
              }
              .meta-tags {
                position: absolute;
                top: 0;
                right: 0;
                color: #506690;
              }
            }
          }
        }
      }
    }
  }
  .nav-link {
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 700;
    &.active {
      border-radius: 8px;
    }
  }
  .tab-content p {
    color: $dark;
  }
  .product-reviews {
    background: #fafafa;
    padding: 32px 50px;
    border-radius: 26px;
    border: 1px solid #e0e6ed;
    .reviews {
      h1 {
        font-weight: 600;
        font-size: 40px;
      }
      .stars svg {
        fill: $warning;
        color: $warning;
        stroke-width: 0;
        &.empty-star {
          stroke-width: 1px;
          fill: #fcf5e9;
          opacity: .5;
        }
      }
      span {
        font-size: 15px;
        font-weight: 200;
        color: #3b3f5c;
        letter-spacing: 1px;
      }
    }
    .review-progress {
      p {
        margin-bottom: 2px;
        font-size: 14px;
        font-weight: 500;
      }
      .progress {
        height: 8px;
        border-radius: 10px;
        margin-bottom: 0;
        background: #e0e6ed;
      }
      .progress-bar {
        border-radius: 0;
      }
    }
    .media {
      img {
        border-radius: 15px;
        border: none;
      }
      .media-body {
        .media-heading {
          font-size: 18px;
          color: #000;
          font-weight: 600;
        }
      }
      .stars svg {
        fill: $warning;
        color: $warning;
        stroke-width: 0;
        width: 16px;
        height: 16px;
      }
    }
  }
 }
@media (max-width: 1199px) {
  .production-descriptions {
    padding: 0;
  }
 }
@media (max-width: 575px) {
  .production-descriptions {
    .product-reviews {
      padding: 32px 32px;
    }
    .media {
      display: block;
      img {
        margin-bottom: 15px;
      }
    }
  }
  #main-slider .splide__slide {
    width: 320px !important;
    height: 320px !important;
    margin: 0 auto;
  }
 }
--- a/ipa-agent/scss/light/assets/apps/invoice-add.scss
+++ b/ipa-agent/scss/light/assets/apps/invoice-add.scss
@@ -0,0 +1,764 @@
@import '../../base/base';
 .selectable-dropdown {
  a.dropdown-toggle {
    padding: 11px 35px 10px 15px;
    position: relative;
    padding: 9px 8px 10px 12px;
    border-radius: 8px;
    transform: none;
    font-size: 13px;
    line-height: 17px;
    background-color: #fff;
    letter-spacing: normal;
    text-align: inherit;
    color: #506690;
    box-shadow: none;
    max-height: 35px;
    display: inline-block;
    cursor: pointer;
    width: 100%;
    border: 1px solid #bfc9d4;
    img {
      width: 19px;
      height: 19px;
      vertical-align: text-bottom;
      position: absolute;
      left: 12px;
      top: 7px;
    }
    .selectable-text {
      overflow: hidden;
      display: block;
    }
    .selectable-arrow {
      display: inline-block;
      position: absolute;
      padding: 6px 4px;
      background: #fff;
      top: 2px;
      right: 1px;
    }
    svg {
      color: #888ea8;
      width: 13px !important;
      height: 13px !important;
      margin: 0;
      -webkit-transition: -webkit-transform .2s ease-in-out;
      transition: -webkit-transform .2s ease-in-out;
      transition: transform .2s ease-in-out;
      transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    }
    &.show svg {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  &.dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu {
    right: auto;
    top: 50px !important;
    &.show {
      top: 38px !important;
    }
    img {
      width: 19px;
      height: 19px;
      margin-right: 7px;
      vertical-align: top;
    }
  }
 }
 .invoice-detail-body {
  padding: 0;
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: #fff;
  border: 1px solid #e0e6ed;
  box-shadow: none;
  border-radius: 8px;
 }
 /*
 ====================
    Detail Body
 ====================
 */
 /* Detail Title */
 .invoice-content {
  .invoice-detail-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 48px;
  }
  .invoice-title input {
    font-size: 18px;
    padding: 5px 15px;
    height: auto;
  }
  .invoice-logo .dropify-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    padding: 7px;
    border: 1px solid #1b2e4b;
    background: #1b2e4b;
    .dropify-preview {
      background-color: #1b2e4b;
      padding: 0;
    }
    .dropify-clear {
      font-size: 10px;
      padding: 4px 8px;
      color: #bfc9d4;
      border: none;
      top: -3px;
      right: 0;
      &:hover {
        background-color: transparent;
      }
    }
    .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
      padding-top: 27px;
      &::before {
        height: 20px;
        position: absolute;
        top: -1px;
        left: 45%;
        color: #fff;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        background: transparent;
        width: 0;
        height: 0;
        font-size: 28px;
        width: 24px;
        content: " ";
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload-cloud'%3e%3cpolyline points='16 16 12 12 8 16'%3e%3c/polyline%3e%3cline x1='12' y1='12' x2='12' y2='21'%3e%3c/line%3e%3cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'%3e%3c/path%3e%3cpolyline points='16 16 12 12 8 16'%3e%3c/polyline%3e%3c/svg%3e");
        height: 20px;
      }
    }
    &.touch-fallback {
      .dropify-preview .dropify-infos .dropify-infos-inner {
        padding: 0;
      }
      .dropify-clear {
        color: #888ea8;
        position: relative;
      }
      .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename {
        margin-top: 10px;
      }
    }
  }
  .invoice-detail-header {
    padding: 0 48px;
  }
  .invoice-address-company {
    h4 {
      font-size: 18px;
      margin-bottom: 20px;
    }
    .invoice-address-company-fields {
      label {
        font-size: 14px;
        color: $dark;
        min-width: 75px;
        align-self: center;
        margin-bottom: 0;
      }
      .form-group {
        margin-bottom: 5px;
      }
    }
  }
  .invoice-address-client {
    h4 {
      font-size: 18px;
      margin-bottom: 20px;
    }
    .invoice-address-client-fields {
      label {
        font-size: 14px;
        color: $dark;
        min-width: 75px;
        align-self: center;
        margin-bottom: 0;
      }
      .form-group {
        margin-bottom: 5px;
      }
    }
  }
 }
 /* Detail Header */
 /* Detail Header -> invoice-address-company */
 /* Detail Header -> invoice-address-client */
 /* Detail Terms */
 .invoice-detail-terms {
  padding: 0 48px;
  padding-top: 25px;
  margin-top: 40px;
  border-top: 1px solid #e0e6ed;
  label {
    font-size: 14px;
    color: $dark;
    min-width: 75px;
    align-self: center;
    margin-bottom: 0;
  }
 }
 /* Detail Items */
 .invoice-detail-items {
  background: #fff;
  padding: 30px;
  padding: 30px 48px;
  thead th {
    padding: 9px 6px;
    border: none;
    border-top: 1px solid #e0e6ed!important;
    border-bottom: 1px solid #e0e6ed!important;
    color: #3b3f5c !important;
    background: #fff !important;
    border-radius: 0!important;
  }
  tbody td {
    border: none;
    padding: 14px 7px;
    vertical-align: top !important;
    background: #fff !important;
  }
 }
 /* Detail Items -> table thead */
 /* Detail Items -> table body */
 .delete-item-row {
  width: 10px;
 }
 .invoice-detail-items tbody td {
  &.description {
    width: 365px;
  }
  &.rate, &.qty {
    width: 110px;
  }
  &.amount {
    width: 60px;
  }
  &.tax {
    width: 60px;
    .new-chk-content {
      display: none;
    }
  }
  ul {
    padding: 0;
    li {
      list-style: none;
      svg {
        color: #888ea8;
        stroke-width: 1.5;
        height: 19px;
        width: 19px;
      }
    }
  }
  textarea {
    margin-top: 5px;
    resize: none;
  }
  span.editable-amount {
    white-space: nowrap;
  }
 }
 /* Detail Items -> Editable amount */
 /* Detail Total */
 .invoice-detail-total {
  padding: 0 48px;
  margin-top: 25px;
  .invoice-created-by {
    margin-bottom: 5px;
    label {
      font-size: 14px;
      color: $dark;
      min-width: 75px;
      align-self: center;
      margin-bottom: 0;
    }
  }
 }
 /* Detail Total -> invoice-totals-row */
 .totals-row {
  max-width: 11rem;
  margin-left: auto;
  margin-right: 60px;
 }
 .invoice-totals-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  .invoice-summary-label {
    min-width: 130px;
    min-width: 60px;
    font-size: 14px;
    color: $dark;
  }
  .invoice-summary-value {
    min-width: 60px;
    text-align: right;
    font-size: 14px;
    color: #888ea8;
    font-weight: 600;
  }
  &.invoice-summary-balance-due {
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #e0e6ed;
    .invoice-summary-label {
      font-size: 14px;
      color: #fff;
    }
  }
 }
 /* Detail Total -> invoice-summary-balance-due */
 /* Detail Note */
 .invoice-detail-note {
  padding: 0 48px;
  padding-top: 25px;
  margin-top: 40px;
  border-top: 1px solid #e0e6ed;
  .invoice-note {
    margin-bottom: 0;
    label {
      font-size: 14px;
      color: $dark;
      min-width: 75px;
      align-self: center;
      margin-bottom: 0;
    }
  }
  textarea {
    resize: none;
  }
 }
 /*
 ======================
    Invoice Actions
 ======================
 */
 .invoice-actions {
  padding: 0;
  padding-top: 32px;
  padding-bottom: 32px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e0e6ed;
  label {
    font-size: 13px;
    font-weight: 600;
    color: #0e1726;
  }
  .invoice-action-currency {
    label {
      padding: 0 25px 10px 25px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e6ed;
      width: 100%;
      font-size: 16px;
      color: #0e1726;
      font-weight: 500;
    }
    .invoice-select {
      margin: 0 25px 0 25px;
    }
    a.dropdown-toggle {
      padding: 9px 38px 9px 45px;
      width: 100%;
      span {
        vertical-align: middle;
      }
    }
    .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu {
      width: 100%;
      padding: 6px 15px;
      .dropdown-item {
        padding: 10px 3px;
        border-radius: 0;
        font-size: 16px;
        line-height: 1.45;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }
      img {
        vertical-align: sub;
      }
    }
  }
  .invoice-action-tax {
    padding-top: 20px;
    margin-top: 20px;
    h5 {
      padding: 0 25px 10px 25px;
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e6ed;
      width: 100%;
      font-size: 16px;
      color: #0e1726;
      font-weight: 500;
    }
    .invoice-action-tax-fields {
      margin: 0 25px 0 25px;
    }
    .input-rate {
      position: relative;
      padding: 9px 15px 10px 15px;
      border-radius: 8px;
      transform: none;
      font-size: 13px;
      line-height: 17px;
      background-color: #1b2e4b;
      letter-spacing: normal;
      text-align: inherit;
      color: #bfc9d4;
      box-shadow: none;
      max-height: 35px;
      display: inline-block;
    }
  }
  .invoice-action-discount {
    padding-top: 20px;
    margin-top: 20px;
    .invoice-action-discount-fields {
      margin: 0 25px 0 25px;
    }
    h5 {
      width: 100%;
      padding: 0 25px 10px 25px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e6ed;
      width: 100%;
      font-size: 16px;
      color: #0e1726;
      font-weight: 500;
    }
    .input-rate {
      position: relative;
      padding: 9px 15px 10px 15px;
      border-radius: 8px;
      transform: none;
      font-size: 13px;
      line-height: 17px;
      background-color: #1b2e4b;
      letter-spacing: normal;
      text-align: inherit;
      color: #bfc9d4;
      box-shadow: none;
      max-height: 35px;
      display: inline-block;
    }
  }
 }
 /* Invoice Actions -> action-currency */
 /* .invoice-actions .invoice-action-currency .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu .dropdown-item:not(:last-child) {
    border-bottom: 1px solid #f1f2f3;
 } */
 /* Invoice Actions -> action-tax */
 /* Invoice Actions -> action-discount */
 /*
 ===============================
    Invoice Actions Button
 ===============================
 */
 .invoice-actions-btn {
  padding: 25px;
  padding-top: 32px;
  padding-bottom: 32px;
  margin-top: 25px;
  background-color: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  label {
    font-size: 14px;
    font-weight: 600;
    color: #888ea8;
  }
  .invoice-action-btn a {
    -webkit-transform: none;
    transform: none;
    &.btn-send, &.btn-preview {
      width: 100%;
      margin-bottom: 20px;
    }
    &.btn-download {
      width: 100%;
      float: right;
    }
  }
 }
 /* Invoice Actions -> action-btn */
@media (max-width: 1199px) {
  .invoice-detail-body {
    margin-bottom: 50px;
  }
  .invoice-content .invoice-address-client {
    margin-top: 30px;
  }
  .invoice-actions-btn .invoice-action-btn a {
    &.btn-send, &.btn-preview {
      margin-bottom: 0;
    }
  }
 }
@media (max-width: 767px) {
  .invoice-detail-total {
    padding: 0 25px;
  }
  .invoice-detail-note {
    padding: 0 25px;
    padding-top: 25px;
  }
  .invoice-detail-items {
    padding: 0 25px;
    background: transparent;
  }
  .invoice-detail-terms {
    padding-left: 25px;
    padding-right: 25px;
  }
  .invoice-content {
    .invoice-detail-header {
      padding: 0 25px;
    }
    .invoice-detail-title {
      display: block;
      max-width: 320px;
      margin: 0 auto;
      margin-bottom: 40px;
    }
    .invoice-logo {
      margin-bottom: 15px;
      .dropify-wrapper {
        width: auto;
      }
    }
  }
  .totals-row {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }
  .invoice-detail-items {
    thead {
      display: none;
    }
    tbody {
      td {
        display: block;
        &.description {
          width: 100%;
          padding: 10px 4px;
          border: none;
        }
        &.rate, &.qty {
          display: inline-block;
          padding: 0 4px;
          border: none;
        }
        &.amount {
          display: inline-block;
          width: auto;
          border: none;
        }
        &.tax {
          width: auto;
          display: inline-block;
          padding: 12px 7px;
          border: none;
          .new-chk-content {
            display: inline-block;
          }
        }
        &.delete-item-row {
          padding: 0;
          border: none;
          ul {
            position: absolute;
            left: 3px;
            top: 7px;
          }
          .delete-item {
            position: absolute;
            left: 6px;
            top: 1px;
          }
        }
      }
      tr {
        display: block;
        padding: 25px 0;
        border-radius: 8px;
        position: relative;
        border: none;
        &:not(:last-child) {
          margin-bottom: 16px;
        }
      }
    }
  }
  .invoice-actions-btn .invoice-action-btn a {
    &.btn-send, &.btn-preview {
      margin-bottom: 20px;
    }
  }
 }
@media (max-width: 575px) {
  .invoice-actions-btn .invoice-action-btn {
    width: 100%;
  }
  .selectable-dropdown a.dropdown-toggle {
    padding: 9px 20px 10px 15px;
    svg {
      top: 11px;
      right: 4px;
    }
  }
 }
--- a/ipa-agent/scss/light/assets/apps/invoice-edit.scss
+++ b/ipa-agent/scss/light/assets/apps/invoice-edit.scss
@@ -0,0 +1,761 @@
@import '../../base/base';
 .selectable-dropdown {
  a.dropdown-toggle {
    padding: 11px 35px 10px 15px;
    position: relative;
    padding: 9px 8px 10px 12px;
    border-radius: 8px;
    transform: none;
    font-size: 13px;
    line-height: 17px;
    background-color: #fff;
    letter-spacing: normal;
    text-align: inherit;
    color: #506690;
    box-shadow: none;
    max-height: 35px;
    display: inline-block;
    cursor: pointer;
    width: 100%;
    border: 1px solid #bfc9d4;
    img {
      width: 19px;
      height: 19px;
      vertical-align: text-bottom;
      position: absolute;
      left: 12px;
      top: 7px;
    }
    .selectable-text {
      overflow: hidden;
      display: block;
    }
    .selectable-arrow {
      display: inline-block;
      position: absolute;
      padding: 6px 4px;
      background: #fff;
      top: 2px;
      right: 1px;
    }
    svg {
      color: #888ea8;
      width: 13px !important;
      height: 13px !important;
      margin: 0;
      -webkit-transition: -webkit-transform .2s ease-in-out;
      transition: -webkit-transform .2s ease-in-out;
      transition: transform .2s ease-in-out;
      transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    }
    &.show svg {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  &.dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu {
    right: auto;
    top: 50px !important;
    &.show {
      top: 38px !important;
    }
    img {
      width: 19px;
      height: 19px;
      margin-right: 7px;
      vertical-align: top;
    }
  }
 }
 .invoice-detail-body {
  padding: 0;
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: #fff;
  border: 1px solid #e0e6ed;
  box-shadow: none;
  border-radius: 8px;
 }
 /*
 ====================
    Detail Body
 ====================
 */
 /* Detail Title */
 .invoice-content {
  .invoice-detail-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 48px;
  }
  .invoice-title input {
    font-size: 18px;
    padding: 5px 15px;
    height: auto;
  }
  .invoice-logo .dropify-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    padding: 7px;
    border: 1px solid #1b2e4b;
    background: #1b2e4b;
    .dropify-preview {
      background-color: #1b2e4b;
      padding: 0;
    }
    .dropify-clear {
      font-size: 10px;
      padding: 4px 8px;
      color: #bfc9d4;
      border: none;
      top: -3px;
      right: 0;
      &:hover {
        background-color: transparent;
      }
    }
    .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
      padding-top: 27px;
      &::before {
        height: 20px;
        position: absolute;
        top: -1px;
        left: 45%;
        color: #fff;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        background: transparent;
        width: 0;
        height: 0;
        font-size: 28px;
        width: 24px;
        content: " ";
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload-cloud'%3e%3cpolyline points='16 16 12 12 8 16'%3e%3c/polyline%3e%3cline x1='12' y1='12' x2='12' y2='21'%3e%3c/line%3e%3cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'%3e%3c/path%3e%3cpolyline points='16 16 12 12 8 16'%3e%3c/polyline%3e%3c/svg%3e");
        height: 20px;
      }
    }
    &.touch-fallback {
      .dropify-preview .dropify-infos .dropify-infos-inner {
        padding: 0;
      }
      .dropify-clear {
        color: #888ea8;
        position: relative;
      }
      .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename {
        margin-top: 10px;
      }
    }
  }
  .invoice-detail-header {
    padding: 0 48px;
  }
  .invoice-address-company {
    h4 {
      font-size: 18px;
      margin-bottom: 20px;
    }
    .invoice-address-company-fields {
      label {
        font-size: 14px;
        color: $dark;
        min-width: 75px;
        align-self: center;
        margin-bottom: 0;
      }
      .form-group {
        margin-bottom: 5px;
      }
    }
  }
  .invoice-address-client {
    h4 {
      font-size: 18px;
      margin-bottom: 20px;
    }
    .invoice-address-client-fields {
      label {
        font-size: 14px;
        color: $dark;
        min-width: 75px;
        align-self: center;
        margin-bottom: 0;
      }
      .form-group {
        margin-bottom: 5px;
      }
    }
  }
 }
 /* Detail Header */
 /* Detail Header -> invoice-address-company */
 /* Detail Header -> invoice-address-client */
 /* Detail Terms */
 .invoice-detail-terms {
  padding: 0 48px;
  padding-top: 25px;
  margin-top: 40px;
  border-top: 1px solid #e0e6ed;
  label {
    font-size: 14px;
    color: $dark;
    min-width: 75px;
    align-self: center;
    margin-bottom: 0;
  }
 }
 /* Detail Items */
 .invoice-detail-items {
  background: #fff;
  padding: 30px;
  padding: 30px 48px;
  thead th {
    padding: 9px 6px;
    border: none;
    border-top: 1px solid #e0e6ed!important;
    border-bottom: 1px solid #e0e6ed!important;
    color: #3b3f5c !important;
    background: #fff !important;
    border-radius: 0!important;
  }
  tbody td {
    border: none;
    padding: 14px 7px;
    vertical-align: top !important;
    background: #fff !important;
  }
 }
 /* Detail Items -> table thead */
 /* Detail Items -> table body */
 .delete-item-row {
  width: 10px;
 }
 .invoice-detail-items tbody td {
  &.description {
    width: 365px;
  }
  &.rate, &.qty {
    width: 110px;
  }
  &.amount {
    width: 60px;
  }
  &.tax {
    width: 60px;
    .new-chk-content {
      display: none;
    }
  }
  ul {
    padding: 0;
    li {
      list-style: none;
      svg {
        color: #888ea8;
        stroke-width: 1.5;
        height: 19px;
        width: 19px;
      }
    }
  }
  textarea {
    margin-top: 5px;
    resize: none;
  }
  span.editable-amount {
    white-space: nowrap;
  }
 }
 /* Detail Items -> Editable amount */
 /* Detail Total */
 .invoice-detail-total {
  padding: 0 48px;
  margin-top: 25px;
  .invoice-created-by {
    margin-bottom: 5px;
    label {
      font-size: 14px;
      color: $dark;
      min-width: 75px;
      align-self: center;
      margin-bottom: 0;
    }
  }
 }
 /* Detail Total -> invoice-totals-row */
 .totals-row {
  max-width: 11rem;
  margin-left: auto;
  margin-right: 60px;
 }
 .invoice-totals-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  .invoice-summary-label {
    min-width: 130px;
    min-width: 60px;
    font-size: 14px;
    color: $dark;
  }
  .invoice-summary-value {
    min-width: 60px;
    text-align: right;
    font-size: 14px;
    color: #888ea8;
    font-weight: 600;
  }
  &.invoice-summary-balance-due {
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #e0e6ed;
    .invoice-summary-label {
      font-size: 14px;
      color: #fff;
    }
  }
 }
 /* Detail Total -> invoice-summary-balance-due */
 /* Detail Note */
 .invoice-detail-note {
  padding: 0 48px;
  padding-top: 25px;
  margin-top: 40px;
  border-top: 1px solid #e0e6ed;
  .invoice-note {
    margin-bottom: 0;
    label {
      font-size: 14px;
      color: $dark;
      min-width: 75px;
      align-self: center;
      margin-bottom: 0;
    }
  }
  textarea {
    resize: none;
  }
 }
 /*
 ======================
    Invoice Actions
 ======================
 */
 .invoice-actions {
  padding: 0;
  padding-top: 32px;
  padding-bottom: 32px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #e0e6ed;
  label {
    font-size: 13px;
    font-weight: 600;
    color: #0e1726;
  }
  .invoice-action-currency {
    label {
      padding: 0 25px 10px 25px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e6ed;
      width: 100%;
      font-size: 16px;
      color: #0e1726;
      font-weight: 500;
    }
    .invoice-select {
      margin: 0 25px 0 25px;
    }
    a.dropdown-toggle {
      padding: 9px 38px 9px 45px;
      width: 100%;
      span {
        vertical-align: middle;
      }
    }
    .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu {
      width: 100%;
      padding: 6px 15px;
      .dropdown-item {
        padding: 10px 3px;
        border-radius: 0;
        font-size: 16px;
        line-height: 1.45;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }
      img {
        vertical-align: sub;
      }
    }
  }
  .invoice-action-tax {
    padding-top: 20px;
    margin-top: 20px;
    h5 {
      padding: 0 25px 10px 25px;
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e6ed;
      width: 100%;
      font-size: 16px;
      color: #0e1726;
      font-weight: 500;
    }
    .invoice-action-tax-fields {
      margin: 0 25px 0 25px;
    }
    .input-rate {
      position: relative;
      padding: 9px 15px 10px 15px;
      border-radius: 8px;
      transform: none;
      font-size: 13px;
      line-height: 17px;
      background-color: #fff;
      letter-spacing: normal;
      text-align: inherit;
      color: #506690;
      box-shadow: none;
      max-height: 35px;
      display: inline-block;
    }
  }
  .invoice-action-discount {
    padding-top: 20px;
    margin-top: 20px;
    .invoice-action-discount-fields {
      margin: 0 25px 0 25px;
    }
    h5 {
      width: 100%;
      padding: 0 25px 10px 25px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e6ed;
      width: 100%;
      font-size: 16px;
      color: #0e1726;
      font-weight: 500;
    }
    .input-rate {
      position: relative;
      padding: 9px 15px 10px 15px;
      border-radius: 8px;
      transform: none;
      font-size: 13px;
      line-height: 17px;
      background-color: #fff;
      letter-spacing: normal;
      text-align: inherit;
      color: #506690;
      box-shadow: none;
      max-height: 35px;
      display: inline-block;
    }
  }
 }
 /* Invoice Actions -> action-currency */
 /* Invoice Actions -> action-tax */
 /* Invoice Actions -> action-discount */
 /*
 ===============================
    Invoice Actions Button
 ===============================
 */
 .invoice-actions-btn {
  padding: 25px;
  padding-top: 32px;
  padding-bottom: 32px;
  margin-top: 25px;
  background-color: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  label {
    font-size: 14px;
    font-weight: 600;
    color: #888ea8;
  }
  .invoice-action-btn a {
    -webkit-transform: none;
    transform: none;
    &.btn-send, &.btn-preview {
      width: 100%;
      margin-bottom: 20px;
    }
    &.btn-download {
      width: 100%;
      float: right;
    }
  }
 }
 /* Invoice Actions -> action-btn */
@media (max-width: 1199px) {
  .invoice-detail-body {
    margin-bottom: 50px;
  }
  .invoice-content .invoice-address-client {
    margin-top: 30px;
  }
  .invoice-actions-btn .invoice-action-btn a {
    &.btn-send, &.btn-preview {
      margin-bottom: 0;
    }
  }
 }
@media (max-width: 767px) {
  .invoice-detail-total {
    padding: 0 25px;
  }
  .invoice-detail-note {
    padding: 0 25px;
    padding-top: 25px;
  }
  .invoice-detail-items {
    padding: 0 25px;
    background: transparent;
  }
  .invoice-detail-terms {
    padding-left: 25px;
    padding-right: 25px;
  }
  .invoice-content {
    .invoice-detail-header {
      padding: 0 25px;
    }
    .invoice-detail-title {
      display: block;
      max-width: 320px;
      margin: 0 auto;
      margin-bottom: 40px;
    }
    .invoice-logo {
      margin-bottom: 15px;
      .dropify-wrapper {
        width: auto;
      }
    }
  }
  .totals-row {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }
  .invoice-detail-items {
    thead {
      display: none;
    }
    tbody {
      td {
        display: block;
        &.description {
          width: 100%;
          padding: 10px 4px;
          border: none;
        }
        &.rate, &.qty {
          display: inline-block;
          padding: 0 4px;
          border: none;
        }
        &.amount {
          display: inline-block;
          width: auto;
          border: none;
        }
        &.tax {
          width: auto;
          display: inline-block;
          padding: 12px 7px;
          border: none;
          .new-chk-content {
            display: inline-block;
          }
        }
        &.delete-item-row {
          padding: 0;
          border: none;
          ul {
            position: absolute;
            left: 3px;
            top: 7px;
          }
          .delete-item {
            position: absolute;
            left: 6px;
            top: 1px;
          }
        }
      }
      tr {
        display: block;
        padding: 25px 0;
        border-radius: 8px;
        position: relative;
        border: none;
        &:not(:last-child) {
          margin-bottom: 16px;
        }
      }
    }
  }
  .invoice-actions-btn .invoice-action-btn a {
    &.btn-send, &.btn-preview {
      margin-bottom: 20px;
    }
  }
 }
@media (max-width: 575px) {
  .invoice-actions-btn .invoice-action-btn {
    width: 100%;
  }
  .selectable-dropdown a.dropdown-toggle {
    padding: 9px 20px 10px 15px;
    svg {
      top: 11px;
      right: 4px;
    }
  }
 }
--- a/ipa-agent/scss/light/assets/apps/invoice-list.scss
+++ b/ipa-agent/scss/light/assets/apps/invoice-list.scss
@@ -0,0 +1,194 @@
@import '../../base/base';
 .widget-content-area, .dataTables_wrapper {
  padding: 0;
 }
 div.dataTables_wrapper button:hover {
  -webkit-transform: none;
  transform: none;
 }
 .inv-list-top-section {
  margin: 20px 21px 20px 21px;
 }
 div.dataTables_wrapper div.dataTables_length {
  align-self: center;
  label {
    margin-bottom: 0;
    margin-right: 15px;
  }
 }
 .dataTables_wrapper .dataTables_length select.form-control {
  margin: 0;
 }
 div.dataTables_wrapper div.dataTables_filter {
  align-self: center;
  svg {
    top: 10px;
  }
  label {
    margin: 0;
    margin-right: 15px;
  }
  input {
    margin: 0;
  }
 }
 .table-responsive {
  overflow-x: auto;
  overflow-y: hidden;
 }
 table.dataTable {
  margin: 0 !important;
 }
 .table > {
  thead {
    border-top: none;
    border-bottom: none;
    > tr > th {
      text-transform: initial;
      font-weight: 600;
      border-top: none;
      border-right: none;
      border-left: none;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 0;
      -webkit-transition: all 0.1s ease;
      transition: all 0.1s ease;
      padding: 10px 21px 10px 21px;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 1px;
      white-space: nowrap;
      &:first-child {
        &:before, &:after {
          display: none;
        }
      }
      &:last-child {
        &:before, &:after {
          display: none;
        }
      }
    }
  }
  tbody {
    &:before {
      display: none;
    }
    > tr {
      > td {
        &:first-child {
          border-top-left-radius: 8px;
        }
        padding: 0;
        padding: 10px 21px 10px 21px;
        letter-spacing: normal;
        white-space: nowrap;
        .inv-number {
          color: $primary;
          cursor: pointer;
          font-size: 16px;
          text-align: left;
        }
        .user-name {
          color: $dark;
          font-size: 14px;
          letter-spacing: .14px;
          margin-bottom: 0;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: break-word;
        }
        .inv-email {
          color: #506690;
          font-size: 14px;
          letter-spacing: .14px;
          margin-bottom: 0;
          margin-top: 0;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: break-word;
          svg {
            width: 17px;
            height: 17px;
            vertical-align: text-bottom;
            color: $secondary;
            stroke-width: 1.5;
          }
        }
        .inv-date svg {
          width: 17px;
          height: 17px;
          vertical-align: text-top;
          color: $info;
          stroke-width: 1.5;
        }
        .dropdown {
          .dropdown-toggle svg {
            stroke-width: 1px;
          }
          &.show .dropdown-toggle svg {
            stroke-width: 1px;
            color: #7367f0;
          }
          &:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu {
            padding: 9px !important;
          }
        }
      }
      &:last-child > td .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu, &:nth-last-child(2) > td .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu {
        top: -94px !important;
      }
      &:last-child > td .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu.show, &:nth-last-child(2) > td .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu.show {
        top: -90px !important;
      }
      > td .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu a.dropdown-item svg {
        width: 16px;
        height: 16px;
        margin-right: 7px;
        vertical-align: text-top;
      }
    }
  }
 }
 /* 
    Inv List Bottom Section
 */
 .inv-list-bottom-section {
  padding: 15px;
 }
--- a/ipa-agent/scss/light/assets/apps/invoice-preview.scss
+++ b/ipa-agent/scss/light/assets/apps/invoice-preview.scss
@@ -0,0 +1,437 @@
@import '../../base/base';
 .actions-btn-tooltip {
  &.tooltip {
    opacity: 1;
    top: -11px !important;
  }
  .arrow:before {
    border-top-color: $dark;
  }
  .tooltip-inner {
    background: $dark;
    color: #fff;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0px 5px 15px 1px rgba(113, 106, 202, 0.2);
    padding: 4px 16px;
  }
 }
 .invoice-container {
  width: 100%;
 }
 .invoice-inbox {
  padding: 0;
  background-color: #fff;
  border: 1px solid #e0e6ed;
  // box-shadow: 0 0 40px 0 rgb(94 92 154 / 6%);
  border-radius: 8px;
  .inv-number {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    color: #888ea8;
  }
  .invoice-action svg {
    cursor: pointer;
    font-weight: 600;
    color: #888ea8;
    margin-right: 6px;
    vertical-align: middle;
    fill: rgba(0, 23, 55, 0.08);
    &:not(:last-child) {
      margin-right: 15px;
    }
    &:hover {
      color: $primary;
      fill: rgba(27, 85, 226, 0.2392156863);
    }
  }
 }
 /*
 ===================
     Invoice
 ===================
 */
 /*    Inv head section   */
 .invoice .content-section .inv--head-section {
  padding: 36px 35px;
  margin-bottom: 40px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e0e6ed;
 }
 .inv--customer-detail-section {
  padding: 36px 35px;
  padding-top: 0;
 }
 .invoice .content-section {
  .inv--head-section {
    h3.in-heading {
      font-size: 18px;
      font-weight: 600;
      color: #0e1726;
      margin: 0;
      margin-left: 12px;
    }
    .company-logo {
      width: 70px;
      height: 70px;
    }
    div.company-info {
      display: flex;
      justify-content: flex-end;
      svg {
        width: 42px;
        height: 42px;
        margin-right: 10px;
        color: $primary;
        fill: rgba(27, 85, 226, 0.2392156863);
      }
    }
    .inv-brand-name {
      font-size: 23px;
      font-weight: 600;
      margin-bottom: 0;
      align-self: center;
    }
  }
  .inv--detail-section {
    .inv-to {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 15px;
    }
    .inv-customer-name {
      font-weight: 600;
      margin-bottom: 2px;
      font-size: 15px;
      color: $primary;
    }
    .inv-detail-title {
      font-weight: 700;
      margin-bottom: 0;
      font-size: 15px;
      margin-bottom: 15px;
    }
    .inv-details {
      font-weight: 700;
      margin-bottom: 15px;
    }
    .inv-street-addr {
      /* font-weight: 600; */
      margin-bottom: 2px;
      font-size: 15px;
      color: $dark;
    }
    .inv-email-address {
      font-weight: 600;
      margin-bottom: 2px;
      font-size: 15px;
      color: #515365;
    }
    .inv-list-number {
      margin-bottom: 2px;
      .inv-title {
        font-weight: 400;
        font-size: 20px;
      }
      .inv-number {
        font-weight: 400;
        font-size: 18px;
        color: $primary;
      }
    }
    .inv-created-date, .inv-due-date {
      margin-bottom: 2px;
      color: #888ea8;
      .inv-title {
        font-weight: 700;
        font-size: 15px;
      }
      .inv-date {
        font-size: 15px;
        font-weight: 600;
      }
    }
  }
  .inv--product-table-section {
    padding: 30px 0;
    table {
      margin-bottom: 0;
    }
    thead tr {
      border: none;
    }
    th {
      background: transparent;
      border-top: 1px solid #e0e6ed;
      border-bottom: 1px solid #e0e6ed;
      &:first-child {
        padding-left: 35px;
        border-radius: 0;
      }
      &:last-child {
        padding-right: 35px;
        border-radius: 0;
      }
    }
    tr td {
      &:first-child {
        padding-left: 35px;
      }
      &:last-child {
        padding-right: 35px;
      }
    }
    td {
      // color: #888ea8;
      border: none;
      padding: 10px 25px;
      vertical-align: top !important;
      font-size: 15px;
    }
    tbody tr {
      border-bottom: 1px solid #191e3a;
      &:nth-of-type(even) td {
        background-color: #f1f2f3 !important;
      }
    }
  }
  .inv--payment-info {
    font-size: 15px;
    font-weight: 600;
    .inv-title {
      color: $primary;
      font-weight: 600;
      margin-bottom: 15px;
      width: 65%;
      margin-left: auto;
    }
    p {
      margin-bottom: 0;
      display: flex;
      width: 65%;
      margin-left: auto;
      justify-content: space-between;
    }
    span {
      font-weight: 500;
      display: inline-block;
      color: #888ea8;
      white-space: nowrap;
    }
    .inv-subtitle {
      font-weight: 600;
      font-size: 15px;
      display: inline-block;
      color: #888ea8;
      white-space: normal;
      margin-right: 4px;
    }
  }
  .inv--total-amounts {
    padding: 0 35px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e6ed;
    .grand-total-title h4, .grand-total-amount h4 {
      position: relative;
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 0;
      padding: 0;
      color: #fff;
      display: inline-block;
      letter-spacing: 1px;
    }
  }
 }
 /*    Inv detail section    */
 /*inv-list-number*/
 /*inv-created-date*/
 /*inv-due-date*/
 /*    Inv product table section    */
 /*inv--payment-info*/
 /*inv--total-amounts*/
 /*inv--note*/
 .inv--note {
  padding: 0 25px;
  padding-bottom: 25px;
  p {
    margin-bottom: 0;
    font-weight: 600;
    color: #0e1726;
  }
 }
@media print {
  body * {
    visibility: hidden;
  }
  #ct {
    visibility: visible;
    * {
      visibility: visible;
    }
  }
  .doc-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
 }
@page {
  size: auto;
  margin: 0mm;
 }
 /*
 ===============================
    Invoice Actions Button
 ===============================
 */
 .invoice-actions-btn {
  padding: 25px;
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e0e6ed;
  label {
    font-size: 14px;
    font-weight: 600;
    color: #515365;
  }
  .invoice-action-btn a {
    -webkit-transform: none;
    transform: none;
    &.btn-send, &.btn-print, &.btn-download {
      width: 100%;
      margin-bottom: 20px;
    }
    &.btn-edit {
      width: 100%;
    }
  }
 }
 /* Invoice Actions -> action-btn */
@media (max-width: 1199px) {
  .invoice-actions-btn {
    margin-top: 25px;
    .invoice-action-btn a {
      &.btn-send, &.btn-print, &.btn-download {
        margin-bottom: 0;
      }
    }
  }
 }
@media (max-width: 767px) {
  .invoice-actions-btn .invoice-action-btn a {
    &.btn-send, &.btn-print {
      margin-bottom: 20px;
    }
  }
 }
@media (max-width: 575px) {
  .invoice .content-section .inv--payment-info {
    .inv-title {
      margin-top: 25px;
      margin-left: 0;
      margin-right: auto;
      margin-bottom: 6px;
      width: auto;
    }
    p {
      margin-left: 0;
      margin-right: auto;
      width: auto;
      justify-content: flex-start;
    }
    .inv-subtitle {
      min-width: 140px;
    }
  }
  .invoice-actions-btn .invoice-action-btn a.btn-download {
    margin-bottom: 20px;
  }
  .invoice .content-section .inv--payment-info span {
    white-space: normal;
  }
 }
--- a/ipa-agent/scss/light/assets/apps/mailbox.scss
+++ b/ipa-agent/scss/light/assets/apps/mailbox.scss
--- a/ipa-agent/scss/light/assets/apps/notes.scss
+++ b/ipa-agent/scss/light/assets/apps/notes.scss
@@ -0,0 +1,544 @@
@import '../../base/base';
 .main-container, #content {
  min-height: auto;
 }
 /*
    App Note Container
 */
 .app-note-container {
  position: relative;
  display: flex;
  .tab-title {
    max-width: 210px;
    width: 100%;
  }
 }
 .note-sidebar-scroll {
  position: relative;
  margin: auto;
  width: 100%;
  overflow: auto;
  height: calc(100vh - 202px);
 }
 /*
    Group section 
 */
 .group-section {
  font-weight: 600;
  font-size: 15px;
  color: #506690;
  letter-spacing: 1px;
  margin-top: 25px;
  margin-bottom: 13px;
  padding: 9px 20px;
  svg {
    color: #506690;
    margin-right: 6px;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
  }
 }
 .app-note-overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3b3f5c !important;
  z-index: 4 !important;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  &.app-note-overlay-show {
    display: block;
    opacity: .7;
  }
 }
 /*
    Tab Title
 */
 .tab-title {
  &.mail-menu-show {
    left: 0;
    width: 100%;
    min-width: 190px;
    height: 100%;
  }
  hr {
    border-top: 1px solid #0e1726;
    max-width: 54px;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .nav-pills {
    .nav-link.active, .show > .nav-link {
      background-color: #ebedf2;
      color: $dark;
      font-weight: 600;
      border-left: 3px solid $dark;
      border-radius: 0;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      transition: none;
    }
    a.nav-link {
      position: relative;
      font-weight: 600;
      color: $dark;
      padding: 9px 20px;
      cursor: pointer;
      font-size: 14px;
      border-radius: 8px;
      svg {
        margin-right: 7px;
        width: 18px;
        height: 18px;
        vertical-align: sub;
      }
      .mail-badge {
        background: $l-primary;
        border-radius: 50%;
        position: absolute;
        right: 8px;
        padding: 4px 7px;
        height: 24px;
        width: 23px;
        color: $primary;
        font-weight: 600;
      }
    }
    &.group-list .nav-item a {
      position: relative;
      font-size: 14px;
      font-weight: 600;
      padding: 9px 15px 9px 50px;
      color: $dark;
      letter-spacing: 1px;
      &[class*="g-dot-"]:before {
        position: absolute;
        padding: 4px;
        content: '';
        border-radius: 50%;
        top: 14px;
        left: 20px;
        border: 1px solid #515365;
      }
      &.g-dot-danger:before {
        background: #e7515b;
        border-color: $danger;
      }
      &.g-dot-primary:before {
        background: #00ab55;
        border-color: #00ab55;
      }
      &.g-dot-warning:before {
        background: #e2a13f;
        border-color: $warning;
      }
      &.g-dot-success:before {
        background: $secondary;
        border-color: $secondary;
      }
    }
    .nav-item .dropdown-menu {
      box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
      padding: 0;
      border: none;
    }
  }
  li.mail-labels {
    a.dropdown-item {
      font-size: 13px;
      font-weight: 700;
      padding: 8px 18px;
      &:hover {
        background-color: #fff;
        color: $primary;
      }
    }
    .label:after {
      position: absolute;
      content: "";
      height: 6px;
      width: 6px;
      border-radius: 50%;
      right: 15px;
      top: 43%;
    }
  }
 }
 /*Mail Labels*/
 /*
    Note container
 */
 .note-container {
  padding: 0 0 0 15px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .switch {
    text-align: right;
    margin-bottom: 43px;
    .active-view {
      color: $primary;
      fill: rgba(27, 85, 226, 0.2392156863);
    }
    .view-list, .view-grid {
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      cursor: pointer;
      color: #515365;
      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
      width: 43px;
      height: 41px;
      fill: rgba(0, 23, 55, 0.08);
    }
  }
 }
 /* 
    Note Container
 */
 .note-content {
  min-height: 135px;
  margin-bottom: 15px;
 }
 .note-container.note-grid .note-item {
  padding-right: 15px;
  padding-left: 15px;
  .note-inner-content {
    border-radius: 4px;
    width: 100%;
    position: relative;
    padding: 16px 16px 16px 16px;
    margin-right: 0;
    margin-bottom: 18px;
    border-radius: 10px;
    background: #fff;
    width: 100%;
    border: 1px solid #e0e6ed;
    .note-title {
      font-size: 16px;
      font-weight: 500;
      color: #0e1726;
      margin-bottom: 0px;
      letter-spacing: 0px;
    }
    .meta-time {
      font-weight: 600;
      margin-bottom: 10px;
      font-size: 12px;
      color: #506690;
      display: inline-block;
      border-radius: 4px;
    }
    .note-description {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 0;
      letter-spacing: 0px;
      word-wrap: break-word;
      color: $dark;
    }
    .note-action {
      display: inline-block;
      .fav-note, .delete-note {
        padding: 4px;
        border-radius: 5px;
        cursor: pointer;
        color: #607d8b;
        width: 28px;
        height: 28px;
        stroke-width: 1.6;
      }
    }
  }
  &.note-fav .note-inner-content .note-action .fav-note {
    fill: rgb(255 187 68 / 46%);
    color: #ffbb44;
  }
  .note-inner-content {
    .note-action {
      .fav-note:hover {
        color: $warning;
      }
      .delete-note:hover {
        color: $danger;
      }
    }
    .note-footer {
      display: inline-block;
      float: right;
      .tags {
        display: inline-block;
        position: relative;
        padding: 4px 6px;
        border-radius: 4px;
        [class*="g-dot-"] {
          content: '';
          background: transparent;
          border-radius: 50%;
          display: inline-block;
          height: 10px;
          width: 10px;
          vertical-align: middle;
          display: none;
        }
        .g-dot-personal {
          background: #00ab55;
          border-color: #00ab55;
        }
        .g-dot-work {
          background: #e2a13f;
          border-color: $warning;
        }
        .g-dot-social {
          background: $secondary;
          border-color: $secondary;
        }
        .g-dot-important {
          background: #e7515b;
          border-color: $danger;
        }
      }
    }
  }
  &.note-personal .note-inner-content .note-footer .tags .g-dot-personal, &.note-work .note-inner-content .note-footer .tags .g-dot-work, &.note-social .note-inner-content .note-footer .tags .g-dot-social, &.note-important .note-inner-content .note-footer .tags .g-dot-important {
    display: inline-block;
  }
  .note-inner-content .note-footer {
    .tags-selector {
      display: inline-block;
      .dropdown-menu {
        min-width: 8rem;
        a {
          font-size: 14px;
          padding: 3px 35px;
          letter-spacing: 0px;
          color: #515365;
        }
        .dropdown-item {
          &.active, &:active {
            background: transparent;
          }
        }
        [class*="g-dot-"]:before {
          content: '';
          position: absolute;
          padding: 4px;
          border-radius: 50%;
          top: 7px;
          left: 10px;
          border: 1px solid #515365;
        }
        a {
          &.g-dot-personal:before {
            background: #00ab55;
            border: 1px solid #00ab55;
          }
          &.g-dot-work:before {
            background: #e2a13f;
            border: 1px solid $warning;
          }
          &.g-dot-social:before {
            background: $secondary;
            border: 1px solid $secondary;
          }
          &.g-dot-important:before {
            background: $danger;
            border: 1px solid $danger;
          }
        }
      }
    }
    .nav-link {
      padding: 0;
      span {
        display: block;
      }
      .feather-more-vertical {
        border-radius: 5px;
        cursor: pointer;
        color: #607d8b;
        width: 20px;
        height: 20px;
        &:hover {
          color: #bfc9d4;
        }
      }
    }
  }
  &.note-personal .note-inner-content .note-footer .nav-link .feather-more-vertical, &.note-work .note-inner-content .note-footer .nav-link .feather-more-vertical, &.note-social .note-inner-content .note-footer .nav-link .feather-more-vertical, &.note-important .note-inner-content .note-footer .nav-link .feather-more-vertical {
    display: none;
  }
 }
 /*
    ===============
        Note Box
    ===============
 */
 .notes-box .notes-content form .note-description {
  padding-top: 40px;
 }
 .hamburger {
  display: none;
 }
 /*
    Media Query
 */
@media (min-width: 1200px) {
  .note-container.note-grid .note-item {
    -ms-flex: 0 0 33%;
    flex: 0 0 33%;
    max-width: 33%;
  }
 }
@media (min-width: 1920px) {
  .note-container.note-grid .note-item {
    -ms-flex: 0 0 24.666667%;
    flex: 0 0 24.666667%;
    max-width: 24.666667%;
  }
 }
@media (max-width: 1199px) {
  .note-container {
    &.note-grid .note-item {
      -ms-flex: 0 0 49.333333%;
      flex: 0 0 49.333333%;
      max-width: 49.333333%;
    }
    padding: 0;
  }
 }
@media (max-width: 991px) {
  .app-notes {
    margin-top: 37px;
  }
  .app-note-container .tab-title {
    position: absolute;
    z-index: 4;
    left: -170px;
    width: 0;
  }
  .tab-title.note-menu-show {
    left: 0;
    width: 100%;
    min-width: 190px;
    min-height: 485px;
    border-radius: 0;
    border-bottom-right-radius: 8px;
    padding: 11px;
    background: #fff;
  }
  .note-sidebar-scroll {
    height: 100%;
  }
  .app-hamburger-container {
    text-align: right;
  }
  .hamburger {
    position: relative;
    top: -13px;
    padding: 6px 9px 6px 9px;
    font-size: 20px;
    color: #fff;
    align-self: center;
    display: inline-block;
    background-color: #515365;
    border-radius: 50%;
  }
 }
@media (max-width: 575px) {
  .note-container {
    &.note-grid .note-item {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
 }
--- a/ipa-agent/scss/light/assets/apps/scrumboard.scss
+++ b/ipa-agent/scss/light/assets/apps/scrumboard.scss
@@ -0,0 +1,481 @@
@import '../../base/base';
 /* Delete Modal*/
 #deleteConformation .modal-content {
  border: 0;
  -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
  box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
  padding: 30px;
  .modal-header {
    border: none;
    padding: 0;
    .icon {
      padding: 7px 9px;
      background: rgba(231, 81, 90, 0.37);
      text-align: center;
      margin-right: 8px;
      border-radius: 50%;
    }
    svg {
      width: 20px;
      color: $danger;
      fill: rgba(231, 81, 90, 0.37);
    }
    .modal-title {
      color: #3b3f5c;
      font-size: 18px;
      font-weight: 700;
      align-self: center;
    }
    .btn-close {
      color: #fff;
      background: none;
      opacity: 1;
      width: auto;
      height: auto;
      font-size: 20px;
    }
  }
  .modal-body {
    padding: 28px 0;
    p {
      color: #888ea8;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 0;
    }
  }
  .modal-footer {
    padding: 0;
    border: none;
    [data-bs-dismiss="modal"] {
      background-color: #fff;
      color: $danger;
      font-weight: 700;
      border: 1px solid #e8e8e8;
      padding: 10px 25px;
    }
    [data-remove="task"] {
      color: #fff;
      font-weight: 600;
      padding: 10px 25px;
    }
  }
 }
 .task-list-section {
  display: flex;
  overflow-x: auto;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
 }
 .task-list-container {
  min-width: 309px;
  padding: 0 15px;
  width: 320px;
  &:first-child {
    padding-left: 0;
  }
  &:last-child {
    padding-right: 0;
  }
 }
 /*  
    Connect Sorting Div
 */
 .connect-sorting {
  padding: 15px;
  background: #ebedf2;
  border-radius: 8px;
  border: 1px solid #e0e6ed;
  .task-container-header {
    display: flex;
    justify-content: space-between;
    padding: 18px 5px;
    .dropdown .dropdown-menu {
      padding: 11px;
      .dropdown-item {
        padding: 5px;
        font-size: 14px;
        font-weight: 700;
        &:hover {
          color: #009688;
        }
        &.active, &:active {
          background-color: transparent;
        }
      }
    }
    h6 {
      font-size: 16px;
      font-weight: 700;
      color: $dark;
    }
  }
  .add-s-task {
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    text-align: center;
    &:hover {
      -webkit-transform: translateY(-3px);
      transform: translateY(-3px);
    }
    .addTask {
      display: block;
      color: $dark;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      display: inline-block;
      cursor: pointer;
      &:hover {
        color: $primary;
      }
      svg {
        width: 16px;
        height: 16px;
        vertical-align: text-top;
      }
    }
  }
 }
 .scrumboard {
  .task-header {
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0 20px;
    h4 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 0;
      color: #191e3a;
    }
    svg {
      &.feather-edit-2 {
        width: 18px;
        height: 18px;
        color: #888ea8;
        vertical-align: middle;
        fill: rgba(0, 23, 55, 0.08);
        cursor: pointer;
        padding: 0;
        margin-right: 5px;
        &:hover {
          color: $primary;
          fill: none;
        }
      }
      &.feather-trash-2 {
        color: $danger;
        margin-right: 6px;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        fill: rgba(231, 81, 90, 0.14);
        cursor: pointer;
        &:hover {
          fill: rgba(231, 81, 90, 0.37);
        }
      }
    }
  }
  .card {
    background: #fff;
    border: none;
    border-radius: 4px;
    margin-bottom: 30px;
    border: none;
    .card-body {
      padding: 0;
      .task-body .task-bottom {
        display: flex;
        justify-content: space-between;
        padding: 12px 15px;
        div {
          &.tb-section-1 {
            span {
              font-size: 13px;
              font-weight: 600;
              width: 17px;
              height: 17px;
              &:hover {
                color: $primary;
                cursor: pointer;
                svg {
                  color: $primary;
                }
              }
            }
            svg {
              width: 18px;
              vertical-align: bottom;
              &:not(:last-child) {
                margin-right: 5px;
              }
            }
          }
          &.tb-section-2 svg {
            width: 18px;
            cursor: pointer;
            color: #888ea8;
            margin-right: 6px;
            vertical-align: middle;
            width: 18px;
            height: 18px;
            fill: rgba(0, 23, 55, 0.08);
            &.feather-edit-2 {
              width: 18px;
              height: 18px;
              color: #888ea8;
              vertical-align: middle;
              fill: none;
              cursor: pointer;
              padding: 0;
              &:hover {
                color: $primary;
              }
            }
            &.feather-trash-2 {
              color: $danger;
              margin-right: 6px;
              vertical-align: middle;
              width: 18px;
              height: 18px;
              fill: rgba(231, 81, 90, 0.14);
              &:hover {
                fill: rgba(231, 81, 90, 0.37);
              }
            }
            &:not(:last-child) {
              margin-right: 5px;
            }
          }
        }
      }
    }
    &.img-task .card-body .task-content {
      padding: 10px 10px 0 10px;
      img {
        border-radius: 6px;
        height: 105px;
        width: 100%;
      }
    }
    &.simple-title-task .card-body {
      .task-header {
        margin-bottom: 0;
        padding: 20px;
        div {
          &:nth-child(1) {
            width: 70%;
          }
          &:nth-child(2) {
            width: 30%;
            text-align: right;
          }
        }
      }
      .task-body .task-bottom {
        padding: 3px 15px 11px 15px;
      }
    }
    &.task-text-progress .card-body .task-content {
      margin-top: 20px;
      p {
        padding: 5px 20px 5px 20px;
        color: $dark;
      }
      .progress {
        .progress-bar {
          background-color: #009688 !important;
          border-color: #009688;
        }
        height: 9px;
        width: 100%;
        margin-right: 17px;
        margin-bottom: 0;
        align-self: center;
        background: #ebedf2;
      }
      > div {
        display: flex;
        padding: 5px 20px 5px 20px;
      }
      > div p.progress-count {
        padding: 0;
        margin-bottom: 0;
      }
    }
    &.ui-sortable-helper {
      background-color: $primary;
      background: rgba(67, 97, 238, 0.28);
      backdrop-filter: blur(5px);
      .task-header {
        span {
          color: $dark;
          svg {
            color: $dark;
          }
        }
        svg {
          &.feather-edit-2, &.feather-trash-2 {
            color: $dark;
          }
        }
        h4 {
          color: $dark;
        }
      }
      &.task-text-progress .card-body .task-content {
        p {
          color: $dark;
        }
        .progress .progress-bar {
          background-color: #2196f3 !important;
        }
      }
      .task-header svg.feather-user {
        color: $dark;
      }
      .card-body {
        .task-body .task-bottom div {
          &.tb-section-1 {
            color: $dark;
            svg {
              color: $dark;
            }
          }
          &.tb-section-2 svg {
            color: $dark;
          }
        }
        .task-content .progress {
          box-shadow: none;
        }
      }
    }
  }
 }
 /*
    img task
 */
 /*
    task-text-progress
 */
 /*
    Style On events
 */
 /* On Drag Task */
 .ui-state-highlight {
  position: relative;
  border-color: #009688;
  height: 141px;
  margin-bottom: 36px;
  border-radius: 15px;
  border: 1px dashed #009688;
  background-image: linear-gradient(45deg, rgba(27, 85, 226, 0.09) 25%, transparent 25%, transparent 50%, rgba(27, 85, 226, 0.09) 50%, rgba(27, 85, 226, 0.09) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
  &:before {
    content: 'Drop';
    position: absolute;
    left: 41%;
    font-size: 19px;
    color: #009688;
    top: 50%;
    margin-top: -16px;
    font-weight: 600;
  }
 }
 .connect-sorting-content {
  min-height: 60px;
 }
@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
 }
--- a/ipa-agent/scss/light/assets/apps/todolist.scss
+++ b/ipa-agent/scss/light/assets/apps/todolist.scss
@@ -0,0 +1,624 @@
@import '../../base/base';
 .layout-px-spacing {
  min-height: calc(100vh - 142px) !important;
 }
 .mail-box-container {
  position: relative;
  display: flex;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e0e6ed;
 }
 .mail-overlay {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100%;
  background: #3b3f5c !important;
  z-index: 4 !important;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  &.mail-overlay-show {
    display: block;
    opacity: .7;
  }
 }
 .tab-title {
  position: relative;
  padding: 20px 15px;
  max-width: 240px;
  border-right: 1px solid #e0e6ed;
  .row {
    --bs-gutter-x:1.8rem;
  }
  svg.feather-clipboard {
    color: $primary;
    fill: none;
    margin-bottom: 13px;
  }
  h5 {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    color: $dark;
  }
  #addTask {
    position: absolute;
    font-size: 14px;
    padding: 9px 20px;
    border: none;
    color: #191e3a;
    bottom: 32px;
    left: 17%;
    box-shadow: none;
    svg {
      margin-right: 5px;
    }
  }
  &.mail-menu-show {
    left: 0;
    width: 100%;
    min-width: 190px;
    height: 100%;
  }
  hr {
    border-top: 1px solid #ebedf2;
    max-width: 54px;
  }
  .todoList-sidebar-scroll {
    position: relative;
    width: 100%;
    height: calc(100vh - 318px);
  }
  .nav-pills {
    .nav-link.active {
      svg {
        color: $primary;
        fill: #fff;
      }
      background-color: transparent;
      color: #191e3a;
      background: #ebedf2;
      padding: 10px 12px 10px 14px;
    }
    a.nav-link {
      position: relative;
      font-weight: 700;
      color: #888ea8;
      border-radius: 0;
      padding: 15px 12px 15px 14px;
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
    }
    .nav-item:not(:last-child) a.nav-link {}
    .nav-link {
      .badge {
        border-radius: 50%;
        position: absolute;
        right: 24px;
        padding: 2px 5px;
        height: 24px;
        width: 23px;
        font-weight: 700;
        border: 2px solid #e0e6ed;
        transform: none;
      }
      &.active .badge {
        border: none;
        padding: 0 !important;
        font-size: 15px;
        top: 11px;
        color: #191e3a !important;
      }
    }
    a.nav-link {
      &.active:hover {
        color: #0e1726;
        svg {
          color: #0e1726;
        }
      }
      &:hover svg {
        fill: none;
      }
      svg {
        color: #888ea8;
        margin-right: 6px;
        vertical-align: middle;
        width: 21px;
        height: 21px;
        fill: none;
      }
    }
    .nav-link {
      &#all-list .badge {
        color: #607d8b;
        border-color: #e0e6ed;
      }
      &#todo-task-done .badge {
        color: $info;
        border-color: $info;
      }
      &#todo-task-important .badge {
        color: $warning;
        border-color: $warning;
      }
    }
  }
 }
 /*
 =====================
    Todo Inbox
 =====================
 */
 .todo-inbox {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  width: 100%;
  .search {
    display: flex;
    input {
      border: none;
      padding: 12px 13px 12px 13px;
      border-bottom: 1px solid #e0e6ed;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      color: #009688;
      transition: none;
    }
  }
  .mail-menu {
    margin: 7px 13px 7px 13px;
    width: 25px;
    border-radius: 0;
    color: #515365;
    align-self: center;
    border-bottom: 1px solid #191e3a;
  }
  .todo-item-inner {
    display: flex;
  }
  .message-box {
    background: #fff;
    padding: 0 0 5px 0;
  }
 }
 .todo-box-scroll {
  position: relative;
  margin: auto;
  width: 100%;
  overflow: auto;
  height: calc(100vh - 200px);
 }
 .todo-inbox .todo-item {
  cursor: pointer;
  position: relative;
  &:hover {}
  &:not(:last-child) {
    border-bottom: 1px solid #e0e6ed;
  }
  &.todo-task-trash {
    display: none;
    &.trash-show {
      display: block;
    }
  }
  .todo-item-inner {
    .n-chk {
      padding: 15px 10px 15px 10px;
      align-self: center;
    }
    .todo-content {
      width: 100%;
      padding: 15px 10px 15px 10px;
      align-self: center;
    }
    .todo-heading {
      font-size: 18px;
      font-weight: 600;
      color: $dark;
      margin-bottom: 0;
      -webkit-transition: transform 0.35s ease;
      transition: transform 0.35s ease;
    }
    &:hover .todo-heading {
      -webkit-transform: translateY(0) scale(1.01);
      transform: translateY(0) scale(1.01);
    }
    p.todo-text {
      font-size: 14px;
      margin-bottom: 0;
      color: $l-dark;
      font-weight: 600;
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      max-width: calc(100vw - 884px);
      display: none;
    }
  }
 }
 body.layout-boxed .todo-inbox .todo-item .todo-item-inner p.todo-text {
  max-width: 509px;
 }
 .todo-inbox .todo-item {
  .todo-item-inner {
    &:hover .todo-text {
      -webkit-transform: translateY(0) scale(1.01);
      transform: translateY(0) scale(1.01);
    }
    p.meta-date {
      margin-bottom: 0;
      font-size: 12px;
      font-weight: 600;
      color: #888ea8;
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
    }
    &:hover p.meta-date {
      -webkit-transform: translateY(0) scale(1.01);
      transform: translateY(0) scale(1.01);
    }
    .priority-dropdown {
      float: right;
      padding: 15px 10px 15px 10px;
      .dropdown-toggle {
        font-size: 20px;
        &.danger svg {
          color: $danger;
          fill: rgba(231, 81, 90, 0.19);
        }
        &.warning svg {
          color: $warning;
          fill: rgba(233, 176, 43, 0.19);
        }
        &.primary svg {
          color: $info;
          fill: rgba(33, 150, 243, 0.19);
        }
      }
      .dropdown-menu {
        &.show {
          top: 32px !important;
        }
        a {
          &.dropdown-item {
            &.active, &:active {
              background: transparent;
            }
          }
          svg {
            font-size: 19px;
            font-weight: 700;
            margin-right: 7px;
            vertical-align: middle;
          }
          &.danger svg {
            color: $danger;
          }
          &.warning svg {
            color: $warning;
          }
          &.primary svg {
            color: $info;
          }
        }
      }
    }
    .action-dropdown .dropdown-menu {
      .permanent-delete, .revive {
        display: none;
      }
    }
  }
  &.todo-task-trash {
    .n-chk {
      display: none;
    }
    .todo-item-inner {
      .todo-content {
        width: 100%;
        padding: 20px 14px 20px 14px;
      }
      .priority-dropdown .dropdown-menu {
        display: none;
      }
      .action-dropdown .dropdown-menu {
        .edit, .important, .delete {
          display: none;
        }
        .permanent-delete, .revive {
          display: block;
        }
      }
    }
  }
  .todo-item-inner .action-dropdown {
    .dropdown-menu {
      &.show {
        top: 32px !important;
      }
      .dropdown-item {
        &.active, &:active {
          background-color: transparent;
        }
      }
    }
    float: right;
    padding: 15px 10px 15px 10px;
    .dropdown-toggle svg {
      width: 21px;
      height: 21px;
      margin-top: 5px;
      color: #888ea8;
    }
    .show .dropdown-toggle svg {
      color: #bfc9d4;
    }
  }
  &.todo-task-done .todo-item-inner {
    .todo-heading {
      text-decoration: line-through;
      color: #888ea8;
    }
    p {
      &.meta-date, &.todo-text {
        text-decoration: line-through;
      }
    }
  }
 }
 #todoShowListItem .task-text {
  position: relative;
  max-height: 260px;
  padding: 0 16px;
 }
 .compose-box {
  border-radius: 8px;
 }
 #todoShowListItem .compose-content h5 {
  margin-bottom: 19px;
  padding-bottom: 19px;
  border-bottom: 1px solid #191e3a;
 }
 .compose-box .compose-content {
  h5 {
    font-weight: 700;
    font-size: 18px;
    color: #bfc9d4;
    text-align: center;
    margin-bottom: 35px;
  }
  .task-text {
    p {
      word-break: break-word;
    }
    img {
      max-width: 100%;
    }
  }
  form {
    svg {
      align-self: center;
      font-size: 19px;
      margin-right: 14px;
      color: #009688;
      font-weight: 600;
    }
    #taskdescription {
      height: 170px;
    }
    .validation-text {
      display: none;
      color: $danger;
      font-weight: 600;
      text-align: left;
      margin-top: 6px;
      font-size: 12px;
      letter-spacing: 1px;
    }
    #editor-container {
      h1, p {
        color: $dark;
      }
    }
  }
 }
@media (max-width: 767px) {
  .todo-inbox {
    display: block;
    .message-box {
      width: 100%;
      margin-bottom: 40px;
    }
  }
 }
@media (min-width: 1400px) {
  body.layout-boxed .todo-inbox .todo-item .todo-item-inner p.todo-text {
    width: calc(100vw - 716px);
    max-width: 1037px;
  }
 }
@media (max-width: 1199px) {
  body.layout-boxed .todo-inbox .todo-item .todo-item-inner p.todo-text {
    max-width: calc(100vw - 667px);
  }
 }
@media (max-width: 991px) {
  body.layout-boxed .todo-inbox .todo-item .todo-item-inner p.todo-text {
    max-width: calc(100vw - 228px);
  }
  .mail-box-container {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .todo-inbox {
    .search {
      border-bottom: 1px solid #e0e6ed;
    }
    .mail-menu {
      border-bottom: none;
    }
    .search input {
      border-right: 1px solid #e0e6ed;
      border-bottom: none;
    }
    .todo-item .todo-item-inner p.todo-text {
      max-width: calc(100vw - 228px);
    }
  }
  .tab-title {
    position: absolute;
    z-index: 4;
    left: -100px;
    width: 0;
    background: #fff;
  }
  .todo-inbox {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
 }
@media (max-width: 575px) {
  .todo-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body {
    > div {
      display: block;
    }
    .meta-time {
      margin-bottom: 0;
      float: none;
    }
  }
 }
 /*
 =====================
    IE Support
 =====================
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .tab-title {
    width: 100%;
  }
 }
 /*
 =====================
    Mozilla Support 
 =====================
 */
@-moz-document url-prefix() {
  .todo-inbox .todo-item .todo-item-inner .todo-content {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
 }
--- a/ipa-agent/scss/light/assets/authentication/auth-boxed.scss
+++ b/ipa-agent/scss/light/assets/authentication/auth-boxed.scss
@@ -0,0 +1,76 @@
@import '../../base/base';
 body {
  &:before {
    display: none;
  }
 }
 .card {
  background-color: transparent;
  border: 1px solid #e0e6ed;
  box-shadow: 0 0 40px 0 rgb(94 92 154 / 6%);
 }
 .auth-container {
  min-height: 100vh;
  .container {
    max-width: 1440px;
  }
 }
 .seperator {
  position: relative;
  .seperator-text {
    position: absolute;
    top: -10px;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    span {
      background-color: #fafafa;
      padding: 0 12px;
      display: inline-block;
    }
  }
 }
 .opt-input {
  padding: 12px 14px;
  text-align: center;
 }
 .btn-social-login img {
  width: 25px;
  height: 25px;
 }
@media (max-width: 575px) {
  body {
    height: 100vh;
  }
  .card {
    border: none;
  }
  .auth-container {
    height: auto;
    .card {
      background-color: transparent;
      box-shadow: none;
      .card-body {
        padding-top: 24px;
        padding-bottom: 24px;
      }
    }
  }
 }
--- a/ipa-agent/scss/light/assets/authentication/auth-cover.scss
+++ b/ipa-agent/scss/light/assets/authentication/auth-cover.scss
@@ -0,0 +1,103 @@
@import '../../base/base';
 body {
  &:before {
    display: none;
  }
 }
 .auth-container {
  min-height: 100vh;
  .container {
    max-width: 1440px;
  }
  .card {
    background-color: transparent;
    box-shadow: none;
    border: none;
    .card-body {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
 }
 .seperator {
  position: relative;
  .seperator-text {
    position: absolute;
    top: -10px;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    span {
      background-color: #fafafa;
      padding: 0 12px;
      display: inline-block;
    }
  }
 }
 .auth-cover-bg-image {
  position: absolute;
  width: 55%;
  top: 0;
  bottom: 0;
  left: 0;
 }
 .auth-cover img {
  width: 450px;
  height: 450px;
 }
 .auth-overlay {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: inherit;
  background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, rgb(255 19 97 / 75%) 100%);
  width: 55%;
 }
 .opt-input {
  padding: 12px 14px;
  text-align: center;
 }
 .btn-social-login img {
  width: 25px;
  height: 25px;
 }
@media (max-width: 1599px) and (min-width: 1400px) {
  .ms-lg-auto {
    margin-left: 110px!important;
    padding: 0;
  }
  .auth-cover-bg-image {
    width: 50%;
  }
  .auth-overlay {
    width: 50%;
  }
 }
@media (max-width: 575px) {
  .auth-container {
    height: auto;
    .card .card-body {
      padding-top: 24px;
      padding-bottom: 24px;
    }
  }
 }
--- a/ipa-agent/scss/light/assets/components/accordions.scss
+++ b/ipa-agent/scss/light/assets/components/accordions.scss
@@ -0,0 +1,155 @@
@import '../../base/base';
 h1, h2, h3, h4, h5, h6 {
  color: #e0e6ed;
 }
 /*
    Basic
 */
 .accordion {
  .card {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    margin-bottom: 4px;
    background: #fff;
  }
  .card-header {
    background-color: transparent;
    color: #f8538d;
    border-radius: 0;
    padding: 0;
    position: relative;
    border-bottom: none;
    section > div {
      padding: 13px 19px;
      cursor: pointer;
      display: block;
      font-size: 14px;
      letter-spacing: 1px;
      &.collapsed {
        color: #888ea8;
      }
      &:not(.collapsed) {
        color: $primary;
        border-bottom: 1px solid #d3d3d3;
        font-weight: 600;
      }
      .icons {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 9px;
        svg {
          width: 18px;
          transition: .5s;
          transform: rotate(0);
        }
      }
      &[aria-expanded="true"] .icons svg {
        transform: rotate(180deg);
      }
    }
  }
  .card .card-body {
    p {
      color: #888ea8;
      letter-spacing: 1px;
      font-size: 13px;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
    ul {
      margin-bottom: 0;
      li {
        font-size: 12px;
        letter-spacing: 1px;
        &:not(:last-child) {
          margin-bottom: 5px;
        }
        a {
          color: $dark;
          font-size: 13px;
          font-weight: 600;
          &:hover {
            color: $primary;
          }
        }
      }
    }
  }
  &.no-outer-spacing {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    .card {
      margin-bottom: 0;
      border: none;
      border-radius: 0;
      &:first-child {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
      }
      &:last-child {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
      }
      &:not(:last-child) {
        border-bottom: 1px solid #d3d3d3;
      }
    }
    .card-header section > div:not(.collapsed) {
      border-bottom: none;
    }
  }
 }
 /*
    No Outer Spacing
 */
 /*
    Accordin with Icons
 */
 .accordion-icons {
  .accordion-icon {
    display: inline-block;
    margin-right: 10px;
    svg {
      color: #888ea8;
      margin-right: 6px;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      fill: rgba(0, 23, 55, 0.08);
    }
  }
  div:not(.collapsed) .accordion-icon svg {
    color: $primary;
    fill: rgb(27 85 226 / 7%);
  }
 }
--- a/ipa-agent/scss/light/assets/components/carousel.scss
+++ b/ipa-agent/scss/light/assets/components/carousel.scss
@@ -0,0 +1,203 @@
@import '../../base/base';
 .carousel-caption {
  h3, h5 {
    color: #fff;
  }
 }
 /*      style-custom-1       */
 .style-custom-1 {
  .carousel-inner {
    border-radius: 10px;
  }
  .carousel-item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .carousel-caption {
    position: absolute;
    right: auto;
    left: 44px;
    color: #fff;
    text-align: left;
    width: 50%;
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    .badge {
      padding: 6px 16px;
      font-weight: 700;
      letter-spacing: 2px;
      background-color: #00ab55;
      color: #fff;
      font-size: 13px;
      margin-bottom: 35px;
    }
    h3 {
      font-weight: 600;
      color: #fff;
      font-size: 28px;
      letter-spacing: 2px;
      margin-bottom: 36px;
    }
    .media {
      img {
        width: 49px;
        height: 49px;
        border-radius: 50%;
        margin-right: 15px;
      }
      .media-body {
        .user-name {
          color: #fff;
          font-size: 15px;
          margin-bottom: 0;
        }
        .meta-time {
          color: #fff;
          font-size: 12px;
          margin-bottom: 0;
          svg {
            vertical-align: bottom;
            width: 17px;
          }
        }
      }
    }
  }
  .carousel-indicators {
    top: 45%;
    bottom: auto;
    display: block;
    left: auto;
    margin: auto;
    right: 33px;
  }
  .carousel-control-next, .carousel-control-prev {
    top: auto;
    bottom: 32px;
    background-color: transparent;
  }
  .carousel-indicators li {
    width: 9px;
    height: 10px;
    border-radius: 10px;
    border: none;
    margin-top: 0;
    margin-bottom: 9px;
    &.active {
      height: 32px;
      border-radius: 10px;
    }
  }
  .carousel-control-prev {
    right: 100px;
    left: auto;
    .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-left'%3e%3cline x1='19' y1='12' x2='5' y2='12'%3e%3c/line%3e%3cpolyline points='12 19 5 12 12 5'%3e%3c/polyline%3e%3c/svg%3e");
      width: 26px;
      height: 26px;
    }
  }
  .carousel-control-next {
    .carousel-control-next-icon {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3e%3cline x1='5' y1='12' x2='19' y2='12'%3e%3c/line%3e%3cpolyline points='12 5 19 12 12 19'%3e%3c/polyline%3e%3c/svg%3e");
      width: 26px;
      height: 26px;
    }
    right: 40px;
    left: auto;
  }
 }
 /*
 	Default Style of the carousel arrows
 */
 .carousel-control-next, .carousel-control-prev {
  top: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.2);
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  margin: auto 10px auto 10px;
 }
 /*
 	@media Query
 */
@media (max-width: 768px) {
  .style-custom-1 {
    .carousel-caption {
      top: 8%;
      transform: translateY(0);
    }
    .carousel-indicators {
      top: 16%;
    }
    min-height: 392px;
    .carousel-inner {
      min-height: 392px;
    }
    .carousel-item {
      min-height: 392px;
      img.slide-image {
        min-height: 392px;
      }
    }
  }
 }
@media (max-width: 575px) {
  .style-custom-1 {
    .carousel-caption {
      width: 78%;
      left: 30px;
    }
    .carousel-indicators {
      display: flex;
      top: auto;
      bottom: 22px;
      right: 0;
      left: 0;
      li.active {
        width: 26px;
        border-radius: 18px;
        height: 10px;
      }
    }
    .carousel-control-next, .carousel-control-prev {
      display: none;
    }
  }
 }
--- a/ipa-agent/scss/light/assets/components/flags.scss
+++ b/ipa-agent/scss/light/assets/components/flags.scss
@@ -0,0 +1,16 @@
@import '../../base/base';
 .flags-svg {
  margin-bottom: 50px;
  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    box-shadow: rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
  }
  .flag-name {
    margin-top: 10px;
    letter-spacing: 1px;
  }
 }
--- a/ipa-agent/scss/light/assets/components/font-icons.scss
+++ b/ipa-agent/scss/light/assets/components/font-icons.scss
@@ -0,0 +1,117 @@
@import '../../base/base';
 .feather-icon {
    .icon-section {
      padding: 30px;
      h4 {
        color: $dark;
        font-size: 17px;
        font-weight: 600;
        margin: 0;
        margin-bottom: 16px;
      }
    }
    .icon-content-container {
      padding: 0 16px;
      width: 86%;
      margin: 0 auto;
      border: 1px solid #e0e6ed;
      border-radius: 6px;
    }
    .icon-section p.fs-text {
      padding-bottom: 30px;
      margin-bottom: 30px;
    }
    .icon-container {
      cursor: pointer;
      svg {
        color: $dark;
        margin-right: 6px;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        fill: none;
      }
      &:hover svg {
        color: $primary;
      }
      span {
        display: none;
      }
      &:hover span {
        color: #888ea8;
      }
    }
    .icon-link {
      color: $primary;
      font-weight: 600;
      font-size: 14px;
    }
  }
  /*FAB*/
  .fontawesome {
    .icon-section {
      padding: 30px;
      h4 {
        color: $dark;
        font-size: 17px;
        font-weight: 600;
        margin: 0;
        margin-bottom: 16px;
      }
    }
    .icon-content-container {
      padding: 0 16px;
      width: 86%;
      margin: 0 auto;
      border: 1px solid #e0e6ed;
      border-radius: 6px;
    }
    .icon-section p.fs-text {
      padding-bottom: 30px;
      margin-bottom: 30px;
    }
    .icon-container {
      cursor: pointer;
      i {
        font-size: 20px;
        color: $dark;
        vertical-align: middle;
        margin-right: 10px;
      }
      &:hover i {
        color: $primary;
      }
      span {
        color: #888ea8;
        display: none;
      }
      &:hover span {
        color: #888ea8;
      }
    }
    .icon-link {
      color: $primary;
      font-weight: 600;
      font-size: 14px;
    }
  }
--- a/ipa-agent/scss/light/assets/components/list-group.scss
+++ b/ipa-agent/scss/light/assets/components/list-group.scss
@@ -0,0 +1,158 @@
@import '../../base/base';
 .list-group-item {
  border: 1px solid #e0e6ed;
  padding: 10px 12px;
  background-color: transparent;
  color: $dark;
  margin-bottom: 0;
  .form-check-input:not(:checked) {
    background-color: #e0e6ed;
    border-color: #e0e6ed;
  }
  &.active {
    color: #fff;
    background-color: $secondary;
    border-color: transparent;
    box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.15);
    &:hover, &:focus {
      color: #e0e6ed;
      background-color: $secondary;
      box-shadow: 0px 0px 12px 1px rgba(113, 106, 202, 0.08);
    }
  }
  &.disabled, &:disabled {
    background: #50669029;
    color: #888ea8;
  }
 }
 .new-control-indicator {
  background-color: #f1f2f3;
 }
 a.list-group-item.list-group-item-action.active i {
  color: #010156;
 }
 code {
  color: $danger;
 }
 .list-group-item-action {
  &:hover {
    color: #060818;
    background-color: #f1f2f3;
  }
  &:focus {
    background-color: transparent;
    color: #060818;
  }
 }
 /*------list group-----*/
 /*
    Icons Meta
 */
 .list-group {
  &.list-group-icons-meta .list-group-item {
    &.active .media {
      svg {
        font-size: 27px;
        color: #fff;
      }
      .media-body {
        h6, p {
          color: #fff;
          font-weight: 500;
        }
      }
    }
    .media {
      svg {
        width: 20px;
        color: $primary;
        height: 20px;
      }
      .media-body {
        h6 {
          color: $dark;
          font-weight: 700;
          margin-bottom: 0;
          font-size: 15px;
          letter-spacing: 1px;
        }
        p {
          color: #888ea8;
          margin-bottom: 0;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }
  }
  &.list-group-media .list-group-item {
    &.active .media .media-body {
      h6, p {
        color: #fff;
        font-weight: 500;
      }
    }
    .media {
      img {
        color: $primary;
        width: 42px;
        height: 42px;
      }
      .media-body {
        align-self: center;
        h6 {
          color: $dark;
          font-weight: 700;
          margin-bottom: 0;
          font-size: 16px;
          letter-spacing: 1px;
        }
        p {
          color: #888ea8;
          margin-bottom: 0;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }
  }
  &.task-list-group .list-group-item-action.active {
    background-color: #191e3a;
    color: #fff;
    .new-control.new-checkbox {
      color: #fff;
      font-size: 14px;
    }
  }
 }
 /*
    Image Meta
 */
 /*
    task-list-group
 */
--- a/ipa-agent/scss/light/assets/components/media_object.scss
+++ b/ipa-agent/scss/light/assets/components/media_object.scss
@@ -0,0 +1,232 @@
@import '../../base/base';
 .widget-content-area {
  padding: 10px 20px;
 }
 .toggle-code-snippet {
  margin-bottom: -6px;
 }
 /*      Media Object      */
 .media {
  margin-top: 20px;
  margin-bottom: 20px;
  img:not(.avatar-img) {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .media-body {
    align-self: center;
    .media-heading {
      color: $dark;
      font-weight: 700;
      margin-bottom: 10px;
      font-size: 17px;
      letter-spacing: 1px;
    }
    .media-text {
      color: #506690;
      margin-bottom: 0;
      font-size: 14px;
      letter-spacing: 0;
    }
  }
 }
 /*      Right Aligned   */
 .media-right-aligned .media img {
  margin-right: 0;
  margin-left: 15px;
 }
 /* 	Media Notation 	*/
 .notation-text .media {
  &:first-child {
    border-top: none;
  }
  .media-body .media-notation {
    margin-top: 8px;
    margin-bottom: 9px;
    a {
      color: $dark;
      font-size: 13px;
      font-weight: 700;
      margin-right: 8px;
      &:hover {
        color: #888ea8;
      }
    }
  }
 }
 /* 	Media Notation With Icon	*/
 .notation-text-icon .media {
  &:first-child {
    border-top: none;
  }
  .media-body .media-notation {
    margin-top: 8px;
    margin-bottom: 9px;
    a {
      color: #506690;
      font-size: 13px;
      font-weight: 700;
      margin-right: 8px;
      svg {
        color: #506690;
        margin-right: 6px;
        vertical-align: sub;
        width: 18px;
        height: 18px;
        fill: rgba(0, 23, 55, 0.08);
      }
    }
  }
 }
 /* 	With Labels	*/
 .m-o-label .media {
  &:first-child {
    border-top: none;
  }
  .badge {
    float: right;
  }
 }
 /* 	Dropdown	*/
 .m-o-dropdown-list {
  .media {
    &:first-child {
      border-top: none;
    }
    .media-heading {
      display: flex;
      justify-content: space-between;
      div.dropdown-list {
        cursor: pointer;
        color: #888ea8;
        font-size: 18px;
        float: right;
        a.dropdown-item {
          display: flex;
          span {
            align-self: center;
          }
          svg {
            color: #888ea8;
            align-self: center;
            width: 20px;
            height: 20px;
            fill: rgba(0, 23, 55, 0.08);
            margin-right: 0;
          }
          &:hover svg {
            color: #888ea8;
          }
        }
      }
    }
  }
  .dropdown-menu {
    border-radius: 6px;
    min-width: 9rem;
    border: 1px solid #ebedf2;
    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
    padding: 9px 0;
  }
  .dropdown-item {
    font-size: 14px;
    color: #888ea8;
    padding: 5px 12px;
    display: flex;
    justify-content: space-between;
    &:hover {
      color: #e95f2b;
      text-decoration: none;
      background-color: #f1f2f3;
    }
  }
 }
 /* 	Label Icon	*/
 .m-o-label-icon .media {
  &:first-child {
    border-top: none;
  }
  svg.label-icon {
    align-self: center;
    width: 30px;
    height: 30px;
    margin-right: 16px;
    &.label-success {
      color: #00ab55;
    }
    &.label-danger {
      color: #ee3d49;
    }
    &.label-warning {
      color: #ffbb44;
    }
  }
 }
 /* 	Checkbox	*/
 .m-o-chkbox .media {
  &:first-child {
    border-top: none;
  }
  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #515365;
  }
 }
 /* 	Checkbox	*/
 .m-o-radio .media {
  &:first-child {
    border-top: none;
  }
  .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #515365;
  }
 }
 .custom-control-label::before {
  background-color: #d3d3d3;
 }
--- a/ipa-agent/scss/light/assets/components/modal.scss
+++ b/ipa-agent/scss/light/assets/components/modal.scss
@@ -0,0 +1,268 @@
@import '../../base/base';
 .modal-backdrop {
  background: linear-gradient(75deg, rgba(22, 28, 36, 0.48) 0%, rgb(22, 28, 36) 100%);
  &.show {
    opacity: .8;
  }
 }
 .modal-content {
  border: none;
  border-radius: 6px;
  background: #fff;
  border-bottom: 1px solid #e0e6ed;
  hr {
    border-top: 1px solid #e0e6ed;
  }
  .modal-header {
    padding: 12px 26px;
    border: none;
    border-bottom: 1px solid #e0e6ed;
    h5 {
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
    }
    svg {
      width: 17px;
      color: #bfc9d4;
    }
    .btn-close {
      background: none;
      box-shadow: none;
      padding: 0;
      margin: 0;
      display: grid;
      opacity: 1;
      svg {
        width: 17px;
        height: 17px;
        color: #000;
      }
    }
  }
  .modal-body {
    padding: 26px 26px;
    a:not(.btn) {
      color: $primary;
      font-weight: 600;
    }
    p {
      color: #888ea8;
      letter-spacing: 1px;
      font-size: 14px;
      line-height: 22px;
      text-align: left;
      &:last-child {
        margin-bottom: 0;
      }
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }
  .modal-footer {
    border-top: 1px solid #e0e6ed;
    button.btn {
      font-weight: 600;
      padding: 10px 25px;
      letter-spacing: 1px;
    }
    .btn.btn-primary {
      background-color: $primary;
      color: #fff;
      border: 1px solid $primary;
    }
  }
 }
 /*
    Modal Tabs
 */
 .close {
  text-shadow: none;
  color: #bfc9d4;
  &:hover {
    color: #bfc9d4;
  }
 }
 .nav-tabs {
  svg {
    width: 20px;
    vertical-align: bottom;
  }
  .nav-link {
    &.active {
      color: #e95f2b;
      background-color: #191e3a;
      border-color: #191e3a #191e3a #0e1726;
      &:after {
        color: #e95f2b;
      }
    }
    &:hover {
      border-color: #191e3a #191e3a #191e3a;
    }
  }
  border-bottom: 1px solid #191e3a;
 }
 /*
    Modal Success
 */
 .modal-success .modal-content {
  background-color: $l-success;
 }
 /*
    Modal Video
 */
 .modal-video {
  .modal-content {
    background-color: transparent;
    border: none;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
  .modal {
    &#videoMedia1 .modal-header, &#videoMedia2 .modal-header {
      border: none;
      padding: 12px 0;
      justify-content: end;
    }
  }
  .video-container {
    iframe, object, embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .modal {
    &#videoMedia1 .modal-header .close, &#videoMedia2 .modal-header .close {
      color: #fff !important;
      opacity: 1;
    }
  }
  .modal-content .modal-header svg {
    color: #fff;
  }
 }
 /*
    Modal Notification
 */
 .modal-notification .modal-body .icon-content {
  margin: 0 0 20px 0px;
  display: inline-block;
  padding: 13px;
  border-radius: 50%;
  background: #e0e6ed;
  svg {
    width: 36px;
    height: 36px;
    color: #1b2e4b;
    fill: rgba(0, 23, 55, 0.08);
  }
 }
 .modal#sliderModal {
  .modal-content {
    border: none;
    .modal-body button.btn-close {
      position: absolute;
      z-index: 2;
      right: 4px;
      top: -35px;
      opacity: 1;
      text-shadow: none;
      background: transparent;
      box-shadow: none;
      svg {
        color: #bfc9d4;
      }
      &:hover svg {
        color: #fff;
      }
    }
  }
 }
 /*
    Form
 */
 .inputForm-modal {
  .modal-content {
      .modal-body {
          .form-group {
              .input-group {
                  .input-group-text {
                      background: transparent;
                      border-top-left-radius: 15px;
                      border-bottom-left-radius: 15px;
                      border-right: none;
                  }
              }
              input {
                  border-left: none;
                  background: transparent;
                  border-top-right-radius: 15px;
                  border-bottom-right-radius: 15px;
                  &:focus {
                      border-color: #bfc9d4;
                  }
              }
          }
      }
  }
 }
--- a/ipa-agent/scss/light/assets/components/tabs.scss
+++ b/ipa-agent/scss/light/assets/components/tabs.scss
@@ -0,0 +1,125 @@
@import '../../base/base';
 .nav {
    &.nav-tabs {
        border: none;
        li {
            &.nav-item {
                button {
                    &.nav-link {
                        border: none;
                        font-weight: 500;
                        padding: 8px 14px;
                        letter-spacing: 1px;
                        color: #506690;
                        background: transparent;
                        svg {
                            vertical-align: text-bottom;
                            stroke-width: 1.6;
                            width: 20px;
                            height: 20px;
                        }
                        &.active {
                            border-bottom: 1.6px solid #4361ee;
                            color: #4361ee;
                            font-weight: 600;
                            svg {
                                color: #4361ee;
                            }
                        }
                        &:disabled {
                            opacity: .5;
                        }
                    }
                }
            }
        }
    }
    &.nav-pills {
        border: none;
        padding: 8px;
        background: #ebedf2;
        border-radius: 8px;
        li {
            &.nav-item {
                button {
                    &.nav-link {
                        border: none;
                        font-weight: 500;
                        padding: 8px 14px;
                        letter-spacing: 1px;
                        color: #4361ee;
                        svg {
                            vertical-align: text-bottom;
                            stroke-width: 1.6;
                            color: #4361ee;
                            width: 20px;
                            height: 20px;
                        }
                        &.active {
                            border-bottom: none;
                            background-color: #fff;
                            box-shadow: 1px 1px 4px 0 #00000033;
                            font-weight: 600;
                        }
                        &:disabled {
                            opacity: .5;
                        }
                    }
                }
            }
        }
        &[aria-orientation="vertical"] {
            button {
                &.nav-link {
                    border: none;
                    font-weight: 500;
                    padding: 8px 14px;
                    letter-spacing: 1px;
                    color: #4361ee;
                    svg {
                        vertical-align: bottom;
                        stroke-width: 1.6;
                        color: #4361ee;
                        width: 20px;
                        height: 20px;
                    }
                    &.active {
                        border-bottom: none;
                        background-color: #fff;
                        box-shadow: 1px 1px 4px 0 #00000033;
                    }
                    &:disabled {
                        opacity: .5;
                    }
                }
            }
        }
    }
 }
--- a/ipa-agent/scss/light/assets/components/timeline.scss
+++ b/ipa-agent/scss/light/assets/components/timeline.scss
@@ -0,0 +1,847 @@
@import '../../base/base';
 .mt-container {
    max-width: 570px;
  }
  .modern-timeline {
    list-style: none;
    position: relative;
    padding: 50px 0 50px;
    margin: 0;
    &:before {
      position: absolute;
      background: #ebedf2;
      bottom: 0;
      left: 50%;
      top: 0;
      content: "";
      width: 3px;
      margin-left: -1.5px;
    }
    > li {
      margin-bottom: 50px;
      position: relative;
      &:after, &:before {
        display: table;
        content: "";
      }
      > {
        .modern-timeline-badge {
          position: absolute;
          background: #fff;
          border: 3px solid #ebedf2;
          border-radius: 100%;
          height: 20px;
          width: 20px;
          margin-left: -10px;
          text-align: center;
          z-index: 1;
          left: 50%;
          top: 32px;
        }
        .modern-timeline-panel {
          position: relative;
          border: 1px solid #e0e6ed;
          background: #fff;
          border-radius: .1875rem;
          transition: .3s ease-in-out;
          float: left;
          width: 46%;
          border-radius: 6px;
          &:before {
            position: absolute;
            background: #ebedf2;
            right: -37px;
            top: 40px;
            transition: .3s ease-in-out;
            content: " ";
            width: 37px;
            height: 3px;
            display: block;
          }
        }
      }
      &:nth-child(even) > .modern-timeline-panel:before {
        right: auto;
        left: -37px;
        width: 37px;
      }
      &:after {
        clear: both;
      }
      > .modern-timeline-panel {
        .modern-timeline-preview img {
          width: 100%;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
        *:last-child {
          margin-bottom: 0;
        }
      }
      &:nth-child(even) > .modern-timeline-panel {
        border: 1px solid #e0e6ed;
        float: right;
      }
      > .modern-timeline-panel {
        *:last-child {
          margin-bottom: 0;
        }
        .modern-timeline-body {
          padding: 30px 20px;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;
          h4 {
            color: #e95f2b;
            margin-bottom: 20px;
            font-size: 1.125rem;
          }
          p {
            color: #888ea8;
            margin-bottom: 0;
            a {
              display: block;
            }
          }
        }
        *:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  .modern-timeline-top:before, .modern-timeline-bottom:before {
    background: #ebedf2;
    position: absolute;
    height: 3px;
    width: 50px;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    margin-left: -25px;
  }
  .modern-timeline-top:before {
    top: 0;
  }
  @media (max-width: 767px) {
    ul.modern-timeline > li > {
      .modern-timeline-panel {
        border: 1px solid #e0e6ed;
        float: right;
        width: 100%;
      }
      .modern-timeline-badge {
        display: none;
      }
    }
    .modern-timeline > li > .modern-timeline-panel:before {
      display: none;
    }
  }
  /*
  =====================
      Basic
  =====================
  */
  .timeline-line .item-timeline {
    display: flex;
    .t-dot {
      position: relative;
      &:before {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 2px;
        border-style: solid;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        border-color: $info;
      }
      &:after {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 2px;
        border-style: solid;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        border-color: $info;
        width: 0;
        height: auto;
        top: 25px;
        bottom: -15px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-radius: 0;
      }
      &.t-dot-primary:before {
        border-color: $primary;
      }
      &.t-dot-success:before {
        border-color: #00ab55;
      }
      &.t-dot-warning:before {
        border-color: $warning;
      }
      &.t-dot-info:before {
        border-color: $info;
      }
      &.t-dot-danger:before {
        border-color: $danger;
      }
      &.t-dot-dark:before {
        border-color: $dark;
      }
      &.t-dot-primary:after {
        border-color: $primary;
      }
      &.t-dot-success:after {
        border-color: #00ab55;
      }
      &.t-dot-warning:after {
        border-color: $warning;
      }
      &.t-dot-info:after {
        border-color: $info;
      }
      &.t-dot-danger:after {
        border-color: $danger;
      }
      &.t-dot-dark:after {
        border-color: $dark;
      }
    }
    &:last-child .t-dot:after {
      display: none;
    }
    .t-meta-time {
      margin: 0;
      min-width: 100px;
      max-width: 100px;
      font-size: 12px;
      font-weight: 700;
      color: #888ea8;
      align-self: center;
    }
    .t-text {
      padding: 10px;
      align-self: center;
      margin-left: 10px;
      p {
        font-size: 13px;
        margin: 0;
        color: $dark;
        font-weight: 600;
        a {
          color: $primary;
          font-weight: 600;
        }
      }
    }
    .t-time {
      margin: 0;
      min-width: 58px;
      max-width: 100px;
      font-size: 16px;
      font-weight: 600;
      color: $dark;
      padding: 10px 0;
    }
    .t-text .t-meta-time {
      margin: 0;
      min-width: 100px;
      max-width: 100px;
      font-size: 12px;
      font-weight: 700;
      color: #888ea8;
      align-self: center;
    }
  }
  /*
  =====================
      Modern
  =====================
  */
  .timeline-alter .item-timeline {
    display: flex;
    .t-time {
      padding: 10px;
      align-self: center;
      p {
        margin: 0;
        min-width: 58px;
        max-width: 100px;
        font-size: 16px;
        font-weight: 600;
        color: $dark;
        align-self: center;
      }
    }
    .t-img {
      position: relative;
      border-color: #e0e6ed;
      padding: 10px;
      &:before {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 2px;
        border-style: solid;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
      }
      &:after {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 2px;
        border-style: solid;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: auto;
        top: 25px;
        bottom: -15px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-radius: 0;
      }
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        z-index: 7;
        position: relative;
      }
    }
    .t-usr-txt {
      display: block;
      padding: 10px;
      position: relative;
      border-color: #e0e6ed;
      &:before {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 2px;
        border-style: solid;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
      }
      &:after {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 2px;
        border-style: solid;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: auto;
        top: 25px;
        bottom: -15px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-radius: 0;
      }
      p {
        margin: 0;
        background: #eceffe;
        height: 45px;
        width: 45px;
        border-radius: 50%;
        display: flex;
        align-self: center;
        justify-content: center;
        margin-bottom: 0;
        color: $primary;
        font-weight: 700;
        font-size: 18px;
        z-index: 7;
        position: relative;
      }
      span {
        align-self: center;
      }
    }
    .t-meta-time {
      padding: 10px;
      align-self: center;
      p {
        margin: 0;
        min-width: 100px;
        max-width: 100px;
        font-size: 12px;
        font-weight: 700;
        color: #888ea8;
      }
    }
    .t-text {
      padding: 10px;
      align-self: center;
      p {
        font-size: 13px;
        margin: 0;
        color: $dark;
        font-weight: 600;
        a {
          color: $primary;
          font-weight: 600;
        }
      }
    }
  }
  /*
  =======================
      Timeline Simple
  =======================
  */
  .timeline-simple {
    margin-bottom: 45px;
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
    h3 {
      font-size: 23px;
      font-weight: 600;
    }
    p.timeline-title {
      position: relative;
      font-size: 19px;
      font-weight: 600;
      color: $primary;
      margin-bottom: 28px;
    }
    .timeline-list {
      p.meta-update-day {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 600;
        color: #888ea8;
      }
      .timeline-post-content {
        display: flex;
        > div > div {
          margin-top: 28px;
        }
        &:not(:last-child) > div > div {
          margin-bottom: 70px;
        }
        div.user-profile {
          position: relative;
          z-index: 2;
          &:after {
            content: '';
            position: absolute;
            border-color: inherit;
            border-width: 2px;
            border-style: solid;
            top: 15px;
            left: 34%;
            transform: translateX(-50%);
            width: 0;
            height: auto;
            top: 48px;
            bottom: -15px;
            border-right-width: 0;
            border-top-width: 0;
            border-bottom-width: 0;
            border-radius: 0;
            z-index: -1;
            border-color: #ebedf2;
          }
          img {
            width: 53px;
            height: 53px;
            border-radius: 50%;
            margin-right: 30px;
            -webkit-box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31);
            box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31);
          }
        }
        h4 {
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 0;
          color: $primary;
        }
        svg {
          color: #888ea8;
          vertical-align: text-bottom;
          width: 21px;
          height: 21px;
        }
        &:hover svg {
          color: $primary;
          fill: rgb(27 85 226 / 9%);
        }
        h6 {
          display: inline-block;
          font-size: 17px;
          font-weight: 600;
          margin-bottom: 11px;
          color: $dark;
        }
        &:hover h6 {
          color: #888ea8;
        }
        p.post-text {
          padding-left: 31px;
          color: #888ea8;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 28px;
        }
        .post-contributers {
          padding-left: 31px;
          img {
            width: 38px;
            border-radius: 50%;
            margin-right: 7px;
            -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
            box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
            cursor: pointer;
            margin-bottom: 5px;
            &:hover {
              -webkit-transform: translateY(-3px) scale(1.02);
              transform: translateY(-3px) scale(1.02);
              box-shadow: none;
            }
          }
        }
        .post-gallery-img {
          padding-left: 31px;
          img {
            width: 20%;
            border-radius: 6px;
            -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
            box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
            cursor: pointer;
            &:hover {
              -webkit-transform: translateY(-3px) scale(1.02);
              transform: translateY(-3px) scale(1.02);
              box-shadow: none;
            }
            &:not(:last-child) {
              margin-right: 23px;
            }
          }
        }
      }
    }
  }
  @media (max-width: 767px) {
    .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img {
      width: 150px;
      margin-bottom: 23px;
    }
  }
  @media (max-width: 575px) {
    .timeline-alter .item-timeline {
      display: block;
      text-align: center;
      .t-meta-time p, .t-usr-txt p {
        margin: 0 auto;
      }
    }
    .timeline-simple .timeline-list .timeline-post-content {
      display: block;
      div.user-profile {
        &:after {
          display: none;
        }
        margin-bottom: 18px;
        text-align: center;
        img {
          margin-right: 0;
        }
      }
      h4, .meta-time-date {
        text-align: center;
      }
    }
  }
  /*
  =======================
      Timeline Simple
  =======================
  */
  .timeline {
    width: 85%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding: 32px 0 32px 32px;
    border-left: 2px solid #eceffe;
    font-size: 15px;
  }
  .timeline-item {
    display: flex;
    gap: 24px;
    + {
      * {
        margin-top: 24px;
      }
      .extra-space {
        margin-top: 48px;
      }
    }
  }
  .new-comment {
    width: 100%;
  }
  .timeline-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: -52px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 6px #e0e6ed;
    svg {
      width: 20px;
      height: 20px;
    }
    &.faded-icon {
      background-color: #ffff;
      color: #0e1726;
    }
    &.filled-icon {
      background-color: $primary;
      color: #fff;
    }
  }
  .timeline-item-description {
    display: flex;
    gap: 8px;
    color: $dark;
    img {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      overflow: hidden;
      aspect-ratio: 1/1;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
    }
    a {
      color: $primary;
      font-weight: 600;
      text-decoration: none;
      &:hover, &:focus {
        outline: 0;
        color: #888ea8;
      }
    }
  }
  .comment {
    margin-top: 12px;
    color: $dark;
    border-radius: 6px;
    padding: 16px;
    font-size: 1rem;
    border: 1px solid #e0e6ed;
    box-shadow: rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
    .btn-like {
      padding: 7px 13px;
      border: none;
      box-shadow: none;
      border-radius: 60px;
      svg {
        width: 19px;
        height: 19px;
        vertical-align: sub;
      }
    }
    p {
      color: #515365;
    }
  }
  .btn.square {
    background: transparent;
    svg {
      width: 24px;
      height: 24px;
      fill: $warning;
      color: #0e1726;
    }
  }
  .show-replies {
    color: #888ea8;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    cursor: pointer;
    svg {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
    }
    &:hover, &:focus {
      color: $dark;
    }
  }
--- a/ipa-agent/scss/light/assets/custom.scss
+++ b/ipa-agent/scss/light/assets/custom.scss
--- a/ipa-agent/scss/light/assets/dashboard/dash_1.scss
+++ b/ipa-agent/scss/light/assets/dashboard/dash_1.scss
@@ -0,0 +1 @@
@use '../widgets/analytics';
--- a/ipa-agent/scss/light/assets/dashboard/dash_2.scss
+++ b/ipa-agent/scss/light/assets/dashboard/dash_2.scss
@@ -0,0 +1 @@
@use '../widgets/sales';
--- a/ipa-agent/scss/light/assets/elements/alert.scss
+++ b/ipa-agent/scss/light/assets/elements/alert.scss
@@ -0,0 +1,322 @@
@import '../../base/base';
 /*      Alert       */
 .alert {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 0.9375rem;
  .btn {
    margin-right: 27px;
    &:hover {
      box-shadow: none;
    }
  }
  .alert-icon svg {
    vertical-align: middle;
    width: 33px;
    height: 33px;
    stroke-width: 1.2;
  }
  .btn-close {
    color: #000;
    opacity: 1;
    width: 18px;
    background: transparent;
    padding: 13px 12px;
    box-shadow: none;
    svg {
      width: 18px;
      height: 18px;
    }
  }
 }
 /*Default Alerts*/
 .alert-primary {
  color: #fff;
  background-color: $primary;
  border-color: $primary;
 }
 .alert-warning {
  color: #fff;
  background-color: $warning;
  border-color: $warning;
 }
 .alert-success {
  color: #fff;
  background-color: #00ab55;
  border-color: #00ab55;
 }
 .alert-info {
  color: #fff;
  background-color: $info;
  border-color: $info;
 }
 .alert-danger {
  color: #fff;
  background-color: $danger;
  border-color: $danger;
 }
 .alert-dark {
  color: #fff;
  background-color: $dark;
  border-color: $dark;
 }
 /*Outline Alerts*/
 .alert-outline-primary {
  border-color: $primary;
  border-radius: 5px;
 }
 .alert-outline-warning {
  border-color: #dea82a;
  border-radius: 5px;
 }
 .alert-outline-success {
  border-color: #00ab55;
  border-radius: 5px;
 }
 .alert-outline-info {
  border-color: #009eda;
  border-radius: 5px;
 }
 .alert-outline-danger {
  border-color: $danger;
  border-radius: 5px;
 }
 .alert-outline-dark {
  border-color: #454656;
  border-radius: 5px;
 }
 .alert {
  &.alert-light .close {
    color: #0e1726;
  }
  &.solid-alert-3 .close, &.solid-alert-4 .close {
    color: #000;
  }
 }
 .hide-default {
  display: none;
 }
 /*      Light Alert         */
 .btn-light {
  border-color: transparent;
 }
 .alert-light-primary {
  color: $primary;
  background-color: #eceffe;
  border-color: rgb(67, 97, 238, 0.55);
  svg.close {
    color: $primary;
  }
 }
 .alert-light-warning {
  color: $warning;
  background-color: #fcf5e9;
  border-color: rgb(226, 160, 63, 0.55);
  svg.close {
    color: $warning;
  }
 }
 .alert-light-success {
  color: #00ab55;
  background-color: #e6f6ee;
  border-color: rgb(26, 188, 156, 0.55);
  svg.close {
    color: #00ab55;
  }
 }
 .alert-light-info {
  color: $info;
  background-color: #e6f4ff;
  border-color: rgb(33, 150, 243, 0.55);
  svg.close {
    color: $info;
  }
 }
 .alert-light-danger {
  color: $danger;
  background-color: #fbeced;
  border-color: rgb(231, 81, 90, 0.55);
  svg.close {
    color: $danger;
  }
 }
 .alert-light-dark {
  color: #515365;
  background-color: #eaeaec;
  border-color: rgb(59, 63, 92, 0.55);
  svg {
    &.close {
      color: $dark;
    }
    &:not(.close) {
      color: #fff !important;
    }
  }
 }
 /*  Background Alerts      */
 .alert-background {
  color: #fff;
  background: #fff url(../../../img/ab-1.jpeg) no-repeat center center;
  background-size: cover;
  border: none;
 }
 /*  Gradient Alerts      */
 .alert-gradient {
  color: #fff;
  border: none;
  background-size: cover;
  background-image: linear-gradient(135deg, #bc1a4e 0%, #004fe6 100%);
 }
 /* Custom Alerts */
 /* Default */
 .custom-alert-1 {
  background-color: #7d30cb;
  border-radius: 5px;
  color: #fff;
  .btn-close {
    top: 9px;
  }
  .alert-icon {
    margin-right: 25px;
  }
  .media-body {
    display: flex;
    justify-content: space-between;
  }
  .alert-text {
    margin-right: 10px;
    strong, span {
      vertical-align: sub;
    }
  }
 }
 /*  Alert with Icon */
 .alert-icon-left {
  border-left: 64px solid;
  svg:not(.close) {
    color: #FFF;
    width: 4rem;
    left: -4rem;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
 }
 .alert-icon-right {
  border-right: 64px solid;
  svg:not(.close) {
    color: #FFF;
    width: 4rem;
    right: -4rem;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  i {
    float: left;
    margin-right: 7px;
  }
 }
 .alert {
  &[class*=alert-arrow-]:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    border-left: 8px solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left-color: inherit;
    margin-top: -8px;
  }
  &.alert-arrow-right:before {
    left: auto;
    right: 0;
    border-left: 0;
    border-right: 8px solid;
    border-right-color: inherit;
  }
 }
@media (max-width: 575px) {
  .custom-alert-1 .media-body {
    display: block;
  }
  .alert .btn {
    margin-top: 8px;
  }
 }
--- a/ipa-agent/scss/light/assets/elements/color_library.scss
+++ b/ipa-agent/scss/light/assets/elements/color_library.scss
@@ -0,0 +1,55 @@
@import '../../base/base';
 .widget {
  border: none;
  box-shadow: none;
 }
 /*---------Palette Box--------*/
 .color-box {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  background: #fff;
  .cl-example {
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 6px;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    margin-top: -10px;
    margin-left: -10px;
    margin-bottom: -10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  &:hover .cl-example {
    -webkit-transform: scale(1.09);
    transform: scale(1.09);
  }
  .cl-info {
    flex: 1;
  }
  .cl-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    color: #888ea8;
  }
  .cl-info span {
    font-size: 14px;
    color: #888ea8;
    font-weight: 600;
  }
 }
--- a/ipa-agent/scss/light/assets/elements/custom-pagination.scss
+++ b/ipa-agent/scss/light/assets/elements/custom-pagination.scss
@@ -0,0 +1,409 @@
@import '../../base/base';
 /*
    ============================
        Pagination container
    =============================
 */
 .paginating-container {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  .prev svg, .next svg {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
  }
  .pagination {
    margin-bottom: 0;
  }
  li {
    a {
      padding: 10px 15px;
      font-weight: 600;
      color: $dark;
    }
    padding: 10px 0;
    font-weight: 600;
    color: $dark;
    border-radius: 4px;
    &:not(:last-child) {
      margin-right: 4px;
    }
  }
 }
 /*
    Default Style
 */
 .pagination-default {
  li {
    border: 2px solid #e0e6ed;
    &:hover {
      border: 2px solid #4361ee !important;
      a {
        color: $primary;
      }
    }
    &.active {
      border: 2px solid #4361ee !important;
      color: $primary;
    }
    a.active:hover, &.active a {
      color: $primary;
    }
  }
  .prev {
    border: 2px solid #e0e6ed;
    &:hover {
      border: 2px solid $primary;
      a, svg {
        color: $primary;
      }
    }
  }
  .next {
    border: 2px solid #e0e6ed;
    &:hover {
      border: 2px solid $primary;
      a, svg {
        color: $primary;
      }
    }
  }
 }
 /* 
    Solid Style
 */
 .pagination-solid {
  li {
    background-color: #e0e6ed;
    &:hover a {
      color: $primary;
    }
    &.active {
      background-color: #4361ee !important;
      color: #fff;
    }
    a.active:hover, &.active a {
      color: #fff;
    }
  }
  .prev {
    background-color: #e0e6ed;
    &:hover {
      background-color: $primary;
      a, svg {
        color: #fff;
      }
    }
  }
  .next {
    background-color: #e0e6ed;
    &:hover {
      background-color: $primary;
      a, svg {
        color: #fff;
      }
    }
  }
 }
 /*    
    ===================
        No Spacing
    ===================
 */
 .pagination-no_spacing {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  .prev {
    background-color: #e0e6ed;
    border-radius: 50%;
    padding: 10px 11px;
    margin-right: 5px;
    &:hover {
      background-color: $primary;
      svg {
        color: #fff;
      }
    }
  }
  .next {
    background-color: #e0e6ed;
    border-radius: 50%;
    padding: 10px 11px;
    margin-left: 5px;
    &:hover {
      background-color: $primary;
      svg {
        color: #fff;
      }
    }
  }
  .prev svg, .next svg {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
  }
  .pagination {
    margin-bottom: 0;
  }
  li {
    &:first-child {
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
    }
    &:last-child {
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }
    background-color: #e0e6ed;
    a {
      padding: 10px 15px;
      font-weight: 600;
      color: $dark;
      &.active {
        background-color: #4361ee !important;
        border-radius: 6px;
        color: #fff;
        &:hover {
          color: #fff;
        }
      }
      &:hover {
        color: $primary;
      }
    }
    padding: 10px 0;
    font-weight: 600;
    color: $dark;
  }
 }
 /*
    =======================
        Custom Pagination
    =======================
 */
 /*
    Custom Solid
 */
 .pagination-custom_solid {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  .prev {
    background-color: #e0e6ed;
    border-radius: 50%;
    padding: 10px 11px;
    margin-right: 25px;
    &:hover {
      background-color: $primary;
      svg {
        color: #fff;
      }
    }
  }
  .next {
    background-color: #e0e6ed;
    border-radius: 50%;
    padding: 10px 11px;
    margin-left: 25px;
    &:hover {
      background-color: $primary;
      svg {
        color: #fff;
      }
    }
  }
  .prev svg, .next svg {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
  }
  .pagination {
    margin-bottom: 0;
  }
  li {
    &:first-child {
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
    }
    &:last-child {
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }
    background-color: #e0e6ed;
    a {
      padding: 10px 15px;
      font-weight: 600;
      color: $dark;
      &.active {
        background-color: #4361ee !important;
        border-radius: 6px;
        color: #fff;
        &:hover {
          color: #fff;
        }
      }
      &:hover {
        color: $primary;
      }
    }
    padding: 10px 0;
    font-weight: 600;
    color: $dark;
  }
 }
 /*
    Custom Outline
 */
 .pagination-custom_outline {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  .prev {
    border: 2px solid #e0e6ed;
    border-radius: 50%;
    padding: 8px 11px;
    margin-right: 25px;
    &:hover {
      border: 2px solid $primary;
      svg {
        color: $primary;
      }
    }
  }
  .next {
    border: 2px solid #e0e6ed;
    border-radius: 50%;
    padding: 8px 11px;
    margin-left: 25px;
    &:hover {
      border: 2px solid $primary;
      svg {
        color: $primary;
      }
    }
  }
  .prev svg, .next svg {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
  }
  .pagination {
    margin-bottom: 0;
  }
  li {
    padding: 10px 0;
    font-weight: 600;
    color: #888ea8;
    border: 1px solid #e0e6ed;
    &.active {
      background-color: transparent;
    }
    &:first-child {
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px;
    }
    &:last-child {
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }
    a {
      padding: 10px 15px;
      font-weight: 600;
      color: $dark;
      &:hover {
        color: $primary;
      }
    }
    &.active a {
      background-color: transparent;
      border: 2px solid #4361ee !important;
      border-radius: 6px;
      color: $primary;
    }
  }
 }
--- a/ipa-agent/scss/light/assets/elements/custom-tree_view.scss
+++ b/ipa-agent/scss/light/assets/elements/custom-tree_view.scss
@@ -0,0 +1,264 @@
@import '../../base/base';
 /*  Tree View   */
 .treeview {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    li {
        p {
            font-size: 13px;
            color: #888ea8;
            font-weight: 500;
        }
    }
    .tv-item {
        .tv-header {
            padding: 6px 0;
            cursor: pointer;
            position: relative;
            .tv-collapsible {
                display: flex;
                // &:before {
                //     content: '';
                //     position: absolute;
                //     height: 100%;
                //     width: 3px;
                //     background: #000;
                //     top: 20px;
                //     left: 5px;
                //     display: block;
                // }
                // &.collapsed {
                //     &:before {
                //         display: none;
                //     }
                // }
                .icon {
                    margin-right: 6px;
                    align-self: center;
                    svg {
                        width: 14px;
                        height: 14px;
                        transition: .5s;
                        &.icon-tabler-chevron-right {
                        }
                    }
                }
                .title {
                    margin-bottom: 0;
                    align-self: center;
                    font-size: 14px;
                    color: #3b3f5c;
                    font-weight: 600;
                }
                &:not(.collapsed) {
                    .icon {
                        svg {
                            &.icon-tabler-chevron-right {
                                transform: rotate(90deg);
                                color: #3b3f5c;
                            }
                        }
                    }
                }
            }
        }
        .treeview-collapse {
            .treeview {
                position: relative;
                &:before {
                    // content: '';
                    // position: absolute;
                    // height: 100%;
                    // width: 3px;
                    // background: #000;
                    // top: 0;
                    // left: 5.5px;
                    // display: block;
                    content: "";
                    position: absolute;
                    height: calc(100% - 10px);
                    width: 1px;
                    /* background: #000; */
                    top: 0;
                    // left: 5.5px;
                    left: -24px;
                    display: block;
                    border-right: 1px dashed #888ea8;
                    display: none;
                }
            }
            &.show {
                .treeview {
                    &:before {
                        display: block;
                    }
                }
            }
        }
    }
    .treeview {
        margin-left: 30px;
        list-style: none;
        padding: 0;
        .tv-item {
            position: relative;
            &:before {
                content: '';
                position: absolute;
                height: 1px;
                width: 18px;
                /* background: #000; */
                left: -22px;
                top: 10px;
                border-bottom: 1px dashed #888ea8;
            }
            &.tv-folder {
                &:before {
                    left: -22px;
                    top: 18px;
                }
            }
            &:not(.tv-folder) {
                padding-left: 5px;
                // span {
                //     &.icon {
                //         svg {
                //         }
                //     }
                // }
                // p {
                //     display: inline-block;
                // }
            }
        }
    }
    &.folder-structure {
        .tv-item {
            .tv-header {
                padding: 6px 0;
                cursor: pointer;
                .tv-collapsible {
                    display: flex;
                    .icon {
                        margin-right: 6px;
                        align-self: center;
                        svg {
                            width: 20px;
                            height: 20px;
                            transition: .5s;
                            color: #e2a03f;
                            fill: #e2a03f;
                            &.icon-tabler-folder {
                            }
                        }
                    }
                    &:not(.collapsed) {
                        .icon {
                            svg {
                                color: #e2a03f;
                                fill: rgb(226 160 63 / 40%);
                            }
                        }
                    }
                }
            }
        }
        &.treeview {
            .tv-item {
                &:not(.tv-folder) {
                    span {
                        &.icon {
                            margin-left: 5px;
                            svg {
                                color: #888ea8;
                                fill: #4361ee33;
                                width: 20px;
                                height: 20px;
                            }
                        }
                    }
                    p {
                        display: inline-block;
                    }
                }
                &:before {
                    top: 14px;
                }
            }
        }
        .tv-item {
            .treeview-collapse {
                .treeview {
                    &:before {
                        height: calc(100% - 16px);
                    }
                }
            }
        }
    }
 }
--- a/ipa-agent/scss/light/assets/elements/custom-typography.scss
+++ b/ipa-agent/scss/light/assets/elements/custom-typography.scss
@@ -0,0 +1,51 @@
@import '../../base/base';
 .element-background {
  padding: 15px;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
 }
 .font-family-showcase {
  width: 18rem;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  background: #fff;
  margin: 0 auto;
  .font-family-text {
    padding: 20px;
    border-bottom: 1px solid #e0e6ed;
    p {
      font-size: 40px;
      margin-bottom: 0;
    }
  }
  .font-family-info {
    padding: 20px;
    background-color: #ebedf2;
    h5 {
      font-size: 17px;
      margin-bottom: 0;
    }
    a {
      font-weight: 600;
      font-size: 13px;
      color: $primary;
    }
    .font-family-link {
      margin-top: 30px;
      text-align: center;
    }
  }
 }
@media (max-width: 575px) {
  .font-family-showcase {
    width: auto;
  }
 }
--- a/Show More
+++ b/Show More