Comprehensive frontend fixes: Updated gitignore, fixed all import paths, enhanced lib utilities

.gitignore

@@ -15,8 +15,10 @@ dist/
 downloads/
 eggs/
 .eggs/
+# Ignore system lib directories but allow our src/lib
 lib/
 lib64/
+!/src/lib/
 parts/
 sdist/
 var/

src/api-client.ts

@@ -1,54 +0,0 @@
-// API Client for RM Research Assistant
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-
-class ApiClient {
-  private baseURL: string;
-
-  constructor(baseURL: string = API_BASE_URL) {
-    this.baseURL = baseURL;
-  }
-
-  async request(endpoint: string, options: RequestInit = {}) {
-    const url = `${this.baseURL}${endpoint}`;
-    const config = {
-      headers: {
-        'Content-Type': 'application/json',
-        ...options.headers,
-      },
-      ...options,
-    };
-
-    const response = await fetch(url, config);
-    
-    if (!response.ok) {
-      throw new Error(`API Error: ${response.status} ${response.statusText}`);
-    }
-
-    return response.json();
-  }
-
-  async get(endpoint: string) {
-    return this.request(endpoint, { method: 'GET' });
-  }
-
-  async post(endpoint: string, data?: any) {
-    return this.request(endpoint, {
-      method: 'POST',
-      body: data ? JSON.stringify(data) : undefined,
-    });
-  }
-
-  async put(endpoint: string, data?: any) {
-    return this.request(endpoint, {
-      method: 'PUT',
-      body: data ? JSON.stringify(data) : undefined,
-    });
-  }
-
-  async delete(endpoint: string) {
-    return this.request(endpoint, { method: 'DELETE' });
-  }
-}
-
-export const api = new ApiClient();
-export default api;

src/app/(dashboard)/pico/page.tsx

@@ -26,7 +26,7 @@ import { Spinner } from "@/components/atoms/Spinner";
 
 // Hooks & Utils
 import { useApi } from "@/hooks/useApi";
-import { api } from "@/api-client";
+import { api } from "@/lib/api-client";
 
 /**
  * PICO Extraction Page (Final Build)

src/app/(dashboard)/settings/page.tsx

@@ -14,7 +14,7 @@ import {
 import { DashboardTemplate } from "@/components/templates";
 import { Icon } from "@/components/atoms/Icon";
 import { Badge } from "@/components/atoms/Badge";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 /**
  * Utility: Safe JWT Decoder

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { cn } from "@/cn"; // Assumes a standard utility for class merging
+import { cn } from "@/lib/utils"; // Assumes a standard utility for class merging
 
 // 1. Optimized Font Loading: Prevents Layout Shift (CLS)
 const inter = Inter({

src/components/atoms/Avatar/index.tsx

@@ -2,7 +2,7 @@
 "use client";
 
 import React from "react";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 /** Props for the Avatar root */
 export interface AvatarProps {

src/components/atoms/Badge/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 // 1. Defined variants to support academic status indicators
 const badgeVariants = cva(

src/components/atoms/Button/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 // 1. Define variants using CVA for clean state management
 const buttonVariants = cva(

src/components/atoms/Icon/index.tsx

@@ -1,5 +1,5 @@
 import { LucideIcon, LucideProps } from "lucide-react";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 export interface IconProps extends LucideProps {
   // 1. The 'icon' prop accepts any Lucide icon component

src/components/atoms/Spinner/index.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { Loader2 } from "lucide-react";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 export interface SpinnerProps extends React.ComponentPropsWithoutRef<typeof Loader2> {}
 

src/components/atoms/StatCard/index.tsx

@@ -3,11 +3,7 @@
 
 import React from "react";
 import { LucideProps } from "lucide-react";
-
-/** Utility to merge class names */
-function cn(...classes: (string | undefined | false | null)[]) {
-  return classes.filter(Boolean).join(" ");
-}
+import { cn } from "@/lib/utils";
 
 /** Props for StatCard */
 export interface StatCardProps {

src/components/atoms/Tooltip/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useRef } from "react";
-import { cn } from "@/cn"; // keep your utility function
+import { cn } from "@/lib/utils"; // keep your utility function
 
 // Custom TooltipProvider (no-op for compatibility)
 const TooltipProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {

src/components/organisms/Header/index.tsx

@@ -8,7 +8,7 @@ import {
   TooltipContent,
   TooltipProvider,
 } from "@/components/atoms/Tooltip";
-import { cn } from "@/cn"; // your utility for classnames
+import { cn } from "@/lib/utils"; // your utility for classnames
 
 const Header: React.FC = () => {
   return (

src/components/organisms/Sidebar/index.tsx

@@ -18,7 +18,7 @@ import {
 import { Avatar, AvatarFallback } from "@/components/atoms/Avatar";
 import { Icon } from "@/components/atoms/Icon";
 import { Spinner } from "@/components/atoms/Spinner";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 const navItems = [
   { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },

src/components/templates/DashboardTemplate/index.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { Sidebar } from "@/components/organisms/Sidebar";
 import { Header } from "@/components/organisms/Header";
-import { cn } from "@/cn";
+import { cn } from "@/lib/utils";
 
 interface DashboardTemplateProps {
   children: React.ReactNode;

src/constants/api.ts

@@ -1,22 +0,0 @@
-// API Configuration Constants
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-
-export const API_ENDPOINTS = {
-  // Authentication
-  LOGIN: '/api/v1/auth/login',
-  REGISTER: '/api/v1/auth/register',
-  TOKEN_REFRESH: '/api/v1/auth/refresh',
-  
-  // Papers
-  PAPERS: '/api/v1/papers',
-  PAPER_DETAIL: (id: string) => `/api/v1/papers/${id}`,
-  
-  // PICO Analysis
-  PICO_ANALYZE: '/api/v1/pico/analyze',
-  PICO_RESULTS: (id: string) => `/api/v1/pico/results/${id}`,
-  
-  // Library
-  LIBRARY: '/api/v1/library',
-  LIBRARY_ADD: '/api/v1/library/add',
-  LIBRARY_REMOVE: (id: string) => `/api/v1/library/remove/${id}`,
-} as const;

src/lib/api-client.ts

@@ -0,0 +1,88 @@
+/**
+ * Production-Grade API Client
+ * - Unified Fetch Wrapper with JWT injection.
+ * - Centralized 401 Interception (Auto-Logout).
+ * - Support for JSON and Multipart/Form-Data.
+ */
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api/v1";
+
+export type ApiError = {
+  message: string;
+  status?: number;
+  detail?: any;
+};
+
+async function request<T>(
+  endpoint: string,
+  options: RequestInit & { params?: Record<string, string> } = {}
+): Promise<T> {
+  const { params, headers, ...config } = options;
+
+  // 1. Construct URL with Search Params
+  const url = new URL(`${BASE_URL}${endpoint}`);
+  if (params) {
+    Object.entries(params).forEach(([key, val]) => url.searchParams.append(key, val));
+  }
+
+  // 2. Token Retrieval (Direct localStorage for non-React context utility)
+  const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
+
+  // 3. Header Synthesis
+  const authHeader = token ? { Authorization: `Bearer ${token}` } : {};
+  
+  // Don't set Content-Type if sending FormData (browser handles it)
+  const isFormData = config.body instanceof FormData;
+  const contentTypeHeader = isFormData ? {} : { "Content-Type": "application/json" };
+
+  const finalConfig: RequestInit = {
+    ...config,
+    headers: {
+      ...contentTypeHeader,
+      ...authHeader,
+      ...headers,
+    },
+  };
+
+  try {
+    const response = await fetch(url.toString(), finalConfig);
+
+    // 4. Global Interceptor: Handle Unauthorized
+    if (response.status === 401) {
+      if (typeof window !== "undefined") {
+        localStorage.removeItem("token");
+        // Force hard-redirect to clear state if token is dead
+        window.location.href = "/login?error=session_expired";
+      }
+      throw new Error("Unauthorized access. Please log in again.");
+    }
+
+    // 5. Success Handlers
+    if (response.status === 204) return {} as T;
+    
+    const data = await response.json();
+
+    if (!response.ok) {
+      // Return the specific backend detail if available (FastAPI style)
+      const errorMsg = data.detail || "The research server encountered an issue.";
+      return Promise.reject({ message: errorMsg, status: response.status, detail: data });
+    }
+
+    return data as T;
+  } catch (err: any) {
+    // Handle Network Failures
+    return Promise.reject({
+      message: err.message || "Unable to connect to the research server. Check your connection.",
+      status: err.status || 500
+    });
+  }
+}
+
+export const api = {
+  get: <T>(url: string, p?: Record<string, string>) => request<T>(url, { method: "GET", params: p }),
+  post: <T>(url: string, body: any) => request<T>(url, { method: "POST", body: JSON.stringify(body) }),
+  put: <T>(url: string, body: any) => request<T>(url, { method: "PUT", body: JSON.stringify(body) }),
+  delete: <T>(url: string) => request<T>(url, { method: "DELETE" }),
+  // For PICO/Avatar uploads later:
+  upload: <T>(url: string, formData: FormData) => request<T>(url, { method: "POST", body: formData }),
+};

src/lib/constants/api.ts

@@ -0,0 +1,24 @@
+export const API_BASE_URL = 'https://example.com/api'; // Base URL for your API
+
+// Default request timeout in milliseconds
+export const TIMEOUT = 5000;
+
+// Default headers for API requests
+export const DEFAULT_HEADERS = {
+  'Content-Type': 'application/json',
+  Accept: 'application/json',
+};
+
+// Helper to build full API URLs
+export const buildApiUrl = (path: string) => {
+  const trimmedPath = path.startsWith('/') ? path.slice(1) : path;
+  return `${API_BASE_URL}/${trimmedPath}`;
+};
+
+// Common API endpoints
+export const ENDPOINTS = {
+  USERS: 'users',
+  POSTS: 'posts',
+  AUTH_LOGIN: 'auth/login',
+  AUTH_REGISTER: 'auth/register',
+};

src/{cn.ts → lib/utils.ts}

@@ -1,6 +1,10 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
+/**
+ * cn - Class Names Utility
+ * Combines clsx and tailwind-merge for optimal class handling
+ */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }

src/lib/utils/index.ts

@@ -0,0 +1,3 @@
+// Re-export utils and validators for easy imports
+export * from '../utils';
+export * from './validators';

src/lib/utils/validators.ts

@@ -0,0 +1,31 @@
+/**
+ * Research Data Validators
+ * Pure functions to validate scientific identifiers and form inputs.
+ */
+
+// 1. Digital Object Identifier (DOI) Regex
+// Matches standard DOI formats (e.g., 10.1038/s41586-021-03491-6)
+const DOI_REGEX = /^10.\d{4,9}\/[-._;()/:A-Z0-9]+$/i;
+
+// 2. Email Regex (Standard RFC 5322)
+const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+export const validators = {
+  /** Checks if a string is a valid DOI */
+  isDOI: (val: string): boolean => DOI_REGEX.test(val.trim()),
+
+  /** Checks if a string is a valid institutional email */
+  isEmail: (val: string): boolean => EMAIL_REGEX.test(val),
+
+  /** Ensures PICO instructions aren't just empty whitespace */
+  isValidInstructions: (val: string): boolean => val.trim().length >= 10,
+
+  /** Validates PICO Data object from the backend */
+  hasCompletePico: (pico: any): boolean => {
+    return !!(
+      pico?.pico_population &&
+      pico?.pico_intervention &&
+      pico?.pico_outcome
+    );
+  }
+};