# Interface

## Overview

This `standard-workflow-interface` module provides a comprehensive interface for managing states and files within a workflow system. The interface is divided into two main components: StateTable and FileTable, which are displayed side by side in the main application view.

[![image 28.png](https://docs.finmars.com/uploads/images/gallery/2024-08/scaled-1680-/image-28.png)](https://docs.finmars.com/uploads/images/gallery/2024-08/image-28.png)

## Main Application Structure

The main application is defined in `App.vue` and consists of two primary components:

1. StateTable
2. FileTable

These components are laid out side by side using a flex container for optimal screen utilization.

## Key Components

### 1. StateTable

The StateTable component manages and displays workflow states.

[Interface (States & Input blocks)](https://docs.finmars.com/books/deprecated-standard-workflow-one-click/page/interface-states-input-blocks)

Key features:
- Displays a list of workflow states
- Allows filtering and searching of states
- Provides detailed view of each state
- Enables starting workflows and managing state status

### 2. FileTable

The FileTable component manages and displays files within the system.

[Interface (Files Block)](https://docs.finmars.com/books/deprecated-standard-workflow-one-click/page/interface-files-block)

Key features:
- Displays a list of files with their types, sources, and statuses
- Allows filtering and searching of files
- Provides file upload functionality
- Enables refreshing the file list

## User Interface

The interface is divided into two main sections:

1. **Left Side (StateTable)**:
   - Tabs for switching between "States" and "Inputs"
   - Search and filter options
   - Table displaying state information
   - Expandable rows for detailed state information

2. **Right Side (FileTable)**:
   - Table displaying file information
   - Search and filter options
   - File upload functionality

## Common Features

- Both components feature a refresh button (circular arrow icon) to update their respective data.
- The interface uses a consistent design language, with similar table layouts and filter options.

## API Integration

Both components interact with backend APIs for data retrieval and manipulation. The API calls are managed through custom fetch functions defined in `customFetch.js`.


## Development Notes

- The project uses Vue 3 with the Composition API.
- Quasar framework is used for UI components.
- Custom icons are used and should be properly imported in each component.
- API base URL is dynamically determined based on the current URL.