Home / Blog / How to create a Tax & Expense tracking screen

How to create a Tax & Expense tracking screen

24 Sep 2025 · 6 min read

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Expense Tracking Screen is a core feature in finance and budgeting apps, helping users log expenses, categorize transactions, and visualize their spending habits. A thoughtfully designed screen includes expense lists, category tags, input forms, and visual summaries like pie or bar charts. Features like daily, weekly, or monthly views, filtering, and budget progress indicators further enhance the user experience and support better financial planning.

This guide will walk you through the steps to design and implement an Expense Tracking Screen using the Ionic Design Kit. By leveraging its flexible UI components and the Ionic Framework, you can create a clear, responsive, and insightful interface that simplifies expense management and tax preparation for users.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start expense-tracker blank --type=react

3. Get inside the project directory

cd expense-tracker

4. Create a Tab bar component

Use this instruction to create a Tab bar component.

5. Create an Expense tracking page

Create page ExpenseTracking.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const ExpenseTracking: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default ExpenseTracking;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

6. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

7. Import necessary components and setup state

At the top of your file, import all required components from Ionic and set up state management for the segment control.

import { 
  IonButton, 
  IonButtons, 
  IonCol, 
  IonContent, 
  IonGrid, 
  IonHeader, 
  IonIcon, 
  IonItem, 
  IonLabel, 
  IonList, 
  IonNote, 
  IonPage, 
  IonRow, 
  IonSegment, 
  IonSegmentButton, 
  IonText, 
  IonTitle, 
  IonToolbar 
} from '@ionic/react';
import { 
  addCircle, 
  cash, 
  chevronBackOutline, 
  chevronForwardOutline, 
  documentText, 
  pencil, 
  settings 
} from 'ionicons/icons';
import { useState } from 'react';

const ExpenseTracking: React.FC = () => {
  const [selectedSegment, setSelectedSegment] = useState('plan');
  
  const budgetItems = [
    { percentage: '40%', category: 'Housing', amount: '$2,450' },
    { percentage: '25%', category: 'Food', amount: '$1,550' },
    { percentage: '15%', category: 'Lifestyle', amount: '$845' },
    { percentage: '10%', category: 'Savings', amount: '$600' },
  ];

  const incomeItems = [
    { icon: cash, label: 'Salary', amount: '$5,000' },
    { icon: documentText, label: 'Investments', amount: '$1,000' },
    { icon: addCircle, label: 'Add category', iconColor: 'medium' }
  ];
  
  return (
    <IonPage>
      ...
    </IonPage>
  );
};

The component includes state for the selected segment with a default value of 'plan', as well as arrays for budget and income data. This setup allows for easy management of the component's interactive elements and data display.

8. Create the header with toolbar and buttons

Add an IonHeader with a toolbar containing settings and edit buttons on either side, and a centered title showing the budget name.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonButton>
        <IonIcon slot='icon-only' icon={settings} />
      </IonButton>
    </IonButtons>
    <IonTitle>Joshua's monthly budget</IonTitle>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={pencil} />
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

The header uses IonButtons components with slot attributes to position buttons at the start and end of the toolbar. The IonTitle component displays the budget owner's name in the center. Icon-only buttons provide a clean interface for accessing settings and editing functionality.

9. Add segmented controls for view selection

Inside the content area, add a segment control to allow users to switch between different views of their budget data.

<IonContent className='ion-padding'>
  <IonSegment value={selectedSegment} onIonChange={(e) => setSelectedSegment(String(e.detail.value) || 'plan')}>
    <IonSegmentButton value='plan'>
      <IonLabel>Plan</IonLabel>
    </IonSegmentButton>
    <IonSegmentButton value='remaining'>
      <IonLabel>Remaining</IonLabel>
    </IonSegmentButton>
    <IonSegmentButton value='insights'>
      <IonLabel>Insights</IonLabel>
    </IonSegmentButton>
  </IonSegment>
  ...
</IonContent>

The IonSegment component is bound to the selectedSegment state variable and updates it through the onIonChange event handler. Three segments are provided for different views: 'Plan', 'Remaining', and 'Insights'. The content below this control will change based on the selected segment.

10. Create a plan view component

Define a separate component for the Plan view that shows date navigation, total planned expenses, and budget breakdown.

const PlanView = () => (
  <>
    <IonGrid className='ion-no-padding' style={{ marginTop: '32px', marginBottom: '32px' }}>
      <IonRow className='ion-align-items-center ion-justify-content-between'>
        <IonCol size='auto'>
          <IonButtons>
            <IonButton size='small' color='dark'>
              <IonIcon slot='icon-only' icon={chevronBackOutline} />
            </IonButton>
          </IonButtons>
        </IonCol>
        <IonCol>
          <p className='ion-text-center ion-no-margin'>30 Nov - 30 Dec</p>
        </IonCol>
        <IonCol size='auto'>
          <IonButtons>
            <IonButton size='small' color='dark'>
              <IonIcon slot='icon-only' icon={chevronForwardOutline} />
            </IonButton>
          </IonButtons>
        </IonCol>
      </IonRow>
    </IonGrid>

    ...
  </>
);

The PlanView component uses an IonGrid with three columns for date navigation. The left and right columns contain back and forward buttons, while the center column displays the current date range. This layout allows users to navigate between different budget periods.

11. Add expense summary information

Within the PlanView component, add text elements that display the total planned expenses and remaining budget.

<IonText color='medium' style={{ fontSize: '12px' }}>
  <p className='ion-no-margin'>
    Total planned expenses
  </p>
</IonText>
<IonText>
  <h2 className='ion-no-margin' style={{ marginTop: '8px', marginBottom: '8px' }}>
    $5,445
  </h2>
</IonText>
<IonText>
  <p className='ion-no-margin'>
    $555 left to budget
  </p>
</IonText>

Three IonText components are used to display expense information. The first shows a label in medium gray and smaller font, the second displays the total amount in a larger heading, and the third shows the remaining budget. Custom margin styles ensure proper spacing between elements.

12. Create a budget category list

Add a list that displays budget categories with their percentage allocations and amounts.

<IonList lines='none' className='ion-margin-top'>
  {budgetItems.map((item, index) => (
    <IonItem key={index} className='ion-no-padding' style={{ marginRight: '-16px' }}>
      <IonNote slot='start'>{item.percentage}</IonNote>
      <IonText>{item.category}</IonText>
      <IonNote slot='end'>{item.amount}</IonNote>
    </IonItem>
  ))}
</IonList>

An IonList with lines='none' creates a clean list without dividers. Each budget category is rendered as an IonItem with percentage on the left, category name in the center, and amount on the right. The map function iterates through the budgetItems array to generate list items dynamically.

13. Add an income section

Complete the PlanView by adding a section that displays income sources.

<h3>Income</h3>
<IonList lines='none' style={{ marginTop: '12px' }}>
  {incomeItems.map((item, index) => (
    <IonItem key={index} className='ion-no-padding' style={{ marginRight: '-16px' }}>
      <IonIcon icon={item.icon} slot='start' color={item.iconColor || 'primary'} />
      <IonText>{item.label}</IonText>
      {item.amount && <IonNote slot='end'>{item.amount}</IonNote>}
    </IonItem>
  ))}
</IonList>

A heading introduces the Income section, followed by another IonList. Each income source is displayed with an icon, label, and amount. The last item uses a different icon color to indicate it's an action item for adding new categories. Conditional rendering is used to display amounts only when they exist.

14. Integrate the Plan view and conditional rendering

Add the PlanView component to the main content area and set up conditional rendering based on the selected segment.

<IonContent className='ion-padding'>
  <IonSegment value={selectedSegment} onIonChange={(e) => setSelectedSegment(String(e.detail.value) || 'plan')}>
    <IonSegmentButton value='plan'>
      <IonLabel>Plan</IonLabel>
    </IonSegmentButton>
    <IonSegmentButton value='remaining'>
      <IonLabel>Remaining</IonLabel>
    </IonSegmentButton>
    <IonSegmentButton value='insights'>
      <IonLabel>Insights</IonLabel>
    </IonSegmentButton>
  </IonSegment>

  {selectedSegment === 'plan' && <PlanView />}
</IonContent>

The conditional rendering {selectedSegment === 'plan' && <PlanView />} ensures that the Plan view is only displayed when the 'plan' segment is selected. For a complete application, you would add similar components for the 'remaining' and 'insights' segments.

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made by  Karma  team with ❤️