-
- {peerTaskCount}
- tasks pending for
peer-approval
-
-
-
{appraiserTaskCount}
-
tasks pending for
appraisal-approval
+ {!countLoading && (
+ <>
+ {currentTab === "tasks" && (
+
+
+
+ {peerTaskCount}
+
+
+ tasks pending for
+
+ peer-approval
+
+
+
+
+
+ {appraiserTaskCount}
+
+
+ tasks pending for
+
+ appraisal-approval
+
+
+
-
- }
- >}
- {currentTab === "leaderboard" ?
+ )}
+ >
+ )}
+ {currentTab === "leaderboard" ? (
- :
+ ) : (
- }
+ )}
>
- )
-}
-
+ );
+};
export default DiscordModeration;
diff --git a/src/modules/Dashboard/modules/LearningCircle/pages/LcAdmin/LcAdmin.tsx b/src/modules/Dashboard/modules/LearningCircle/pages/LcAdmin/LcAdmin.tsx
index 39b53d419..ab8b2cb71 100644
--- a/src/modules/Dashboard/modules/LearningCircle/pages/LcAdmin/LcAdmin.tsx
+++ b/src/modules/Dashboard/modules/LearningCircle/pages/LcAdmin/LcAdmin.tsx
@@ -67,11 +67,7 @@ const LcAdmin = () => {
id={["id"]}
onVerifyClick={() => {}}
>
-
{}}
- action={false}
- />
+ {}} />
{!isLoading && (
>;
+}) {
+ const handleCheckboxChange = (
+ event: React.ChangeEvent
+ ) => {
+ const id = parseInt(event.target.id);
+ setSelectedMonthdays(id);
+ };
+ return (
+
+
+ {Array.from({ length: 28 }, (_, index) => (
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/components/WeekdayPicker/WeekdayPicker.module.css b/src/modules/Dashboard/modules/LearningCircleV2/components/WeekdayPicker/WeekdayPicker.module.css
new file mode 100644
index 000000000..b2ecd2c98
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/components/WeekdayPicker/WeekdayPicker.module.css
@@ -0,0 +1,73 @@
+.InputSchedule {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding-bottom: 1rem;
+ .weeks {
+ display: grid;
+ grid-template-columns: auto auto auto auto auto auto auto;
+ gap: 1rem;
+ justify-content: space-between;
+ .box {
+ display: flex;
+ gap: 1rem;
+ position: relative;
+ width: 60px;
+ height: 60px;
+ padding: 20px;
+ background: #f3f3f3;
+ border-radius: 50%;
+ &.active {
+ background: #d3ddfb;
+ }
+ label {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 1rem;
+ font-weight: 500;
+ color: #000;
+ cursor: pointer;
+ }
+ input {
+ position: absolute;
+ width: 100%;
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
+ background-color: #f3f3f3;
+ outline: none;
+ width: 80%;
+ height: 80%;
+ top: 50%;
+ left: 50%;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ }
+ }
+
+ p {
+ font-size: medium;
+ font-weight: 400;
+ margin-left: 32px;
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ .InputSchedule {
+ width: 100%;
+ .weeks {
+ grid-template-columns: auto auto auto auto;
+ .box {
+ width: 60px;
+ height: 60px;
+ padding: 10px;
+ label {
+ font-size: 0.8rem;
+ }
+ }
+ }
+ }
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/components/WeekdayPicker/WeekdayPicker.tsx b/src/modules/Dashboard/modules/LearningCircleV2/components/WeekdayPicker/WeekdayPicker.tsx
new file mode 100644
index 000000000..0dda765b4
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/components/WeekdayPicker/WeekdayPicker.tsx
@@ -0,0 +1,136 @@
+import { useState } from "react";
+import styles from "./WeekdayPicker.module.css";
+
+export default function WeekdayPicker({
+ selectedWeekdays,
+ setSelectedWeekdays
+}: {
+ selectedWeekdays: number;
+ setSelectedWeekdays: React.Dispatch>;
+}) {
+ const handleCheckboxChange = (
+ event: React.ChangeEvent
+ ) => {
+ const id = parseInt(event.target.id);
+ setSelectedWeekdays(id);
+ };
+ return (
+
+ );
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport.module.css b/src/modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport.module.css
new file mode 100644
index 000000000..45fb9a830
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport.module.css
@@ -0,0 +1,69 @@
+.attendeeReport {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+
+ .backLink {
+ display: none;
+ align-items: center;
+ background-color: white;
+ padding: 0.5rem 1rem;
+ width: fit-content;
+ color: #5d5d5d;
+ text-decoration: none;
+ cursor: pointer;
+ border-radius: 10px;
+ }
+
+ .header {
+ width: 100%;
+ padding: 20px;
+ border-radius: 10px;
+ background: #fff;
+
+ h1 {
+ font-size: 24px;
+ font-weight: 600;
+ text-align: start;
+ }
+ }
+
+ .report {
+ background: #fff;
+ padding: 20px;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 20px;
+ label {
+ color: #000;
+ font-weight: 450;
+ }
+ textarea {
+ height: 200px;
+ }
+
+ textarea,
+ input {
+ width: 70%;
+ padding: 10px;
+ background: #eef2ff;
+ padding: 10px;
+ border-radius: 10px;
+ color: #333;
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .attendeeReport {
+ .report {
+ textarea,
+ input {
+ width: 100%;
+ }
+ }
+ }
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport.tsx b/src/modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport.tsx
new file mode 100644
index 000000000..127f40677
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/AttendeeReport/AttendeeReport.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import styles from "./AttendeeReport.module.css";
+import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+ getMeetupInfo,
+ submitAttendeeReport
+} from "../../services/LearningCircleAPIs";
+import toast from "react-hot-toast";
+import { FiChevronLeft } from "react-icons/fi";
+
+export default function AttendeeReport() {
+ const [report, setReport] = useState("");
+ const [reportLink, setReportLink] = useState("");
+ const [meetInfo, setMeetInfo] = useState();
+ const [isLoading, setIsLoading] = useState(false);
+ const params = useParams();
+ const navigate = useNavigate();
+ useEffect(() => {
+ getMeetupInfo(params.meet_id ?? "").then(res => {
+ setMeetInfo(res as any);
+ });
+ }, []);
+ const onSubmit = () => {
+ if (report === "") {
+ toast.error("Please enter a report.");
+ return;
+ }
+ if (reportLink === "") {
+ toast.error("Please enter a link to your proof of work.");
+ return;
+ }
+ setIsLoading(true);
+ submitAttendeeReport({
+ meetId: params.meet_id ?? "",
+ data: {
+ report,
+ report_link: reportLink
+ }
+ }).then(res => {
+ setIsLoading(false);
+ if (res) {
+ toast.success("Report submitted successfully.");
+ navigate(-1);
+ }
+ });
+ };
+ return (
+
+
{
+ navigate(-1);
+ }}
+ >
+
+ Learning Circles
+
+
+
{meetInfo?.title}
+
+
+
+
+
+
{
+ setReportLink(e.target.value);
+ }}
+ placeholder="Enter a link to your proof of work."
+ />
+
+ Submit Report
+
+
+
+ );
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLC/CreateLC.module.css b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLC/CreateLC.module.css
new file mode 100644
index 000000000..1831750a0
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLC/CreateLC.module.css
@@ -0,0 +1,91 @@
+.createLCContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+ margin: 0;
+ border-radius: 10px;
+ background: #fff;
+ h1 {
+ color: #000;
+ font-size: 20px;
+ font-weight: 600;
+ }
+ .content {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 20px;
+ width: 100%;
+ .headContent {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+ border-radius: 10px;
+ background: #fff;
+ /* box-shadow: 1px 1px 5px #d3ddfb; */
+ }
+ .form {
+ width: 100%;
+ padding: 20px;
+ border-radius: 10px;
+ background: #fff;
+ /* box-shadow: 1px 1px 5px #d3ddfb; */
+ .submitButton {
+ margin-top: 20px;
+ }
+ .formGroup {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 20px;
+ width: 100%;
+ background: #fff;
+ box-shadow: 1px 1px 5px #d3ddfb;
+ border-radius: 10px;
+ padding: 10px;
+ margin-top: 10px;
+ &.horizontal {
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: center;
+ }
+ label {
+ font-size: 16px;
+ font-weight: 500;
+ color: #000;
+ display: flex;
+ position: relative;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ }
+ .select {
+ width: 100%;
+ background: #d3ddfb;
+ border-radius: 10px;
+ }
+ }
+ }
+ }
+}
+@media (max-width: 768px) {
+ .createLCContainer {
+ .content {
+ grid-template-columns: 1fr;
+
+ .headContent {
+ display: none;
+ }
+ .form {
+ padding: 10px;
+ }
+ }
+ }
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLC/CreateLC.tsx b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLC/CreateLC.tsx
new file mode 100644
index 000000000..128d005da
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLC/CreateLC.tsx
@@ -0,0 +1,217 @@
+import { Form, Formik } from "formik";
+import styles from "./CreateLC.module.css";
+import Select from "react-select";
+import { useEffect, useState } from "react";
+import { HStack, Radio, RadioGroup, Switch, Tooltip } from "@chakra-ui/react";
+import {
+ createLearningCircle,
+ getInterestGroups
+} from "../../services/LearningCircleAPIs";
+import WeekdayPicker from "../../components/WeekdayPicker/WeekdayPicker";
+import MonthdayPicker from "../../components/MonthdayPicker/MonthdayPicker";
+import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
+import { BiInfoCircle } from "react-icons/bi";
+import imageTop from "../../assets/images/LC2.webp";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+
+type interestGroupType = {
+ value: string;
+ label: string;
+};
+
+export default function CreateLC() {
+ const [interestGroups, setInterestGroups] = useState();
+ const [selectedWeekdays, setSelectedWeekdays] = useState(-1);
+ const [selectedMonthdays, setSelectedMonthdays] = useState(-1);
+ const [isLoading, setIsLoading] = useState(false);
+ const navigate = useNavigate();
+ useEffect(() => {
+ (async () => {
+ const data = await getInterestGroups();
+ setInterestGroups(data);
+ })();
+ }, []);
+ const initialValues = {
+ ig: {
+ label: "",
+ value: ""
+ },
+ is_recurring: true,
+ recurrence_type: "weekly",
+ recurrence: 1
+ };
+ const onSubmit = (values: any) => {
+ if (!values.ig || values.ig == null || values.ig.value === "") {
+ toast.error("Please select interest group");
+ return;
+ }
+ if (values.is_recurring) {
+ if (values.recurrence_type === "weekly" && selectedWeekdays == -1) {
+ toast.error("Please select weekday");
+ return;
+ } else if (
+ values.recurrence_type === "monthly" &&
+ selectedMonthdays == -1
+ ) {
+ toast.error("Please select monthday");
+ return;
+ }
+ }
+ const data: LearningCircleCreate = {
+ ig: values.ig.value,
+ is_recurring: values.is_recurring,
+ recurrence_type: values.recurrence_type,
+ recurrence:
+ values.recurrence_type == "weekly"
+ ? selectedWeekdays + 1
+ : selectedMonthdays
+ };
+ setIsLoading(true);
+ createLearningCircle(data).then(status => {
+ setIsLoading(false);
+ if (status) {
+ navigate("/dashboard/learningcircle/create-meetup/" + status);
+ }
+ });
+ };
+ return (
+
+
+
+
+ {formik => (
+
+ )}
+
+
+
+
+
+
Learn, share, together
+
+ A fantastic way to spend a small amount of time
+ learning about new things with a group of people
+ with same interests!
+
+
+
+
+
+ );
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLCMeetup/CreateLCMeetup.module.css b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLCMeetup/CreateLCMeetup.module.css
new file mode 100644
index 000000000..d751e16e3
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLCMeetup/CreateLCMeetup.module.css
@@ -0,0 +1,124 @@
+.createLCMeetup {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ width: 100%;
+ background: #fff;
+ border-radius: 10px;
+
+ h1 {
+ color: #000;
+ font-size: 24px;
+ font-weight: 600;
+ margin-bottom: 30px;
+ }
+
+ .form {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+
+ .formGroup {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ width: 70%;
+ background: #fff;
+ &.horizontal {
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: center;
+ background: #fff;
+ padding: 10px;
+ border-radius: 10px;
+ box-shadow: 1px 1px 5px #d3ddfb;
+ label {
+ margin-bottom: 0;
+ }
+ }
+ label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 16px;
+ font-weight: 500;
+ color: #000;
+ margin-bottom: 10px;
+ }
+ .search {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ }
+
+ input,
+ textarea {
+ width: 100%;
+ padding: 10px;
+ border-radius: 10px;
+ border: 1px solid #d3ddfb;
+ outline: none;
+ color: #000;
+ background: #ddecff;
+ }
+ textarea {
+ height: 100px;
+ }
+ }
+ .searchResults {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 70%;
+ border-radius: 10px;
+ margin-top: 10px;
+ .result {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+ border-radius: 10px;
+ background: #fff;
+ box-shadow: 1px 1px 5px #d3ddfb;
+ cursor: pointer;
+ text-align: left;
+
+ &:hover {
+ background: #c5e1ff;
+ }
+ .name {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ font-size: 16px;
+ font-weight: 500;
+ color: #000;
+ text-align: left;
+ }
+ .address {
+ font-size: 12px;
+ font-weight: 400;
+ color: #494949;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .createLCMeetup {
+ .form {
+ .formGroup {
+ width: 90%;
+ .searchResults {
+ width: 90%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLCMeetup/CreateLCMeetup.tsx b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLCMeetup/CreateLCMeetup.tsx
new file mode 100644
index 000000000..068890ced
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/CreateLCMeetup/CreateLCMeetup.tsx
@@ -0,0 +1,260 @@
+import { Form, Formik } from "formik";
+import styles from "./CreateLCMeetup.module.css";
+import { date } from "yup";
+import { FormikTextInputWithoutLabel as SimpleInput } from "@/MuLearnComponents/FormikComponents/FormikComponents";
+import { Input, InputGroup, Switch, Tooltip } from "@chakra-ui/react";
+import {
+ BiInfoCircle,
+ BiLeftArrow,
+ BiRightArrow,
+ BiSearch
+} from "react-icons/bi";
+import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
+import { useEffect, useState } from "react";
+import {
+ scheduleMeetup,
+ searchCoordinates
+} from "../../services/LearningCircleAPIs";
+import toast from "react-hot-toast";
+import { useNavigate, useParams } from "react-router-dom";
+
+export default function CreateLCMeetup() {
+ const [isLoading, setIsLoading] = useState(false);
+ const [locationLoading, setLocationLoading] = useState(false);
+ const [locationSearchResults, setLocationSearchResults] = useState<
+ MapResult[]
+ >([]);
+ const [selectedLocation, setSelectedLocation] = useState(
+ null
+ );
+ const [minDateTime, setMinDateTime] = useState("");
+ const params = useParams();
+ const navigate = useNavigate();
+ useEffect(() => {
+ const today = new Date();
+ const yyyy = today.getFullYear();
+ const mm = String(today.getMonth() + 1).padStart(2, "0");
+ const dd = String(today.getDate()).padStart(2, "0");
+ const hours = String(today.getHours()).padStart(2, "0");
+ const minutes = String(today.getMinutes()).padStart(2, "0");
+ setMinDateTime(`${yyyy}-${mm}-${dd}T${hours}:${minutes}`);
+ }, []);
+
+ const initialValues = {
+ title: "",
+ is_proof_required: true,
+ proof_description: "",
+ location: "",
+ date: date(),
+ duration: 3
+ };
+ const onSubmit = (values: any) => {
+ if (!selectedLocation) {
+ toast.error("Please select a location for the meetup");
+ return;
+ }
+ setIsLoading(true);
+ const date = new Date(values.date);
+ const meetupData: LCMeetCreate = {
+ circle_id: params.circle_id ?? "",
+ title: values.title,
+ is_report_needed: values.is_proof_required,
+ report_description: values.proof_description,
+ meet_place: selectedLocation.name,
+ coord_x: selectedLocation.lat,
+ coord_y: selectedLocation.lon,
+ meet_time: date.toISOString(),
+ duration: values.duration
+ };
+
+ scheduleMeetup(meetupData).then(status => {
+ setIsLoading(false);
+ if (status) {
+ navigate(
+ `/dashboard/learningcircle/dashboard/${params.circle_id}`
+ );
+ }
+ });
+ };
+ const handleLocationSearch = (location: string) => {
+ setLocationLoading(true);
+ searchCoordinates(location).then(data => {
+ setLocationLoading(false);
+ setLocationSearchResults(data);
+ });
+ };
+
+ return (
+
+
Schedule your next meet
+
+ {formik => (
+
+ )}
+
+
+ );
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/YourLC/YourLC.module.css b/src/modules/Dashboard/modules/LearningCircleV2/pages/YourLC/YourLC.module.css
new file mode 100644
index 000000000..2a6c29be0
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/YourLC/YourLC.module.css
@@ -0,0 +1,115 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ .backLink {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ background-color: white;
+ padding: 0.5rem 1rem;
+ width: fit-content;
+ color: #5d5d5d;
+ text-decoration: none;
+ cursor: pointer;
+ border-radius: 10px;
+ }
+ .yourLC {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-content: center;
+ width: 100%;
+ padding: 20px;
+ background: #fff;
+ /* border-radius: 10px; */
+ h1 {
+ color: #000;
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 20px;
+ }
+ .learningCircles {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+
+ .learningCircle {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 20px;
+ background: #fff;
+ border-radius: 10px;
+ box-shadow: 1px 1px 5px #d3ddfb;
+ cursor: pointer;
+ .content {
+ display: flex;
+ gap: 20px;
+
+ .badge {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ background: #f5f5f5;
+ padding: 5px 10px;
+ border-radius: 5px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #000;
+ width: 100px;
+ }
+ .info {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-content: center;
+ gap: 5px;
+ h2 {
+ color: #000;
+ font-size: 16px;
+ font-weight: 500;
+ }
+ }
+ }
+ .rightIcon {
+ font-size: 35px;
+ color: #000;
+ }
+ }
+ }
+ }
+ .SwitchNav {
+ display: flex;
+ gap: 5px;
+ align-items: end;
+
+ .items {
+ padding: 8px 20px;
+ background-color: #f3f3f4;
+ color: black;
+ font-weight: 600;
+ border-radius: 15px;
+ cursor: pointer;
+ height: 60px;
+
+ &.active {
+ background-color: white;
+ border-radius: 15px 15px 0px 0px;
+ }
+ }
+ .plusItem {
+ border-left: 2px solid #8b8e92;
+ color: black;
+ font-size: 25px;
+ padding: 0px;
+ height: fit-content;
+ padding-left: 10px;
+ line-height: 1;
+ }
+ }
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/YourLC/YourLC.tsx b/src/modules/Dashboard/modules/LearningCircleV2/pages/YourLC/YourLC.tsx
new file mode 100644
index 000000000..7fa3e472a
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/YourLC/YourLC.tsx
@@ -0,0 +1,163 @@
+import { useEffect, useState } from "react";
+import styles from "./YourLC.module.css";
+import {
+ getCreatedLearningCircles,
+ getMeetups
+} from "../../services/LearningCircleAPIs";
+import { useNavigate } from "react-router-dom";
+import { BiChevronRight } from "react-icons/bi";
+import { convertDateToDayAndMonthAndYear } from "../../../../utils/common";
+import { FiChevronLeft } from "react-icons/fi";
+
+export default function YourLC() {
+ const [createdLearningCirlces, setCreatedLearningCirlces] = useState<
+ LearningCircleInfoBasic[]
+ >([]);
+ const [savedLearningCircles, setSavedLearningCircles] = useState<
+ CircleMeetupInfo[]
+ >([]);
+ const [participatedLearningCircles, setParticipatedLearningCircles] =
+ useState([]);
+
+ const [curpage, setCurPage] = useState(0);
+ const navigate = useNavigate();
+ useEffect(() => {
+ if (curpage == 0 && createdLearningCirlces.length == 0) {
+ getCreatedLearningCircles().then(res => {
+ setCreatedLearningCirlces(res);
+ });
+ } else if (curpage == 1 && savedLearningCircles.length == 0) {
+ getMeetups(null, true).then(res => {
+ setSavedLearningCircles(res);
+ });
+ } else if (curpage == 2 && participatedLearningCircles.length == 0) {
+ getMeetups(null, false, true).then(res => {
+ setParticipatedLearningCircles(res);
+ });
+ }
+ }, [curpage]);
+
+ return (
+
+
{
+ navigate(-1);
+ }}
+ >
+
+ Learning Circles
+
+
+
+
+
+
+ {curpage == 0 ? (
+
+
Learning Circles created by you
+
+ {createdLearningCirlces
+ .filter(lc => lc.is_recurring)
+ .map(lc => {
+ return (
+
{
+ navigate(
+ `/dashboard/learningcircle/dashboard/${lc.id}`
+ );
+ }}
+ >
+
+
+ {convertDateToDayAndMonthAndYear(
+ new Date(
+ lc.next_meetup.meet_time
+ )
+ .toISOString()
+ .split("T")[0]
+ )}
+
+
+
{lc.ig}
+ {lc.recurrence_type}
+
+
+
+
+ );
+ })}
+
+
+ ) : (
+
+
+ {curpage == 1
+ ? "Saved Learning Circles"
+ : "Participated Learning Circle"}
+
+
+ {(curpage == 1
+ ? savedLearningCircles
+ : participatedLearningCircles
+ ).map(meetup => {
+ return (
+
{
+ navigate(
+ `/dashboard/learningcircle/meetup/${meetup.id}`
+ );
+ }}
+ >
+
+
+ {convertDateToDayAndMonthAndYear(
+ new Date(meetup.meet_time)
+ .toISOString()
+ .split("T")[0]
+ )}
+
+
+
{meetup.title}
+ {meetup.meet_place}
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+ );
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/dashboard/DashboardLC.module.css b/src/modules/Dashboard/modules/LearningCircleV2/pages/dashboard/DashboardLC.module.css
new file mode 100644
index 000000000..03f30dded
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/dashboard/DashboardLC.module.css
@@ -0,0 +1,133 @@
+.dashboardLC {
+ width: 100%;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+
+ .backLink {
+ display: flex;
+ align-items: center;
+ background-color: white;
+ padding: 0.5rem 1rem;
+ margin-bottom: 10px;
+ width: fit-content;
+ color: #5d5d5d;
+ text-decoration: none;
+ cursor: pointer;
+ border-radius: 10px;
+ }
+ .nextMeet {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ width: 100%;
+ background: #fff;
+ border-radius: 10px;
+ padding: 20px;
+ &.nomeet {
+ .content {
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ .info {
+ display: block;
+ margin-bottom: 0;
+ }
+ }
+ }
+ .content {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ background: #eef2ff;
+ padding: 20px;
+ border-radius: 10px;
+ .info {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ h1 {
+ text-align: start;
+ }
+ span {
+ font-size: 14px;
+ font-weight: 500;
+ color: #000;
+ display: flex;
+ text-align: start;
+ }
+ .date {
+ font-size: 20px;
+ font-weight: 500;
+ display: flex;
+ gap: 10px;
+ }
+ .title {
+ font-size: 20px;
+ font-weight: 500;
+ color: #000;
+ display: flex;
+ gap: 10px;
+ margin-bottom: 20px;
+ }
+ }
+ .buttons {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: end;
+ height: 100%;
+ }
+ }
+ }
+ .pastMeets {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+ background: #fff;
+ border-radius: 10px;
+ padding: 20px;
+ align-items: start;
+ .meetups {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 100%;
+
+ .meetup {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 30px;
+ border-radius: 10px;
+ background: #fff;
+ border: 1px solid #000;
+ cursor: pointer;
+ .container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ .info {
+ display: flex;
+ flex-direction: column;
+ .title {
+ font-size: 16px;
+ font-weight: 500;
+ color: #000;
+ display: flex;
+ gap: 10px;
+ }
+ .date {
+ font-size: 14px;
+ font-weight: 500;
+ display: flex;
+ gap: 10px;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/dashboard/DashboardLC.tsx b/src/modules/Dashboard/modules/LearningCircleV2/pages/dashboard/DashboardLC.tsx
new file mode 100644
index 000000000..e4b6811b2
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/dashboard/DashboardLC.tsx
@@ -0,0 +1,162 @@
+import { useNavigate, useParams } from "react-router-dom";
+import styles from "./DashboardLC.module.css";
+import { useEffect, useState } from "react";
+import { getLearningCircleInfo } from "../../services/LearningCircleAPIs";
+import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader";
+import {
+ convertDateToDayAndMonthAndYear,
+ getLocalDateTimeFormatted,
+ getLocalDateTimeObject
+} from "../../../../utils/common";
+import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
+import { BiChevronRight, BiEdit } from "react-icons/bi";
+import { FiChevronLeft } from "react-icons/fi";
+
+export default function DashboardLC() {
+ const [circleInfo, setCircleInfo] = useState(
+ null
+ );
+ const params = useParams();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ getLearningCircleInfo(params.id ?? "").then(res => {
+ setCircleInfo(res);
+ });
+ }, [params.id]);
+ return (
+
+
{
+ navigate(-1);
+ }}
+ >
+
+ Learning Circles
+
+ {circleInfo ? (
+ <>
+ {circleInfo.next_meetup.is_scheduled ? (
+
+
+
+
+ {convertDateToDayAndMonthAndYear(
+ getLocalDateTimeFormatted(
+ circleInfo.next_meetup.meet_time
+ ).split("T")[0]
+ )}
+
+
+ {circleInfo.next_meetup.title}
+
+
+ Venue:{" "}
+ {circleInfo.next_meetup.meet_place}
+
+
+ Time:
+ {
+ getLocalDateTimeFormatted(
+ circleInfo.next_meetup.meet_time
+ ).split("T")[1]
+ }
+
+
+ Duration:{" "}
+ {circleInfo.next_meetup.duration} hours
+
+
+
+
{}}
+ >
+
+
+
{
+ navigate(
+ "/dashboard/learningcircle/attendee-report/" +
+ circleInfo.next_meetup.id
+ );
+ }}
+ >
+ Report
+
+
+
+
+ ) : (
+
+
+
+
+ No Meetup Scheduled
+
+
+
+
{
+ navigate(
+ `/dashboard/learningcircle/create-meetup/${params.id}`
+ );
+ }}
+ >
+ Schedule Your Next Meetup
+
+
+
+
+ )}
+
+
Your Past Meetups
+
+ {circleInfo.past_meetups.map((meetup, index) => (
+
{
+ navigate(
+ `/dashboard/learningcircle/meetup/${meetup.id}`
+ );
+ }}
+ >
+
+
{index + 1}.
+
+
+ {convertDateToDayAndMonthAndYear(
+ meetup.meet_time.split(
+ "T"
+ )[0]
+ )}
+
+
+ {meetup.title}
+
+
+
+
+
+
+
+ ))}
+
+
+ >
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.module.css b/src/modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.module.css
new file mode 100644
index 000000000..96eeb5235
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.module.css
@@ -0,0 +1,371 @@
+/*
+! Learning Circle common css
+*/
+.learningCircleLandingPage,
+.LearningCircleDetailsContent,
+.FindCircleContent,
+.LearningCircleCreateContent {
+ width: 100%;
+ padding: 1rem 3rem;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+/*
+* ******************************************************************************************
+
+! Learning Circle Landing Page
+*/
+
+.learningCircleLandingPage .headContent {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--White);
+ gap: 1rem;
+ border-radius: var(--borderRadius);
+ box-shadow: var(--boxShadow);
+}
+
+.learningCircleLandingPageMiddle {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.learningCircleLandingPageMiddle b {
+ font-size: 1.5rem;
+ color: #494752;
+ font-weight: 600;
+ width: fit-content !important;
+}
+
+.learningCircleLandingPageMiddle p {
+ font-size: 1rem;
+ color: #a0a0a0;
+ font-weight: 500;
+ width: fit-content !important;
+ margin-top: 0;
+}
+
+.learningCircleLandingPage img,
+.learningCircleLandingPageMiddle img {
+ width: 35%;
+}
+
+.desaturate {
+ filter: saturate(0);
+ opacity: 0.5;
+}
+
+.learningCircleLandingPageDesc {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 1rem 0;
+ color: #000;
+}
+
+.learningCircleLandingPageDesc h1 {
+ font-size: 2.5rem;
+ color: var(--blue);
+ font-weight: bold;
+}
+
+.learningCircleLandingPageDesc b {
+ font-weight: 600;
+ width: 80%;
+}
+
+.learningCircleLandingPage .learningCircleLandingPageButton {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
+}
+
+.learningCircleLandingPageAccordion {
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ list-style: none;
+ border-radius: 0.5rem;
+}
+
+.learningCircleLandingPageLevel {
+ background-color: var(--White);
+ padding: 1rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 10px;
+ box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
+}
+
+.learningCircleLandingPageLevel div {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ font-size: 1.2rem;
+ font-weight: 500;
+}
+
+.learningCircleLandingPagePara {
+ display: flex;
+ word-break: keep-all;
+ width: fit-content;
+}
+
+.learningCircleLandingPageExpandBtn {
+ display: none;
+}
+
+.learningCircleLandingPageExpandBtn:checked + .learningCircleLandingPageLevel,
+.learningCircleLandingPageExpandBtn:checked
+ + .learningCircleLandingPageLevel
+ div
+ p {
+ background: var(--blue);
+ color: white;
+}
+
+/* .learningCircleLandingPageExpandBtn:checked + .learningCircleLandingPageLevel{
+ border: 1px solid var(--blue);
+} */
+
+.learningCircleLandingPageExpandBtn:checked
+ + .learningCircleLandingPageLevel
+ .learningCircleLandingPageBtn {
+ background: var(--White);
+ color: var(--blue);
+}
+
+/* No learning circles case */
+.learningCircleLandingPageMiddle {
+ display: flex;
+ align-items: center;
+}
+.joinCodeInput {
+ width: 70%;
+ margin: 10px;
+ padding: 0.5rem;
+ border: 1px solid #d1d1d1;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ margin-right: 1rem;
+ color: #000;
+}
+.joinInfo {
+ color: #515151;
+ font-size: 1rem;
+ margin-top: 0.5rem;
+ display: block;
+ padding: 20px;
+}
+@media (width<1060px) {
+ .learningCircleLandingPageDesc h1 {
+ font-size: 1.65rem;
+ }
+
+ .learningCircleLandingPageDesc b {
+ font-size: 0.6rem;
+ }
+
+ .learningCircleLandingPageLevel div {
+ font-size: 0.8rem;
+ }
+ .learningCircleLandingPage .learningCircleLandingPageButton button {
+ font-size: 15px;
+ }
+}
+
+@media (width<=820px) {
+ .learningCircleLandingPage {
+ padding: 0.5rem;
+ }
+
+ .learningCircleLandingPage .headContent {
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem 0rem;
+ }
+
+ .learningCircleLandingPage img,
+ .learningCircleLandingPageMiddle img {
+ width: 100%;
+ }
+
+ .learningCircleLandingPageLevel {
+ padding: 1rem;
+ }
+
+ .learningCircleLandingPageBtn {
+ width: 2rem;
+ }
+}
+
+@media (width<620px) {
+ .learningCircleLandingPageMiddle p {
+ font-size: 0.65rem;
+ margin-right: 0.5rem;
+ }
+}
+
+@media (width<350px) {
+ .learningCircleLandingPageDesc h1 {
+ font-size: 1.2rem;
+ }
+
+ .learningCircleLandingPage .learningCircleLandingPageButton {
+ gap: 0.5rem;
+ margin-top: 0rem;
+ }
+
+ .learningCircleLandingPageMiddle p {
+ font-size: 0.5rem;
+ }
+}
+
+/* css for dropdown and your learning circle */
+
+.cardContainer {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2rem;
+ justify-content: center;
+}
+.card div:nth-child(1) {
+ display: flex;
+ width: 100%;
+ justify-content: end;
+}
+.card div:nth-child(1) span {
+ padding: 0rem 1rem;
+ border-radius: 01rem;
+ border: 2px dotted #2d5bf7;
+ font-size: small;
+}
+.card {
+ background-color: #f7f9fc;
+ border-radius: 1rem;
+ padding: 20px;
+
+ width: 480px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 20px;
+ align-items: start;
+}
+
+.title {
+ font-size: 28px;
+ text-align: left;
+ font-weight: bold;
+ color: #1a1a1a;
+ margin: 0;
+}
+
+.location {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ color: #6e6e6e;
+ gap: 6px;
+}
+
+.icon {
+ font-size: 12px;
+ color: #6e6e6e;
+}
+
+.details {
+ display: flex;
+ gap: 10px;
+ font-size: 12px;
+}
+
+.date,
+.duration {
+ padding: 4px 8px;
+ border: 3px dotted #a6c1ed;
+ border-radius: 0.8rem;
+ color: #2d5bf7;
+}
+
+.karmaPoints {
+ padding: 4px 8px;
+ border: 3px dotted #67b36d;
+ border-radius: 0.8rem;
+ color: #67b36d;
+}
+
+.footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ gap: 12px;
+}
+
+.bookmarkIcon {
+ font-size: 18px;
+ color: #2d5bf7;
+ cursor: pointer;
+}
+
+.joinButton {
+ background-color: rgba(69, 111, 246, 1);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ padding: 5px 10px;
+ font-size: 21px;
+ cursor: pointer;
+ width: 100%;
+ text-align: center;
+ transition: background-color 0.3s;
+ text-transform: capitalize;
+
+ &:disabled {
+ background-color: #d1d1d1;
+ cursor: not-allowed;
+
+ &:hover {
+ background-color: #d1d1d1;
+ }
+ }
+}
+
+.joinButton:hover {
+ background-color: #1f47b2;
+}
+
+@media screen and (max-width: 1920px) {
+ .cardContainer {
+ justify-content: space-between;
+ }
+ .card {
+ width: calc(33% - 20px);
+ }
+}
+
+@media screen and (max-width: 1440px) {
+ .card {
+ width: calc(50% - 20px);
+ }
+}
+
+@media screen and (max-width: 650px) {
+ .card {
+ width: 100%;
+ }
+}
diff --git a/src/modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.tsx b/src/modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.tsx
new file mode 100644
index 000000000..030f28152
--- /dev/null
+++ b/src/modules/Dashboard/modules/LearningCircleV2/pages/landing/LearningCircleLanding.tsx
@@ -0,0 +1,349 @@
+import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader";
+import styles from "./LearningCircleLanding.module.css";
+import imageTop from "../../assets/images/LC2.webp";
+import { useEffect, useState } from "react";
+import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton";
+import { customReactSelectStyles } from "../../utils/buttonConfiguration/common";
+import SelectTab from "react-select";
+import { FaBookmark, FaMapMarkerAlt } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+import {
+ getMeetups,
+ joinMeetup,
+ unsaveMeetup
+} from "../../services/LearningCircleAPIs";
+import { color } from "framer-motion";
+import MuModal from "@/MuLearnComponents/MuModal/MuModal";
+import { Input } from "@chakra-ui/react";
+
+interface Option {
+ value: string;
+ label: string;
+}
+
+const INITIAL_INTERESTS = [
+ { label: "All Categories", value: "all" },
+ { label: "Coder", value: "coder" },
+ { label: "Hardware", value: "hardware" },
+ { label: "Manager", value: "manager" },
+ { label: "Creative", value: "creative" }
+];
+
+const LearningCircleLanding = () => {
+ const [isLoading, setisLoading] = useState(false);
+ const [selectedCategory, setSelectedCategory] = useState