added error state and manage loading state also

This commit is contained in:
pramod.mahajan 2025-12-25 13:00:29 +05:30
parent 2d5e039701
commit fd89bfead8
17 changed files with 266 additions and 44 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -0,0 +1,20 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path d="M172.5 45V51" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M172.5 59V65" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M162.5 55H168.5" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M176.5 55H182.5" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89.5 148V152" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89.5 160V164" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M81.5 156H85.5" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M93.5 156H97.5" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M160.711 131.126C162.102 129.423 163.352 127.642 164.461 125.799C166.901 121.744 168.66 117.388 169.734 112.897C170.821 108.356 171.209 103.676 170.894 99.0296C170.62 94.9756 169.811 90.9475 168.465 87.0598C167.131 83.2028 165.268 79.484 162.875 76.015C161.45 73.9479 159.836 71.9696 158.034 70.1036C155.388 67.364 152.486 65.0219 149.402 63.0787C146.089 60.9908 142.566 59.3634 138.926 58.1984C134.368 56.7393 129.628 56.0054 124.886 56C121.197 55.9959 117.507 56.4328 113.902 57.3125C109.845 58.3028 105.895 59.8543 102.177 61.9692C98.9076 63.8284 95.817 66.123 92.988 68.8547C89.4328 72.2875 86.553 76.1572 84.3512 80.2985C82.1956 84.3531 80.6899 88.6682 79.8366 93.0887C78.9574 97.6429 78.7706 102.309 79.2789 106.918C79.9378 112.891 81.7643 118.768 84.7644 124.179C86.684 127.641 89.0842 130.912 91.9663 133.896C96.5416 138.634 101.883 142.183 107.604 144.535C114.562 147.397 122.081 148.489 129.465 147.8C135.662 147.221 141.765 145.387 147.361 142.29" fill="white"/>
<path d="M160.711 131.126C162.102 129.423 163.352 127.642 164.461 125.799C166.901 121.744 168.66 117.388 169.734 112.897C170.821 108.356 171.209 103.676 170.894 99.0296C170.62 94.9756 169.811 90.9475 168.465 87.0598C167.131 83.2028 165.268 79.484 162.875 76.015C161.45 73.9479 159.836 71.9696 158.034 70.1036C155.388 67.364 152.486 65.0219 149.402 63.0787C146.089 60.9908 142.566 59.3634 138.926 58.1984C134.368 56.7393 129.628 56.0054 124.886 56C121.197 55.9959 117.507 56.4328 113.902 57.3125C109.845 58.3028 105.895 59.8543 102.177 61.9692C98.9076 63.8284 95.817 66.123 92.988 68.8547C89.4328 72.2875 86.553 76.1572 84.3512 80.2985C82.1956 84.3531 80.6899 88.6682 79.8366 93.0887C78.9574 97.6429 78.7706 102.309 79.2789 106.918C79.9378 112.891 81.7643 118.768 84.7644 124.179C86.684 127.641 89.0842 130.912 91.9663 133.896C96.5416 138.634 101.883 142.183 107.604 144.535C114.562 147.397 122.081 148.489 129.465 147.8C135.662 147.221 141.765 145.387 147.361 142.29" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M150.701 140.378C153.607 138.508 156.191 136.175 157.872 134.291L150.701 140.378Z" fill="white"/>
<path d="M150.701 140.378C153.607 138.508 156.191 136.175 157.872 134.291" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M167 104.617C166.714 104.622 166.427 104.625 166.14 104.625C140.886 104.625 120.209 84.9362 118.476 60C98.3752 63.1706 83 80.6526 83 101.743C83 125.081 101.825 144 125.048 144C147.309 144 165.53 126.615 167 104.617Z" fill="#E8F0FE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.023 100.373C107.8 99.2433 105.903 99.33 104.785 100.567C103.668 101.803 103.753 103.721 104.977 104.851L119.096 117.889C120.808 119.47 123.465 119.349 125.029 117.618C125.095 117.544 125.095 117.544 125.158 117.469L145.307 92.9716C146.366 91.6837 146.192 89.7716 144.918 88.7008C143.644 87.63 141.752 87.806 140.693 89.0939L121.75 112.125L109.023 100.373Z" fill="white" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M110.824 64.4131C108.874 65.1447 106.969 66.0338 105.128 67.0806C102.269 68.7072 99.5648 70.7149 97.0899 73.1049C96.0754 74.0846 95.1237 75.105 94.235 76.161M91.4851 79.8378C90.7785 80.9057 90.1281 82.0004 89.5342 83.1176C89.0956 83.9428 88.6877 84.7803 88.3106 85.6285" fill="white"/>
<path d="M111.263 65.5835C111.909 65.341 112.237 64.6204 111.994 63.974C111.752 63.3277 111.031 63.0003 110.385 63.2428L111.263 65.5835ZM105.128 67.0806L105.746 68.1671L105.128 67.0806ZM97.0899 73.1049L96.2216 72.2057L97.0899 73.1049ZM93.2786 75.3562C92.8341 75.8844 92.902 76.6729 93.4302 77.1174C93.9584 77.5619 94.7469 77.4941 95.1914 76.9659L93.2786 75.3562ZM92.5275 80.5277C92.9085 79.9519 92.7507 79.1764 92.1749 78.7954C91.5992 78.4144 90.8237 78.5723 90.4427 79.148L92.5275 80.5277ZM89.5342 83.1176L90.638 83.7044L90.638 83.7044L89.5342 83.1176ZM87.1684 85.1206C86.8879 85.7515 87.1719 86.4902 87.8027 86.7707C88.4335 87.0511 89.1723 86.7671 89.4528 86.1363L87.1684 85.1206ZM110.385 63.2428C108.373 63.9973 106.409 64.9143 104.51 65.994L105.746 68.1671C107.529 67.1532 109.374 66.2921 111.263 65.5835L110.385 63.2428ZM104.51 65.994C101.56 67.672 98.7724 69.7424 96.2216 72.2057L97.9582 74.0041C100.357 71.6874 102.977 69.7425 105.746 68.1671L104.51 65.994ZM96.2216 72.2057C95.176 73.2154 94.195 74.2673 93.2786 75.3562L95.1914 76.9659C96.0525 75.9427 96.9747 74.9538 97.9582 74.0041L96.2216 72.2057ZM90.4427 79.148C89.7138 80.2494 89.0431 81.3785 88.4305 82.5309L90.638 83.7044C91.2132 82.6222 91.8431 81.562 92.5275 80.5277L90.4427 79.148ZM88.4305 82.5309C87.978 83.382 87.5573 84.2459 87.1684 85.1206L89.4528 86.1363C89.818 85.3148 90.2131 84.5036 90.638 83.7044L88.4305 82.5309Z" fill="#75A4FE"/>
</svg>

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

@ -0,0 +1,10 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M113.119 112.307C113.04 112.86 113 113.425 113 114C113 120.627 118.373 126 125 126C131.627 126 137 120.627 137 114C137 113.425 136.96 112.86 136.881 112.307H166V139C166 140.657 164.657 142 163 142H87C85.3431 142 84 140.657 84 139V112.307H113.119Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M138 112C138 119.18 132.18 125 125 125C117.82 125 112 119.18 112 112C112 111.767 112.006 111.536 112.018 111.307H84L93.5604 83.0389C93.9726 81.8202 95.1159 81 96.4023 81H153.598C154.884 81 156.027 81.8202 156.44 83.0389L166 111.307H137.982C137.994 111.536 138 111.767 138 112Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.098 112.955C136.098 118.502 131.129 124 125 124C118.871 124 113.902 118.502 113.902 112.955C113.902 112.775 113.908 111.596 113.918 111.419H93L101.161 91.5755C101.513 90.6338 102.489 90 103.587 90H146.413C147.511 90 148.487 90.6338 148.839 91.5755L157 111.419H136.082C136.092 111.596 136.098 112.775 136.098 112.955Z" fill="#E8F0FE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M85.25 111.512V138C85.25 138.966 86.0335 139.75 87 139.75H163C163.966 139.75 164.75 138.966 164.75 138V111.512L155.255 83.4393C155.015 82.7285 154.348 82.25 153.598 82.25H96.4023C95.6519 82.25 94.985 82.7285 94.7446 83.4393L85.25 111.512Z" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M98 111C101.937 111 106.185 111 110.745 111C112.621 111 112.621 112.319 112.621 113C112.621 119.627 118.117 125 124.897 125C131.677 125 137.173 119.627 137.173 113C137.173 112.319 137.173 111 139.05 111H164M90.5737 111H93H90.5737Z" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M150.1 58.3027L139 70.7559M124.1 54V70.7559V54ZM98 58.3027L109.1 70.7559L98 58.3027Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,16 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92ZM103.996 140H97.0314H103.996Z" fill="white"/>
<path d="M103.996 140H97.0314M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508H92Z" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M116.612 64.3426C116.612 96.5657 145.633 123.118 183 126.703C178.317 132.461 171.086 136.368 162.847 136.981V137H95.7431C87.6013 137 74 133.57 74 118.548C74 103.527 84.5742 100.097 95.7431 100.097C96.218 100.097 96.6891 100.112 97.1559 100.141C96.8316 98.4556 96.7746 96.7184 96.6623 94.9474C95.9038 82.9842 101.123 67.907 116.63 63C116.618 63.4473 116.612 63.8944 116.612 64.3426ZM127.116 114.758C124.078 114.758 121.614 117.192 121.614 120.195C121.614 123.198 124.078 125.632 127.116 125.632C130.155 125.632 132.618 123.198 132.618 120.195C132.618 117.192 130.155 114.758 127.116 114.758Z" fill="#E8F0FE"/>
<path d="M127.5 126C130.538 126 133 123.538 133 120.5C133 117.462 130.538 115 127.5 115C124.462 115 122 117.462 122 120.5C122 123.538 124.462 126 127.5 126Z" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M112 109L119 103.507L112 98.2776" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M143 109L136 103.507L143 98.2776" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M137 67C143.509 68.7226 148.648 73.8129 150.44 80.2932" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
<path d="M158 50C159.657 50 161 48.6569 161 47C161 45.3431 159.657 44 158 44C156.343 44 155 45.3431 155 47C155 48.6569 156.343 50 158 50Z" stroke="#75A4FE" stroke-width="2"/>
<path d="M189 66C190.657 66 192 64.6569 192 63C192 61.3431 190.657 60 189 60C187.343 60 186 61.3431 186 63C186 64.6569 187.343 66 189 66Z" fill="#75A4FE"/>
<path d="M165.757 57.7573L174.116 66.1156M174.243 57.7573L165.884 66.1156L174.243 57.7573Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M71.4038 75.5962L77.4038 81.5962M77.4038 75.5962L71.4038 81.5962L77.4038 75.5962Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M85 69C86.6569 69 88 67.6569 88 66C88 64.3431 86.6569 63 85 63C83.3431 63 82 64.3431 82 66C82 67.6569 83.3431 69 85 69Z" fill="#75A4FE"/>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -0,0 +1,12 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92 140C79.8497 140 70 130.374 70 118.5C70 106.626 79.8497 97 92 97C92.5167 97 93.0292 97.0174 93.537 97.0517C93.1842 95.0878 93 93.0654 93 91C93 72.2223 108.222 57 127 57C141.991 57 154.716 66.702 159.239 80.1695C160.31 80.0575 161.398 80 162.5 80C179.345 80 193 93.4315 193 110C193 125.741 180.675 138.727 165 139.978V140H108.508M103.996 140H97.0314H103.996Z" fill="white"/>
<path d="M92 141.25C92.6904 141.25 93.25 140.69 93.25 140C93.25 139.31 92.6904 138.75 92 138.75V141.25ZM93.537 97.0517L93.4529 98.2988L95.0504 98.4066L94.7673 96.8306L93.537 97.0517ZM159.239 80.1695L158.054 80.5674L158.372 81.5169L159.369 81.4127L159.239 80.1695ZM165 139.978L164.901 138.732L163.75 138.824V139.978H165ZM165 140V141.25H166.25V140H165ZM108.508 138.75C107.817 138.75 107.258 139.31 107.258 140C107.258 140.69 107.817 141.25 108.508 141.25V138.75ZM92 138.75C80.5128 138.75 71.25 129.657 71.25 118.5H68.75C68.75 131.091 79.1866 141.25 92 141.25V138.75ZM71.25 118.5C71.25 107.343 80.5128 98.25 92 98.25V95.75C79.1866 95.75 68.75 105.909 68.75 118.5H71.25ZM92 98.25C92.4886 98.25 92.9731 98.2665 93.4529 98.2988L93.6211 95.8045C93.0853 95.7684 92.5448 95.75 92 95.75V98.25ZM94.7673 96.8306C94.4275 94.9394 94.25 92.991 94.25 91H91.75C91.75 93.1399 91.9408 95.2362 92.3067 97.2727L94.7673 96.8306ZM94.25 91C94.25 72.9127 108.913 58.25 127 58.25V55.75C107.532 55.75 91.75 71.532 91.75 91H94.25ZM127 58.25C141.438 58.25 153.697 67.5936 158.054 80.5674L160.424 79.7716C155.735 65.8104 142.544 55.75 127 55.75V58.25ZM159.369 81.4127C160.397 81.3052 161.442 81.25 162.5 81.25V78.75C161.355 78.75 160.223 78.8097 159.109 78.9263L159.369 81.4127ZM162.5 81.25C178.674 81.25 191.75 94.1412 191.75 110H194.25C194.25 92.7217 180.015 78.75 162.5 78.75V81.25ZM191.75 110C191.75 125.07 179.945 137.532 164.901 138.732L165.099 141.224C181.406 139.923 194.25 126.411 194.25 110H191.75ZM163.75 139.978V140H166.25V139.978H163.75ZM165 138.75H108.508V141.25H165V138.75ZM103.996 138.75H97.0314V141.25H103.996V138.75ZM97.0314 141.25H103.996V138.75H97.0314V141.25Z" fill="#1F64E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M116.612 64.3426C116.612 96.5657 145.633 123.118 183 126.703C178.317 132.461 171.086 136.367 162.847 136.981V137H95.7431C87.6013 137 74 133.57 74 118.548C74 103.527 84.5742 100.097 95.7431 100.097C96.218 100.097 96.6891 100.112 97.1559 100.141C96.8316 98.4556 96.7746 96.7184 96.6623 94.9474C95.9038 82.9842 101.123 67.907 116.63 63C116.618 63.4473 116.612 63.8944 116.612 64.3426Z" fill="#E8F0FE"/>
<path d="M137 69C143.509 70.7226 148.648 75.8129 150.44 82.2932" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
<path d="M108 101.5C108 105.09 111.134 108 115 108C118.866 108 122 105.09 122 101.5" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M137 101.5C137 105.09 140.134 108 144 108C147.866 108 151 105.09 151 101.5" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M122 120H136.5" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.1561 60.292H57.2101V62.668H65.6581L56.5061 73.756V76H69.3761V73.624H60.0041L69.1561 62.382V60.292ZM82.5681 75.576H73.8801V77.304H80.0241L73.3681 85.368V87H82.7281V85.272H75.9121L82.5681 77.096V75.576Z" fill="#75A4FE"/>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -0,0 +1,10 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.9525 70.5176L152.977 57.2259C154.613 56.964 156.152 58.0779 156.414 59.714C156.414 59.7172 156.415 59.7205 156.415 59.7238L164.537 111.556C164.793 113.189 163.68 114.721 162.048 114.983L79.0227 128.274C77.3867 128.536 75.8481 127.422 75.5862 125.786C75.5857 125.783 75.5851 125.78 75.5846 125.776L67.4629 73.9443C67.207 72.3113 68.3203 70.7789 69.9525 70.5176Z" fill="white"/>
<path d="M83.3448 127.423L80.1615 127.948C77.9748 128.308 75.9214 126.756 75.575 124.481L68.0499 75.0391C67.7036 72.7636 69.1955 70.6268 71.3822 70.2664L151.558 57.0519C153.745 56.6916 155.798 58.2441 156.145 60.5196C156.482 62.7367 156.751 64.5036 156.952 65.8203M157.523 69.5758C157.705 70.7685 157.864 71.8129 158 72.7091" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M73.977 72.792L149.737 60.9609C151.369 60.7061 152.9 61.8183 153.162 63.4492L160.522 109.268C160.785 110.904 159.672 112.443 158.036 112.706C158.032 112.707 158.027 112.707 158.023 112.708L82.2629 124.539C80.631 124.794 79.1 123.682 78.838 122.051L71.4779 76.2319C71.2151 74.596 72.3282 73.0568 73.9641 72.794C73.9684 72.7933 73.9727 72.7927 73.977 72.792Z" fill="#E8F0FE"/>
<path d="M170.75 77.25H92.25C90.0409 77.25 88.25 79.0409 88.25 81.25V129.75C88.25 131.959 90.0409 133.75 92.25 133.75H170.75C172.959 133.75 174.75 131.959 174.75 129.75V81.25C174.75 79.0409 172.959 77.25 170.75 77.25Z" fill="white" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M173.5 89H89.5V103H173.5V89Z" fill="#E8F0FE"/>
<path d="M103.289 89H96.0926M174.171 89H108.331H174.171ZM168.171 102H89.3315H168.171ZM125.062 121H96.7546H125.062Z" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1,10 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M207 65C210.866 65 214 68.134 214 72C214 75.866 210.866 79 207 79H167C170.866 79 174 82.134 174 86C174 89.866 170.866 93 167 93H189C192.866 93 196 96.134 196 100C196 103.866 192.866 107 189 107H178.826C173.952 107 170 110.134 170 114C170 116.577 172 118.911 176 121C179.866 121 183 124.134 183 128C183 131.866 179.866 135 176 135H93C89.134 135 86 131.866 86 128C86 124.134 89.134 121 93 121H54C50.134 121 47 117.866 47 114C47 110.134 50.134 107 54 107H94C97.866 107 101 103.866 101 100C101 96.134 97.866 93 94 93H69C65.134 93 62 89.866 62 86C62 82.134 65.134 79 69 79H109C105.134 79 102 75.866 102 72C102 68.134 105.134 65 109 65H207ZM207 93C210.866 93 214 96.134 214 100C214 103.866 210.866 107 207 107C203.134 107 200 103.866 200 100C200 96.134 203.134 93 207 93Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M153.672 64L162.974 131.843L163.809 138.649C164.079 140.842 162.519 142.837 160.327 143.107L101.766 150.297C99.5738 150.566 97.578 149.007 97.3088 146.814L88.2931 73.3868C88.1584 72.2904 88.9381 71.2925 90.0344 71.1579C90.0413 71.1571 90.0483 71.1563 90.0552 71.1555L94.9136 70.6105M98.8421 70.1698L103.429 69.6553L98.8421 70.1698Z" fill="white"/>
<path d="M154.91 63.8302C154.816 63.1463 154.186 62.6678 153.502 62.7616C152.818 62.8554 152.34 63.4859 152.433 64.1698L154.91 63.8302ZM162.974 131.843L164.214 131.69C164.214 131.685 164.213 131.679 164.212 131.673L162.974 131.843ZM97.3088 146.814L98.5495 146.662L97.3088 146.814ZM88.2931 73.3868L89.5337 73.2344L88.2931 73.3868ZM90.0552 71.1555L89.9159 69.9133L90.0552 71.1555ZM95.0529 71.8527C95.739 71.7758 96.2327 71.1572 96.1558 70.4712C96.0788 69.7851 95.4603 69.2913 94.7742 69.3683L95.0529 71.8527ZM98.7028 68.9276C98.0167 69.0046 97.5229 69.6231 97.5999 70.3092C97.6768 70.9952 98.2954 71.489 98.9814 71.412L98.7028 68.9276ZM103.568 70.8975C104.255 70.8205 104.748 70.202 104.671 69.5159C104.594 68.8299 103.976 68.3361 103.29 68.4131L103.568 70.8975ZM152.433 64.1698L161.735 132.013L164.212 131.673L154.91 63.8302L152.433 64.1698ZM161.733 131.995L162.569 138.801L165.05 138.497L164.214 131.69L161.733 131.995ZM162.569 138.801C162.754 140.309 161.682 141.681 160.174 141.866L160.479 144.347C163.357 143.994 165.403 141.375 165.05 138.497L162.569 138.801ZM160.174 141.866L101.614 149.056L101.919 151.538L160.479 144.347L160.174 141.866ZM101.614 149.056C100.107 149.241 98.7346 148.169 98.5495 146.662L96.0681 146.967C96.4215 149.845 99.0409 151.891 101.919 151.538L101.614 149.056ZM98.5495 146.662L89.5337 73.2344L87.0524 73.5391L96.0681 146.967L98.5495 146.662ZM89.5337 73.2344C89.4833 72.8233 89.7756 72.4491 90.1867 72.3986L89.8821 69.9173C88.1005 70.136 86.8336 71.7576 87.0524 73.5391L89.5337 73.2344ZM90.1867 72.3986C90.1893 72.3983 90.1919 72.398 90.1945 72.3977L89.9159 69.9133C89.9046 69.9145 89.8933 69.9159 89.8821 69.9173L90.1867 72.3986ZM90.1945 72.3977L95.0529 71.8527L94.7742 69.3683L89.9159 69.9133L90.1945 72.3977ZM98.9814 71.412L103.568 70.8975L103.29 68.4131L98.7028 68.9276L98.9814 71.412ZM103.29 68.4131L98.7028 68.9276L98.9814 71.412L103.568 70.8975L103.29 68.4131Z" fill="#1F64E7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.14 68.2692L159.56 129.753L160.317 135.921C160.561 137.908 159.167 139.715 157.203 139.956L104.761 146.395C102.798 146.636 101.008 145.22 100.764 143.233L92.6141 76.8568C92.4795 75.7605 93.2591 74.7626 94.3555 74.628L100.843 73.8314" fill="#E8F0FE"/>
<path d="M110.672 51.25H156.229C156.958 51.25 157.657 51.5393 158.173 52.0547L171.616 65.4902C172.132 66.0059 172.422 66.7053 172.422 67.4346V130C172.422 131.519 171.191 132.75 169.672 132.75H110.672C109.153 132.75 107.922 131.519 107.922 130V54C107.922 52.4812 109.153 51.25 110.672 51.25Z" fill="white" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M156.672 52.4028V64C156.672 65.6569 158.015 67 159.672 67H167.605" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M118 118H144M118 67H144H118ZM118 79H161H118ZM118 92H161H118ZM118 105H161H118Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,14 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.2783 139.123L82.2081 139.695C80.0205 140.002 77.9978 138.478 77.6904 136.291L66.5565 57.0691C66.2491 54.8815 67.7733 52.8588 69.9609 52.5513L148.192 41.5567C150.38 41.2492 152.402 42.7734 152.71 44.961C152.71 44.961 153.422 50.0264 153.667 51.7688" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.805 134.712L85.1092 135.238C83.1227 135.52 81.2886 134.139 81.0126 132.153L71.0174 60.2279C70.7414 58.2417 72.128 56.4028 74.1145 56.1204L145.152 46.0237C147.138 45.7413 148.973 47.1225 149.249 49.1087L150.108 55.2894C150.154 55.6239 153.223 77.8233 159.313 121.888C159.619 124.1 158.093 126.145 155.905 126.454C155.882 126.457 155.858 126.461 155.835 126.463L88.805 134.712Z" fill="#E8F0FE"/>
<path d="M86.2783 139.123L82.2081 139.695C80.0205 140.002 77.9978 138.478 77.6904 136.291L66.5565 57.0691C66.2491 54.8815 67.7733 52.8588 69.9609 52.5513L148.192 41.5567C150.38 41.2492 152.402 42.7734 152.71 44.961C152.71 44.961 153.422 50.0264 153.667 51.7688" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M154.5 56.3796L155 59.5" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M102.844 58.0408L181.411 66.2986C182.922 66.4573 184.018 67.8105 183.859 69.321L175.497 148.883C175.338 150.393 173.985 151.489 172.474 151.33L93.9071 143.072C92.3966 142.914 91.3008 141.561 91.4596 140.05L99.8219 60.4883C99.9806 58.9779 101.334 57.8821 102.844 58.0408Z" fill="white" stroke="#1F64E7" stroke-width="2.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M106.693 69.2546C106.866 67.6068 108.342 66.4115 109.99 66.5846L172.645 73.1699C174.293 73.3431 175.488 74.8193 175.315 76.4671L169.775 129.177C169.602 130.825 168.126 132.02 166.478 131.847L103.823 125.261C102.175 125.088 100.98 123.612 101.153 121.964L106.693 69.2546Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.741 109.878L119.538 103.27C121.172 102.168 123.365 102.42 124.706 103.864L131.879 111.587C132.237 111.972 132.833 112.014 133.242 111.683L148.581 99.2534C150.429 97.7561 153.167 98.1922 154.459 100.189L164.44 115.627L165.873 118.019L165.187 126.143C165.139 126.704 164.639 127.115 164.08 127.053L107.117 120.724C106.575 120.664 106.182 120.181 106.232 119.639L106.987 111.44L109.741 109.878Z" fill="#E8F0FE"/>
<path d="M109.859 67.8278L172.514 74.4131C173.476 74.5141 174.173 75.3752 174.072 76.3364L168.532 129.046C168.431 130.007 167.57 130.705 166.609 130.604L103.954 124.018C102.992 123.917 102.295 123.056 102.396 122.095L107.936 69.3853C108.037 68.4241 108.898 67.7268 109.859 67.8278Z" stroke="#1F64E7" stroke-width="2.5"/>
<circle cx="122.032" cy="85.9494" r="6" transform="rotate(6 122.032 85.9494)" fill="#F3F7FF" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M107.729 111.425C111.665 108.706 119.538 103.27 119.538 103.27C121.172 102.168 123.365 102.42 124.706 103.864L131.879 111.587C132.237 111.972 132.833 112.014 133.241 111.683L148.581 99.2534C150.298 97.8626 152.817 98.1266 154.207 99.843C154.297 99.9539 154.381 100.07 154.459 100.189C154.459 100.189 163.427 114.42 165.523 117.745" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -0,0 +1,16 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path d="M167 148H189.428M64 148H85.4541H64ZM51.1279 148H58H51.1279ZM194.128 148H197H194.128Z" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M98 43.3027L109.1 55.7559M150.1 43.3027L139 55.7559L150.1 43.3027ZM124 39V55.7559V39Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.7976 71H155.404L149.798 79.4098L157.273 85.0164H90.9287L99.3385 79.4098L92.7976 71Z" fill="#E8F0FE"/>
<rect x="89" y="83" width="71" height="75" rx="2" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.5852 124.006V89.6453C93.5852 88.2297 94.7454 87.082 96.1767 87.082L157.153 151.164C157.153 153.052 155.642 154.582 153.778 154.582H96.9601C95.0962 154.582 93.5852 153.052 93.5852 151.164V138.395V134.93V124.006ZM93.5852 131.425V127.577V131.425Z" fill="#E8F0FE"/>
<path d="M90 124.463V86.8853C90 85.3371 91.2705 84.082 92.8377 84.082H157.761C158.782 84.082 159.609 84.9187 159.609 85.9509V154.164C159.609 156.228 157.954 157.902 155.913 157.902H93.6956C91.6546 157.902 90 156.228 90 154.164V140.199V136.41M90 132.576V128.368" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M91.8631 84.0819V72.8688C91.8631 71.8367 92.614 70.9999 93.5403 70.9999H155.596C156.522 70.9999 157.273 71.8367 157.273 72.8688V84.0819" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M109.15 103.705C110.956 103.705 112.42 102.241 112.42 100.434C112.42 98.6282 110.956 97.1639 109.15 97.1639C107.344 97.1639 105.879 98.6282 105.879 100.434C105.879 102.241 107.344 103.705 109.15 103.705Z" fill="#E8F0FE" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M139.986 103.705C141.792 103.705 143.257 102.241 143.257 100.434C143.257 98.6282 141.792 97.1639 139.986 97.1639C138.18 97.1639 136.716 98.6282 136.716 100.434C136.716 102.241 138.18 103.705 139.986 103.705Z" fill="#E8F0FE" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M139.519 103.705C139.519 111.962 132.825 118.656 124.568 118.656C116.311 118.656 109.617 111.962 109.617 103.705" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M92.8545 71.9315L99.4329 78.4252C99.8259 78.8132 99.8301 79.4463 99.4421 79.8394C99.3749 79.9074 99.2984 79.9654 99.2148 80.0117L91.863 84.082" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M156.44 71.9993L150.145 78.4197C149.758 78.8141 149.765 79.4472 150.159 79.8339C150.225 79.8984 150.299 79.9535 150.38 79.9977L157.867 84.082" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -0,0 +1,10 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M63 134H154C154.515 134 155.017 133.944 155.5 133.839C155.983 133.944 156.485 134 157 134H209C212.866 134 216 130.866 216 127C216 123.134 212.866 120 209 120H203C199.134 120 196 116.866 196 113C196 109.134 199.134 106 203 106H222C225.866 106 229 102.866 229 99C229 95.134 225.866 92 222 92H200C203.866 92 207 88.866 207 85C207 81.134 203.866 78 200 78H136C139.866 78 143 74.866 143 71C143 67.134 139.866 64 136 64H79C75.134 64 72 67.134 72 71C72 74.866 75.134 78 79 78H39C35.134 78 32 81.134 32 85C32 88.866 35.134 92 39 92H64C67.866 92 71 95.134 71 99C71 102.866 67.866 106 64 106H24C20.134 106 17 109.134 17 113C17 116.866 20.134 120 24 120H63C59.134 120 56 123.134 56 127C56 130.866 59.134 134 63 134ZM226 134C229.866 134 233 130.866 233 127C233 123.134 229.866 120 226 120C222.134 120 219 123.134 219 127C219 130.866 222.134 134 226 134Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.577 126.075C166 128 163.488 129.81 160.644 131.374L160.809 145.457C160.822 146.562 159.937 147.467 158.832 147.48C158.383 147.486 157.945 147.339 157.589 147.066L144.926 137.323C140.18 138.416 135.173 139 130 139C99.6243 139 75 118.853 75 94C75 69.1472 99.6243 49 130 49C160.376 49 185 69.1472 185 94C185 100.879 183.114 107.397 179.741 113.227C179.119 114.303 178.446 115.355 177.726 116.381C177.726 116.381 176.317 118.5 173.5 121.5C170.683 124.5 168.577 126.075 168.577 126.075Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.577 126.075C166 128 163.488 129.81 160.644 131.374L160.809 145.457C160.822 146.562 159.937 147.467 158.832 147.48C158.383 147.486 157.945 147.339 157.589 147.066L144.926 137.323C140.18 138.416 135.173 139 130 139C99.6243 139 75 118.853 75 94C75 69.1472 99.6243 49 130 49C160.376 49 185 69.1472 185 94C185 100.879 183.114 107.397 179.741 113.227C179.119 114.303 178.446 115.355 177.726 116.381C177.726 116.381 176.317 118.5 173.5 121.5C170.683 124.5 168.577 126.075 168.577 126.075Z" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.853 81.5895C168.157 81.5895 173.266 80.957 178.051 79.7868C179.961 84.1364 181 88.8232 181 93.7074C181 100.043 179.251 106.047 176.123 111.417C175.547 112.408 174.923 113.376 174.255 114.322C173.2 115.815 172.448 116.869 171.785 117.714C170.219 119.713 169.155 120.544 165.771 123.25C163.515 125.055 161.052 126.691 158.415 128.131L158.568 141.103C158.58 142.12 158.889 143.988 157.865 144C157.449 144.005 155.913 142.837 155.583 142.584L145.373 133.467C140.972 134.473 134.797 135.156 130 135.156C101.833 135.156 79 116.599 79 93.7074C79 74.961 94.3133 59.1215 115.328 54C120.832 69.8745 140.023 81.5895 162.853 81.5895ZM110.291 88.1483C106.986 88.1483 104.307 90.8448 104.307 94.1711C104.307 97.4974 106.986 100.194 110.291 100.194C113.596 100.194 116.275 97.4974 116.275 94.1711C116.275 90.8448 113.596 88.1483 110.291 88.1483ZM129.241 88.1483C125.936 88.1483 123.257 90.8448 123.257 94.1711C123.257 97.4974 125.936 100.194 129.241 100.194C132.546 100.194 135.225 97.4974 135.225 94.1711C135.225 90.8448 132.546 88.1483 129.241 88.1483ZM148.191 88.1483C144.886 88.1483 142.207 90.8448 142.207 94.1711C142.207 97.4974 144.886 100.194 148.191 100.194C151.496 100.194 154.176 97.4974 154.176 94.1711C154.176 90.8448 151.496 88.1483 148.191 88.1483Z" fill="#E8F0FE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M110 88C113.314 88 116 90.6863 116 94C116 97.3137 113.314 100 110 100C106.686 100 104 97.3137 104 94C104 90.6863 106.686 88 110 88ZM129 88C132.314 88 135 90.6863 135 94C135 97.3137 132.314 100 129 100C125.686 100 123 97.3137 123 94C123 90.6863 125.686 88 129 88ZM148 88C151.314 88 154 90.6863 154 94C154 97.3137 151.314 100 148 100C144.686 100 142 97.3137 142 94C142 90.6863 144.686 88 148 88Z" fill="white" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M89.6621 79.3112C88.7541 80.8431 87.9672 82.4329 87.3118 84.0722" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
<path d="M108.022 63.0732C101.469 66.2006 95.937 70.6244 91.9392 75.9203" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,15 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M207 65C210.866 65 214 68.134 214 72C214 75.866 210.866 79 207 79H167C170.866 79 174 82.134 174 86C174 89.866 170.866 93 167 93H189C192.866 93 196 96.134 196 100C196 103.866 192.866 107 189 107H178.826C173.952 107 170 110.134 170 114C170 116.577 172 118.911 176 121C179.866 121 183 124.134 183 128C183 131.866 179.866 135 176 135H93C89.134 135 86 131.866 86 128C86 124.134 89.134 121 93 121H54C50.134 121 47 117.866 47 114C47 110.134 50.134 107 54 107H94C97.866 107 101 103.866 101 100C101 96.134 97.866 93 94 93H69C65.134 93 62 89.866 62 86C62 82.134 65.134 79 69 79H109C105.134 79 102 75.866 102 72C102 68.134 105.134 65 109 65H207ZM207 93C210.866 93 214 96.134 214 100C214 103.866 210.866 107 207 107C203.134 107 200 103.866 200 100C200 96.134 203.134 93 207 93Z" fill="#F3F7FF"/>
<path d="M120.5 133C139.002 133 154 118.002 154 99.5C154 80.9985 139.002 66 120.5 66C101.998 66 87 80.9985 87 99.5C87 118.002 101.998 133 120.5 133Z" fill="#F3F7FF" stroke="#1F64E7" stroke-width="2.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M115.132 125.494C116.891 125.819 118.68 125.987 120.5 126C135.136 126 147 114.136 147 99.5C147 84.8645 135.136 73 120.5 73C116.74 73 113.164 73.7829 109.924 75.1946C104.294 77.6479 99.6816 81.9999 96.896 87.4419C95.0445 91.0589 94 95.1575 94 99.5C94 103.44 94.8599 107.179 96.4021 110.54C97.5032 112.94 98.9521 115.146 100.684 117.096" fill="white"/>
<path d="M115.132 125.494C116.891 125.819 118.68 125.987 120.5 126C135.136 126 147 114.136 147 99.5C147 84.8645 135.136 73 120.5 73C116.74 73 113.164 73.7829 109.924 75.1946C104.294 77.6479 99.6816 81.9999 96.896 87.4419C95.0445 91.0589 94 95.1575 94 99.5C94 103.44 94.8599 107.179 96.4021 110.54C97.5032 112.94 98.9521 115.146 100.684 117.096" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M103.797 120.075C105.945 121.821 108.372 123.237 111.001 124.247" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M148 126L154 132" stroke="#1F64E7" stroke-width="2.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M153.03 131.03C151.138 132.923 151.138 135.992 153.03 137.884L164.116 148.97C166.008 150.862 169.077 150.862 170.97 148.97C172.863 147.077 172.863 144.008 170.97 142.116L159.885 131.03C157.992 129.138 154.923 129.138 153.03 131.03Z" fill="#E8F0FE" stroke="#1F64E7" stroke-width="2.5"/>
<path d="M158 133L169 144" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M114 88C114 99.598 123.402 109 135 109C137.278 109 139.472 108.637 141.526 107.966C138.173 116.287 130.023 122.161 120.5 122.161C107.985 122.161 97.8394 112.015 97.8394 99.5C97.8394 88.1596 106.17 78.7648 117.045 77.1011C115.113 80.2793 114 84.0097 114 88Z" fill="#E8F0FE"/>
<path d="M121 81C119.727 81 118.482 81.1253 117.279 81.3642M113.645 82.4761C106.804 85.3508 102 92.1144 102 100" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
<path d="M174.176 99.7773H166M180.5 92H163.324H180.5ZM187.5 92H185.279H187.5Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M84.1758 121.777H76M79.5 113H62.3242H79.5ZM56.5 113H52.2788H56.5Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1,11 @@
<svg width="250" height="200" viewBox="0 0 250 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="200" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M207 65C210.866 65 214 68.134 214 72C214 75.866 210.866 79 207 79H167C170.866 79 174 82.134 174 86C174 89.866 170.866 93 167 93H189C192.866 93 196 96.134 196 100C196 103.866 192.866 107 189 107H178.826C173.952 107 170 110.134 170 114C170 116.577 172 118.911 176 121C179.866 121 183 124.134 183 128C183 131.866 179.866 135 176 135H93C89.134 135 86 131.866 86 128C86 124.134 89.134 121 93 121H54C50.134 121 47 117.866 47 114C47 110.134 50.134 107 54 107H94C97.866 107 101 103.866 101 100C101 96.134 97.866 93 94 93H69C65.134 93 62 89.866 62 86C62 82.134 65.134 79 69 79H109C105.134 79 102 75.866 102 72C102 68.134 105.134 65 109 65H207ZM207 93C210.866 93 214 96.134 214 100C214 103.866 210.866 107 207 107C203.134 107 200 103.866 200 100C200 96.134 203.134 93 207 93Z" fill="#F3F7FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M99.942 133.192L101.432 133.141V154.14C101.432 154.615 101.819 155 102.296 155H154.136C154.613 155 155 154.615 155 154.14V82.155C155 80.4126 153.582 79 151.832 79H104.6C102.85 79 101.432 80.4126 101.432 82.155V97.1227L99.942 97.0711C99.767 97.065 99.5917 97.062 99.416 97.062C90.3809 97.062 83 105.124 83 115.132C83 125.139 90.3809 133.202 99.416 133.202C99.5917 133.202 99.767 133.199 99.942 133.192ZM100.107 126.29C99.8778 126.309 99.6473 126.318 99.416 126.318C93.9625 126.318 89.6432 121.263 89.6432 115.132C89.6432 109.001 93.9625 103.946 99.416 103.946C99.6473 103.946 99.8778 103.955 100.107 103.973L101.432 104.079V126.184L100.107 126.29Z" fill="white" stroke="#1F64E7" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M147 85.1816V103.5M147 109.182V113.925V109.182Z" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M67.1279 147H74M181.128 147H184M161 147H176.428M80 147H97.4541" stroke="#1F64E7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M128 35C125.333 39.2135 124 42.8802 124 46C124 51.5562 128.654 54.0444 128.654 60.063C128.654 63.1177 127.103 66.1507 124 69.1621" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
<path d="M116 46C115.128 51.5127 119 52.5322 119 57.4746C119 59.9831 118 62.4915 116 65" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
<path d="M134.795 43.4741C133.474 46.8933 134.216 48.9774 134.795 50.2041C136.033 52.8262 138 55.0896 138 57.7578C138 60.8568 136.932 63.8392 134.795 66.7051" stroke="#75A4FE" stroke-width="2.5" stroke-linecap="round"/>
<path d="M105 84C105 83.4477 105.448 83 106 83L125 83V152H106C105.448 152 105 151.552 105 151V84Z" fill="#E8F0FE"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -32,7 +32,7 @@ export const CollectionRepository = {
isPending, isPending,
filter filter
) => { ) => {
let url = `/api/Collection/invoice/list`; let url = `/api/collection/invoice/list/dynamic`;
const params = []; const params = [];
if (projectId) params.push(`projectId=${projectId}`); if (projectId) params.push(`projectId=${projectId}`);

View File

@ -55,6 +55,7 @@ export default function PmsGrid({
colState, colState,
updateColumn, updateColumn,
loading, loading,
error,
totalRows, totalRows,
expanded, expanded,
toggleExpand, toggleExpand,
@ -185,7 +186,7 @@ export default function PmsGrid({
</button> </button>
)} )}
{features.grouping && ( {features.grouping && (
<div className="dropdown"> <div className="dropdown ">
<button <button
className="btn btn-sm btn-outline-secondary" className="btn btn-sm btn-outline-secondary"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
@ -365,21 +366,31 @@ export default function PmsGrid({
</thead> </thead>
<tbody> <tbody>
{loading && ( {loading || totalRows === 0
<tr> ? Array.from({ length: 1 }).map((_, index) => (
<td <tr className="">
colSpan={ <td
visibleColumns.length + key={index}
(features.selection ? 1 : 0) + colSpan={
(features.actions ? 1 : 0) visibleColumns.length +
} (features.selection ? 1 : 0) +
className="text-center py-4" (features.actions ? 1 : 0)
> }
Loading... className="text-center py-4 "
</td> >
</tr> <div className=" d-flex justify-content-center align-items-center vh-50">
)} <div>
{!loading && groupBy && groupedRows && groupedRows.length > 0 {loading ? (<p>Loading...</p>):(<img
src="/img/illustrations/NoSearchResult.svg"
alt="Image"
/>) }
</div>
</div>
</td>
</tr>
))
: !loading && groupBy && groupedRows && groupedRows.length > 0
? groupedRows.map((g, indG) => ( ? groupedRows.map((g, indG) => (
<React.Fragment key={g.key}> <React.Fragment key={g.key}>
<tr className="bg-light-primary"> <tr className="bg-light-primary">
@ -421,7 +432,7 @@ export default function PmsGrid({
value={pageSize} value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))} onChange={(e) => setPageSize(Number(e.target.value))}
> >
{[10, 25, 50, 100].map((n) => ( {[25, 50, 100].map((n) => (
<option key={n} value={n}> <option key={n} value={n}>
{n} {n}
</option> </option>

View File

@ -129,15 +129,30 @@ const PmsHeaderOption = ({
className="dropdown-menu shadow rounded-3 py-2 show" className="dropdown-menu shadow rounded-3 py-2 show"
style={pinStyle} style={pinStyle}
> >
<button className="dropdown-item" onClick={onUnpin}> <div className="dropdown-item d-flex flex-row gap-2 cursor-pointer" onClick={onUnpin}>
No Pin {!pinned && <i className="bx bx-check text-primary" />}
</button> <span className="" >
<button className="dropdown-item" onClick={onPinLeft}> No Pin
Pin Left </span>
</button> </div>
<button className="dropdown-item" onClick={onPinRight}>
Pin Right <div className="dropdown-item d-flex flex-row gap-2 cursor-pointer" onClick={onPinLeft}>
</button> {pinned === "left" && (
<i className="bx bx-check text-primary" />
)}
<span className="" >
Pin Left
</span>
</div>
<div className="dropdown-item d-flex flex-row gap-2 cursor-pointer" onClick={onPinRight}>
{pinned === "right" && (
<i className="bx bx-check text-primary" />
)}
<span className="" >
Pin Right
</span>
</div>
</ul> </ul>
)} )}
</li> </li>

View File

@ -215,3 +215,42 @@
} }
/* Skeleton Loader */
.loading-skeleton {
color: transparent;
appearance: none;
-webkit-appearance: none;
background-color: #eee;
border-color: #eee;
&::placeholder {
color: transparent;
}
}
@keyframes loading-skeleton {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
.loading-skeleton {
pointer-events: none;
animation: loading-skeleton 1s infinite alternate;
img {
filter: grayscale(100) contrast(0%) brightness(1.8);
}
h1, h2, h3, h4, h5, h6,
p, li,
.btn,
label,
.form-control {
@extend %loading-skeleton;
}
}

View File

@ -1,4 +1,11 @@
import { useState, useMemo, useCallback, useEffect,useLayoutEffect } from "react"; import { error } from "pdf-lib";
import {
useState,
useMemo,
useCallback,
useEffect,
useLayoutEffect,
} from "react";
/* /*
options: options:
@ -7,13 +14,12 @@ import { useState, useMemo, useCallback, useEffect,useLayoutEffect } from "react
- initialPageSize - initialPageSize
*/ */
export function useGridCore({ export function useGridCore({
data, data,
serverMode = false, serverMode = false,
fetcher, fetcher,
rowKey = "id", rowKey = "id",
initialPageSize = 5, initialPageSize = 20,
columns = [], columns = [],
}) { }) {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
@ -40,6 +46,7 @@ export function useGridCore({
const [totalRows, setTotalRows] = useState(data ? data.length : 0); const [totalRows, setTotalRows] = useState(data ? data.length : 0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [serverRows, setServerRows] = useState([]); const [serverRows, setServerRows] = useState([]);
/* ---------------- SEARCH (DEBOUNCE) ---------------- */ /* ---------------- SEARCH (DEBOUNCE) ---------------- */
@ -62,7 +69,9 @@ export function useGridCore({
const q = search.toLowerCase(); const q = search.toLowerCase();
filtered = filtered.filter((r) => filtered = filtered.filter((r) =>
Object.values(r).some((v) => Object.values(r).some((v) =>
String(v ?? "").toLowerCase().includes(q) String(v ?? "")
.toLowerCase()
.includes(q)
) )
); );
} }
@ -121,6 +130,8 @@ export function useGridCore({
setServerRows(resp?.rows || []); setServerRows(resp?.rows || []);
setTotalRows(resp?.total ?? resp?.rows?.length ?? 0); setTotalRows(resp?.total ?? resp?.rows?.length ?? 0);
} catch (err) {
setError(err);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -140,18 +151,18 @@ export function useGridCore({
}, [serverMode, fetchServer]); }, [serverMode, fetchServer]);
/* ---------------- ADVANCED FILTER API ---------------- */ /* ---------------- ADVANCED FILTER API ---------------- */
const setColumnAdvanceFilter = useCallback((columnKey, filter) => { const setColumnAdvanceFilter = useCallback((column, filter) => {
setAdvanceFilters((prev) => { setAdvanceFilters((prev) => {
if (!filter) { if (!filter) {
const copy = { ...prev }; const copy = { ...prev };
delete copy[columnKey]; delete copy[column];
return copy; return copy;
} }
return { return {
...prev, ...prev,
[columnKey]: { [column]: {
columnKey, column,
...filter, ...filter,
}, },
}; };
@ -235,8 +246,9 @@ export function useGridCore({
totalRows, totalRows,
totalPages, totalPages,
// loading // loading & error
loading, loading,
error,
// search // search
search, search,
@ -279,13 +291,6 @@ export function useGridCore({
}; };
} }
export function useDropdownPosition(btnRef, menuRef, isOpen, level = 0) { export function useDropdownPosition(btnRef, menuRef, isOpen, level = 0) {
const [style, setStyle] = useState({}); const [style, setStyle] = useState({});
@ -348,4 +353,3 @@ export function useDropdownPosition(btnRef, menuRef, isOpen, level = 0) {
return style; return style;
} }