refactor: complete application rewrite with modern UI

src/components/ui/Card.tsx

@@ -0,0 +1,85 @@
+import { HTMLAttributes, forwardRef } from 'react';
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'bordered' | 'elevated';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const variantStyles: Record<string, string> = {
+  default: 'bg-white',
+  bordered: 'bg-white border-2 border-slate-200',
+  elevated: 'bg-white shadow-lg',
+};
+
+const paddingStyles: Record<string, string> = {
+  none: '',
+  sm: 'p-3',
+  md: 'p-4',
+  lg: 'p-6',
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className = '', variant = 'default', padding = 'md', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`rounded-xl overflow-hidden transition-all duration-300 ${variantStyles[variant]} ${paddingStyles[padding]} ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`px-4 py-3 border-b border-slate-200 bg-slate-50 ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = 'CardHeader';
+
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`p-4 ${className}`} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardBody.displayName = 'CardBody';
+
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className = '', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`px-4 py-3 border-t border-slate-200 bg-slate-50 ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = 'CardFooter';