ToolSwiftSaaS products
ToolSwift admin platform
An administration interface for headless e-commerce, with product catalogs, inventory and customer workflows.
Context / scope
Overview and scope
The admin platform is the back-office for the same headless commerce system: merchants manage catalogs, products and inventory, orders, quotes, payments, customers and companies, discounts, content and integrations from one interface.
It is a React (Vite, JSX) single-page app using React Router 7, Redux Toolkit with RTK Query, redux-persist, MUI with the MUI X data grid, Chart.js and Socket.IO.
Store staff need to process orders and quotes quickly, keep inventory accurate across locations, and understand sales without exporting data. The surface area is wide, so navigation is grouped (General, Analysis, Customer, Sales Channels, Integrations) and every list shares the same tab, search, filter and sort pattern.
Merchants also need confidence that changes take effect: statuses update through live counts and tags, and exports let finance and operations take data out when they must.
Front-end developer: part of the ToolSwift front-end work, building admin modules, reports and shared list components.
Results
- Delivered the merchant back-office as one interface for catalog, orders, quotes, payments, customers and integrations, with shared list patterns across modules. The CV does not record separate metrics for the admin console, so none are claimed.
Interface / screens
Walkthrough
Screen 1 of 6: Dashboard with sales overview. Real interface, sample data.
Behaviour / flows
Features and flows
Dashboard and analytics: sales, orders, sales by address, monthly charts and top-selling products, with Overview, Sales, Products and Customers reports.
Orders, quotes, payments and documents: status tabs with live counts, detail pages, drafts and exports.
Catalog and customers: products, variants and attributes, categories, catalogs, discounts, customer groups and companies, reviews and moderation.
Integrations and channels: store locations, shipping and payment gateways, Google Merchant Center, SMS messaging and worker jobs.
Working with order lists
- Order filters include date range, payment status, customer and job.
- Opening a draft row resumes the order creation flow; opening an order row goes to its details.
- The orders table lets staff change which columns are visible.
Engineering / decisions
Architecture and decisions
RTK Query services are split per domain (around thirty API modules: orders, products, catalogs, customers, discounts, documents, inventory, jobs, marketing and more) on a shared base query, which gives cache invalidation by tag and consistent loading and error handling.
A guided in-app help system (app guide) explains each area, and the shared list components keep table behaviour identical across modules.
Drafts adapted to the order table
The Draft tab fetches order drafts while skipping the orders query. A normalization helper maps draft responses to the order-list shape so the same table can display them.
Refresh orders from socket events
An order-update listener invalidates the orders, order-detail and insights cache tags. It refreshes those views without incrementing the notification badge.
Stack / tools
Technologies
- React
- Vite
- MUI
- MUI X
- Redux Toolkit
- RTK Query
- Chart.js
- Socket.IO
Part of ToolSwift
ToolSwift is a headless commerce platform with a merchant admin interface and a B2B customer portal.
The admin handles catalogues, inventory, orders and quotes; the customer portal lets company buyers browse products, build carts and manage orders and payments.
I implemented the front ends, including a marketing site with product pages, articles and a demo-request form.