Members
# constant FlutterContext
Context for interacting with the Flutter environment. Provides functions to send data and messages to the Flutter app.
# constant FlutterProvider
Provider component for the Flutter context. Wraps the application to make Flutter interaction functions available.
# constant emptyLevel
ApproverHierarchyForm
This form lets an admin create / edit an ApproverHierarchy.
A hierarchy at minimum includes an "is_active" flag and one or more levels.
We implement a minimal UI that allows an administrator to toggle is_active and
add / remove level rows. Each level row lets the user pick a Role and assign a priority
(lower number = higher priority). Roles are fetched once from the API so we can populate
a dropdown.
# constant fieldMap
Displays detailed information about a memo, including request details, user information, and progress through its timeline. It groups information into sections using cards. Allows refreshing of OTPs for creators and approvers. Provides a progress bar showing the completion status based on approved timeline entries.
# constant getOrGenerateFcmToken
Get or generate the Firebase Cloud Messaging (FCM) token for the client.
# handleBlur
Handler function for input changes. Updates the values state and clears related errors.
# handleChange
An object indicating whether each field has been touched (blurred).
# isOpen
Whether the dialog is currently open.
# method
Restores a soft-deleted ward within a specific hospital.
# onClose
Function to call when the dialog is closed (e.g., by clicking cancel or outside the modal).
# onConfirm
Function to call when the confirm button is clicked. This function should handle the primary action.
# touched
An object containing validation errors for each field.
# constant useAuth
Custom hook to access the authentication context. It provides access to the authentication state and functions provided by the AuthProvider.
# constant useFlutter
Custom hook to access the Flutter context. Throws an error if used outside of a FlutterProvider.
# constant useForm
Custom React hook for managing form state, including values, errors, and touched status. It supports basic validation based on a provided schema.
# validate
Handler function for input blur events. Updates the touched state.
Methods
# ApproverHierarchyForm(props) → {JSX.Element}
Component for managing an Approver Hierarchy form. Allows creation and editing of hierarchies including activation status and approval levels.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
props |
object
|
The component props. |
|
initialData |
object
|
<optional> |
Initial data for the form (for editing). |
onSubmit |
function
|
Callback function when the form is submitted. |
|
onCancel |
function
|
Callback function when the form is cancelled. |
|
loading |
boolean
|
Indicates if the form is currently loading or submitting. |
The ApproverHierarchyForm component.
JSX.Element
# BackButton()
BackButton component that navigates back in history or to a fallback route.
# BlockForm(props) → {JSX.Element}
A form component for creating or updating a block.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
The component's props. |
||
initialData |
object
|
<optional> |
Initial data for the form fields (e.g., when editing a block). |
|
onSubmit |
function
|
The function to call when the form is submitted and validated. |
||
onCancel |
function
|
The function to call when the cancel button is clicked. |
||
loading |
boolean
|
<optional> |
false | A boolean indicating whether the form is currently in a loading state. |
The BlockForm component.
JSX.Element
# Checkbox(props) → {React.Element}
A customizable checkbox component.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
The component's properties. |
||
name |
string
|
The name attribute of the checkbox input. |
||
label |
string
|
The text label for the checkbox. |
||
checked |
boolean
|
The checked state of the checkbox. |
||
onChange |
function
|
The function to call when the checkbox state changes. |
||
disabled |
boolean
|
<optional> |
false | Whether the checkbox is disabled. |
The rendered checkbox component.
React.Element
# DashboardContent(props)
DashboardContent component displays different content based on the active tab. It includes CRUD operations for various entities (users, roles, blocks, etc.) and a dashboard view for superusers.
It leverages useCrud hook for data fetching and manipulation, and
displays data using CrudTable. Modals are used for add/edit forms and
a confirmation dialog for deletions.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
The component props. |
||
activeTab |
string
|
<optional> |
'dashboard' | The currently active tab in the dashboard. |
# DashboardIframe(props)
Renders the dashboard and associated memo table for a specific hospital. It allows users to view dashboard statistics based on selected periods (today, week, month) and date, and also displays a table of memos for the chosen period. Users can filter and search memos and export them to Excel.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
The component props. |
||
baseUrl |
string
|
<optional> |
"https://app.memotrack.net/media/dashboard/" | The base URL for the dashboard JSON files. |
iframeHtmlUrl |
string
|
<optional> |
"/dashboard.html" | The URL of the HTML file that loads the dashboard visualization. |
apiBaseUrl |
string
|
<optional> |
'https://app.memotrack.net' ||'http://localhost:8000' | The base URL for the API. |
# FlutterAwareWrapper() → {JSX.Element}
Wrapper component that integrates the Flutter bridge logic.
This component calls the useFlutterBridge hook to handle communication
and data injection from the Flutter environment. It then renders the
main application routes (AppRoutes) and the Toaster component
for displaying notifications, ensuring they are within the router context.
The wrapper component containing routes and toaster.
JSX.Element
# FormField(props) → {React.Element}
Generic form field component that renders different input types based on props. It handles label, value, change handler, error display, required indicator, and basic styling.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
Component props. |
||
label |
string
|
The label for the form field. |
||
name |
string
|
The name attribute for the input element. |
||
type |
string
|
<optional> |
'text' | The type of input ('text', 'select', 'textarea', 'time', etc.). |
value |
string
|
number
|
The current value of the input. |
||
onChange |
function
|
The handler function for input changes. |
||
error |
string
|
<optional> |
An error message to display below the input. |
|
required |
boolean
|
<optional> |
false | Indicates if the field is required. |
options |
Array.<{value: (string|number), label: string}>
|
<optional> |
[] | Options for 'select' type inputs. |
placeholder |
string
|
<optional> |
'' | The placeholder text for the input. |
className |
string
|
<optional> |
'' | Additional CSS classes for the input element. |
The rendered form field component.
React.Element
# MemoDetail() → {JSX.Element}
Renders the detail view for a specific memo. Fetches and displays memo information, timeline, and worker status. Allows memo creators to edit the memo.
The MemoDetail component.
JSX.Element
# MemoEditForm()
Form component for editing an existing memo. Allows updating the complaint, department, and tagged role. Props:
- memo: existing memo object
- onSuccess: () => void // called when update successful
- onCancel: () => void
# MemoExplorer()
Experimental component: MemoExplorer
Stand-alone UI that renders creator/approver/responder memo lists with client-side search & filtering based on the info data shape supplied by backend.
Expected data prop shape (example): { creator: { history: [ { id, complaint, department, ... }, ... ], ongoing: [...], sameWard: [...] }, approver: { waitingApproval: [...], previousBlocks: [...], completed: [...] }, responder: { attending: [...], tagged: [...], completed: [...] } }
# MemoForm(props)
MemoForm component for creating a new memo.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
Object
|
The component props. |
onSuccess |
function
|
Callback function to be executed on successful memo creation. |
onCancel |
function
|
Callback function to be executed when the form creation is canceled. |
# MemoTabbedList(props)
A tabbed list component for displaying and filtering memos.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
props |
object
|
The component props. |
|
data |
object
|
Array
|
The memo data, either an array or an object with tab keys. |
|
onMemoClick |
function
|
<optional> |
Callback function when a memo card is clicked. |
# MemosPage()
MemosPage Component
This component displays a list of memos for the current user within a specific hospital context. It fetches memos upon loading, allows memo creators to initiate the creation of new memos via a modal, and provides navigation to individual memo detail pages.
It utilizes useAuth for accessing user information, API services, and hospital context,
useNavigate for routing, and various state variables to manage loading states, memo data,
and modal visibility.
# Modal(props) → {JSX.Element|null}
A reusable Modal component.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
The component props. |
||
isOpen |
boolean
|
Determines if the modal is currently open. |
||
onClose |
function
|
Function to call when the modal should be closed. |
||
title |
string
|
The title to display at the top of the modal. |
||
children |
React.ReactNode
|
The content to be displayed within the modal body. |
||
size |
'sm'
|
'md'
|
'lg'
|
'xl'
|
<optional> |
'md' | Controls the maximum width of the modal. |
The Modal component or null if not open.
JSX.Element
|
null
# RoleForm(props) → {React.Element}
RoleForm component for creating or updating roles.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
The component props. |
||
initialData |
object
|
<optional> |
Initial data for the form (used for editing). |
|
onSubmit |
function
|
Callback function when the form is submitted successfully. |
||
onCancel |
function
|
Callback function when the form is cancelled. |
||
loading |
boolean
|
<optional> |
false | Boolean indicating if the form is currently submitting. |
The RoleForm component.
React.Element
# SetPassword()
A React component that provides a form for users to set their password using their phone number.
# Setting()
Setting component displays a basic setting page. Currently, it's a placeholder with a "hello" heading. It includes commented-out code for fetching dashboard memos, which can be uncommented and implemented for actual settings functionality.
# ShiftForm(props)
A form component for creating or updating a shift.
It uses the useForm hook for form state management and validation.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
props |
object
|
The component props. |
||
initialData |
object
|
<optional> |
Initial data to pre-fill the form (for editing). |
|
onSubmit |
function
|
Function to call when the form is submitted and validated. |
||
onCancel |
function
|
Function to call when the cancel button is clicked. |
||
loading |
boolean
|
<optional> |
false | Indicates if the form is currently submitting. |
# UserForm(props) → {JSX.Element}
A form component for creating or updating a user. It includes fields for institution ID, role, and phone number. Roles are fetched from the API based on the authenticated user's hospital.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
props |
object
|
The component props. |
|
initialData |
object
|
<optional> |
Initial data to populate the form (for updates). |
onSubmit |
function
|
Function to call when the form is submitted and valid. |
|
onCancel |
function
|
Function to call when the cancel button is clicked. |
|
loading |
boolean
|
Indicates whether the form is currently submitting. |
The UserForm component.
JSX.Element
# WardSelectDialog(props) → {JSX.Element}
A dialog component for selecting a ward from a list of wards belonging to a specific hospital. It displays wards grouped by block, allows searching, and includes a confirmation step before selection.
Parameters:
| Name | Type | Description |
|---|---|---|
props |
object
|
Component props.
|
The WardSelectDialog component.
JSX.Element
# WorkerStatus()
WorkerStatus component displays and manages worker status updates for a memo. It includes features for adding updates, tagging roles, OTP verification, speech-to-text input (if supported by the environment), and deleting updates.
Type Definitions
object
# Item
Represents a generic item managed by the CRUD hook.
Properties:
| Name | Type | Description |
|---|---|---|
id |
string
|
number
|
The unique identifier of the item. |
object
# MemoData
Properties:
| Name | Type | Description |
|---|---|---|
complaint |
string
|
The main complaint text of the memo. |
department |
string
|
The department related to the memo. |
current_ward_name |
string
|
The name of the current ward. |
current_block_name |
string
|
The name of the current block. Tailwind-only version of MemoExplorer (no Mantine). |
object
# User
Represents the authenticated user.
Properties:
| Name | Type | Description |
|---|---|---|
id |
number
|
The user's ID. |
username |
string
|
The user's username. |
is_superuser |
boolean
|
True if the user is a superuser. |
is_staff |
boolean
|
True if the user is a staff member. |
is_creator |
boolean
|
True if the user has creator permissions. |
is_approver |
boolean
|
True if the user has approver permissions. |
is_responder |
boolean
|
True if the user has responder permissions. |
is_raiser |
boolean
|
True if the user has raiser permissions. |
hospital_id |
number
|
The ID of the hospital the user belongs to. |