Skip to content

Commit

Permalink
Improving Survey Responses (wip)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssandino
ssandino committed Jan 2, 2025
1 parent bfeda1a commit 3d9d336
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 36 deletions.
16 changes: 8 additions & 8 deletions shared/locales/en/website-responses.json
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
{
"select-survey": "Select survey",
"multiple-answers": "multiple answers",
"responses-since": "Survey responses since {{sinceDate}}",
"responses-since": "{{X}} completed surveys since {{sinceDate}}",
"title": "Survey Responses",
"answers": "answers",
"answers": "responses",
"data-points": "data points",
"onboarding": {
"title": "Onboarding Survey",
"description": "Filled out once before recipient is joining the program"
"description": "Sent once before program enrollment"
},
"checkin": {
"title": "Check-in Survey",
"description": "Filled out every 6 months while recipient is in the program"
"title": "Check-in Surveys",
"description": "Sent every six months during the program"
},
"offboarding": {
"title": "Offboarding Survey",
"description": "Filled out once when recipient is finishing the program"
"description": "Sent once when the program ends"
},
"offboarded-checkin": {
"title": "Follow-up Survey",
"description": "Filled out every 6 months after recipient left the program"
"title": "Follow-up Surveys",
"description": "Sent every six months after the program ends"
}
}
9 changes: 5 additions & 4 deletions shared/locales/en/website-survey.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@
"skippingMealsTitleV1": "Do you or other family members in your household ever skip meals because there wasn't enough money for food?",
"skippingMealsLastWeekTitleV1": "Did this happen last week?",
"skippingMealsLastWeek3MealsTitleV1": "Did you skip more than 3 meals in the past week?",
"unexpectedExpensesCoveredTitleV1": "Do you have enough money to cover unexpected expenses like seeing a doctor costing 100 SLE?",
"unexpectedExpensesCoveredTitleV1": "Do you have enough money to cover unexpected expenses like seeing a doctor?",
"unexpectedExpensesCoveredDescV1": "A doctor costing for example 100 SLE or above.",
"savingsTitleV1": "Are you currently able to save money?",
"debtPersonalTitleV1": "Are you in debt?",
"debtPersonalDescV1": "SLE 500 or above.",
Expand All @@ -93,15 +94,15 @@
"otherSupportTitleV1": "Are you currently receiving any other form of financial support from anywhere else?",
"plannedAchievementTitleV1": "What do you hope to achieve within the next 3 years with Social Income? ",

"spendingTitleV1": "Tell us what are the key categories that you spend your Social Income payments on:",
"spendingDescV1": "Education includes school fees, stationary, textbooks etc. Food includes for you or your household. Housing includes rent, house maintenance etc. Health care includes doctor, hospital visit, medicine etc. Transportation includes bus, taxi, poda poda, keke etc. Saving for the future includes saving it in a bank account or on a mobile money account etc. Investment includes fertilizers, tools, diesel for machinery etc.",
"spendingTitleV1": "What are the key categories that you spend your Social Income payments on?",
"spendingDescV1": "Education: school fees, stationary, textbooks etc. // Food for you or your household // Housing: rent, house maintenance etc. // Health care: doctor, hospital visit, medicine etc. // Transportation: bus, taxi, poda poda, keke etc. // Saving: on bank account or mobile money account etc. // Investment: fertilizers, tools, diesel for machinery etc.",
"spendingChoices": {
"education": "Education",
"food": "Food",
"housing": "Housing",
"healthCare": "Health care",
"mobility": "Transportation",
"saving": "Saving for the future",
"saving": "Savings",
"investment": "Investment"
},
"spendingRankingTitleV1": "Please rank the selected spending categories from the most important to the least.",
Expand Down
4 changes: 2 additions & 2 deletions ...src/app/[lang]/[region]/(website)/survey/responses/barchart-survey-response-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function BarchartSurveyResponseComponent({ data }: { data: ChartData[] }) {
barGap={0}
barCategoryGap="0%"
>
<Bar barSize={barHeight} dataKey="value" fill={fillColor}>
<Bar barSize={barHeight} dataKey="value" fill={fillColor} radius={[4, 4, 4, 4]}>
<LabelList dataKey="name" position="right" content={customLabel} />
</Bar>
<XAxis type="number" hide />
Expand All @@ -48,7 +48,7 @@ function BarchartSurveyResponseComponent({ data }: { data: ChartData[] }) {
dataKey="value"
axisLine={false}
tickLine={false}
className={'font-bold'}
className={'font-medium'}
tick={{ fill: fillColor }}
tickFormatter={(value) => `${value}%`}
minTickGap={1}
Expand Down
82 changes: 60 additions & 22 deletions website/src/app/[lang]/[region]/(website)/survey/responses/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
Separator,
Typography,
} from '@socialincome/ui';
import { ClockIcon, ViewfinderCircleIcon } from '@heroicons/react/24/outline';

import { Fragment } from 'react';

export const revalidate = 3600; // update once an hour
Expand Down Expand Up @@ -45,26 +47,25 @@ export default async function Page({ params: { lang } }: DefaultPageProps) {

return (
<BaseContainer className="mx-auto flex flex-col">
<Typography size="4xl" className="mt-4" weight="bold">
<Typography size="4xl" className="my-4" weight="bold">
{translator.t('title')}
</Typography>

<Typography size="xl" className="mx-2 mt-8" weight="bold">
{translator.t('select-survey')}
</Typography>
<Tabs defaultValue={SurveyQuestionnaire.Onboarding}>
<TabsList className="mx-auto mt-2 grid grid-cols-1 gap-2 lg:grid-cols-4">
<TabsList className="mx-auto mb-10 mt-2 grid grid-cols-2 gap-2 lg:grid-cols-4">
{allSurveyData.map(
(surveyData) =>
surveyData && (
<TabsTrigger key={surveyData.type} value={surveyData.type} asChild={true}>
<Card className="card-tab data-[state=active]:bg-primary bg-card-muted [&_h3]:data-[state=inactive]:text-accent-foreground data-[state=active]:cursor-default data-[state=inactive]:cursor-pointer data-[state=active]:text-white">
<CardHeader className="pb-2 pl-4 pt-2">
<CardTitle className="py-2">{translator.t(`${surveyData.type}.title`)}</CardTitle>

<Card className="card-tab data-[state=active]:bg-primary [&_h3]:data-[state=inactive]: data-[state=active]:cursor-default data-[state=inactive]:cursor-pointer data-[state=active]:text-white hover:bg-primary hover:bg-opacity-10 ">
<CardHeader className="pl-5 pb-0">
<CardTitle>{translator.t(`${surveyData.type}.title`)}</CardTitle>
</CardHeader>
<CardContent className="p-2 pl-4">
<Typography>{translator.t(`${surveyData.type}.description`)}</Typography>
<Typography className="mt-3">
<CardContent className="pl-5 pt-4 flex items-center">
{/* Viewfinder Icon */}
<ViewfinderCircleIcon className="h-5 w-5 mr-2 group-data-[state=active]:text-white" />
{/* Data Points Text */}
<Typography>
{surveyData.total} {translator.t('data-points')}
</Typography>
</CardContent>
Expand All @@ -73,32 +74,69 @@ export default async function Page({ params: { lang } }: DefaultPageProps) {
),
)}
</TabsList>
<Typography className="mt-10 font-bold">
{translator.t('responses-since', {
context: { sinceDate: oldestDate.toLocaleDateString() },
})}
</Typography>

{Object.values(SurveyQuestionnaire).map((selectedSurvey) => (
<TabsContent value={selectedSurvey} key={selectedSurvey}>
<div className="mx-auto mb-5 mt-20">
<div className="w-full text-left">
<Typography size="3xl" weight="bold" className="mb-4">
{translator.t(`${selectedSurvey}.title`)}
</Typography>
</div>
<div className="grid w-full grid-cols-1 items-stretch gap-2 md:grid-cols-2">
{/* Description with Clock Icon */}
<div className="flex items-center justify-start text-left">
<ClockIcon className="text-primary mr-2 h-5 w-5" />
<Typography>{translator.t(`${selectedSurvey}.description`)}</Typography>
</div>
<div className="flex items-center justify-start text-left md:justify-end md:text-right">
<Typography>
{translator.t('responses-since', {
context: { sinceDate: oldestDate.toLocaleDateString() },
})}
</Typography>
</div>
</div>
</div>
<div className="px-0 py-8">
<div className="relative">
{/* Horizontal line */}
<div className="absolute h-0.5 bg-border w-full top-1/2 transform -translate-y-1/2" />

{/* Dots container */}
<div className="relative flex justify-between">
{Array.from({ length: 11 }).map((_, index) => (
<div
key={index}
className={`w-6 h-6 rounded-full border-2 ${
index === 0
? 'bg-accent border-accent'
: 'bg-background border-border'
}`}
/>
))}
</div>
</div>
</div>

<div className="mx-auto grid grid-cols-1 gap-2 lg:grid-cols-2">
{Object.keys(data[selectedSurvey] || []).map((questionKey) => (
<Fragment key={`${selectedSurvey}-${questionKey}statistics`}>
<Separator className="col-span-1 mt-2 lg:col-span-2" />
<div key={`${selectedSurvey}-${questionKey}-question`} className="p-2">
<Typography size="2xl" weight="bold" className="my-2">
<div key={`${selectedSurvey}-${questionKey}-question`} className="py-2">
<Typography size="2xl" weight="medium" className="my-2">
{translator.t(data[selectedSurvey][questionKey].question.translationKey)}
{data[selectedSurvey][questionKey].question.type == QuestionInputType.CHECKBOX && (
<Typography size="sm">({translator.t('multiple-answers')})</Typography>
<Typography size="sm" weight="normal">({translator.t('multiple-answers')})</Typography>
)}
</Typography>
<Badge variant="accent">
<Badge variant="accent" className="font-normal">
<Typography>
{data[selectedSurvey][questionKey].total} {translator.t('answers')}
</Typography>
</Badge>
</div>
<div key={`${selectedSurvey}-${questionKey}-answers`} className="p-2">
<div key={`${selectedSurvey}-${questionKey}-answers`} className="py-2">
{data[selectedSurvey][questionKey].answers && (
<BarchartSurveyResponseComponent
data={convertToBarchartData(data[selectedSurvey][questionKey])}
Expand Down

0 comments on commit 3d9d336

Please sign in to comment.