Skip to content

Commit

Permalink
Merge pull request #30 from shivamg9/develop
Browse files Browse the repository at this point in the history
Bugs fixes for the UI of beneficiary portal
  • Loading branch information
shibu-narayanan authored Jul 1, 2024
2 parents 41e14c2 + e03fffc commit 44c8f8e
Show file tree
Hide file tree
Showing 10 changed files with 128 additions and 52 deletions.
3 changes: 2 additions & 1 deletion messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"Benefits": "Benefits",
"Tap to view your Benefits": "Tap to view your Benefits",
"View all": "View All",
"NEW": "NEW",

"This is the about page": "This is the about page",

Expand Down Expand Up @@ -118,7 +119,7 @@
"No applications yet please tap on the below link to view all programs": "No applications yet, please tap on the below link to view all programs",
"No benefits yet please tap on the below link to view all programs": "No benefits yet, please tap on the below link to view all programs",
"You havent enrolled into any programs yet please tap on the below link to view all programs": "You haven’t enrolled into any programs yet, please tap on the below link to view all programs",
"No Applications No Benefits": "You haven’t applied to any programs yet; please tap on the below link to view all programs.",
"No Applications No Benefits": "You haven’t applied to any programs yet, please tap on the below link to view all programs.",
"Applications but No Benefits": "No approved entitlement to show, please visit my application page.",
"View All Program": "View All Program",
"View My Applications": "View Applications",
Expand Down
3 changes: 2 additions & 1 deletion messages/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"Benefits": "Beneficios",
"Tap to view your Benefits": "Toque para ver sus beneficios",
"View all": "Ver todo",
"NEW": "NUEVO",

"This is the about page": "Esta es la página Acerca de",

Expand Down Expand Up @@ -118,7 +119,7 @@
"No applications yet please tap on the below link to view all programs": "Todavía no hay solicitudes, por favor toque el enlace de abajo para ver todos los programas",
"No benefits yet please tap on the below link to view all programs": "Todavía no hay beneficios, por favor toque el enlace de abajo para ver todos los programas",
"You havent enrolled into any programs yet please tap on the below link to view all programs": "Todavía no se ha inscrito en ningún programa, por favor toque el enlace de abajo para ver todos los programas",
"No Applications No Benefits": "Aún no has aplicado a ningún programa; por favor, toca el enlace de abajo para ver todos los programas.",
"No Applications No Benefits": "Aún no has aplicado a ningún programa, por favor, toca el enlace de abajo para ver todos los programas.",
"Applications but No Benefits": "No hay ningún derecho aprobado para mostrar, por favor visita mi página de aplicaciones.",
"View All Program": "Ver Todos los Programas",
"View My Applications": "Ver Aplicaciones",
Expand Down
3 changes: 2 additions & 1 deletion messages/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"Benefits": "Avantages",
"Tap to view your Benefits": "Appuyez pour voir vos avantages",
"View all": "Voir tout",
"NEW": "NOUVEAU",

"This is the about page": "Ceci est la page À propos",

Expand Down Expand Up @@ -118,7 +119,7 @@
"No applications yet please tap on the below link to view all programs": "Aucune demande pour le moment, veuillez appuyer sur le lien ci-dessous pour voir tous les programmes",
"No benefits yet please tap on the below link to view all programs": "Aucun avantage pour le moment, veuillez appuyer sur le lien ci-dessous pour voir tous les programmes",
"You havent enrolled into any programs yet please tap on the below link to view all programs": "Vous n'êtes inscrit à aucun programme pour le moment, veuillez appuyer sur le lien ci-dessous pour voir tous les programmes",
"No Applications No Benefits": "Vous n'avez encore postulé à aucun programme ; veuillez cliquer sur le lien ci-dessous pour voir tous les programmes.",
"No Applications No Benefits": "Vous n'avez encore postulé à aucun programme, veuillez cliquer sur le lien ci-dessous pour voir tous les programmes.",
"Applications but No Benefits": "Aucun droit approuvé à afficher, veuillez visiter ma page de candidature.",
"View All Program": "Voir Tous les Programmes",
"View My Applications": "Voir Candidatures",
Expand Down
3 changes: 2 additions & 1 deletion messages/tl.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"Benefits": "Mga Benepisyo",
"Tap to view your Benefits": "Pindutin para tingnan ang iyong mga benepisyo",
"View all": "Tingnan lahat",
"NEW": "BAGO",

"This is the about page": "Ito ang tungkol sa pahina",

Expand Down Expand Up @@ -118,7 +119,7 @@
"No applications yet please tap on the below link to view all programs": "Wala pang mga aplikasyon, mangyaring pindutin ang link sa ibaba upang tingnan lahat ng mga programa",
"No benefits yet please tap on the below link to view all programs": "Wala pang mga benepisyo, mangyaring pindutin ang link sa ibaba upang tingnan lahat ng mga programa",
"You havent enrolled into any programs yet please tap on the below link to view all programs": "Hindi ka pa nakapag-enroll sa anumang programa, mangyaring pindutin ang link sa ibaba upang tingnan lahat ng mga programa",
"No Applications No Benefits": "Wala ka pang inaaplayan na mga programa; pakitap ang link sa ibaba upang makita ang lahat ng mga programa.",
"No Applications No Benefits": "Wala ka pang inaaplayan na mga programa, pakitap ang link sa ibaba upang makita ang lahat ng mga programa.",
"Applications but No Benefits": "Walang naaprubahang benepisyo na ipapakita, pakibisita ang aking pahina ng aplikasyon.",
"View All Program": "Tingnan Lahat ng Programa",
"View My Applications": "Tingnan ang Aking Mga Aplikasyon",
Expand Down
77 changes: 66 additions & 11 deletions src/app/[locale]/programs/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export default function ProgrmPage({

const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
const [sortedColumn, setSortedColumn] = useState<string | null>(null);
const [selectedProgram, setSelectedProgram] = useState<Program | null>(null);

useEffect(() => {
if (searchQuery) {
Expand Down Expand Up @@ -257,22 +258,27 @@ export default function ProgrmPage({
>
{t("Reapply")}
</button>
) : showReapplyButton ? (
<button
className="viewButton buttonElement w-24 h-8 bg-blue-700 rounded-md text-blue text-xs font-normal flex items-center justify-center"
onClick={() => handleViewClick(program)}
>
{t("View")}
</button>
) : (
showReapplyButton && (
<button
className="viewButton buttonElement w-24 h-8 bg-blue-700 rounded-md text-blue text-xs font-normal flex items-center justify-center"
onClick={() => handleViewClick(program)}
>
{t("View")}
</button>
)
<button
className="applyButton w-24 h-8 bg-blue-700 rounded-md text-white text-xs font-normal flex items-center justify-center"
onClick={() => handleApplyClick(program)}
>
{t("Apply")}
</button>
)
) : (
<button
className="viewButton w-24 h-8 bg-blue-700 rounded-md text-blue text-xs font-normal flex items-center justify-center"
onClick={() => handleViewClick(program)}
className="applyButton w-24 h-8 bg-blue-700 rounded-md text-blue text-xs font-normal flex items-center justify-center"
onClick={() => handleApplyClick(program)}
>
{t("View")}
{t("Apply")}
</button>
))}
</td>
Expand Down Expand Up @@ -361,6 +367,23 @@ export default function ProgrmPage({
}
};

// Function to check if a program is new (created within the last 21 days)
const isNewProgram = (createDate: string): boolean => {
const today = new Date();
const twentyOneDaysAgo = new Date();
twentyOneDaysAgo.setDate(today.getDate() - 21);
const programCreateDate = new Date(createDate);
return programCreateDate > twentyOneDaysAgo;
};

const openProgramDetails = (program: Program) => {
setSelectedProgram(program);
};

const closeProgramDetails = () => {
setSelectedProgram(null);
};

return (
<div className=" rounded-lg border-gray-200 p-4 mx-4 lg:px-4 m-0">
<div
Expand Down Expand Up @@ -577,11 +600,21 @@ export default function ProgrmPage({
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
cursor: "pointer",
}}
onClick={() => openProgramDetails(program)} // Open details on click
data-tooltip={program.name} // Add data-tooltip attribute
onMouseEnter={(e) => showTooltip(e, program.name)}
onMouseLeave={() => hideTooltip()} // Hide tooltip on mouse leave
>
{isNewProgram(program.create_date) && (
<span
className="bg-blue-500 text-white px-2 py-1 rounded-md text-xs font-semibold animate-pulse mr-2"
style={{fontSize: "9px"}}
>
{t("NEW")}
</span>
)}
{program.name}
</td>

Expand Down Expand Up @@ -656,6 +689,28 @@ export default function ProgrmPage({
{/* <div className="pt-0" style={{marginTop: "0px", marginBottom: "24px"}}>
<Card />
</div> */}
{selectedProgram && (
<div
className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50"
onClick={closeProgramDetails}
>
<div
className="bg-white p-4 rounded-md relative w-[400px] h-[200px]" // Fixed width and height
onClick={(e) => e.stopPropagation()}
style={{overflowY: "auto"}} // Add vertical scroll if content overflows
>
<h3 className="rowElement font-bold text-center flex justify-center">{selectedProgram.name}</h3>
<hr className="my-2 border-gray-300" /> {/* Horizontal line */}
<p className="snoElement mt-2">{selectedProgram.description}</p>
<button
className="absolute top-1 right-1 text-red-600 hover:text-gray-800"
onClick={closeProgramDetails}
>
×
</button>
</div>
</div>
)}
</div>
);
}
78 changes: 44 additions & 34 deletions src/app/[locale]/submission/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@ export default function Submitted() {
const hideToastSuccessMsg = () => {
setIsToastVisible(false);
};
// Function to format the date as DD-MM-YYYY
const formatDate = (dateString: string) => {
if (!dateString) return "";
const date = new Date(dateString);
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ("0" + date.getDate()).slice(-2);
const year = date.getFullYear();
return `${day}-${month}-${year}`; // Format as DD-MM-YYYY
};

return (
<div className=" rounded-lg border-gray-200 m-6 p-4 " style={{marginLeft: "28px", marginTop: "10px"}}>
<div className="print:hidden">
Expand Down Expand Up @@ -154,43 +164,41 @@ export default function Submitted() {

<div className="flex flex-row gap-6 justify-center mt-4 ">
<div className=" border border-gray-300 bg-brand container rounded-lg shadow-md">
<div className="flex-col flex-wrap justify-between items-center">
<div className="m-5 ">
<p className="text-gray-900 mb-4">
Dear {profile?.given_name} {profile?.family_name},
</p>
<div className="text-gray-700 mb-4">
Thank you for submitting your form for the program {applicationDetails.program_name}. Your
application number is {applicationDetails.application_id}.
</div>
<div className="text-gray-700 mb-4"></div>
<div className="text-gray-700 mb-4">
We appreciate your interest in and we are committed to providing you with the support you
need to achieve your goals. Our team will now review your application and assess your
eligibility for the scheme. This process may take some time, and we appreciate your
patience while we work to provide you with the best possible service.
</div>
<div className="text-gray-700 mb-4">
Please note that if additional information is required to process your application, we
will contact you using the email or phone number provided in your application. Therefore,
it is important that you check your email and phone regularly to avoid any delays. Once
your application has been reviewed, we will notify you of the outcome via email or phone.
If your application is approved, we will provide you with the necessary instructions to
access the benefits of the scheme.
</div>
<div className="m-5 ">
<p className="text-gray-900 mb-4">
Dear {profile?.given_name} {profile?.family_name},
</p>
<div className="text-gray-700 mb-4">
Thank you for submitting your form for the program {applicationDetails.program_name}. Your
application number is {applicationDetails.application_id}.
</div>
<div className="text-gray-700 mb-4"></div>
<div className="text-gray-700 mb-4">
We appreciate your interest in and we are committed to providing you with the support you
need to achieve your goals. Our team will now review your application and assess your
eligibility for the scheme. This process may take some time, and we appreciate your patience
while we work to provide you with the best possible service.
</div>
<div className="text-gray-700 mb-4">
Please note that if additional information is required to process your application, we will
contact you using the email or phone number provided in your application. Therefore, it is
important that you check your email and phone regularly to avoid any delays. Once your
application has been reviewed, we will notify you of the outcome via email or phone. If your
application is approved, we will provide you with the necessary instructions to access the
benefits of the scheme.
</div>

<div className="text-gray-700 mb-4">
Thank you once again for your application, and we wish you the best of luck in your future
endeavors.
</div>
<div className="text-gray-700 mb-4">
Best regards,
<p>Program Management Team</p>
</div>
<div className="text-gray-700 mb-4">
Thank you once again for your application, and we wish you the best of luck in your future
endeavors.
</div>
<div className="text-gray-700 mb-4">
Best regards,
<p>Program Management Team</p>
</div>
</div>
</div>
<div className="basis-1/2 print:hidden mb-80 flex-col flex-wrap justify-between items-center border border-gray-300 bg-brand container pb-10 rounded-lg top-24 shadow-md ">
<div className="basis-1/2 flex-col border border-gray-300 bg-brand container pb-10 rounded-lg top-24 shadow-md ">
<p className=" text-gray-700 pt-4 pl-4 pb-0 ">{applicationDetails.program_name}</p>
<button className=" ml-4 mb-4 w-24 h-8 bg-blue-700 rounded-md text-white text-sm font-normal flex items-center justify-center ">
{applicationDetails.application_status === "active" ||
Expand All @@ -203,7 +211,9 @@ export default function Submitted() {
<h3>{t("Application ID")}</h3>
<h1 className="text-black font-bold mb-4">{applicationDetails.application_id}</h1>
<h3>{t("Submitted On")}</h3>
<h1 className="text-black font-bold mb-4">{applicationDetails.date_applied?.slice(0, 10)}</h1>
<h1 className="text-black font-bold mb-4">
{formatDate(applicationDetails.date_applied?.slice(0, 10))}
</h1>
</div>
<hr className="border-t mx-0 border-gray-400 " />
<div className="flex flex-col gap-2 items-center m-4">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function Card() {
imagePath1={prefixBasePath("/img/[email protected]")}
link1="#"
heading2={t("Housing")}
heading3={t("KYC")}
heading3={t("View all")}
description2={t("Tap here for assistance")}
imagePath2={prefixBasePath("/img/[email protected]")}
link2="#"
Expand Down
5 changes: 4 additions & 1 deletion src/components/navigation/LanguageDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,10 @@ export default function LanguageDropDown() {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute flex-col right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white ring-1 ring-gray-400 focus:outline-none">
<Menu.Items
className="absolute flex-col right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white ring-1 ring-gray-400 focus:outline-none"
style={{zIndex: 1000}}
>
<div className="py-1 flex-col items-center">
{supportedLocales.map((locale) => (
<Menu.Item key={`locale-${locale}`}>
Expand Down
5 changes: 4 additions & 1 deletion src/components/navigation/ProfileDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,10 @@ export default function ProfileDropDown() {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items
className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
style={{zIndex: 1000}}
>
<div className="py-1" style={{whiteSpace: "nowrap"}}>
<Menu.Item>
{({active}) => (
Expand Down
1 change: 1 addition & 0 deletions src/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface Program {
is_portal_form_mapped: string;
is_multiple_form_submission: number;
last_application_status: number;
create_date: string;
}
export interface ProgramDetails {
program_name: string;
Expand Down

0 comments on commit 44c8f8e

Please sign in to comment.