wip

Selleo · Nov 21, 2024 · 82e9521 · 82e9521
1 parent 7a5d926
commit 82e9521
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 145 deletions.
diff --git a/apps/api/src/statistics/schemas/userStats.schema.ts b/apps/api/src/statistics/schemas/userStats.schema.ts
@@ -37,6 +37,10 @@ export const StreakSchema = Type.Object({
 });
 
 export const UserStatsSchema = Type.Object({
+  averageStats: Type.Object({
+    lessonStats: MonthlyStatsSchema,
+    courseStats: MonthlyStatsSchema,
+  }),
   quizzes: QuizStatsSchema,
   courses: CourseStatsSchema,
   lessons: LessonsStatsSchema,

diff --git a/apps/api/src/swagger/api-schema.json b/apps/api/src/swagger/api-schema.json
@@ -6760,6 +6760,53 @@
           "data": {
             "type": "object",
             "properties": {
+              "averageStats": {
+                "type": "object",
+                "properties": {
+                  "lessonStats": {
+                    "type": "object",
+                    "properties": {
+                      "started": {
+                        "type": "number"
+                      },
+                      "completed": {
+                        "type": "number"
+                      },
+                      "completionRate": {
+                        "type": "number"
+                      }
+                    },
+                    "required": [
+                      "started",
+                      "completed",
+                      "completionRate"
+                    ]
+                  },
+                  "courseStats": {
+                    "type": "object",
+                    "properties": {
+                      "started": {
+                        "type": "number"
+                      },
+                      "completed": {
+                        "type": "number"
+                      },
+                      "completionRate": {
+                        "type": "number"
+                      }
+                    },
+                    "required": [
+                      "started",
+                      "completed",
+                      "completionRate"
+                    ]
+                  }
+                },
+                "required": [
+                  "lessonStats",
+                  "courseStats"
+                ]
+              },
               "quizzes": {
                 "type": "object",
                 "properties": {
@@ -6935,6 +6982,7 @@
               }
             },
             "required": [
+              "averageStats",
               "quizzes",
               "courses",
               "lessons",

diff --git a/apps/web/app/api/generated-api.ts b/apps/web/app/api/generated-api.ts
@@ -1144,6 +1144,18 @@ export interface CreatePaymentIntentResponse {
 
 export interface GetUserStatisticsResponse {
   data: {
+    averageStats: {
+      lessonStats: {
+        started: number;
+        completed: number;
+        completionRate: number;
+      };
+      courseStats: {
+        started: number;
+        completed: number;
+        completionRate: number;
+      };
+    };
     quizzes: {
       totalAttempts: number;
       totalCorrectAnswers: number;
@@ -1159,6 +1171,24 @@ export interface GetUserStatisticsResponse {
       longest: number;
       activityHistory: object;
     };
+    lastLesson: {
+      /** @format uuid */
+      id: string;
+      title: string;
+      imageUrl?: string;
+      description: string;
+      itemsCount: number;
+      itemsCompletedCount?: number;
+      lessonProgress?: "completed" | "in_progress" | "not_started";
+      isFree?: boolean;
+      enrolled?: boolean;
+      state?: string;
+      archived?: boolean;
+      isSubmitted?: boolean;
+      type?: string;
+      createdAt?: string;
+      quizScore?: number;
+    };
   };
 }
 

diff --git a/apps/web/app/components/ui/calendar.tsx b/apps/web/app/components/ui/calendar.tsx
@@ -4,23 +4,51 @@ import { buttonVariants } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
 
 import type { ComponentProps } from "react";
-import type { DayContentProps } from "react-day-picker";
+import type { DayProps } from "react-day-picker";
 
 export type CalendarProps = ComponentProps<typeof DayPicker> & {
-  dates: Date[] | undefined;
+  dates: string[] | undefined;
 };
 
-type CustomDayContentProps = DayContentProps & {
-  dates: Date[] | undefined;
+type CustomDayContentProps = DayProps & {
+  dates: string[] | undefined;
 };
 
 function CustomDayContent({ dates, ...props }: CustomDayContentProps) {
-  console.log(props.date);
-  if (dates?.includes(props.date)) {
-    return <span style={{ position: "relative", overflow: "visible" }}>🎉</span>;
+  if (dates?.includes(props?.["data-day"])) {
+    const classes = cn(
+      "text-primary-foreground hover:!bg-success-200 hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground p-0 border aspect-square size-8 text-sm flex items-center justify-center has-[button]:hover:!bg-success-200 rounded-full has-[button]:hover:aria-selected:!bg-success-500 has-[button]:hover:text-accent-foreground has-[button]:hover:aria-selected:text-primary-foreground",
+      { "bg-success-200 border-success-200": !!props.day.outside },
+      { "bg-success-500 border-success-500": !props.day.outside },
+    );
+
+    return (
+      <td className={classes}>
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 6L9 17L4 12"
+            stroke="#FCFCFC"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </td>
+    );
   }
 
-  return <div>{props.date.getDate()}</div>;
+  const classes2 = cn(
+    "p-0 border border-neutral-300 text-neutral-950 aspect-square size-8 text-sm flex items-center justify-center has-[button]:hover:!bg-success-200 rounded-full has-[button]:hover:aria-selected:!bg-success-500 has-[button]:hover:text-accent-foreground has-[button]:hover:aria-selected:text-primary-foreground",
+    { "bg-neutral-100": !!props.day.outside },
+  );
+
+  return <td className={classes2}>{props.children.props.children}</td>;
 }
 
 function Calendar({
@@ -78,7 +106,9 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        DayContent: ({ ...props }) => <CustomDayContent {...props} dates={dates} />,
+        Day: ({ ...props }) => {
+          return <CustomDayContent dates={dates} {...props} />;
+        },
         PreviousMonthButton: ({ ...props }) => <div className="sr-only" />,
         NextMonthButton: ({ ...props }) => <div className="sr-only" />,
       }}