Establish Next.js admin foundation with component architecture migration from Vue.js and Docker support

[Copilot]

Migrates admin application foundation from Vue.js/Nuxt to Next.js with TypeScript, establishing reusable component architecture pattern for remaining 86 pages.

Architecture

• Logic/View separation: Components follow hooks.ts (logic) + Component.tsx (view) pattern consistent with existing user/ directory
• Tailwind configuration: Custom spacing for sidebar (w-sidebar, ml-sidebar) eliminates magic numbers
• Component library: 8 foundational components (Header, Menu, Layout, Table, Modal, CommonButton, TextInput, SelectBox)
• Docker support: Containerized development environment with docker-compose integration

Key Components

Header: Modal state management with reusable Modal component

const { isOpenAccountModal, openAccountModal, closeAccountModal } = useHeaderHooks();
<Modal isOpen={isOpenAccountModal} onClose={closeAccountModal} title="アカウント">
  <p>アカウント情報</p>
</Modal>

Menu: Full navigation structure (11 operations, 15 applications, 7 listings) from Vue original

Forms: Type-safe inputs with error handling

<TextInput 
  label="名前" 
  value={name} 
  onChange={setName}
  error={errors.name?.message}
  required 
/>

Demo Pages

• pages/dashboard.tsx: Statistics dashboard template
• pages/users.tsx: Full CRUD example demonstrating Table + Modal + Form integration

Docker Configuration

Added Docker support for consistent development environment:

• Dockerfile: Node.js 22.13.0 with pnpm pre-installed
• docker-compose.yml: Admin service configuration on port 3001
• .dockerignore: Excludes node_modules and build artifacts for efficient image builds

Usage:

docker-compose up admin

Access at: http://localhost:3001

Migration Path

Foundation enables incremental migration of remaining:

• 26 components (Card variants, SearchBar, SubHeader, additional modals)
• 83 pages (groups, applications, listings)

Next steps: Authentication (NextAuth), API integration (SWR), page-by-page migration.

Original prompt

Refactor the entire Vue.js codebase located in admin_view into a new Next.js application within a new directory named admin.

Requirements:

1. Source & Destination:

   • Source: admin_view (Vue.js)
   • Destination: Create a new folder admin (Next.js)

2. Component Architecture:

   • Extract page elements into reusable components located in admin/src/components.
   • The pages directory should be composed of these components.
   • Use the existing structure in user/src/components as a reference for the folder structure and naming conventions.

3. File Separation (Logic vs. View):

   • For every component, strictly separate the logic and the rendering into two different files to improve readability.
   • One file should handle the View (JSX/TSX).
   • The other file should handle the Logic (Hooks, state management, functions).
   • This should mimic the pattern found in user/src/components.

4. Goal:

   • Replicate the functionality of the admin_view Vue application in the new admin Next.js application structure.

This pull request was created as a result of the following prompt from Copilot chat.

Refactor the entire Vue.js codebase located in admin_view into a new Next.js application within a new directory named admin.

Requirements:

1. Source & Destination:

   • Source: admin_view (Vue.js)
   • Destination: Create a new folder admin (Next.js)

2. Component Architecture:

   • Extract page elements into reusable components located in admin/src/components.
   • The pages directory should be composed of these components.
   • Use the existing structure in user/src/components as a reference for the folder structure and naming conventions.

3. File Separation (Logic vs. View):

   • For every component, strictly separate the logic and the rendering into two different files to improve readability.
   • One file should handle the View (JSX/TSX).
   • The other file should handle the Logic (Hooks, state management, functions).
   • This should mimic the pattern found in user/src/components.

4. Goal:

   • Replicate the functionality of the admin_view Vue application in the new admin Next.js application structure.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[hikahana]

@copilot docker環境で作成して使用しているのでadminもdockerで立ち上がるようにcompose.ymlに追加修正と、adminにdockerfileを作成してください

[Copilot]

@copilot docker環境で作成して使用しているのでadminもdockerで立ち上がるようにcompose.ymlに追加修正と、adminにdockerfileを作成してください

Docker サポートを追加したよ！🐳✨

追加したファイル:

• admin/Dockerfile - Node.js 22.13.0 + pnpm のベースイメージ
• admin/.dockerignore - ビルド成果物と node_modules を除外
• compose.yml に admin サービスを追加

起動方法:

docker-compose up admin

アクセス: http://localhost:3001

commit: a23f567