style: style progress components

Author: AlexVOiceover

src/components/Header.tsx

@@ -13,7 +13,9 @@ import { Input } from './ui/input';
 import { User, Edit2, Save, X } from 'lucide-react';
 import { Tooltip, TooltipTrigger, TooltipContent } from './ui/tooltip';
 import { validateEmail } from '../../utils/validateEmail';
-import QuestionCounter from './ui/QuestionCounter';
+import QuestionCounter from './ui/questionCounter/QuestionCounter';
+import SmallCircularQuestionCounter from './ui/questionCounter/smallCircularQuestionCounter';
+import LargeCircularQuestionCounter from './ui/questionCounter/LargeCircularQuestionCounter';
 
 const Header: React.FC = () => {
   // const { questions, setQuestions } = useQuestions();
@@ -50,9 +52,9 @@ const Header: React.FC = () => {
               {data.username ? (
                 <span className='mr-2'>Logged as: {data.username}</span>
               ) : (
-                <span>Not logged</span>
+                <span className='mr-2'>Not logged</span>
               )}
-              <User size={24} />
+              <SmallCircularQuestionCounter />
             </div>
           </DialogTrigger>
           <DialogContent headerTitle="User's Data" className='sm:max-w-md p-0'>
@@ -142,6 +144,7 @@ const Header: React.FC = () => {
                 </div>
                 <div className='text-sm text-gray-800'>
                   <QuestionCounter />
+                  <LargeCircularQuestionCounter />
                 </div>
               </div>
             </div>

src/components/ui/QuestionCounter.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useAnsweredCount } from '../../../hooks/useAnsweredCount';
+
+interface LargeCircularQuestionCounterProps {
+  size?: number; // default 100px
+  strokeWidth?: number; // default 6px
+}
+
+const LargeCircularQuestionCounter: React.FC<
+  LargeCircularQuestionCounterProps
+> = ({ size = 100, strokeWidth = 6 }) => {
+  const { answered, total } = useAnsweredCount();
+  const progress = total > 0 ? Math.round((answered / total) * 100) : 0;
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - progress / 100);
+
+  return (
+    <div className='relative w-fit'>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        {/* Background circle */}
+        <circle
+          className='text-gray-200'
+          stroke='currentColor'
+          strokeWidth={strokeWidth}
+          fill='transparent'
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+        />
+        {/* Progress circle */}
+        <circle
+          className='text-brand-pink'
+          stroke='currentColor'
+          strokeWidth={strokeWidth}
+          fill='transparent'
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`} // ✅ Start from the top
+          style={{ transition: 'stroke-dashoffset 0.35s ease-out' }}
+        />
+      </svg>
+      {/* Percentage Text in Center */}
+      <span className='absolute inset-0 flex items-center justify-center text-lg font-semibold'>
+        {progress}%
+      </span>
+    </div>
+  );
+};
+
+export default LargeCircularQuestionCounter;

src/components/ui/questionCounter/LargeCircularQuestionCounter.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useAnsweredCount } from '../../../hooks/useAnsweredCount';
+
+const QuestionCounter: React.FC = () => {
+  const { answered, total } = useAnsweredCount(); // Extract values
+
+  return (
+    <div className='text-sm text-gray-700'>
+      {answered} / {total} questions answered
+    </div>
+  );
+};
+
+export default QuestionCounter;

src/components/ui/questionCounter/QuestionCounter.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useAnsweredCount } from '../../../hooks/useAnsweredCount';
+
+interface SmallCircularQuestionCounterProps {
+  size?: number; // default 24px
+  strokeWidth?: number; // default 2px
+}
+
+const SmallCircularQuestionCounter: React.FC<
+  SmallCircularQuestionCounterProps
+> = ({ size = 24, strokeWidth = 4 }) => {
+  const { answered, total } = useAnsweredCount();
+  const progress = total > 0 ? Math.round((answered / total) * 100) : 0;
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - progress / 100);
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      {/* Background circle */}
+      <circle
+        className='text-gray-200'
+        stroke='currentColor'
+        strokeWidth={strokeWidth}
+        fill='transparent'
+        r={radius}
+        cx={size / 2}
+        cy={size / 2}
+      />
+      {/* Progress circle */}
+      <circle
+        className='text-green-500'
+        stroke='currentColor'
+        strokeWidth={strokeWidth}
+        fill='transparent'
+        r={radius}
+        cx={size / 2}
+        cy={size / 2}
+        strokeDasharray={circumference}
+        strokeDashoffset={dashOffset}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`} // ✅ Start from the top
+        style={{ transition: 'stroke-dashoffset 0.35s ease-out' }}
+      />
+    </svg>
+  );
+};
+
+export default SmallCircularQuestionCounter;

src/components/ui/questionCounter/smallCircularQuestionCounter.tsx

@@ -1,6 +1,14 @@
+import { useQuestions } from './useQuestions';
 import { useStatements } from './useStatements';
 
-export function useAnsweredCount(): number {
+export function useAnsweredCount(): { answered: number; total: number } {
+  const { questions } = useQuestions();
   const { data } = useStatements();
-  return data.statements.filter((s) => s.presetId).length;
+
+  // Count how many preset questions have been answered (i.e., they have a matching statement)
+  const answeredCount = questions.filter((q) =>
+    data.statements.some((s) => s.presetId === q.id)
+  ).length;
+
+  return { answered: answeredCount, total: questions.length };
 }