Required Refactoring

Header Extraction

• Extract header section into Header.vue

Main Content Separation

• Move main page content into MainPage.vue

Footer Extraction

• Footer must become an independent component.
• Footer contains action buttons.
• Button logic should NOT remain inline.

Example:

<footer>
<buttononclick="save()">Save</button>
</footer>

Must become:

<template>
<footer>
<button @click="onSave">Save</button>
</footer>
</template>

STEP 3 - Convert JavaScript to Vue Style

Existing JavaScript is written in vanilla JS.

The AI Agent must convert it into Vue-compatible patterns.

Forbidden Patterns

The following patterns should be removed or minimized: