Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
//
// WSO2 LLC. licenses this file to you under the Apache License,
// Version 2.0 (the "License"); you may not use this file except
// in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.

import type { JSX, SVGProps } from "react";

/**
* EmptyIcon component for displaying an empty state icon.
*
* @param {SVGProps<SVGSVGElement>} props - SVG props.
* @returns {JSX.Element} The EmptyIcon component.
*/
const EmptyIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
<svg
width="268"
height="229"
viewBox="0 0 268 229"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Comment thread
dileepapeiris marked this conversation as resolved.
Resolved
{...props}
>
<path
opacity="0.1"
d="M266.771 157.888C259.451 120.893 216.567 91.3251 208.203 52.7732C193.001 3.72478 142.895 -4.02988 110.334 17.2718C58.7425 51.0247 113.78 59.4007 12.6255 139.258C-12.3519 158.976 -4.39295 246.018 74.1844 226.042C116.471 215.292 129.326 213.783 148.347 212.013C196.29 207.552 279.058 219.99 266.771 157.888Z"
fill="url(#paint0_linear_1857_52)"
/>
<path
d="M209.498 167.161L135.397 206.386L61.4086 167.161V107.927H209.498V167.161Z"
fill="url(#paint1_linear_1857_52)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M135.5 206.452L209.589 167.233V107.999H135.5V206.452Z"
fill="url(#paint2_linear_1857_52)"
/>
<path
d="M209.498 95.2168L135.397 55.9916L168.695 39.9053L242.796 79.1309L209.498 95.2168Z"
fill="url(#paint3_linear_1857_52)"
/>
<path
d="M61.4086 95.2168L135.509 55.9916L102.211 39.9053L28.1107 79.1309L61.4086 95.2168Z"
fill="url(#paint4_linear_1857_52)"
/>
<path
d="M61.4086 95.2168L135.509 134.443L97.4091 155.341L23.3087 116.116L61.4086 95.2168Z"
fill="url(#paint5_linear_1857_52)"
/>
<path
d="M209.498 95.2168L135.397 134.443L173.497 155.341L247.598 116.116L209.498 95.2168Z"
fill="url(#paint6_linear_1857_52)"
/>
<path
d="M135.509 55.9916L61.4086 95.2168L135.397 134.443L209.498 95.2168L135.509 55.9916Z"
fill="#303030"
/>
<path
d="M93.88 91.6557C93.7806 91.6558 93.6837 91.6247 93.6029 91.5667C93.499 91.4929 93.4286 91.3808 93.4071 91.2549C93.3857 91.1291 93.415 90.9999 93.4886 90.8958C93.5775 90.7701 102.256 78.1948 92.5676 66.7303C90.8528 64.6906 88.7137 63.0515 86.3002 61.9278C83.8867 60.8041 81.2572 60.2229 78.596 60.2251H78.4654C79.3855 63.4286 79.2213 66.277 77.9185 68.462C77.3633 69.4494 76.5442 70.2618 75.5532 70.8078C74.5623 71.3537 73.4389 71.6114 72.3097 71.552C71.3749 71.4752 70.4828 71.1269 69.7425 70.5497C69.0023 69.9725 68.446 69.1915 68.142 68.3022C67.0764 65.5165 68.19 62.8155 71.125 61.0746C72.9843 60.0469 75.0504 59.4513 77.1703 59.3318C76.4807 57.4992 75.5839 55.7518 74.4975 54.1237C70.9992 48.7688 64.6235 45.0619 57.0046 43.9534C50.5477 43.0144 44.3598 44.1205 41.238 46.7705C41.1408 46.8529 41.0148 46.8933 40.8879 46.8827C40.761 46.8721 40.6434 46.8114 40.5611 46.7139C40.4789 46.6165 40.4386 46.4902 40.4492 46.363C40.4598 46.2358 40.5203 46.118 40.6176 46.0355C43.9396 43.2156 50.4258 42.0234 57.1424 43.0034C65.0336 44.1517 71.6518 48.0132 75.3013 53.5986C76.4845 55.37 77.447 57.2799 78.1672 59.2856C81.038 59.2165 83.8876 59.7938 86.5063 60.9749C89.1249 62.1561 91.4458 63.911 93.298 66.1104C103.475 78.152 94.3626 91.3231 94.2694 91.455C94.2251 91.517 94.1666 91.5676 94.0989 91.6025C94.0312 91.6374 93.9561 91.6556 93.88 91.6557ZM77.482 60.2603C75.4266 60.3481 73.4192 60.9104 71.6162 61.9034C69.0827 63.406 68.1444 65.6132 69.0409 67.9581C69.2838 68.6766 69.7304 69.3086 70.3261 69.7766C70.9217 70.2447 71.6405 70.5287 72.3947 70.5937C73.3442 70.6363 74.2868 70.4134 75.1171 69.9498C75.9474 69.4862 76.6327 68.8003 77.0963 67.9687C78.2921 65.9617 78.4015 63.2939 77.4805 60.2603H77.482Z"
fill="#292A2E"
/>
<path
d="M32.9501 54.5304C32.1341 54.7761 31.2546 54.6929 30.4989 54.2984C29.7432 53.9038 29.171 53.2292 28.9042 52.4182C28.6373 51.6072 28.6969 50.7237 29.0702 49.9561C29.4435 49.1884 30.101 48.5971 30.9028 48.3081C31.7046 48.0191 32.5873 48.0552 33.3629 48.4087C34.1386 48.7622 34.7459 49.4052 35.0555 50.2008C35.3652 50.9964 35.3528 51.8818 35.0209 52.6683C34.689 53.4549 34.0639 54.0805 33.2786 54.412C33.1714 54.4575 33.0617 54.497 32.9501 54.5304ZM31.3535 49.1823C31.2757 49.2057 31.1992 49.2333 31.1244 49.265C30.5719 49.4985 30.1321 49.939 29.8988 50.4926C29.6656 51.0463 29.6571 51.6693 29.8754 52.2291C30.0937 52.7889 30.5213 53.2411 31.0674 53.4895C31.6134 53.7379 32.2346 53.7628 32.7986 53.559C33.3627 53.3551 33.8251 52.9386 34.0873 52.3981C34.3495 51.8576 34.3908 51.2359 34.2024 50.6653C34.014 50.0947 33.6108 49.6204 33.0787 49.3434C32.5465 49.0664 31.9275 49.0086 31.3535 49.1823Z"
fill="#292A2E"
/>
<path
d="M32.9444 46.9885C32.1724 47.2195 31.3426 47.1564 30.6143 46.8112C29.886 46.466 29.3107 45.8632 28.999 45.1187C28.7491 44.5217 28.6815 43.864 28.8046 43.2285C28.9277 42.593 29.2361 42.0084 29.6907 41.5486C30.1453 41.0888 30.7258 40.7745 31.3587 40.6454C31.9915 40.5162 32.6484 40.5781 33.2462 40.8231C33.844 41.0682 34.3559 41.4854 34.7171 42.022C35.0783 42.5587 35.2726 43.1906 35.2755 43.8379C35.2783 44.4853 35.0896 45.1189 34.7331 45.6587C34.3766 46.1985 33.8685 46.6203 33.2728 46.8706C33.1655 46.9156 33.0558 46.955 32.9444 46.9885ZM31.3496 41.6399C31.2709 41.6635 31.1935 41.6913 31.1177 41.7231C30.5543 41.9603 30.108 42.4119 29.8768 42.9788C29.6455 43.5456 29.6483 44.1813 29.8845 44.7461C30.0568 45.1579 30.3444 45.5107 30.7125 45.7621C31.0807 46.0134 31.5136 46.1524 31.9589 46.1624C32.4043 46.1723 32.8429 46.0527 33.2218 45.818C33.6008 45.5833 33.9037 45.2436 34.0941 44.8399C34.2844 44.4363 34.354 43.986 34.2944 43.5436C34.2348 43.1011 34.0486 42.6855 33.7582 42.3469C33.4679 42.0083 33.0859 41.7613 32.6584 41.6357C32.231 41.5102 31.7764 41.5119 31.3496 41.6399Z"
fill="#292A2E"
/>
<path
d="M32.0123 50.3922C34.3705 50.3922 36.2823 49.1125 36.2823 47.5338C36.2823 45.9551 34.3705 44.6754 32.0123 44.6754C29.6541 44.6754 27.7423 45.9551 27.7423 47.5338C27.7423 49.1125 29.6541 50.3922 32.0123 50.3922Z"
fill="white"
/>
<path
d="M33.9024 50.6026C33.2902 50.7839 32.655 50.8753 32.0166 50.874C29.3524 50.874 27.2626 49.4109 27.2626 47.5381C27.2626 45.6654 29.3462 44.197 32.0094 44.1941C33.1705 44.1718 34.3129 44.4896 35.2964 45.1086C35.7381 45.3392 36.1084 45.6867 36.3669 46.1134C36.6254 46.5401 36.7623 47.0297 36.7627 47.5289C36.7632 48.0281 36.6271 48.5179 36.3694 48.945C36.1117 49.3722 35.7421 49.7204 35.3007 49.9518C34.8693 50.2369 34.3981 50.4562 33.9024 50.6026ZM30.4151 45.3858C29.132 45.7708 28.2225 46.602 28.223 47.5357C28.223 48.8242 29.9599 49.9114 32.0166 49.9095C32.9882 49.93 33.9446 49.6664 34.7692 49.151C35.0784 49.0082 35.3403 48.7796 35.5238 48.4921C35.7072 48.2047 35.8046 47.8705 35.8043 47.5293C35.804 47.188 35.706 46.8541 35.522 46.5669C35.3381 46.2798 35.0758 46.0516 34.7663 45.9094C33.9411 45.3951 32.9842 45.1331 32.0128 45.1557C31.4719 45.1543 30.9337 45.2318 30.4151 45.3858Z"
fill="#292A2E"
/>
<path
d="M33.0596 50.3051L32.9588 44.7461L31.5796 44.6903L31.4831 50.3701L33.0596 50.3051Z"
fill="#292A2E"
/>
<path
d="M26.3473 48.7433C26.5908 48.7433 26.7881 48.5455 26.7881 48.3015C26.7881 48.0575 26.5908 47.8596 26.3473 47.8596C26.1039 47.8596 25.9065 48.0575 25.9065 48.3015C25.9065 48.5455 26.1039 48.7433 26.3473 48.7433Z"
fill="#292A2E"
/>
<path
d="M26.6916 46.3792C26.9351 46.3792 27.1325 46.1814 27.1325 45.9374C27.1325 45.6933 26.9351 45.4955 26.6916 45.4955C26.4482 45.4955 26.2508 45.6933 26.2508 45.9374C26.2508 46.1814 26.4482 46.3792 26.6916 46.3792Z"
fill="#292A2E"
/>
<path
d="M169.332 63.8993C169.229 63.8993 169.129 63.8663 169.047 63.805C168.964 63.7438 168.903 63.6576 168.873 63.5591C167.28 57.5976 166.855 51.3832 167.622 45.2597C168.863 36.3076 173.789 24.5586 190.206 19.4141C192.516 18.6697 194.885 18.1253 197.288 17.7868C198.061 12.9445 201.004 7.69159 207.585 4.06743C223.222 -4.54393 233.784 3.18232 233.889 3.26126C233.99 3.33784 234.058 3.45186 234.076 3.57823C234.094 3.70459 234.061 3.83295 233.985 3.93507C233.908 4.03719 233.794 4.1047 233.668 4.12275C233.542 4.1408 233.414 4.10792 233.312 4.03133C233.212 3.95625 223.119 -3.38882 208.048 4.91162C201.899 8.29851 199.084 13.1596 198.283 17.6722C205.524 16.9575 208.992 19.3784 210.548 21.2069C211.511 22.3064 212.13 23.6656 212.328 25.1152C212.525 26.5647 212.293 28.0405 211.659 29.3586C211.159 30.424 210.348 31.3122 209.333 31.9059C208.318 32.4996 207.148 32.7709 205.976 32.6839C201.932 32.4461 198.586 29.0366 197.452 23.9974C197.077 22.2916 196.978 20.5368 197.157 18.7994C194.897 19.1249 192.668 19.6386 190.493 20.3353C177.698 24.3449 170.324 32.7768 168.573 45.3949C167.822 51.3795 168.236 57.4532 169.791 63.2799C169.813 63.3519 169.818 63.428 169.806 63.5022C169.793 63.5764 169.763 63.6466 169.718 63.7071C169.674 63.7676 169.615 63.8168 169.548 63.8507C169.481 63.8846 169.407 63.9022 169.332 63.9022V63.8993ZM198.136 18.6791C197.936 20.3834 198.021 22.1091 198.388 23.7852C199.426 28.3951 202.427 31.5105 206.032 31.7227C207.015 31.7933 207.996 31.5645 208.847 31.0664C209.698 30.5682 210.379 29.8239 210.8 28.9312C211.349 27.7818 211.548 26.4959 211.373 25.2336C211.199 23.9714 210.657 22.7886 209.816 21.8326C207.571 19.1917 203.473 18.1251 198.136 18.6791Z"
fill="#292A2E"
/>
<path
d="M245.075 8.12572C244.428 8.12436 243.795 7.93972 243.248 7.59312C242.701 7.24651 242.264 6.75206 241.986 6.16684C241.707 5.58162 241.6 4.92949 241.676 4.2857C241.751 3.64191 242.007 3.03271 242.414 2.52841C242.82 2.02412 243.361 1.64528 243.973 1.43562C244.585 1.22597 245.243 1.19404 245.873 1.34353C246.502 1.49302 247.076 1.81782 247.529 2.28046C247.982 2.7431 248.296 3.32471 248.433 3.95817C248.541 4.46032 248.535 4.98024 248.416 5.47985C248.297 5.97947 248.069 6.44614 247.747 6.84569C247.425 7.24524 247.018 7.56755 246.555 7.78903C246.093 8.01051 245.587 8.12555 245.075 8.12572ZM245.082 2.21347C244.571 2.21346 244.073 2.37222 243.656 2.66788C243.239 2.96355 242.924 3.38155 242.754 3.86427C242.584 4.347 242.567 4.8707 242.707 5.36317C242.846 5.85565 243.134 6.29267 243.532 6.614C243.93 6.93532 244.417 7.12514 244.927 7.15728C245.436 7.18942 245.944 7.06231 246.378 6.79347C246.813 6.52462 247.154 6.12727 247.353 5.65619C247.553 5.18511 247.603 4.66348 247.494 4.1632C247.377 3.6097 247.073 3.11357 246.634 2.75841C246.194 2.40326 245.646 2.2108 245.082 2.21347Z"
fill="#292A2E"
/>
<path
d="M243.629 15.981C242.748 15.9809 241.902 15.6426 241.263 15.0358C240.624 14.429 240.242 13.5998 240.195 12.719C240.147 11.8381 240.439 10.9726 241.009 10.3007C241.579 9.6287 242.385 9.20141 243.26 9.10677C244.135 9.01212 245.013 9.25732 245.713 9.79188C246.413 10.3264 246.882 11.1097 247.023 11.9804C247.165 12.8511 246.968 13.7429 246.473 14.4724C245.978 15.2018 245.223 15.7133 244.363 15.9016C244.122 15.9543 243.875 15.9809 243.629 15.981ZM243.641 10.0682C243.463 10.0683 243.286 10.0875 243.112 10.1255C242.499 10.2605 241.961 10.6261 241.608 11.1469C241.255 11.6677 241.115 12.3042 241.216 12.9254C241.318 13.5466 241.653 14.1053 242.152 14.4865C242.652 14.8677 243.279 15.0424 243.903 14.9747C244.527 14.907 245.102 14.6021 245.509 14.1226C245.916 13.6431 246.124 13.0255 246.09 12.3969C246.057 11.7684 245.784 11.1766 245.328 10.7435C244.873 10.3103 244.269 10.0687 243.641 10.0682Z"
fill="#292A2E"
/>
<path
d="M248.786 9.53181C249.088 7.88787 247.343 6.18699 244.887 5.7328C242.432 5.27862 240.195 6.24313 239.893 7.88707C239.59 9.53101 241.336 11.2319 243.791 11.6861C246.247 12.1402 248.483 11.1758 248.786 9.53181Z"
fill="white"
/>
<path
d="M245.001 12.2803C244.566 12.2796 244.132 12.2393 243.704 12.1599C242.496 11.9591 241.373 11.4095 240.473 10.5784C240.078 10.2413 239.775 9.81006 239.592 9.32449C239.408 8.83893 239.349 8.31473 239.421 7.80036C239.537 7.29424 239.778 6.82564 240.123 6.43784C240.468 6.05005 240.905 5.75556 241.393 5.58159C242.535 5.14918 243.774 5.03801 244.974 5.26009C246.175 5.48218 247.292 6.02907 248.205 6.84162C248.6 7.17871 248.903 7.60997 249.087 8.09554C249.271 8.5811 249.329 9.1053 249.258 9.61967C249.141 10.1258 248.9 10.5944 248.555 10.9822C248.21 11.37 247.774 11.6645 247.285 11.8384C246.561 12.1388 245.784 12.2891 245.001 12.2803ZM243.674 6.10139C243.022 6.09307 242.375 6.217 241.772 6.46573C241.431 6.58021 241.124 6.77818 240.878 7.04172C240.632 7.30527 240.456 7.62607 240.365 7.97507C240.326 8.33357 240.376 8.69626 240.512 9.03032C240.647 9.36437 240.864 9.65924 241.142 9.88823C241.919 10.5677 242.864 11.0252 243.878 11.2128C244.891 11.4004 245.937 11.3111 246.905 10.9543C247.246 10.8398 247.553 10.6418 247.799 10.3783C248.045 10.1148 248.221 9.79396 248.312 9.44495C248.351 9.08644 248.301 8.72366 248.165 8.38956C248.03 8.05546 247.813 7.76062 247.535 7.5318C246.77 6.83285 245.819 6.3724 244.797 6.20679C244.428 6.13776 244.052 6.10248 243.676 6.10139H243.674Z"
fill="#292A2E"
/>
<path
d="M243.785 5.62202L242.819 11.4293L244.244 11.7547L245.439 5.8593L243.785 5.62202Z"
fill="#292A2E"
/>
<path
d="M249.574 11.8697C249.831 11.8697 250.04 11.6603 250.04 11.4019C250.04 11.1435 249.831 10.9341 249.574 10.9341C249.316 10.9341 249.107 11.1435 249.107 11.4019C249.107 11.6603 249.316 11.8697 249.574 11.8697Z"
fill="#292A2E"
/>
<path
d="M250.387 9.47479C250.645 9.47479 250.854 9.26534 250.854 9.00697C250.854 8.7486 250.645 8.53915 250.387 8.53915C250.129 8.53915 249.92 8.7486 249.92 9.00697C249.92 9.26534 250.129 9.47479 250.387 9.47479Z"
fill="#292A2E"
/>
<defs>
<linearGradient
id="paint0_linear_1857_52"
x1="134"
y1="6.10144"
x2="134"
Comment thread
dileepapeiris marked this conversation as resolved.
Resolved
y2="228.999"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EE575C" />
<stop offset="1" stopColor="#F67147" />
</linearGradient>
<linearGradient
id="paint1_linear_1857_52"
x1="135.453"
y1="107.927"
x2="135.453"
y2="206.386"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#465867" />
<stop offset="1" stopColor="#728594" />
</linearGradient>
<linearGradient
id="paint2_linear_1857_52"
x1="118.5"
y1="123.999"
x2="172.544"
y2="206.452"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3C4B58" />
<stop offset="1" stopColor="#728594" />
</linearGradient>
<linearGradient
id="paint3_linear_1857_52"
x1="189.096"
y1="39.9053"
x2="189.096"
y2="95.2168"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF9D44" />
<stop offset="1" stopColor="#F5C58D" />
</linearGradient>
<linearGradient
id="paint4_linear_1857_52"
x1="81.8099"
y1="39.9053"
x2="81.8099"
y2="95.2168"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF9D44" />
<stop offset="1" stopColor="#F5C58D" />
</linearGradient>
<linearGradient
id="paint5_linear_1857_52"
x1="79.4089"
y1="95.2168"
x2="79.4089"
y2="155.341"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF9D44" />
<stop offset="1" stopColor="#F5C58D" />
</linearGradient>
<linearGradient
id="paint6_linear_1857_52"
x1="191.497"
y1="95.2168"
x2="191.497"
y2="155.341"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF9D44" />
<stop offset="1" stopColor="#F5C58D" />
</linearGradient>
</defs>
</svg>
);

export default EmptyIcon;
27 changes: 21 additions & 6 deletions apps/customer-portal/webapp/src/pages/ProjectHub.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import ProjectCardSkeleton from "@components/project-hub/project-card/ProjectCar
import { FolderOpen } from "@wso2/oxygen-ui-icons-react";
import { useAsgardeo } from "@asgardeo/react";
import ErrorIndicator from "@components/common/error-indicator/ErrorIndicator";
import EmptyIcon from "@components/common/empty-state/EmptyIcon";

/**
* ProjectHub component.
Expand Down Expand Up @@ -122,9 +123,18 @@ export default function ProjectHub(): JSX.Element {

if (!projects || projects.length === 0) {
Comment thread
dileepapeiris marked this conversation as resolved.
Resolved
return (
<Typography variant="h6" color="text.secondary">
No projects available.
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 2,
py: 10,
}}
>
<EmptyIcon />
</Box>
);
}

Expand Down Expand Up @@ -209,13 +219,18 @@ export default function ProjectHub(): JSX.Element {
}}
>
<FolderOpen size={28} />
<Typography variant="h4">Select Your Project</Typography>
<Typography variant="h4">
{projects.length === 0
? "No Projects Yet"
: "Select Your Project"}
</Typography>
Comment thread
dileepapeiris marked this conversation as resolved.
Resolved
</Box>

{/* project hub subtitle */}
<Typography variant="subtitle2" color="text.secondary">
Choose a project to access your support cases, chat history, and
dashboard
{projects.length === 0
? "Projects will appear here once they are created or assigned to you"
: "Choose a project to access your support cases, chat history, and dashboard"}
</Typography>
Comment thread
dileepapeiris marked this conversation as resolved.
Resolved
</Box>
<Box sx={{ width: "100%" }}>{renderContent()}</Box>
Expand Down
Loading
Loading