Enhance the user interface by adding labels to cards displayed in the dashboard, referral settings, and profile page to indicate whether they are shared with the user or owned by the user.
Sub-tasks:
Identify the relevant components and pages.
[ ] Locate the components and pages where cards are displayed, such as the dashboard, referral settings, and profile page.
[ ] Determine the specific components responsible for rendering individual cards (e.g., src/components/user-portal/CardThumbnail.tsx).
Design the UI labels.
[ ] Create visually distinct labels or tags to differentiate between shared and owned cards.
[ ] Define the appropriate text, icons, or color schemes for the labels to clearly convey the ownership status.
Update the card rendering logic.
[ ] Modify the card rendering components (e.g., src/components/user-portal/CardThumbnail.tsx) to include the ownership labels.
[ ] Determine the data source or property that indicates whether a card is shared or owned by the user.
[ ] Implement conditional rendering logic to display the appropriate label based on the card's ownership status.
Integrate the labels into the relevant pages and components.
[ ] Update the dashboard component (e.g., src/app/(auth)/dashboard/[...cardId]/page.tsx) to include the ownership labels for the displayed cards.
[ ] Modify the referral settings component (e.g., src/components/user-portal/ManageReferrals.tsx) to show the ownership labels for the cards associated with referrals.
[ ] Enhance the profile page component (e.g., src/app/(auth)/profile/page.tsx) to display the ownership labels for all the cards accessible to the user.
Handle data fetching and state management.
[ ] Ensure that the necessary data regarding card ownership is fetched and available in the relevant components.
[ ] Modify the data fetching logic or API calls to include the ownership information for each card.
[ ] Update the state management (e.g., using Jotai or React state) to store and manage the card ownership data.
Objective:
Enhance the user interface by adding labels to cards displayed in the dashboard, referral settings, and profile page to indicate whether they are shared with the user or owned by the user.
Sub-tasks:
Identify the relevant components and pages.
src/components/user-portal/CardThumbnail.tsx).Design the UI labels.
Update the card rendering logic.
src/components/user-portal/CardThumbnail.tsx) to include the ownership labels.Integrate the labels into the relevant pages and components.
src/app/(auth)/dashboard/[...cardId]/page.tsx) to include the ownership labels for the displayed cards.src/components/user-portal/ManageReferrals.tsx) to show the ownership labels for the cards associated with referrals.src/app/(auth)/profile/page.tsx) to display the ownership labels for all the cards accessible to the user.Handle data fetching and state management.