sync: Auto-sync from Mikes-MacBook-Air.local at 2026-03-09 08:14:13

Synced files: - Session logs updated - Latest context and credentials - Command/directive updates Machine: Mikes-MacBook-Air.local Timestamp: 2026-03-09 08:14:13 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-03-09 08:14:13 -07:00
parent 06f7f1f4c6
commit 84fce5a621
59 changed files with 14435 additions and 1 deletions
--- a/projects/msp-tools/quote-wizard/frontend/src/components/ui/Button.tsx
+++ b/projects/msp-tools/quote-wizard/frontend/src/components/ui/Button.tsx
@@ -0,0 +1,87 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart'> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = 'primary',
+      size = 'md',
+      isLoading = false,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyles =
+      'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+
+    const variants = {
+      primary:
+        'bg-[#fe7400] text-white hover:bg-[#e56800] focus-visible:ring-[#fe7400] shadow-sm hover:shadow-md',
+      secondary:
+        'bg-[#333d49] text-white hover:bg-[#252d36] focus-visible:ring-[#333d49] shadow-sm hover:shadow-md',
+      outline:
+        'border-2 border-[#333d49] text-[#333d49] hover:bg-[#333d49] hover:text-white focus-visible:ring-[#333d49]',
+      ghost:
+        'text-[#333d49] hover:bg-gray-100 focus-visible:ring-[#333d49]',
+    };
+
+    const sizes = {
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-5 py-2.5 text-base',
+      lg: 'px-7 py-3.5 text-lg',
+    };
+
+    return (
+      <motion.button
+        ref={ref}
+        whileHover={{ scale: disabled || isLoading ? 1 : 1.02 }}
+        whileTap={{ scale: disabled || isLoading ? 1 : 0.98 }}
+        className={cn(baseStyles, variants[variant], sizes[size], className)}
+        disabled={disabled || isLoading}
+        {...props}
+      >
+        {isLoading ? (
+          <>
+            <svg
+              className="animate-spin -ml-1 mr-2 h-4 w-4"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+            Loading...
+          </>
+        ) : (
+          children
+        )}
+      </motion.button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button };
--- a/projects/msp-tools/quote-wizard/frontend/src/components/ui/Card.tsx
+++ b/projects/msp-tools/quote-wizard/frontend/src/components/ui/Card.tsx
@@ -0,0 +1,137 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export interface CardProps {
+  variant?: 'default' | 'elevated' | 'outlined' | 'highlighted';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  hoverable?: boolean;
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      padding = 'md',
+      hoverable = false,
+      children,
+      onClick,
+    },
+    ref
+  ) => {
+    const baseStyles = 'rounded-xl transition-all duration-200';
+
+    const variants = {
+      default: 'bg-white border border-gray-200',
+      elevated: 'bg-white shadow-lg',
+      outlined: 'bg-transparent border-2 border-[#333d49]',
+      highlighted: 'bg-white border-2 border-[#fe7400] shadow-lg',
+    };
+
+    const paddings = {
+      none: '',
+      sm: 'p-4',
+      md: 'p-6',
+      lg: 'p-8',
+    };
+
+    const hoverStyles = hoverable
+      ? 'cursor-pointer hover:shadow-xl hover:-translate-y-1'
+      : '';
+
+    if (hoverable) {
+      return (
+        <motion.div
+          ref={ref}
+          whileHover={{ scale: 1.01 }}
+          whileTap={{ scale: 0.99 }}
+          className={cn(
+            baseStyles,
+            variants[variant],
+            paddings[padding],
+            hoverStyles,
+            className
+          )}
+          onClick={onClick}
+        >
+          {children}
+        </motion.div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          baseStyles,
+          variants[variant],
+          paddings[padding],
+          className
+        )}
+        onClick={onClick}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+// Card subcomponents
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('mb-4 pb-4 border-b border-gray-100', className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-xl font-semibold text-[#333d49]', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-gray-500 mt-1', className)}
+      {...props}
+    />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('mt-4 pt-4 border-t border-gray-100 flex items-center', className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
--- a/projects/msp-tools/quote-wizard/frontend/src/components/ui/Input.tsx
+++ b/projects/msp-tools/quote-wizard/frontend/src/components/ui/Input.tsx
@@ -0,0 +1,61 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, error, helperText, id, type = 'text', ...props }, ref) => {
+    const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-[#333d49] mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <input
+          id={inputId}
+          type={type}
+          ref={ref}
+          className={cn(
+            'w-full px-4 py-2.5 rounded-lg border transition-all duration-200',
+            'text-[#333d49] placeholder-gray-400',
+            'focus:outline-none focus:ring-2 focus:ring-offset-0',
+            error
+              ? 'border-red-500 focus:border-red-500 focus:ring-red-200'
+              : 'border-gray-300 focus:border-[#fe7400] focus:ring-[#fe7400]/20',
+            'disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed',
+            className
+          )}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={
+            error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined
+          }
+          {...props}
+        />
+        {error && (
+          <p id={`${inputId}-error`} className="mt-1.5 text-sm text-red-500">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="mt-1.5 text-sm text-gray-500">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input };
--- a/projects/msp-tools/quote-wizard/frontend/src/components/ui/ProgressBar.tsx
+++ b/projects/msp-tools/quote-wizard/frontend/src/components/ui/ProgressBar.tsx
@@ -0,0 +1,56 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export interface ProgressBarProps {
+  progress: number;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'accent';
+  className?: string;
+}
+
+export function ProgressBar({
+  progress,
+  showLabel = false,
+  size = 'md',
+  variant = 'accent',
+  className,
+}: ProgressBarProps) {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+
+  const sizes = {
+    sm: 'h-1.5',
+    md: 'h-2.5',
+    lg: 'h-4',
+  };
+
+  const variants = {
+    default: 'bg-[#333d49]',
+    accent: 'bg-[#fe7400]',
+  };
+
+  return (
+    <div className={cn('w-full', className)}>
+      {showLabel && (
+        <div className="flex justify-between items-center mb-1.5">
+          <span className="text-sm font-medium text-[#333d49]">Progress</span>
+          <span className="text-sm font-medium text-[#333d49]">{clampedProgress}%</span>
+        </div>
+      )}
+      <div
+        className={cn('w-full bg-gray-200 rounded-full overflow-hidden', sizes[size])}
+        role="progressbar"
+        aria-valuenow={clampedProgress}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <motion.div
+          className={cn('h-full rounded-full', variants[variant])}
+          initial={{ width: 0 }}
+          animate={{ width: `${clampedProgress}%` }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+        />
+      </div>
+    </div>
+  );
+}
--- a/projects/msp-tools/quote-wizard/frontend/src/components/ui/index.ts
+++ b/projects/msp-tools/quote-wizard/frontend/src/components/ui/index.ts
@@ -0,0 +1,12 @@
+export { Button, type ButtonProps } from './Button';
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  type CardProps,
+} from './Card';
+export { Input, type InputProps } from './Input';
+export { ProgressBar, type ProgressBarProps } from './ProgressBar';