[1|CBH - Organization Management Page] Breadboard

[hzz4343]

🍰 Appetite 🍰

| Property | Value | |:-------|:------:| | Points | 3 points | | Difficulty rating | ★★☆☆☆ | | Maximum Assignees | 2 person |

🤔 Problem Statement

Make a breadboard for each screen in the fat-marker sketch. Every place and affordance should be accounted for, but don't focus on making it look pretty. This should be essentially a bare HTML file, with no JS, and only CSS if required for basic layouts. Implement fake navigation and interactions using normal <a> tags. This purely for getting an interactive "skeleton" up, and seeing in real life whether this design would work, or has any major problems. Please see this page for more info on what your breadboard should be like (and, if you want understand the fat-marker sketch and places affordances drawing better, please see this page).

• Make it so that only the user who logged in as CBH can see and stay on this site. The rest will be redirected to home.

🧪 Required Tests

None (but the Code Wizard will review whether or not your code warrants some tests! Review the Code & Testing Guidelines for more info)

⚠️ Careful about:

• Don't make a separate desktop design. There should be one design, that works both in landscape and portrait orientations.

🤖 Technologies focused on in this feature

• React
• Tailwind
• Shadcn

[NadiiaTysh]

I want this

[khnatiuk]

@NadiiaTysh you're in!

[Eugenia821]

Add me please here too @khnatiuk

[khnatiuk]

@Eugenia821 you're in!

[Eugenia821]

I have a challenge with my laptop 🥴 I've done something based on @NadiiaTysh code:

1. Login check: I've added a check using the useEffect hook to redirect any user that isn't logged in as "CBH".

2. Responsive layout: Tailwind's flex, md:flex-row, and gap-2 utilities create a flexible and responsive design that adjusts between portrait and landscape orientations.

3. Basic navigation: I used tags for fake interactions and navigation, as required by the task.

4. Styling: Basic Tailwind styling has been applied to give a skeleton look while maintaining readability and ease of interaction

Code to test on Saturday morning:

import React, { useEffect } from 'react'; import { useRouter } from 'next/router';

export default function OrgDashboard() { const router = useRouter(); const currentUser = 'CBH'; // Replace with dynamic user logic as needed

// Redirect non-CBH users to home useEffect(() => { if (currentUser !== 'CBH') { router.push('/'); // Redirect to home if user is not CBH } }, [currentUser, router]);

return (

{/* Search Bar and Add/Export buttons */}

Add Export

{/* Organizations List */} {['Org 1', 'Org 2', 'Org 3'].map((org, idx) => (

{org}

Edit Org Edit Members

))} {/* Bottom Navigation */}

OM OGC C FB S

); }

[NadiiaTysh]

@khnatiuk we need help with PR please 😊

[khnatiuk]

@NadiiaTysh I'm sending a code wizard your way. :)

[khnatiuk]

@Builder-s-League/code-wizard can you verify and close this?

[khnatiuk]

This

[khnatiuk]

MR: 121.