NeoScan_Physician/app/modules/Dashboard/screens/DashboardScreen.tsx

/*
 * File: DashboardScreen.tsx
 * Description: Main dashboard screen with a custom header and themed components.
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { Button } from '../../../../shared/src/components/Button';
import { Card, InfoCard } from '../../../../shared/src/components/Card';
import { TextInput, SearchInput } from '../../../../shared/src/components/Input';
import { Modal, ConfirmModal, AlertModal } from '../../../../shared/src/components/Modal';
import { Spinner, LoadingOverlay } from '../../../../shared/src/components/Loading';
import { CustomIcon, IconButton } from '../../../../shared/src/components/Icons';
import { CustomHeader } from '../../../../shared/src/components/Header'; // Import CustomHeader
import { Colors, Spacing, Typography } from '../../../../shared/src/theme';

/**
 * DashboardScreen - The primary landing screen after login, featuring a custom header,
 * case summaries, and navigation to other parts of the app.
 */
const DashboardScreen: React.FC<{ navigation: any }> = ({ navigation }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [confirmVisible, setConfirmVisible] = useState(false);
  const [alertVisible, setAlertVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState('');
  const [input, setInput] = useState('');

  return (
    <View style={styles.container}>
      <CustomHeader
        title="Dashboard"
        showBackButton={false}
      />
      <ScrollView contentContainerStyle={styles.content}>
        <SearchInput
          placeholder="Search cases..."
          value={search}
          onChangeText={setSearch}
          containerStyle={styles.search}
        />
        <InfoCard>
          <Text style={styles.infoTitle}>Welcome, Dr. Smith</Text>
          <Text style={styles.infoText}>
            On-Call Status: <Text style={styles.active}>ACTIVE</Text>
          </Text>
        </InfoCard>
        <Card>
          <Text style={styles.cardTitle}>Critical Cases</Text>
          <View style={styles.row}>
            <CustomIcon name="alert" color={Colors.error} size={24} />
            <Text style={styles.criticalText}>Bed 3 - Hemorrhage (93% AI)</Text>
            <Button
              title="Review Now"
              onPress={() => setModalVisible(true)}
              style={styles.button}
            />
          </View>
        </Card>
        <Card>
          <Text style={styles.cardTitle}>Routine Cases</Text>
          <View style={styles.row}>
            <CustomIcon name="check-circle" color={Colors.success} size={24} />
            <Text style={styles.routineText}>Bed 12 - Headache (99% AI)</Text>
            <IconButton
              name="chevron-right"
              onPress={() => setConfirmVisible(true)}
            />
          </View>
        </Card>
        <TextInput
          placeholder="Add note..."
          value={input}
          onChangeText={setInput}
          style={styles.input}
        />
        <Button
          title="Show Alert"
          onPress={() => setAlertVisible(true)}
          style={styles.button}
        />
        <Button
          title={loading ? 'Loading...' : 'Show Loading Overlay'}
          onPress={() => setLoading(true)}
          style={styles.button}
        />
        {/* <Spinner style={styles.spinner} /> */}
        {/* Modals */}
        <Modal
          visible={modalVisible}
          onRequestClose={() => setModalVisible(false)}>
          <Text style={styles.modalTitle}>Critical Case Details</Text>
          <Text>Patient: John Doe, 45M</Text>
          <Button
            title="Close"
            onPress={() => setModalVisible(false)}
            style={styles.button}
          />
        </Modal>
        <ConfirmModal
          visible={confirmVisible}
          title="Confirm Action"
          message="Are you sure you want to proceed?"
          onConfirm={() => {
            setConfirmVisible(false);
          }}
          onCancel={() => setConfirmVisible(false)}
        />
        <AlertModal
          visible={alertVisible}
          title="Critical Alert"
          message="Acute Subdural Hemorrhage detected!"
          iconName="alert-circle"
          iconColor={Colors.error}
          onDismiss={() => setAlertVisible(false)}
        />
        <LoadingOverlay visible={loading} />
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background,
  },
  content: {
    padding: Spacing.lg,
  },
  search: {
    marginBottom: Spacing.md,
  },
  infoTitle: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.lg,
    color: Colors.textPrimary,
    marginBottom: Spacing.xs,
  },
  infoText: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
    color: Colors.textSecondary,
  },
  active: {
    color: Colors.success,
    fontWeight: 'bold',
  },
  cardTitle: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.md,
    color: Colors.textPrimary,
    marginBottom: Spacing.sm,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: Spacing.sm,
  },
  criticalText: {
    color: Colors.error,
    flex: 1,
    marginLeft: Spacing.sm,
    fontFamily: Typography.fontFamily.regular,
  },
  routineText: {
    color: Colors.success,
    flex: 1,
    marginLeft: Spacing.sm,
    fontFamily: Typography.fontFamily.regular,
  },
  button: {
    marginLeft: Spacing.sm,
  },
  input: {
    marginVertical: Spacing.md,
  },
  spinner: {
    marginVertical: Spacing.md,
  },
  modalTitle: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.lg,
    color: Colors.primary,
    marginBottom: Spacing.md,
    textAlign: 'center',
  },
});

export default DashboardScreen;

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