worldshine-redesign/client/src/components/resources/ViewResource.js

import React, {useState, useEffect} from "react";
import { useNavigate, useParams } from "react-router-dom";
import { AuthService, ResourceService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { Download, Pencil, Archive } from "react-bootstrap-icons";
import { RESOURCE_TYPE_TEXT } from "../../shared/constants";

const ViewResource = () => {
  const navigate = useNavigate();
  const urlParams = useParams();
  const [currentResource, setCurrentResource] = useState(undefined);

  const redirectTo = () => {
    navigate(`/medical/resources/list`);
  }

  const goToEdit = (id) => {
    navigate(`/medical/resources/edit/${id}`);
  }

  const deactivateResource = (id) => {
    const data = {
      status: 'inactive',
      edit_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name,
      edit_date: new Date()
    };
    ResourceService.disableResource(id, data).then(() => {
      redirectTo();
    });
  }

  // Helper function to format address
  const formatAddress = () => {
    const line1 = currentResource?.address_line_1 || currentResource?.address || '';
    const line2 = currentResource?.address_line_2 || '';
    const city = currentResource?.city || '';
    const state = currentResource?.state || '';
    const zipcode = currentResource?.zipcode || '';
    
    if (!line1 && !city && !state && !zipcode) return '-';
    
    let address = line1;
    if (line2) address += `, ${line2}`;
    if (city) address += `, ${city}`;
    if (state) address += `, ${state}`;
    if (zipcode) address += ` ${zipcode}`;
    
    return address || '-';
  }

  useEffect(() => {
    if (!AuthService.canAccessLegacySystem()) {
      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`);
    }
    ResourceService.getResource(urlParams.id).then(resourceData => {
      setCurrentResource(resourceData.data);
    });
  }, []);

  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/medical/index">Medical</Breadcrumb.Item>
          <Breadcrumb.Item href="/medical/resources/list">
            Provider Information
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            View Provider Details
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
          <h4>View Provider Information <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button></h4> 
        </div>
      </div>
      <div className="app-main-content-list-container">
        <div className="app-main-content-list-func-container">
          <Tabs defaultActiveKey="providerInfo" id="providers-tab">
            <Tab eventKey="providerInfo" title="Provider Information">
              <h6 className="text-primary">Basic Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Provider</div> 
                  <div className="field-value">{currentResource?.name || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Office Name</div> 
                  <div className="field-value">{currentResource?.office_name || currentResource?.name_original || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Specialty</div> 
                  <div className="field-value">{currentResource?.specialty || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Type</div> 
                  <div className="field-value">{RESOURCE_TYPE_TEXT[currentResource?.type] || currentResource?.type || '-'}</div>
                </div>
              </div>

              <h6 className="text-primary">Contact Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Office Phone Number</div> 
                  <div className="field-value">{currentResource?.phone || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Secondary Phone Number</div> 
                  <div className="field-value">{currentResource?.contact || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Fax Number</div> 
                  <div className="field-value">{currentResource?.fax || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Email</div> 
                  <div className="field-value">{currentResource?.email || '-'}</div>
                </div>
              </div>

              <h6 className="text-primary">Provider Address</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Address Line 1</div> 
                  <div className="field-value">{currentResource?.address_line_1 || currentResource?.address || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Address Line 2</div> 
                  <div className="field-value">{currentResource?.address_line_2 || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">City</div> 
                  <div className="field-value">{currentResource?.city || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">State</div> 
                  <div className="field-value">{currentResource?.state || '-'}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Zip Code</div> 
                  <div className="field-value">{currentResource?.zipcode || '-'}</div>
                </div>
              </div>

              <h6 className="text-primary">Additional Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Note</div> 
                  <div className="field-value">{currentResource?.note || currentResource?.description || '-'}</div>
                </div>
              </div>
            </Tab>
          </Tabs>
          <div className="list-func-panel">
            <button className="btn btn-primary me-2" onClick={() => goToEdit(currentResource?.id)}><Pencil size={16} className="me-2"></Pencil>Edit</button>
            <button className="btn btn-primary me-2" onClick={() => deactivateResource(currentResource?.id)}><Archive size={16} className="me-2"></Archive>Archive</button>
          </div>
        </div>
      </div>
    </>
  );
};

export default ViewResource;