View badges fixes bugs

@types/index.d.ts

@@ -931,5 +931,5 @@ export type DashboardActivity = {
 };
 
 export interface ExtendedDashboardActivity extends DashboardActivity {
-    isPage?: boolean;
+  isPage?: boolean;
 }

components/Modals/TempUser.tsx

@@ -31,9 +31,9 @@ const TempUser = ({ isOpen, onClose }: TempUser) => {
     };
     const payment = userForm.get('paymentMethod') as string;
     const tempUser = await createTempUser(data);
-    
+
     if (tempUser.data.token) {
-      localStorage.setItem('trans_token',tempUser.data.token);
+      localStorage.setItem('trans_token', tempUser.data.token);
 
       const cartItems = JSON.parse(localStorage.getItem('products') as string);
       const cartIds = await getCardItemsId(cartItems);

components/Navbars/TopBar.tsx

@@ -532,7 +532,6 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
           )}
         </div>
         <div className="auth flex items-center gap-3 cursor-pointer" onClick={handleAuthMenu}>
-
           <p className=" font-bold font-manropeEB">
             {globalAuth?.user?.firstName} {globalAuth?.user?.lastName}
           </p>

helpers/formatCurrency.ts

@@ -16,6 +16,6 @@ export const formatToNigerianNaira = (num: number | string): string => {
   return formatter.format(parsedNum);
 };
 
-export const formatCurrency = (currency:number|string) => {
-  return currency.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
+export const formatCurrency = (currency: number | string) => {
+  return currency.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};

http/super-admin1.ts

@@ -187,5 +187,5 @@ export const useDeleteShop = () => {
 
 export const logout = (route: NextRouter) => {
   localStorage.removeItem('zpt');
-  route.push('/')
-}
+  route.push('/');
+};

modules/assessment/component/Badges/BadgeComponent.tsx

@@ -29,7 +29,7 @@ const BadgeComponent: React.FC<BadgeComponentProps> = ({
       href={href}
       as={as}
       passHref
-      className="badgecomponent w-[330px] h-[330px] sm:w-[236px] sm:h-[236px] lg:min-w-[300px] lg:min-h-[300px] xl:min-w-[330px] xl:min-h-[330px] p-[16px] flex flex-col items-center border border-neutral-200 rounded-[8px] gap-[12px] relative overflow-hidden"
+      className="badgecomponent w-[330px] h-[330px] sm:w-[236px] sm:h-[236px] lg:min-w-[300px] lg:min-h-[300px] xl:min-w-[330px] xl:min-h-[330px] p-[16px] flex flex-col items-center border border-neutral-200 rounded-[8px] gap-[12px] relative overflow-hidden transition-transform duration-300 hover:scale-105"
     >
       <div className="badgerewardimage w-[160px] h-[128px] relative">
         <Image src={imageSrc} fill={true} alt={imageAlt} style={{ objectFit: 'contain' }} />

modules/assessment/component/Badges/BadgesComponentHeader.tsx

@@ -4,12 +4,12 @@ import Image from 'next/image';
 const BadgesComponentHeader = () => {
   return (
     <>
-      <div className="w-full h-[130px] bg-[#005427] px-[15px] sm:px-[68px] xl:px-[100px] flex items-center sm:justify-start md:justify-between relative ">
-        <div className="gap-[8px] flex flex-col ">
-          <h1 className="text-[22px] sm:text-[32px] font-[600] text-white-100 leading-[36px] md:leading-[40px] tracking-normal lg:pr-[100px]">
-            Keep tabs on all yours badges
+      <div className="w-full h-[130px] bg-brand-green-shade40 px-[15px] sm:px-[60px] lg:px-[60px] xl:px-[150px]  flex items-center sm:justify-start md:justify-between relative ">
+        <div className="gap-[8px] flex flex-col  w-full items-center ">
+          <h1 className="text-[22px] sm:text-[32px] font-[600] text-white-100 leading-[36px] md:leading-[40px] tracking-normal lg:pr-[150px] max-w-[1250px] w-full">
+            Keep tabs on all your badges
           </h1>
-          <p className="text-[14px] leading-[20px] font-[500] text-white-100">
+          <p className="text-[14px] leading-[20px] font-[500] text-white-100 max-w-[1250px] w-full">
             Start your journey and earn a badge today!
           </p>
         </div>
@@ -47,39 +47,39 @@ const BadgesComponentHeader = () => {
             src="/assets/images/badges/bannerintermediatebadge.svg"
             width={290}
             height={30}
-            alt="expert badge image"
+            alt="intermediate badge image"
           />
         </div>
         <div className="absolute top-[-20px] sm:top-0 right-0 hidden lg:block">
           <Image
             src="/assets/images/badges/bannerbeginnerbadge.png"
             width={160}
             height={128}
-            alt="expert badge image"
+            alt="beginner badge image"
           />
         </div>
         <div className="absolute bottom-0 hidden sm:block sm:right-[20%] md:right-[10%] lg:right-[30%] mix-blend-hard-light ">
           <Image
             src="/assets/images/badges/bannerintermediatebadge.svg"
             width={290}
             height={30}
-            alt="expert badge image"
+            alt="intermediate badge image"
           />
         </div>
         <div className="absolute top-[-20px] sm:top-0 right-0 hidden lg:block">
           <Image
             src="/assets/images/badges/bannerbeginnerbadge.png"
             width={160}
             height={128}
-            alt="expert badge image"
+            alt="beginner badge image"
           />
         </div>
         <div className="absolute bottom-0 right-0 block sm:hidden mix-blend-hard-light ">
           <Image
             src="/assets/images/badges/bannerintermediatesmallbadge.svg"
             width={100}
             height={30}
-            alt="expert badge image"
+            alt="intermediate badge image"
             priority={true}
           />
         </div>
@@ -88,15 +88,15 @@ const BadgesComponentHeader = () => {
             src="/assets/images/badges/bannerbeginnerbadge.png"
             width={160}
             height={128}
-            alt="expert badge image"
+            alt="beginner badge image"
           />
         </div>
         <div className="absolute bottom-0 right-0 block sm:hidden mix-blend-hard-light ">
           <Image
             src="/assets/images/badges/bannerintermediatesmallbadge.svg"
             width={100}
             height={30}
-            alt="expert badge image"
+            alt="intermediate badge image"
             priority={true}
           />
         </div>

modules/assessment/component/Badges/errordata.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 const errordata = () => {
   return (
-    <div className="px-10 md:px-32 py-10 grid grid-cols-1 justify-center align-middle ">
-      <div className="rounded overflow-hidden shadow-lg text-center">
+    <div className="px-10 md:px-32 py-10 grid grid-cols-1 justify-center align-middle">
+      <div className=" flex flex-col items-center justify-center rounded overflow-hidden shadow-lg text-center h-72">
         <h1 className="text-6xl font-semibold text-brand-green-primary">Oops!</h1>
-        <p className=" text-lg text-gray-600 my-5 "> Error fetching data.</p>
+        <p className=" text-lg text-gray-600 my-5 "> Error fetching data</p>
         <div className="animate-bounce my-5">
           <svg
             className="mx-auto h-16 w-16 text-brand-green-primary"

modules/auth/component/ForgotPassword/ForgotPassword.tsx

@@ -60,7 +60,7 @@ const ForgotPassword = () => {
       // status code for user whose email is not verified
       if (e.status === 403) {
         notify({
-          message: "Account not verified, redirecting to verification page.",
+          message: 'Account not verified, redirecting to verification page.',
           type: 'error',
           theme: 'light',
         });

modules/auth/component/guestsignupform.tsx

@@ -45,7 +45,7 @@ const Guestsignupform: React.FC = () => {
       notify({
         message: res.message,
         type: 'error',
-        theme: 'light'
+        theme: 'light',
       });
     },
   });

modules/auth/component/logout/Logout.tsx

@@ -40,7 +40,6 @@ export const MobileLogout = () => {
         </g>
       </svg>
       <p className="font-manropeB">Sign Out</p>
-
     </div>
   );
 };

modules/auth/verificationComplete.tsx

@@ -71,7 +71,7 @@ function VerificationComplete() {
         notify({
           message: timeoutErrorMessage,
           type: 'error',
-          theme: 'light'
+          theme: 'light',
         });
         setIsError(true);
         return;
@@ -86,7 +86,7 @@ function VerificationComplete() {
       notify({
         message: error.message,
         type: 'error',
-        theme: 'light'
+        theme: 'light',
       });
       setIsError(true);
     },

modules/portfolio/component/modals/CountryCityDropdown.tsx

@@ -69,7 +69,7 @@ const CountryCityDropdown: React.FC<Props> = ({
             <SelectTrigger className="border-[#59595977]  h-[50px] rounded-[10px]">
               <SelectValue
                 defaultValue={selectedCountry || ''}
-                placeholder='Select Country'
+                placeholder="Select Country"
                 className="hover:border-green-500"
               />
             </SelectTrigger>
@@ -95,7 +95,7 @@ const CountryCityDropdown: React.FC<Props> = ({
             <SelectTrigger className="border-[#59595977] text-grey-300 h-[50px] rounded-[10px]">
               <SelectValue
                 defaultValue={selectedCity || ''}
-                placeholder='Select City'
+                placeholder="Select City"
                 className="hover:border-green-500"
               />
             </SelectTrigger>

modules/portfolio/component/modals/edit-profile.tsx

@@ -14,7 +14,6 @@ import { useAuth } from '../../../../context/AuthContext';
 const inputStyle = `placeholder-gray-300 placeholder-opacity-40 font-semibold text-gray-500 h-[50px] border-2 border-[#bcbcbc] rounded-[10px] px-4  ring-0 outline-brand-green-primary transition-all duration-300 ease-in-out select-none focus-within:border-brand-green-primary`;
 
 const EditProfile = () => {
-
   const { userData, setUserData, showProfileUpdate, setShowProfileUpdate } = useContext(Portfolio);
   const [picture, setPicture] = useState<string | StaticImport>();
   const [firstNamee, setFirstnamee] = useState('');
@@ -61,15 +60,14 @@ const EditProfile = () => {
         const response = await fetch(`https://hng6-r5y3.onrender.com/api/v1/users/${userId}`);
         const userData = await response.json();
 
-
         // Set default values as placeholders if data is not present
         setPicture(userData.data.user.profilePic || '');
         setFirstnamee(userData.data.user.firstName || ''); // Access 'user' inside 'data'
         setLastNamee(userData.data.user.lastName || ''); // Access 'user' inside 'data'
         setCity(userData.data.portfolio.city || ''); // Access 'portfolio' inside 'data'
         setCountry(userData.data.portfolio.country || ''); // Access 'portfolio' inside 'data'
         setSelectedTrack(userData.data.userTracks.track || ''); // Access 'userTracks' inside 'data'
-        
+
         setAvailableTracks(await getTracks());
         setIsLoading(false);
       } catch (error: any) {
@@ -85,15 +83,12 @@ const EditProfile = () => {
       const response = await fetch('https://hng6-r5y3.onrender.com/api/v1/tracks');
       const data = await response.json();
       return data.data;
-    } catch (error: any) {
-
-    }
+    } catch (error: any) {}
   };
 
-
   const handleSubmit = async (e: any) => {
     e.preventDefault();
-  
+
     let matchingTrack: any;
     matchingTrack = availableTracks.find((track: any) => track.track === selectedTrack);
     if (!isLoading) {

modules/portfolio/component/skillModal/SkillsModal.tsx

@@ -8,7 +8,6 @@ import { notify } from '@ui/Toast';
 import Loader from '@ui/Loader';
 import Portfolio from '../../../../context/PortfolioLandingContext';
 
-
 type skillModalProps = {
   onCloseModal: () => void;
   onSaveModal: () => void;
@@ -43,7 +42,7 @@ const SkillModal = ({ onCloseModal, onSaveModal, isOpen, userId }: skillModalPro
   ]);
   const [arrayTwo, setArrayTwo] = useState<Array<skillListRes>>([]);
   const [values, setValues] = useState<Array<skillListRes>>([]);
- const slug  = useContext(Portfolio);
+  const slug = useContext(Portfolio);
 
   const fetchSkillData = useCallback(async () => {
     try {

modules/shop/component/cart/checkout/Summary.tsx

@@ -71,7 +71,9 @@ const Summary = ({ prices, summary, token }: SummaryProps & { token: string; sum
             <div className="cart-summary__prices flex flex-col space-y-3">
               <div className="sum flex justify-between">
                 <p className="font-bold">Subtotal</p>
-                <span className="text-gray-200">₦ {summary.subtotal ? formatCurrency(summary.subtotal.toFixed(2)) : ''}</span>
+                <span className="text-gray-200">
+                  ₦ {summary.subtotal ? formatCurrency(summary.subtotal.toFixed(2)) : ''}
+                </span>
               </div>
 
               <div className="sum flex justify-between">
@@ -107,7 +109,11 @@ const Summary = ({ prices, summary, token }: SummaryProps & { token: string; sum
               </button>
             </div>
             {token.length > 0 && modalOpen ? (
-              <PaymentInformationModal token={token} orderTotal={formatCurrency(summary.total)} closeModal={closeModal} />
+              <PaymentInformationModal
+                token={token}
+                orderTotal={formatCurrency(summary.total)}
+                closeModal={closeModal}
+              />
             ) : (
               <TempUser isOpen={modalOpen} onClose={closeModal} />
             )}

modules/super-admin/components/navigations/SuperAdminSidebar.tsx

@@ -38,7 +38,10 @@ const SuperAdminSidebar = () => {
             ))}
           </div>
         </div>
-        <button className="flex items-center gap-3 text-brand-red-primary border-t py-5  text-xs md:text-sm  mx-5 border-white-115" onClick={() => logout(router)}>
+        <button
+          className="flex items-center gap-3 text-brand-red-primary border-t py-5  text-xs md:text-sm  mx-5 border-white-115"
+          onClick={() => logout(router)}
+        >
           <LogoutCurve size="20" color="#ff2e2e" />
           Log out
         </button>