import React, { useEffect, useState, ReactElement } from 'react'; import Head from 'next/head' import { useRouter } from "next/router"; import { useAppDispatch, useAppSelector } from "../../stores/hooks"; import { fetch as fetchCase, update as updateCase } from '../../stores/cases/casesSlice'; import LayoutAuthenticated from "../../layouts/Authenticated"; import { getPageTitle } from "../../config"; import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton"; import SectionMain from "../../components/SectionMain"; import CardBox from "../../components/CardBox"; import BaseButton from "../../components/BaseButton"; import CardBoxModal from "../../components/CardBoxModal"; import FormField from "../../components/FormField"; import { Field, Form, Formik } from "formik"; import axios from "axios"; import { mdiChartTimelineVariant, mdiFormatListChecks, mdiFileDocument, mdiFileDocumentEdit, mdiNoteText, mdiHistory } from "@mdi/js"; import TableTasks from '../../components/Tasks/TableTasks'; import TableDocuments from '../../components/Documents/TableDocuments'; import TableAppealDrafts from '../../components/Appeal_drafts/TableAppeal_drafts'; import TableNotes from '../../components/Notes/TableNotes'; import TableActivityLogs from '../../components/Activity_logs/TableActivity_logs'; const CasesView = () => { const router = useRouter() const dispatch = useAppDispatch() const { cases, loading } = useAppSelector((state) => state.cases) const { currentUser } = useAppSelector((state) => state.auth); const [activeTab, setActiveTab] = useState('overview'); const [modalAction, setModalAction] = useState(null); const [actionLoading, setActionLoading] = useState(false); const handleActionSubmit = async (values) => { setActionLoading(true); try { if (modalAction === 'markWon') { await axios.put("/cases/${id}/mark-won", { data: { resolutionReason: values.reason } }); } else if (modalAction === 'markLost') { await axios.put("/cases/${id}/mark-lost", { data: { resolutionReason: values.reason } }); } else if (modalAction === 'reopen') { await axios.put("/cases/${id}/reopen", { data: { reopenReason: values.reason } }); } else if (modalAction === 'changeStatus') { await axios.put("/cases/${id}/change-status", { data: { status: values.status } }); } dispatch(fetchCase({ id })); setModalAction(null); } catch (e) { console.error(e); alert('Action failed: ' + (e.response?.data?.message || e.message)); } finally { setActionLoading(false); } }; const { id } = router.query; useEffect(() => { if (id) { dispatch(fetchCase({ id })); } }, [dispatch, id]); if (!cases || loading) return
Loading...
; const tabs = [ { id: 'overview', label: 'Overview', icon: mdiChartTimelineVariant }, { id: 'tasks', label: 'Tasks', icon: mdiFormatListChecks }, { id: 'documents', label: 'Documents', icon: mdiFileDocument }, { id: 'drafts', label: 'Appeal Drafts', icon: mdiFileDocumentEdit }, { id: 'notes', label: 'Notes', icon: mdiNoteText }, { id: 'activity', label: 'Activity', icon: mdiHistory }, ]; const generateFixedFilter = (field, value) => { return [{ id: 'fixed', fields: { selectedField: field, filterValue: value } }]; }; return ( <> {getPageTitle('Case Details')} setModalAction(null)} onConfirm={() => { const form = document.getElementById('action-form'); if (form) form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); }} >
{['markWon', 'markLost', 'reopen'].includes(modalAction) && ( )} {modalAction === 'changeStatus' && ( )}
{tabs.map(tab => ( setActiveTab(tab.id)} /> ))}
{activeTab === 'overview' && (

Command Actions

setModalAction('changeStatus')} /> setModalAction('markWon')} /> setModalAction('markLost')} /> {['won', 'lost'].includes(cases.status) && setModalAction('reopen')} />}
)} {activeTab === 'overview' && (

Patient Information

Patient Name: {cases.patient_name}
Patient DOB: {cases.patient_dob ? new Date(cases.patient_dob).toLocaleDateString() : ''}
Member ID: {cases.member_id}
Facility Name: {cases.facility_name}
Ordering Provider: {cases.ordering_provider}

Case Details

Status: {cases.status}
Priority: {cases.priority}
Outcome: {cases.outcome}
Amount at Risk: ${cases.amount_at_risk}
Procedure Code: {cases.procedure_code}
Diagnosis Code: {cases.diagnosis_code}
Denial Reason Code: {cases.denial_reason_code}
Denial Reason: {cases.denial_reason}
Payer: {cases.payer?.name}
Owner: {cases.owner_user?.firstName} {cases.owner_user?.lastName}
Due At: {cases.due_at ? new Date(cases.due_at).toLocaleString() : ''}
)} {activeTab === 'tasks' && (
null} filters={[{title: 'case'}]} showGrid={true} /> )} {activeTab === 'documents' && (
null} filters={[{title: 'case'}]} showGrid={true} /> )} {activeTab === 'drafts' && (
null} filters={[{title: 'case'}]} showGrid={true} /> )} {activeTab === 'notes' && (
null} filters={[{title: 'case'}]} showGrid={true} /> )} {activeTab === 'activity' && ( null} filters={[{title: 'case'}]} showGrid={true} /> )} ) } CasesView.getLayout = function getLayout(page: ReactElement) { return ( {page} ) } export default CasesView;