feat: add streak stats

src/components/AccountStreak/AccountStreak.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../stores/page.ts';
 import { useStore } from '@nanostores/react';
 import { cn } from '../../lib/classname.ts';
+import { $accountStreak } from '../../stores/streak.ts';
 
 type StreakResponse = {
   count: number;
@@ -27,12 +28,7 @@ export function AccountStreak(props: AccountStreakProps) {
   const dropdownRef = useRef(null);
 
   const [isLoading, setIsLoading] = useState(true);
-  const [accountStreak, setAccountStreak] = useState<StreakResponse>({
+  const accountStreak = useStore($accountStreak);
-    count: 0,
-    longestCount: 0,
-    firstVisitAt: new Date(),
-    lastVisitAt: new Date(),
-  });
   const [showDropdown, setShowDropdown] = useState(false);
 
   const $roadmapsDropdownOpen = useStore(roadmapsDropdownOpen);
@@ -49,6 +45,11 @@ export function AccountStreak(props: AccountStreakProps) {
       return;
     }
 
+    if (accountStreak) {
+      setIsLoading(false);
+      return;
+    }
+
     setIsLoading(true);
     const { response, error } = await httpGet<StreakResponse>(
       `${import.meta.env.PUBLIC_API_URL}/v1-streak`,
@@ -60,7 +61,7 @@ export function AccountStreak(props: AccountStreakProps) {
       return;
     }
 
-    setAccountStreak(response);
+    $accountStreak.set(response);
     setIsLoading(false);
   };
 
@@ -76,7 +77,7 @@ export function AccountStreak(props: AccountStreakProps) {
     return null;
   }
 
-  let { count: currentCount } = accountStreak;
+  let { count: currentCount = 0 } = accountStreak || {};
   const previousCount =
     accountStreak?.previousCount || accountStreak?.count || 0;
 
@@ -110,7 +111,7 @@ export function AccountStreak(props: AccountStreakProps) {
           ref={dropdownRef}
           className="absolute right-0 top-full z-50 w-[335px] translate-y-1 rounded-lg bg-slate-800 shadow-xl"
         >
-          <div className="pl-4 pr-5 py-3">
+          <div className="py-3 pl-4 pr-5">
             <div className="flex items-center justify-between gap-2 text-sm text-slate-500">
               <p>
                 Current Streak
@@ -180,7 +181,7 @@ export function AccountStreak(props: AccountStreakProps) {
               </div>
             </div>
 
-            <p className="text-center text-xs text-slate-600 tracking-wide mb-[1.75px] -mt-[0px]">
+            <p className="-mt-[0px] mb-[1.75px] text-center text-xs tracking-wide text-slate-600">
               Visit every day to keep your streak alive!
             </p>
           </div>

src/components/Dashboard/PersonalDashboard.tsx

@@ -8,6 +8,8 @@ import { getCurrentPeriod } from '../../lib/date';
 import { ListDashboardCustomProgress } from './ListDashboardCustomProgress';
 import { RecommendedRoadmaps } from './RecommendedRoadmaps';
 import { ProgressStack } from './ProgressStack';
+import { useStore } from '@nanostores/react';
+import { $accountStreak, type StreakResponse } from '../../stores/streak';
 
 type UserDashboardResponse = {
   name: string;
@@ -46,6 +48,25 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
   const [personalDashboardDetails, setPersonalDashboardDetails] =
     useState<UserDashboardResponse>();
   const [projectDetails, setProjectDetails] = useState<PageType[]>([]);
+  const accountStreak = useStore($accountStreak);
+
+  const loadAccountStreak = async () => {
+    if (accountStreak) {
+      return;
+    }
+
+    setIsLoading(true);
+    const { response, error } = await httpGet<StreakResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-streak`,
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Failed to load account streak');
+      return;
+    }
+
+    $accountStreak.set(response);
+  };
 
   async function loadProgress() {
     const { response: progressList, error } =
@@ -88,9 +109,11 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
   }
 
   useEffect(() => {
-    Promise.allSettled([loadProgress(), loadAllProjectDetails()]).finally(() =>
+    Promise.allSettled([
-      setIsLoading(false),
+      loadProgress(),
-    );
+      loadAllProjectDetails(),
+      loadAccountStreak(),
+    ]).finally(() => setIsLoading(false));
   }, []);
 
   useEffect(() => {
@@ -252,6 +275,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
         progresses={learningRoadmapsToShow}
         projects={enrichedProjects || []}
         isLoading={isLoading}
+        accountStreak={accountStreak}
       />
 
       <ListDashboardCustomProgress

src/components/Dashboard/ProgressStack.tsx

@@ -1,27 +1,20 @@
-import {
+import { ArrowUpRight } from 'lucide-react';
-  ArrowUpRight,
-  Bookmark,
-  Check,
-  CheckCircle,
-  CheckIcon,
-  CircleCheck,
-  CircleDashed,
-} from 'lucide-react';
-import { ResourceProgress } from '../Activity/ResourceProgress';
 import type { UserProgress } from '../TeamProgress/TeamProgressPage';
-import { getPercentage } from '../../helper/number';
 import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
 import { DashboardBookmarkCard } from './DashboardBookmarkCard';
 import { DashboardProjectCard } from './DashboardProjectCard';
 import { useState } from 'react';
 import { cn } from '../../lib/classname';
 import { DashboardProgressCard } from './DashboardProgressCard';
+import { useStore } from '@nanostores/react';
+import { $accountStreak, type StreakResponse } from '../../stores/streak';
 
 type ProgressStackProps = {
   progresses: UserProgress[];
   projects: (ProjectStatusDocument & {
     title: string;
   })[];
+  accountStreak?: StreakResponse;
   isLoading: boolean;
 };
 
@@ -30,7 +23,7 @@ const MAX_PROJECTS_TO_SHOW = 8;
 const MAX_BOOKMARKS_TO_SHOW = 8;
 
 export function ProgressStack(props: ProgressStackProps) {
-  const { progresses, projects, isLoading } = props;
+  const { progresses, projects, isLoading, accountStreak } = props;
 
   const bookmarkedProgresses = progresses.filter(
     (progress) =>
@@ -57,7 +50,25 @@ export function ProgressStack(props: ProgressStackProps) {
     ? bookmarkedProgresses
     : bookmarkedProgresses.slice(0, MAX_BOOKMARKS_TO_SHOW);
 
+  const totalProjectFinished = projects.filter(
+    (project) => project.repositoryUrl,
+  ).length;
+
   return (
+    <>
+      <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
+        <StatsCard
+          title="Current Streak"
+          value={accountStreak?.count || 0}
+          isLoading={isLoading}
+        />
+        <StatsCard
+          title="Projects Finished"
+          value={totalProjectFinished}
+          isLoading={isLoading}
+        />
+      </div>
+
       <div className="mt-2 grid min-h-[330px] grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
         <div className="h-full rounded-md border bg-white p-4 shadow-sm">
           <h3 className="text-xs uppercase text-gray-500">Your Progress</h3>
@@ -186,6 +197,7 @@ export function ProgressStack(props: ProgressStackProps) {
           )}
         </div>
       </div>
+    </>
   );
 }
 
@@ -229,3 +241,24 @@ function CardSkeleton(props: CardSkeletonProps) {
     />
   );
 }
+
+type StatsCardProps = {
+  title: string;
+  value: number;
+  isLoading?: boolean;
+};
+
+function StatsCard(props: StatsCardProps) {
+  const { title, value, isLoading = false } = props;
+
+  return (
+    <div className="flex flex-col gap-1 rounded-md border bg-white p-4 shadow-sm">
+      <h3 className="text-xs uppercase text-gray-500">{title}</h3>
+      {isLoading ? (
+        <CardSkeleton className="h-8" />
+      ) : (
+        <span className="text-2xl font-medium text-black">{value}</span>
+      )}
+    </div>
+  );
+}

src/stores/streak.ts

@@ -0,0 +1,11 @@
+import { atom } from 'nanostores';
+
+export type StreakResponse = {
+  count: number;
+  longestCount: number;
+  previousCount?: number | null;
+  firstVisitAt: Date;
+  lastVisitAt: Date;
+};
+
+export const $accountStreak = atom<StreakResponse | undefined>();