@striae-org/striae 3.0.4

package/app/components/canvas/confirmation/confirmation.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect, useContext } from 'react';
+import { ConfirmationData } from '~/types/annotations';
+import { AuthContext } from '~/contexts/auth.context';
+import { generateConfirmationId } from '~/utils/id-generator';
+import styles from './confirmation.module.css';
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm?: (confirmationData: ConfirmationData) => void;
+  company?: string;
+  existingConfirmation?: ConfirmationData | null;
+}
+
+// Format current date and time in readable format
+const formatTimestamp = (): string => {
+  const now = new Date();
+  return now.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  });
+};
+
+export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existingConfirmation }: ConfirmationModalProps) => {
+  const { user } = useContext(AuthContext);
+  const [badgeId, setBadgeId] = useState('');
+  const [error, setError] = useState('');
+  const [isConfirming, setIsConfirming] = useState(false);
+  
+  const fullName = user?.displayName || user?.email || 'Unknown User';
+  const userEmail = user?.email || 'No email available';
+  const labCompany = company || 'Not specified';
+  const timestamp = formatTimestamp();
+  const confirmationId = generateConfirmationId();
+
+  // Check if this is an existing confirmation
+  const hasExistingConfirmation = !!existingConfirmation;
+
+  // Handle Escape key to close modal
+  useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscapeKey);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpen, onClose]);
+
+  // Reset form when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      if (existingConfirmation) {
+        setBadgeId(existingConfirmation.badgeId);
+      } else {
+        setBadgeId('');
+      }
+      setError('');
+      setIsConfirming(false);
+    }
+  }, [isOpen, existingConfirmation]);
+
+  if (!isOpen) return null;
+
+  const handleConfirm = async () => {
+    if (!badgeId.trim()) {
+      setError('Badge/ID is required');
+      return;
+    }
+
+    setIsConfirming(true);
+    setError('');
+
+    try {
+      const confirmationData: ConfirmationData = {
+        fullName,
+        badgeId: badgeId.trim(),
+        timestamp,
+        confirmationId,
+        confirmedBy: user?.uid || '',
+        confirmedByEmail: user?.email || '',
+        confirmedByCompany: labCompany,
+        confirmedAt: new Date().toISOString()
+      };
+
+      onConfirm?.(confirmationData);
+      onClose();
+    } catch (error) {
+      console.error('Confirmation failed:', error);
+      setError('Confirmation failed. Please try again.');
+    } finally {
+      setIsConfirming(false);
+    }
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className={styles.overlay} onClick={handleOverlayClick}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>
+            {hasExistingConfirmation ? 'Confirmation Details' : 'Confirm Identification'}
+          </h2>
+          <button 
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            ×
+          </button>
+        </div>
+        
+        {hasExistingConfirmation && (
+          <div className={styles.existingConfirmationBanner}>
+            ✓ This image has already been confirmed
+          </div>
+        )}
+        
+        <div className={styles.content}>
+          <div className={styles.fieldGroup}>
+            <div className={styles.field}>
+              <label className={styles.label}>Name:</label>
+              <div className={styles.readOnlyValue}>
+                {hasExistingConfirmation ? existingConfirmation.fullName : fullName}
+              </div>
+            </div>
+
+            <div className={styles.field}>
+              <label className={styles.label} htmlFor="badgeId">Badge/ID: *</label>
+              <input
+                id="badgeId"
+                type="text"
+                className={styles.input}
+                value={badgeId}
+                onChange={(e) => {
+                  setBadgeId(e.target.value);
+                  if (error) setError('');
+                }}
+                placeholder="Enter your badge or ID number"
+                disabled={isConfirming || hasExistingConfirmation}
+                autoFocus={!hasExistingConfirmation}
+              />
+            </div>
+
+            <div className={styles.field}>
+              <label className={styles.label}>Email:</label>
+              <div className={styles.readOnlyValue}>
+                {hasExistingConfirmation ? existingConfirmation.confirmedByEmail : userEmail}
+              </div>
+            </div>
+
+            <div className={styles.field}>
+              <label className={styles.label}>Lab/Company:</label>
+              <div className={styles.readOnlyValue}>
+                {hasExistingConfirmation ? existingConfirmation.confirmedByCompany : labCompany}
+              </div>
+            </div>
+
+            <div className={styles.field}>
+              <label className={styles.label}>Timestamp:</label>
+              <div className={styles.readOnlyValue}>
+                {hasExistingConfirmation ? existingConfirmation.timestamp : timestamp}
+              </div>
+            </div>
+
+            <div className={styles.field}>
+              <label className={styles.label}>Confirmation ID:</label>
+              <div className={styles.readOnlyValue}>
+                {hasExistingConfirmation ? existingConfirmation.confirmationId : confirmationId}
+              </div>
+            </div>
+          </div>
+
+          {error && <div className={styles.error}>{error}</div>}
+        </div>
+
+        <div className={styles.footer}>
+          <button
+            className={styles.cancelButton}
+            onClick={onClose}
+            disabled={isConfirming}
+          >
+            {hasExistingConfirmation ? 'Close' : 'Cancel'}
+          </button>
+          {!hasExistingConfirmation && (
+            <button
+              className={styles.confirmButton}
+              onClick={handleConfirm}
+              disabled={isConfirming || !badgeId.trim()}
+            >
+              {isConfirming ? 'Confirming...' : 'Confirm'}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/colors/colors.module.css

@@ -0,0 +1,59 @@
+.colorSelector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.colorHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toggleButton {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggleButton:hover {
+  background: #f8f9fa;
+  border-color: #adb5bd;
+}
+
+.colorWheel {
+  width: 100%;
+  height: 40px;
+  padding: 0;
+  border: 2px solid #ced4da;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.colorGrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.5rem;
+}
+
+.colorSwatch {
+  width: 30px;
+  height: 30px;
+  border: 2px solid #ced4da;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.colorSwatch:hover {
+  transform: scale(1.1);
+}
+
+.colorSwatch.selected {
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+}

package/app/components/colors/colors.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import styles from './colors.module.css';
+
+interface ColorSelectorProps {
+  selectedColor: string;
+  onColorSelect: (color: string) => void;
+}
+
+interface ColorOption {
+  value: string;
+  label: string;
+}
+
+const commonColors: ColorOption[] = [
+  { value: '#ff0000', label: 'Red' },
+  { value: '#ff8000', label: 'Orange' },
+  { value: '#ffde21', label: 'Yellow' },
+  { value: '#00ff00', label: 'Green' },
+  { value: '#00ffff', label: 'Cyan' },
+  { value: '#0000ff', label: 'Blue' },
+  { value: '#8000ff', label: 'Purple' },
+  { value: '#ff00ff', label: 'Magenta' },
+  { value: '#000000', label: 'Black' },
+  { value: '#ffffff', label: 'White' }
+];
+
+export const ColorSelector = ({ selectedColor, onColorSelect }: ColorSelectorProps) => {
+  const [showColorWheel, setShowColorWheel] = useState(false);
+
+  return (
+    <div className={styles.colorSelector}>
+      <div className={styles.colorHeader}>
+        <span className={styles.colorLabel}>Select color</span>
+        <button 
+          onClick={() => setShowColorWheel(!showColorWheel)}
+          className={styles.toggleButton}
+        >
+          {showColorWheel ? 'Presets' : 'Color Wheel'}
+        </button>
+      </div>
+      
+      {showColorWheel ? (
+        <>          
+          <input            
+            type="color"
+            value={selectedColor}
+            onChange={(e) => onColorSelect(e.target.value)}
+            className={styles.colorWheel}
+            title="Choose a color"
+          />
+        </>
+      ) : (
+        <div className={styles.colorGrid}>
+        {commonColors.map((color) => (
+          <button
+            key={color.value}
+            className={`${styles.colorSwatch} ${color.value === selectedColor ? styles.selected : ''}`}
+            style={{ backgroundColor: color.value }}
+            onClick={() => onColorSelect(color.value)}
+            aria-label={`Select ${color.label}`}
+            title={color.label}
+          />
+        ))}
+      </div>
+      )}
+    </div>
+  );
+};

package/app/components/form/base-form.tsx

@@ -0,0 +1,21 @@
+import { Form as RemixForm } from '@remix-run/react';
+import styles from './form.module.css';
+
+interface BaseFormProps {
+  children: React.ReactNode;
+  method?: 'get' | 'post' | 'put' | 'delete';
+  className?: string;
+  onSubmit?: React.FormEventHandler<HTMLFormElement>;
+}
+
+export const BaseForm = ({ children, method = 'post', className, onSubmit }: BaseFormProps) => {
+  return (
+    <RemixForm 
+      method={method} 
+      className={`${styles.form} ${className || ''}`}
+      onSubmit={onSubmit}
+    >
+      {children}
+    </RemixForm>
+  );
+};

package/app/components/form/form-button.tsx

@@ -0,0 +1,28 @@
+import styles from './form.module.css';
+
+interface FormButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'success' | 'error';
+  isLoading?: boolean;
+  loadingText?: string;
+  children: React.ReactNode;
+}
+
+export const FormButton = ({ 
+  variant = 'primary', 
+  isLoading = false, 
+  loadingText = 'Loading...', 
+  children, 
+  className,
+  disabled,
+  ...props 
+}: FormButtonProps) => {
+  return (
+    <button
+      className={`${styles.button} ${styles[`button${variant.charAt(0).toUpperCase() + variant.slice(1)}`]} ${className || ''}`}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading ? loadingText : children}
+    </button>
+  );
+};

package/app/components/form/form-field.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import styles from './form.module.css';
+
+interface FormFieldProps extends React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  component?: 'input' | 'textarea' | 'select';
+  children?: React.ReactNode; // For select options
+}
+
+export const FormField = forwardRef<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, FormFieldProps>(
+  ({ label, error, component = 'input', className, children, ...props }, ref) => {
+    const baseClassName = component === 'textarea' ? styles.textarea : component === 'select' ? styles.select : styles.input;
+    
+    return (
+      <div className={styles.fieldWrapper}>
+        {label && (
+          <label className={styles.label} htmlFor={props.id || props.name}>
+            {label}
+          </label>
+        )}
+        {component === 'input' && (
+          <input
+            ref={ref as React.Ref<HTMLInputElement>}
+            className={`${baseClassName} ${className || ''}`}
+            {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
+          />
+        )}
+        {component === 'textarea' && (
+          <textarea
+            ref={ref as React.Ref<HTMLTextAreaElement>}
+            className={`${baseClassName} ${className || ''}`}
+            {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          />
+        )}
+        {component === 'select' && (
+          <select
+            ref={ref as React.Ref<HTMLSelectElement>}
+            className={`${baseClassName} ${className || ''}`}
+            {...(props as React.SelectHTMLAttributes<HTMLSelectElement>)}
+          >
+            {children}
+          </select>
+        )}
+        {error && (
+          <p className={styles.error}>{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+FormField.displayName = 'FormField';

package/app/components/form/form-message.tsx

@@ -0,0 +1,17 @@
+import styles from './form.module.css';
+
+interface FormMessageProps {
+  type: 'error' | 'success';
+  title?: string;
+  message: string;
+  className?: string;
+}
+
+export const FormMessage = ({ type, title, message, className }: FormMessageProps) => {
+  return (
+    <div className={`${styles[`${type}Message`]} ${className || ''}`}>
+      {title && <h2><strong>{title}</strong></h2>}
+      <p>{message}</p>
+    </div>
+  );
+};

package/app/components/form/form-toggle.tsx

@@ -0,0 +1,23 @@
+import styles from './form.module.css';
+
+interface FormToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string | React.ReactNode;
+  error?: string;
+}
+
+export const FormToggle = ({ label, error, className, ...props }: FormToggleProps) => {
+  return (
+    <div className={styles.toggleWrapper}>
+      <label className={`${styles.toggle} ${className || ''}`}>
+        <input
+          type="checkbox"
+          {...props}
+        />
+        <span>{label}</span>
+      </label>
+      {error && (
+        <p className={styles.error}>{error}</p>
+      )}
+    </div>
+  );
+};