Refactoring the RealTimeImportStats

src/client/components/shared/AlertCard.tsx

@@ -0,0 +1,108 @@
+import { ReactElement, ReactNode } from "react";
+
+export type AlertVariant = "error" | "warning" | "info" | "success";
+
+interface AlertCardProps {
+  /** The visual style variant of the alert */
+  variant: AlertVariant;
+  /** Optional title displayed prominently */
+  title?: string;
+  /** Main message content */
+  children: ReactNode;
+  /** Optional callback when dismiss button is clicked */
+  onDismiss?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const variantStyles: Record<AlertVariant, {
+  container: string;
+  border: string;
+  icon: string;
+  iconClass: string;
+  title: string;
+  text: string;
+}> = {
+  error: {
+    container: "bg-red-50 dark:bg-red-900/20",
+    border: "border-red-500",
+    icon: "text-red-600 dark:text-red-400",
+    iconClass: "icon-[solar--danger-circle-bold]",
+    title: "text-red-800 dark:text-red-300",
+    text: "text-red-700 dark:text-red-400",
+  },
+  warning: {
+    container: "bg-amber-50 dark:bg-amber-900/20",
+    border: "border-amber-300",
+    icon: "text-amber-600 dark:text-amber-400",
+    iconClass: "icon-[solar--danger-triangle-bold]",
+    title: "text-amber-800 dark:text-amber-300",
+    text: "text-amber-700 dark:text-amber-400",
+  },
+  info: {
+    container: "bg-blue-50 dark:bg-blue-900/20",
+    border: "border-blue-500",
+    icon: "text-blue-600 dark:text-blue-400",
+    iconClass: "icon-[solar--info-circle-bold]",
+    title: "text-blue-800 dark:text-blue-300",
+    text: "text-blue-700 dark:text-blue-400",
+  },
+  success: {
+    container: "bg-green-50 dark:bg-green-900/20",
+    border: "border-green-500",
+    icon: "text-green-600 dark:text-green-400",
+    iconClass: "icon-[solar--check-circle-bold]",
+    title: "text-green-800 dark:text-green-300",
+    text: "text-green-700 dark:text-green-400",
+  },
+};
+
+/**
+ * A reusable alert card component for displaying messages with consistent styling.
+ * 
+ * @example
+ * ```tsx
+ * <AlertCard variant="error" title="Import Error" onDismiss={() => setError(null)}>
+ *   {errorMessage}
+ * </AlertCard>
+ * ```
+ */
+export function AlertCard({
+  variant,
+  title,
+  children,
+  onDismiss,
+  className = "",
+}: AlertCardProps): ReactElement {
+  const styles = variantStyles[variant];
+
+  return (
+    <div
+      className={`rounded-lg border-l-4 ${styles.border} ${styles.container} p-4 ${className}`}
+    >
+      <div className="flex items-start gap-3">
+        <span className={`w-6 h-6 ${styles.icon} mt-0.5 shrink-0`}>
+          <i className={`h-6 w-6 ${styles.iconClass}`}></i>
+        </span>
+        <div className="flex-1 min-w-0">
+          {title && (
+            <p className={`font-semibold ${styles.title}`}>{title}</p>
+          )}
+          <div className={`text-sm ${styles.text} ${title ? "mt-1" : ""}`}>
+            {children}
+          </div>
+        </div>
+        {onDismiss && (
+          <button
+            onClick={onDismiss}
+            className={`${styles.icon} hover:opacity-70 transition-opacity`}
+          >
+            <i className="h-5 w-5 icon-[solar--close-circle-bold]"></i>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default AlertCard;

src/client/components/shared/ProgressBar.tsx

@@ -0,0 +1,69 @@
+import { ReactElement } from "react";
+
+interface ProgressBarProps {
+  /** Current progress value */
+  current: number;
+  /** Total/maximum value */
+  total: number;
+  /** Whether the progress is actively running (shows animation) */
+  isActive?: boolean;
+  /** Label shown on the left side */
+  activeLabel?: string;
+  /** Label shown when complete */
+  completeLabel?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * A reusable progress bar component with percentage display.
+ * 
+ * @example
+ * ```tsx
+ * <ProgressBar
+ *   current={45}
+ *   total={100}
+ *   isActive={true}
+ *   activeLabel="Importing 45 / 100"
+ *   completeLabel="45 / 100 imported"
+ * />
+ * ```
+ */
+export function ProgressBar({
+  current,
+  total,
+  isActive = false,
+  activeLabel,
+  completeLabel,
+  className = "",
+}: ProgressBarProps): ReactElement {
+  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
+  const label = isActive ? activeLabel : completeLabel;
+
+  return (
+    <div className={`space-y-1.5 ${className}`}>
+      <div className="flex items-center justify-between text-sm">
+        {label && (
+          <span className="font-medium text-gray-700 dark:text-gray-300">
+            {label}
+          </span>
+        )}
+        <span className="font-semibold text-gray-900 dark:text-white">
+          {percentage}% complete
+        </span>
+      </div>
+      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
+        <div
+          className="bg-blue-600 dark:bg-blue-500 h-3 rounded-full transition-all duration-300 relative"
+          style={{ width: `${percentage}%` }}
+        >
+          {isActive && (
+            <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/20 to-transparent animate-shimmer" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProgressBar;

src/client/components/shared/StatsCard.tsx

@@ -0,0 +1,52 @@
+import { ReactElement } from "react";
+
+interface StatsCardProps {
+  /** The main numeric value to display */
+  value: number;
+  /** Label text below the value */
+  label: string;
+  /** Background color (CSS color string or Tailwind class) */
+  backgroundColor?: string;
+  /** Text color for the value (defaults to white) */
+  valueColor?: string;
+  /** Text color for the label (defaults to slightly transparent) */
+  labelColor?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * A reusable stats card component for displaying numeric metrics.
+ * 
+ * @example
+ * ```tsx
+ * <StatsCard 
+ *   value={42} 
+ *   label="imported in database" 
+ *   backgroundColor="#d8dab2"
+ *   valueColor="text-gray-800"
+ * />
+ * ```
+ */
+export function StatsCard({
+  value,
+  label,
+  backgroundColor = "#6b7280",
+  valueColor = "text-white",
+  labelColor = "text-gray-200",
+  className = "",
+}: StatsCardProps): ReactElement {
+  const isHexColor = backgroundColor.startsWith("#") || backgroundColor.startsWith("rgb");
+  
+  return (
+    <div
+      className={`rounded-lg p-6 text-center ${!isHexColor ? backgroundColor : ""} ${className}`}
+      style={isHexColor ? { backgroundColor } : undefined}
+    >
+      <div className={`text-4xl font-bold ${valueColor} mb-2`}>{value}</div>
+      <div className={`text-sm ${labelColor} font-medium`}>{label}</div>
+    </div>
+  );
+}
+
+export default StatsCard;