94 lines
3.5 KiB
Markdown
94 lines
3.5 KiB
Markdown
|
|
xxx npx shadcn@latest init
|
|
|
|
✔ npx shadcn@latest init
|
|
|
|
✔ Would you like to use TypeScript (recommended)? Yes
|
|
✔ Which style would you like to use? Default
|
|
✔ Which base color would you like to use? Slate
|
|
✔ Where is your global CSS file? src/app/globals.css
|
|
✔ Would you like to use CSS variables...? Yes
|
|
✔ Where is your tailwind.config.ts...? tailwind.config.ts
|
|
✔ Configure the import alias for components: @/components
|
|
✔ Configure the import alias for utils: @/lib/utils
|
|
✔ Are you using React Server Components? Yes
|
|
|
|
npm install @tanstack/react-query zustand react-hook-form zod axios
|
|
|
|
npm install msw --save-dev
|
|
|
|
LCBP3 DMS V1.2.0
|
|
Custom Gem
|
|
รับทราบครับ เราจะไปขั้นตอนต่อไป คือการสร้าง App Shell Layout (โครงสร้างหน้าเว็บหลัก) ตามข้อกำหนด 5.1
|
|
|
|
เราจะสร้าง 3 ส่วนหลัก:
|
|
|
|
Sidebar (เมนูด้านข้าง)
|
|
|
|
Navbar/Header (แถบด้านบน)
|
|
|
|
Main Content Area (พื้นที่เนื้อหา)
|
|
|
|
2.1 ติดตั้ง Icons
|
|
npm install lucide-react
|
|
|
|
3.1 ติดตั้ง Shadcn Components ที่จำเป็น
|
|
npx shadcn@latest add card
|
|
npx shadcn@latest add table
|
|
npx shadcn@latest add button
|
|
npx shadcn@latest
|
|
|
|
4.1 ตั้งค่า React Query (TanStack Query) Provider
|
|
npm install @tanstack/react-query-devtools
|
|
|
|
4.2 ตั้งค่า Mock Service Worker (MSW)
|
|
npx msw init public/ --save
|
|
|
|
4.4 อัปเดต MyTasksTable (ให้เรียก API จริง)
|
|
npm install axios
|
|
|
|
5.1 ติดตั้ง Shadcn Components
|
|
npx shadcn@latest add badge
|
|
|
|
|
|
5.4 (ตัวอย่าง) การนำไปใช้ในหน้า RFA
|
|
เรายังไม่ได้สร้างหน้า /rfa/[id]/page.tsx แต่เมื่อสร้างเสร็จ เราจะเรียกใช้ Component นี้โดยส่ง props ไป:
|
|
|
|
// src/app/rfa/[id]/page.tsx (ตัวอย่างในอนาคต)
|
|
|
|
// import { mockWorkflow } from "@/mocks/data/mock-workflow";
|
|
// import { WorkflowVisualizer } from "@/components/workflow/workflow-visualizer";
|
|
|
|
// export default function RfaDetailPage({ params }: { params: { id: string } }) {
|
|
// // 1. (ในอนาคต) ดึงข้อมูล RFA และ Workflow steps จาก API
|
|
// // const { data: rfaData } = useQuery(...);
|
|
// // const steps = rfaData.workflowSteps;
|
|
|
|
// // 2. (ในอนาคต) ดึงสิทธิ์ผู้ใช้จาก Zustand (Global State)
|
|
// // const { user } = useAuthStore();
|
|
// // const isAdmin = user.role === 'ADMIN' || user.role === 'SUPER_ADMIN';
|
|
|
|
// // 3. ส่ง Props ไปยัง Component
|
|
// return (
|
|
// <div>
|
|
// {/* (แสดงรายละเอียด RFA ที่นี่) */}
|
|
|
|
// <WorkflowVisualizer
|
|
// steps={mockWorkflow} // (ใช้ rfaData.workflowSteps จริง)
|
|
// isAdmin={true} // (ใช้ isAdmin จริง)
|
|
// />
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
6.1 ติดตั้ง Shadcn Components ที่จำเป็น
|
|
npx shadcn@latest add avatar
|
|
npx shadcn@latest add dialog
|
|
npx shadcn@latest add form
|
|
npx shadcn@latest add input
|
|
npx shadcn@latest add label
|
|
npx shadcn@latest add dropdown-menu
|
|
npx shadcn@latest add checkbox
|
|
npx shadcn@latest add pagination
|
|
|
|
x 6.2 อัปเดต Mock API (MSW) x |