Enhance Dashboard UX with Skeletons, Empty States, and Backend Dependency Alignmen

Backend/app/schemas/schema.py

@@ -1,10 +1,22 @@
-from pydantic import BaseModel
-from typing import Optional, Dict
+from pydantic import BaseModel, EmailStr
+from typing import Optional, Dict, Any, List
 from datetime import datetime
 
+
+class LoginResponse(BaseModel):
+    message: str
+    user_id: str
+    email: EmailStr
+    name: Optional[str] = None
+    role: Optional[str] = None
+    onboarding_completed: bool = False
+    # The session object from Supabase contains access_token, refresh_token, etc.
+    session: Optional[Dict[str, Any]] = None 
+# --- FIX FOR ISSUE #258 END ---
+
 class UserCreate(BaseModel):
     username: str
-    email: str
+    email: EmailStr  # Uses EmailStr for better validation
     role: str
     profile_image: Optional[str] = None
     bio: Optional[str] = None
@@ -50,4 +62,4 @@ class SponsorshipPaymentCreate(BaseModel):
 class CollaborationCreate(BaseModel):
     creator_1_id: str
     creator_2_id: str
-    collaboration_details: str
+    collaboration_details: str

Frontend/src/components/ui/EmptyState.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react'; 
+
+interface EmptyStateProps {
+  icon?: LucideIcon;
+  title: string;
+  description: string;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ 
+  icon: Icon, 
+  title, 
+  description, 
+  actionText, 
+  onAction 
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center p-8 text-center bg-white dark:bg-gray-800 rounded-xl border-2 border-dashed border-gray-200 dark:border-gray-700">
+      {Icon && <Icon className="w-12 h-12 mb-4 text-gray-400 dark:text-gray-500" />}
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+      <p className="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-xs">
+        {description}
+      </p>
+      {actionText && onAction && (
+        <button
+          onClick={onAction}
+          className="mt-6 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          {actionText}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default EmptyState;

Frontend/src/components/ui/Skeleton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> 
+{
+  className?: string;
+  variant?: "rect" | "circle";
+}
+
+
+const Skeleton: React.FC<SkeletonProps> = ({ 
+  className, 
+  variant = "rect", 
+  ...props 
+}) => {
+  // Base classes for the pulse animation and color
+  const baseClasses = "animate-pulse bg-gray-200 dark:bg-gray-700";
+
+  // Shape variants
+  const variantClasses = variant === "circle" ? "rounded-full" : "rounded-md";
+
+  return (
+    <div
+      className={`${baseClasses} ${variantClasses} ${className}`}
+      {...props}
+    />
+  );
+};
+
+export default Skeleton;