Fintivio Components

A collection of compact, MUI-based React components designed for building consistent, modern financial dashboards and applications.

Installation

npm install fintivio-components-npm @mui/material @emotion/react @emotion/styled @mui/icons-material react react-dom

Peer Dependencies

The following packages are required in your host application:

• react ^19.1.1
• react-dom ^19.1.1
• @mui/material ^7.3.4
• @mui/icons-material ^7.3.4
• @emotion/react ^11.14.0
• @emotion/styled ^11.14.1

Components

FiPageWrapper

A page layout component that provides standardized padding and a fixed header with navigation. Use this to wrap each module/page in your application.

Features:

• Fixed header with back button, title, icon, and right addon area
• Standardized padding for consistent page layout
• Back navigation functionality

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | title | string | Yes | Page title displayed in the header | | icon | React.ReactNode | No | Icon displayed next to the title | | rightAddon | React.ReactNode | No | Content displayed on the right side of the header (e.g., action buttons) | | children | React.ReactNode | Yes | Page content |

Example:

import { FiPageWrapper } from 'fintivio-components-npm';
import { Dashboard } from '@mui/icons-material';
import { Button } from '@mui/material';

function MyPage() {
  return (
    <FiPageWrapper
      title="Dashboard"
      icon={<Dashboard color="primary" fontSize="small" />}
      rightAddon={<Button variant="contained">Save</Button>}
    >
      <div>Your page content goes here</div>
    </FiPageWrapper>
  );
}

FiContentWrapper

A flexible content container with an optional header section. For wrapping tables, charts, etc.

Features:

• Optional header with title, subtitle, icon, and right addon
• Bordered card-like appearance
• Responsive layout
• Automatic overflow handling

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | title | string | No | Title displayed in the header | | subtitle | string | No | Subtitle displayed after the title | | icon | React.ReactNode | No | Icon displayed before the title | | rightAddon | React.ReactNode | No | Content displayed on the right side of the header | | sx | SxProps<Theme> | No | Custom styles to apply to the wrapper | | children | React.ReactNode | No | Content to display inside the wrapper |

Example:

import { FiContentWrapper } from 'fintivio-components-npm';
import { TableChart } from '@mui/icons-material';
import { IconButton } from '@mui/material';

function MyContent() {
  return (
    <FiContentWrapper
      title="Recent Transactions"
      subtitle="Last 30 days"
      icon={<TableChart color="primary" fontSize="small" />}
      rightAddon={<IconButton size="small">⋮</IconButton>}
      sx={{ width: '100%', height: '400px' }}
    >
      <div>Your content here</div>
    </FiContentWrapper>
  );
}

FiTable

A feature-rich data table component with sorting, pagination, and totals row support.

Features:

• Column-based configuration
• Sortable columns (ascending/descending)
• Pagination with configurable rows per page
• Sticky header for scrollable content
• Total/summary row
• Custom cell rendering
• Row click handlers
• Empty state customization
• Custom row styling

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | data | T[] | Yes | Array of data objects to display | | columns | Array<FiColumn<T>> | Yes | Column definitions | | onRowClick | (row: T) => void | No | Callback fired when a row is clicked | | createRowStyles | (row: T) => React.CSSProperties | No | Function to create custom styles for each row | | totalRow | boolean | No | Whether to display a summary row at the bottom | | pageable | boolean | No | Enable pagination (default: false) | | initialRowsPerPage | number | No | Initial number of rows per page (default: 10) | | noContent | React.ReactNode | No | Custom content to display when data is empty | | sx | SxProps<Theme> | No | Custom styles to apply to the table container |

Column Definition (FiColumn<T>):

| Property | Type | Required | Description | |----------|------|----------|-------------| | key | keyof T | Yes | Key of the data property to display | | title | string | No | Column header text | | align | "left" \| "center" \| "right" | No | Text alignment | | sort | boolean \| ((a: T, b: T) => number) | No | Enable sorting or provide custom sort function | | render | (row: T) => React.ReactNode | No | Custom cell renderer | | width | number | No | Minimum column width in pixels | | total | boolean | No | Include this column in the totals row calculation |

Example:

import { FiTable, FiColumn } from 'fintivio-components-npm';

interface Transaction {
  id: number;
  date: Date;
  description: string;
  amount: number;
}

const columns: Array<FiColumn<Transaction>> = [
  { 
    key: 'id', 
    title: 'ID', 
    align: 'left' 
  },
  { 
    key: 'date', 
    title: 'Date', 
    sort: true,
    render: (row) => row.date.toLocaleDateString()
  },
  { 
    key: 'description', 
    title: 'Description' 
  },
  { 
    key: 'amount', 
    title: 'Amount', 
    align: 'right',
    sort: true,
    total: true,
    render: (row) => `$${row.amount.toFixed(2)}`
  },
];

const data: Transaction[] = [
  { id: 1, date: new Date(), description: 'Payment', amount: 1200 },
  { id: 2, date: new Date(), description: 'Refund', amount: -150 },
];

function MyTable() {
  return (
    <FiTable
      data={data}
      columns={columns}
      pageable={true}
      totalRow={true}
      initialRowsPerPage={10}
      onRowClick={(row) => console.log('Clicked row:', row)}
    />
  );
}

FiCard

A compact card component for displaying key metrics and values.

Features:

• Title and optional subtitle
• Prominent value display
• Optional icon
• Customizable colors and background
• Compact, consistent sizing

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | title | string | Yes | Card title | | value | React.ReactNode | Yes | Main value to display (can be text, number, or custom component) | | subtitle | string | No | Subtitle text below the title | | icon | React.ReactNode | No | Icon displayed in the top-right corner | | backgroundColor | string | No | Custom background color | | color | string | No | Text color for title and value | | isLoading | boolean | No | Show spinner instead of value | | sx | SxProps<Theme> | No | Custom styles to apply to the card |

Example:

import { FiCard } from 'fintivio-components-npm';
import { TrendingUp } from '@mui/icons-material';

function MyMetric() {
  return (
    <FiCard
      title="Total Revenue"
      subtitle="Last 30 days"
      value="$124,500"
      icon={<TrendingUp color="success" />}
      color="#10b981"
      backgroundColor="#f0fdf4"
    />
  );
}

Usage Patterns

Complete Page Layout

Combine components to create a full page layout:

import { FiPageWrapper, FiContentWrapper, FiTable, FiCard } from 'fintivio-components-npm';
import { Dashboard } from '@mui/icons-material';
import { Stack } from '@mui/material';

function DashboardPage() {
  return (
    <FiPageWrapper
      title="Dashboard"
      icon={<Dashboard color="primary" fontSize="small" />}
    >
      <Stack spacing={3}>
        {/* Metrics Cards */}
        <Stack direction="row" spacing={2}>
          <FiCard title="Revenue" value="$124,500" />
          <FiCard title="Users" value="1,234" />
          <FiCard title="Growth" value="+12%" />
        </Stack>

        {/* Data Table */}
        <FiContentWrapper
          title="Recent Transactions"
          subtitle="Last 30 days"
        >
          <FiTable
            data={transactions}
            columns={columns}
            pageable={true}
          />
        </FiContentWrapper>
      </Stack>
    </FiPageWrapper>
  );
}