Skip to content

Commit

Permalink
Fixed proposed changes in PR
Browse files Browse the repository at this point in the history 
Added UI feedback when lists are empty, added accessibilty attributes and fixed some typos
  • Loading branch information
@Spandan-Mishra
Spandan-Mishra committed Mar 6, 2025
1 parent aeb5b1f commit 6e824d5
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 107 deletions.
4 changes: 3 additions & 1 deletion public/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -736,9 +736,9 @@
"cylinders_per_day": "Cylinders/day",
"daily_rounds": "Daily Rounds",
"dashboard": "Dashboard",
"dashboard_tab_administrations": "These are the Local Self-Government (LSG) networks or groups you're affiliated with, including State, District, Block, Municipality, Corporation, Panchayat, and Ward-level governance bodies",
"dashboard_tab_associations": "These are the professional or role-based groups - such as doctors, nurses, technicians, volunteers, or staff - that you are affiliated with",
"dashboard_tab_facilities": "These are the clinics, hospitals, or health centers you manage or belong to",
"dashboard_tab_governance": "These are the Local Self-Government (LSG) networks or groups you're affiliated with, including State, District, Block, Municipality, Corporation, Panchayat, and Ward-level governance bodies",
"date": "Date",
"date_and_time": "Date and Time",
"date_and_time_of_death": "Date and Time of Death",
Expand Down Expand Up @@ -1536,6 +1536,7 @@
"no_address_provided": "No address provided",
"no_allergies_recorded": "No allergies recorded",
"no_appointments": "No appointments found",
"no_associations_found": "No associations found",
"no_attachments_found": "This communication has no attachments.",
"no_availabilities_yet": "No availabilities yet",
"no_bed_asset_linked_allocated": "No bed/asset linked allocated",
Expand All @@ -1561,6 +1562,7 @@
"no_facilities": "No Facilities found",
"no_facilities_found": "No facilities found",
"no_files_found": "No {{type}} files found",
"no_governance_found": "No governance found",
"no_home_facility": "No home facility",
"no_home_facility_found": "No home facility found",
"no_image_found": "No image found",
Expand Down
248 changes: 142 additions & 106 deletions src/pages/UserDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ export default function UserDashboard() {
const organizations = user.organizations || [];
const associations =
organizations.filter((org) => org.org_type === "role") || [];
const administrations =
const governance =
organizations.filter((org) => org.org_type === "govt") || [];

const [activeTab, setActiveTab] = useState("My Facilities");
const tabs = ["My Facilities", "Associations", "Administrations"];
const tabs = ["My Facilities", "Associations", "Governance"];

return (
<div className="container mx-auto space-y-4 md:space-y-8 max-w-5xl px-4 py-4 md:p-6">
Expand Down Expand Up @@ -109,8 +109,8 @@ export default function UserDashboard() {
<Button
variant="outline"
size="sm"
className="w-full sm:w-auto
asChild"
className="w-full sm:w-auto"
asChild
>
<EllipsisVerticalIcon className="h-4 w-4" />
</Button>
Expand All @@ -126,11 +126,14 @@ export default function UserDashboard() {
{/* Tabs Section */}
<div className="w-full">
{/* Tabs Headings */}
<div className="flex border-b border-gray-200">
<div className="flex border-b border-gray-200" role="tablist">
{tabs.map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
role="tab"
aria-selected={activeTab === tab}
aria-controls={`${tab.toLowerCase().replace(/\s+/g, "-")}-panel`}
className={`px-4 py-2 text-md font-medium transition-all duration-75 ${
activeTab === tab
? "border-b-2 border-green-600 text-green-700"
Expand All @@ -145,122 +148,155 @@ export default function UserDashboard() {
{/* Tabs Content */}
<div className="mt-4">
{/* Facilities Section */}
{activeTab === "My Facilities" && facilities.length > 0 && (
<section className="space-y-3 md:space-y-4">
{activeTab === "My Facilities" && (
<section
className="space-y-3 md:space-y-4"
id="my-facilities-panel"
role="tabpanel"
aria-labelledby="My Facilities"
>
<p className="text-sm text-gray-800 font-normal px-1">
{t("dashboard_tab_facilities")}
</p>
<div
className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
data-cy="facility-list"
>
{facilities.map((facility) => (
<Link
key={facility.id}
href={`/facility/${facility.id}/overview`}
>
<Card className="transition-all hover:shadow-md hover:border-primary/20">
<CardContent className="flex items-center gap-3 p-3 md:p-4">
<Avatar
name={facility.name}
className="h-12 w-12 md:h-14 md:w-14"
/>
<div className="flex-1 min-w-0">
<h3 className="font-medium truncate text-sm md:text-base">
{facility.name}
</h3>
<p className="text-xs md:text-sm text-gray-500 truncate">
{t("view_facility_details")}
</p>
</div>
<ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
</CardContent>
</Card>
</Link>
))}
</div>
{facilities.length === 0 ? (
<div className="text-center py-6 text-gray-500">
<p>{t("no_facilities_found")}</p>
</div>
) : (
<div
className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
data-cy="facility-list"
>
{facilities.map((facility) => (
<Link
key={facility.id}
href={`/facility/${facility.id}/overview`}
>
<Card className="transition-all hover:shadow-md hover:border-primary/20">
<CardContent className="flex items-center gap-3 p-3 md:p-4">
<Avatar
name={facility.name}
className="h-12 w-12 md:h-14 md:w-14"
/>
<div className="flex-1 min-w-0">
<h3 className="font-medium truncate text-sm md:text-base">
{facility.name}
</h3>
<p className="text-xs md:text-sm text-gray-500 truncate">
{t("view_facility_details")}
</p>
</div>
<ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
</CardContent>
</Card>
</Link>
))}
</div>
)}
</section>
)}

{/*Associations Section*/}
{activeTab === "Associations" && associations.length > 0 && (
<section className="space-y-3 md:space-y-4">
{activeTab === "Associations" && (
<section
className="space-y-3 md:space-y-4"
id="my-associations-panel"
role="tabpanel"
aria-labelledby="Associations"
>
<p className="text-sm text-gray-800 font-normal px-1">
{t("dashboard_tab_associations")}
</p>
<div
className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
data-cy="organization-list"
>
{associations.map((association) => (
<Link
key={association.id}
href={`/organization/${association.id}`}
>
<Card className="transition-all hover:shadow-md hover:border-primary/20">
<CardContent className="flex items-center gap-3 p-3 md:p-4">
<Avatar
name={association.name}
className="h-12 w-12 md:h-14 md:w-14"
/>
<div className="flex-1 min-w-0">
<h3 className="font-medium truncate text-sm md:text-base">
{association.name}
</h3>
<p className="text-xs md:text-sm text-gray-500 truncate">
{getOrgLabel(
association.org_type,
association.metadata,
)}
</p>
</div>
<ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
</CardContent>
</Card>
</Link>
))}
</div>
{associations.length === 0 ? (
<div className="text-center py-6 text-gray-500">
<p>{t("no_associations_found")}</p>
</div>
) : (
<div
className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
data-cy="organization-list"
>
{associations.map((association) => (
<Link
key={association.id}
href={`/organization/${association.id}`}
>
<Card className="transition-all hover:shadow-md hover:border-primary/20">
<CardContent className="flex items-center gap-3 p-3 md:p-4">
<Avatar
name={association.name}
className="h-12 w-12 md:h-14 md:w-14"
/>
<div className="flex-1 min-w-0">
<h3 className="font-medium truncate text-sm md:text-base">
{association.name}
</h3>
<p className="text-xs md:text-sm text-gray-500 truncate">
{getOrgLabel(
association.org_type,
association.metadata,
)}
</p>
</div>
<ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
</CardContent>
</Card>
</Link>
))}
</div>
)}
</section>
)}

{/*Administrations Section*/}
{activeTab === "Administrations" && administrations.length > 0 && (
<section className="space-y-3 md:space-y-4">
{/*Governance Section*/}
{activeTab === "Governance" && (
<section
className="space-y-3 md:space-y-4"
id="my-governance-panel"
role="tabpanel"
aria-labelledby="Governance"
>
<p className="text-sm text-gray-800 font-normal px-1">
{t("dashboard_tab_administrations")}
{t("dashboard_tab_governance")}
</p>
<div
className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
data-cy="organization-list"
>
{administrations.map((administration) => (
<Link
key={administration.id}
href={`/organization/${administration.id}`}
>
<Card className="transition-all hover:shadow-md hover:border-primary/20">
<CardContent className="flex items-center gap-3 p-3 md:p-4">
<Avatar
name={administration.name}
className="h-12 w-12 md:h-14 md:w-14"
/>
<div className="flex-1 min-w-0">
<h3 className="font-medium truncate text-sm md:text-base">
{administration.name}
</h3>
<p className="text-xs md:text-sm text-gray-500 truncate">
{getOrgLabel(
administration.org_type,
administration.metadata,
)}
</p>
</div>
<ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
</CardContent>
</Card>
</Link>
))}
</div>
{governance.length === 0 ? (
<div className="text-center py-6 text-gray-500">
<p>{t("no_governance_found")}</p>
</div>
) : (
<div
className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
data-cy="organization-list"
>
{governance.map((administration) => (
<Link
key={administration.id}
href={`/organization/${administration.id}`}
>
<Card className="transition-all hover:shadow-md hover:border-primary/20">
<CardContent className="flex items-center gap-3 p-3 md:p-4">
<Avatar
name={administration.name}
className="h-12 w-12 md:h-14 md:w-14"
/>
<div className="flex-1 min-w-0">
<h3 className="font-medium truncate text-sm md:text-base">
{administration.name}
</h3>
<p className="text-xs md:text-sm text-gray-500 truncate">
{getOrgLabel(
administration.org_type,
administration.metadata,
)}
</p>
</div>
<ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
</CardContent>
</Card>
</Link>
))}
</div>
)}
</section>
)}
</div>
Expand Down

0 comments on commit 6e824d5

Please sign in to comment.