fix: resolve frontend CI/CD errors

- Exclude ../api from frontend tsconfig to fix missing module errors
- Create basic tsconfig.json for api directory
- Fix TypeScript errors in Card.tsx (missing props, unused vars)
- Fix TypeScript errors in ModernLoginPage.tsx (validator types)

Author: Ganador1

api/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2020"],
+    "outDir": "./dist",
+    "rootDir": "./",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "types": ["node", "express"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

frontend/components/ModernLoginPage.tsx

@@ -48,8 +48,8 @@ export function ModernLoginPage() {
     const formErrors = validateForm(
       { email: formData.email, password: formData.password },
       {
-        email: validators.email,
-        password: validators.required,
+        email: (val) => validators.email(val as string),
+        password: (val) => validators.required(val as string | null | undefined),
       }
     );
 

frontend/components/ui/Card.tsx

@@ -2,31 +2,32 @@ import React, { ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 
 export interface CardProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
   onClick?: () => void;
   hoverable?: boolean;
 }
 
 export interface CardHeaderProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
   title?: string;
+  subtitle?: string;
   action?: ReactNode;
 }
 
 export interface CardTitleProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 }
 
 export interface CardContentProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 }
 
 export interface CardFooterProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
   align?: 'left' | 'center' | 'right' | 'between';
 }
@@ -67,13 +68,17 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
   children,
   className,
   title,
+  subtitle,
   action,
 }) => {
   return (
     <div className={cn('mb-4 pb-4 border-b border-gray-200', className)}>
       {title ? (
         <div className="flex justify-between items-start">
-          <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+            {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+          </div>
           {action && <div className="ml-4">{action}</div>}
         </div>
       ) : (

frontend/tsconfig.json

@@ -36,6 +36,5 @@
   "include": [
     "**/*.ts",
     "**/*.tsx",
-    "../api"
   ]
 }