<![CDATA[General Background Public institutions rely heavily on official travel orders (SPPD) to manage administrative assignments and ensure operational accountability. Specific Background At BPVP Sidoarjo, the processing and generation of SPPD documents currently depend on manual data entry using Microsoft Excel. Knowledge Gap This manual approach leads to frequent typographical errors, lengthy data processing times, visual unattractiveness, and limited accessibility across mobile or tablet environments. Aims This study designs and optimizes a responsive web-based application front-end leveraging the Vue.js framework to streamline the SPPD input process. Results The system digitizes forms, automates report previews, supports multiple devices, and integrates modules for delegating tasks, managing payment orders (SPM), and generating official receipts. Novelty By implementing a structured front-end architecture using Vue.js combined with role authentication, the research transforms a spreadsheet-bound administrative workflow into a fully responsive, intuitive web interface specifically tailored for vocational training centers. Implications This system substantially improves administrative efficiency, reduces processing errors, and supports digital transformation goals within public sector institutions. Key Findings Highlights Web-based front-end digitization replaces manual spreadsheet entry to reduce input errors and speed up processing. Responsive interface development using Vue.js ensures smooth administrative workflows across smartphones, tablets, and desktop computers. Automated document modules seamlessly integrate travel delegation, payment orders, and receipt generation into printable official PDF forms. Keywords Front-End Design, Interface Optimization, Official Travel Orders, Responsive Web Application, Vue Framework]]>
