@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

package/src/billing/dashboard/v2/patient-bill-details/attachments/add-attachments.component.tsx

@@ -0,0 +1,223 @@
+import React, { useState } from 'react';
+import { Button, ButtonSet, Form, Modal, Select, SelectItem, Tag, TextInput } from '@carbon/react';
+import { showSnackbar, useSession, type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './attachments.scss';
+import { type VisitIntervention } from '../../types';
+import { type UploadedFile } from './type';
+import AttachmentComponent from './attachment.component';
+import { sendClaimAttachment } from '../../../../../registry/hie.resource';
+
+interface AddInterventionAttachmentWorkspaceProps extends DefaultWorkspaceProps {
+  consentToken: string;
+  claimInterventions: VisitIntervention;
+}
+
+const AddInterventionAttachmentsWorkspace: React.FC<AddInterventionAttachmentWorkspaceProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  claimInterventions,
+  consentToken,
+}) => {
+  const { t } = useTranslation();
+  const [previewUrl, setPreviewUrl] = useState<string>();
+  const [previewOpen, setPreviewOpen] = useState(false);
+
+  const createAttachment = () => ({
+    id: crypto.randomUUID(),
+    documentType: '',
+    title: '',
+    files: [] as UploadedFile[],
+  });
+
+  const [attachments, setAttachments] = useState([createAttachment()]);
+  const session = useSession();
+
+  const locationUuid = session.sessionLocation?.uuid;
+
+  const uploadFile = async (attachmentId: string, fileId: string) => {
+    const attachment = attachments.find((a) => a.id === attachmentId);
+    if (!attachment) return;
+
+    const uploadedFile = attachment.files.find((f) => f.id === fileId);
+    if (!uploadedFile) return;
+
+    try {
+      const response = await sendClaimAttachment(
+        consentToken,
+        attachment.documentType,
+        claimInterventions.intervention_code,
+        uploadedFile.file,
+        locationUuid!,
+      );
+
+      if (response.error) {
+        showSnackbar({
+          kind: 'error',
+          title: 'Error Uploading Attachment',
+          subtitle: response.message,
+        });
+
+        return;
+      }
+
+      setAttachments((prev) =>
+        prev.map((a) =>
+          a.id !== attachmentId
+            ? a
+            : {
+                ...a,
+                files: a.files.map((f) =>
+                  f.id !== fileId
+                    ? f
+                    : {
+                        ...f,
+                        uploaded: true,
+                      },
+                ),
+              },
+        ),
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const allowedTypes = ['image/png', 'image/jpeg', 'application/pdf'];
+
+  const handleDiscard = () => {
+    closeWorkspace();
+  };
+
+  if (!claimInterventions) return null;
+
+  const docTypes = Array.from(
+    new Map(
+      (claimInterventions.applicable_document_types ?? []).map((type) => [type.trim().toUpperCase(), type.trim()]),
+    ).values(),
+  );
+
+  const addFiles = (attachmentId: string, selectedFiles: FileList | null) => {
+    if (!selectedFiles) return;
+
+    const uploaded: UploadedFile[] = Array.from(selectedFiles)
+      .filter((file) => allowedTypes.includes(file.type))
+      .map((file) => ({
+        id: crypto.randomUUID(),
+        file,
+      }));
+
+    setAttachments((prev) =>
+      prev.map((attachment) =>
+        attachment.id === attachmentId
+          ? {
+              ...attachment,
+              files: [...attachment.files, ...uploaded],
+            }
+          : attachment,
+      ),
+    );
+  };
+
+  const removeFile = (attachmentId: string, fileId: string) => {
+    setAttachments((prev) =>
+      prev.map((attachment) =>
+        attachment.id === attachmentId
+          ? {
+              ...attachment,
+              files: attachment.files.filter((f) => f.id !== fileId),
+            }
+          : attachment,
+      ),
+    );
+  };
+
+  const updateAttachment = (attachmentId: string, field: 'title' | 'documentType', value: string) => {
+    setAttachments((prev) =>
+      prev.map((attachment) =>
+        attachment.id === attachmentId
+          ? {
+              ...attachment,
+              [field]: value,
+            }
+          : attachment,
+      ),
+    );
+  };
+
+  const removeAttachment = (id: string) => {
+    setAttachments((prev) => {
+      if (prev.length === 1) return prev;
+      return prev.filter((attachment) => attachment.id !== id);
+    });
+  };
+
+  const totalFiles = attachments.reduce((count, attachment) => count + attachment.files.length, 0);
+
+  return (
+    <>
+      <Form className={styles.form}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.75rem',
+            margin: '1rem',
+            justifyContent: 'center',
+          }}
+        >
+          <div className={styles.interventionSection}>
+            <span>Intervention name</span>
+            <Tag type="blue">{claimInterventions.intervention_name}</Tag>
+          </div>
+          <div className={styles.interventionSection}>
+            <span>Intervention code</span>
+            <Tag type="blue">{claimInterventions.intervention_code}</Tag>
+          </div>
+        </div>
+        {attachments.map((attachment) => (
+          <AttachmentComponent
+            key={attachment.id}
+            attachment={attachment}
+            docTypes={docTypes}
+            addFiles={addFiles}
+            removeFile={removeFile}
+            updateAttachment={updateAttachment}
+            setPreviewUrl={setPreviewUrl}
+            setPreviewOpen={setPreviewOpen}
+            removeAttachment={removeAttachment}
+            canDelete={attachments.length > 1}
+            uploadFile={uploadFile}
+          />
+        ))}
+        <Button
+          className={styles.addAttachment}
+          kind="secondary"
+          onClick={() => setAttachments((prev) => [...prev, createAttachment()])}
+        >
+          Add Attachment
+        </Button>
+      </Form>
+      <Modal
+        open={previewOpen}
+        passiveModal
+        modalHeading="Document Preview"
+        onRequestClose={() => setPreviewOpen(false)}
+        size="lg"
+      >
+        {previewUrl && (
+          <iframe
+            src={previewUrl}
+            style={{
+              width: '100%',
+              height: '80vh',
+              border: 'none',
+            }}
+            title="Document Preview"
+          />
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export default AddInterventionAttachmentsWorkspace;

package/src/billing/dashboard/v2/patient-bill-details/attachments/attachment.component.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Button, Select, SelectItem, Tag, TextInput } from '@carbon/react';
+
+import styles from './attachments.scss';
+import { TrashCan, View } from '@carbon/react/icons';
+import { type Attachment, type UploadedFile } from './type';
+
+interface AttachmentComponentProps {
+  attachment: Attachment;
+  docTypes: string[];
+  addFiles: (attachmentId: string, selectedFiles: FileList | null) => void;
+  removeFile: (attachmentId: string, fileId: string) => void;
+  updateAttachment: (attachmentId: string, field: 'documentType' | 'title', value: string) => void;
+  setPreviewUrl: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setPreviewOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  removeAttachment: (id: string) => void;
+  canDelete: boolean;
+  uploadFile: (attachmentId: string, fileId: string) => Promise<void>;
+}
+const AttachmentComponent: React.FC<AttachmentComponentProps> = ({
+  attachment,
+  docTypes,
+  addFiles,
+  removeFile,
+  updateAttachment,
+  setPreviewUrl,
+  setPreviewOpen,
+  removeAttachment,
+  canDelete,
+  uploadFile,
+}) => {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const MAX_FILE_SIZE = 10 * 1024 * 1024;
+  return (
+    <div className={styles.attachment}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          margin: '2rem',
+        }}
+      >
+        {canDelete && (
+          <Button
+            kind="danger--ghost"
+            size="sm"
+            renderIcon={TrashCan}
+            onClick={() => removeAttachment(attachment.id)}
+          />
+        )}
+      </div>
+      <div className={styles.formContent}>
+        <div className={styles.subSection}>
+          <Select
+            id={`doc-${attachment.id}`}
+            labelText="Document Type"
+            value={attachment.documentType}
+            onChange={(e) => updateAttachment(attachment.id, 'documentType', e.target.value)}
+          >
+            <SelectItem value="" text="Select" />
+
+            {docTypes.map((document) => (
+              <SelectItem key={document} value={document} text={document} />
+            ))}
+          </Select>
+        </div>
+        <div
+          style={{
+            width: 300,
+            margin: '2rem',
+          }}
+        >
+          <TextInput
+            id={`title-${attachment.id}`}
+            labelText="Document Title"
+            value={attachment.title}
+            onChange={(e) => updateAttachment(attachment.id, 'title', e.target.value)}
+          />
+        </div>
+      </div>
+      <div className={styles.uploadSection}>
+        <h4>Uploaded Files</h4>
+
+        <div className={styles.fileList}>
+          {attachment.files.map(({ id, file, uploaded }) => (
+            <div key={id} className={styles.fileItem}>
+              <span>{file.name}</span>
+
+              <Button
+                kind="ghost"
+                size="sm"
+                renderIcon={View}
+                onClick={() => {
+                  setPreviewUrl(URL.createObjectURL(file));
+                  setPreviewOpen(true);
+                }}
+              >
+                View
+              </Button>
+
+              {!uploaded ? (
+                <Button kind="primary" size="sm" onClick={() => uploadFile(attachment.id, id)}>
+                  Upload
+                </Button>
+              ) : (
+                <Tag type="green">Uploaded</Tag>
+              )}
+
+              <Button kind="ghost" size="sm" renderIcon={TrashCan} onClick={() => removeFile(attachment.id, id)}>
+                Remove
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <Button kind="tertiary" onClick={() => fileInputRef.current?.click()}>
+          Add File
+        </Button>
+        <div className={styles.applicableFiles}>
+          Allowed file types: <strong>PNG, JPG, PDF - max 10MB</strong>
+        </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          hidden
+          accept=".png,.jpg,.jpeg,.pdf,image/png,image/jpeg,application/pdf"
+          onChange={(e) => {
+            const selectedFiles = e.target.files;
+
+            if (!selectedFiles) return;
+
+            const oversizedFiles = Array.from(selectedFiles).filter((file) => file.size > MAX_FILE_SIZE);
+
+            if (oversizedFiles.length > 0) {
+              alert(
+                `The following file(s) exceed the maximum size of 10 MB:\n\n${oversizedFiles
+                  .map((f) => f.name)
+                  .join('\n')}`,
+              );
+
+              e.target.value = '';
+              return;
+            }
+
+            addFiles(attachment.id, selectedFiles);
+            e.target.value = '';
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AttachmentComponent;

package/src/billing/dashboard/v2/patient-bill-details/attachments/attachments.scss

@@ -0,0 +1,92 @@
+.interventionHeader {
+    text-align: center;
+}
+
+
+.subSection {
+    margin: 2rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.formContent {
+  display: flex;
+  flex-direction: column;
+  // overflow-y: auto;
+}
+
+.uploadSection {
+  margin: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.fileList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.fileItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem;
+  border: 1px solid #e0e0e0;
+}
+
+.fileActions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.buttonSet {
+  margin-top: 1rem;
+  border-top: 1px solid #e0e0e0;
+  padding-top: 1rem;
+}
+
+.interventionSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.invoice {
+  th {
+   border: 1px solid black;
+  padding: 8px;
+  font-size: 10px;
+}
+}
+
+.applicableFiles {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: #6f6f6f;
+}
+
+.addAttachment {
+  margin: 1rem,
+}
+
+.attachment {
+  display: flex;
+  flex-direction: column;
+  margin: 2rem 0;
+  padding: 1.5rem;
+  background-color: #f4f4f4; 
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
+
+.closeButton {
+  display: flex;
+  justify-content: center;
+  margin: 2rem;
+}