Merge pull request #358 from DevLoversTeam/feat/dashboard-stats-achievements

(SP: 1) [Frontend] Fixes. Dashboard: Profile logic, Notifications

Author: ViktorSvertoka

frontend/actions/profile.ts

@@ -0,0 +1,96 @@
+'use server';
+
+import bcrypt from 'bcryptjs';
+import { getTranslations } from 'next-intl/server';
+import { revalidatePath } from 'next/cache';
+
+import { getUserProfile, updateUser } from '@/db/queries/users';
+import { getCurrentUser } from '@/lib/auth';
+
+import { createNotification } from './notifications';
+
+export async function updateName(formData: FormData) {
+  const session = await getCurrentUser();
+  if (!session) {
+    return { error: 'Unauthorized' };
+  }
+
+  const name = formData.get('name') as string;
+  if (!name || name.trim().length === 0) {
+    return { error: 'Name is required' };
+  }
+
+  try {
+    await updateUser(session.id, { name: name.trim() });
+    
+    // Create notification
+    const tNotify = await getTranslations('notifications.account');
+    await createNotification({
+      userId: session.id,
+      type: 'SYSTEM',
+      title: tNotify('nameChanged.title'),
+      message: tNotify('nameChanged.message', { name: name.trim() }),
+    });
+
+    revalidatePath('/[locale]/dashboard', 'page');
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to update name:', error);
+    return { error: 'Failed to update name' };
+  }
+}
+
+export async function updatePassword(formData: FormData) {
+  const session = await getCurrentUser();
+  if (!session) {
+    return { error: 'Unauthorized' };
+  }
+
+  const currentPassword = formData.get('currentPassword') as string;
+  const newPassword = formData.get('newPassword') as string;
+
+  if (!currentPassword || !newPassword) {
+    return { error: 'Both current and new passwords are required' };
+  }
+
+  if (newPassword.length < 8) {
+    return { error: 'New password must be at least 8 characters long' };
+  }
+
+  try {
+    // Better to fetch specifically for verification
+    const { db } = await import('@/db');
+    const { users } = await import('@/db/schema/users');
+    const { eq } = await import('drizzle-orm');
+    
+    const dbUser = await db.query.users.findFirst({
+      where: eq(users.id, session.id),
+    });
+
+    if (!dbUser || !dbUser.passwordHash) {
+      return { error: 'Password not set for this account (Social Login?)' };
+    }
+
+    const isValid = await bcrypt.compare(currentPassword, dbUser.passwordHash);
+    if (!isValid) {
+      return { error: 'Invalid current password' };
+    }
+
+    const newPasswordHash = await bcrypt.hash(newPassword, 10);
+    await updateUser(session.id, { passwordHash: newPasswordHash });
+
+    // Create notification
+    const tNotify = await getTranslations('notifications.account');
+    await createNotification({
+      userId: session.id,
+      type: 'SYSTEM',
+      title: tNotify('passwordChanged.title'),
+      message: tNotify('passwordChanged.message'),
+    });
+
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to update password:', error);
+    return { error: 'Failed to update password' };
+  }
+}

frontend/components/dashboard/AchievementsSection.tsx

@@ -20,7 +20,8 @@ export function AchievementsSection({
 
   const earnedCount = achievements.filter(a => a.earned).length;
 
-  const cardStyles = 'dashboard-card';
+  const cardStyles = 'dashboard-card hover:translate-y-0 hover:shadow-sm';
+  const iconBoxStyles = 'shrink-0 rounded-xl bg-white/40 border border-white/20 shadow-xs backdrop-blur-xs p-3 dark:bg-white/5 dark:border-white/10';
 
   const previewBadges = achievements.slice(0, 6);
   const remainingBadges = achievements.slice(6);
@@ -30,7 +31,7 @@ export function AchievementsSection({
       <div className="flex w-full flex-row items-center justify-between gap-3 p-4 sm:p-6 md:p-8">
         <div className="flex min-w-0 items-center gap-3">
           <div
-            className="shrink-0 rounded-xl bg-gray-100/50 p-3 ring-1 ring-black/5 dark:bg-neutral-800/50 dark:ring-white/10"
+            className={iconBoxStyles}
             aria-hidden="true"
           >
             <Trophy className="h-5 w-5 text-(--accent-primary) drop-shadow-[0_0_8px_rgba(var(--accent-primary-rgb),0.6)]" />

frontend/components/dashboard/ActivityHeatmapCard.tsx

@@ -56,10 +56,11 @@ export function ActivityHeatmapCard({ attempts, locale, currentStreak }: Activit
     relative z-10 flex flex-col justify-between overflow-hidden rounded-3xl
     border border-gray-200 bg-white/10 shadow-sm backdrop-blur-md
     dark:border-neutral-800 dark:bg-neutral-900/10
-    p-6 sm:p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-md
-    hover:border-(--accent-primary)/30 dark:hover:border-(--accent-primary)/30
+    p-6 sm:p-8
   `;
 
+  const iconBoxStyles = 'shrink-0 rounded-xl bg-white/40 border border-white/20 shadow-xs backdrop-blur-xs p-3 dark:bg-white/5 dark:border-white/10';
+
   const todayStart = useMemo(() => {
     const d = new Date();
     d.setHours(0, 0, 0, 0);
@@ -258,7 +259,7 @@ export function ActivityHeatmapCard({ attempts, locale, currentStreak }: Activit
         <div className="mb-4 sm:mb-6 flex flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 w-full min-w-0">
           <div className="flex items-center gap-3 min-w-0">
             <div
-              className="rounded-xl bg-gray-100/50 p-3 ring-1 ring-black/5 dark:bg-neutral-800/50 dark:ring-white/10 shrink-0"
+              className={iconBoxStyles}
               aria-hidden="true"
             >
               <Activity className="h-5 w-5 text-(--accent-primary) drop-shadow-[0_0_8px_rgba(var(--accent-primary-rgb),0.6)]" />

frontend/components/dashboard/ExplainedTermsCard.tsx

@@ -230,15 +230,16 @@ export function ExplainedTermsCard() {
   const hasTerms = terms.length > 0;
   const hasHiddenTerms = hiddenTerms.length > 0;
 
-  const cardStyles = 'dashboard-card flex flex-col p-6 sm:p-8 lg:p-10';
+  const cardStyles = 'dashboard-card flex flex-col p-6 sm:p-8 lg:p-10 hover:translate-y-0 hover:shadow-sm';
+  const iconBoxStyles = 'shrink-0 rounded-xl bg-white/40 border border-white/20 shadow-xs backdrop-blur-xs p-3 dark:bg-white/5 dark:border-white/10';
 
   return (
     <>
       <section className={cardStyles} aria-labelledby="explained-terms-heading">
         <div>
           <div className="mb-6 flex w-full items-center gap-3">
             <div
-              className="shrink-0 rounded-xl bg-gray-100/50 p-3 ring-1 ring-black/5 dark:bg-neutral-800/50 dark:ring-white/10"
+              className={iconBoxStyles}
               aria-hidden="true"
             >
               <BookOpen className="h-6 w-6 text-(--accent-primary) drop-shadow-[0_0_8px_rgba(var(--accent-primary-rgb),0.6)]" />

frontend/components/dashboard/ProfileCard.tsx

@@ -13,6 +13,9 @@ import {
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
+import { toast } from 'sonner';
+
+import { updateName, updatePassword } from '@/actions/profile';
 import { UserAvatar } from '@/components/leaderboard/UserAvatar';
 import { Link } from '@/i18n/routing';
 
@@ -57,8 +60,46 @@ export function ProfileCard({
     document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
   };
 
+  const handleUpdateName = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSaving(true);
+    const formData = new FormData(e.currentTarget);
+    
+    try {
+      const result = await updateName(formData);
+      if (!result.success) {
+        toast.error(result.error || 'Failed to update name');
+      }
+    } catch (error) {
+      toast.error('Something went wrong');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleUpdatePassword = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSaving(true);
+    const formData = new FormData(e.currentTarget);
+    
+    try {
+      const result = await updatePassword(formData);
+      if (result.success) {
+        (e.target as HTMLFormElement).reset();
+      } else {
+        toast.error(result.error || 'Failed to update password');
+      }
+    } catch (error) {
+      toast.error('Something went wrong');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
   const statItemBase =
-    'flex flex-row items-center gap-2 sm:gap-3 rounded-2xl border border-gray-100 bg-white/50 p-2 sm:p-3 text-left dark:border-white/5 dark:bg-black/20 xl:flex-row-reverse xl:items-center xl:text-right xl:p-3 xl:px-4 transition-all hover:border-(--accent-primary)/40 hover:bg-gray-50 dark:hover:bg-white/5 dark:hover:border-(--accent-primary)/20';
+    'flex flex-row items-center gap-2 sm:gap-3 rounded-2xl border border-gray-100 bg-white/50 p-2 sm:p-3 text-left dark:border-white/5 dark:bg-black/20 xl:flex-row-reverse xl:items-center xl:text-right xl:p-3 xl:px-4';
+
+  const iconBoxStyles = 'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/40 border border-white/20 shadow-xs backdrop-blur-xs xl:h-auto xl:w-auto xl:p-2.5 dark:bg-white/5 dark:border-white/10';
 
   return (
     <section className={cardStyles} aria-labelledby="profile-heading">
@@ -102,12 +143,8 @@ export function ProfileCard({
         </div>
         <dl className="grid w-full grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-3 xl:flex xl:w-auto xl:flex-nowrap xl:items-center xl:justify-end xl:gap-2 2xl:gap-3">
           {/* Attempts */}
-          <a
-            href="#quiz-results"
-            onClick={scrollTo('quiz-results')}
-            className={statItemBase}
-          >
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-purple-100/80 ring-1 ring-black/5 xl:h-auto xl:w-auto xl:p-2.5 dark:bg-purple-500/20 dark:ring-white/10">
+          <div className={statItemBase}>
+            <div className={iconBoxStyles}>
               <Target className="h-5 w-5 text-purple-600 dark:text-purple-400" />
             </div>
             <div className="flex w-full flex-col items-start overflow-hidden xl:items-end">
@@ -118,11 +155,11 @@ export function ProfileCard({
                 {totalAttempts}
               </dd>
             </div>
-          </a>
+          </div>
 
           {/* Points */}
-          <a href="#stats" onClick={scrollTo('stats')} className={statItemBase}>
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-100/80 ring-1 ring-black/5 xl:h-auto xl:w-auto xl:p-2.5 dark:bg-amber-500/20 dark:ring-white/10">
+          <div className={statItemBase}>
+            <div className={iconBoxStyles}>
               <Trophy className="h-5 w-5 text-amber-600 dark:text-amber-400" />
             </div>
             <div className="flex w-full flex-col items-start overflow-hidden xl:items-end">
@@ -133,11 +170,11 @@ export function ProfileCard({
                 {user.points}
               </dd>
             </div>
-          </a>
+          </div>
 
           {/* Global rank */}
-          <Link href="/leaderboard" className={statItemBase}>
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-teal-100/80 ring-1 ring-black/5 xl:h-auto xl:w-auto xl:p-2.5 dark:bg-teal-500/20 dark:ring-white/10">
+          <div className={statItemBase}>
+            <div className={iconBoxStyles}>
               <Globe className="h-5 w-5 text-teal-600 dark:text-teal-400" />
             </div>
             <div className="flex w-full flex-col items-start overflow-hidden xl:items-end">
@@ -148,11 +185,11 @@ export function ProfileCard({
                 {globalRank ? `#${globalRank}` : '—'}
               </dd>
             </div>
-          </Link>
+          </div>
 
           {/* Joined */}
           <div className="flex flex-row items-center gap-2 rounded-2xl border border-gray-100 bg-white/50 p-2 text-left sm:gap-3 sm:p-3 xl:flex-row-reverse xl:items-center xl:p-3 xl:px-4 xl:text-right dark:border-white/5 dark:bg-black/20">
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-100/80 ring-1 ring-black/5 xl:h-auto xl:w-auto xl:p-2.5 dark:bg-blue-500/20 dark:ring-white/10">
+            <div className={iconBoxStyles}>
               <Calendar className="h-5 w-5 text-blue-600 dark:text-blue-400" />
             </div>
             <div className="flex w-full flex-col items-start overflow-hidden xl:items-end">
@@ -204,20 +241,14 @@ export function ProfileCard({
                   <h3 className="mb-4 text-sm font-semibold tracking-wide text-gray-900 uppercase dark:text-white">
                     {t('changeName')}
                   </h3>
-                  <form
-                    onSubmit={e => {
-                      e.preventDefault();
-                      setIsSaving(true);
-                      setTimeout(() => setIsSaving(false), 1000);
-                    }}
-                    className="flex flex-col gap-4 sm:flex-row sm:items-end"
-                  >
+                  <form onSubmit={handleUpdateName} className="flex flex-col gap-4 sm:flex-row sm:items-end">
                     <div className="flex-1">
                       <label htmlFor="name-input" className="sr-only">
                         {t('changeName')}
                       </label>
                       <input
                         id="name-input"
+                        name="name"
                         type="text"
                         defaultValue={user.name || ''}
                         className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm transition-all outline-none placeholder:text-gray-400 focus:border-(--accent-primary) focus:ring-1 focus:ring-(--accent-primary) dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"
@@ -240,20 +271,11 @@ export function ProfileCard({
                   <h3 className="mb-4 text-sm font-semibold tracking-wide text-gray-900 uppercase dark:text-white">
                     {t('changePassword')}
                   </h3>
-                  <form
-                    onSubmit={e => {
-                      e.preventDefault();
-                      if (e.currentTarget.checkValidity()) {
-                        setIsSaving(true);
-                        setTimeout(() => setIsSaving(false), 1000);
-                        e.currentTarget.reset();
-                      }
-                    }}
-                    className="flex flex-col gap-4"
-                  >
+                  <form onSubmit={handleUpdatePassword} className="flex flex-col gap-4">
                     <div>
                       <input
                         type="password"
+                        name="currentPassword"
                         placeholder={t('currentPassword')}
                         className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm transition-all outline-none placeholder:text-gray-400 focus:border-(--accent-primary) focus:ring-1 focus:ring-(--accent-primary) dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"
                         required
@@ -262,6 +284,7 @@ export function ProfileCard({
                     <div>
                       <input
                         type="password"
+                        name="newPassword"
                         placeholder={t('newPassword')}
                         minLength={8}
                         className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm transition-all outline-none placeholder:text-gray-400 focus:border-(--accent-primary) focus:ring-1 focus:ring-(--accent-primary) dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"

frontend/components/dashboard/QuizResultsSection.tsx

@@ -16,7 +16,9 @@ export function QuizResultsSection({ attempts, locale }: QuizResultsSectionProps
   const t = useTranslations('dashboard.quizResults');
 
   const cardStyles =
-    'relative z-10 flex flex-col overflow-hidden rounded-3xl border border-gray-200 bg-white/10 p-6 sm:p-8 lg:p-10 shadow-sm backdrop-blur-md transition-all duration-300 hover:-translate-y-1 hover:shadow-md hover:border-(--accent-primary)/30 dark:border-neutral-800 dark:bg-neutral-900/10 dark:hover:border-(--accent-primary)/30';
+    'relative z-10 flex flex-col overflow-hidden rounded-3xl border border-gray-200 bg-white/10 p-6 sm:p-8 lg:p-10 shadow-sm backdrop-blur-md dark:border-neutral-800 dark:bg-neutral-900/10';
+
+  const iconBoxStyles = 'shrink-0 rounded-xl bg-white/40 border border-white/20 shadow-xs backdrop-blur-xs p-3 dark:bg-white/5 dark:border-white/10';
 
   const primaryBtnStyles =
     'group relative inline-flex items-center justify-center rounded-full px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white bg-(--accent-primary) hover:bg-(--accent-hover) transition-all hover:scale-105';
@@ -48,7 +50,7 @@ export function QuizResultsSection({ attempts, locale }: QuizResultsSectionProps
     <section className={cardStyles}>
       <div className="mb-6 flex items-center gap-3">
         <div
-          className="rounded-xl bg-gray-100/50 p-3 ring-1 ring-black/5 dark:bg-neutral-800/50 dark:ring-white/10"
+          className={iconBoxStyles}
           aria-hidden="true"
         >
           <ClipboardList className="h-5 w-5 text-(--accent-primary) drop-shadow-[0_0_8px_rgba(var(--accent-primary-rgb),0.6)]" />

frontend/components/dashboard/StatsCard.tsx

@@ -26,14 +26,12 @@ export function StatsCard({ stats, attempts = [] }: StatsCardProps) {
   const tProfile = useTranslations('dashboard.profile');
   const hasActivity = stats && stats.totalAttempts > 0;
 
-  const cardStyles = 'dashboard-card flex flex-col justify-between p-6 sm:p-8';
+  const cardStyles = 'dashboard-card flex flex-col justify-between p-6 sm:p-8 hover:translate-y-0 hover:shadow-sm';
 
-  const primaryBtnStyles = `
-    group relative inline-flex items-center justify-center rounded-full
-    px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white
-    bg-(--accent-primary) hover:bg-(--accent-hover)
-    transition-all hover:scale-105
-  `;
+  const iconBoxStyles = 'shrink-0 rounded-xl bg-white/40 border border-white/20 shadow-xs backdrop-blur-xs p-3 dark:bg-white/5 dark:border-white/10';
+
+  const primaryBtnStyles =
+    'group relative inline-flex items-center justify-center rounded-full px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white bg-(--accent-primary) hover:bg-(--accent-hover) transition-all hover:scale-105';
 
   // Calculate chart metrics
   const excellent = attempts.filter(a => Number(a.percentage) >= 100).length;
@@ -60,7 +58,7 @@ export function StatsCard({ stats, attempts = [] }: StatsCardProps) {
     <section className={cardStyles} aria-labelledby="stats-heading">
       <div className="mb-6 flex w-full items-center gap-3">
         <div
-          className="rounded-xl bg-gray-100/50 p-3 ring-1 ring-black/5 dark:bg-neutral-800/50 dark:ring-white/10"
+          className={iconBoxStyles}
           aria-hidden="true"
         >
           <Target className="h-5 w-5 text-(--accent-primary) drop-shadow-[0_0_8px_rgba(var(--accent-primary-rgb),0.6)]" />