feat: init stats page refresh (WIP/ON HOLD)

.storybook/README.md

@@ -0,0 +1,19 @@
+# Server Components with Storybook
+
+This document provides guidance on how to use server components with Storybook in our Next.js App Router application.
+
+## The Challenge
+
+Storybook does not natively support React Server Components (RSC). When trying to use server components directly in Storybook, you'll encounter errors because:
+
+1. Server components cannot be imported directly into client components
+2. Server-side data fetching methods don't work in the Storybook environment
+3. Async components are not supported in the current Storybook setup
+
+## Our Solution
+
+We use a simple pattern to render server components in Storybook:
+
+1. Wrap the server component in a Suspense boundary
+2. Import the server component directly in the story file
+3. Let the experimental RSC support in Storybook handle the rendering

.storybook/main.ts

@@ -12,5 +12,8 @@ const config: StorybookConfig = {
     name: '@storybook/experimental-nextjs-vite',
     options: {},
   },
+  features: {
+    experimentalRSC: true,
+  },
 };
 export default config;

package.json

@@ -53,6 +53,7 @@
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@react-email/components": "0.0.31",
+    "@remixicon/react": "4.6.0",
     "@stripe/react-stripe-js": "^2.8.1",
     "@stripe/stripe-js": "^4.8.0",
     "@supabase/ssr": "^0.5.1",

src/app/(app)/(default_layout)/layout.tsx

@@ -5,20 +5,18 @@ import UserXp from '@/components/ui/user-xp';
 
 export default function StatisticsLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <div className="text-white flex flex-col gap-y-4 relative h-full">
-      <div className="container">
-        <div className="flex w-full items-center container">
-          <div className="flex-1">
-            <SidebarLayoutTrigger />
-          </div>
-          <div className="flex items-center gap-x-3">
-            <CurrentStreak />
-            <UserXp />
-            <UpgradeModal />
-          </div>
+    <div className="text-white flex flex-col gap-y-4 relative h-full container">
+      <div className="flex w-full items-center">
+        <div className="flex-1">
+          <SidebarLayoutTrigger />
+        </div>
+        <div className="flex items-center gap-x-3">
+          <CurrentStreak />
+          <UserXp />
+          <UpgradeModal />
         </div>
       </div>
-      <div className="container">{children}</div>
+      {children}
     </div>
   );
 }

src/app/(app)/(default_layout)/statistics/page.tsx

@@ -1,22 +1,42 @@
-import StatsRangePicker from '@/components/app/statistics/range-picker';
-import QuestionChart from '@/components/app/statistics/total-question-chart';
+import dynamic from 'next/dynamic';
 
-import { useUserServer } from '@/hooks/use-user-server';
-import { StatsSteps } from '@/types/Stats';
+import StatsRangePicker from '@/components/app/statistics/range-picker';
+import QuestionChart from '@/components/charts/total-question-chart';
+import QuestionHistory from '@/components/app/statistics/question-history';
 
-import { STATISTICS } from '@/utils/constants';
+const DifficultyRadialChart = dynamic(
+  () => import('@/components/app/statistics/difficulty-radial-chart'),
+  { ssr: false }
+);
 
-import { getData } from '@/utils/data/statistics/get-stats-chart-data';
 import Hero from '@/components/shared/hero';
 import SuggestedQuestions from '@/components/app/statistics/suggested-questions';
-import StatisticsReport from '@/components/app/statistics/statistics-report';
 import StatisticsOverviewMenu from '@/components/app/statistics/statistics-overview-menu';
+import StatisticsReport from '@/components/app/statistics/statistics-report';
 import QuestionTracker from '@/components/app/statistics/question-tracker';
 
-export const metadata = {
-  title: 'Statistics | techblitz',
-  description: 'View your coding statistics and progress',
-};
+import { useUserServer } from '@/hooks/use-user-server';
+import { StatsSteps } from '@/types/Stats';
+
+import { STATISTICS } from '@/utils/constants';
+import { getData } from '@/utils/data/statistics/get-stats-chart-data';
+import { createMetadata } from '@/utils/seo';
+import { getUserDisplayName } from '@/utils/user';
+import { getRecentUserAnswers } from '@/utils/data/answers/get-user-answer';
+
+export async function generateMetadata() {
+  return createMetadata({
+    title: 'Statistics | TechBlitz',
+    description:
+      'Dive into your current coding journey, track your progress, and gain insight on how to improve your skills.',
+    image: {
+      text: 'Statistics | TechBlitz',
+      bgColor: '#000',
+      textColor: '#fff',
+    },
+    canonicalUrl: '/statistics',
+  });
+}
 
 export default async function StatisticsPage({
   searchParams,
@@ -33,36 +53,45 @@ export default async function StatisticsPage({
   const range = (searchParams.range as StatsSteps) || '7d';
   const { step } = STATISTICS[range];
 
-  // Prefetch data
-  const { stats } = await getData({
-    userUid: user.uid,
-    from: range,
-    to: new Date().toISOString(),
-    step,
-  });
+  // Prefetch data - get both time-grouped and overall stats
+  const [timeGroupedStats, overallStats, recentAnswers] = await Promise.all([
+    getData({
+      userUid: user.uid,
+      from: range,
+      to: new Date().toISOString(),
+      step,
+      includeDifficultyData: true,
+    }),
+    getData({
+      userUid: user.uid,
+      from: 'all',
+      to: new Date().toISOString(),
+      includeDifficultyData: true,
+    }),
+    getRecentUserAnswers({ take: 10 }),
+  ]);
 
   return (
-    <div>
-      <div className="flex flex-col gap-3 md:flex-row w-full justify-between md:items-center">
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 md:flex-row w-full justify-between">
         <Hero
-          heading="Coding Journey"
+          heading={`${getUserDisplayName(user)}'s Statistics`}
           container={false}
-          subheading="An overview of your coding journey on TechBlitz."
+          subheading="Dive into your coding journey, track your progress, and gain insight on how to improve your skills."
+          gridPosition="top-right"
         />
-        <div className="flex gap-3">
-          <StatsRangePicker selectedRange={STATISTICS[range].label} />
-          <StatisticsOverviewMenu user={user} />
-        </div>
+        {overallStats.stats && (
+          <DifficultyRadialChart questionData={overallStats.stats} legend={false} />
+        )}
       </div>
-
-      <div className="grid grid-cols-12 gap-y-4 gap-x-8 mt-8 md:mt-0">
-        <div className="max-h-[28rem] col-span-12 mb-4">
-          {stats && <QuestionChart questionData={stats} step={step} />}
+      <div className="grid grid-cols-12 gap-4">
+        {/* Question History - Recent answers */}
+        <div className="col-span-12 md:col-span-6 lg:col-span-4">
+          <QuestionHistory recentAnswers={recentAnswers} />
+        </div>
+        <div className="col-span-12 md:col-span-6 lg:col-span-8">
+          <QuestionChart questionData={timeGroupedStats.stats} step={step} />
         </div>
-        {stats && <QuestionTracker className="mb-4" stats={stats} step={step} range={range} />}
-        {/** suggested q's and analysis blocks TODO: CHANGE SUGGESTED QUESTIONS TO STREAK DATA (I THINK) */}
-        <SuggestedQuestions />
-        <StatisticsReport />
       </div>
     </div>
   );

src/app/globals.css

@@ -8,6 +8,16 @@
 
   --color-secondary: #ffffff;
   --color-accent: #5b61d6;
+
+  /* Add HSL format for accent color that Tailwind expects */
+  --accent: 237 65% 64%; /* HSL values for #5b61d6 */
+  --accent-foreground: 0 0% 100%; /* White text on accent */
+}
+
+/* Define explicitly for dark mode as well */
+.dark {
+  --accent: 237 65% 64%; /* Same accent color in dark mode */
+  --accent-foreground: 0 0% 100%;
 }
 
 body {
@@ -265,8 +275,6 @@ html {
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
-    --accent: 237 59.3% 60%;
-    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;

src/components/app/navigation/sidebar.tsx

@@ -158,7 +158,7 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
       url: '/statistics',
       icon: BChart3,
       tooltip: 'Statistics',
-      defaultOpen: false,
+      defaultOpen: true,
       subItems: [
         {
           title: 'Overview',

src/components/app/roadmaps/[uid]/roadmap-stats-chart.tsx

@@ -8,7 +8,7 @@ import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-} from '@/components/ui/chart';
+} from '@/components/charts/chart';
 import { UserRoadmapsWithAnswers } from '@/types/Roadmap';
 
 const chartConfig = {