@striae-org/striae 3.0.4

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

@@ -0,0 +1,568 @@
+/* User Audit Trail Viewer Styles */
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.modal {
+  background: var(--background);
+  border-radius: 8px;
+  width: 90%;
+  max-width: 1000px;
+  max-height: 90vh;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid color-mix(in lab, var(--textLight) 20%, transparent);
+  background: var(--backgroundLight);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.exportButtons {
+  display: flex;
+  gap: 8px;
+}
+
+.exportButton {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.exportButton:hover {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--primary) 30%, transparent);
+}
+
+.exportButton:active {
+  transform: translateY(0);
+}
+
+.title {
+  margin: 0;
+  color: var(--textTitle);
+  font-size: 1.5rem;
+  font-weight: var(--fontWeightMedium);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 8px;
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+  border-radius: 4px;
+}
+
+.closeButton:hover {
+  color: var(--text);
+  background: color-mix(in lab, var(--textLight) 10%, transparent);
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Loading & Error States */
+.loading, .error {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--textBody);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid color-mix(in lab, var(--primary) 20%, transparent);
+  border-top: 3px solid var(--primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 16px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error {
+  color: var(--error);
+}
+
+.retryButton {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  margin-top: 12px;
+  transition: background-color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.retryButton:hover {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
+/* Summary Section */
+.summary {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--backgroundLight);
+  border-radius: 6px;
+  border: 1px solid color-mix(in lab, var(--textLight) 20%, transparent);
+}
+
+/* Common heading styles */
+.summary h3,
+.entriesList h3 {
+  margin: 0 0 16px 0;
+  color: var(--textTitle);
+  font-size: 1.2rem;
+}
+
+.summaryGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.summaryItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--background);
+  border-radius: 4px;
+  border: 1px solid color-mix(in lab, var(--textLight) 15%, transparent);
+}
+
+.label {
+  color: var(--textBody);
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.value {
+  color: var(--text);
+  font-weight: var(--fontWeightMedium);
+  font-size: 0.9rem;
+}
+
+.value.warning {
+  color: var(--error);
+  font-weight: var(--fontWeightBold);
+}
+
+.warning {
+  color: var(--error);
+  font-weight: var(--fontWeightBold);
+}
+
+/* Standalone classes for dynamic assignment */
+.success {
+  border-color: color-mix(in lab, var(--success) 40%, transparent);
+  background: color-mix(in lab, var(--success) 3%, transparent);
+}
+
+.failure {
+  border-color: color-mix(in lab, var(--error) 40%, transparent);
+  background: color-mix(in lab, var(--error) 3%, transparent);
+}
+
+.blocked {
+  border-color: color-mix(in lab, var(--error) 60%, transparent);
+  background: color-mix(in lab, var(--error) 5%, transparent);
+}
+
+.low {
+  background: color-mix(in lab, var(--success) 15%, transparent);
+  color: var(--success);
+}
+
+.medium {
+  background: color-mix(in lab, var(--warning) 15%, transparent);
+  color: var(--warning);
+}
+
+.high {
+  background: color-mix(in lab, var(--error) 15%, transparent);
+  color: var(--error);
+}
+
+.critical {
+  background: color-mix(in lab, var(--error) 25%, transparent);
+  color: var(--error);
+  font-weight: var(--fontWeightBold);
+}
+
+/* User Information Section */
+.userInfoContent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.userInfoItem {
+  color: var(--textBody);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.userInfoItem strong {
+  color: var(--text);
+  font-weight: var(--fontWeightMedium);
+}
+
+/* Filters */
+.filters {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 24px;
+  padding: 16px;
+  background: color-mix(in lab, var(--backgroundLight) 50%, transparent);
+  border-radius: 6px;
+  border: 1px solid color-mix(in lab, var(--textLight) 15%, transparent);
+}
+
+.filterGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 140px;
+}
+
+.filterGroup label {
+  font-size: 0.85rem;
+  color: var(--textBody);
+  font-weight: 500;
+}
+
+.filterSelect {
+  padding: 6px 8px;
+  border: 1px solid color-mix(in lab, var(--textLight) 30%, transparent);
+  border-radius: 4px;
+  background: var(--background);
+  color: var(--text);
+  font-size: 0.9rem;
+  min-width: 120px;
+}
+
+.customDateRange {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 0 8px 0;
+  border-top: 1px solid color-mix(in lab, var(--textLight) 20%, transparent);
+  margin-top: 8px;
+}
+
+.customDateInputs {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.filterInput {
+  padding: 6px 8px;
+  border: 1px solid color-mix(in lab, var(--textLight) 30%, transparent);
+  border-radius: 4px;
+  background: var(--background);
+  color: var(--text);
+  font-size: 0.9rem;
+  min-width: 140px;
+  font-family: inherit;
+  flex: 1;
+}
+
+.filterInput:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 20%, transparent);
+}
+
+.filterInput:disabled {
+  background: color-mix(in lab, var(--background) 95%, var(--text));
+  color: color-mix(in lab, var(--text) 50%, transparent);
+  cursor: not-allowed;
+}
+
+.inputWithButton {
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex: 1;
+  gap: 8px;
+}
+
+.caseFilterButtons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.filterButton {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  white-space: nowrap;
+}
+
+.filterButton:hover {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--primary) 30%, transparent);
+}
+
+.filterButton:active {
+  transform: translateY(0);
+}
+
+.clearButton {
+  background: var(--error);
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  white-space: nowrap;
+}
+
+.clearButton:hover {
+  background: color-mix(in lab, var(--error) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--error) 30%, transparent);
+}
+
+.clearButton:active {
+  transform: translateY(0);
+}
+
+.activeFilter {
+  margin-top: 4px;
+  color: var(--textLight);
+  font-size: 0.875rem;
+}
+
+.activeFilter strong {
+  color: var(--primary);
+}
+
+.dateRangeButtons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid color-mix(in lab, var(--textLight) 20%, transparent);
+}
+
+/* Entries List */
+.entry {
+  margin-bottom: 12px;
+  border-radius: 6px;
+  border: 1px solid;
+  overflow: hidden;
+  transition: box-shadow var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.entry:hover {
+  box-shadow: 0 2px 8px color-mix(in lab, var(--textLight) 20%, transparent);
+}
+
+.entry.success {
+  border-color: color-mix(in lab, var(--success) 40%, transparent);
+  background: color-mix(in lab, var(--success) 3%, transparent);
+}
+
+.entry.failure {
+  border-color: color-mix(in lab, var(--error) 40%, transparent);
+  background: color-mix(in lab, var(--error) 3%, transparent);
+}
+
+.entry.warning {
+  border-color: color-mix(in lab, var(--warning) 40%, transparent);
+  background: color-mix(in lab, var(--warning) 3%, transparent);
+}
+
+.entry.blocked {
+  border-color: color-mix(in lab, var(--error) 60%, transparent);
+  background: color-mix(in lab, var(--error) 5%, transparent);
+}
+
+.entryHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: color-mix(in lab, var(--backgroundLight) 50%, transparent);
+  border-bottom: 1px solid color-mix(in lab, var(--textLight) 15%, transparent);
+}
+
+.entryIcons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.actionIcon {
+  font-size: 1rem;
+}
+
+.statusIcon {
+  font-size: 1rem;
+}
+
+.entryTitle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action {
+  background: var(--primary);
+  color: white;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+  font-weight: var(--fontWeightMedium);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.fileName {
+  color: var(--textBody);
+  font-size: 0.85rem;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.entryTimestamp {
+  color: var(--textLight);
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+/* Entry Details */
+.entryDetails {
+  padding: 12px 14px;
+}
+
+.detailRow {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  gap: 8px;
+}
+
+.detailRow:last-child {
+  margin-bottom: 0;
+}
+
+.detailLabel {
+  color: var(--textBody);
+  font-size: 0.85rem;
+  font-weight: 500;
+  min-width: max-content;
+  flex-shrink: 0;
+}
+
+.detailValue {
+  color: var(--text);
+  font-size: 0.85rem;
+  word-break: break-word;
+}
+
+.severity {
+  font-weight: var(--fontWeightMedium);
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+}
+
+.severity.low {
+  background: color-mix(in lab, var(--success) 15%, transparent);
+  color: var(--success);
+}
+
+.severity.medium {
+  background: color-mix(in lab, var(--warning) 15%, transparent);
+  color: var(--warning);
+}
+
+.severity.high {
+  background: color-mix(in lab, var(--error) 15%, transparent);
+  color: var(--error);
+}
+
+.severity.critical {
+  background: color-mix(in lab, var(--error) 25%, transparent);
+  color: var(--error);
+  font-weight: var(--fontWeightBold);
+}
+
+.noEntries {
+  text-align: center;
+  padding: 32px 16px;
+  color: var(--textLight);
+  font-style: italic;
+}
+
+.noData {
+  text-align: center;
+  padding: 32px 16px;
+  color: var(--textLight);
+  font-style: italic;
+}

package/app/components/auth/auth-provider.tsx

@@ -0,0 +1,78 @@
+import { User } from 'firebase/auth';
+import { useEffect, useState } from 'react';
+import { auth } from '~/services/firebase';
+import { useInactivityTimeout } from '~/hooks/useInactivityTimeout';
+import { INACTIVITY_CONFIG } from '~/config/inactivity';
+import { AuthContext } from '~/contexts/auth.context';
+import { InactivityWarning } from '~/components/user/inactivity-warning';
+import { auditService } from '~/services/audit.service';
+import { generateUniqueId } from '~/utils/id-generator';
+
+interface AuthProviderProps {
+  children: React.ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [showInactivityWarning, setShowInactivityWarning] = useState(false);
+  const [remainingSeconds, setRemainingSeconds] = useState(0);
+
+  const { extendSession } = useInactivityTimeout({
+    enabled: !!user,
+    onWarning: () => {
+      setRemainingSeconds(INACTIVITY_CONFIG.WARNING_MINUTES * 60);
+      setShowInactivityWarning(true);
+    },
+    onTimeout: () => {
+      setShowInactivityWarning(false);      
+    }
+  });
+
+  useEffect(() => {
+    return auth.onAuthStateChanged((user) => {
+      setUser(user);      
+      if (!user) {
+        setShowInactivityWarning(false);
+      }
+    });
+  }, []);
+
+  const handleExtendSession = () => {
+    setShowInactivityWarning(false);
+    extendSession();
+  };
+
+  const handleSignOutNow = async () => {
+    setShowInactivityWarning(false);
+    
+    // Log timeout logout audit before signing out
+    if (user) {
+      try {
+        const sessionId = `session_${user.uid}_timeout_${Date.now()}_${generateUniqueId(8)}`;
+        await auditService.logUserLogout(
+          user,
+          sessionId,
+          INACTIVITY_CONFIG.TIMEOUT_MINUTES * 60, // sessionDuration in seconds
+          'timeout'
+        );
+      } catch (auditError) {
+        console.error('Failed to log timeout logout audit:', auditError);
+        // Continue with logout even if audit logging fails
+      }
+    }
+    
+    auth.signOut();
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, setUser }}>
+      {children}
+      <InactivityWarning
+        isOpen={showInactivityWarning}
+        remainingSeconds={remainingSeconds}
+        onExtendSession={handleExtendSession}
+        onSignOut={handleSignOutNow}
+      />
+    </AuthContext.Provider>
+  );
+}