Enhance Machine List With Equipment Status Badges And Color Coding

July 15, 2025 by StackCamp Team 67 views

Add Equipment Status Badges to Machine List Showing Online/Offline/Maintenance Status with Color Coding

In today's fast-paced manufacturing environment, real-time visibility into equipment status is crucial for maintaining operational efficiency and minimizing downtime. This article delves into the implementation of equipment status badges within a machine list, providing a clear and intuitive visual representation of each machine's operational state. This feature enhancement allows operators and maintenance staff to quickly identify machines requiring attention, streamlining workflows and improving overall productivity. This comprehensive guide will cover the business value, technical analysis, implementation steps, testing strategy, and future enhancements associated with adding status badges to a machine list.

Feature Description: Enhancing Machine List Visibility

This feature introduces visual status badges to the machine list display, specifically within the HomeScreen component. These badges provide an at-a-glance view of equipment operational status, enabling users to quickly assess the condition of each machine on the production floor. The badges will utilize a color-coding system, with green indicating online status, red indicating offline status, and yellow indicating maintenance status. This visual representation significantly enhances the user experience, allowing for rapid identification of machines that may require immediate attention.

Implementing this feature involves several key steps, including updating the database schema to include a status field for machines, modifying the TypeScript interface to reflect the new status property, creating a reusable StatusBadge component, integrating the component into the HomeScreen, and implementing real-time updates to ensure the status badges reflect the current state of each machine. Furthermore, accessibility enhancements will be incorporated to ensure the feature is usable by individuals with disabilities.

This feature aligns with industry best practices for visual communication in manufacturing environments, providing a standardized and easily understandable representation of equipment status. By leveraging familiar color codes and clear visual indicators, this feature minimizes ambiguity and ensures that users can quickly and accurately interpret the status of each machine. The design of the StatusBadge component will prioritize clarity and readability, ensuring that the badges are easily visible and distinguishable even in busy production environments. The size and placement of the badges will be carefully considered to ensure they are prominent without being intrusive.

Business Value: The Impact of Real-Time Status Visibility

The addition of equipment status badges delivers significant business value across various operational aspects. One of the most crucial benefits is the ability for quick visual assessment of the production floor. Supervisors can instantly grasp the operational status of all machines, enabling them to make informed decisions and allocate resources effectively. This real-time visibility allows for proactive management of the production process, minimizing disruptions and maximizing output. The color-coded system facilitates rapid identification of machines requiring attention, enabling supervisors to prioritize their efforts and address critical issues promptly. This enhanced situational awareness contributes to improved overall operational efficiency and responsiveness.

Another key benefit is reduced downtime. By providing a clear visual representation of machine status, maintenance teams can prioritize their efforts on machines that are offline or undergoing maintenance. This proactive approach to maintenance can prevent minor issues from escalating into major breakdowns, thereby minimizing downtime and maximizing machine uptime. The ability to quickly identify machines requiring maintenance also facilitates efficient scheduling of maintenance activities, ensuring that resources are allocated optimally. Furthermore, the real-time nature of the status updates allows maintenance teams to respond promptly to unexpected equipment failures, minimizing the impact on production schedules.

In today's mobile-driven world, the mobile-friendly nature of this feature is particularly valuable. Operators using tablets on the factory floor can benefit from clear visual indicators of machine status, allowing them to monitor equipment performance and respond to issues in real-time, regardless of their location. This mobility enhances operational flexibility and responsiveness, enabling operators to address problems quickly and efficiently. The StatusBadge component will be designed to be responsive, ensuring that it renders correctly on a variety of screen sizes and devices. This mobile-first approach ensures that the benefits of real-time status visibility are accessible to all users, regardless of their device preferences.

This feature aligns with industry standards by using familiar color coding conventions for equipment status. Green, red, and yellow are widely recognized as indicators of online, offline, and maintenance status, respectively. This adherence to industry standards ensures that the status badges are easily understood by users, regardless of their background or experience. The use of standardized visual cues minimizes ambiguity and promotes clear communication across teams and departments. This alignment with industry best practices enhances the usability and effectiveness of the feature, ensuring that it delivers maximum value to the organization.

Technical Analysis: Implementing the Status Badge Feature

The technical analysis outlines the steps required to implement the equipment status badges, starting with the current state of the application. The machine list is currently displayed in the frontend/src/components/HomeScreen.tsx file, specifically within lines 100-115. The Machine interface, which defines the structure of machine data, is located in frontend/src/lib/api.ts (lines 37-51). Currently, the Machine type does not include a status field. The application already implements real-time updates, a pattern observed in the SessionHistory.tsx component. Existing color and badge patterns, such as those used for confidence indicators in ChatInterface.tsx, utilize emojis.

The proposed implementation involves several key steps. First, the database schema needs to be updated to include a status field for machines. This will be achieved by adding a status column to the machines table, with a default value of 'offline' and a check constraint to ensure the status is one of 'online', 'offline', or 'maintenance'. Additionally, a status_updated_at column will be added to track the last time the status was updated. This database update ensures that the machine status is persistently stored and can be retrieved efficiently.

Next, the Machine interface in frontend/src/lib/api.ts needs to be updated to include the status and status_updated_at fields. This ensures that the TypeScript type system accurately reflects the structure of the machine data, preventing type-related errors and improving code maintainability. The status field will be a union type of 'online', 'offline', and 'maintenance', while the status_updated_at field will be a string representing a timestamp.

A new StatusBadge component will be created in frontend/src/components/ui/StatusBadge.tsx. This component will be responsible for rendering the visual status badge based on the machine's status. It will accept a status prop of type MachineStatus (a union type of 'online', 'offline', and 'maintenance'), as well as optional size and showLabel props. The component will use different icons and color schemes for each status, providing a clear visual distinction between them. The component will also include accessibility enhancements, such as ARIA attributes, to ensure it is usable by individuals with disabilities.

Finally, the HomeScreen component will be updated to incorporate the StatusBadge component into the machine card. This will involve importing the StatusBadge component and adding it to the machine card's JSX structure. The status prop will be passed from the machine object to the StatusBadge component. Real-time status updates will be implemented using a Supabase subscription, similar to the pattern used in SessionHistory.tsx. This subscription will listen for updates to the machines table and update the local state accordingly, ensuring that the status badges reflect the current status of each machine.

1. Database Schema Update

To effectively track and manage the operational status of each machine, the database schema requires an update. Specifically, we need to add a status field to the machines table. This field will store the current status of the machine, which can be one of three values: online, offline, or maintenance. This addition is crucial for providing a persistent and reliable representation of machine status. The SQL commands to achieve this update are as follows:

ALTER TABLE machines
ADD COLUMN status VARCHAR(20) DEFAULT 'offline'
CHECK (status IN ('online', 'offline', 'maintenance'));

ALTER TABLE machines
ADD COLUMN status_updated_at TIMESTAMP DEFAULT NOW();

The first command, ALTER TABLE machines ADD COLUMN status VARCHAR(20) DEFAULT 'offline' CHECK (status IN ('online', 'offline', 'maintenance'));, adds a new column named status to the machines table. The data type of this column is VARCHAR(20), which means it can store strings up to 20 characters in length. The DEFAULT 'offline' clause specifies that if a new machine is added to the table without a status being explicitly provided, the default status will be set to offline. This ensures that all machines have a status, even if it's not immediately known. The CHECK (status IN ('online', 'offline', 'maintenance')) clause adds a constraint to the column, ensuring that only valid status values can be stored. This helps to maintain data integrity and prevent errors caused by invalid status entries.

The second command, ALTER TABLE machines ADD COLUMN status_updated_at TIMESTAMP DEFAULT NOW();, adds another column named status_updated_at to the machines table. This column will store a timestamp indicating when the machine's status was last updated. The data type of this column is TIMESTAMP, which is a standard data type for storing date and time values. The DEFAULT NOW() clause specifies that when a new machine is added or when the status of an existing machine is updated, the status_updated_at column will automatically be set to the current date and time. This provides a valuable audit trail, allowing us to track the history of machine status changes over time.

These database schema updates are essential for supporting the equipment status badge feature. They provide the necessary storage and validation mechanisms to ensure that machine status is accurately tracked and maintained. The status column allows us to store the current operational state of each machine, while the status_updated_at column provides a timestamp for when the status was last changed. Together, these columns provide a comprehensive view of machine status, enabling effective monitoring and management of the production floor.

2. Type Updates

To ensure type safety and maintain code integrity, it's crucial to update the TypeScript interface for the Machine object. This involves adding the new status and status_updated_at fields to the interface definition. By updating the interface, we ensure that the TypeScript compiler can correctly validate the structure of machine data, preventing type-related errors and improving code maintainability. The updated Machine interface in frontend/src/lib/api.ts will look like this:

export interface Machine {
  id?: string;
  name: string;
  type?: string;
  // ... existing fields ...
  status?: 'online' | 'offline' | 'maintenance';
  status_updated_at?: string;
}

This code snippet demonstrates the addition of two new properties to the Machine interface: status and status_updated_at. The status property is defined as a union type, status?: 'online' | 'offline' | 'maintenance';. This means that the status property can be either a string with the value 'online', 'offline', or 'maintenance', or it can be undefined. The ? symbol indicates that the property is optional, meaning that a Machine object may or may not have a status property. This flexibility is useful in cases where the status of a machine is not immediately available or is being loaded asynchronously.

The use of a union type for the status property is a powerful feature of TypeScript. It allows us to enforce a specific set of allowed values for the property, preventing errors caused by invalid status entries. If we try to assign a value to the status property that is not one of 'online', 'offline', or 'maintenance', the TypeScript compiler will raise an error, helping us to catch potential bugs early in the development process.

The status_updated_at property is defined as status_updated_at?: string;. This means that the status_updated_at property is an optional string. It will store the timestamp indicating when the machine's status was last updated. The string representation of the timestamp is a common way to store date and time values in JavaScript and TypeScript. This property provides valuable information for tracking the history of machine status changes and can be used for various purposes, such as generating reports or triggering alerts.

By updating the Machine interface with these new properties, we ensure that our TypeScript code accurately reflects the structure of the machine data. This improves code readability, maintainability, and type safety, making it easier to work with machine data throughout the application. The use of union types and optional properties provides flexibility and robustness, allowing us to handle various scenarios and prevent potential errors.

3. New Status Badge Component

A crucial element of this feature is the creation of a reusable StatusBadge component. This component will be responsible for visually representing the status of a machine, using different colors and icons to indicate whether the machine is online, offline, or undergoing maintenance. The StatusBadge component will be designed to be flexible and configurable, allowing it to be used in various contexts throughout the application. The component will be created in frontend/src/components/ui/StatusBadge.tsx and will have the following structure:

import React from 'react';
import { CircleIcon, WrenchIcon, AlertCircleIcon } from 'lucide-react';

export type MachineStatus = 'online' | 'offline' | 'maintenance';

interface StatusBadgeProps {
  status: MachineStatus;
  size?: 'sm' | 'md' | 'lg';
  showLabel?: boolean;
}

export const StatusBadge: React.FC<StatusBadgeProps> = ({
  status,
  size = 'sm',
  showLabel = true
}) => {
  const configs = {
    online: {
      icon: CircleIcon,
      label: 'Online',
      className: 'bg-green-100 text-green-800 border-green-200',
      iconClassName: 'fill-green-500 text-green-500'
    },
    offline: {
      icon: AlertCircleIcon,
      label: 'Offline',
      className: 'bg-red-100 text-red-800 border-red-200',
      iconClassName: 'fill-red-500 text-red-500'
    },
    maintenance: {
      icon: WrenchIcon,
      label: 'Maintenance',
      className: 'bg-yellow-100 text-yellow-800 border-yellow-200',
      iconClassName: 'text-yellow-600'
    }
  };

  const config = configs[status] || configs.offline;
  const Icon = config.icon;

  const sizeClasses = {
    sm: 'text-xs px-2 py-1',
    md: 'text-sm px-3 py-1.5',
    lg: 'text-base px-4 py-2'
  };

  const iconSizes = {
    sm: 12,
    md: 16,
    lg: 20
  };

  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full border font-medium ${config.className} ${sizeClasses[size]}`}
      role="status"
      aria-label={`Machine status: ${config.label}`}
    >
      <Icon size={iconSizes[size]} className={config.iconClassName} />
      {showLabel && <span>{config.label}</span>}
    </span>
  );
};

This code defines a functional component called StatusBadge that accepts three props: status, size, and showLabel. The status prop is required and specifies the status of the machine. It can be one of the values defined in the MachineStatus type: 'online', 'offline', or 'maintenance'. The size prop is optional and specifies the size of the badge. It can be one of the values: 'sm', 'md', or 'lg'. The default value is 'sm'. The showLabel prop is also optional and specifies whether to display the status label next to the icon. The default value is true.

The component uses a configs object to store the configuration for each status. Each configuration includes the icon to display, the label to display, the CSS classes to apply to the badge, and the CSS classes to apply to the icon. The icons are imported from the lucide-react library, which provides a set of high-quality, customizable icons. The CSS classes are designed to provide a clear visual distinction between the different statuses, using green for online, red for offline, and yellow for maintenance.

The component uses a sizeClasses object to store the CSS classes for different badge sizes. This allows the badge to be displayed in different sizes depending on the context in which it is used. Similarly, the iconSizes object stores the icon sizes for different badge sizes.

The component returns a span element that contains the icon and the label (if showLabel is true). The span element has several CSS classes applied to it, including classes for rounded corners, a border, and the status-specific classes from the configs object. The role and aria-label attributes are added to the span element to improve accessibility. These attributes provide information to screen readers, allowing users with disabilities to understand the status of the machine.

Creating this StatusBadge component is a crucial step in implementing the equipment status badge feature. It provides a reusable and configurable way to visually represent machine status, ensuring consistency and clarity throughout the application.

4. Update HomeScreen Component

To display the equipment status badges, the HomeScreen component needs to be updated to incorporate the StatusBadge component. This involves importing the StatusBadge component and adding it to the machine card's JSX structure. This integration will allow users to see the status of each machine directly from the main screen, providing a quick and easy way to assess the operational status of the production floor. The following code snippet shows how to modify the machine card in frontend/src/components/HomeScreen.tsx:

// Add import
import { StatusBadge } from './ui/StatusBadge';

// Update machine card (around line 106)
<div className="flex justify-between items-center mb-2">
  <h3 className="font-bold text-lg">{machine.name}</h3>
  <StatusBadge status={machine.status || 'offline'} size="sm" />
</div>

This code snippet demonstrates two key changes to the HomeScreen component. First, it adds an import statement at the beginning of the file to import the StatusBadge component from its location in ./ui/StatusBadge. This makes the StatusBadge component available for use within the HomeScreen component.

Second, it modifies the machine card's JSX structure to include the StatusBadge component. The StatusBadge component is added within a div element that uses Flexbox to align its children horizontally. The justify-between class ensures that the machine name and the status badge are spaced apart, while the items-center class vertically aligns them in the center. The mb-2 class adds a small margin at the bottom of the div element, creating some visual separation between the machine cards.

The StatusBadge component is rendered with two props: status and size. The status prop is set to machine.status || 'offline'. This means that the status prop will be set to the value of the machine.status property if it exists and is not null or undefined. If the machine.status property is null or undefined, the status prop will be set to the default value of 'offline'. This ensures that a status badge is always displayed, even if the machine's status is not explicitly known.

The size prop is set to "sm", which specifies that the status badge should be displayed in its small size. This is a reasonable default size for displaying status badges in a list. The StatusBadge component will handle the rendering of the badge based on the provided status and size, displaying the appropriate color and icon to indicate the machine's operational state.

By integrating the StatusBadge component into the HomeScreen, we provide users with a clear and immediate visual representation of machine status. This allows them to quickly assess the state of the production floor and identify machines that may require attention. The use of a reusable StatusBadge component ensures consistency and maintainability, making it easier to update and modify the status badge display in the future.

5. Real-time Status Updates

To ensure that the equipment status badges accurately reflect the current operational state of each machine, it's crucial to implement real-time status updates. This means that when a machine's status changes (e.g., from online to offline), the corresponding status badge in the HomeScreen should update automatically without requiring a page refresh. This real-time functionality provides users with the most up-to-date information, enabling them to respond quickly to changing conditions on the production floor. To achieve this, we will leverage Supabase's real-time subscription feature. The following code snippet shows how to add a subscription in frontend/src/app/App.tsx:

// Add to useEffect that fetches machines
useEffect(() => {
  if (authChecked && isAuthenticated) {
    fetchMachines();

    // Subscribe to machine status updates
    const subscription = supabase
      .channel('public:machines')
      .on(
        'postgres_changes',
        {
          event: 'UPDATE',
          schema: 'public',
          table: 'machines',
          filter: 'status=neq.prev.status'
        },
        (payload) => {
          // Update local state when status changes
          setMachines(prev =>
            prev.map(m =>
              m.id === payload.new.id
                ? { ...m, ...payload.new }
                : m
            )
          );
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(subscription);
    };
  }
}, [authChecked, isAuthenticated]);

This code snippet adds a new Supabase subscription within the useEffect hook that fetches machines. This hook ensures that the subscription is set up only after the user is authenticated and the initial machine data has been fetched. The supabase.channel('public:machines') creates a new channel for listening to changes on the machines table in the public schema. The .on() method registers a listener for postgres_changes events, which are triggered when data in the PostgreSQL database changes.

The configuration object passed to the .on() method specifies the types of changes we are interested in. In this case, we are listening for UPDATE events on the machines table in the public schema. The filter: 'status=neq.prev.status' option adds a filter to the subscription, ensuring that we only receive updates when the status column changes. This is an important optimization that reduces the amount of data transmitted and processed by the client.

The callback function passed to the .on() method is executed when a matching event is received. This function receives a payload object containing information about the change. In this case, the payload.new property contains the updated machine data. The callback function updates the local state by mapping over the existing machines array and replacing the machine with the matching ID with the updated data from the payload. This ensures that the HomeScreen component always displays the most current machine status.

The .subscribe() method starts the subscription, and the return value is a subscription object. The useEffect hook returns a cleanup function that calls supabase.removeChannel(subscription) to remove the subscription when the component unmounts or when the dependencies of the hook change. This is important to prevent memory leaks and ensure that the application is not listening for events when it doesn't need to be.

By implementing this real-time subscription, we ensure that the equipment status badges in the HomeScreen component are always up-to-date. This provides users with a dynamic and responsive view of the production floor, enabling them to make informed decisions and respond quickly to changing conditions.

6. Accessibility Enhancements

Ensuring that the equipment status badge feature is accessible to all users, including those with disabilities, is a crucial aspect of the implementation. Accessibility enhancements will be incorporated throughout the development process to ensure that the feature is usable by individuals with visual, auditory, motor, or cognitive impairments. These enhancements will focus on providing alternative ways to access information and interact with the feature, making it inclusive and user-friendly for everyone. Several key accessibility considerations will be addressed:

ARIA labels for screen readers: ARIA (Accessible Rich Internet Applications) attributes will be used to provide screen readers with additional information about the status badges. This will allow users who are visually impaired to understand the status of each machine even without seeing the visual representation. The aria-label attribute will be used to provide a textual description of the status, such as "Machine status: Online" or "Machine status: Offline". This ensures that screen readers can accurately convey the status information to the user.
High contrast mode support: The color scheme used for the status badges will be designed to ensure sufficient contrast between the badge and the background, making it easier for users with low vision or color blindness to distinguish the different statuses. The colors will be chosen to meet WCAG (Web Content Accessibility Guidelines) contrast ratio requirements. Additionally, the feature will be tested in high contrast mode to ensure that the badges remain visible and distinguishable even when the operating system's high contrast settings are enabled.
Keyboard navigation friendly: The status badges will be designed to be navigable using the keyboard. This is important for users who cannot use a mouse or other pointing device. The focus order will be carefully considered to ensure that users can easily navigate between the status badges and other elements on the page. Keyboard focus indicators will be used to clearly show which element has focus.
Status announced to screen readers on change: When the status of a machine changes, the new status will be announced to screen readers automatically. This will provide users who are visually impaired with real-time updates on the operational state of the machines. This can be achieved using ARIA live regions, which allow developers to dynamically update content and have those updates announced to screen readers.

These accessibility enhancements are crucial for ensuring that the equipment status badge feature is inclusive and usable by all users. By addressing these considerations, we can create a feature that is not only visually appealing and functional but also accessible to a wide range of users, regardless of their abilities. Accessibility is not just a matter of compliance; it's a fundamental aspect of good design and development practices.

Testing Strategy: Ensuring Quality and Reliability

A robust testing strategy is essential to ensure the quality and reliability of the equipment status badge feature. This strategy will encompass various levels of testing, including unit tests, integration tests, and end-to-end (E2E) tests. Each type of test will focus on different aspects of the feature, ensuring that it functions correctly, integrates seamlessly with other components, and meets the needs of the users. The testing strategy will be implemented throughout the development process, starting with unit tests for individual components and progressing to integration and E2E tests as the feature is assembled.

Unit Tests

Unit tests will be written for the StatusBadge component to ensure that it renders correctly for different status values, sizes, and display options. These tests will focus on verifying the component's internal logic and ensuring that it behaves as expected in isolation. The unit tests will cover the following scenarios:

Renders correct color and icon for online status: This test will verify that the StatusBadge component displays the correct color (green) and icon (CircleIcon) when the status prop is set to 'online'.
Renders correct color and icon for offline status: This test will verify that the StatusBadge component displays the correct color (red) and icon (AlertCircleIcon) when the status prop is set to 'offline'.
Renders correct color and icon for maintenance status: This test will verify that the StatusBadge component displays the correct color (yellow) and icon (WrenchIcon) when the status prop is set to 'maintenance'.
Shows/hides label based on prop: This test will verify that the StatusBadge component displays the status label when the showLabel prop is set to true and hides the label when the showLabel prop is set to false.
Applies correct size classes: This test will verify that the StatusBadge component applies the correct CSS classes based on the size prop, ensuring that the badge is displayed in the correct size (sm, md, or lg).
Has proper ARIA attributes: This test will verify that the StatusBadge component has the correct ARIA attributes set, including `role=