@striae-org/striae 3.0.4

package/app/components/sidebar/case-export/case-export.module.css

@@ -0,0 +1,386 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.modal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: 480px;
+  max-height: 90vh;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.header {
+  display: flex;
+  font-size: var(--fontSizeBodyL);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  color: var(--textTitle);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--fontSizeBodyL);
+  font-weight: 600;
+  color: var(--textTitle);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: var(--fontSizeH5);
+  cursor: pointer;
+  padding: var(--spaceS);
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeButton:hover {
+  color: var(--text);
+}
+
+.content {
+  padding: var(--spaceL);
+  overflow-y: auto;
+  max-height: calc(90vh - var(--space3XL));
+}
+
+.formatSelector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spaceM);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  margin-top: var(--spaceM);
+}
+
+.formatLabel {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  margin: 0;
+}
+
+.formatToggle {
+  display: flex;
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--primary) 20%, transparent);
+  border-radius: var(--spaceXS);
+  overflow: hidden;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--primary) 15%, transparent);
+}
+
+.formatOption {
+  background: transparent;
+  border: none;
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--primary);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  min-width: 60px;
+}
+
+.formatOption:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 15%, transparent);
+  color: var(--primary);
+}
+
+.formatOption:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.formatOptionActive {
+  background: var(--primary) !important;
+  color: white !important;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--primary) 30%, transparent);
+}
+
+.formatOptionActive:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 85%, var(--black)) !important;
+}
+
+.imageOption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spaceM);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  margin-top: var(--spaceM);
+}
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--spaceS);
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid color-mix(in lab, var(--primary) 40%, transparent);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  position: relative;
+  flex-shrink: 0;
+}
+
+.checkbox:checked {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.checkbox:checked::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: 0px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkbox:hover:not(:disabled) {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 20%, transparent);
+}
+
+.checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.imageOption:has(.checkbox:disabled) {
+  opacity: 0.6;
+}
+
+.imageOption:has(.checkbox:disabled) .checkboxLabel {
+  cursor: not-allowed;
+}
+
+.checkboxText {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  margin: 0;
+}
+
+.checkboxTooltip {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textBody);
+  margin: 0;
+  opacity: 0.8;
+}
+
+.fieldGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+.inputGroup {
+  display: flex;
+  gap: var(--spaceM);
+  align-items: center;
+}
+
+.input {
+  flex: 1;
+  padding: var(--spaceM);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyS);
+  background: var(--backgroundLight);
+  color: var(--textBody);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.input:focus {
+  outline: none;
+  border-color: color-mix(in lab, var(--text) 30%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.input:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.exportButton {
+  background: var(--success);
+  color: white;
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  white-space: nowrap;
+  min-width: 140px;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--success) 30%, transparent);
+}
+
+.exportButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--success) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--success) 40%, transparent);
+}
+
+.exportButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.confirmationExportButton {
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  white-space: nowrap;
+  min-width: 140px;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--accent) 30%, transparent);
+}
+
+.confirmationExportButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--accent) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--accent) 40%, transparent);
+}
+
+.confirmationExportButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.divider {
+  margin: var(--spaceL) 0;
+  text-align: center;
+  position: relative;
+  color: var(--textLight);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: color-mix(in lab, var(--text) 10%, transparent);
+  z-index: 1;
+}
+
+.divider span {
+  background: var(--backgroundLight);
+  padding: 0 var(--spaceM);
+  position: relative;
+  z-index: 2;
+}
+
+.exportAllSection {
+  text-align: center;
+  margin-bottom: var(--spaceM);
+}
+
+.exportAllButton {
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  width: 100%;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--primary) 30%, transparent);
+}
+
+.exportAllButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--primary) 40%, transparent);
+}
+
+.exportAllButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.progressSection {
+  margin: var(--spaceM) 0;
+  padding: var(--spaceM);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.progressText {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textBody);
+  margin-bottom: var(--spaceS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.progressBar {
+  width: 100%;
+  height: 8px;
+  background: color-mix(in lab, var(--text) 10%, transparent);
+  border-radius: var(--spaceXS);
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: color-mix(in lab, var(--text) 60%, transparent);
+  border-radius: var(--spaceXS);
+  transition: width var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.error {
+  margin-top: var(--spaceM);
+  padding: var(--spaceM);
+  background: color-mix(in lab, var(--error) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--error) 20%, transparent);
+  border-radius: var(--spaceXS);
+  color: var(--error);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}

package/app/components/sidebar/case-export/case-export.tsx

@@ -0,0 +1,317 @@
+import { useState, useEffect, useContext } from 'react';
+import styles from './case-export.module.css';
+import { AuthContext } from '~/contexts/auth.context';
+import { getCaseConfirmations, exportConfirmationData } from '../../actions/confirm-export';
+
+export type ExportFormat = 'json' | 'csv';
+
+interface CaseExportProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExport: (caseNumber: string, format: ExportFormat, includeImages?: boolean) => void;
+  onExportAll: (onProgress: (current: number, total: number, caseName: string) => void, format: ExportFormat) => void;
+  currentCaseNumber?: string;
+  isReadOnly?: boolean;
+}
+
+export const CaseExport = ({ 
+  isOpen, 
+  onClose, 
+  onExport, 
+  onExportAll,
+  currentCaseNumber = '',
+  isReadOnly = false
+}: CaseExportProps) => {
+  const { user } = useContext(AuthContext);
+  const [caseNumber, setCaseNumber] = useState(currentCaseNumber);
+  const [isExporting, setIsExporting] = useState(false);
+  const [isExportingAll, setIsExportingAll] = useState(false);
+  const [isExportingConfirmations, setIsExportingConfirmations] = useState(false);
+  const [error, setError] = useState<string>('');
+  const [exportProgress, setExportProgress] = useState<{ current: number; total: number; caseName: string } | null>(null);
+  const [selectedFormat, setSelectedFormat] = useState<ExportFormat>('json');
+  const [includeImages, setIncludeImages] = useState(false);
+  const [hasConfirmationData, setHasConfirmationData] = useState(false);
+
+  // Update caseNumber when currentCaseNumber prop changes
+  useEffect(() => {
+    setCaseNumber(currentCaseNumber);
+  }, [currentCaseNumber]);
+
+  // Disable images option when exporting all cases or when no case number is entered
+  useEffect(() => {
+    if ((isExportingAll || !caseNumber.trim()) && includeImages) {
+      setIncludeImages(false);
+    }
+  }, [isExportingAll, caseNumber, includeImages]);
+
+  // Check for confirmation data when case changes (for read-only cases)
+  useEffect(() => {
+    const checkConfirmationData = async () => {
+      if (isReadOnly && user && caseNumber.trim()) {
+        try {
+          const confirmations = await getCaseConfirmations(user, caseNumber.trim());
+          const hasData = !!confirmations && Object.keys(confirmations).length > 0;
+          setHasConfirmationData(hasData);
+        } catch (error) {
+          console.error('Failed to check confirmation data:', error);
+          setHasConfirmationData(false);
+        }
+      } else {
+        setHasConfirmationData(false);
+      }
+    };
+
+    checkConfirmationData();
+  }, [isReadOnly, user?.uid, caseNumber]);
+
+  // Additional useEffect to check when modal opens
+  useEffect(() => {
+    if (isOpen && isReadOnly && user && caseNumber.trim()) {
+      const checkOnOpen = async () => {
+        try {
+          const confirmations = await getCaseConfirmations(user, caseNumber.trim());
+          const hasData = !!confirmations && Object.keys(confirmations).length > 0;
+          setHasConfirmationData(hasData);
+        } catch (error) {
+          console.error('Modal open confirmation check failed:', error);
+          setHasConfirmationData(false);
+        }
+      };
+      checkOnOpen();
+    }
+  }, [isOpen, isReadOnly, user?.uid, caseNumber]);
+
+  // Force JSON format and disable images for read-only cases
+  useEffect(() => {
+    if (isReadOnly) {
+      setSelectedFormat('json');
+      setIncludeImages(false);
+    }
+  }, [isReadOnly]);
+
+  // 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]);
+
+  if (!isOpen) return null;
+
+  const handleExport = async () => {
+    if (!caseNumber.trim()) {
+      setError('Please enter a case number');
+      return;
+    }
+    
+    setIsExporting(true);
+    setError('');
+    setExportProgress(null);
+    
+    try {
+      await onExport(caseNumber.trim(), selectedFormat, includeImages);
+      onClose();
+    } catch (error) {
+      console.error('Export failed:', error);
+      setError(error instanceof Error ? error.message : 'Export failed. Please try again.');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleExportAll = async () => {
+    setIsExportingAll(true);
+    setError('');
+    setExportProgress(null); // Don't show progress until we have real data
+    
+    try {
+      await onExportAll((current: number, total: number, caseName: string) => {
+        setExportProgress({ current, total, caseName });
+      }, selectedFormat);
+      onClose();
+    } catch (error) {
+      console.error('Export all failed:', error);
+      setError(error instanceof Error ? error.message : 'Export all cases failed. Please try again.');
+    } finally {
+      setIsExportingAll(false);
+      setExportProgress(null);
+    }
+  };
+
+  const handleExportConfirmations = async () => {
+    if (!caseNumber.trim() || !user) {
+      setError('Unable to export confirmation data');
+      return;
+    }
+    
+    setIsExportingConfirmations(true);
+    setError('');
+    
+    try {
+      await exportConfirmationData(user, caseNumber.trim());
+      onClose();
+    } catch (error) {
+      console.error('Confirmation export failed:', error);
+      setError(error instanceof Error ? error.message : 'Confirmation export failed. Please try again.');
+    } finally {
+      setIsExportingConfirmations(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}>Export Case Data</h2>
+          <button 
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            ×
+          </button>
+        </div>
+        
+        <div className={styles.content}>
+          <div className={styles.fieldGroup}>
+            {/* 1. Case number input */}
+            <div className={styles.inputGroup}>
+              <input
+                id="caseNumber"
+                type="text"
+                className={styles.input}
+                value={caseNumber}
+                onChange={(e) => {
+                  setCaseNumber(e.target.value);
+                  if (error) setError('');
+                }}
+                placeholder="Enter case number"
+                disabled={isExporting || isExportingAll || isReadOnly}
+              />
+            </div>
+            
+            {/* 2. Format choice - disabled for read-only cases */}
+            <div className={styles.formatSelector}>
+              <span className={styles.formatLabel}>Data Format:</span>
+              <div className={styles.formatToggle}>
+                <button
+                  type="button"
+                  className={`${styles.formatOption} ${selectedFormat === 'json' ? styles.formatOptionActive : ''}`}
+                  onClick={() => setSelectedFormat('json')}
+                  disabled={isExporting || isExportingAll || isReadOnly}
+                  title="JSON for case imports"
+                >
+                  JSON
+                </button>
+                <button
+                  type="button"
+                  className={`${styles.formatOption} ${selectedFormat === 'csv' ? styles.formatOptionActive : ''}`}
+                  onClick={() => setSelectedFormat('csv')}
+                  disabled={isExporting || isExportingAll || isReadOnly}
+                  title="CSV for single case, Excel (.xlsx) with multiple worksheets for all cases"
+                >
+                  CSV/Excel
+                </button>
+              </div>
+            </div>
+
+            {/* 3. Image inclusion option - disabled for read-only cases */}
+            <div className={styles.imageOption}>
+              <label className={styles.checkboxLabel}>
+                <input
+                  type="checkbox"
+                  className={styles.checkbox}
+                  checked={includeImages}
+                  onChange={(e) => setIncludeImages(e.target.checked)}
+                  disabled={!caseNumber.trim() || isExporting || isExportingAll || isReadOnly}
+                />
+                <div className={styles.checkboxText}>
+                  <span>Include Images (ZIP)</span>
+                  <p className={styles.checkboxTooltip}>
+                    Available for single case exports only. Downloads a ZIP file containing data and all associated image files. Case imports support only JSON data format.
+                  </p>
+                </div>
+              </label>
+            </div>
+            
+            {/* 4. Export buttons (case OR all cases) */}
+            <div className={styles.inputGroup}>
+              <button
+                className={isReadOnly ? styles.confirmationExportButton : styles.exportButton}
+                onClick={isReadOnly ? handleExportConfirmations : handleExport}
+                disabled={!caseNumber.trim() || isExporting || isExportingAll || isExportingConfirmations || (isReadOnly && !hasConfirmationData)}
+              >
+                {isExporting || isExportingConfirmations ? 'Exporting...' : 
+                 isReadOnly ? 'Export Confirmation Data' : 'Export Case Data'}
+              </button>
+            </div>
+            
+            {/* Hide "Export All Cases" for read-only cases */}
+            {!isReadOnly && (
+              <>
+                <div className={styles.divider}>
+                  <span>OR</span>
+                </div>
+                
+                <div className={styles.exportAllSection}>
+                  <button
+                    className={styles.exportAllButton}
+                    onClick={handleExportAll}
+                    disabled={isExporting || isExportingAll}
+                  >
+                    {isExportingAll ? 'Exporting All Cases...' : 'Export All Cases'}
+                  </button>              
+                </div>
+              </>
+            )}
+            
+            {exportProgress && exportProgress.total > 0 && (
+              <div className={styles.progressSection}>
+                <div className={styles.progressText}>
+                  Exporting case {exportProgress.current} of {exportProgress.total}: {exportProgress.caseName}
+                </div>
+                <div className={styles.progressBar}>
+                  <div 
+                    className={styles.progressFill}
+                    style={{ width: `${(exportProgress.current / exportProgress.total) * 100}%` }}
+                  />
+                </div>
+              </div>
+            )}
+            
+            {isExportingAll && !exportProgress && (
+              <div className={styles.progressSection}>
+                <div className={styles.progressText}>
+                  Preparing export...
+                </div>
+              </div>
+            )}
+            
+            {error && (
+              <div className={styles.error}>
+                {error}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};