init project portal web

2025-04-15 13:56:54 +07:00
parent 9a25243035
commit 8b15dcebf8
122 changed files with 13965 additions and 1 deletions
--- a/35
+++ b/35
@ -0,0 +1,35 @@
+# Step 1: Build the application in a Node environment
+FROM node:18 AS builder
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json to install dependencies
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the app's source code
+COPY . .
+
+# Build the Next.js application for production
+RUN npm run build
+
+# Step 2: Create a minimal production environment
+FROM node:18-alpine
+
+# Set the working directory in the production container
+WORKDIR /app
+
+# Copy only the necessary files from the builder stage
+COPY --from=builder /app/package.json /app/package-lock.json ./
+COPY --from=builder /app/.next /app/.next
+COPY --from=builder /app/public /app/public
+COPY --from=builder /app/node_modules /app/node_modules
+
+# Expose the port the app will run on
+EXPOSE 3000
+
+# Start the app in production mode
+CMD ["npm", "run", "start"]
--- a/README.md
+++ b/README.md
@ -1,2 +1,121 @@
-# ocs-portal-web
+# Project Next.js 14 dengan Zustand, React Query (TanStack), dan ShadCN

+## 📌 Pendahuluan
+Proyek ini menggunakan **Next.js 14** sebagai kerangka kerja utama, dengan **Zustand** untuk manajemen state, **React Query (TanStack)** untuk pengelolaan data asinkron, dan **ShadCN** untuk komponen UI yang modern dan fleksibel.
+
+## 🛠️ Teknologi yang Digunakan
+- [Next.js 14](https://nextjs.org/) - Framework React untuk aplikasi web modern.
+- [Zustand](https://zustand-demo.pmnd.rs/) - Manajemen state yang ringan dan fleksibel.
+- [React Query (TanStack)](https://tanstack.com/query/latest) - Manajemen data server-side yang efisien.
+- [ShadCN](https://ui.shadcn.com/) - Komponen UI berbasis Radix dan Tailwind CSS.
+
+## 🚀 Instalasi
+Pastikan Anda sudah menginstal **Node.js** dan **pnpm/npm/yarn** sebelum memulai.
+
+1. Clone repositori ini:
+   ```sh
+   git clone https://github.com/username/repository.git
+   cd repository
+   ```
+
+2. Install dependensi:
+   ```sh
+   pnpm install  # atau npm install / yarn install
+   ```
+
+3. Jalankan proyek dalam mode pengembangan:
+   ```sh
+   pnpm dev  # atau npm run dev / yarn dev
+   ```
+
+4. Buka browser dan akses **http://localhost:3000**.
+
+## 🏗️ Penggunaan
+### Manajemen State dengan Zustand
+Buat file di `store/useExampleStore.ts`:
+```ts
+import { create } from 'zustand';
+
+type ExampleState = {
+  count: number;
+  increment: () => void;
+};
+
+export const useExampleStore = create<ExampleState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+}));
+```
+Penggunaan dalam komponen:
+```tsx
+import { useExampleStore } from '@/store/useExampleStore';
+
+export default function Counter() {
+  const { count, increment } = useExampleStore();
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment} className="btn">Tambah</button>
+    </div>
+  );
+}
+```
+
+### Fetching Data dengan React Query (TanStack)
+Buat file di `lib/api.ts`:
+```ts
+export const fetchData = async () => {
+  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+  if (!res.ok) throw new Error('Gagal mengambil data');
+  return res.json();
+};
+```
+Penggunaan dalam komponen:
+```tsx
+import { useQuery } from '@tanstack/react-query';
+import { fetchData } from '@/lib/api';
+
+export default function DataList() {
+  const { data, error, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchData });
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  return (
+    <ul>
+      {data.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Menggunakan Komponen UI dari ShadCN
+Pastikan telah menginstal ShadCN:
+```sh
+pnpm dlx shadcn-ui@latest init
+```
+Contoh penggunaan tombol:
+```tsx
+import { Button } from '@/components/ui/button';
+
+export default function ExampleButton() {
+  return <Button variant="outline">Klik Saya</Button>;
+}
+```
+
+## ✅ TODO
+- [x] Setup Next.js 14
+- [x] Integrasi Zustand untuk state management
+- [x] Implementasi React Query (TanStack) untuk fetching data
+- [x] Konfigurasi ShadCN untuk komponen UI
+- [ ] Tambahkan autentikasi dengan NextAuth
+- [ ] Implementasi dark mode
+
+## 📜 Lisensi
+Proyek ini dilisensikan di bawah [MIT License](LICENSE).
+
+---
+
+Selamat ngoding! 🚀
--- a/app/api/cookies/route.ts
+++ b/app/api/cookies/route.ts
@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+
+export async function GET() {
+  const cookieStore = cookies();
+  const credential = JSON.parse(cookieStore.get("credential")?.value || "");
+
+
+  return NextResponse.json({ credential });
+}
--- a/app/api/login/route.ts
+++ b/app/api/login/route.ts
@ -0,0 +1,55 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (request: NextRequest) => {
+    // INTERPOLATING API URL OF BACKEND
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/auth/login`
+    // GET REQUEST BODY
+    const {username, password} = await request.json();
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            data: JSON.stringify({
+                userName: username,
+                password,
+            })
+        })
+        
+
+        if (response?.data ?? false) {
+            const token: string = response.data.data.token;
+            const expired = response.data.data.expired;
+            const data = {
+                username: response.data.data.username,
+                token
+            }
+            cookies().set({
+                name: 'credential',
+                value: JSON.stringify(data),
+                httpOnly: false,
+                sameSite: 'strict',
+                path: '/',
+                maxAge: expired
+            })
+        }
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: unknown) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/logout/route.ts
+++ b/app/api/logout/route.ts
@ -0,0 +1,18 @@
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export const POST = async () => {
+    // Hapus cookie 'credential'
+    cookies().delete({
+        name: "credential",
+        httpOnly: false,
+        sameSite: 'strict',
+        path: '/',
+        maxAge: 0,
+    })
+    // Return a JSON response
+    return NextResponse.json({
+        message: 'Cookie deleted successfully.',
+        status: 'success',
+    }, { status: 200 });
+};
--- a/app/api/priceplan-detail/usage-event/route.ts
+++ b/app/api/priceplan-detail/usage-event/route.ts
@ -0,0 +1,36 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server';
+
+export const POST = async () => {
+    // INTERPOLATING API URL OF BACKEND
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/usage_event/list`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+        })        
+
+        
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/priceplan/create/route.ts
+++ b/app/api/priceplan/create/route.ts
@ -0,0 +1,58 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (request: NextRequest) => {
+    // INTERPOLATING API URL OF BACKEND
+    const {
+        offerType,
+        offerName,
+        pricePlanCode,
+        remarks,
+        sourceFrom,
+        baseValidPeriod,
+        serviceType,
+        versionValidPeriod
+    } = await request.json();
+    
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/priceplan/createpriceplan`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+            data: JSON.stringify({
+                offerType,
+                offerName,
+                applyLevel: "S",
+                pricePlanCode,
+                remarks,
+                sourceFrom,
+                baseValidPeriod,
+                versionValidPeriod,
+                serviceType
+            })
+        })
+
+
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/priceplan/delete/route.ts
+++ b/app/api/priceplan/delete/route.ts
@ -0,0 +1,36 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (request: NextRequest) => {
+    // INTERPOLATING API URL OF BACKEND
+    const {id} = await request.json();
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/priceplan/delete/${id}`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'DELETE',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+        })
+        
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/priceplan/menu/route.ts
+++ b/app/api/priceplan/menu/route.ts
@ -0,0 +1,39 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server';
+
+export const POST = async () => {
+    // INTERPOLATING API URL OF BACKEND
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/priceplan/getmenuList`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+    // console.log(token, 'cek token');
+    
+    
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+        })        
+
+        
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/priceplan/route.ts
+++ b/app/api/priceplan/route.ts
@ -0,0 +1,39 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (request: NextRequest) => {
+    // INTERPOLATING API URL OF BACKEND
+    const {page, size, type} = await request.json();
+    let url: string = `${process.env.NEXT_PUBLIC_API_URL}/priceplan/list`
+    if(type) url += `/${type}`
+    url += `?page=${page}&size=${size}`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+        })        
+
+        
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/priceplan/servetypes/route.ts
+++ b/app/api/priceplan/servetypes/route.ts
@ -0,0 +1,36 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server';
+
+export const POST = async () => {
+    // INTERPOLATING API URL OF BACKEND
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/priceplan/getservtype`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+        })        
+
+        
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/priceplan/types/route.ts
+++ b/app/api/priceplan/types/route.ts
@ -0,0 +1,36 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server';
+
+export const POST = async () => {
+    // INTERPOLATING API URL OF BACKEND
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/priceplan/getalltype`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+        })        
+
+        
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/api/rate-plan/create/route.ts
+++ b/app/api/rate-plan/create/route.ts
@ -0,0 +1,55 @@
+import axios from 'axios';
+import { cookies } from 'next/headers'
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (request: NextRequest) => {
+    // INTERPOLATING API URL OF BACKEND
+    const {
+        offerVerId,
+        offerType,
+        reId,
+        ratePlanName,
+        ratePlanCode,
+        remarks,
+        ratePlanType,
+    } = await request.json();
+    
+    const url: string = `${process.env.NEXT_PUBLIC_API_URL}/priceplan/createpriceplan`
+    const data = JSON.parse(cookies().get('credential')?.value ?? "")
+    const token = `Bearer ${data.token}`
+
+    try {
+        // MAKE AN API REQUEST
+        /*
+        * - WE USE AXIOS INSTEAD OF FETCH 
+        * - FETCH ALWAYS RETURNS "TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed" 
+        *   WHEN WE RUN "response.json()"
+        */
+        const response = await axios(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Authorization': token
+            },
+            data: JSON.stringify({
+                offerVerId,
+                offerType,
+                reId,
+                ratePlanName,
+                ratePlanCode,
+                remarks,
+                ratePlanType,
+            })
+        })
+
+
+        return NextResponse.json(response.data, { status: response.status });
+    } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+            return NextResponse.json(error.response?.data || { message: 'Unknown error' }, { status: error.response?.status || 500 });
+        }
+        return NextResponse.json({ message: 'An unexpected error occurred' }, { status: 500 });
+
+    }
+}
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@ -0,0 +1,98 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 189 100% 31%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;    
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: "Outfit", sans-serif;
+    box-sizing: border-box;
+  }
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "OCS Portal Web",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body suppressHydrationWarning={true}>{children}</body>
+    </html>
+  );
+}
--- a/app/main/layout.tsx
+++ b/app/main/layout.tsx
@ -0,0 +1,15 @@
+import MainLayout from "@/components/layout/main-layout"
+
+interface Props {
+    children: React.ReactNode
+}
+
+const Layout = ({
+    children
+}: Props) => {
+    return (
+        <MainLayout>{children}</MainLayout>
+    )
+}
+
+export default Layout
--- a/app/main/price-plan/[id]/page.tsx
+++ b/app/main/price-plan/[id]/page.tsx
@ -0,0 +1,16 @@
+import PricePlanDetail from "@/lib/price-plan-detail/view"
+
+interface Props {
+    params: {
+      id: string
+    }
+  }
+
+const Page = ({params}: Props) => {
+    const id = params.id
+    return (
+        <PricePlanDetail id={id}/>
+    )
+}
+
+export default Page
--- a/app/main/price-plan/page.tsx
+++ b/app/main/price-plan/page.tsx
@ -0,0 +1,9 @@
+import PricePlanList from "@/lib/price-plan/view"
+
+const PricePlan = () => {
+  return (
+    <PricePlanList/>
+  )
+}
+
+export default PricePlan
--- a/app/onboard/login/page.tsx
+++ b/app/onboard/login/page.tsx
@ -0,0 +1,10 @@
+import Login from "@/lib/login/view"
+
+
+const LoginPage = () => {
+    return (
+       <Login/>
+    )
+}
+
+export default LoginPage
--- a/app/page.tsx
+++ b/app/page.tsx
@ -0,0 +1,11 @@
+import AppBar from "@/components/module/app-bar"
+import HomeView from "@/lib/home/view"
+
+export default function homePage() {
+  return (
+    <div className="bg-[#F2F8F4] w-full h-screen">
+      <AppBar useLogo/>
+      <HomeView />
+    </div>
+  )
+}
--- a/components.json
+++ b/components.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/components/layout/main-layout/index.tsx
+++ b/components/layout/main-layout/index.tsx
@ -0,0 +1,38 @@
+"use client"
+
+import AppBar from "@/components/module/app-bar"
+import { SidebarProvider } from "@/components/ui/sidebar"
+import PricePlanSidebar from "@/lib/price-plan/view/sidebar"
+import { usePathname } from "next/navigation"
+import React from "react"
+import { Toaster } from "sonner"
+
+interface Props {
+    children: React.ReactNode
+}
+
+const MainLayout = ({
+    children
+}: Props) => {
+    const pathname = usePathname()
+    const match = pathname.match(/\/price-plan\/(\d+)/)
+
+    return (
+        <SidebarProvider>
+            {!match && <PricePlanSidebar />}
+            <section className="w-full">
+                <AppBar useLogo={false} />
+                <main className="py-4">
+                    {children}
+                </main>
+            </section>
+            <Toaster
+                richColors
+                position="top-right"
+                duration={1500}
+            />
+        </SidebarProvider>
+    )
+}
+
+export default MainLayout
--- a/components/module/action-table/index.tsx
+++ b/components/module/action-table/index.tsx
@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Download, Filter, Plus, Upload } from "lucide-react"
+
+interface Props {
+    onClickNew: () => void
+}
+
+const ActionTable = ({
+    onClickNew
+}: Props) => {
+    return (
+        <div className="flex gap-3 items-center mx-8 mt-4">
+            <Button className="max-w-[74.5px]" variant="default" onClick={onClickNew}>
+                <Plus/>
+                New
+            </Button>
+            <Button className="bg-[#299CDB]" variant="default">
+                <Download/>
+                Import
+            </Button>
+            <Button className="bg-[#E57000]" variant="default">
+                <Upload/>
+                Export
+            </Button>
+            <Input 
+                className="border-primary"
+                placeholder="Search for customer, email, phone, status or something.."
+            />
+            <Button className="bg-[#405189]" variant="default">
+                <Filter/>
+                Filter
+            </Button>
+        </div>
+    )
+}
+
+export default ActionTable
--- a/components/module/app-bar/index.tsx
+++ b/components/module/app-bar/index.tsx
@ -0,0 +1,81 @@
+"use client"
+import { loginRepository } from "@/lib/login/data/repository"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import { useMutation } from "@tanstack/react-query"
+import QueryWrapper from "../query-wrapper"
+import { useRouter } from "next/navigation"
+import logo_2 from "@/images/Telkomcel.png"
+import ava from "@/images/ava.png"
+import Image from "next/image"
+import { useEffect, useState } from "react"
+
+interface Props {
+    useLogo: boolean
+}
+
+const Content = ({
+    useLogo
+}: Props) => {
+    const [username, setUserName] = useState("");
+    const router = useRouter()
+    const mutation = useMutation({
+        mutationFn: () => loginRepository.logout(),
+        onSuccess: () => {
+            router.push("/onboard/login")
+        },
+        onError: () => {
+            console.log('error')
+        },
+    })
+
+    useEffect(() => {
+        fetch("/api/cookies")
+            .then((res) => res.json())
+            .then((data) => setUserName(data.credential.username));
+    }, []);
+
+    return (
+        <div className="flex justify-between items-center py-5 px-10 bg-white relative w-full">
+            {useLogo ? <div className="flex gap-2">
+                <div className="max-w-60">
+                    <Image src={logo_2} alt="logo_2" priority={false}/>
+                </div>
+            </div> : <div/>}
+            <div>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <div className="flex items-center gap-2 cursor-pointer">
+                            <div className="text-end">
+                                <h4 className="text-black-80 text-base">Welcome,</h4>
+                                <h4 className="text-black-100 uppercase">{username}</h4>
+                            </div>
+                            <Image src={ava} alt="ava" className="cursor-pointer" />
+                        </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-56 bg-white mr-8 shadow-md rounded-md transition-transform data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut text-black-70 hover:text-black-50">
+                        <DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
+                            <button className="w-full flex justify-start">
+                                Profile
+                            </button>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
+                            <button className="w-full flex justify-start" onClick={() => mutation.mutate()}>
+                                Logout
+                            </button>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </div>
+    )
+}
+
+const AppBar = ({useLogo = true}: {useLogo: boolean}) => {
+    return (
+        <QueryWrapper>
+            <Content useLogo={useLogo}/>
+        </QueryWrapper>
+    )
+}
+
+export default AppBar
--- a/components/module/backdrop/index.tsx
+++ b/components/module/backdrop/index.tsx
@ -0,0 +1,28 @@
+import { ReactNode } from "react"
+
+interface BackdropProps {
+  isOpen: boolean
+  onClose?: () => void
+  children: ReactNode
+}
+
+const Backdrop = ({ isOpen, onClose, children }: BackdropProps) => {
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black-50/70 blur-md flex items-center justify-center">
+      {/* Backdrop layer */}
+      <div
+        className="absolute inset-0"
+        onClick={onClose}
+      />
+      
+      {/* Dialog content */}
+      <div className="relative z-10">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Backdrop
--- a/components/module/data-table-pagination/index.tsx
+++ b/components/module/data-table-pagination/index.tsx
@ -0,0 +1,97 @@
+import { Table } from "@tanstack/react-table"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTablePagination<TData>({
+  table,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex items-center justify-between px-2">
+      <div className="flex-1 text-sm text-muted-foreground">
+        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value))
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/components/module/data-table/index.tsx
+++ b/components/module/data-table/index.tsx
@ -0,0 +1,150 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    getPaginationRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { DataTablePagination } from "../data-table-pagination";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+
+interface PaginationState {
+    pageIndex: number
+    pageSize: number
+    pageCount: number
+    setPageIndex: (page: number) => void
+    setPageSize: (size: number) => void
+}
+
+interface AlertDialogState {
+    isOpen: boolean
+    title?: string
+    description?: string
+    confirmText?: string
+    cancelText?: string
+    setOpen: (isOpen: boolean) => void
+    onConfirm: () => void
+    onCancel: () => void
+}
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    pagination?: PaginationState,
+    alertDialog?: AlertDialogState,
+}
+
+const DataTable = <TData, TValue>({
+    data,
+    columns,
+    pagination,
+    alertDialog
+}: DataTableProps<TData, TValue>) => {
+    const table = useReactTable({
+        data,
+        columns,
+        pageCount: pagination?.pageCount,
+        state: {
+            pagination: {
+                pageIndex: pagination?.pageIndex ?? 0,
+                pageSize: pagination?.pageSize ?? 10,
+            },
+        },
+        onPaginationChange: (updater) => {
+            if (!pagination) return;
+            const next = typeof updater === 'function'
+                ? updater({ pageIndex: pagination.pageIndex, pageSize: pagination.pageSize })
+                : updater;
+            pagination.setPageIndex(next.pageIndex)
+            pagination.setPageSize(next.pageSize)
+        },
+        manualPagination: true,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+    })
+
+    return (
+        <div className="mx-8 space-y-4">
+            <div className="rounded-md mt-4">
+                <Table className="border-separate border-spacing-0">
+                    <TableHeader className="bg-primary rounded-lg">
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header, index) => {
+                                    const isFirst = index === 0;
+                                    const isLast = index === headerGroup.headers.length - 1;
+                                    return (
+                                        <TableHead
+                                            key={header.id}
+                                            className={`text-white ${isFirst ? "rounded-tl-md" : ""} ${isLast ? "rounded-tr-md" : ""}`}
+                                        >
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="border-b border-[#00879E]">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <DataTablePagination table={table} />
+            <AlertDialog open={alertDialog?.isOpen} onOpenChange={alertDialog?.setOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            This action cannot be undone. This will permanently remove your data
+                            from our servers.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel onClick={alertDialog?.onCancel}>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={alertDialog?.onConfirm}>Continue</AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+        </div>
+    )
+
+}
+
+export default DataTable
--- a/components/module/date-picker/index.tsx
+++ b/components/module/date-picker/index.tsx
@ -0,0 +1,49 @@
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import React from "react"
+
+export function DatePicker({
+    value,
+    onChange,
+    placeholder = "Select Date",
+  }: {
+    value?: Date,
+    placeholder?: string,
+    onChange?: (date: Date | undefined) => void
+  }) {
+    const [date, setDate] = React.useState<Date | undefined>(value)
+  
+    React.useEffect(() => {
+      if (onChange) onChange(date)
+    }, [date])
+  
+    return (
+      <Popover modal={true}>
+        <PopoverTrigger asChild>
+          <Button
+            variant={"outline"}
+            className={cn(
+              "w-full justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date ? format(date, "PPP") : <span>{placeholder}</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+  
--- a/components/module/dropdown/index.tsx
+++ b/components/module/dropdown/index.tsx
@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
--- a/components/module/input-password/index.tsx
+++ b/components/module/input-password/index.tsx
@ -0,0 +1,27 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/ui/input";
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const InputPassword = ({ ...props }: Props) => {
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+        <div className="relative w-full">
+            <Input 
+                type={showPassword ? "text" : "password"} 
+                {...props}
+            />
+            <button
+                type="button"
+                className="absolute inset-y-0 right-3 flex items-center text-gray-500"
+                onClick={() => setShowPassword((prev) => !prev)}
+            >
+                {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+            </button>
+        </div>
+    );
+};
+
+export default InputPassword;
--- a/components/module/query-wrapper/index.tsx
+++ b/components/module/query-wrapper/index.tsx
@ -0,0 +1,10 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+// import { useState } from 'react';
+
+export default function QueryWrapper({ children }: { children: React.ReactNode }) {
+  const queryClient = new QueryClient()
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
--- a/components/module/sidebar/price-plan-sidebar/index.tsx
+++ b/components/module/sidebar/price-plan-sidebar/index.tsx
@ -0,0 +1,78 @@
+"use client"
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Sidebar, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
+import { ChevronDown, DollarSign, LayoutDashboard } from "lucide-react"
+import mainLogo from "@/images/logo.png"
+import Image from "next/image"
+import QueryWrapper from "@/components/module/query-wrapper"
+import { useMenuPricePlan } from "./view-model"
+import Link from "next/link"
+
+const Content = () => {
+    const vm = useMenuPricePlan()
+
+    return (
+        <div>
+            <Sidebar>
+                <SidebarHeader className="mb-12">
+                    <div className="flex gap-2 items-center mx-auto">
+                        <Image src={mainLogo} alt="main-logo" width={42} height={42} />
+                        <h1 className="text-2xl">NetworkPro</h1>
+                    </div>
+                </SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem className="px-2">
+                        <SidebarMenuButton>
+                            <Link href="/" className="flex items-center gap-2 w-full text-white/60">
+                                <LayoutDashboard size={14}/>
+                                <span className="text-lg font-light">Dashboard</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+                {vm.getData().map((item, idx) => (
+                    <Collapsible defaultOpen className="group/collapsible" key={item.getParentName() + idx}>
+                        <SidebarGroup>
+                            <SidebarGroupLabel asChild>
+                                <CollapsibleTrigger className="flex items-center gap-1 text-white">
+                                    <DollarSign size={16} />
+                                    <span className="text-lg font-light">
+                                        {item.getParentName() === "S" ? "Subscribe" : item.getParentName()}
+                                    </span>
+                                    <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                                </CollapsibleTrigger>
+                            </SidebarGroupLabel>
+                        </SidebarGroup>
+                        <CollapsibleContent className="px-6">
+                            <SidebarGroupContent>
+                                <SidebarMenu>
+                                    {item.getPricePlanTypeDto().map((item) => (
+                                        <SidebarMenuItem key={item.id}>
+                                            <SidebarMenuButton asChild>
+                                                <Link href="#" className=" text-base text-white/70 hover:text-black-80">
+                                                    -
+                                                    <span>{item.pricePlanTypeName}</span>
+                                                </Link>
+                                            </SidebarMenuButton>
+                                        </SidebarMenuItem>
+                                    ))}
+                                </SidebarMenu>
+                            </SidebarGroupContent>
+                        </CollapsibleContent>
+                    </Collapsible>
+                ))}
+            </Sidebar>
+        </div>
+    )
+}
+
+const PricePlanSidebar = () => {
+    return (
+        <QueryWrapper>
+            <Content />
+        </QueryWrapper>
+    )
+}
+
+export default PricePlanSidebar
--- a/components/module/sidebar/price-plan-sidebar/view-model/index.ts
+++ b/components/module/sidebar/price-plan-sidebar/view-model/index.ts
@ -0,0 +1,19 @@
+import CommonData from "@/lib/helper/query-data"
+import { pricePlanRepository } from "@/lib/price-plan/data/repository"
+import { PricePlanMenuModel } from "@/lib/price-plan/model/menu-model"
+import { useQuery } from "@tanstack/react-query"
+
+export const useMenuPricePlan = () => {
+    const query = useQuery({
+        queryKey: ["priceplan-menu"],
+        queryFn: pricePlanRepository.getMenuList,
+    })
+
+    return new CommonData<PricePlanMenuModel[], any>({
+        isLoading: query.isLoading,
+        isError: query.isError,
+        error: query.error,
+        data: query.data ? PricePlanMenuModel.fromJSON(query.data) : [],
+        extra: null
+    })
+}
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/components/ui/collapsible.tsx
+++ b/components/ui/collapsible.tsx
@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@ -0,0 +1,773 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "17rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,11 @@
+version: "3"
+
+services:
+  nextjs:
+    build: .
+    container_name: ocs
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped
--- a/hooks/use-mobile.tsx
+++ b/hooks/use-mobile.tsx
@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
--- a/images/Telkomcel.png
+++ b/images/Telkomcel.png
--- a/images/ava.png
+++ b/images/ava.png
--- a/images/export_icon.png
+++ b/images/export_icon.png
--- a/images/import_icon.png
+++ b/images/import_icon.png
--- a/images/left_clip_path.png
+++ b/images/left_clip_path.png
--- a/images/login_accesoris.png
+++ b/images/login_accesoris.png
--- a/images/logo.png
+++ b/images/logo.png
--- a/images/logo_2.png
+++ b/images/logo_2.png
--- a/images/right_clip_path.png
+++ b/images/right_clip_path.png
--- a/lib/helper/option/index.ts
+++ b/lib/helper/option/index.ts
@ -0,0 +1,12 @@
+import { OptionProps } from "../type"
+
+export const toOptionProps = (data: any): OptionProps[] => {
+    if(!data) return []
+
+    return data.data.map((item: any) => {
+        return {
+            value: item.id,
+            name: item.name
+        }
+    })
+}
--- a/lib/helper/pagination/index.ts
+++ b/lib/helper/pagination/index.ts
@ -0,0 +1,49 @@
+interface Props<T> {
+    currentPage: number
+    totalPages: number
+    pageSize: number
+    totalElements: number;
+    content: T
+}
+
+export default class PaginationModel<T> {
+    private currentPage: number;
+    private totalPages: number;
+    private pageSize: number;
+    private totalElements: number;
+    private content: T;
+
+    constructor({
+        currentPage,
+        totalPages,
+        pageSize,
+        totalElements,
+        content,
+    }: Props<T>) {
+        this.currentPage = currentPage
+        this.totalPages = totalPages
+        this.pageSize = pageSize
+        this.totalElements = totalElements
+        this.content = content
+    }
+
+    getCurrentPage = () => this.currentPage
+    
+    getTotalPages = () => this.totalPages
+
+    getPageSize = () => this.pageSize
+
+    getTotalElements = () => this.totalElements
+
+    getContent = () => this.content
+
+    static initialValue = () => {
+        return new PaginationModel<any>({
+            currentPage: 0,
+            totalPages: 0,
+            pageSize: 0,
+            totalElements: 0,
+            content: [],
+        })
+    };
+}
--- a/lib/helper/query-data/index.ts
+++ b/lib/helper/query-data/index.ts
@ -0,0 +1,38 @@
+interface Props<Tdata, Textra> {
+    isLoading: boolean;
+    isError: boolean;
+    error: any;
+    data: Tdata;
+    extra: Textra;
+}
+
+export default class CommonData<Tdata, Textra> {
+    private isLoading: boolean;
+    private isError: boolean;
+    private error: any;
+    private data: Tdata;
+    private extra: Textra
+
+    constructor({ isLoading, isError, error, data, extra }: Props<Tdata, Textra>) {
+        this.isLoading = isLoading;
+        this.isError = isError;
+        this.error = error;
+        this.data = data;
+        this.extra = extra;
+    }
+
+    getIsLoading(): boolean {
+        return this.isLoading;
+    }
+    getIsError(): boolean {
+        return this.isError;
+    }
+    getError(): any {
+        return this.error;
+    }
+    getData(): Tdata {
+        return this.data;
+    }
+
+    getExtra = () => this.extra;
+}
--- a/lib/helper/type/index.ts
+++ b/lib/helper/type/index.ts
@ -0,0 +1,10 @@
+export type FormStore<T extends object> = T & {
+  setField: <K extends keyof T>(key: K, value: T[K]) => void
+  setFields: (fields: Partial<T>) => void
+  resetForm: () => void
+}
+
+export type OptionProps = {
+  value: string
+  name: string
+}
--- a/lib/home/view/index.tsx
+++ b/lib/home/view/index.tsx
@ -0,0 +1,90 @@
+"use client"
+
+import { Input } from "@/components/ui/input"
+import { AppWindow, ClipboardEdit, FileText, ListTree, ScrollText, ShieldCheck, Tag, UserCog, Wallet } from "lucide-react"
+import Link from "next/link"
+
+const HomeView = () => {
+    const menus = [
+        {
+            title: "TECL Balance Adjusment",
+            url: "#",
+            icon: <Wallet/>
+        },
+        {
+            title: "Price Plan",
+            url: "main/price-plan",
+            icon: <FileText/>
+
+        },
+        {
+            title: "Offer",
+            url: "#",
+            icon: <Tag/>
+        },
+        {
+            title: "Order Entry",
+            url: "#",
+            icon: <ClipboardEdit/>
+
+        },
+        {
+            title: "Role Management",
+            url: "#",
+            icon: <ShieldCheck/>
+        },
+        {
+            title: "User Management",
+            url: "#",
+            icon: <UserCog/>
+        },
+        {
+            title: "Directory Menu Management",
+            url: "#",
+            icon: <ListTree/>
+        },
+        {
+            title: "Portal Management",
+            url: "#",
+            icon: <AppWindow/>
+        },
+        {
+            title: "Log Management",
+            url: "#",
+            icon: <ScrollText/>
+        },
+    ]
+    return (
+        <div className="px-10 mt-[60px]">
+            <div className="flex justify-between items-center">
+                <div>
+                    <h1 className="text-black-100 text-3xl">Welcome to Network Admin Portal!</h1>
+                    <h3 className="text-black-70">Manage your network infrastructure efficiently.</h3>
+                </div>
+                <Input
+                    id="search"
+                    placeholder="Search..."
+                    className="border border-black-90 rounded-md w-[300px] px-4 py-2 focus:outline-none"
+                    type="text"
+                    name="search"
+                    autoComplete="off"
+                />
+            </div>
+            <div className="mt-[60px] grid grid-cols-3 gap-y-4">
+                {menus.map((item, index) => {
+                    return (
+                        <Link href={item.url} key={index} className="bg-white p-4 shadow-md rounded-md max-w-[350px]">
+                            <div className="w-[50px] h-[50px] flex justify-center items-center bg-[#00879E1F] mb-5">
+                                {item.icon}
+                            </div>
+                            <span className="text-xl">{item.title}</span>
+                            <p className="font-light">Lorem ipsum dolor sit amet</p>
+                        </Link>
+                    );
+                })}
+            </div>
+        </div>
+    )
+}
+
+export default HomeView
--- a/lib/login/data/repository/index.ts
+++ b/lib/login/data/repository/index.ts
@ -0,0 +1,7 @@
+import { apiClient } from "@/services/api/api-client"
+
+
+export const loginRepository = {
+    login: async (username: string, password: string) => await apiClient("/api/login", "POST", {username, password}),
+    logout: async () => await apiClient("/api/logout", "POST")
+}
--- a/lib/login/store/index.ts
+++ b/lib/login/store/index.ts
@ -0,0 +1,23 @@
+// stores/loginStore.ts
+import { makeAutoObservable } from "mobx";
+
+class LoginStore {
+  username = "";
+  password = "";
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  setUsername(username: string) {
+    this.username = username;
+  }
+
+  setPassword(password: string) {
+    this.password = password;
+  }
+}
+
+const loginStore = new LoginStore();
+
+export default loginStore;
--- a/lib/login/view-model/index.ts
+++ b/lib/login/view-model/index.ts
@ -0,0 +1,28 @@
+import { useMutation } from "@tanstack/react-query"
+import { loginRepository } from "../data/repository";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import loginStore from "../store";
+
+
+export const useLogin = () => {
+    const router = useRouter()
+
+    const mutation = useMutation({
+        mutationFn: () => loginRepository.login(loginStore.username, loginStore.password),
+        onSuccess: () => {
+            router.push("/")
+            toast.success('Welcome to dashboard')
+        },
+        onError: ((error)=> {
+            toast.error(error.message)
+        })
+    })
+
+    return {
+        login: mutation.mutate,
+        isLoading: mutation.isPending,
+        isError: mutation.isError,
+        error: mutation.error,
+    }
+}
--- a/lib/login/view/index.tsx
+++ b/lib/login/view/index.tsx
@ -0,0 +1,110 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { useLogin } from "../view-model";
+import InputPassword from "@/components/module/input-password";
+import { Button } from "@/components/ui/button";
+import QueryWrapper from "@/components/module/query-wrapper";
+import leftClipath from "@/images/left_clip_path.png";
+import rightClipPath from "@/images/right_clip_path.png";
+import mainLogo from "@/images/Telkomcel.png";
+import formDecor from "@/images/login_accesoris.png";
+import Image from "next/image";
+import { Toaster } from "sonner";
+import { observer } from "mobx-react-lite";
+import loginStore from "../store";
+
+const Content = observer(() => {
+  const { isLoading, login } = useLogin();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    login();
+  };
+
+  return (
+    <div className="w-screen h-screen bg-white lg:flex">
+      <div className="hidden w-full h-full bg-primary lg:block relative">
+        <div className="absolute left-0 top-0">
+          <Image src={leftClipath} alt="left-clipt" />
+        </div>
+        <div className="absolute right-0 bottom-0">
+          <Image src={rightClipPath} alt="right-clipt" />
+        </div>
+        <section className="h-full flex flex-col justify-center items-center">
+          <div className="max-w-96">
+            <Image src={mainLogo} alt="main-logo" />
+          </div>
+          <div className="mt-[60px] space-y-10 text-center text-white">
+            <h3 className="text-3xl">Connect. Secure. Thrive</h3>
+            <p className="max-w-[542px] text-left text-2xl">
+              Empowering business with advanced networking solutions that drive growth and innovation.
+            </p>
+          </div>
+        </section>
+      </div>
+      <div className="w-full h-full p-4 flex lg:block flex-col justify-center items-center lg:p-0">
+        <div className="w-full mt-[-30px] hidden lg:block">
+          <Image src={formDecor} alt="form-decor-1" width={188} height={188} />
+        </div>
+        <div className="flex flex-col justify-center items-center lg:mt-[-30px]">
+          <h1 className="text-black font-bold text-[40px]">Welcome!</h1>
+          <div className="w-1/2 lg:w-1/6 border-2 border-primaryBlue-100"></div>
+        </div>
+        <form
+          className="space-y-4 mt-[45px] mx-auto w-full lg:max-w-[399px]"
+          onSubmit={handleSubmit}
+          autoComplete="off"
+        >
+          <div>
+            <label htmlFor="email">Username</label>
+            <Input
+              className="placeholder:text-black-50 border border-black-90 h-[38px]"
+              type="text"
+              id="username"
+              name="username"
+              placeholder="Username"
+              value={loginStore.username}
+              onChange={(e) => loginStore.setUsername(e.target.value)}
+            />
+          </div>
+          <div>
+            <label htmlFor="password">Password</label>
+            <InputPassword
+              className="placeholder:text-black-50 border border-black-90 h-[38px]"
+              id="password"
+              name="password"
+              placeholder="Password"
+              value={loginStore.password}
+              onChange={(e) => loginStore.setPassword(e.target.value)}
+            />
+          </div>
+          <div className="flex justify-center">
+            <Button
+              type="submit"
+              variant="destructive"
+              className="w-full h-[38px] bg-primary p-2 text-lg"
+            >
+              {isLoading ? "Please wait..." : "Login"}
+            </Button>
+          </div>
+        </form>
+
+        <div className="mt-[-30px] hidden lg:flex justify-end">
+          <Image src={formDecor} alt="form-decor-1" width={188} height={188} />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+const Login = () => {
+  return (
+    <QueryWrapper>
+      <Content />
+      <Toaster position="top-right" richColors duration={1500} />
+    </QueryWrapper>
+  );
+};
+
+export default Login;
--- a/lib/price-plan-detail/constant/index.tsx
+++ b/lib/price-plan-detail/constant/index.tsx
@ -0,0 +1,26 @@
+export const columns = [
+    {
+        accessorKey: "pariority",
+        header: () => <div className="text-left">Priority</div>,
+    },
+    {
+        accessorKey: "source type",
+        header: () => <div className="text-left">Source Type</div>,
+    },
+    {
+        accessorKey: "source type value",
+        header: () => <div className="text-left">Source Type Value</div>,
+    },
+    {
+        accessorKey: "destination",
+        header: () => <div className="text-left">Destionation</div>,
+    },
+    {
+        id: "destination type value",
+        header: () => <div className="text-left">Destination Type Value</div>,
+    },
+    {
+        id: "label show",
+        header: () => <div className="text-left">Label Show</div>,
+    },
+]
--- a/lib/price-plan-detail/data/repository/index.ts
+++ b/lib/price-plan-detail/data/repository/index.ts
@ -0,0 +1,16 @@
+import { apiClient } from "@/services/api/api-client";
+
+export interface RatePlanPayload {
+    offerVerId: string
+    offerType: string
+    reId: string
+    ratePlanName: string
+    ratePlanCode?: string
+    remarks?: string
+    ratePlanType: string
+}
+
+export const pricePlanDetailRepository = {
+    getUsageEventList: async () => await apiClient("/api/priceplan-detail/usage-event", "POST"),
+    createRatePlan: async (payload: RatePlanPayload) => await apiClient("/api/rate-plan/create", "POST", payload)
+}
--- a/lib/price-plan-detail/mutation/index.ts
+++ b/lib/price-plan-detail/mutation/index.ts
@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { pricePlanDetailRepository, RatePlanPayload } from "../data/repository"
+import { toast } from "sonner"
+
+export const useCreateRatePlan = (onSuccessCallback: () => void) => {
+    const queryClient = useQueryClient()
+    return useMutation({
+        mutationFn: (payload: RatePlanPayload) => pricePlanDetailRepository.createRatePlan(payload),
+        onSuccess: () => {
+            toast.success("Price plan created successfully")
+            queryClient.invalidateQueries({ queryKey: ["priceplan"] })
+            onSuccessCallback()
+        },
+        onError: (error: any) => toast.error(error.message),
+    })
+}
--- a/lib/price-plan-detail/queries/index.ts
+++ b/lib/price-plan-detail/queries/index.ts
@ -0,0 +1,8 @@
+import { useQuery } from "@tanstack/react-query"
+import { pricePlanDetailRepository } from "../data/repository"
+
+export const useUsageEventQuery = () =>
+  useQuery({
+    queryKey: ["usage-event-list"],
+    queryFn: () => pricePlanDetailRepository.getUsageEventList(),
+  })
--- a/lib/price-plan-detail/state/price-plan-detail-state.ts
+++ b/lib/price-plan-detail/state/price-plan-detail-state.ts
@ -0,0 +1,76 @@
+import { OptionProps } from "@/lib/helper/type"
+import { makeAutoObservable } from "mobx";
+import RatePlanSectionState from "./rate-plan-section-state";
+
+export default class PricePlanDetailState {
+  private pricePlanId: string = "";
+  private flow: number = 0;
+  private name: string = "";
+  private version: string = "";
+  private usageEventModalIsOpen: boolean = false;
+  private usageEventSelected: Array<any> = [];
+  private eventSelectted: OptionProps | null = null;
+  private ratePlans: RatePlanSectionState[] = []
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  getPricePlanId = () => this.pricePlanId;
+
+  getFlow = () => this.flow;
+
+  getName = () => this.name;
+
+  getVersion = () => this.version;
+
+  getUsageEventModalIsOpen = () => this.usageEventModalIsOpen;
+
+  getUsageEventSelected = () => this.usageEventSelected;
+
+  getEventSelected = () => this.eventSelectted;
+
+  getRatePlans = () => this.ratePlans
+
+  setPricePlanId = (id: string) => {
+    this.pricePlanId = id;
+  };
+
+  setFlow = (flow: number) => {
+    this.flow = flow;
+  };
+
+  setName = (name: string) => {
+    this.name = name;
+  };
+
+  setVersion = (version: string) => {
+    this.version = version;
+  };
+
+  setUsageEventModalIsOpen = (isOpen: boolean) => {
+    this.usageEventModalIsOpen = isOpen;
+  };
+
+  setUsageEventSelected = (selected: Array<any>) => {
+    this.usageEventSelected = selected;
+  };
+
+  setEventSelected = (option: OptionProps | null) => {
+    this.eventSelectted = option;
+  };
+
+  setRatePlans = (plans: RatePlanSectionState[]) => {
+    this.ratePlans = plans
+  }
+
+  reset = () => {
+    this.pricePlanId = "";
+    this.flow = 0;
+    this.name = "";
+    this.version = "";
+    this.usageEventModalIsOpen = false;
+    this.usageEventSelected = [];
+    this.eventSelectted = null;
+  };
+}
--- a/lib/price-plan-detail/state/price-version-form-state.ts
+++ b/lib/price-plan-detail/state/price-version-form-state.ts
@ -0,0 +1,15 @@
+import { makeAutoObservable } from "mobx"
+
+export default class PriceVersionFormState {
+    private isOpen: boolean = false
+
+    constructor() {
+        makeAutoObservable(this)
+    }
+
+    getIsOpen = () => this.isOpen
+
+    setIsOpen = (open: boolean) => {
+        this.isOpen = open
+    }
+}
--- a/lib/price-plan-detail/state/rate-plan-form-state.ts
+++ b/lib/price-plan-detail/state/rate-plan-form-state.ts
@ -0,0 +1,50 @@
+import { makeAutoObservable } from "mobx"
+
+export default class RatePlanFormState {
+  private open: boolean = false;
+  private ratePlanName: string = "";
+  private ratePlanCode: string = "";
+  private ratePlanType: string = "";
+  private remarks: string = "";
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  // --- Getters ---
+  getOpen = () => this.open;
+  getRatePlanName = () => this.ratePlanName;
+  getRatePlanCode = () => this.ratePlanCode;
+  getRatePlanType = () => this.ratePlanType;
+  getRemarks = () => this.remarks;
+
+  // --- Setters ---
+  setOpen = (value: boolean) => {
+    this.open = value;
+  };
+
+  setRatePlanName = (value: string) => {
+    this.ratePlanName = value;
+  };
+
+  setRatePlanCode = (value: string) => {
+    this.ratePlanCode = value;
+  };
+
+  setRatePlanType = (value: string) => {
+    this.ratePlanType = value;
+  };
+
+  setRemarks = (value: string) => {
+    this.remarks = value;
+  };
+
+  // --- Reset ---
+  reset = () => {
+    this.open = false;
+    this.ratePlanName = "";
+    this.ratePlanCode = "";
+    this.ratePlanType = "";
+    this.remarks = "";
+  };
+}
--- a/lib/price-plan-detail/state/rate-plan-section-state.ts
+++ b/lib/price-plan-detail/state/rate-plan-section-state.ts
@ -0,0 +1,22 @@
+import { makeAutoObservable } from "mobx"
+
+export default class RatePlanSectionState {
+    private ratePlanName: string = "Rate Plan"
+    private isExpand: boolean = false
+
+    constructor(){
+        makeAutoObservable(this)
+    }
+
+    getRatePlanName = () => this.ratePlanName
+
+    getIsExpand = () => this.isExpand
+
+    setRatePlanName = (name: string) => {
+        this.ratePlanName = name
+    }
+
+    setIsExpand = (val: boolean) => {
+        this.isExpand = val
+    }
+}
--- a/lib/price-plan-detail/view-model/index.ts
+++ b/lib/price-plan-detail/view-model/index.ts
@ -0,0 +1,41 @@
+import { OptionProps } from "@/lib/helper/type";
+import { toOptionProps } from "@/lib/helper/option";
+import { useUsageEventQuery } from "../queries";
+import { useCreatePricePlanMutation } from "@/lib/price-plan/mutations";
+import { RatePlanPayload } from "../data/repository";
+import PricePlanDetailState from "../state/price-plan-detail-state";
+import RatePlanFormState from "../state/rate-plan-form-state";
+import { makeAutoObservable } from "mobx";
+import PriceVersionFormState from "../state/price-version-form-state";
+
+export default class PricePlanDetailViewModel {
+  private pricePlanDetailState = new PricePlanDetailState();
+  private ratePlanFormState = new RatePlanFormState();
+  private priceVersionFormState = new PriceVersionFormState()
+
+  // query + mutation results
+  private usageEventsQuery = useUsageEventQuery();
+  private createRatePlanMutate = useCreatePricePlanMutation(() => {
+    console.log("Rate plan created");
+  });
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  getMainState = () => this.pricePlanDetailState;
+
+  getRatePlanFormState = () => this.ratePlanFormState;
+
+  getPriceVersionFormState = () => this.priceVersionFormState
+
+  getUsageEventOptions = (): OptionProps[] => {
+    const data: any = this.usageEventsQuery.data;
+    return toOptionProps(data);
+  };
+
+  // --- MUTATIONS ---
+  createRatePlan = (payload: RatePlanPayload) => {
+    this.createRatePlanMutate.mutate(payload);
+  };
+}
--- a/lib/price-plan-detail/view/data-table/index.tsx
+++ b/lib/price-plan-detail/view/data-table/index.tsx
@ -0,0 +1,87 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+const DataTable = <TData, TValue>({
+    data,
+    columns,
+}: DataTableProps<TData, TValue>) => {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    return (
+        <div className="rounded-md">
+            <Table className="border-separate border-spacing-0">
+                <TableHeader className="bg-primary rounded-lg">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header, index) => {
+                                const isFirst = index === 0;
+                                const isLast = index === headerGroup.headers.length - 1;
+                                return (
+                                    <TableHead
+                                        key={header.id}
+                                        className={`text-white ${isFirst ? "rounded-tl-md" : ""} ${isLast ? "rounded-tr-md" : ""}`}
+                                    >
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id} className="border-b border-[#00879E]">
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                No results.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}
+
+export default DataTable
--- a/lib/price-plan-detail/view/dialog/price-version-dialog/index.tsx
+++ b/lib/price-plan-detail/view/dialog/price-version-dialog/index.tsx
@ -0,0 +1,19 @@
+import { Dialog, DialogContent, DialogDescription, DialogHeader } from "@/components/ui/dialog"
+import { DialogTitle } from "@radix-ui/react-dialog"
+
+const PriceVersionDialog = () => {
+    return(
+        <div>
+            <Dialog>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Usage Price</DialogTitle>
+                        <DialogDescription>Test cek</DialogDescription>
+                    </DialogHeader>
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}
+
+export default PriceVersionDialog
--- a/lib/price-plan-detail/view/dialog/rate-plan-dialog/index.tsx
+++ b/lib/price-plan-detail/view/dialog/rate-plan-dialog/index.tsx
@ -0,0 +1,142 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import DataTable from '../../data-table'
+import { columns } from '../../../constant'
+import { Select, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import PricePlanDetailViewModel from '@/lib/price-plan-detail/view-model'
+import { observer } from 'mobx-react-lite'
+import RatePlanSectionState from '@/lib/price-plan-detail/state/rate-plan-section-state'
+
+interface Props {
+  vm: PricePlanDetailViewModel
+}
+
+const RatePlanDialog = observer(({vm}: Props) => {
+  const mainState = vm.getMainState()
+  const formState = vm.getRatePlanFormState()
+
+  return (
+    <Dialog
+      open={formState.getOpen()}
+      onOpenChange={(val) => formState.setOpen(val)}
+    >
+      <DialogContent className="max-w-2xl max-h-[700px] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Create Rate Plan</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <form action="" className='grid'>
+          <div>
+            <Label htmlFor='event-name'>Event Name*</Label>
+            <Input id='event-name' value={mainState.getEventSelected()?.name} readOnly className='bg-zinc-300/50' />
+          </div>
+          <div>
+            <Label htmlFor='rate plan name'>Rate Plan Name*</Label>
+            <Input
+              id='rate-plan-name'
+              value={formState.getRatePlanName()}
+              placeholder='Input plan name'
+              onChange={(e) => formState.setRatePlanName(e.currentTarget.value)}
+            />
+          </div>
+          <div>
+            <Label htmlFor='rate plan code'>Rate Plan Code</Label>
+            <Input
+              id='rate-plan-code'
+              value={formState.getRatePlanCode()}
+              placeholder='input rate plan code'
+              onChange={(e) => formState.setRatePlanCode(e.currentTarget.value)}
+            />
+          </div>
+          <div>
+            <Label htmlFor='remarks'>Remarks</Label>
+            <Input
+              id='remarks'
+              value={formState.getRemarks()}
+              placeholder='input remarks'
+              onChange={(e) => formState.setRemarks(e.currentTarget.value)}
+            />
+          </div>
+          <div>
+            <Label htmlFor='rate plan type'>Rate Plan Type</Label>
+            <RadioGroup defaultValue={formState.getRatePlanType()} className='flex h-8'>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="r" id="rating" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="rating">Rating</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="a" id="accumulation" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="accumulation">Accumulation</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="b" id="benefit" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="benefit">Benefit</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="t" id="tax" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="tax">Tax</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="o" id="optional rate plan" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
+                <Label htmlFor="optional rate plan">Optional Rate Plan</Label>
+              </div>
+            </RadioGroup>
+          </div>
+        </form>
+        <section>
+          <h3>Event Feature</h3>
+          <DataTable data={[]} columns={columns} />
+        </section>
+        <section>
+          <p>If you add event properties, the ratte plan will be mapping rate plan, otherwise a single one. Drags the items in the list to change their priority</p>
+          <h3 className='font-semibold'>Detail</h3>
+          <div className='grid grid-cols-2 gap-1'>
+            <div>
+              <Label>Source Type *</Label>
+              <Select >
+                <SelectTrigger className="bg-zinc-300">
+                  <SelectValue placeholder="Select item" />
+                </SelectTrigger>
+              </Select>
+            </div>
+            <div>
+              <Label>Destination Type *</Label>
+              <Select >
+                <SelectTrigger className="bg-zinc-300">
+                  <SelectValue placeholder="Select item" />
+                </SelectTrigger>
+              </Select>
+            </div>
+            <div>
+              <Label>Label*</Label>
+              <Input className='bg-zinc-300' readOnly />
+            </div>
+          </div>
+        </section>
+        <div className='flex justify-end gap-2'>
+          <Button variant="outline">Cancel</Button>
+          <Button variant="default" onClick={() => {
+            mainState.setFlow(2)
+            formState.reset()
+            mainState.setRatePlans([new RatePlanSectionState()])
+            
+          }}>Submit</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default RatePlanDialog
--- a/lib/price-plan-detail/view/dialog/usage-event-dialog/index.tsx
+++ b/lib/price-plan-detail/view/dialog/usage-event-dialog/index.tsx
@ -0,0 +1,72 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { OptionProps } from '@/lib/helper/type'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import PricePlanDetailState from '@/lib/price-plan-detail/state/price-plan-detail-state'
+import { observer } from 'mobx-react-lite'
+
+interface Props {
+  options: OptionProps[],
+  mainState: PricePlanDetailState
+}
+
+const UsageEventDialog = observer(({options, mainState}: Props) => {
+  const [selected, setSelected] = React.useState<string[]>([])
+  const [search, setSearch] = React.useState('')
+
+  const toggleItem = (item: string) => {
+    setSelected(prev =>
+      prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
+    )
+  }
+
+  const filteredEvents = options.filter(event =>
+    event.name.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return (
+    <Dialog open={mainState.getUsageEventModalIsOpen()} onOpenChange={(open) => mainState.setUsageEventModalIsOpen(open)}>
+      <DialogContent className="w-[400px] max-h-[450px] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Usage Event</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <div className="flex justify-end mt-4 gap-2">
+          <Button size="sm" variant="ghost" onClick={() => setSelected([])}>Cancel</Button>
+          <Button size="sm" onClick={() => {
+            mainState.setUsageEventModalIsOpen(false)
+            mainState.setUsageEventSelected(selected)
+            mainState.setFlow(1)
+          }}>Save</Button>
+        </div>
+        <Input
+          placeholder="Search..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="mb-2"
+        />
+        <div className="flex flex-col gap-2">
+          {filteredEvents.length > 0 ? (
+            filteredEvents.map((event, idx) => (
+              <label key={idx} className="flex items-center gap-2 cursor-pointer">
+                <Checkbox
+                  checked={selected.includes(event.value)}
+                  onCheckedChange={() => toggleItem(event.value)}
+                />
+                <span className="text-sm">{event.name}</span>
+              </label>
+            ))
+          ) : (
+            <span className="text-sm text-muted-foreground">No results found.</span>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default UsageEventDialog
--- a/lib/price-plan-detail/view/header/index.tsx
+++ b/lib/price-plan-detail/view/header/index.tsx
@ -0,0 +1,45 @@
+import { Edit2, LucideArrowLeft, PlusIcon, Trash2 } from "lucide-react"
+import { useRouter } from "next/navigation"
+import PricePlanDetailState from "../../state/price-plan-detail-state"
+
+const themeColor = "#00879E"
+
+interface Props {
+    mainState: PricePlanDetailState
+}
+
+const PricePlanHeader = ({
+    mainState
+}: Props) => {
+
+    const router = useRouter()
+
+    const {
+        getName,
+        getVersion,
+    } = mainState
+
+    return (
+        <section className="flex border-y px-4 py-3 items-center justify-between bg-white shadow-sm">
+            <div className={`flex gap-4 items-center font-bold text-[${themeColor}]`}>
+                <LucideArrowLeft className="ml-4 cursor-pointer hover:text-[#006876]" onClick={() => router.back()} />
+                <h1 className="text-xl text-[#00879E]">Price Plan</h1>
+            </div>
+            <div className="ml-14 font-normal flex gap-2 items-center text-gray-600">
+                <span>Subscription Price</span>
+                <span>|</span>
+                <span className="font-medium text-[#00879E]">{getName()}</span>
+                <span>-</span>
+                <span>Version:</span>
+                <span className="text-sm font-bold text-[#00879E]">{getVersion()}</span>
+            </div>
+            <div className="flex items-center gap-3 mr-8 text-[#00879E]">
+                <Edit2 width={16} className="cursor-pointer hover:text-[#006876]" />
+                <PlusIcon width={20} className="cursor-pointer hover:text-[#006876]" />
+                <Trash2 width={16} className="cursor-pointer hover:text-red-500" />
+            </div>
+        </section>
+    )
+}
+
+export default PricePlanHeader
--- a/lib/price-plan-detail/view/index.tsx
+++ b/lib/price-plan-detail/view/index.tsx
@ -0,0 +1,41 @@
+"use client"
+
+import QueryWrapper from "@/components/module/query-wrapper"
+import PricePlanDetailViewModel from "../view-model"
+import RatePlanDialog from "./dialog/rate-plan-dialog"
+import UsageEventDialog from "./dialog/usage-event-dialog"
+import PricePlanTab from "./tab"
+import PricePlanHeader from "./header"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    id: string
+}
+
+const Content = observer(({
+    id
+}: Props) => {
+    // Server State
+    const vm = new PricePlanDetailViewModel()
+    console.log(id, 'cek id');
+    
+
+    return (
+        <div>
+            <PricePlanHeader mainState={vm.getMainState()}/>
+            <PricePlanTab vm={vm}/>
+            <UsageEventDialog options={vm.getUsageEventOptions()} mainState={vm.getMainState()}/>
+            <RatePlanDialog vm={vm}/>
+        </div>
+    )
+})
+
+const PricePlanDetail = ({id}: {id:string}) => {
+    return (
+        <QueryWrapper>
+            <Content id={id}/>
+        </QueryWrapper>
+    )
+}
+
+export default PricePlanDetail
--- a/lib/price-plan-detail/view/tab/index.tsx
+++ b/lib/price-plan-detail/view/tab/index.tsx
@ -0,0 +1,38 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import TabsUsageContent from "./usage-content"
+import PricePlanDetailViewModel from "../../view-model"
+
+interface Props {
+    vm: PricePlanDetailViewModel
+}
+
+const PricePlanTab = ({vm}: Props) => {
+    
+    return (
+        <section className="px-4 mt-4">
+                <Tabs defaultValue="usage" className="w-full border border-primary">
+                    <TabsList className="bg-[#e6f6f8] justify-start w-full">
+                        {["usage", "recurring", "subscription", "discount", "trigger", "total", "param", "param-version"].map(tab => (
+                            <TabsTrigger
+                                key={tab}
+                                value={tab}
+                                className="data-[state=active]:bg-[#00879E] data-[state=active]:text-white text-[#00879E] hover:bg-[#ccebf0]"
+                            >
+                                {tab.replace("-", " ").replace(/\b\w/g, l => l.toUpperCase())}
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+                    <TabsUsageContent usageEventOptions={vm.getUsageEventOptions()} mainState={vm.getMainState()} formState={vm.getRatePlanFormState()}/>
+                    <TabsContent value="recurring">Recurring here.</TabsContent>
+                    <TabsContent value="subscription">Subscription here.</TabsContent>
+                    <TabsContent value="discount">Discount here.</TabsContent>
+                    <TabsContent value="trigger">Trigger here.</TabsContent>
+                    <TabsContent value="total">Total here.</TabsContent>
+                    <TabsContent value="param">Param here.</TabsContent>
+                    <TabsContent value="param-version">Param Version here.</TabsContent>
+                </Tabs>
+            </section>
+    )
+}
+
+export default PricePlanTab
--- a/lib/price-plan-detail/view/tab/usage-content/flow/create-event/index.tsx
+++ b/lib/price-plan-detail/view/tab/usage-content/flow/create-event/index.tsx
@ -0,0 +1,31 @@
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    mainState: PricePlanDetailState
+}
+
+const CreateEvent = observer(({mainState}: Props) => {
+    if (mainState.getFlow() >= 1) return null
+
+    return (
+        <>
+            <div className="flex flex-col items-center text-center">
+                <button
+                    className="relative w-24 h-24 rounded-full border-4 border-[#00879E] bg-white flex items-center justify-center hover:bg-[#e6f6f8] transition"
+                    onClick={() => mainState.setUsageEventModalIsOpen(!mainState.getUsageEventModalIsOpen())}
+                >
+                    <svg className="w-10 h-10 text-[#00879E]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                        <path d="M4 4h16v16H4V4z" />
+                        <path d="M8 8h8M8 12h8M8 16h8" />
+                    </svg>
+                    <span className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-[#00879E] text-white text-sm font-bold flex items-center justify-center">+</span>
+                </button>
+                <span className="mt-2 text-[#00879E] font-medium">Event</span>
+            </div>
+            <div className="text-[#00879E] text-3xl">{'→'}</div>
+        </>
+    )
+})
+
+export default CreateEvent
--- a/lib/price-plan-detail/view/tab/usage-content/flow/create-rate-plan/index.tsx
+++ b/lib/price-plan-detail/view/tab/usage-content/flow/create-rate-plan/index.tsx
@ -0,0 +1,94 @@
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state";
+import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state";
+import { observer } from "mobx-react-lite";
+
+
+const getStepStyle = (active: boolean) => ({
+    borderColor: active ? "#00879E" : "#D1D5DB", // tailwind: gray-300
+    textColor: active ? "#00879E" : "#9CA3AF", // tailwind: gray-400
+    bgColor: active ? "#00879E" : "#D1D5DB",
+    iconText: active ? "text-[#00879E]" : "text-gray-400",
+    opacity: active ? "opacity-100" : "opacity-30"
+});
+
+interface Props {
+   mainState: PricePlanDetailState
+   formState: RatePlanFormState
+}
+
+const CreateRatePlan = observer(({
+    mainState,
+    formState
+}: Props) => {
+    const isRatePlanActive = mainState.getFlow() >= 1;
+    const isPriceActive = mainState.getFlow() >= 2;
+
+    const ratePlanStyle = getStepStyle(isRatePlanActive);
+    const priceStyle = getStepStyle(isPriceActive);
+
+    return (
+        <>
+            <div className={`flex flex-col items-center text-center ${ratePlanStyle.opacity}`}>
+                <div
+                    className="relative w-24 h-24 cursor-pointer rounded-full bg-white flex items-center justify-center"
+                    style={{ borderWidth: "4px", borderColor: ratePlanStyle.borderColor }}
+                    onClick={() => {
+                        formState.setOpen(true)
+                    }}
+                >
+                    <svg
+                        className={`w-10 h-10 ${ratePlanStyle.iconText}`}
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                    >
+                        <path d="M4 4h16v16H4V4z" />
+                        <path d="M8 8h8M8 12h8M8 16h8" />
+                    </svg>
+                    <span
+                        className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
+                        style={{ backgroundColor: ratePlanStyle.bgColor }}
+                    >
+                        +
+                    </span>
+                </div>
+                <span className={`mt-2 font-medium`} style={{ color: ratePlanStyle.textColor }}>
+                    Rate Plan
+                </span>
+            </div>
+
+            <div className={`text-3xl`} style={{ color: isPriceActive ? "#00879E" : "#D1D5DB", opacity: isPriceActive ? 1 : 0.3 }}>
+                →
+            </div>
+
+            <div className={`flex flex-col items-center text-center ${priceStyle.opacity}`}>
+                <div
+                    className="relative w-24 h-24 rounded-full bg-white flex items-center justify-center"
+                    style={{ borderWidth: "4px", borderColor: priceStyle.borderColor }}
+                >
+                    <svg
+                        className={`w-10 h-10 ${priceStyle.iconText}`}
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                    >
+                        <path d="M12 8c-2.21 0-4 1.79-4 4 0 1.84 1.28 3.39 3 3.87V18h2v-2.13c1.72-.48 3-2.03 3-3.87 0-2.21-1.79-4-4-4z" />
+                    </svg>
+                    <span
+                        className="absolute -top-2 -right-2 w-6 h-6 rounded-full text-white text-sm font-bold flex items-center justify-center"
+                        style={{ backgroundColor: priceStyle.bgColor }}
+                    >
+                        +
+                    </span>
+                </div>
+                <span className={`mt-2 font-medium`} style={{ color: priceStyle.textColor }}>
+                    Price
+                </span>
+            </div>
+        </>
+    );
+})
+
+export default CreateRatePlan
--- a/lib/price-plan-detail/view/tab/usage-content/flow/index.tsx
+++ b/lib/price-plan-detail/view/tab/usage-content/flow/index.tsx
@ -0,0 +1,24 @@
+import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
+import CreateEvent from "./create-event"
+import CreateRatePlan from "./create-rate-plan"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    mainState: PricePlanDetailState
+    formState: RatePlanFormState
+}
+const RatePlanFlow = observer( ({mainState, formState}: Props) => {
+    if(mainState.getFlow() >= 2) return null
+
+    return (
+        <section className={`flex gap-12 justify-center items-center ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
+            {/* Step 1 */}
+            <CreateEvent mainState={mainState} />
+            {/* Step 2 */}
+            <CreateRatePlan mainState={mainState} formState={formState} />
+        </section>
+    )
+})
+
+export default RatePlanFlow
--- a/lib/price-plan-detail/view/tab/usage-content/index.tsx
+++ b/lib/price-plan-detail/view/tab/usage-content/index.tsx
@ -0,0 +1,32 @@
+import { TabsContent } from "@/components/ui/tabs"
+import { OptionProps } from "@/lib/helper/type"
+import UsageEvents from "./usage-events"
+import RatePlanFlow from "./flow"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
+import RatePlanSection from "./rate-plan"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    usageEventOptions: OptionProps[]
+    mainState: PricePlanDetailState
+    formState: RatePlanFormState
+}
+
+const TabsUsageContent = observer(({
+    usageEventOptions,
+    mainState,
+    formState
+}: Props) => {
+    return (
+        <TabsContent value="usage" className="m-0">
+            <div className="grid grid-cols-12 min-h-[50vh]">
+                <UsageEvents eventOptions={usageEventOptions} mainState={mainState}/>
+                <RatePlanFlow mainState={mainState} formState={formState}/>
+                <RatePlanSection mainState={mainState} ratePlanFormState={formState}/>
+            </div>
+        </TabsContent>
+    )
+})
+
+export default TabsUsageContent
--- a/lib/price-plan-detail/view/tab/usage-content/rate-plan/index.tsx
+++ b/lib/price-plan-detail/view/tab/usage-content/rate-plan/index.tsx
@ -0,0 +1,78 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
+import { ChevronDown, Plus, Tickets } from "lucide-react"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    mainState: PricePlanDetailState
+    ratePlanFormState: RatePlanFormState
+}
+
+const RatePlanSection = observer(({ mainState, ratePlanFormState }: Props) => {
+    if (mainState.getFlow() < 2) return null
+
+    return (
+        <div className={`p-4 ${mainState.getFlow() ? "col-span-9" : "col-span-12"}`}>
+            <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                    <Button className="h-6 rounded-sm" onClick={() => ratePlanFormState.setOpen(true)}>
+                        <Plus />
+                        <span>New Rate Plan</span>
+                    </Button>
+                    <Button className="h-6" variant="outline">
+                        <Plus />
+                        <span>New From Template</span>
+                    </Button>
+                    <Button className="h-6" variant="outline">
+                        <Plus />
+                        <span>Reservation Rule</span>
+                    </Button>
+                </div>
+                <div>
+                    <Input placeholder="Search Rate Plan Name" className="h-6 placeholder:text-zinc-400" />
+                </div>
+            </div>
+            <ul className="border border-primary mt-8">
+                {mainState.getRatePlans().map((item, idx) => (
+                    <li key={item.getRatePlanName() + idx} className="px-4 py-2 border-b last:border-none">
+                        <div className="flex justify-between items-center">
+                            <div className="flex items-center gap-3">
+                                <Tickets />
+                                <span>{item.getRatePlanName()}</span>
+                            </div>
+                            <ChevronDown
+                                className={`cursor-pointer transition-transform duration-300 ${item.getIsExpand() ? 'rotate-180' : ''}`}
+                                onClick={() => item.setIsExpand(!item.getIsExpand())}
+                            />
+                        </div>
+
+                        <div
+                            className={`transition-all duration-300 overflow-hidden ${item.getIsExpand() ? 'max-h-40 opacity-100 mt-5' : 'max-h-0 opacity-0'
+                                }`}
+                        >
+                            <DropdownMenu>
+                                <DropdownMenuTrigger>
+                                    <Button className="h-6">
+                                        <Plus />
+                                        Price Version
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <DropdownMenuItem>New Version</DropdownMenuItem>
+                                    <DropdownMenuItem>New From Template</DropdownMenuItem>
+                                    <DropdownMenuItem>Shared From Template</DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+
+        </div>
+    )
+})
+
+export default RatePlanSection
--- a/lib/price-plan-detail/view/tab/usage-content/usage-events/index.tsx
+++ b/lib/price-plan-detail/view/tab/usage-content/usage-events/index.tsx
@ -0,0 +1,62 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/module/dropdown"
+import { Button } from "@/components/ui/button"
+import { OptionProps } from "@/lib/helper/type"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import { Ellipsis, PlusIcon } from "lucide-react"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    eventOptions: OptionProps[]
+    mainState: PricePlanDetailState
+}
+
+const UsageEvents = observer(({
+    eventOptions,
+    mainState
+}:Props) => {
+
+    if (mainState.getFlow() < 1) return null
+    
+    return (
+        <section className="col-span-3 border-r border-primary text-sm font-semibold">
+            <div className="flex justify-between p-2 border-b-2 border-primary">
+                <h4 className="text-center">Usage Event</h4>
+                <PlusIcon className="cursor-pointer" onClick={() => mainState.setUsageEventModalIsOpen(true)}/>
+            </div>
+            <ul className="py-2 space-y-2">
+                {eventOptions.filter(item => mainState.getUsageEventSelected().includes(item.value)).map((item, index) => (
+                    <li 
+                        onClick={() => mainState.setEventSelected(item)}
+                        key={index} 
+                        className={`list-none cursor-pointer px-6 ${item.value == mainState.getEventSelected()?.value ? "bg-blue-200" : ""}`}
+                    >
+                        <div className="flex justify-between gap-2 items-center">
+                            <span>{item.name}</span>
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button variant="ghost" size="icon" className="h-6 w-6 p-0">
+                                        <Ellipsis className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            const updated = [...mainState.getUsageEventSelected()]
+                                            updated.splice(index, 1)
+                                            mainState.setUsageEventSelected(updated)
+                                        }}
+                                        className="text-red-500"
+                                    >
+                                        Remove
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </section>
+    )
+})
+
+export default UsageEvents
--- a/lib/price-plan/constant/index.tsx
+++ b/lib/price-plan/constant/index.tsx
@ -0,0 +1,65 @@
+import { ColumnDef, Row } from "@tanstack/react-table"
+import { Eye, Pencil, Trash2 } from "lucide-react"
+import PricePlanModel from "../model/price-plan-model"
+import { useRouter } from "next/navigation"
+
+export interface PricePlan {
+    name: string
+    type: string
+    code: string
+    validPeriod: string
+}
+
+interface Props {
+    onClickDelete: (id: string) => void
+}
+
+export default function PricePlanColumns({
+    onClickDelete
+}: Props): ColumnDef<PricePlanModel>[] {
+    const router = useRouter()
+    // const setFields = priceplandeta
+
+    const onNavigate = (row: Row<PricePlanModel>) => {
+        router.push(`/main/price-plan/${row.original.getId()}`)
+        // setFields({
+        //     pricplanId: row.original.getId(),
+        //     name: row.original.getName(),
+        //     version: row.original.getValidPeriod()
+        // })
+    }
+    return [
+        {
+            accessorKey: "name",
+            header: () => <div className="text-left">Price Plan Name</div>,
+            cell: ({ row }) => <div className="text-[#0096A6]">{row.getValue("name")}</div>,
+        },
+        {
+            accessorKey: "type",
+            header: () => <div className="text-left">Price Plan Type</div>,
+            cell: ({ row }) => <div>{row.getValue("type")}</div>,
+        },
+        {
+            accessorKey: "code",
+            header: () => <div className="text-left">Price Plan Code</div>,
+            cell: ({ row }) => <div>{row.getValue("code")}</div>,
+        },
+        {
+            accessorKey: "validPeriod",
+            header: () => <div className="text-left">Valid Period</div>,
+            cell: ({ row }) => <div>{row.getValue("validPeriod")}</div>,
+        },
+        {
+            id: "operations",
+            header: () => <div className="text-left">Action</div>,
+            cell: ({row}) => {
+                const id = row.original.getId()
+                return <div className="flex items-center gap-4">
+                    <Eye size={18} className="text-[#36587A] cursor-pointer" onClick={() => onNavigate(row)}/>
+                    <Pencil size={18} className="text-[#36587A] cursor-pointer" />
+                    <Trash2 size={18} className="text-[#E46A56] cursor-pointer" onClick={() => onClickDelete(id)} />
+                </div>
+            },
+        },
+    ]
+}
--- a/lib/price-plan/data/model/index.ts
+++ b/lib/price-plan/data/model/index.ts
@ -0,0 +1,4 @@
+export interface MenuModel {
+    type: string
+    list: Array<string>
+}
--- a/lib/price-plan/data/repository/index.ts
+++ b/lib/price-plan/data/repository/index.ts
@ -0,0 +1,26 @@
+import { apiClient } from "@/services/api/api-client"
+
+export type CreatePricePlanPayload = {
+    offerType: string
+    offerName: string
+    applyLevel?: string
+    pricePlanCode?: string
+    remarks?: string
+    sourceFrom?: string
+    baseValidPeriod: string
+    versionValidPeriod?: string
+    serviceType?: number
+}
+
+export const pricePlanRepository = {
+    getMenuList: async () => await apiClient("/api/priceplan/menu", "POST"),
+    getPricePlan: async ({page, size, type}: {page: number, size: number, type: string}) => await apiClient("/api/priceplan", "POST", {
+        page,
+        size,
+        type
+    }),
+    createPricePlan: async (payload: CreatePricePlanPayload) => await apiClient("/api/priceplan/create", "POST", payload),
+    deletePricePlan: async (id: string) => await apiClient("/api/priceplan/delete", "POST", {id}),
+    getPricePlanTypes: async () => await apiClient("/api/priceplan/types", "POST"),
+    getServiceTypes: async () => await apiClient("/api/priceplan/servetypes", "POST"),
+}
--- a/lib/price-plan/model/menu-model.ts
+++ b/lib/price-plan/model/menu-model.ts
@ -0,0 +1,42 @@
+interface Props {
+    parentName: string;
+    pricePlanTypeDto: Array<PricePlanMenuItem>;
+}
+
+export interface PricePlanMenuItem {
+    id: string;
+    pricePlanTypeName: string;
+}
+
+export class PricePlanMenuModel {
+    private parentName: string
+    private pricePlanTypeDto: Array<PricePlanMenuItem>
+
+    constructor({
+        parentName,
+        pricePlanTypeDto,
+    }: Props) {
+        this.parentName = parentName
+        this.pricePlanTypeDto = pricePlanTypeDto
+    }
+
+    getParentName(): string {
+        return this.parentName
+    }
+
+    getPricePlanTypeDto(): Array<PricePlanMenuItem> {
+        return this.pricePlanTypeDto
+    }
+
+    static fromJSON = (data: any) => {
+        return data.data.map((item: {
+            parentName: string,
+            pricePlanTypeDto: Array<PricePlanMenuItem>,
+        }) => {
+            return new PricePlanMenuModel({
+                parentName: item.parentName,
+                pricePlanTypeDto: item.pricePlanTypeDto,
+            })
+        })
+    }
+}
--- a/Show More
+++ b/Show More