PAGES: all pages ues the new components now.

Author: Amir-Zouerami

src/pages/AdminPage.tsx

@@ -1,28 +1,67 @@
-import AuditTrail from '@/components/admin/AuditTrail';
-import TeamManagement from '@/components/admin/TeamManagement';
-import UserManagement from '@/components/admin/UserManagement';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import CreateTeam from '@/features/team/create-team/CreateTeam';
+import CreateUser from '@/features/user/create-user/CreateUser';
+import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/shared/ui/tabs';
+import AuditTrail from '@/widgets/audit/AuditTrail';
+import TeamList from '@/widgets/team/TeamList';
+import UserList from '@/widgets/user/UserList';
 
 const AdminPage = () => {
 	return (
 		<div className="space-y-6">
 			<div>
 				<h1 className="text-3xl font-bold text-gradient py-5">Admin Panel</h1>
-				<p className="text-muted-foreground">Manage users and teams across the platform.</p>
+
+				<p className="text-muted-foreground">
+					Manage users, teams, and system-wide settings across the platform.
+				</p>
 			</div>
+
 			<Tabs defaultValue="users" className="space-y-4">
-				<TabsList>
-					<TabsTrigger value="users">Manage Users</TabsTrigger>
-					<TabsTrigger value="teams">Manage Teams</TabsTrigger>
-					<TabsTrigger value="audit">Audit Trail</TabsTrigger>
-				</TabsList>
+				<div className="w-full overflow-x-auto pb-1 no-scrollbar">
+					<TabsList className="inline-flex w-auto justify-start">
+						<TabsTrigger value="users" className="whitespace-nowrap">
+							Manage Users
+						</TabsTrigger>
+
+						<TabsTrigger value="teams" className="whitespace-nowrap">
+							Manage Teams
+						</TabsTrigger>
+
+						<TabsTrigger value="audit" className="whitespace-nowrap">
+							Audit Trail
+						</TabsTrigger>
+					</TabsList>
+				</div>
 
 				<TabsContent value="users">
-					<UserManagement />
+					<Card>
+						<CardHeader>
+							<CardTitle className="flex justify-between items-center">
+								Users
+								<CreateUser />
+							</CardTitle>
+						</CardHeader>
+
+						<CardContent className="space-y-4">
+							<UserList />
+						</CardContent>
+					</Card>
 				</TabsContent>
 
 				<TabsContent value="teams">
-					<TeamManagement />
+					<Card>
+						<CardHeader>
+							<CardTitle className="flex justify-between items-center">
+								Teams
+								<CreateTeam />
+							</CardTitle>
+						</CardHeader>
+
+						<CardContent className="space-y-4">
+							<TeamList />
+						</CardContent>
+					</Card>
 				</TabsContent>
 
 				<TabsContent value="audit">

src/pages/AuthCallbackPage.tsx

@@ -1,6 +1,6 @@
-// Path: src/pages/AuthCallbackPage.tsx
+import { useAuth } from '@/app/providers/AuthContext';
 import PageLoader from '@/components/general/PageLoader';
-import { useAuth } from '@/contexts/AuthContext';
+import { useUpdateProfilePicture } from '@/entities/User/api/useMe';
 import { useToast } from '@/hooks/use-toast';
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -10,11 +10,29 @@ const AuthCallbackPage: React.FC = () => {
 	const navigate = useNavigate();
 	const { handleOAuthCallback } = useAuth();
 	const { toast } = useToast();
+	const updateProfilePictureMutation = useUpdateProfilePicture();
 	const [error, setError] = useState<string | null>(null);
 
+	const handleProfileImageSync = async (imageUrl: string) => {
+		try {
+			const response = await fetch(imageUrl);
+			const blob = await response.blob();
+			const file = new File([blob], 'gitlab-avatar.jpg', { type: blob.type });
+
+			const formData = new FormData();
+			formData.append('file', file);
+
+			await updateProfilePictureMutation.mutateAsync(formData);
+			console.log('GitLab profile picture synced successfully');
+		} catch (e) {
+			console.error('Failed to sync GitLab profile picture:', e);
+		}
+	};
+
 	useEffect(() => {
-		const processToken = async () => {
+		const processAuth = async () => {
 			const token = searchParams.get('token');
+			const avatarUrl = searchParams.get('avatar') || searchParams.get('picture');
 
 			if (!token) {
 				setError('Authentication token was not found. Redirecting to login.');
@@ -29,19 +47,26 @@ const AuthCallbackPage: React.FC = () => {
 
 			try {
 				await handleOAuthCallback(token);
+
+				if (avatarUrl) {
+					handleProfileImageSync(avatarUrl);
+				}
+
 				navigate('/', { replace: true });
 			} catch (err) {
 				setError('Failed to validate authentication token. Redirecting to login.');
+
 				toast({
 					title: 'Authentication Failed',
 					description: err instanceof Error ? err.message : 'An unknown error occurred.',
 					variant: 'destructive',
 				});
+
 				setTimeout(() => navigate('/login', { replace: true }), 3000);
 			}
 		};
 
-		processToken();
+		processAuth();
 	}, [searchParams, navigate, handleOAuthCallback, toast]);
 
 	if (error) {

src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
+import { useAuth } from '@/app/providers/AuthContext';
+import LoginForm from '@/components/auth/LoginForm';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '@/contexts/AuthContext';
-import LoginForm from '@/components/auth/LoginForm';
 
 const LoginPage = () => {
 	const { isAuthenticated, isLoading } = useAuth();