@striae-org/striae 3.0.4

package/app/components/sidebar/cases/cases-modal.module.css

@@ -0,0 +1,166 @@
+.modalOverlay {
+  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: var(--maxWidthL);
+  max-height: 80vh;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+  display: flex;
+  flex-direction: column;
+}
+
+.modalHeader {
+  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);
+  flex-shrink: 0;
+}
+
+.modalContent {
+  padding: var(--spaceL);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.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);
+}
+
+.casesList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spaceL);
+}
+
+.caseItem {
+  width: 100%;
+  padding: var(--spaceM) var(--spaceL);
+  border: 1px solid #e9ecef;
+  border-radius: var(--spaceXS);
+  text-align: left;
+  background: var(--backgroundLight);
+  cursor: pointer;
+  color: var(--textBody);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.caseItem:hover {
+  background-color: color-mix(in lab, var(--background) 95%, transparent);
+}
+
+.caseItem.active {
+  background-color: color-mix(in lab, var(--background) 90%, transparent);
+  font-weight: var(--fontWeightMedium);
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-top: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  background: var(--backgroundLight);
+  flex-shrink: 0;
+}
+
+.pagination button {
+  background: var(--primary);
+  color: var(--white);
+  border: none;
+  padding: var(--spaceS) var(--spaceM);
+  border-radius: var(--spaceXS);
+  cursor: pointer;
+  font-size: var(--fontSizeBodyS);
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.pagination button:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+.pagination button:disabled {
+  background: color-mix(in lab, var(--text) 20%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.pagination span {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textBody);
+  font-weight: var(--fontWeightMedium);
+}
+
+.loading,
+.error,
+.emptyState {
+  text-align: center;
+  padding: var(--space2XL);
+  color: var(--textLight);
+}
+
+.error {
+  color: var(--error);
+}
+
+/* Case Confirmation Status Indicators */
+.caseItemNotConfirmed {
+  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+}
+
+.caseItemNotConfirmed:hover {
+  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+}
+
+.caseItem.active.caseItemNotConfirmed {
+  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+}
+
+.caseItem.active.caseItemNotConfirmed:hover {
+  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+}
+
+.caseItemConfirmed {
+  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+}
+
+.caseItemConfirmed:hover {
+  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+}
+
+.caseItem.active.caseItemConfirmed {
+  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+}
+
+.caseItem.active.caseItemConfirmed:hover {
+  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+}

package/app/components/sidebar/cases/cases-modal.tsx

@@ -0,0 +1,201 @@
+import { useState, useEffect } from 'react';
+import { User } from 'firebase/auth';
+import { listCases } from '~/components/actions/case-manage';
+import { getFileAnnotations } from '~/utils/data-operations';
+import { fetchFiles } from '~/components/actions/image-manage';
+import styles from './cases-modal.module.css';
+
+interface CasesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectCase: (caseNum: string) => void;
+  currentCase: string;
+  user: User;
+}
+
+export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }: CasesModalProps) => {
+  const [cases, setCases] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>('');
+  const [currentPage, setCurrentPage] = useState(0);
+  const [caseConfirmationStatus, setCaseConfirmationStatus] = useState<{
+    [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean }
+  }>({});
+  const CASES_PER_PAGE = 10;
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsLoading(true);
+      setError('');
+      
+      listCases(user)
+        .then(fetchedCases => {
+          setCases(fetchedCases);
+        })
+        .catch(err => {
+          console.error('Failed to load cases:', err);
+          setError('Failed to load cases');
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [isOpen, user]);
+
+  const paginatedCases = cases.slice(
+    currentPage * CASES_PER_PAGE,
+    (currentPage + 1) * CASES_PER_PAGE
+  );
+
+  const totalPages = Math.ceil(cases.length / CASES_PER_PAGE);
+
+  // Fetch confirmation status only for currently visible paginated cases
+  useEffect(() => {
+    const fetchCaseConfirmationStatuses = async () => {
+      const visibleCases = cases.slice(
+        currentPage * CASES_PER_PAGE,
+        (currentPage + 1) * CASES_PER_PAGE
+      );
+
+      if (!isOpen || visibleCases.length === 0) {
+        return;
+      }
+
+      // Fetch case statuses in parallel for only visible cases
+      const caseStatusPromises = visibleCases.map(async (caseNum) => {
+        try {
+          const files = await fetchFiles(user, caseNum, { skipValidation: true });
+          
+          // Fetch annotations for each file in the case (in parallel)
+          const fileStatuses = await Promise.all(
+            files.map(async (file) => {
+              try {
+                const annotations = await getFileAnnotations(user, caseNum, file.id);
+                return {
+                  includeConfirmation: annotations?.includeConfirmation ?? false,
+                  isConfirmed: !!(annotations?.includeConfirmation && annotations?.confirmationData),
+                };
+              } catch {
+                return { includeConfirmation: false, isConfirmed: false };
+              }
+            })
+          );
+
+          // Calculate case status
+          const filesRequiringConfirmation = fileStatuses.filter(s => s.includeConfirmation);
+          const allConfirmedFiles = filesRequiringConfirmation.every(s => s.isConfirmed);
+
+          return {
+            caseNum,
+            includeConfirmation: filesRequiringConfirmation.length > 0,
+            isConfirmed: filesRequiringConfirmation.length > 0 ? allConfirmedFiles : false,
+          };
+        } catch (err) {
+          console.error(`Error fetching confirmation status for case ${caseNum}:`, err);
+          return {
+            caseNum,
+            includeConfirmation: false,
+            isConfirmed: false,
+          };
+        }
+      });
+
+      // Wait for all case status fetches to complete
+      const results = await Promise.all(caseStatusPromises);
+
+      // Build the statuses map from results
+      const statuses: { [caseNum: string]: { includeConfirmation: boolean; isConfirmed: boolean } } = {};
+      results.forEach((result) => {
+        statuses[result.caseNum] = {
+          includeConfirmation: result.includeConfirmation,
+          isConfirmed: result.isConfirmed,
+        };
+      });
+
+      setCaseConfirmationStatus(statuses);
+    };
+
+    fetchCaseConfirmationStatuses();
+  }, [isOpen, currentPage, cases, user]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <header className={styles.modalHeader}>
+          <h2>All Cases</h2>
+          <button onClick={onClose} className={styles.closeButton}>&times;</button>
+        </header>
+        
+        <div className={styles.modalContent}>
+          {isLoading ? (
+            <p className={styles.loading}>Loading cases...</p>
+          ) : error ? (
+            <p className={styles.error}>{error}</p>
+          ) : cases.length === 0 ? (
+            <p className={styles.emptyState}>No cases found</p>
+          ) : (
+            <ul className={styles.casesList}>
+              {paginatedCases.map((caseNum) => {
+                const confirmationStatus = caseConfirmationStatus[caseNum];
+                let confirmationClass = '';
+                
+                if (confirmationStatus?.includeConfirmation) {
+                  confirmationClass = confirmationStatus.isConfirmed 
+                    ? styles.caseItemConfirmed 
+                    : styles.caseItemNotConfirmed;
+                }
+
+                return (
+                  <li key={caseNum}>
+                    <button
+                      className={`${styles.caseItem} ${currentCase === caseNum ? styles.active : ''} ${confirmationClass}`}
+                      onClick={() => {
+                        onSelectCase(caseNum);
+                        onClose();
+                      }}
+                    >
+                      {caseNum}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+        
+        {totalPages > 1 && (
+          <div className={styles.pagination}>
+            <button
+              onClick={() => setCurrentPage(p => p - 1)}
+              disabled={currentPage === 0}
+            >
+              Previous
+            </button>
+            <span>{currentPage + 1} of {totalPages} ({cases.length} total cases)</span>
+            <button
+              onClick={() => setCurrentPage(p => p + 1)}
+              disabled={currentPage === totalPages - 1}
+            >
+              Next
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};