prod

package.json

@@ -18,16 +18,19 @@
         "axios": "^1.3.4",
         "file-saver": "^2.0.5",
         "formik": "^2.2.9",
-        "framer-motion": "^10.15.0",
+        "framer-motion": "^10.18.0",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^2.5.1",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.4",
         "razorpay": "^2.9.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-fast-marquee": "^1.6.4",
         "react-google-charts": "^4.0.0",
         "react-helmet": "^6.1.0",
         "react-hot-toast": "^2.4.1",
-        "react-icons": "^4.10.1",
+        "react-icons": "^4.12.0",
         "react-qr-code": "^2.0.11",
         "react-router-dom": "^6.9.0",
         "react-select": "^5.7.7",

src/App.tsx

@@ -46,6 +46,7 @@ import Analytics from "./modules/Dashboard/modules/UrlShortener/Pages/Analytics"
 import Donation from "./modules/Public/Donation/Donation";
 import Refund from "./modules/Public/Donation/pages/Refund";
 import DonationSuccess from "./modules/Public/Donation/pages/DonationSuccess";
+import OpenGrad from "./modules/Dashboard/modules/OpenGrad";
 
 const Profile = lazy(
     () => import("./modules/Dashboard/modules/Profile/pages/Profile")
@@ -241,6 +242,10 @@ const ConnectedDevices = lazy(
 );
 const Wadhwani = lazy(() => import("./modules/Dashboard/modules/Wadhwani"));
 
+const Trivial = lazy(
+    () => import("./modules/Public/TrivialIdeas/modules/trivial")
+);
+
 function App() {
     const AuthChecker = SecureAuthRoutes();
     const router = createBrowserRouter([
@@ -277,6 +282,10 @@ function App() {
             path: "donation/refund",
             element: <Refund />
         },
+        {
+            path: "trivial-ideas",
+            element: <Trivial />
+        },
         {
             path: "/",
             element: <AuthRoutes />,
@@ -319,6 +328,10 @@ function App() {
                             path: "wadhwani",
                             element: <Wadhwani />
                         },
+                        {
+                            path: "opengrad",
+                            element: <OpenGrad />
+                        },
                         {
                             path: "refer",
                             element: <Refer />

src/modules/Dashboard/layouts/DashboardRootLayout.tsx

@@ -14,7 +14,8 @@ import { fetchLocalStorage } from "@/MuLearnServices/common_functions";
 const DashboardRootLayout = (props: { component?: any }) => {
     const [connected, setConnected] = useState(false);
 
-    const Management: ManagementTypes[] = Object.values(managementTypes).slice(2);
+    const Management: ManagementTypes[] =
+        Object.values(managementTypes).slice(2);
     useEffect(() => {
         const userInfo = fetchLocalStorage<UserInfo>("userInfo");
         if (userInfo) {
@@ -64,6 +65,12 @@ const DashboardRootLayout = (props: { component?: any }) => {
             hasView: true,
             icon: <i className="fi fi-sr-building"></i>
         },
+        {
+            url: "/dashboard/opengrad",
+            title: "OpenGrad",
+            hasView: true,
+            icon: <i className="fi fi-sr-building"></i>
+        },
         {
             url: "/dashboard/refer",
             title: "Referrals",
@@ -105,13 +112,13 @@ const DashboardRootLayout = (props: { component?: any }) => {
                     title: "Manage Organization",
                     hasView: true,
 
-                    roles: [roles.ADMIN, roles.FELLOW, roles.ASSOCIATE],
+                    roles: [roles.ADMIN, roles.FELLOW],
                     children: [
                         {
                             url: "/dashboard/affiliation",
                             title: "Affiliation",
                             hasView: true,
-                            roles: [roles.ADMIN, roles.FELLOW, roles.ASSOCIATE]
+                            roles: [roles.ADMIN, roles.FELLOW]
                         },
                         {
                             url: "/dashboard/organization-transfer",
@@ -233,7 +240,7 @@ const DashboardRootLayout = (props: { component?: any }) => {
                     url: "/dashboard/channels",
                     title: "Channels",
                     hasView: true,
-                    roles: [roles.ADMIN, roles.FELLOW, roles.ASSOCIATE]
+                    roles: [roles.ADMIN, roles.FELLOW]
                 },
 
                 {

src/modules/Dashboard/modules/ManageUsers/UserForm.tsx

@@ -142,7 +142,15 @@ const UserForm = forwardRef(
         const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
             const { name, value } = e.target;
 
-            setData(prevData => ({ ...prevData, [name]: value }));
+            if (name === "mobile" && value && !/^\+?\d{0,12}$/.test(value.trim())) {
+                setErrors(prevErrors => ({
+                    ...prevErrors,
+                    mobile: "Invalid format"
+                }));
+            } else {
+                setErrors(prevErrors => ({ ...prevErrors, mobile: undefined }));
+                setData(prevData => ({ ...prevData, [name]: value.trim() || " " }));
+            }
         };
 
         const handleYearChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -373,7 +381,7 @@ const UserForm = forwardRef(
                         </div>
                         <div className={styles.inputContainer}>
                             <input
-                                type="text"
+                                type="tel"
                                 name="mobile"
                                 placeholder="Mobile"
                                 value={data.mobile}

src/modules/Dashboard/modules/OpenGrad/index.module.css

@@ -0,0 +1,116 @@
+/* General Styles */
+.wrapper h1 {
+    font-weight: bold;
+    font-size: 3rem;
+}
+
+.course {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* Three cards per row */
+    gap: 2rem; /* Increased gap */
+    justify-items: center;
+}
+
+/* Course Card Styles */
+.containercard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem;
+    margin: 12px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    max-width: 300px; /* Increased max-width */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out;
+    font-family: Poppins, sans-serif;
+    gap: 1.5rem;
+}
+
+.containercard:hover {
+    transform: translateY(-5px);
+}
+
+/* Image Styles */
+.courseImage {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 16px;
+}
+
+/* Text Styles */
+.title {
+    font-weight: 500;
+    font-size: 24px;
+    margin-bottom: 0.5rem;
+}
+
+.desc {
+    color: #404d61;
+    font-size: 0.9rem;
+}
+
+.duration,
+.lessons {
+    color: #404d61;
+    opacity: 0.5;
+    font-weight: 500;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.cta {
+    background: #456ff6;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    cursor: pointer;
+    border: none;
+    transition: background-color 0.3s ease-in-out;
+}
+
+.cta:hover {
+    background: #3457d5;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 1300px) {
+    .course {
+        grid-template-columns: repeat(2, 1fr); /* Two cards per row */
+    }
+    .containercard {
+        width: 45vw;
+        height: auto; /* Adjust height to maintain aspect ratio */
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .wrapper h1 {
+        font-size: 2rem;
+    }
+    .course {
+        grid-template-columns: repeat(1, 1fr); /* One card per row */
+    }
+    .containercard {
+        width: 70vw;
+        height: auto; /* Adjust height to maintain aspect ratio */
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .course {
+        grid-template-columns: repeat(1, 1fr); /* One card per row */
+    }
+    .containercard {
+        width: 85vw;
+        height: auto; /* Adjust height to maintain aspect ratio */
+    }
+}
+
+.second_view_container {
+    margin-top: 3rem;
+    padding: 2rem;
+    background-color: #ffffff;
+}

src/modules/Dashboard/modules/OpenGrad/index.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import styles from "./index.module.css";
+import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader";
+
+interface CourseCardProps {
+    title: string;
+    // desc: string;
+    // duration: string;
+    url: string;
+    imageUrl: string;
+    lessons: string;
+}
+
+const OpenGrad: React.FC = () => {
+    const isLoading = false; // Set to true if you want to show the loader
+
+    const hardcodedCourses = [
+        {
+            courseId: "1",
+            url: "home/test",
+            courseName: "MBA Bundle",
+            // description:
+            //     "This is a description of course 1. It provides an overview of the course content.",
+            // CourseDuration: "10",
+            imageUrl:
+                "https://imgproxy.learnyst.com/learnyst-user-assets/school-assets/schools/157986/courses/189940/17128570399041564c161_efc4_475b_9151_8549c1ac8969_lyst1712857039920.jpg",
+            lessons: " "
+        },
+        {
+            courseId: "1",
+            url: "CAT-Malayalam",
+            courseName: "CAT (Malayalam)",
+            // description:
+            //     "This is a description of course 1. It provides an overview of the course content.",
+            // CourseDuration: "10",
+            imageUrl:
+                "https://imgproxy.learnyst.com/learnyst-user-assets/school-assets/schools/157986/courses/195295/1718119061947Screenshot_2024_06_11_at_81501_PMpng_lyst1718119061974.png",
+            lessons: "17 lessons"
+        },
+        {
+            courseId: "3",
+            url: "CUET-UG-Malayalam",
+            courseName: "CUET UG (Malayalam)",
+            // description:
+            //     "This is a description of course 1. It provides an overview of the course content.",
+            // CourseDuration: "10",
+            imageUrl:
+                "https://imgproxy.learnyst.com/learnyst-user-assets/school-assets/schools/157986/courses/189121/1712066546664ddd958be_3b42_4082_84de_893bf0061a32_lyst1786.jpg",
+            lessons: "60 lessons"
+        },
+        {
+            courseId: "4",
+            url: "CUET-UG-Mock-Tests-test",
+            courseName: "CUET UG Questions & Mocks",
+            // description:
+            //     "This is a description of course 1. It provides an overview of the course content.",
+            // CourseDuration: "10",
+            imageUrl:
+                "https://imgproxy.learnyst.com/learnyst-user-assets/school-assets/schools/157986/courses/186487/1711619074132fc94d707_d408_4c2d_aeaa_446cd850b7f4_lyst9700.jpg",
+            lessons: " "
+        }
+        // {
+        //     courseId: "",
+        //     url: "root",
+        //     courseName: "",
+        //     // description:
+        //     //     "This is a description of course 1. It provides an overview of the course content.",
+        //     // CourseDuration: "10",
+        //     imageUrl: "",
+        //     lessons:
+        // },
+    ];
+
+    const handleCourseSelection = (id: string) => {
+        // Replace with actual course link if necessary
+        const courseLink = `https://opengrad-foundation.learnyst.com/learn/${id}`;
+        window.open(courseLink, "_blank");
+    };
+
+    const CourseCard: React.FC<CourseCardProps> = ({
+        title,
+        // desc,
+        // duration,
+        url,
+        imageUrl,
+        lessons
+    }) => {
+        return (
+            <div className={styles.containercard}>
+                <img
+                    src={imageUrl}
+                    alt={title}
+                    className={styles.courseImage}
+                />
+                <div className={styles.details}>
+                    <p className={styles.title}>{title}</p>
+                    {/* <p className={styles.desc}>{desc}</p>
+                    <p className={styles.duration}>{duration}hrs</p> */}
+                    <p className={styles.lessons}>{lessons}</p>
+                </div>
+                <button
+                    onClick={() => handleCourseSelection(url)}
+                    className={styles.cta}
+                >
+                    Checkout Course
+                </button>
+            </div>
+        );
+    };
+    if (isLoading) {
+        return <MuLoader />;
+    }
+    return (
+        <div className={styles.wrapper}>
+            <h1>OpenGrad Courses</h1>
+            <div className={styles.second_view_container}>
+                <div className={styles.second_view}>
+                    <div className={styles.courses_container}>
+                        <div className={styles.course}>
+                            {hardcodedCourses.map(course => (
+                                <CourseCard
+                                    key={course.courseId}
+                                    title={course.courseName}
+                                    // desc={course.description}
+                                    // duration={course.CourseDuration}
+                                    url={course.url}
+                                    imageUrl={course.imageUrl}
+                                    lessons={course.lessons}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default OpenGrad;