NeoScan_Radiologist/app/modules/Dashboard/components/CriticalAlerts.tsx

/*
 * File: CriticalAlerts.tsx
 * Description: Critical alerts component displaying emergency notifications
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from 'react-native';
import { theme } from '../../../theme/theme';
import { Alert } from '../../../shared/types/alerts';

interface CriticalAlertsProps {
  alerts: Alert[];
  onAlertPress: (alert: Alert) => void;
}

export const CriticalAlerts: React.FC<CriticalAlertsProps> = ({
  alerts,
  onAlertPress,
}) => {
  if (alerts.length === 0) {
    return null;
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>🚨 Critical Alerts</Text>
        <Text style={styles.count}>{alerts.length}</Text>
      </View>
      
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.scrollContainer}
      >
        {alerts.map((alert) => (
          <TouchableOpacity
            key={alert.id}
            style={styles.alertCard}
            onPress={() => onAlertPress(alert)}
            activeOpacity={0.7}
          >
            <View style={styles.alertHeader}>
              <Text style={styles.alertType}>{alert.type.replace('_', ' ')}</Text>
              <Text style={styles.alertTime}>
                {new Date(alert.timestamp).toLocaleTimeString()}
              </Text>
            </View>
            
            <Text style={styles.alertTitle}>{alert.title}</Text>
            <Text style={styles.alertMessage} numberOfLines={2}>
              {alert.message}
            </Text>
            
            {alert.patientName && (
              <View style={styles.patientInfo}>
                <Text style={styles.patientName}>{alert.patientName}</Text>
                {alert.bedNumber && (
                  <Text style={styles.bedNumber}>Bed {alert.bedNumber}</Text>
                )}
              </View>
            )}
            
            {alert.actionRequired && (
              <View style={styles.actionRequired}>
                <Text style={styles.actionText}>Action Required</Text>
              </View>
            )}
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: theme.colors.criticalBackground,
    borderColor: theme.colors.critical,
    borderWidth: 1,
    borderRadius: theme.borderRadius.large,
    padding: theme.spacing.md,
    marginBottom: theme.spacing.lg,
    ...theme.shadows.critical,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing.md,
  },
  title: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.critical,
  },
  count: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.critical,
    backgroundColor: theme.colors.background,
    paddingHorizontal: theme.spacing.sm,
    paddingVertical: theme.spacing.xs,
    borderRadius: theme.borderRadius.small,
  },
  scrollContainer: {
    paddingRight: theme.spacing.md,
  },
  alertCard: {
    backgroundColor: theme.colors.background,
    borderRadius: theme.borderRadius.medium,
    padding: theme.spacing.md,
    marginRight: theme.spacing.md,
    minWidth: 280,
    ...theme.shadows.small,
  },
  alertHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing.sm,
  },
  alertType: {
    fontSize: theme.typography.fontSize.bodySmall,
    color: theme.colors.critical,
    textTransform: 'uppercase',
  },
  alertTime: {
    fontSize: theme.typography.fontSize.caption,
    color: theme.colors.textMuted,
  },
  alertTitle: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.xs,
  },
  alertMessage: {
    fontSize: theme.typography.fontSize.bodyMedium,
    color: theme.colors.textSecondary,
    marginBottom: theme.spacing.sm,
    lineHeight: theme.typography.lineHeight.normal * theme.typography.fontSize.bodyMedium,
  },
  patientInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing.sm,
  },
  patientName: {
    fontSize: theme.typography.fontSize.bodyMedium,
    color: theme.colors.textPrimary,
  },
  bedNumber: {
    fontSize: theme.typography.fontSize.bodySmall,
    color: theme.colors.textSecondary,
    backgroundColor: theme.colors.backgroundAccent,
    paddingHorizontal: theme.spacing.sm,
    paddingVertical: theme.spacing.xs,
    borderRadius: theme.borderRadius.small,
  },
  actionRequired: {
    backgroundColor: theme.colors.critical,
    borderRadius: theme.borderRadius.small,
    paddingHorizontal: theme.spacing.sm,
    paddingVertical: theme.spacing.xs,
    alignSelf: 'flex-start',
  },
  actionText: {
    fontSize: theme.typography.fontSize.caption,
    color: theme.colors.background,
    textTransform: 'uppercase',
  },
}); 

/*
 * End of File: CriticalAlerts.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */