735 lines
39 KiB
JavaScript
735 lines
39 KiB
JavaScript
import React, {useState, useEffect} from "react";
|
|
import { PencilSquare } from "react-bootstrap-icons";
|
|
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
|
import { AuthService, CustomerService } from "../../services";
|
|
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
|
|
import {
|
|
CUSTOMER_TYPE_TEXT,
|
|
PROGRAM_TYPE_TEXT,
|
|
PAY_SOURCE_TEXT,
|
|
LEGAL_SEX_TEXT,
|
|
MARITAL_STATUS_TEXT,
|
|
IMMIGRATION_STATUS_TEXT,
|
|
LANGUAGE_OPTIONS,
|
|
STATE_OPTIONS_TEXT,
|
|
EMERGENCY_CONTACT_RELATIONSHIP_TEXT,
|
|
EMERGENCY_CONTACT_ROLE_OPTIONS,
|
|
DAYS_OF_WEEK_OPTIONS,
|
|
REFERRAL_SOURCE_TEXT,
|
|
CUSTOMER_DISCHARGE_REASON_TEXT,
|
|
DIETARY_RESTRICTIONS_OPTIONS,
|
|
DIET_TEXTURE_TEXT,
|
|
TRANSPORTATION_TYPE_TEXT,
|
|
YES_NO_TEXT,
|
|
PREFERRED_TEXT_LANGUAGE_TEXT
|
|
} from "../../shared";
|
|
|
|
const ViewCustomer = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const urlParams = useParams();
|
|
const [searchParams] = useSearchParams();
|
|
const [currentCustomer, setCurrentCustomer] = useState(undefined);
|
|
const [currentAvatar, setCurrentAvatar] = useState(undefined);
|
|
const [activeTab, setActiveTab] = useState(searchParams.get('tab') || 'personalInfo');
|
|
|
|
|
|
const redirectTo = () => {
|
|
navigate(`/customers/list`)
|
|
}
|
|
|
|
const goToEdit = (id) => {
|
|
navigate(`/customers/edit/${id}?tab=${activeTab}`)
|
|
}
|
|
|
|
// Check if customer is active
|
|
const isCustomerActive = () => {
|
|
return currentCustomer?.status === 'active' &&
|
|
currentCustomer?.type !== 'discharged' &&
|
|
currentCustomer?.type !== 'transferred' &&
|
|
currentCustomer?.type !== 'deceased';
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!AuthService.canViewCustomers()) {
|
|
window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
|
|
AuthService.logout();
|
|
navigate(`/login`);
|
|
}
|
|
if (!currentCustomer) {
|
|
CustomerService.getCustomer(urlParams.id).then((data) => {
|
|
setCurrentCustomer(data.data);
|
|
})
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (currentCustomer?.id ) {
|
|
CustomerService.getAvatar(currentCustomer?.id).then((data) => {
|
|
setCurrentAvatar(data.data);
|
|
})
|
|
}
|
|
}, [currentCustomer]);
|
|
|
|
// Helper to convert array values to display text
|
|
const formatArrayToDisplay = (values, optionsList) => {
|
|
if (!values || !Array.isArray(values) || values.length === 0) return '';
|
|
return values.map(val => {
|
|
const found = optionsList.find(opt => opt.value === val);
|
|
return found ? found.label : val;
|
|
}).join(', ');
|
|
};
|
|
|
|
// Helper to format Yes/No values
|
|
const formatYesNo = (value) => {
|
|
if (value === 'yes' || value === true) return 'Yes';
|
|
if (value === 'no' || value === false) return 'No';
|
|
return YES_NO_TEXT[value] || value || '';
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="list row mb-4">
|
|
<Breadcrumb>
|
|
<Breadcrumb.Item href="/">General</Breadcrumb.Item>
|
|
<Breadcrumb.Item href="/customers/list">
|
|
Customer Information
|
|
</Breadcrumb.Item>
|
|
<Breadcrumb.Item active>
|
|
View Customer Details
|
|
</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
<div className="col-md-12 text-primary">
|
|
<h4>View Customer Information <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h4>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-list-container form-page">
|
|
<div className="app-main-content-list-func-container">
|
|
<Tabs activeKey={activeTab} onSelect={(k) => setActiveTab(k)} id="customers-tab">
|
|
<Tab eventKey="personalInfo" title="Personal Information">
|
|
{/* Basic Info Section */}
|
|
<h6 className="text-primary">Basic Info</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">First Name</div>
|
|
<div className="field-value">{currentCustomer?.firstname}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Middle Name</div>
|
|
<div className="field-value">{currentCustomer?.middle_name}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Last Name</div>
|
|
<div className="field-value">{currentCustomer?.lastname}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Chinese / Preferred Name</div>
|
|
<div className="field-value">{currentCustomer?.name_cn}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Name On ID</div>
|
|
<div className="field-value">{currentCustomer?.name_on_id}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Customer Type</div>
|
|
<div className="field-value">{CUSTOMER_TYPE_TEXT[currentCustomer?.type] || currentCustomer?.type}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Program Type</div>
|
|
<div className="field-value">{PROGRAM_TYPE_TEXT[currentCustomer?.program_type] || currentCustomer?.program_type}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Pay Source</div>
|
|
<div className="field-value">
|
|
{PAY_SOURCE_TEXT[currentCustomer?.pay_source] || currentCustomer?.pay_source}
|
|
{currentCustomer?.pay_source === 'other' && currentCustomer?.pay_source_other && ` (${currentCustomer?.pay_source_other})`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Date Of Birth</div>
|
|
<div className="field-value">{currentCustomer?.birth_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Legal Sex</div>
|
|
<div className="field-value">{LEGAL_SEX_TEXT[currentCustomer?.legal_sex] || LEGAL_SEX_TEXT[currentCustomer?.gender] || currentCustomer?.gender}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Marital Status</div>
|
|
<div className="field-value">{MARITAL_STATUS_TEXT[currentCustomer?.marital_status] || currentCustomer?.marital_status}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Marriage Date</div>
|
|
<div className="field-value">{currentCustomer?.marriage_date}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Immigration Status</div>
|
|
<div className="field-value">
|
|
{IMMIGRATION_STATUS_TEXT[currentCustomer?.immigration_status] || currentCustomer?.immigration_status}
|
|
{currentCustomer?.immigration_status === 'other' && currentCustomer?.immigration_status_other && ` (${currentCustomer?.immigration_status_other})`}
|
|
</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Language Spoken</div>
|
|
<div className="field-value">
|
|
{formatArrayToDisplay(currentCustomer?.language_spoken, LANGUAGE_OPTIONS) || currentCustomer?.language}
|
|
{currentCustomer?.language_spoken?.includes('other') && currentCustomer?.language_spoken_other && ` (${currentCustomer?.language_spoken_other})`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Info Section */}
|
|
<h6 className="text-primary">Contact Info</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Primary Phone Number</div>
|
|
<div className="field-value">{currentCustomer?.phone}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Phone Number 2</div>
|
|
<div className="field-value">{currentCustomer?.mobile_phone}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Phone Number 3</div>
|
|
<div className="field-value">{currentCustomer?.home_phone}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Email</div>
|
|
<div className="field-value">{currentCustomer?.email}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Address Section */}
|
|
<h6 className="text-primary">Address</h6>
|
|
{/* Address 1 */}
|
|
{(currentCustomer?.address_line_1 || currentCustomer?.street_address_1 || currentCustomer?.city || currentCustomer?.city1) && (
|
|
<>
|
|
<strong className="text-secondary d-block mb-2">Address 1</strong>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 1</div>
|
|
<div className="field-value">{currentCustomer?.address_line_1 || currentCustomer?.street_address_1}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 2</div>
|
|
<div className="field-value">{currentCustomer?.address_line_2 || currentCustomer?.apartment}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">City</div>
|
|
<div className="field-value">{currentCustomer?.city || currentCustomer?.city1}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">State</div>
|
|
<div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state] || STATE_OPTIONS_TEXT[currentCustomer?.state1] || currentCustomer?.state || currentCustomer?.state1}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Zip Code</div>
|
|
<div className="field-value">{currentCustomer?.zip_code || currentCustomer?.zip_code1}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Note</div>
|
|
<div className="field-value">{currentCustomer?.address_note}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{/* Address 2 */}
|
|
{(currentCustomer?.address2_line_1 || currentCustomer?.street_address_2 || currentCustomer?.city2) && (
|
|
<>
|
|
<strong className="text-secondary d-block mb-2 mt-3">Address 2</strong>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 1</div>
|
|
<div className="field-value">{currentCustomer?.address2_line_1 || currentCustomer?.street_address_2}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 2</div>
|
|
<div className="field-value">{currentCustomer?.address2_line_2}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">City</div>
|
|
<div className="field-value">{currentCustomer?.city2}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">State</div>
|
|
<div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state2] || currentCustomer?.state2}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Zip Code</div>
|
|
<div className="field-value">{currentCustomer?.zip_code2}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Note</div>
|
|
<div className="field-value">{currentCustomer?.address2_note}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{/* Address 3 */}
|
|
{(currentCustomer?.address3_line_1 || currentCustomer?.street_address_3 || currentCustomer?.city3) && (
|
|
<>
|
|
<strong className="text-secondary d-block mb-2 mt-3">Address 3</strong>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 1</div>
|
|
<div className="field-value">{currentCustomer?.address3_line_1 || currentCustomer?.street_address_3}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 2</div>
|
|
<div className="field-value">{currentCustomer?.address3_line_2}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">City</div>
|
|
<div className="field-value">{currentCustomer?.city3}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">State</div>
|
|
<div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state3] || currentCustomer?.state3}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Zip Code</div>
|
|
<div className="field-value">{currentCustomer?.zip_code3}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Note</div>
|
|
<div className="field-value">{currentCustomer?.address3_note}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{/* Address 4 */}
|
|
{(currentCustomer?.address4_line_1 || currentCustomer?.street_address_4 || currentCustomer?.city4) && (
|
|
<>
|
|
<strong className="text-secondary d-block mb-2 mt-3">Address 4</strong>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 1</div>
|
|
<div className="field-value">{currentCustomer?.address4_line_1 || currentCustomer?.street_address_4}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 2</div>
|
|
<div className="field-value">{currentCustomer?.address4_line_2}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">City</div>
|
|
<div className="field-value">{currentCustomer?.city4}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">State</div>
|
|
<div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state4] || currentCustomer?.state4}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Zip Code</div>
|
|
<div className="field-value">{currentCustomer?.zip_code4}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Note</div>
|
|
<div className="field-value">{currentCustomer?.address4_note}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{/* Address 5 */}
|
|
{(currentCustomer?.address5_line_1 || currentCustomer?.street_address_5 || currentCustomer?.city5) && (
|
|
<>
|
|
<strong className="text-secondary d-block mb-2 mt-3">Address 5</strong>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 1</div>
|
|
<div className="field-value">{currentCustomer?.address5_line_1 || currentCustomer?.street_address_5}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Line 2</div>
|
|
<div className="field-value">{currentCustomer?.address5_line_2}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">City</div>
|
|
<div className="field-value">{currentCustomer?.city5}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">State</div>
|
|
<div className="field-value">{STATE_OPTIONS_TEXT[currentCustomer?.state5] || currentCustomer?.state5}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Zip Code</div>
|
|
<div className="field-value">{currentCustomer?.zip_code5}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Address Note</div>
|
|
<div className="field-value">{currentCustomer?.address5_note}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Emergency Contact Section */}
|
|
<h6 className="text-primary">Emergency Contact</h6>
|
|
{/* Emergency Contact 1 */}
|
|
{(currentCustomer?.emergency_contact_name || currentCustomer?.emergency_contact_phone) && (
|
|
<>
|
|
<strong className="text-secondary d-block mb-2">Emergency Contact 1</strong>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Name</div>
|
|
<div className="field-value">{currentCustomer?.emergency_contact_name}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Phone Number</div>
|
|
<div className="field-value">{currentCustomer?.emergency_contact_phone}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Relationship</div>
|
|
<div className="field-value">
|
|
{EMERGENCY_CONTACT_RELATIONSHIP_TEXT[currentCustomer?.emergency_contact_relationship] || currentCustomer?.emergency_contact_relationship}
|
|
{currentCustomer?.emergency_contact_relationship === 'other' && currentCustomer?.emergency_contact_relationship_other && ` (${currentCustomer?.emergency_contact_relationship_other})`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Role</div>
|
|
<div className="field-value">{formatArrayToDisplay(currentCustomer?.emergency_contact_role, EMERGENCY_CONTACT_ROLE_OPTIONS)}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{/* Emergency Contact 2 */}
|
|
{(currentCustomer?.emergency_contact2_name || currentCustomer?.emergency_contact2_phone) && (
|
|
<>
|
|
<strong className="text-secondary d-block mb-2 mt-3">Emergency Contact 2</strong>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Name</div>
|
|
<div className="field-value">{currentCustomer?.emergency_contact2_name}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Phone Number</div>
|
|
<div className="field-value">{currentCustomer?.emergency_contact2_phone}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Relationship</div>
|
|
<div className="field-value">
|
|
{EMERGENCY_CONTACT_RELATIONSHIP_TEXT[currentCustomer?.emergency_contact2_relationship] || currentCustomer?.emergency_contact2_relationship}
|
|
{currentCustomer?.emergency_contact2_relationship === 'other' && currentCustomer?.emergency_contact2_relationship_other && ` (${currentCustomer?.emergency_contact2_relationship_other})`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Emergency Contact Role</div>
|
|
<div className="field-value">{formatArrayToDisplay(currentCustomer?.emergency_contact2_role, EMERGENCY_CONTACT_ROLE_OPTIONS)}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Schedule Section */}
|
|
<h6 className="text-primary">Schedule</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Days of Week</div>
|
|
<div className="field-value">{formatArrayToDisplay(currentCustomer?.days_of_week, DAYS_OF_WEEK_OPTIONS)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Admission & Discharge Record Section */}
|
|
<h6 className="text-primary">Admission & Discharge Record</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Admission Date</div>
|
|
<div className="field-value">{currentCustomer?.admission_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Enrolled Date</div>
|
|
<div className="field-value">{currentCustomer?.enrolled_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Created By</div>
|
|
<div className="field-value">{currentCustomer?.create_by}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Referral Source</div>
|
|
<div className="field-value">
|
|
{REFERRAL_SOURCE_TEXT[currentCustomer?.referral_source] || currentCustomer?.referral_source}
|
|
{currentCustomer?.referral_source === 'other' && currentCustomer?.referral_source_other && ` (${currentCustomer?.referral_source_other})`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Only show discharge fields when customer is NOT active */}
|
|
{!isCustomerActive() && (
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Discharge Date</div>
|
|
<div className="field-value">{currentCustomer?.discharge_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Discharge By</div>
|
|
<div className="field-value">{currentCustomer?.discharge_by}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Discharge Reason</div>
|
|
<div className="field-value">
|
|
{CUSTOMER_DISCHARGE_REASON_TEXT[currentCustomer?.discharge_reason] || currentCustomer?.discharge_reason}
|
|
{currentCustomer?.discharge_reason === 'other' && currentCustomer?.discharge_reason_other && ` (${currentCustomer?.discharge_reason_other})`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Tab>
|
|
|
|
<Tab eventKey="careServices" title="Care & Services">
|
|
<h6 className="text-primary">Care & Services</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Dietary Restrictions</div>
|
|
<div className="field-value">
|
|
{formatArrayToDisplay(currentCustomer?.dietary_restrictions, DIETARY_RESTRICTIONS_OPTIONS)}
|
|
{currentCustomer?.dietary_restrictions?.includes('other') && currentCustomer?.dietary_restrictions_other && ` (${currentCustomer?.dietary_restrictions_other})`}
|
|
</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Diet Texture</div>
|
|
<div className="field-value">{DIET_TEXTURE_TEXT[currentCustomer?.diet_texture] || currentCustomer?.diet_texture}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Table Number</div>
|
|
<div className="field-value">{currentCustomer?.table_id}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Seat Number</div>
|
|
<div className="field-value">{currentCustomer?.seat_number || currentCustomer?.seating}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Transportation Type</div>
|
|
<div className="field-value">{TRANSPORTATION_TYPE_TEXT[currentCustomer?.transportation_type] || currentCustomer?.transportation_type}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Consent To Text Messages</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.consent_to_text_messages || currentCustomer?.text_msg_enabled)}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Preferred Text Language</div>
|
|
<div className="field-value">{PREFERRED_TEXT_LANGUAGE_TEXT[currentCustomer?.preferred_text_language] || currentCustomer?.preferred_text_language}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Consent to Media Use</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.consent_to_media_use)}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
|
|
<Tab eventKey="medicalInsurance" title="Medical & Insurance">
|
|
{/* Providers Section */}
|
|
<h6 className="text-primary">Providers</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Primary Care Physician</div>
|
|
<div className="field-value">{currentCustomer?.primary_care_physician || currentCustomer?.care_provider}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Pharmacy Name</div>
|
|
<div className="field-value">{currentCustomer?.pharmacy}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Pharmacy ID</div>
|
|
<div className="field-value">{currentCustomer?.pharmacy_id}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* General Conditions Section */}
|
|
<h6 className="text-primary">General Conditions</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Diabetes Mellitus</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.diabetes_mellitus)}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Eyes-On</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.eyes_on || currentCustomer?.disability)}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Wheelchair</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.wheelchair)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legal Section */}
|
|
<h6 className="text-primary">Legal</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">MOLST</div>
|
|
<div className="field-value">{currentCustomer?.molst}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Provisions for Advance Medical</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.provisions_for_advance_medical)}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Hospice</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.hospice)}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Burial Arrangements</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.burial_arrangements)}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Power of Attorney</div>
|
|
<div className="field-value">{currentCustomer?.power_of_attorney}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rounding Section */}
|
|
<h6 className="text-primary">Rounding</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Requires Rounding</div>
|
|
<div className="field-value">{formatYesNo(currentCustomer?.requires_rounding)}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Rounding Notes</div>
|
|
<div className="field-value">{currentCustomer?.rounding_notes}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
|
|
<Tab eventKey="confidentialDetails" title="Confidential Details">
|
|
<h6 className="text-primary">Confidential Details</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Medicare Number</div>
|
|
<div className="field-value">{currentCustomer?.medicare_number}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Medicaid Number</div>
|
|
<div className="field-value">{currentCustomer?.medicaid_number}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Social Security Number</div>
|
|
<div className="field-value">{currentCustomer?.social_security_number}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Adcaps ID</div>
|
|
<div className="field-value">{currentCustomer?.adcaps_id}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
|
|
<Tab eventKey="complianceDeadlines" title="Compliance & Deadlines">
|
|
<h6 className="text-primary">Compliance & Deadlines</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Adcaps Completed Date</div>
|
|
<div className="field-value">{currentCustomer?.adcaps_completed_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Center Qualification Renew Date</div>
|
|
<div className="field-value">{currentCustomer?.center_qualification_renew_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Medicaid Renew Date</div>
|
|
<div className="field-value">{currentCustomer?.medicaid_renew_date}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">ID Expiration Date</div>
|
|
<div className="field-value">{currentCustomer?.id_expiration_date}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
|
|
<Tab eventKey="formSubmission" title="Form Submission">
|
|
{/* Admission Forms Section */}
|
|
<h6 className="text-primary">Admission Forms</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Maryland HIPAA Authorization</div>
|
|
<div className="field-value">{currentCustomer?.hipaa_authorization_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Medication Management Consent Form</div>
|
|
<div className="field-value">{currentCustomer?.medication_management_consent_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Freedom Of Choice</div>
|
|
<div className="field-value">{currentCustomer?.freedom_of_choice_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Meal Benefit Application</div>
|
|
<div className="field-value">{currentCustomer?.meal_benefit_application_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Photo-Video Release Waiver Form</div>
|
|
<div className="field-value">{currentCustomer?.photo_video_release_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Security Deposit Payment Agreement</div>
|
|
<div className="field-value">{currentCustomer?.security_deposit_agreement_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
</div>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">Recreational Program Contract</div>
|
|
<div className="field-value">{currentCustomer?.recreational_program_contract_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Medical Forms Section */}
|
|
<h6 className="text-primary">Medical Forms</h6>
|
|
<div className="app-main-content-fields-section">
|
|
<div className="field-body">
|
|
<div className="field-label">TB Form</div>
|
|
<div className="field-value">{currentCustomer?.tb_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Pre-Screening Form</div>
|
|
<div className="field-value">{currentCustomer?.pre_screening_form ? 'Uploaded' : 'Not Uploaded'}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
|
|
<Tab eventKey="additionalInfo" title="Additional Information">
|
|
<h6 className="text-primary">Additional Information</h6>
|
|
<div className="app-main-content-fields-section base-line">
|
|
<div className="field-body">
|
|
<div className="field-label">Profile Picture</div>
|
|
{currentAvatar && <img height="100px" width="100px" src={`data:image/png;base64, ${currentAvatar}`}/>}
|
|
</div>
|
|
<div className="field-body">
|
|
<div className="field-label">Notes And Attachments</div>
|
|
<div className="field-value">{currentCustomer?.note || currentCustomer?.private_note}</div>
|
|
</div>
|
|
</div>
|
|
</Tab>
|
|
</Tabs>
|
|
<div className="list-func-panel">
|
|
<button className="btn btn-primary me-2" onClick={() => goToEdit(currentCustomer?.id)}><PencilSquare className="me-2" size={16}></PencilSquare>Edit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ViewCustomer; |