Feat: Create a data flow #9869 (#10131)

### What problem does this PR solve?

Feat: Create a data flow #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/home-card.tsx

@@ -13,8 +13,15 @@ interface IProps {
   onClick?: () => void;
   moreDropdown: React.ReactNode;
   sharedBadge?: ReactNode;
+  icon?: React.ReactNode;
 }
-export function HomeCard({ data, onClick, moreDropdown, sharedBadge }: IProps) {
+export function HomeCard({
+  data,
+  onClick,
+  moreDropdown,
+  sharedBadge,
+  icon,
+}: IProps) {
   return (
     <Card
       className="bg-bg-card  border-colors-outline-neutral-standard"
@@ -33,9 +40,12 @@ export function HomeCard({ data, onClick, moreDropdown, sharedBadge }: IProps) {
         </div>
         <div className="flex flex-col justify-between gap-1 flex-1 h-full w-[calc(100%-50px)]">
           <section className="flex justify-between">
-            <div className="text-[20px] font-bold w-80% leading-5 text-ellipsis overflow-hidden">
-              {data.name}
-            </div>
+            <section className="flex gap-1 items-center">
+              <div className="text-[20px] font-bold w-80% leading-5 text-ellipsis overflow-hidden">
+                {data.name}
+              </div>
+              {icon}
+            </section>
             {moreDropdown}
           </section>