@striae-org/striae 5.4.5 → 5.5.1

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

@@ -1,6 +1,8 @@
-import { useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import { exportAuditPDF } from '~/components/actions/export-audit-pdf';
+import { Toast, type ToastType } from '~/components/toast/toast';
 import { AuditViewerHeader } from './viewer/audit-viewer-header';
 import { AuditUserInfoCard } from './viewer/audit-user-info-card';
 import { AuditActivitySummary } from './viewer/audit-activity-summary';
@@ -20,6 +22,12 @@ interface UserAuditViewerProps {
 
 export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAuditViewerProps) => {
   const { user } = useContext(AuthContext);
+  const [isExportingPdf, setIsExportingPdf] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  const [toastType, setToastType] = useState<ToastType>('success');
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastDuration, setToastDuration] = useState(4000);
+
   const {
     filterAction,
     setFilterAction,
@@ -79,107 +87,157 @@ export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAudi
   });
 
   const userBadgeId = userData?.badgeId?.trim() || '';
+  const isCaseScopedViewer = Boolean(effectiveCaseNumber?.trim());
+
+  const handleExportPdf = useCallback(async () => {
+    if (!user || !effectiveCaseNumber || isExportingPdf) {
+      return;
+    }
+
+    const displayName = user.displayName?.trim() || '';
+    const [firstFromDisplayName, ...lastFromDisplayNameParts] = displayName.split(/\s+/).filter(Boolean);
+
+    await exportAuditPDF({
+      user,
+      caseNumber: effectiveCaseNumber,
+      userCompany: userData?.company,
+      userFirstName: firstFromDisplayName || userData?.firstName || '',
+      userLastName: lastFromDisplayNameParts.join(' ') || userData?.lastName || '',
+      userBadgeId,
+      setIsExportingPDF: setIsExportingPdf,
+      setToastType,
+      setToastMessage,
+      setShowToast,
+      setToastDuration
+    });
+  }, [
+    effectiveCaseNumber,
+    isExportingPdf,
+    user,
+    userBadgeId,
+    userData?.company,
+    userData?.firstName,
+    userData?.lastName
+  ]);
 
   if (!isOpen) return null;
 
   return (
-    <div
-      className={styles.overlay}
-      aria-label="Close audit trail dialog"
-      {...overlayProps}
-    >
-      <div className={styles.modal}>
-        <AuditViewerHeader
-          title={title || (effectiveCaseNumber ? `Audit Trail - Case ${effectiveCaseNumber}` : 'My Audit Trail')}
-          onClose={requestClose}
-        />
-
-        <div className={styles.content}>
-          {loading && (
-            <div className={styles.loading}>
-              <div className={styles.spinner}></div>
-              <p>Loading your audit trail...this may take a while for longer time ranges</p>
-            </div>
-          )}
-
-          {error && (
-            <div className={styles.error}>
-              <p>Error: {error}</p>
-              <button onClick={loadAuditData} className={styles.retryButton}>
-                Retry
-              </button>
-            </div>
-          )}
-
-          {!loading && !error && (
-            <>
-              {isArchivedReadOnlyCase && (
-                <div className={bundledAuditWarning ? styles.archivedWarning : styles.archivedNotice}>
-                  <p>
-                    {bundledAuditWarning || 'Viewing bundled audit trail data from this imported archived case package.'}
-                  </p>
-                </div>
-              )}
-
-              {/* User Information Section */}
-              {user && (
-                <AuditUserInfoCard user={user} userData={userData} userBadgeId={userBadgeId} />
-              )}
-
-              {/* Summary Section */}
-              <AuditActivitySummary
-                caseNumber={caseNumber}
-                filterCaseNumber={filterCaseNumber}
-                dateRangeDisplay={dateRangeDisplay}
-                summary={auditSummary}
-              />
-
-              {/* Filters */}
-              <AuditFiltersPanel
-                dateRange={dateRange}
-                customStartDate={customStartDate}
-                customEndDate={customEndDate}
-                customStartDateInput={customStartDateInput}
-                customEndDateInput={customEndDateInput}
-                caseNumber={caseNumber}
-                filterCaseNumber={filterCaseNumber}
-                caseNumberInput={caseNumberInput}
-                filterBadgeId={filterBadgeId}
-                badgeIdInput={badgeIdInput}
-                filterAction={filterAction}
-                filterResult={filterResult}
-                onDateRangeChange={handleDateRangeChange}
-                onCustomStartDateInputChange={setCustomStartDateInput}
-                onCustomEndDateInputChange={setCustomEndDateInput}
-                onApplyCustomDateRange={handleApplyCustomDateRange}
-                onClearCustomDateRange={handleClearCustomDateRange}
-                onCaseNumberInputChange={setCaseNumberInput}
-                onApplyCaseFilter={handleApplyCaseFilter}
-                onClearCaseFilter={handleClearCaseFilter}
-                onBadgeIdInputChange={setBadgeIdInput}
-                onApplyBadgeFilter={handleApplyBadgeFilter}
-                onClearBadgeFilter={handleClearBadgeFilter}
-                onFilterActionChange={setFilterAction}
-                onFilterResultChange={setFilterResult}
-              />
-
-              {/* Entries List */}
-              <AuditEntriesList entries={filteredEntries} />
-
-            </>
-          )}
-
-          {auditEntries.length === 0 && !loading && !error && (
-            <div className={styles.noData}>
-              <p>
-                {isArchivedReadOnlyCase
-                  ? 'No bundled audit trail entries are available for this imported archived case.'
-                  : 'No audit trail available. Your activities will appear here as you use Striae.'}
-              </p>
-            </div>
-          )}
+    <>
+      <Toast
+        message={toastMessage}
+        type={toastType}
+        isVisible={showToast}
+        onClose={() => setShowToast(false)}
+        duration={toastDuration}
+      />
+      <div
+        className={styles.overlay}
+        aria-label="Close audit trail dialog"
+        {...overlayProps}
+      >
+        <div className={styles.modal}>
+          <AuditViewerHeader
+            title={title || (effectiveCaseNumber ? `Audit Trail - Case ${effectiveCaseNumber}` : 'My Audit Trail')}
+            onClose={requestClose}
+            onExportPdf={isCaseScopedViewer ? () => void handleExportPdf() : undefined}
+            canExportPdf={isCaseScopedViewer && auditEntries.length > 0 && !loading && !error}
+            isExportingPdf={isExportingPdf}
+          />
+
+          <div className={styles.content}>
+            {loading && (
+              <div className={styles.loading}>
+                <div className={styles.spinner}></div>
+                <p>Loading your audit trail...this may take a while for longer time ranges</p>
+              </div>
+            )}
+
+            {error && (
+              <div className={styles.error}>
+                <p>Error: {error}</p>
+                <button onClick={loadAuditData} className={styles.retryButton}>
+                  Retry
+                </button>
+              </div>
+            )}
+
+            {!loading && !error && (
+              <>
+                {isArchivedReadOnlyCase && (
+                  <div className={bundledAuditWarning ? styles.archivedWarning : styles.archivedNotice}>
+                    <p>
+                      {bundledAuditWarning || 'Viewing bundled audit trail data from this imported archived case package.'}
+                    </p>
+                  </div>
+                )}
+
+                {/* User Information Section */}
+                {user && (
+                  <AuditUserInfoCard user={user} userData={userData} userBadgeId={userBadgeId} />
+                )}
+
+                {/* Summary Section */}
+                <AuditActivitySummary
+                  caseNumber={caseNumber}
+                  filterCaseNumber={filterCaseNumber}
+                  dateRangeDisplay={dateRangeDisplay}
+                  summary={auditSummary}
+                />
+
+                {isCaseScopedViewer && (
+                  <div className={styles.exportScopeNote}>
+                    Export PDF always includes full case history from case creation through now, regardless of current filters.
+                  </div>
+                )}
+
+                {/* Filters */}
+                <AuditFiltersPanel
+                  dateRange={dateRange}
+                  customStartDate={customStartDate}
+                  customEndDate={customEndDate}
+                  customStartDateInput={customStartDateInput}
+                  customEndDateInput={customEndDateInput}
+                  caseNumber={caseNumber}
+                  filterCaseNumber={filterCaseNumber}
+                  caseNumberInput={caseNumberInput}
+                  filterBadgeId={filterBadgeId}
+                  badgeIdInput={badgeIdInput}
+                  filterAction={filterAction}
+                  filterResult={filterResult}
+                  onDateRangeChange={handleDateRangeChange}
+                  onCustomStartDateInputChange={setCustomStartDateInput}
+                  onCustomEndDateInputChange={setCustomEndDateInput}
+                  onApplyCustomDateRange={handleApplyCustomDateRange}
+                  onClearCustomDateRange={handleClearCustomDateRange}
+                  onCaseNumberInputChange={setCaseNumberInput}
+                  onApplyCaseFilter={handleApplyCaseFilter}
+                  onClearCaseFilter={handleClearCaseFilter}
+                  onBadgeIdInputChange={setBadgeIdInput}
+                  onApplyBadgeFilter={handleApplyBadgeFilter}
+                  onClearBadgeFilter={handleClearBadgeFilter}
+                  onFilterActionChange={setFilterAction}
+                  onFilterResultChange={setFilterResult}
+                />
+
+                {/* Entries List */}
+                <AuditEntriesList entries={filteredEntries} />
+
+              </>
+            )}
+
+            {auditEntries.length === 0 && !loading && !error && (
+              <div className={styles.noData}>
+                <p>
+                  {isArchivedReadOnlyCase
+                    ? 'No bundled audit trail entries are available for this imported archived case.'
+                    : 'No audit trail available. Your activities will appear here as you use Striae.'}
+                </p>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };

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

@@ -72,6 +72,12 @@
   transform: translateY(0);
 }
 
+.exportButton:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
 .title {
   margin: 0;
   color: var(--textTitle);
@@ -178,6 +184,17 @@
   border: 1px solid color-mix(in lab, var(--textLight) 20%, transparent);
 }
 
+.exportScopeNote {
+  margin: -12px 0 16px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  border: 1px solid color-mix(in lab, var(--primary) 30%, transparent);
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  color: var(--textBody);
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
 /* Common heading styles */
 .summary h3,
 .entriesList h3 {

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

@@ -3,16 +3,32 @@ import styles from '../user-audit.module.css';
 interface AuditViewerHeaderProps {
   title: string;
   onClose: () => void;
+  onExportPdf?: () => void;
+  canExportPdf?: boolean;
+  isExportingPdf?: boolean;
 }
 
 export const AuditViewerHeader = ({
   title,
   onClose,
+  onExportPdf,
+  canExportPdf = false,
+  isExportingPdf = false,
 }: AuditViewerHeaderProps) => {
   return (
     <div className={styles.header}>
       <h2 className={styles.title}>{title}</h2>
       <div className={styles.headerActions}>
+        {onExportPdf && (
+          <button
+            type="button"
+            className={styles.exportButton}
+            onClick={onExportPdf}
+            disabled={!canExportPdf || isExportingPdf}
+          >
+            {isExportingPdf ? 'Exporting PDF...' : 'Export PDF'}
+          </button>
+        )}
         <button className={styles.closeButton} onClick={onClose}>
           ×
         </button>

package/app/components/sidebar/notes/class-details/class-details-modal.tsx

@@ -118,10 +118,10 @@ const ClassDetailsModalContent = ({
             />
           )}
         </div>
-        <div className={styles.modalButtons}>
+        <div className={`${styles.modalButtons} ${styles.classDetailsModalButtons}`}>
           <button
             onClick={handleSave}
-            className={styles.saveButton}
+            className={`${styles.saveButton} ${styles.classDetailsModalAction}`}
             disabled={isSaving || isReadOnly}
             aria-busy={isSaving}
           >
@@ -129,7 +129,7 @@ const ClassDetailsModalContent = ({
           </button>
           <button
             onClick={requestClose}
-            className={styles.cancelButton}
+            className={`${styles.cancelButton} ${styles.classDetailsModalAction}`}
             disabled={isSaving}
           >
             Cancel