ArCore
ArCore is an enterprise operations platform for client Arsari Tambang, delivered through PT Tarung Bersama Teknologi as IT vendor/consultant. Frontend contribution: UI for Data Offshore, Production & Cost, and Timesheet & Equipment with Next.js 16, React 19, and TypeScript.
Arsari Tambang
Frontend Engineer
Jan 2026 - Apr 2026
4 · Frontend Engineer
Impact
Offshore, Cost, Equipment
UI Modules
Next.js + Redux Toolkit
Stack
Problem
Client operations users needed consistent, easy-to-use interfaces for field reporting, cost views, and equipment workflows across many module pages.
Research
Mapped UI requirements with the Tarung team and client stakeholders for forms, tables, filters, and dashboards across Data Offshore, Production & Cost, and Equipment Timesheet.
Constraints
Many UI modules in one enterprise app, complex cross-page state, and a need for reusable table, form, and chart components.
Solution
Built a Next.js 16 enterprise frontend with modular UI components, Redux Toolkit state management, and interactive visualization dashboards for core operational modules.
Design & Architecture
Used Next.js App Router with Redux Toolkit for global UI state, Axios for data fetching, and ApexCharts/ECharts for dashboard visualization.
Development
Frontend engineering for module pages, table and form components, state management, and dashboard visualization.
Challenges
Keeping UX consistency and UI performance while combining many operational flows in one frontend application.
Lessons Learned
Clear UI module structure has more impact than visual extras in enterprise frontend delivery.
Frontend Modules
Data Offshore UI
Forms and reporting UI for LKH, LKS, and LPS, including coordinates, weather, and vessel fields for maritime/survey teams.
Production & Cost UI
Monitoring pages for production and cost: throughput tables, fuel/electricity usage, currency adjustments, and cost-code views.
Timesheet & Equipment UI
Operator timesheet and heavy-equipment status interfaces, including downtime views by reason code and equipment group.
Frontend Architecture
Core Stack
Next.js 16 (App Router), React 19, and TypeScript.
UI State & Data Fetching
Redux Toolkit/Persist, Axios, and TanStack Table.
UI & Visualization
Bootstrap 5/Reactstrap, ApexCharts/ECharts, and Remix/Feather icons.
Stack