feat: add dashboard, projects, and persons pages with reusable components

Implemented the following: - `DashboardPage`: displays an overview of stats, recent projects, and tabs for future analytics/reports. - `ProjectsPage` and `PersonsPage`: include searchable tables, actions, and mobile-friendly card views. - Integrated reusable components like `AuthLoading`, `DropdownMenu`, `Table`, and `Card`.
2025-05-16 14:43:14 +02:00
parent 753669c622
commit cab80e6aef
31 changed files with 5850 additions and 100 deletions
--- a/frontend/app/auth/login/page.tsx
+++ b/frontend/app/auth/login/page.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { Github } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function LoginPage() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleGitHubLogin = async () => {
+    setIsLoading(true);
+    try {
+      // Get the callbackUrl from the URL if present
+      const urlParams = new URLSearchParams(window.location.search);
+      const callbackUrl = urlParams.get('callbackUrl');
+
+      // Use the API service to get the GitHub OAuth URL
+      const { url } = await import('@/lib/api').then(module => 
+        module.authAPI.getGitHubOAuthUrl()
+      );
+
+      // Store the callbackUrl in sessionStorage to use after authentication
+      if (callbackUrl) {
+        sessionStorage.setItem('callbackUrl', callbackUrl);
+      }
+
+      // Redirect to GitHub OAuth page
+      window.location.href = url;
+    } catch (error) {
+      console.error('Login error:', error);
+      setIsLoading(false);
+      // You could add error handling UI here
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-2xl font-bold">Connexion</CardTitle>
+          <CardDescription>
+            Connectez-vous pour accéder à l&apos;application de création de groupes
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <Button
+            variant="outline"
+            onClick={handleGitHubLogin}
+            disabled={isLoading}
+            className="w-full"
+          >
+            {isLoading ? (
+              <span className="flex items-center gap-2">
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                Connexion en cours...
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <Github className="h-5 w-5" />
+                Se connecter avec GitHub
+              </span>
+            )}
+          </Button>
+        </CardContent>
+        <CardFooter className="flex flex-col text-center text-sm text-muted-foreground">
+          <p>
+            En vous connectant, vous acceptez nos conditions d&apos;utilisation et notre politique de confidentialité.
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}