feat: added incentive credits system

surfsense_web/app/(home)/login/LocalLoginForm.tsx

@@ -8,11 +8,11 @@ import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { loginMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
+import { Spinner } from "@/components/ui/spinner";
 import { getAuthErrorDetails, isNetworkError, shouldRetry } from "@/lib/auth-errors";
 import { AUTH_TYPE } from "@/lib/env-config";
 import { ValidationError } from "@/lib/error";
 import { trackLoginAttempt, trackLoginFailure, trackLoginSuccess } from "@/lib/posthog/events";
-import { Spinner } from "@/components/ui/spinner";
 
 export function LocalLoginForm() {
 	const t = useTranslations("auth");

surfsense_web/app/(home)/register/page.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { registerMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
 import { Logo } from "@/components/Logo";
+import { Spinner } from "@/components/ui/spinner";
 import { getAuthErrorDetails, isNetworkError, shouldRetry } from "@/lib/auth-errors";
 import { AUTH_TYPE } from "@/lib/env-config";
 import { AppError, ValidationError } from "@/lib/error";
@@ -18,7 +19,6 @@ import {
 	trackRegistrationSuccess,
 } from "@/lib/posthog/events";
 import { AmbientBackground } from "../login/AmbientBackground";
-import { Spinner } from "@/components/ui/spinner";
 
 export default function RegisterPage() {
 	const t = useTranslations("auth");

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -8,8 +8,8 @@ import React from "react";
 import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import { DocumentViewer } from "@/components/document-viewer";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
 import {
 	Table,
 	TableBody,

surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx

@@ -1,48 +1,50 @@
 "use client";
 
-import { ExternalLink, Gift, Mail, Star, MessageSquarePlus, Share2, Check } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, ExternalLink, Gift, Loader2, Mail, Star } from "lucide-react";
 import { motion } from "motion/react";
 import Link from "next/link";
-import { useState, useCallback } from "react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { IncentiveTaskInfo } from "@/contracts/types/incentive-tasks.types";
+import { incentiveTasksApiService } from "@/lib/apis/incentive-tasks-api.service";
 import { cn } from "@/lib/utils";
 
-const GITHUB_REPO_URL = "https://github.com/MODSetter/SurfSense";
+export default function MorePagesPage() {
+	const queryClient = useQueryClient();
 
-const INITIAL_TASKS = [
-	{
-		id: "star",
-		title: "Star the repository",
-		reward: 100,
-		href: GITHUB_REPO_URL,
-		icon: Star,
-	},
-	{
-		id: "issue",
-		title: "Create an issue",
-		reward: 50,
-		href: `${GITHUB_REPO_URL}/issues/new/choose`,
-		icon: MessageSquarePlus,
-	},
-	{
-		id: "share",
-		title: "Share on social media",
-		reward: 50,
-		href: `https://twitter.com/intent/tweet?text=Check out SurfSense - an AI-powered personal knowledge base!&url=${encodeURIComponent(GITHUB_REPO_URL)}`,
-		icon: Share2,
-	},
-] as const;
+	// Fetch tasks from API
+	const { data, isLoading } = useQuery({
+		queryKey: ["incentive-tasks"],
+		queryFn: () => incentiveTasksApiService.getTasks(),
+	});
 
-export default function FreePagesPage() {
-	const [completedIds, setCompletedIds] = useState<Set<string>>(new Set());
+	// Mutation to complete a task
+	const completeMutation = useMutation({
+		mutationFn: incentiveTasksApiService.completeTask,
+		onSuccess: (response) => {
+			if (response.success) {
+				toast.success(response.message);
+				// Invalidate queries to refresh data
+				queryClient.invalidateQueries({ queryKey: ["incentive-tasks"] });
+				queryClient.invalidateQueries({ queryKey: ["user"] });
+			}
+		},
+		onError: () => {
+			toast.error("Failed to complete task. Please try again.");
+		},
+	});
 
-	const handleTaskClick = useCallback((taskId: string) => {
-		setCompletedIds((prev) => new Set(prev).add(taskId));
-	}, []);
+	const handleTaskClick = (task: IncentiveTaskInfo) => {
+		if (!task.completed) {
+			completeMutation.mutate(task.task_type);
+		}
+	};
 
-	const allCompleted = completedIds.size === INITIAL_TASKS.length;
+	const allCompleted = data?.tasks.every((t) => t.completed) ?? false;
 
 	return (
 		<div className="flex min-h-[calc(100vh-64px)] items-center justify-center px-4 py-8">
@@ -55,67 +57,93 @@ export default function FreePagesPage() {
 				{/* Header */}
 				<div className="mb-6 text-center">
 					<Gift className="mx-auto mb-3 h-8 w-8 text-primary" />
-					<h2 className="text-xl font-bold tracking-tight">Get Pages</h2>
-					<p className="text-sm text-muted-foreground">
-						Complete tasks to get free additional pages
-					</p>
+					<h2 className="text-xl font-bold tracking-tight">Get More Pages</h2>
+					<p className="text-sm text-muted-foreground">Complete tasks to earn additional pages</p>
 				</div>
 
 				{/* Tasks */}
-				<div className="space-y-2">
-					{INITIAL_TASKS.map((task) => {
-						const isCompleted = completedIds.has(task.id);
-						const Icon = task.icon;
-						return (
+				{isLoading ? (
+					<Card>
+						<CardContent className="flex items-center gap-3 p-3">
+							<Skeleton className="h-9 w-9 rounded-full" />
+							<div className="flex-1 space-y-2">
+								<Skeleton className="h-4 w-3/4" />
+								<Skeleton className="h-3 w-1/4" />
+							</div>
+							<Skeleton className="h-8 w-16" />
+						</CardContent>
+					</Card>
+				) : (
+					<div className="space-y-2">
+						{data?.tasks.map((task) => (
 							<Card
-								key={task.id}
-								className={cn("transition-colors", isCompleted && "bg-muted/50")}
+								key={task.task_type}
+								className={cn("transition-colors", task.completed && "bg-muted/50")}
 							>
 								<CardContent className="flex items-center gap-3 p-3">
 									<div
 										className={cn(
 											"flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
-											isCompleted ? "bg-primary text-primary-foreground" : "bg-muted"
+											task.completed ? "bg-primary text-primary-foreground" : "bg-muted"
 										)}
 									>
-										{isCompleted ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+										{task.completed ? <Check className="h-4 w-4" /> : <Star className="h-4 w-4" />}
 									</div>
 									<div className="flex-1 min-w-0">
-										<p className={cn("text-sm font-medium", isCompleted && "text-muted-foreground line-through")}>
+										<p
+											className={cn(
+												"text-sm font-medium",
+												task.completed && "text-muted-foreground line-through"
+											)}
+										>
 											{task.title}
 										</p>
-										<p className="text-xs text-muted-foreground">+{task.reward} pages</p>
+										<p className="text-xs text-muted-foreground">+{task.pages_reward} pages</p>
 									</div>
 									<Button
-										variant={isCompleted ? "ghost" : "outline"}
+										variant={task.completed ? "ghost" : "outline"}
 										size="sm"
-										asChild
-										onClick={() => handleTaskClick(task.id)}
+										disabled={task.completed || completeMutation.isPending}
+										onClick={() => handleTaskClick(task)}
+										asChild={!task.completed}
 									>
-										<a
-											href={task.href}
-											target="_blank"
-											rel="noopener noreferrer"
-											className={cn("gap-1", isCompleted && "pointer-events-none opacity-50")}
-										>
-											{isCompleted ? "Done" : "Go"}
-											{!isCompleted && <ExternalLink className="h-3 w-3" />}
-										</a>
+										{task.completed ? (
+											<span>Done</span>
+										) : (
+											<a
+												href={task.action_url}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="gap-1"
+											>
+												{completeMutation.isPending ? (
+													<Loader2 className="h-3 w-3 animate-spin" />
+												) : (
+													<>
+														Go
+														<ExternalLink className="h-3 w-3" />
+													</>
+												)}
+											</a>
+										)}
 									</Button>
 								</CardContent>
 							</Card>
-						);
-					})}
-				</div>
+						))}
+					</div>
+				)}
 
 				{/* Contact */}
 				<Separator className="my-6" />
 				<div className="text-center">
 					<p className="mb-3 text-sm text-muted-foreground">
-						{allCompleted ? "All done! Need more?" : "Need more pages?"}
+						{allCompleted ? "Thanks! Need even more pages?" : "Need more pages?"}
 					</p>
 					<Button variant="outline" size="sm" asChild>
-						<Link href="mailto:rohan@surfsense.com?subject=Request%20to%20Increase%20Page%20Limits" className="gap-2">
+						<Link
+							href="mailto:rohan@surfsense.com?subject=Request%20to%20Increase%20Page%20Limits"
+							className="gap-2"
+						>
 							<Mail className="h-4 w-4" />
 							Contact Us
 						</Link>

surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx

@@ -5,12 +5,12 @@ import {
 	Bot,
 	Brain,
 	ChevronRight,
+	FileText,
 	type LucideIcon,
 	Menu,
 	MessageSquare,
 	Settings,
 	X,
-	FileText,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";

surfsense_web/app/dashboard/[search_space_id]/team/page.tsx

@@ -95,6 +95,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
 import {
 	Table,
 	TableBody,
@@ -105,7 +106,6 @@ import {
 } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import { Spinner } from "@/components/ui/spinner";
 import type {
 	CreateInviteRequest,
 	DeleteInviteRequest,

surfsense_web/app/dashboard/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
 import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 import { getBearerToken, redirectToLogin } from "@/lib/auth-utils";