Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add reload on my brigade view #109

Merged
merged 1 commit into from
Dec 20, 2024
Merged

feat: add reload on my brigade view #109

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 123 additions & 113 deletions app/(auth)/(tabs)/profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { useAuth } from "@/context/AuthProvider";
import { BaseObject, ErrorResponse, Team, TEAM_LEADER_ROLE } from "@/schema";
import { ReportData } from "@/types";
import { getInitials } from "@/util";
import { RefreshControl } from "react-native-gesture-handler";

export default function Profile() {
const { t } = useTranslation();
Expand Down Expand Up @@ -61,132 +62,141 @@ export default function Profile() {

return (
<SafeAreaView>
<CheckTeam view="profile">
<View className="flex flex-1">
{(loadingTeam || loadingReport) && (
<View className="flex flex-1 items-center justify-center">
<Loading />
</View>
)}
{!loadingTeam && (
<ScrollView
className="py-5 px-5"
showsVerticalScrollIndicator={false}
>
<View className="mb-2">
<Text className="text-xl font-bold mb-2">{team?.name}</Text>
<Text className="font-normal mb-4">
{team?.sector?.name} - {team?.wedge?.name}
</Text>
<ScrollView
refreshControl={
<RefreshControl
refreshing={loadingReport}
onRefresh={refetchReport}
/>
}
>
<CheckTeam view="profile">
<View className="flex flex-1">
{loadingTeam && (
<View className="flex flex-1 items-center justify-center">
<Loading />
</View>
<View className="p-4 mb-4 border border-neutral-200 rounded-lg">
<Text className="text-neutral-600 mb-2">
{t("brigade.cards.numberVisits")}
</Text>
<View className="flex-row items-center justify-between">
<Text className="text-3xl font-semibold">
{reportData?.visitQuantity ?? 0}
)}
{!loadingTeam && (
<ScrollView
className="py-5 px-5"
showsVerticalScrollIndicator={false}
>
<View className="mb-2">
<Text className="text-xl font-bold mb-2">{team?.name}</Text>
<Text className="font-normal mb-4">
{team?.sector?.name} - {team?.wedge?.name}
</Text>
{!!reportData?.visitVariationPercentage && (
<SimpleChip
border="1"
padding="small"
textColor="neutral-500"
borderColor="neutral-500"
ionIcon={
reportData?.visitVariationPercentage > 0
? "arrow-up"
: "arrow-down"
}
iconColor={Colors.light.neutral}
label={`${reportData?.visitVariationPercentage}% ${t("brigade.cards.numberThisWeek")}`}
/>
)}
</View>
</View>

<View className="p-4 mb-4 border border-neutral-200 rounded-lg">
<Text className="text-neutral-600 mb-2">
{t("brigade.cards.numberSites")}
</Text>
<View className="flex-row items-center justify-between">
<Text className="text-3xl font-semibold">
{reportData?.houseQuantity ?? 0}
<View className="p-4 mb-4 border border-neutral-200 rounded-lg">
<Text className="text-neutral-600 mb-2">
{t("brigade.cards.numberVisits")}
</Text>

{!!reportData?.siteVariationPercentage && (
<SimpleChip
border="1"
padding="small"
textColor="neutral-500"
borderColor="neutral-500"
ionIcon={
reportData?.siteVariationPercentage > 0
? "arrow-up"
: "arrow-down"
}
iconColor={Colors.light.neutral}
label={`${reportData?.siteVariationPercentage}% ${t("brigade.cards.numberThisWeek")}`}
/>
)}
</View>
<View className="flex flex-col mt-6">
<ProgressBar
label={t("brigade.sites.green")}
progress={reportData?.greenQuantity ?? 0}
color="verde-600"
/>
<ProgressBar
label={t("brigade.sites.yellow")}
progress={reportData?.orangeQuantity ?? 0}
color="yellow-400"
/>
<ProgressBar
label={t("brigade.sites.red")}
progress={reportData?.redQuantity ?? 0}
color="red-600"
/>
<View className="flex-row items-center justify-between">
<Text className="text-3xl font-semibold">
{reportData?.visitQuantity ?? 0}
</Text>
{!!reportData?.visitVariationPercentage && (
<SimpleChip
border="1"
padding="small"
textColor="neutral-500"
borderColor="neutral-500"
ionIcon={
reportData?.visitVariationPercentage > 0
? "arrow-up"
: "arrow-down"
}
iconColor={Colors.light.neutral}
label={`${reportData?.visitVariationPercentage}% ${t("brigade.cards.numberThisWeek")}`}
/>
)}
</View>
</View>
</View>

<View className="rounded-lg border border-neutral-200 mb-8">
<View className="bg-neutral-100 border-b border-neutral-200 rounded-t-lg px-4 py-4">
<Text className="text-neutral-600 font-medium">
{t("brigade.cards.participants")}
<View className="p-4 mb-4 border border-neutral-200 rounded-lg">
<Text className="text-neutral-600 mb-2">
{t("brigade.cards.numberSites")}
</Text>
</View>
<View className="flex-row items-center justify-between">
<Text className="text-3xl font-semibold">
{reportData?.houseQuantity ?? 0}
</Text>

{team?.members?.map((member, index) => (
<View
key={member.id}
className={`flex-row items-center p-4 border-neutral-200 ${index === team?.members?.length - 1 ? "border-b-0 rounded-b-xl" : "border-b"}`}
>
<View className="flex items-center justify-center w-10 h-10 rounded-full bg-green-300 mr-3">
<Text className="font-bold text-sm text-green-700">
{getInitials(member.fullName)}
</Text>
</View>
<View className="flex-1">
<Text>{member.fullName}</Text>
</View>
{member.rol === TEAM_LEADER_ROLE && (
{!!reportData?.siteVariationPercentage && (
<SimpleChip
padding="small"
textColor="blue-500"
border="1"
borderColor="blue-400"
backgroundColor="blue-50"
label={`${t("brigade.teamLeader")}`}
padding="small"
textColor="neutral-500"
borderColor="neutral-500"
ionIcon={
reportData?.siteVariationPercentage > 0
? "arrow-up"
: "arrow-down"
}
iconColor={Colors.light.neutral}
label={`${reportData?.siteVariationPercentage}% ${t("brigade.cards.numberThisWeek")}`}
/>
)}
</View>
))}
</View>
<View className={Platform.OS === "ios" ? "h-6" : "h-14"}></View>
</ScrollView>
)}
</View>
</CheckTeam>
<View className="flex flex-col mt-6">
<ProgressBar
label={t("brigade.sites.green")}
progress={reportData?.greenQuantity ?? 0}
color="verde-600"
/>
<ProgressBar
label={t("brigade.sites.yellow")}
progress={reportData?.orangeQuantity ?? 0}
color="yellow-400"
/>
<ProgressBar
label={t("brigade.sites.red")}
progress={reportData?.redQuantity ?? 0}
color="red-600"
/>
</View>
</View>

<View className="rounded-lg border border-neutral-200 mb-8">
<View className="bg-neutral-100 border-b border-neutral-200 rounded-t-lg px-4 py-4">
<Text className="text-neutral-600 font-medium">
{t("brigade.cards.participants")}
</Text>
</View>

{team?.members?.map((member, index) => (
<View
key={member.id}
className={`flex-row items-center p-4 border-neutral-200 ${index === team?.members?.length - 1 ? "border-b-0 rounded-b-xl" : "border-b"}`}
>
<View className="flex items-center justify-center w-10 h-10 rounded-full bg-green-300 mr-3">
<Text className="font-bold text-sm text-green-700">
{getInitials(member.fullName)}
</Text>
</View>
<View className="flex-1">
<Text>{member.fullName}</Text>
</View>
{member.rol === TEAM_LEADER_ROLE && (
<SimpleChip
padding="small"
textColor="blue-500"
border="1"
borderColor="blue-400"
backgroundColor="blue-50"
label={`${t("brigade.teamLeader")}`}
/>
)}
</View>
))}
</View>
<View className={Platform.OS === "ios" ? "h-6" : "h-14"}></View>
</ScrollView>
)}
</View>
</CheckTeam>
</ScrollView>
</SafeAreaView>
);
}