Building Custom Dashboards with Linbis API: Your Freight Data, Your Interface š§©š
Why Build a Custom Freight Dashboard? š¦š
Most software shows you some data. But custom dashboards give you full control:
- š Show only what matters: ETA, mode, delays, last updates
- š„ Segment views by user roles or departments
- š§¾ Combine shipments, invoices, and documents in one screen
- šØ Highlight exceptions or overdue tasks
- š Embed live status for clients in your portal
With Linbis API, you get raw access to the dataāyou decide how itās visualized.
Getting Started: What You Need š§°
To follow this tutorial, youāll need:
- React + Vite or CRA (Create React App)
- Axios or Fetch API client
- Your Linbis API key
- Basic knowledge of React components and hooks
ā Prefer Vue or Angular? The concept still appliesāyou just replace the framework.
Step 1: Authenticate and Fetch Freight Data š
Start by requesting your shipment list:
javascript
CopiarEditar
import axios from ‘axios’;
Ā
const API_KEY = ‘YOUR_API_KEY’;
Ā
export const fetchShipments = async () => {
Ā Ā const res = await axios.get(‘https://api.linbis.com/v1/shipments’, {
Ā Ā Ā Ā headers: {
Ā Ā Ā Ā Ā Ā Authorization: `Bearer ${API_KEY}`
Ā Ā Ā Ā }
Ā Ā });
Ā Ā return res.data;
};
Ā
Use useEffect() to fetch on component mount and store in state:
javascript
CopiarEditar
useEffect(() => {
Ā Ā fetchShipments().then(setShipments);
}, []);
Step 2: Create Dashboard Layout with Cards š§©
Hereās a simple dashboard layout using React:
jsx
CopiarEditar
const Dashboard = ({ shipments }) => (
Ā Ā <div className=”grid grid-cols-3 gap-4″>
Ā Ā Ā Ā {shipments.map(s => (
Ā Ā Ā Ā Ā Ā <div key={s.id} className=”p-4 border rounded shadow”>
Ā Ā Ā Ā Ā Ā Ā Ā <h3>{s.reference}</h3>
Ā Ā Ā Ā Ā Ā Ā Ā <p>Status: {s.status}</p>
Ā Ā Ā Ā Ā Ā Ā Ā <p>ETA: {s.eta}</p>
Ā Ā Ā Ā Ā Ā Ā Ā <p>Mode: {s.mode}</p>
Ā Ā Ā Ā Ā Ā </div>
Ā Ā Ā Ā ))}
Ā Ā </div>
);
Ā
šØ Style it using TailwindCSS, Bootstrap, or your own branding.
Step 3: Add Filters, Sorting, and Alerts š
Make your dashboard dynamic:
- ā³ Filter by status (In Transit, Delivered, Delayed)
- š
Sort by ETA or creation date
- šØ Highlight late shipments in red
- š Add clickable rows for shipment detail view
Example filter logic:
jsx
CopiarEditar
const delayed = shipments.filter(s => s.status === ‘Delayed’);
Ā
Step 4: Make It Client-Ready š
- Use a secure login to show filtered dashboards per client
- Embed the dashboard in your Linbis-powered portal
- Add export to PDF or CSV options
- Use webhooks to refresh data in real time without polling
Your dashboard can be as simpleāor as advancedāas your team needs.
Sample Project on GitHub š
To save you time, weāve published a ready-to-use React freight API dashboard example on GitHub.
š GitHub repo: github.com/linbis/freight-dashboard-react
It includes:
- Auth setup
- Dashboard layout
- Shipment filtering
- Status colors and icons
- Responsive UI
Fork it, clone it, and customize it to your operations.
Build Smarter, Not Slower
With the freight API dashboard approach, you control the experienceāinternally and externally. Stop adapting your workflow to rigid software. Build your own interface using Linbis data, and scale your visibility with zero limits.
š View code and start building your freight dashboard today.