Skip to content

Commit

Permalink
Care Loading icon in organization and facility users (#9723)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rishith25
Rishith25 authored Jan 5, 2025
1 parent c34bf37 commit f1d433b
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 21 deletions.
5 changes: 5 additions & 0 deletions public/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -905,6 +905,7 @@
"facility_linked_success": "Facility linked successfully",
"facility_name": "Facility Name",
"facility_not_found": "Facility Not Found",
"facility_organizations": "Facility Organizations",
"facility_preference": "Facility preference",
"facility_search_placeholder": "Search by Facility / District Name",
"facility_search_placeholder_pincode": "Search by Facility / District / Pincode",
Expand Down Expand Up @@ -1296,7 +1297,11 @@
"oral_issue_for_non_oral_nutrition_route_error": "Can be specified only if nutrition route is set to Oral",
"ordering": "Ordering",
"organization": "Organization",
"organization_access_help": "Organizations help you manage facilities, users, and resources efficiently. Contact your administrator to get access.",
"organization_for_care_support": "Organization for Care Support",
"organization_forbidden": "You don't have access to any organizations yet.",
"organization_not_found": "No Organizations Found",
"organizations": "Organizations",
"origin_facility": "Current facility",
"other_details": "Other details",
"otp_verification_error": "Failed to verify OTP. Please try again later.",
Expand Down
47 changes: 46 additions & 1 deletion src/components/Facility/FacilityUsers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { useTranslation } from "react-i18next";

import CountBlock from "@/CAREUI/display/Count";

import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

import Page from "@/components/Common/Page";
import UserListView from "@/components/Users/UserListAndCard";

Expand All @@ -30,7 +33,49 @@ export default function FacilityUsers(props: { facilityId: number }) {
});

if (userListLoading) {
return <div>Loading...</div>;
return (
<div className="px-6">
<Skeleton className="h-8 w-32 mb-4" />
<div className="flex items-center mb-4">
<Skeleton className="h-16 w-16 rounded-lg mr-3" />
<div>
<Skeleton className="h-4 w-14 mb-1" />
<Skeleton className="h-12 w-8" />
</div>
</div>
<div className="flex items-center justify-between mb-4">
<Skeleton className="h-10 w-72" />
<div className="flex space-x-2">
<Skeleton className="h-10 w-32" />
<Skeleton className="h-10 w-32" />
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
{Array.from({ length: 6 }).map((_, i) => (
<Card key={i}>
<CardContent className="p-6">
<div className="flex items-start">
<Skeleton className="h-16 w-16 rounded-lg mr-4" />
<div className="flex-1">
<div className="flex justify-between items-start">
<div>
<Skeleton className="h-6 w-24 mb-1" />
<Skeleton className="h-4 w-12" />
</div>
<Skeleton className="h-6 w-16" />
</div>
<div className="mt-2">
<Skeleton className="h-4 w-20 mb-1" />
<Skeleton className="h-4 w-12" />
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
}
if (!userListData) {
return <div>{t("no_users_found")}</div>;
Expand Down
35 changes: 17 additions & 18 deletions src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useQuery } from "@tanstack/react-query";
import { Link } from "raviger";
import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";

Expand Down Expand Up @@ -27,6 +28,7 @@ export default function FacilityOrganizationIndex({
}: {
facilityId: string;
}) {
const { t } = useTranslation();
const { data, isLoading } = useQuery({
queryKey: ["facilityOrganization", "list", facilityId],
queryFn: query(routes.facilityOrganization.list, {
Expand All @@ -37,50 +39,47 @@ export default function FacilityOrganizationIndex({

if (isLoading) {
return (
<Page title="Organizations">
<div className="px-6 py-6 space-y-6">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-8 w-48 self-end" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{Array.from({ length: 3 }).map((_, i) => (
<Card key={i} className="relative">
{Array.from({ length: 6 }).map((_, i) => (
<Card key={i} className="relative space-y-4">
<CardHeader>
<Skeleton className="h-6 w-2/3" />
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-6 w-1/3" />
<Skeleton className="h-4 w-1/4" />
</CardHeader>
<CardContent>
<Skeleton className="h-4 w-full mb-2" />
<Skeleton className="h-4 w-3/4" />
</CardContent>
<CardFooter>
<Skeleton className="h-8 w-24" />
<Skeleton className="h-10 w-full" />
</CardFooter>
</Card>
))}
</div>
</Page>
</div>
);
}

if (!data?.results?.length) {
return (
<Page title="Organizations">
<Page title={t("organizations")}>
<div className="flex justify-center md:justify-end mt-2 mb-4">
<CreateFacilityOrganizationSheet facilityId={facilityId} />
</div>
<Card className="border-dashed">
<CardHeader>
<CardTitle className="text-xl font-semibold text-center">
No Organizations Found
{t("organization_not_found")}
</CardTitle>
<CardDescription className="text-center">
You don't have access to any organizations yet.
{t("organization_forbidden")}
</CardDescription>
</CardHeader>
<CardContent className="flex flex-col items-center justify-center p-6">
<div className="rounded-full bg-primary/10 p-6 mb-4">
<CareIcon icon="d-hospital" className="h-12 w-12 text-primary" />
</div>
<p className="text-center text-sm text-muted-foreground max-w-sm mb-4">
Organizations help you manage facilities, users, and resources
efficiently. Contact your administrator to get access.
{t("organization_access_help")}
</p>
</CardContent>
</Card>
Expand All @@ -89,7 +88,7 @@ export default function FacilityOrganizationIndex({
}

return (
<Page title="Facility Organizations" hideBack={true}>
<Page title={t("facility_organizations")} hideBack={true}>
<div className="flex justify-center md:justify-end mt-2 mb-4">
<CreateFacilityOrganizationSheet facilityId={facilityId} />
</div>
Expand All @@ -111,7 +110,7 @@ export default function FacilityOrganizationIndex({
href={`/facility/${facilityId}/organization/${org.id}`}
className="flex items-center justify-center gap-2"
>
View Details
{t("view_details")}
<CareIcon icon="l-arrow-right" className="h-4 w-4" />
</Link>
</Button>
Expand Down
40 changes: 38 additions & 2 deletions src/pages/Organization/components/OrganizationLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useQuery } from "@tanstack/react-query";
import { Link, usePath } from "raviger";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";

Expand All @@ -11,7 +12,9 @@ import {
BreadcrumbList,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Card, CardContent } from "@/components/ui/card";
import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
import { Skeleton } from "@/components/ui/skeleton";

import Page from "@/components/Common/Page";

Expand Down Expand Up @@ -45,6 +48,7 @@ export default function OrganizationLayout({
setOrganization,
}: Props) {
const path = usePath() || "";
const { t } = useTranslation();
const { hasPermission } = usePermissions();

const baseUrl = navOrganizationId
Expand All @@ -66,11 +70,43 @@ export default function OrganizationLayout({
}, [org, setOrganization]);

if (isLoading) {
return <div>Loading...</div>;
return (
<div className="p-4">
<Skeleton className="h-8 w-48 mb-4" />
<Skeleton className="h-4 w-24 mb-4" />
<div className="flex space-x-4 mb-4">
{[...Array(4)].map((_, index) => (
<Skeleton key={index} className="h-8 w-24" />
))}
</div>
<Skeleton className="h-6 w-40 mb-4" />
<Skeleton className="h-8 w-1/4 mb-4" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{Array.from({ length: 6 }).map((_, i) => (
<Card key={i}>
<CardContent className="p-6">
<div className="flex space-x-4">
<div className="flex-1 space-y-4">
<Skeleton className="h-6 w-1/2" />
<div className="flex space-x-4">
<Skeleton className="h-4 w-1/3" />
<Skeleton className="h-4 w-1/3" />
</div>
</div>
<div className="flex-1 flex items-center justify-center">
<Skeleton className="h-6 w-1/2" />
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
}
// add loading state
if (!org) {
return <div>Not found</div>;
return <div>{t("organization_not_found")}</div>;
}

const navItems: NavItem[] = [
Expand Down

0 comments on commit f1d433b

Please sign in to comment.