@striae-org/striae 4.0.3 → 4.1.0

package/app/components/audit/user-audit.module.css

@@ -531,6 +531,26 @@
   word-break: break-word;
 }
 
+.badgeTag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
+  background: color-mix(in lab, var(--primary) 12%, transparent);
+  color: color-mix(in lab, var(--primary) 70%, var(--text));
+  font-size: 0.78rem;
+  font-weight: var(--fontWeightMedium);
+  letter-spacing: 0.2px;
+  line-height: 1.4;
+}
+
+.badgeTagMuted {
+  border-color: color-mix(in lab, var(--textLight) 25%, transparent);
+  background: color-mix(in lab, var(--backgroundLight) 70%, transparent);
+  color: var(--textLight);
+}
+
 .severity {
   font-weight: var(--fontWeightMedium);
   padding: 2px 6px;

package/app/components/audit/viewer/audit-activity-summary.tsx

@@ -0,0 +1,52 @@
+import type { AuditViewerSummaryStats } from './audit-viewer-utils';
+import styles from '../user-audit.module.css';
+
+interface AuditActivitySummaryProps {
+  caseNumber?: string;
+  filterCaseNumber: string;
+  dateRangeDisplay: string;
+  summary: AuditViewerSummaryStats;
+}
+
+export const AuditActivitySummary = ({
+  caseNumber,
+  filterCaseNumber,
+  dateRangeDisplay,
+  summary,
+}: AuditActivitySummaryProps) => {
+  const activeCaseNumber = caseNumber || filterCaseNumber.trim();
+
+  return (
+    <div className={styles.summary}>
+      <h3>
+        {activeCaseNumber
+          ? `Case Activity Summary - ${activeCaseNumber} (${dateRangeDisplay})`
+          : `Activity Summary (${dateRangeDisplay})`}
+      </h3>
+      <div className={styles.summaryGrid}>
+        <div className={styles.summaryItem}>
+          <span className={styles.label}>Total Activities:</span>
+          <span className={styles.value}>{summary.totalEntries}</span>
+        </div>
+        <div className={styles.summaryItem}>
+          <span className={styles.label}>Successful:</span>
+          <span className={styles.value}>{summary.successfulEntries}</span>
+        </div>
+        <div className={styles.summaryItem}>
+          <span className={styles.label}>Failed:</span>
+          <span className={styles.value}>{summary.failedEntries}</span>
+        </div>
+        <div className={styles.summaryItem}>
+          <span className={styles.label}>Login Sessions:</span>
+          <span className={styles.value}>{summary.loginSessions}</span>
+        </div>
+        <div className={styles.summaryItem}>
+          <span className={styles.label}>Security Incidents:</span>
+          <span className={`${styles.value} ${summary.securityIncidents > 0 ? styles.warning : ''}`}>
+            {summary.securityIncidents}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/audit/viewer/audit-entries-list.tsx

@@ -0,0 +1,200 @@
+import { type ValidationAuditEntry } from '~/types';
+import { formatAuditTimestamp, getAuditActionIcon, getAuditStatusIcon } from './audit-viewer-utils';
+import styles from '../user-audit.module.css';
+
+interface AuditEntriesListProps {
+  entries: ValidationAuditEntry[];
+}
+
+export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
+  return (
+    <div className={styles.entriesList}>
+      <h3>Activity Log ({entries.length} entries)</h3>
+      {entries.length === 0 ? (
+        <div className={styles.noEntries}>
+          <p>No activities match the current filters.</p>
+        </div>
+      ) : (
+        entries.map((entry, index) => (
+          <div key={index} className={`${styles.entry} ${styles[entry.result]}`}>
+            <div className={styles.entryHeader}>
+              <div className={styles.entryIcons}>
+                <span className={styles.actionIcon}>{getAuditActionIcon(entry.action)}</span>
+                <span className={styles.statusIcon}>{getAuditStatusIcon(entry.result)}</span>
+              </div>
+              <div className={styles.entryTitle}>
+                <span className={styles.action}>{entry.action.toUpperCase().replace(/-/g, ' ')}</span>
+                <span className={styles.fileName}>{entry.details.fileName}</span>
+              </div>
+              <div className={styles.entryTimestamp}>{formatAuditTimestamp(entry.timestamp)}</div>
+            </div>
+
+            <div className={styles.entryDetails}>
+              {entry.details.caseNumber && (
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Case:</span>
+                  <span className={styles.detailValue}>{entry.details.caseNumber}</span>
+                </div>
+              )}
+
+              {entry.details.userProfileDetails?.badgeId && (
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Badge/ID:</span>
+                  <span className={styles.badgeTag}>{entry.details.userProfileDetails.badgeId}</span>
+                </div>
+              )}
+
+              {entry.result === 'failure' && entry.details.validationErrors.length > 0 && (
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Error:</span>
+                  <span className={styles.detailValue}>{entry.details.validationErrors[0]}</span>
+                </div>
+              )}
+
+              {(entry.action === 'user-login' || entry.action === 'user-logout') && entry.details.sessionDetails && (
+                <>
+                  {entry.details.sessionDetails.userAgent && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>User Agent:</span>
+                      <span className={styles.detailValue}>{entry.details.sessionDetails.userAgent}</span>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {entry.action === 'security-violation' && entry.details.securityDetails && (
+                <>
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Severity:</span>
+                    <span
+                      className={`${styles.detailValue} ${styles.severity} ${styles[entry.details.securityDetails.severity || 'low']}`}
+                    >
+                      {(entry.details.securityDetails.severity || 'low').toUpperCase()}
+                    </span>
+                  </div>
+                  {entry.details.securityDetails.incidentType && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Type:</span>
+                      <span className={styles.detailValue}>{entry.details.securityDetails.incidentType}</span>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {(entry.action === 'file-upload' || entry.action === 'file-delete' || entry.action === 'file-access') && entry.details.fileDetails && (
+                <>
+                  {entry.details.fileDetails.fileId && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>File ID:</span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.fileId}</span>
+                    </div>
+                  )}
+
+                  {entry.details.fileDetails.originalFileName && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Original Filename:</span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.originalFileName}</span>
+                    </div>
+                  )}
+
+                  {entry.details.fileDetails.fileSize > 0 && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>File Size:</span>
+                      <span className={styles.detailValue}>
+                        {(entry.details.fileDetails.fileSize / 1024 / 1024).toFixed(2)} MB
+                      </span>
+                    </div>
+                  )}
+
+                  {entry.details.fileDetails.uploadMethod && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>
+                        {entry.action === 'file-access' ? 'Access Method' : 'Upload Method'}:
+                      </span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.uploadMethod}</span>
+                    </div>
+                  )}
+
+                  {entry.details.fileDetails.deleteReason && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Reason:</span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.deleteReason}</span>
+                    </div>
+                  )}
+
+                  {entry.details.fileDetails.sourceLocation && entry.action === 'file-access' && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Access Source:</span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.sourceLocation}</span>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {(entry.action === 'annotation-create' || entry.action === 'annotation-edit' || entry.action === 'annotation-delete') && entry.details.fileDetails && (
+                <>
+                  {entry.details.fileDetails.fileId && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>File ID:</span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.fileId}</span>
+                    </div>
+                  )}
+
+                  {entry.details.fileDetails.originalFileName && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Original Filename:</span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.originalFileName}</span>
+                    </div>
+                  )}
+
+                  {entry.details.annotationDetails?.annotationType && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Annotation Type:</span>
+                      <span className={styles.detailValue}>{entry.details.annotationDetails.annotationType}</span>
+                    </div>
+                  )}
+
+                  {entry.details.annotationDetails?.tool && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Tool:</span>
+                      <span className={styles.detailValue}>{entry.details.annotationDetails.tool}</span>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {(entry.action === 'pdf-generate' || entry.action === 'confirm') && entry.details.fileDetails && (
+                <>
+                  {entry.details.fileDetails.fileId && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>
+                        {entry.action === 'pdf-generate' ? 'Source File ID:' : 'Original Image ID:'}
+                      </span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.fileId}</span>
+                    </div>
+                  )}
+
+                  {entry.details.fileDetails.originalFileName && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>
+                        {entry.action === 'pdf-generate' ? 'Source Filename:' : 'Original Filename:'}
+                      </span>
+                      <span className={styles.detailValue}>{entry.details.fileDetails.originalFileName}</span>
+                    </div>
+                  )}
+
+                  {entry.action === 'confirm' && entry.details.confirmationId && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Confirmation ID:</span>
+                      <span className={styles.detailValue}>{entry.details.confirmationId}</span>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+};

package/app/components/audit/viewer/audit-filters-panel.tsx

@@ -0,0 +1,306 @@
+import type { AuditAction, AuditResult } from '~/types';
+import type { DateRangeFilter } from './types';
+import styles from '../user-audit.module.css';
+
+interface AuditFiltersPanelProps {
+  dateRange: DateRangeFilter;
+  customStartDate: string;
+  customEndDate: string;
+  customStartDateInput: string;
+  customEndDateInput: string;
+  caseNumber?: string;
+  filterCaseNumber: string;
+  caseNumberInput: string;
+  filterBadgeId: string;
+  badgeIdInput: string;
+  filterAction: AuditAction | 'all';
+  filterResult: AuditResult | 'all';
+  onDateRangeChange: (value: DateRangeFilter) => void;
+  onCustomStartDateInputChange: (value: string) => void;
+  onCustomEndDateInputChange: (value: string) => void;
+  onApplyCustomDateRange: () => void;
+  onClearCustomDateRange: () => void;
+  onCaseNumberInputChange: (value: string) => void;
+  onApplyCaseFilter: () => void;
+  onClearCaseFilter: () => void;
+  onBadgeIdInputChange: (value: string) => void;
+  onApplyBadgeFilter: () => void;
+  onClearBadgeFilter: () => void;
+  onFilterActionChange: (value: AuditAction | 'all') => void;
+  onFilterResultChange: (value: AuditResult | 'all') => void;
+}
+
+export const AuditFiltersPanel = ({
+  dateRange,
+  customStartDate,
+  customEndDate,
+  customStartDateInput,
+  customEndDateInput,
+  caseNumber,
+  filterCaseNumber,
+  caseNumberInput,
+  filterBadgeId,
+  badgeIdInput,
+  filterAction,
+  filterResult,
+  onDateRangeChange,
+  onCustomStartDateInputChange,
+  onCustomEndDateInputChange,
+  onApplyCustomDateRange,
+  onClearCustomDateRange,
+  onCaseNumberInputChange,
+  onApplyCaseFilter,
+  onClearCaseFilter,
+  onBadgeIdInputChange,
+  onApplyBadgeFilter,
+  onClearBadgeFilter,
+  onFilterActionChange,
+  onFilterResultChange,
+}: AuditFiltersPanelProps) => {
+  return (
+    <div className={styles.filters}>
+      <div className={styles.filterGroup}>
+        <label htmlFor="dateRange">Time Period:</label>
+        <select
+          id="dateRange"
+          value={dateRange}
+          onChange={(e) => {
+            onDateRangeChange(e.target.value as DateRangeFilter);
+          }}
+          className={styles.filterSelect}
+        >
+          <option value="1d">Last 24 Hours</option>
+          <option value="7d">Last 7 Days</option>
+          <option value="30d">Last 30 Days</option>
+          <option value="90d">Last 90 Days</option>
+          <option value="custom">Custom Range</option>
+        </select>
+      </div>
+
+      {dateRange === 'custom' && (
+        <div className={styles.customDateRange}>
+          <div className={styles.customDateInputs}>
+            <div className={styles.filterGroup}>
+              <label htmlFor="startDate">Start Date:</label>
+              <input
+                type="date"
+                id="startDate"
+                value={customStartDateInput}
+                onChange={(e) => onCustomStartDateInputChange(e.target.value)}
+                className={styles.filterInput}
+                max={customEndDateInput || new Date().toISOString().split('T')[0]}
+              />
+            </div>
+            <div className={styles.filterGroup}>
+              <label htmlFor="endDate">End Date:</label>
+              <input
+                type="date"
+                id="endDate"
+                value={customEndDateInput}
+                onChange={(e) => onCustomEndDateInputChange(e.target.value)}
+                className={styles.filterInput}
+                min={customStartDateInput}
+                max={new Date().toISOString().split('T')[0]}
+              />
+            </div>
+            <div className={styles.dateRangeButtons}>
+              {(customStartDateInput || customEndDateInput) && (
+                <button
+                  type="button"
+                  onClick={onApplyCustomDateRange}
+                  className={styles.filterButton}
+                  title="Apply custom date range"
+                >
+                  Apply Dates
+                </button>
+              )}
+              {(customStartDate || customEndDate) && (
+                <button
+                  type="button"
+                  onClick={onClearCustomDateRange}
+                  className={styles.clearButton}
+                  title="Clear custom date range"
+                >
+                  Clear Dates
+                </button>
+              )}
+            </div>
+          </div>
+          {(customStartDate || customEndDate) && (
+            <div className={styles.activeFilter}>
+              <small>
+                Custom range:
+                {customStartDate && <strong> from {new Date(customStartDate).toLocaleDateString()}</strong>}
+                {customEndDate && <strong> to {new Date(customEndDate).toLocaleDateString()}</strong>}
+              </small>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className={styles.filterGroup}>
+        <label htmlFor="caseFilter">Case Number:</label>
+        <div className={styles.inputWithButton}>
+          <input
+            type="text"
+            id="caseFilter"
+            value={caseNumberInput}
+            onChange={(e) => onCaseNumberInputChange(e.target.value)}
+            className={styles.filterInput}
+            placeholder="Enter case number..."
+            disabled={!!caseNumber}
+            title={
+              caseNumber
+                ? 'Case filter disabled - viewing specific case'
+                : 'Enter complete case number and click Filter'
+            }
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && caseNumberInput.trim() && !caseNumber) {
+                onApplyCaseFilter();
+              }
+            }}
+          />
+          {!caseNumber && (
+            <div className={styles.caseFilterButtons}>
+              {caseNumberInput.trim() && (
+                <button
+                  type="button"
+                  onClick={onApplyCaseFilter}
+                  className={styles.filterButton}
+                  title="Apply case filter"
+                >
+                  Filter
+                </button>
+              )}
+              {filterCaseNumber && (
+                <button
+                  type="button"
+                  onClick={onClearCaseFilter}
+                  className={styles.clearButton}
+                  title="Clear case filter"
+                >
+                  Clear
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+        {filterCaseNumber && !caseNumber && (
+          <div className={styles.activeFilter}>
+            <small>
+              Filtering by case: <strong>{filterCaseNumber}</strong>
+            </small>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.filterGroup}>
+        <label htmlFor="badgeFilter">Badge/ID #:</label>
+        <div className={styles.inputWithButton}>
+          <input
+            type="text"
+            id="badgeFilter"
+            value={badgeIdInput}
+            onChange={(e) => onBadgeIdInputChange(e.target.value)}
+            className={styles.filterInput}
+            placeholder="Enter badge/id #..."
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && badgeIdInput.trim()) {
+                onApplyBadgeFilter();
+              }
+            }}
+          />
+          <div className={styles.caseFilterButtons}>
+            {badgeIdInput.trim() && (
+              <button
+                type="button"
+                onClick={onApplyBadgeFilter}
+                className={styles.filterButton}
+                title="Apply badge filter"
+              >
+                Filter
+              </button>
+            )}
+            {filterBadgeId && (
+              <button
+                type="button"
+                onClick={onClearBadgeFilter}
+                className={styles.clearButton}
+                title="Clear badge filter"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+        </div>
+        {filterBadgeId && (
+          <div className={styles.activeFilter}>
+            <small>
+              Filtering by Badge/ID: <strong>{filterBadgeId}</strong>
+            </small>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.filterGroup}>
+        <label htmlFor="actionFilter">Activity Type:</label>
+        <select
+          id="actionFilter"
+          value={filterAction}
+          onChange={(e) => onFilterActionChange(e.target.value as AuditAction | 'all')}
+          className={styles.filterSelect}
+        >
+          <option value="all">All Activities</option>
+          <optgroup label="User Sessions">
+            <option value="user-login">Login</option>
+            <option value="user-logout">Logout</option>
+          </optgroup>
+          <optgroup label="Case Management">
+            <option value="case-create">Case Create</option>
+            <option value="case-rename">Case Rename</option>
+            <option value="case-delete">Case Delete</option>
+            <option value="case-export">Case Export</option>
+            <option value="case-import">Case Import</option>
+          </optgroup>
+          <optgroup label="File Operations">
+            <option value="file-upload">File Upload</option>
+            <option value="file-access">File Access</option>
+            <option value="file-delete">File Delete</option>
+          </optgroup>
+          <optgroup label="Annotations">
+            <option value="annotation-create">Annotation Create</option>
+            <option value="annotation-edit">Annotation Edit</option>
+            <option value="annotation-delete">Annotation Delete</option>
+          </optgroup>
+          <optgroup label="Confirmation Activity">
+            <option value="confirmation-create">Confirmation Create</option>
+            <option value="confirmation-export">Confirmation Export</option>
+            <option value="confirmation-import">Confirmation Import</option>
+          </optgroup>
+          <optgroup label="Documents">
+            <option value="pdf-generate">PDF Generate</option>
+          </optgroup>
+          <optgroup label="Security">
+            <option value="security-violation">Security Violation</option>
+          </optgroup>
+        </select>
+      </div>
+
+      <div className={styles.filterGroup}>
+        <label htmlFor="resultFilter">Result:</label>
+        <select
+          id="resultFilter"
+          value={filterResult}
+          onChange={(e) => onFilterResultChange(e.target.value as AuditResult | 'all')}
+          className={styles.filterSelect}
+        >
+          <option value="all">All Results</option>
+          <option value="success">Success</option>
+          <option value="failure">Failure</option>
+          <option value="warning">Warning</option>
+          <option value="blocked">Blocked</option>
+        </select>
+      </div>
+    </div>
+  );
+};

package/app/components/audit/viewer/audit-user-info-card.tsx

@@ -0,0 +1,44 @@
+import type { User } from 'firebase/auth';
+import type { UserData } from '~/types';
+import styles from '../user-audit.module.css';
+
+interface AuditUserInfoCardProps {
+  user: User;
+  userData: UserData | null;
+  userBadgeId: string;
+}
+
+export const AuditUserInfoCard = ({
+  user,
+  userData,
+  userBadgeId,
+}: AuditUserInfoCardProps) => {
+  return (
+    <div className={styles.summary}>
+      <h3>User Information</h3>
+      <div className={styles.userInfoContent}>
+        <div className={styles.userInfoItem}>
+          Name:{' '}
+          <strong>
+            {userData ? `${userData.firstName} ${userData.lastName}` : user.displayName || 'Not provided'}
+          </strong>
+        </div>
+        <div className={styles.userInfoItem}>
+          Email: <strong>{user.email || 'Not provided'}</strong>
+        </div>
+        <div className={styles.userInfoItem}>
+          Lab/Company: <strong>{userData?.company || 'Not provided'}</strong>
+        </div>
+        <div className={styles.userInfoItem}>
+          Badge/ID #:{' '}
+          <span className={`${styles.badgeTag} ${!userBadgeId ? styles.badgeTagMuted : ''}`}>
+            {userBadgeId || 'Not provided'}
+          </span>
+        </div>
+        <div className={styles.userInfoItem}>
+          User ID: <strong>{user.uid}</strong>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/audit/viewer/audit-viewer-header.tsx

@@ -0,0 +1,55 @@
+import styles from '../user-audit.module.css';
+
+interface AuditViewerHeaderProps {
+  title: string;
+  hasEntries: boolean;
+  onExportCSV: () => void;
+  onExportJSON: () => void;
+  onGenerateReport: () => void;
+  onClose: () => void;
+}
+
+export const AuditViewerHeader = ({
+  title,
+  hasEntries,
+  onExportCSV,
+  onExportJSON,
+  onGenerateReport,
+  onClose,
+}: AuditViewerHeaderProps) => {
+  return (
+    <div className={styles.header}>
+      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.headerActions}>
+        {hasEntries && (
+          <div className={styles.exportButtons}>
+            <button
+              onClick={onExportCSV}
+              className={styles.exportButton}
+              title="CSV - Individual entry log with summary data"
+            >
+              📊 CSV
+            </button>
+            <button
+              onClick={onExportJSON}
+              className={styles.exportButton}
+              title="JSON - Complete log data for version capture and auditing"
+            >
+              📄 JSON
+            </button>
+            <button
+              onClick={onGenerateReport}
+              className={styles.exportButton}
+              title="Summary report only"
+            >
+              📋 Report
+            </button>
+          </div>
+        )}
+        <button className={styles.closeButton} onClick={onClose}>
+          ×
+        </button>
+      </div>
+    </div>
+  );
+};