feat(backoffice): slicing backoffice dimentorin - feedback & review

.claude/settings.local.json

@@ -1,24 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npx nx run-many:*)",
-      "Bash(npm install:*)",
-      "Bash(npm view:*)",
-      "Bash(npx nx build landing)",
-      "Bash(npm uninstall:*)",
-      "Bash(dir:*)",
-      "Bash(ren page.tsx page-original.tsx)",
-      "Bash(ren:*)",
-      "Bash(npx supabase:*)",
-      "Bash(libs/service/src/types/supabase.ts)",
-      "Bash(npx nx build:*)",
-      "Bash(git add:*)",
-      "Bash(git commit:*)",
-      "Bash(git push)",
-      "Bash(findstr:*)",
-      "Bash(ls:*)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

.dockerignore

@@ -1,55 +0,0 @@
-# Dependencies
-node_modules
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Build outputs
-dist
-.next
-out
-build
-coverage
-
-# IDE
-.vscode
-.idea
-*.swp
-*.swo
-*~
-
-# OS
-.DS_Store
-Thumbs.db
-
-# Git
-.git
-.gitignore
-
-# Environment
-.env
-.env.local
-.env.*.local
-
-# Testing
-coverage
-.nyc_output
-
-# Logs
-logs
-*.log
-
-# Nx
-.nx
-
-# Docker
-Dockerfile
-docker-compose*.yml
-.dockerignore
-
-# Misc
-*.md
-!README.md
-.editorconfig
-.prettierrc
-.eslintrc

.env.example

@@ -1,3 +0,0 @@
-
-VITE_SUPABASE_URL=https://your-project-id.supabase.co
-VITE_SUPABASE_ANON_KEY=your-anon-key-here

.github/workflows/deploy-backoffice.yml

@@ -7,10 +7,6 @@ on:
     paths:
       - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
-concurrency:
-  group: deploy-vps
-  cancel-in-progress: false
-
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -25,20 +21,15 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
-          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
             else
-              cd ~/imphnen-frontend-service-backoffice && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service-backoffice && git pull
             fi
-            cat > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env << EOF
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
             docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
-            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build
             docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d
             docker image prune -af

.github/workflows/deploy-dimentorin.yml

@@ -7,10 +7,6 @@ on:
     paths:
       - 'apps/dimentorin/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
-concurrency:
-  group: deploy-vps
-  cancel-in-progress: false
-
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -25,20 +21,15 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
-          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
             else
-              cd ~/imphnen-frontend-service-dimentorin && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service-dimentorin && git pull
             fi
-            cat > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env << EOF
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
             docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
-            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build
             docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d
             docker image prune -af

.github/workflows/deploy-gacha.yml

@@ -7,10 +7,6 @@ on:
     paths:
       - 'apps/gacha/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
-concurrency:
-  group: deploy-vps
-  cancel-in-progress: false
-
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -25,20 +21,15 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
-          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service-gacha ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
             else
-              cd ~/imphnen-frontend-service-gacha && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service-gacha && git pull
             fi
-            cat > ~/imphnen-frontend-service-gacha/apps/gacha/.env << EOF
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-gacha/apps/gacha/.env
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
             docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
-            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build
             docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d
             docker image prune -af

.github/workflows/deploy-hackathon.yml

@@ -1,45 +0,0 @@
-name: Deploy Hackathon
-
-on:
-  push:
-    branches:
-      - develop
-    paths:
-      - 'apps/hackathon/**' # Auto deploy when changes pushed to apps/hackathon
-
-concurrency:
-  group: deploy-vps
-  cancel-in-progress: false
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v4
-
-      - name: Deploy via SSH
-        uses: appleboy/ssh-action@v1.0.3
-        with:
-          host: ${{ secrets.SSH_HOST }}
-          username: ${{ secrets.SSH_USER }}
-          key: ${{ secrets.SSH_KEY }}
-          port: ${{ secrets.SSH_PORT }}
-          command_timeout: 30m
-          script: |
-            set -e
-            if [ ! -d ~/imphnen-frontend-service-hackathon ]; then
-              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-hackathon
-            else
-              cd ~/imphnen-frontend-service-hackathon && git fetch origin && git reset --hard origin/develop && git pull
-            fi
-            cat > ~/imphnen-frontend-service-hackathon/.env.local << EOF
-            VITE_API_URL=${{ secrets.VITE_API_URL }}
-            VITE_SUPABASE_URL=${{ secrets.VITE_SUPABASE_URL }}
-            VITE_SUPABASE_ANON_KEY=${{ secrets.VITE_SUPABASE_ANON_KEY }}
-            EOF
-            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml down || true
-            docker builder prune -af || true
-            DOCKER_BUILDKIT=1 docker compose --env-file ~/imphnen-frontend-service-hackathon/.env.local -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml build --progress=plain
-            docker compose -f ~/imphnen-frontend-service-hackathon/docker-compose-hackathon.yml up -d
-            docker image prune -af

.github/workflows/deploy-landing.yml

@@ -7,10 +7,6 @@ on:
     paths:
       - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 
-concurrency:
-  group: deploy-vps
-  cancel-in-progress: false
-
 jobs:
   deploy:
     runs-on: ubuntu-latest
@@ -25,20 +21,15 @@ jobs:
           username: ${{ secrets.SSH_USER }}
           key: ${{ secrets.SSH_KEY }}
           port: ${{ secrets.SSH_PORT }}
-          command_timeout: 30m
           script: |
             set -e
             if [ ! -d ~/imphnen-frontend-service ]; then
               git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
             else
-              cd ~/imphnen-frontend-service && git fetch origin && git reset --hard origin/develop && git pull
+              cd ~/imphnen-frontend-service && git pull
             fi
-            cat > ~/imphnen-frontend-service/apps/landing/.env << EOF
+            echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
-            NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}
-            NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
-            NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
-            EOF
             docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
-            DOCKER_BUILDKIT=1 docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build --progress=plain
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
             docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
             docker image prune -af

.gitignore

@@ -62,7 +62,3 @@ storybook-static
 # Next.js
 .next
 out
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
-
-.env.local

.mcp.json

@@ -1,9 +0,0 @@
-{
-  "mcpServers": {
-    "nx-mcp": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["nx", "mcp"]
-    }
-  }
-}

CLAUDE.md

@@ -1,13 +0,0 @@
-<!-- nx configuration start-->
-<!-- Leave the start & end comments to automatically receive updates. -->
-
-# General Guidelines for working with Nx
-
-- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
-- You have access to the Nx MCP server and its tools, use them to help the user
-- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
-- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
-- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
-- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
-
-<!-- nx configuration end-->

apps/backoffice/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025  4:21:27 PM

apps/backoffice/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/backoffice/src/app/(protected)/hackathon-dashboard/page.tsx

@@ -1,32 +0,0 @@
-import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
-import { FC, ReactElement } from 'react';
-
-export const HackathonDashboardPage: FC = (): ReactElement => {
-  return (
-    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
-      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">Dashboard</h1>
-
-      <section className="grid grid-cols-5 gap-5">
-        {/* Participant */}
-        <div className="bg-white px-6 py-4 rounded-md shadow">
-          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">
-            1261
-          </h3>
-          <p className="text-neutral-400 text-p3">Total Participants</p>
-        </div>
-        {/* Team */}
-        <div className="bg-white px-6 py-4 rounded-md shadow">
-          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">206</h3>
-          <p className="text-neutral-400 text-p3">Total Teams</p>
-        </div>
-        {/* Project Submitted */}
-        <div className="bg-white px-6 py-4 rounded-md shadow">
-          <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
-          <p className="text-neutral-400 text-p3">Total Project Submitted</p>
-        </div>
-      </section>
-    </BackofficeWrapper>
-  );
-};
-
-export default HackathonDashboardPage;

apps/backoffice/src/app/(protected)/hackathon-submissions/page.tsx

@@ -1,128 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import {
-  BackofficeWrapper,
-  DataTable,
-} from '@imphnen-frontend-service/ui/organisms';
-import {
-  ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  RowSelectionState,
-  useReactTable,
-} from '@tanstack/react-table';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
-import { EditOutlined } from '@ant-design/icons';
-
-export const HackathonUsersPage: FC = (): ReactElement => {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const mockData: any[] = Array.from({ length: 90 }, (_, i) => ({
-    id: i + 1,
-    project_name: `Project ${i + 1}`,
-    repository_url: `https://github.com/user/repo${i + 1}`,
-    demo_url: `https://demo.example.com/project${i + 1}`,
-    presentation_url: `https://slides.example.com/project${i + 1}`,
-  }));
-
-  type UserStatus = 'active' | 'inactive';
-
-  interface SubmissionType {
-    id: number;
-    project_name: string;
-    repository_url: string;
-    demo_url: string;
-    presentation_url: string;
-  }
-
-  const columns: ColumnDef<SubmissionType>[] = [
-    {
-      header: 'Project Name',
-      accessorKey: 'project_name',
-    },
-    {
-      header: 'Repository URL',
-      accessorKey: 'repository_url',
-    },
-    {
-      header: 'Demo URL',
-      accessorKey: 'demo_url',
-    },
-    {
-      header: 'Presentation URL',
-      accessorKey: 'presentation_url',
-    },
-    {
-      header: 'Action',
-      meta: { cellClassName: cn('w-72') },
-      cell: ({ row }) => (
-        <Button
-          variant="primary"
-          size="sm"
-          className="flex items-center gap-2 w-max"
-          onClick={() => {
-            // View detail logic
-          }}
-        >
-          <EditOutlined className="text-base" /> View & Manage
-        </Button>
-      ),
-    },
-  ];
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
-      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
-        Project Submission
-      </h1>
-      {/* Filters and actions */}
-      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
-        <div className="flex flex-wrap gap-3 items-center">
-          <input
-            type="text"
-            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
-            placeholder="Search name or email"
-          />
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-            <option value="all">All Status</option>
-            <option value="active">Active</option>
-            <option value="suspended">Suspended</option>
-          </select>
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-            <option value="all">All City</option>
-            <option value="jakarta">Jakarta</option>
-            <option value="bandung">Bandung</option>
-          </select>
-        </div>
-
-        {/* Table */}
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-
-      {/* Modals extracted into shared backoffice components */}
-    </BackofficeWrapper>
-  );
-};
-
-export default HackathonUsersPage;

apps/backoffice/src/app/(protected)/hackathon-teams/page.tsx

@@ -1,210 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import {
-  BackofficeWrapper,
-  DataTable,
-} from '@imphnen-frontend-service/ui/organisms';
-import {
-  ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  RowSelectionState,
-  useReactTable,
-} from '@tanstack/react-table';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
-import { useTeams } from '@imphnen-frontend-service/service';
-import { EditOutlined } from '@ant-design/icons';
-
-export const HackathonTeamsPage: FC = (): ReactElement => {
-  const { data: teamsData } = useTeams();
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const mockData: TeamType[] = Array.from({ length: 90 }, (_, i) => ({
-    id: `team-${i + 1}`,
-    name: `Team ${i + 1} - ${i % 3 === 0 ? 'Innovators' : 'Hackers'}`,
-    city: i % 2 === 0 ? 'Jakarta' : 'Bandung',
-    visibility: i % 4 === 0 ? 'private' : 'public',
-    member_count: Math.floor(Math.random() * 4) + 1,
-    has_submission: i % 3 !== 0,
-    created_at: new Date().toISOString(),
-    updated_at: new Date().toISOString(),
-    leader: {
-      user: {
-        fullname: `Leader User ${i}`,
-        email: `leader${i}@example.com`,
-      },
-    },
-  }));
-
-  interface TeamType {
-    id: string;
-    name: string;
-    city: string;
-    visibility: 'public' | 'private';
-    member_count: number;
-    has_submission: boolean;
-    created_at: string;
-    updated_at: string;
-    leader?: {
-      user: {
-        fullname: string;
-        email: string;
-      };
-    };
-  }
-
-  const columns: ColumnDef<TeamType>[] = [
-    {
-      accessorKey: 'id',
-      header: 'ID',
-    },
-    {
-      accessorKey: 'name',
-      header: 'Team Name',
-    },
-    {
-      accessorKey: 'city',
-      header: 'City',
-    },
-    {
-      accessorKey: 'visibility',
-      header: 'Visibility',
-      cell: ({ row }) => {
-        const isPublic = row.original.visibility === 'public';
-        return (
-          <span
-            className={cn(
-              'py-2 px-4 text-sm rounded-2xl text-center',
-              isPublic
-                ? 'bg-info-200 text-info-700'
-                : 'bg-gray-200 text-gray-700'
-            )}
-          >
-            {isPublic ? 'Public' : 'Private'}
-          </span>
-        );
-      },
-    },
-    {
-      accessorKey: 'member_count',
-      header: 'Members',
-    },
-    {
-      id: 'leader',
-      header: 'Leader',
-      cell: ({ row }) => {
-        const leader = row.original.leader?.user;
-        return leader ? (
-          <div>
-            <div className="text-sm font-medium text-gray-900">
-              {leader.fullname}
-            </div>
-            <div className="text-xs text-gray-500">{leader.email}</div>
-          </div>
-        ) : (
-          <span className="text-gray-400 italic">-</span>
-        );
-      },
-    },
-    {
-      accessorKey: 'has_submission',
-      header: 'Submitted',
-      cell: ({ row }) => {
-        const hasSubmission = row.original.has_submission;
-        return (
-          <span
-            className={cn(
-              'py-2 px-4 text-sm rounded-2xl text-center',
-              hasSubmission
-                ? 'bg-success-200 text-success-700'
-                : 'bg-danger-200 text-danger-700'
-            )}
-          >
-            {hasSubmission ? 'Yes' : 'No'}
-          </span>
-        );
-      },
-    },
-    {
-      accessorKey: 'updated_at',
-      header: 'Last Updated',
-      cell: ({ row }) => {
-        return new Date(row.original.updated_at).toLocaleDateString();
-      },
-    },
-    {
-      id: 'actions',
-      header: 'Action',
-      meta: { cellClassName: cn('w-48') },
-      cell: ({ row }) => (
-        <div className="flex items-center gap-2">
-          <Button
-            variant="primary"
-            size="sm"
-            className="flex items-center gap-2 w-max"
-            onClick={() => {
-              // View detail logic
-            }}
-          >
-            <EditOutlined className="text-base" /> View & Manage
-          </Button>
-        </div>
-      ),
-    },
-  ];
-
-  const table = useReactTable({
-    data: mockData,
-    columns,
-    state: {
-      pagination,
-      rowSelection,
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
-    pageCount: Math.ceil(mockData.length / pagination.pageSize),
-    manualPagination: false,
-  });
-
-  return (
-    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
-      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
-        Team Management
-      </h1>
-      {/* Filters and actions */}
-      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
-        <div className="flex flex-wrap gap-3 items-center">
-          <input
-            type="text"
-            className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-64"
-            placeholder="Search name or email"
-          />
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-            <option value="all">All Status</option>
-            <option value="active">Active</option>
-            <option value="suspended">Suspended</option>
-          </select>
-          <select className="border border-neutral-200 rounded-md px-3 py-2 text-label1 w-full sm:w-40">
-            <option value="all">All City</option>
-            <option value="jakarta">Jakarta</option>
-            <option value="bandung">Bandung</option>
-          </select>
-        </div>
-        {/* Table */}
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-      {/* Modals extracted into shared backoffice components */}
-    </BackofficeWrapper>
-  );
-};
-
-export default HackathonTeamsPage;

apps/backoffice/src/app/(protected)/hackathon-users/_components/modal-user-detail.tsx

@@ -1,651 +0,0 @@
-import { FC, useState, useEffect, useMemo, useRef } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
-import {
-  UserOutlined,
-  EnvironmentOutlined,
-  CalendarOutlined,
-  SaveOutlined,
-  CloseOutlined,
-  ExclamationOutlined,
-  CameraOutlined,
-  DeleteOutlined,
-  UploadOutlined,
-} from '@ant-design/icons';
-
-interface UserType {
-  id: string;
-  avatar?: string;
-  fullname: string;
-  bio?: string;
-  location: string;
-  is_active: boolean;
-  skills: string[];
-  created_at: string;
-  updated_at: string;
-}
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  user: UserType | null;
-}
-
-const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose, user }) => {
-  const [formData, setFormData] = useState<UserType | null>(null);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [showAvatarMenu, setShowAvatarMenu] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // Initialize form data when modal opens
-  useEffect(() => {
-    if (isOpen) {
-      if (user) {
-        // Edit existing user
-        setFormData({ ...user });
-      } else {
-        // Create new user
-        setFormData({
-          id: '', // Will be generated by backend
-          fullname: '',
-          bio: '',
-          location: '',
-          is_active: true,
-          skills: [],
-          avatar: undefined,
-          created_at: new Date().toISOString(),
-          updated_at: new Date().toISOString(),
-        });
-      }
-    }
-  }, [isOpen, user]);
-
-  // Check if form has changes
-  const hasChanges = useMemo(() => {
-    if (!formData) return false;
-    if (!user) return true; // New user always has changes
-    return (
-      formData.fullname !== user.fullname ||
-      formData.location !== user.location ||
-      formData.is_active !== user.is_active ||
-      formData.avatar !== user.avatar ||
-      JSON.stringify(formData.skills) !== JSON.stringify(user.skills) ||
-      formData.bio !== user.bio
-    );
-  }, [formData, user]);
-
-  // Check if required fields are filled
-  const isFormValid = useMemo(() => {
-    if (!formData) return false;
-    return formData.fullname.trim() !== '' && formData.location.trim() !== '';
-  }, [formData]);
-
-  const canSave = hasChanges && isFormValid;
-
-  if (!isOpen || !formData) return null;
-
-  const handleInputChange = (
-    field: keyof UserType,
-    value: string | boolean | string[] | undefined
-  ) => {
-    setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
-  };
-
-  const handleSkillsChange = (skills: string[]) => {
-    setFormData((prev) => (prev ? { ...prev, skills } : null));
-  };
-
-  const handleSave = () => {
-    if (!formData) return;
-
-    if (user) {
-      // Update existing user
-      console.log('Update user data:', formData);
-    } else {
-      // Create new user
-      console.log('Create new user:', formData);
-    }
-    // Here you would typically make an API call to save the data
-    onClose();
-  };
-
-  const handleCancel = () => {
-    if (user) {
-      setFormData({ ...user }); // Reset to original for edit mode
-    }
-    onClose();
-  };
-
-  const handleDeleteAccount = () => {
-    if (!user) return; // Can't delete new user
-    console.log('Delete user:', user.id);
-    setShowDeleteConfirm(false);
-    onClose();
-  };
-
-  const handleAvatarUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      // Validate file type
-      if (!file.type.startsWith('image/')) {
-        alert('Please select an image file');
-        return;
-      }
-
-      // Validate file size (max 5MB)
-      if (file.size > 5 * 1024 * 1024) {
-        alert('Image size must be less than 5MB');
-        return;
-      }
-
-      // Create preview URL
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const avatarUrl = e.target?.result as string;
-        handleInputChange('avatar', avatarUrl);
-        setShowAvatarMenu(false);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const handleRemoveAvatar = () => {
-    handleInputChange('avatar', undefined);
-    setShowAvatarMenu(false);
-  };
-
-  const triggerFileUpload = () => {
-    fileInputRef.current?.click();
-  };
-
-  const availableSkills = [
-    'Frontend Developer',
-    'Backend Developer',
-    'Full Stack Developer',
-    'DevOps Engineer',
-    'UI/UX Designer',
-    'Product Manager',
-    'Data Scientist',
-    'Mobile Developer',
-  ];
-
-  return (
-    <div className="fixed inset-0 z-50">
-      <div
-        className="fixed inset-0 bg-black/50"
-        onClick={(e) => {
-          setShowAvatarMenu(false);
-          onClose();
-        }}
-      />
-      <div className="fixed inset-0 flex items-center justify-center p-4">
-        <div
-          className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {/* Hidden File Input */}
-          <input
-            type="file"
-            ref={fileInputRef}
-            onChange={handleAvatarUpload}
-            accept="image/*"
-            className="hidden"
-          />
-          {/* Header */}
-          <div className="border-b border-neutral-200 px-8 py-6 flex justify-between items-start">
-            <div className="flex items-center gap-4">
-              {/* Interactive User Avatar */}
-              <div className="relative group ">
-                <div className="w-16 h-16 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden border-2 border-transparent group-hover:border-primary-300 transition-colors">
-                  {formData.avatar ? (
-                    <img
-                      src={formData.avatar}
-                      alt={formData.fullname}
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <UserOutlined className="text-neutral-500 text-2xl" />
-                  )}
-                </div>
-
-                {/* Avatar Hover Overlay */}
-                <button
-                  onClick={() => setShowAvatarMenu(!showAvatarMenu)}
-                  className="absolute inset-0 bg-neutral-400 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                >
-                  <CameraOutlined className="text-white text-lg" />
-                </button>
-
-                {/* Avatar Menu Dropdown */}
-                {showAvatarMenu && (
-                  <div className="absolute top-full left-0 mt-2 bg-white rounded-lg shadow-lg border border-neutral-200 py-2 min-w-[140px] z-10">
-                    <button
-                      onClick={triggerFileUpload}
-                      className="w-full px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-50 flex items-center gap-2 cursor-pointer"
-                    >
-                      <UploadOutlined className="text-sm" />
-                      {formData.avatar ? 'Change Photo' : 'Upload Photo'}
-                    </button>
-                    {formData.avatar && (
-                      <button
-                        onClick={handleRemoveAvatar}
-                        className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2 cursor-pointer"
-                      >
-                        <DeleteOutlined className="text-sm" />
-                        Remove Photo
-                      </button>
-                    )}
-                  </div>
-                )}
-              </div>
-              <div>
-                <div className="flex items-center gap-3 mb-2">
-                  <h2 className="text-2xl font-bold text-neutral-900">
-                    {user ? 'Edit User Profile' : 'Create New User'}
-                  </h2>
-                  {user && (
-                    <span className="px-3 py-1 bg-info-100 text-info-700 text-xs font-medium rounded-2xl">
-                      Hover avatar to change
-                    </span>
-                  )}
-                </div>
-                <div className="text-sm text-neutral-500">
-                  {user
-                    ? `Make changes to ${
-                        formData.fullname || 'this user'
-                      }'s profile information`
-                    : 'Fill in the information below to create a new user account'}
-                </div>
-              </div>
-            </div>
-            <button
-              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
-              onClick={() => {
-                setShowAvatarMenu(false);
-                handleCancel();
-              }}
-            >
-              <CloseOutlined className="text-neutral-400 text-lg cursor-pointer" />
-            </button>
-          </div>
-
-          {/* Content */}
-          <div className="p-8" onClick={() => setShowAvatarMenu(false)}>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-              {/* Left Column - Basic Info */}
-              <div className="space-y-6">
-                <div>
-                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
-                    Basic Information
-                  </h3>
-                  <div className="space-y-4">
-                    {/* Full Name - Required */}
-                    <div className="flex items-center gap-3">
-                      <UserOutlined className="text-neutral-400" />
-                      <div className="flex-1">
-                        <label className="text-sm text-neutral-500 block mb-1">
-                          Full Name <span className="text-red-500">*</span>
-                        </label>
-                        <input
-                          type="text"
-                          value={formData.fullname}
-                          onChange={(e) =>
-                            handleInputChange('fullname', e.target.value)
-                          }
-                          className={cn(
-                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none',
-                            formData.fullname.trim() === ''
-                              ? 'border-red-300 bg-red-50'
-                              : 'border-neutral-300'
-                          )}
-                          placeholder="Enter full name"
-                        />
-                        {formData.fullname.trim() === '' && (
-                          <p className="text-red-500 text-xs mt-1">
-                            Full name is required
-                          </p>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Location - Required */}
-                    <div className="flex items-center gap-3">
-                      <EnvironmentOutlined className="text-neutral-400" />
-                      <div className="flex-1">
-                        <label className="text-sm text-neutral-500 block mb-1">
-                          Location <span className="text-red-500">*</span>
-                        </label>
-                        <select
-                          value={formData.location}
-                          onChange={(e) =>
-                            handleInputChange('location', e.target.value)
-                          }
-                          className={cn(
-                            'w-full border rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white',
-                            formData.location.trim() === ''
-                              ? 'border-red-300 bg-red-50'
-                              : 'border-neutral-300'
-                          )}
-                        >
-                          <option value="">Select location</option>
-                          <option value="Jakarta">Jakarta</option>
-                          <option value="Bandung">Bandung</option>
-                          <option value="Surabaya">Surabaya</option>
-                          <option value="Medan">Medan</option>
-                          <option value="Yogyakarta">Yogyakarta</option>
-                        </select>
-                        {formData.location.trim() === '' && (
-                          <p className="text-red-500 text-xs mt-1">
-                            Location is required
-                          </p>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Joined Date - Read Only - Only show for existing users */}
-                    {user && (
-                      <div className="flex items-center gap-3">
-                        <CalendarOutlined className="text-neutral-400" />
-                        <div>
-                          <p className="text-sm text-neutral-500">
-                            Joined Date
-                          </p>
-                          <p className="font-medium">
-                            {new Date(formData.created_at).toLocaleDateString(
-                              'en-US',
-                              {
-                                year: 'numeric',
-                                month: 'long',
-                                day: 'numeric',
-                              }
-                            )}
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                {/* Bio Section - Optional */}
-                <div>
-                  <h3 className="text-lg font-semibold text-neutral-900 mb-3">
-                    Bio{' '}
-                    <span className="text-neutral-400 text-sm font-normal">
-                      (Optional)
-                    </span>
-                  </h3>
-                  <textarea
-                    value={formData.bio || ''}
-                    onChange={(e) =>
-                      handleInputChange('bio', e.target.value || undefined)
-                    }
-                    placeholder="Tell us about yourself..."
-                    rows={4}
-                    className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
-                  />
-                </div>
-              </div>
-
-              {/* Right Column - Skills & Status */}
-              <div className="space-y-6">
-                {/* Account Status - Enhanced Tab Design */}
-                <div>
-                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
-                    Account Status
-                  </h3>
-                  <div className="flex bg-neutral-100 p-1 rounded-lg">
-                    <button
-                      onClick={() => handleInputChange('is_active', true)}
-                      className={cn(
-                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
-                        formData.is_active
-                          ? 'bg-white text-success-700 shadow-sm ring-1 ring-success-200'
-                          : 'text-neutral-600 hover:text-neutral-800'
-                      )}
-                    >
-                      <div className="flex items-center justify-center gap-2">
-                        <div
-                          className={cn(
-                            'w-2 h-2 rounded-full',
-                            formData.is_active
-                              ? 'bg-success-500'
-                              : 'bg-neutral-400'
-                          )}
-                        />
-                        Active
-                      </div>
-                    </button>
-                    <button
-                      onClick={() => handleInputChange('is_active', false)}
-                      className={cn(
-                        'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer',
-                        !formData.is_active
-                          ? 'bg-white text-neutral-700 shadow-sm ring-1 ring-neutral-200'
-                          : 'text-neutral-600 hover:text-neutral-800'
-                      )}
-                    >
-                      <div className="flex items-center justify-center gap-2">
-                        <div
-                          className={cn(
-                            'w-2 h-2 rounded-full',
-                            !formData.is_active
-                              ? 'bg-neutral-500'
-                              : 'bg-neutral-400'
-                          )}
-                        />
-                        Inactive
-                      </div>
-                    </button>
-                  </div>
-                  <p className="text-xs text-neutral-500 mt-2">
-                    {formData.is_active
-                      ? 'User can access their account and participate in activities'
-                      : 'User account is suspended and cannot access services'}
-                  </p>
-                </div>
-
-                {/* Skills Section - Optional */}
-                <div>
-                  <h3 className="text-lg font-semibold text-neutral-900 mb-4">
-                    Skills & Expertise{' '}
-                    <span className="text-neutral-400 text-sm font-normal">
-                      (Optional)
-                    </span>
-                  </h3>
-                  <div className="space-y-3">
-                    <div className="flex flex-wrap gap-2 min-h-10 p-3 border border-neutral-300 rounded-lg bg-neutral-50">
-                      {formData.skills.length > 0 ? (
-                        formData.skills.map((skill, index) => (
-                          <span
-                            key={index}
-                            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl text-sm font-medium bg-blue-100 text-blue-800"
-                          >
-                            {skill}
-                            <button
-                              onClick={() =>
-                                handleSkillsChange(
-                                  formData.skills.filter((_, i) => i !== index)
-                                )
-                              }
-                              className="text-blue-600 hover:text-blue-800 ml-1 cursor-pointer"
-                            >
-                              ✕
-                            </button>
-                          </span>
-                        ))
-                      ) : (
-                        <span className="text-neutral-400 text-sm">
-                          No skills added yet
-                        </span>
-                      )}
-                    </div>
-                    <select
-                      value=""
-                      onChange={(e) => {
-                        if (
-                          e.target.value &&
-                          !formData.skills.includes(e.target.value)
-                        ) {
-                          handleSkillsChange([
-                            ...formData.skills,
-                            e.target.value,
-                          ]);
-                        }
-                      }}
-                      className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none bg-white"
-                    >
-                      <option value="">Add a skill...</option>
-                      {availableSkills
-                        .filter((skill) => !formData.skills.includes(skill))
-                        .map((skill) => (
-                          <option key={skill} value={skill}>
-                            {skill}
-                          </option>
-                        ))}
-                    </select>
-                  </div>
-                </div>
-
-                {/* Account Details - Read Only - Only show for existing users */}
-                {user && (
-                  <div>
-                    <h3 className="text-lg font-semibold text-neutral-900 mb-4">
-                      Account Details
-                    </h3>
-                    <div className="space-y-3 bg-neutral-50 p-4 rounded-lg">
-                      <div className="flex justify-between items-center py-1">
-                        <span className="text-neutral-600 text-sm">
-                          User ID
-                        </span>
-                        <span className="font-mono text-sm text-neutral-800">
-                          {formData.id}
-                        </span>
-                      </div>
-                      <div className="flex justify-between items-center py-1">
-                        <span className="text-neutral-600 text-sm">
-                          Last Updated
-                        </span>
-                        <span className="text-sm text-neutral-800">
-                          {new Date(formData.updated_at).toLocaleDateString(
-                            'en-US',
-                            {
-                              month: 'short',
-                              day: 'numeric',
-                              year: 'numeric',
-                            }
-                          )}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {/* Footer Actions */}
-          <div className="border-t border-neutral-200 px-8 py-6">
-            <div className="flex justify-between items-center">
-              <div className="flex items-center gap-4">
-                <div className="text-sm text-neutral-500">
-                  {canSave
-                    ? 'Ready to save changes'
-                    : hasChanges
-                    ? 'Please fill required fields'
-                    : 'No changes made'}
-                </div>
-                {/* Delete Account Button - Only show for existing users */}
-                {user && (
-                  <button
-                    onClick={() => setShowDeleteConfirm(true)}
-                    className="text-red-600 hover:text-red-700 text-sm font-medium transition-colors cursor-pointer"
-                  >
-                    Delete Account
-                  </button>
-                )}
-              </div>
-
-              <div className="flex items-center gap-3">
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  onClick={handleCancel}
-                  className="px-6"
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={handleSave}
-                  disabled={!canSave}
-                  className={cn(
-                    'flex items-center gap-2 px-6',
-                    !canSave && 'opacity-50 cursor-not-allowed'
-                  )}
-                >
-                  <SaveOutlined className="text-sm" />
-                  {user ? 'Save Changes' : 'Create User'}
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {/* Delete Confirmation Modal */}
-          {showDeleteConfirm && (
-            <div className="fixed inset-0 z-60">
-              <div
-                className="fixed inset-0 bg-black/50"
-                onClick={() => setShowDeleteConfirm(false)}
-              />
-              <div className="fixed inset-0 flex items-center justify-center p-4">
-                <div className="bg-white rounded-xl shadow-2xl w-full max-w-md">
-                  <div className="p-6">
-                    <div className="flex items-center gap-3 mb-4">
-                      <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
-                        <ExclamationOutlined className="text-red-600 text-lg" />
-                      </div>
-                      <div>
-                        <h3 className="text-lg font-semibold text-neutral-900">
-                          Delete Account
-                        </h3>
-                        <p className="text-sm text-neutral-500">
-                          This action cannot be undone
-                        </p>
-                      </div>
-                    </div>
-                    <p className="text-neutral-700 mb-6">
-                      Are you sure you want to permanently delete{' '}
-                      <strong>{formData.fullname}</strong>'s account? This will
-                      remove all their data and cannot be reversed.
-                    </p>
-                    <div className="flex gap-3 justify-end">
-                      <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={() => setShowDeleteConfirm(false)}
-                        className="px-4"
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        variant="primary"
-                        size="sm"
-                        onClick={handleDeleteAccount}
-                        className="px-4 bg-red-600 hover:bg-red-700 border-red-600"
-                      >
-                        Delete Account
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ModalUserDetail;

apps/backoffice/src/app/(protected)/hackathon-users/page.tsx

@@ -1,476 +0,0 @@
-import { FC, ReactElement, useState, useMemo, useCallback } from 'react';
-import ModalUserDetail from './_components/modal-user-detail';
-import {
-  BackofficeWrapper,
-  DataTable,
-} from '@imphnen-frontend-service/ui/organisms';
-import { ColumnDef } from '@tanstack/react-table';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
-import {
-  EditOutlined,
-  UserOutlined,
-  SearchOutlined,
-  FilterOutlined,
-  PlusOutlined,
-} from '@ant-design/icons';
-// Removed unused SearchOutlined icon after schema revision
-
-// Define interface outside component
-interface UserType {
-  id: string; // UUID
-  avatar?: string;
-  fullname: string;
-  bio?: string;
-  location: string;
-  is_active: boolean; // admin can deactivate
-  skills: string[]; // Frontend Developer, Backend Developer, etc.
-  created_at: string;
-  updated_at: string;
-}
-
-// Move mock data outside component to prevent recreation
-const skillsOptions = [
-  'Frontend Developer',
-  'Backend Developer',
-  'Full Stack Developer',
-  'DevOps Engineer',
-  'UI/UX Designer',
-  'Product Manager',
-  'Data Scientist',
-  'Mobile Developer',
-];
-
-const locations = ['Jakarta', 'Bandung', 'Surabaya', 'Medan', 'Yogyakarta'];
-const bios = [
-  'Passionate developer with 5+ years experience',
-  'Tech enthusiast and problem solver',
-  'Building scalable solutions for modern problems',
-  'Creative designer with technical background',
-  'Data-driven decision maker',
-];
-
-const mockData: UserType[] = Array.from({ length: 50 }, (_, i) => {
-  const randomSkillsCount = Math.floor(Math.random() * 3) + 1; // 1-3 skills
-  const randomSkills = skillsOptions
-    .sort(() => 0.5 - Math.random())
-    .slice(0, randomSkillsCount);
-
-  return {
-    id: `24db9e4d-ca4c-46aa-ac36-8ef04bbe01${String(i).padStart(2, '0')}`,
-    avatar:
-      i % 4 === 0
-        ? `https://ui-avatars.com/api/?name=${encodeURIComponent(
-            i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana'
-          )}&background=random`
-        : undefined,
-    fullname:
-      i % 3 === 0
-        ? 'Ahmad Wijuana'
-        : i % 3 === 1
-        ? 'Sofia Wijuana'
-        : 'Budi Santoso',
-    bio: i % 4 === 0 ? bios[i % bios.length] : undefined,
-    location: locations[i % locations.length],
-    is_active: i % 7 !== 0, // More realistic distribution
-    skills: randomSkills,
-    created_at: new Date(
-      Date.now() - i * 86400000 * (Math.random() * 30 + 1)
-    ).toISOString(), // Random within last 30-60 days
-    updated_at: new Date().toISOString(),
-  };
-});
-
-export const HackathonUsersPage: FC = (): ReactElement => {
-  const [showDetailModal, setShowDetailModal] = useState(false);
-  const [showNewUserModal, setShowNewUserModal] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
-  const [globalFilter, setGlobalFilter] = useState('');
-
-  // Advanced filtering states
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [locationFilter, setLocationFilter] = useState('all');
-  const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
-
-  // Constants
-  const pageSize = 10;
-
-  // Memoize the callback to prevent recreation
-  const handleShowDetailModal = useCallback((user: UserType) => {
-    setSelectedUser(user);
-    setShowDetailModal(true);
-  }, []);
-
-  const handleCloseDetailModal = useCallback(() => {
-    setShowDetailModal(false);
-    setSelectedUser(null);
-  }, []);
-
-  const handleShowNewUserModal = useCallback(() => {
-    setShowNewUserModal(true);
-  }, []);
-
-  const handleCloseNewUserModal = useCallback(() => {
-    setShowNewUserModal(false);
-  }, []);
-
-  // Filter data based on current filter states
-  const filteredData = useMemo(() => {
-    return mockData.filter((user) => {
-      // Status filter
-      if (statusFilter !== 'all') {
-        const isActive = statusFilter === 'active';
-        if (user.is_active !== isActive) return false;
-      }
-
-      // Location filter
-      if (locationFilter !== 'all' && user.location !== locationFilter) {
-        return false;
-      }
-
-      // Skills filter
-      if (skillsFilter.length > 0) {
-        const hasMatchingSkill = skillsFilter.some((skill) =>
-          user.skills.includes(skill)
-        );
-        if (!hasMatchingSkill) return false;
-      }
-
-      return true;
-    });
-  }, [statusFilter, locationFilter, skillsFilter]);
-
-  // Memoize columns to prevent recreation on every render
-  const columns: ColumnDef<UserType>[] = useMemo(
-    () => [
-      {
-        accessorKey: 'fullname',
-        header: 'User',
-        cell: ({ row }) => (
-          <div className="flex items-center gap-3">
-            {/* Avatar */}
-            <div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden shrink-0">
-              {row.original.avatar ? (
-                <img
-                  src={row.original.avatar}
-                  alt={row.original.fullname}
-                  className="w-full h-full object-cover"
-                />
-              ) : (
-                <UserOutlined className="text-neutral-500 text-lg" />
-              )}
-            </div>
-            {/* Name only */}
-            <div className="min-w-0 flex-1">
-              <p className="font-medium text-neutral-900 truncate">
-                {row.original.fullname}
-              </p>
-            </div>
-          </div>
-        ),
-        enableSorting: true,
-      },
-      {
-        accessorKey: 'skills',
-        header: 'Skills',
-        cell: ({ row }) => (
-          <div className="flex flex-wrap gap-1 max-w-xs">
-            {row.original.skills.slice(0, 2).map((skill, index) => (
-              <span
-                key={index}
-                className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
-              >
-                {skill.replace(' Developer', '').replace(' Engineer', '')}
-              </span>
-            ))}
-            {row.original.skills.length > 2 && (
-              <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
-                +{row.original.skills.length - 2}
-              </span>
-            )}
-          </div>
-        ),
-        enableSorting: false,
-      },
-      {
-        accessorKey: 'location',
-        header: 'Location',
-        cell: ({ row }) => (
-          <span className="text-neutral-700">{row.original.location}</span>
-        ),
-        enableSorting: true,
-      },
-      {
-        accessorKey: 'is_active',
-        header: 'Status',
-        cell: ({ row }) => (
-          <div className="flex items-center gap-2">
-            <div
-              className={cn(
-                'w-2 h-2 rounded-full',
-                row.original.is_active ? 'bg-success-500' : 'bg-neutral-400'
-              )}
-            />
-            <span
-              className={cn(
-                'text-sm font-medium',
-                row.original.is_active ? 'text-success-700' : 'text-neutral-500'
-              )}
-            >
-              {row.original.is_active ? 'Active' : 'Inactive'}
-            </span>
-          </div>
-        ),
-        enableSorting: true,
-        sortingFn: (rowA, rowB) => {
-          const aActive = rowA.original.is_active;
-          const bActive = rowB.original.is_active;
-          if (aActive && !bActive) return -1;
-          if (!aActive && bActive) return 1;
-          return 0;
-        },
-      },
-      {
-        accessorKey: 'created_at',
-        header: 'Joined',
-        cell: ({ row }) => (
-          <span className="text-neutral-900 text-sm">
-            {new Date(row.original.created_at).toLocaleDateString('en-US', {
-              year: 'numeric',
-              month: 'short',
-              day: 'numeric',
-            })}
-          </span>
-        ),
-        enableSorting: true,
-        sortingFn: 'datetime',
-      },
-      {
-        id: 'actions',
-        header: 'Actions',
-        meta: { cellClassName: cn('w-48') },
-        cell: ({ row }) => (
-          <div className="flex items-center gap-2">
-            <Button
-              variant="primary"
-              size="sm"
-              className="flex items-center gap-2 text-sm px-4 py-2"
-              onClick={() => handleShowDetailModal(row.original)}
-            >
-              <EditOutlined className="text-sm" />
-              Manage
-            </Button>
-            <Button
-              variant="secondary"
-              size="sm"
-              className="text-sm px-4 py-2"
-              onClick={() => {
-                // Toggle user status - implement later
-                console.log(`Toggle status for ${row.original.fullname}`);
-              }}
-            >
-              {row.original.is_active ? 'Deactivate' : 'Activate'}
-            </Button>
-          </div>
-        ),
-        enableSorting: false,
-      },
-    ],
-    [handleShowDetailModal]
-  );
-
-  return (
-    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
-      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
-        User Management
-      </h1>
-      {/* Filters and actions */}
-      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
-        <div className="flex flex-wrap gap-3 items-center justify-between">
-          {/* Left side - Search & filters */}
-          <div className="flex flex-wrap gap-3 items-center">
-            {/* Search bar */}
-            <div className="relative">
-              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
-              <input
-                type="text"
-                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-80 focus:border-primary-500 focus:outline-none"
-                placeholder="Search users by name or location..."
-                value={globalFilter}
-                onChange={(e) => setGlobalFilter(e.target.value)}
-              />
-            </div>
-
-            {/* Status Filter */}
-            <div className="relative">
-              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
-              <select
-                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-36 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value)}
-              >
-                <option value="all">All Status</option>
-                <option value="active">Active</option>
-                <option value="inactive">Inactive</option>
-              </select>
-            </div>
-
-            {/* Location Filter */}
-            <div className="relative">
-              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
-              <select
-                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value={locationFilter}
-                onChange={(e) => setLocationFilter(e.target.value)}
-              >
-                <option value="all">All Locations</option>
-                {locations.map((location) => (
-                  <option key={location} value={location}>
-                    {location}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {/* Skills Filter with Icon */}
-            <div className="relative">
-              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
-              <select
-                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
-                value=""
-                onChange={(e) => {
-                  if (
-                    e.target.value &&
-                    !skillsFilter.includes(e.target.value)
-                  ) {
-                    setSkillsFilter((prev) => [...prev, e.target.value]);
-                  }
-                }}
-              >
-                <option value="">Add Skill Filter</option>
-                {skillsOptions.map((skill) => (
-                  <option
-                    key={skill}
-                    value={skill}
-                    disabled={skillsFilter.includes(skill)}
-                  >
-                    {skill}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          {/* Right side - Add User Button */}
-          <div className="flex items-center gap-3">
-            <Button
-              variant="primary"
-              size="md"
-              className="flex items-center gap-2 px-4 py-2"
-              onClick={handleShowNewUserModal}
-            >
-              <PlusOutlined className="text-sm" />
-              Add User
-            </Button>
-          </div>
-        </div>
-
-        {/* Active filters display */}
-        {(skillsFilter.length > 0 ||
-          statusFilter !== 'all' ||
-          locationFilter !== 'all') && (
-          <div className="flex flex-wrap gap-2 items-center">
-            <span className="text-sm text-neutral-600">Active filters:</span>
-
-            {/* Status filter badge */}
-            {statusFilter !== 'all' && (
-              <span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
-                Status: {statusFilter}
-                <button
-                  onClick={() => setStatusFilter('all')}
-                  className="text-info-600 hover:text-info-800 cursor-pointer"
-                >
-                  ✕
-                </button>
-              </span>
-            )}
-
-            {/* Location filter badge */}
-            {locationFilter !== 'all' && (
-              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
-                Location: {locationFilter}
-                <button
-                  onClick={() => setLocationFilter('all')}
-                  className="text-green-600 hover:text-green-800 cursor-pointer"
-                >
-                  ✕
-                </button>
-              </span>
-            )}
-
-            {/* Skills filter badges */}
-            {skillsFilter.map((skill) => (
-              <span
-                key={skill}
-                className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-2xl text-sm"
-              >
-                {skill.replace(' Developer', '').replace(' Engineer', '')}
-                <button
-                  onClick={() =>
-                    setSkillsFilter((prev) => prev.filter((s) => s !== skill))
-                  }
-                  className="text-purple-600 hover:text-purple-800 cursor-pointer"
-                >
-                  ✕
-                </button>
-              </span>
-            ))}
-
-            {/* Clear all filters */}
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => {
-                setStatusFilter('all');
-                setLocationFilter('all');
-                setSkillsFilter([]);
-                setGlobalFilter('');
-              }}
-              className="text-sm text-neutral-600"
-            >
-              Clear All
-            </Button>
-          </div>
-        )}
-
-        {/* Pagination-aware results display */}
-        {filteredData.length > 0 && (
-          <div className="text-sm text-neutral-600">
-            Showing {Math.min(pageSize, filteredData.length)} of{' '}
-            {filteredData.length} users
-            {filteredData.length > pageSize}
-          </div>
-        )}
-
-        {/* Table */}
-        <DataTable data={filteredData} columns={columns} pageSize={10} />
-      </section>
-
-      {/* Modals component */}
-      <ModalUserDetail
-        isOpen={showDetailModal}
-        onClose={handleCloseDetailModal}
-        user={selectedUser}
-      />
-
-      {/* New User Modal */}
-      <ModalUserDetail
-        isOpen={showNewUserModal}
-        onClose={handleCloseNewUserModal}
-        user={null} // null indicates creating new user
-      />
-    </BackofficeWrapper>
-  );
-};
-
-export default HackathonUsersPage;

apps/backoffice/src/app/(protected)/layout.tsx

@@ -1,51 +1,13 @@
-import { FC, ReactElement, useState } from 'react';
+import { FC, ReactElement } from 'react';
 import { Outlet } from 'react-router-dom';
 import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 
 export const AppLayout: FC = (): ReactElement => {
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
       <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar
+        <BackofficeSidebar />
-          isOpen={mobileSidebarOpen}
-          onClose={() => setMobileSidebarOpen(false)}
-        />
         <div className="flex-1 overflow-auto">
-          {/* Sticky top header */}
-          <header
-            className={
-              'lg:hidden sticky top-0 bg-white border-b border-primary-200 px-4 py-3 flex items-center gap-3 ' +
-              (mobileSidebarOpen ? 'z-0' : 'z-30')
-            }
-          >
-            {/* Mobile menu button (shown on small screens) */}
-            <button
-              type="button"
-              className="lg:hidden p-2 rounded-md hover:bg-gray-100 text-gray-700"
-              onClick={() => setMobileSidebarOpen(true)}
-              aria-label="Open sidebar"
-            >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            </button>
-            <h1 className="text-p3 font-semibold text-primary-700">
-              IMPHNEN Backoffice
-            </h1>
-          </header>
-
           <Outlet />
         </div>
       </div>

apps/backoffice/src/app/(protected)/users-dimentorin/page.tsx

@@ -1,29 +1,19 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined } from "@ant-design/icons";
-import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
-import {
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
-  BackofficeWrapper,
+import { cn, For } from "@imphnen-frontend-service/utils";
-  DataTable,
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
-} from '@imphnen-frontend-service/ui/organisms';
+import { ReactElement, useState } from "react";
-import { cn, For } from '@imphnen-frontend-service/utils';
+import { ModalDetailUser } from "./_components/modal/detail";
-import {
-  ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  PaginationState,
-  RowSelectionState,
-  useReactTable,
-} from '@tanstack/react-table';
-import { ReactElement, useState } from 'react';
-import { ModalDetailUser } from './_components/modal/detail';
 
 type UserStatus = 'active' | 'inactive';
 
 interface UserType {
-  id: number;
+  id: number
-  name: string;
+  name: string
-  email: string;
+  email: string
-  rating: number;
+  rating: number
-  status: UserStatus;
+  status: UserStatus
 }
 
 const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
@@ -32,15 +22,15 @@ const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
   email: 'fullname23@gmail.com',
   rating: 4.5,
   status: i % 2 === 0 ? 'active' : 'inactive',
-}));
+}))
 
 export default function Components(): ReactElement {
-  const TABS = ['mentor', 'mentee'] as const;
+  const TABS = ['mentor', 'mentee'] as const
-  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor');
+  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor')
-  const [showDetail, setShowDetail] = useState(false);
+  const [showDetail, setShowDetail] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
@@ -49,7 +39,7 @@ export default function Components(): ReactElement {
   const columns: ColumnDef<UserType>[] = [
     {
       id: 'select',
-      meta: { cellClassName: cn('w-20') },
+      meta: { cellClassName: cn("w-20") },
       header: ({ table }) => (
         <input
           type="checkbox"
@@ -107,7 +97,7 @@ export default function Components(): ReactElement {
     },
     {
       header: 'Action',
-      meta: { cellClassName: cn('w-72') },
+      meta: { cellClassName: cn("w-72") },
       cell: ({ row }) => (
         <Button
           variant="primary"
@@ -123,7 +113,7 @@ export default function Components(): ReactElement {
         </Button>
       ),
     },
-  ];
+  ]
 
   const table = useReactTable({
     data: mockData,
@@ -144,19 +134,14 @@ export default function Components(): ReactElement {
   return (
     <BackofficeWrapper title="Dimentorin.dev">
       <div className="mb-8 flex justify-between items-center">
-        <h1 className="text-p1 font-semibold text-neutral-700 mb-8">
+        <h1 className="text-p1 font-semibold text-neutral-700">User Management</h1>
-          User Management
-        </h1>
         <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
           <For data={TABS}>
             {(tab) => (
               <Button
                 key={tab}
                 variant="text"
-                className={cn(
+                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
-                  'px-3 py-2 capitalize',
-                  activeTab === tab && 'bg-white'
-                )}
                 onClick={() => setActiveTab(tab)}
               >
                 {tab}
@@ -178,16 +163,12 @@ export default function Components(): ReactElement {
             </div>
           </div>
           <Select>
-            <option selected disabled>
+            <option selected disabled>Rating</option>
-              Rating
-            </option>
             <option value="4.5">4.5</option>
             <option value="5">5</option>
           </Select>
           <Select>
-            <option selected disabled>
+            <option selected disabled>Status</option>
-              Status
-            </option>
             <option value="active">Active</option>
             <option value="inactive">Inactive</option>
           </Select>

apps/backoffice/src/index.css

@@ -130,7 +130,7 @@
   html {
     font-family: 'Bai Jamjuree', sans-serif;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 1.2;
   }
-}
+}

apps/backoffice/src/middleware.ts

@@ -88,7 +88,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
     return null;
   }
 
-  // if (!session) return redirect('/auth/login');
+  if (!session) return redirect('/auth/login');
 
   const matchedRoute = mappingRoutePermissions.find(
     (route) => route.path === pathname

apps/dimentorin/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025  4:21:27 PM

apps/dimentorin/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/dimentorin/src/app/(public)/profile/[id]/page.tsx

@@ -1,166 +0,0 @@
-'use client';
-
-import { FC, ReactElement, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { ProfileForm, ProfileSidebar, ProfileHeader } from '../_components';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { NotificationModal, NotificationType } from '../_components/modals/notification-modal';
-import { ProfileProvider, useProfile } from '../_components/contexts/profile-context';
-import { EditProfileModal } from '../_components/modals/edit-profile-modal';
-
-const ProfileByIdPage: FC = (): ReactElement => {
-  const params = useParams();
-  const id = (params && params.id) ? params.id as string : undefined;
-
-  if (!id) {
-    return (
-      <main className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-red-600 text-lg">Profile ID not found.</p>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <ProfileProvider profileId={id} profileType="user">
-      <ProfileByIdContent />
-    </ProfileProvider>
-  );
-};
-
-const ProfileByIdContent: FC = (): ReactElement => {
-  const { profileData, isLoading, error, profileType } = useProfile();
-
-  const [notification, setNotification] = useState<{
-    isOpen: boolean;
-    type: 'success' | 'error';
-    title: string;
-    message?: string;
-  }>({
-    isOpen: false,
-    type: 'success',
-    title: '',
-    message: ''
-  });
-
-  const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false);
-
-  const getProfileTitle = () => {
-    if (profileData?.fullname) {
-      return `${profileData.fullname}'s Profile`;
-    }
-    return profileType === 'user' ? 'User Profile' : 'Mentor Profile';
-  };
-
-  const showNotification = (type: NotificationType['type'], title: string, message?: string) => {
-    setNotification({
-      isOpen: true,
-      type,
-      title,
-      message
-    });
-  };
-
-  const hideNotification = () => {
-    setNotification(prev => ({ ...prev, isOpen: false }));
-  };
-
-  const openEditProfileModal = () => {
-    setIsEditProfileModalOpen(true);
-  };
-
-  const closeEditProfileModal = () => {
-    setIsEditProfileModalOpen(false);
-  };
-
-  // Set isViewOnly to true for this page
-  const isViewOnly = true;
-
-  if (isLoading) {
-    return (
-      <main className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Loading profile...</p>
-        </div>
-      </main>
-    );
-  }
-
-  if (error) {
-    return (
-      <main className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-red-600 text-lg">Failed to load profile</p>
-          <p className="text-gray-600 mt-2">Profile not found or you don't have permission to view it.</p>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <main className="min-h-screen">
-      <div className="">
-        <div className="w-full px-8 md:px-[60px] lg:px-20 py-4">
-          <div className="max-w-7xl mx-auto">
-            <Button variant="primary" className="flex items-center gap-2">
-              <ArrowLeftOutlined />
-              Kembali ke Dashboard
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="w-full px-8 md:px-[60px] lg:px-20 py-6">
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-2xl font-semibold text-gray-900">
-            {getProfileTitle()}
-          </h1>
-        </div>
-      </div>
-
-      <div className="w-full px-8 md:px-[60px] lg:px-20 pb-12">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid gap-8 lg:grid-cols-12">
-            <div className="lg:col-span-12">
-              <ProfileHeader onEditProfileClick={openEditProfileModal} isViewOnly={isViewOnly} />
-            </div>
-            <div className="lg:col-span-8 order-1">
-              <ProfileForm
-                showNotification={showNotification}
-                isViewOnly={isViewOnly}
-              />
-            </div>
-
-            <div className="lg:col-span-4 order-2">
-              <ProfileSidebar
-                showNotification={showNotification}
-                isViewOnly={isViewOnly}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <NotificationModal
-        isOpen={notification.isOpen}
-        onClose={hideNotification}
-        type={notification.type}
-        title={notification.title}
-        message={notification.message}
-        header="Profile"
-      />
-      {/* Only render EditProfileModal if not in view-only mode */}
-      {!isViewOnly && (
-        <EditProfileModal
-          isOpen={isEditProfileModalOpen}
-          onClose={closeEditProfileModal}
-          showNotification={showNotification}
-        />
-      )}
-    </main>
-  );
-};
-
-export default ProfileByIdPage;

apps/dimentorin/src/app/(public)/profile/_components/buttons/edit-section-button.tsx

@@ -1,25 +0,0 @@
-import { FC } from 'react';
-import { EditOutlined } from '@ant-design/icons';
-
-interface EditSectionButtonProps {
-  onClick: () => void;
-  disabled?: boolean;
-}
-
-export const EditSectionButton: FC<EditSectionButtonProps> = ({ onClick, disabled = false }) => {
-  return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className={`flex items-center gap-1 px-3 py-1 text-sm transition-colors duration-200 rounded-md ${
-        disabled
-          ? 'text-gray-400 cursor-not-allowed opacity-50'
-          : 'text-[#23A1EB] hover:text-[#1e90d6] hover:bg-[#23A1EB]/10'
-      }`}
-      aria-label="Edit section"
-    >
-      <span>Edit</span>
-      <EditOutlined className="w-3 h-3" />
-    </button>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/buttons/index.ts

@@ -1,2 +0,0 @@
-export { EditSectionButton } from './edit-section-button';
-export { ModalButton } from './modal-button';

apps/dimentorin/src/app/(public)/profile/_components/buttons/modal-button.tsx

@@ -1,76 +0,0 @@
-import { FC, ReactNode } from 'react';
-
-type ButtonVariant = 'primary' | 'secondary' | 'danger';
-type ButtonSize = 'sm' | 'md' | 'lg';
-
-interface ModalButtonProps {
-  children: ReactNode;
-  onClick?: () => void;
-  type?: 'button' | 'submit' | 'reset';
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  disabled?: boolean;
-  loading?: boolean;
-  className?: string;
-}
-
-const getVariantClasses = (variant: ButtonVariant): string => {
-  switch (variant) {
-    case 'primary':
-      return 'bg-[#23A1EB] hover:bg-[#1e90d6] text-white shadow-lg hover:shadow-xl';
-    case 'secondary':
-      return 'bg-white hover:bg-gray-200 text-[#23A1EB] shadow-md hover:shadow-lg';
-    case 'danger':
-      return 'bg-red-600 hover:bg-red-500 text-white shadow-lg hover:shadow-xl';
-    default:
-      return 'bg-[#23A1EB] hover:bg-[#1e90d6] text-white shadow-lg hover:shadow-xl';
-  }
-};
-
-const getSizeClasses = (size: ButtonSize): string => {
-  switch (size) {
-    case 'sm':
-      return 'px-3 py-1.5 text-sm';
-    case 'md':
-      return 'px-4 py-2 text-sm';
-    case 'lg':
-      return 'px-6 py-3 text-base';
-    default:
-      return 'px-4 py-2 text-sm';
-  }
-};
-
-export const ModalButton: FC<ModalButtonProps> = ({
-  children,
-  onClick,
-  type = 'button',
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  loading = false,
-  className = '',
-}) => {
-  const baseClasses = 'font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#23A1EB] disabled:opacity-50 disabled:cursor-not-allowed';
-  const variantClasses = getVariantClasses(variant);
-  const sizeClasses = getSizeClasses(size);
-
-  const combinedClasses = `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`;
-
-  return (
-    <button
-      type={type}
-      onClick={onClick}
-      disabled={disabled || loading}
-      className={combinedClasses}
-    >
-      {loading ? (
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
-          <span>Loading...</span>
-        </div>
-      ) : (
-        children
-      )}
-    </button>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/contexts/index.ts

@@ -1 +0,0 @@
-export * from './profile-context';

apps/dimentorin/src/app/(public)/profile/_components/contexts/profile-context.tsx

@@ -1,249 +0,0 @@
-'use client';
-
-import React, { createContext, useContext, useMemo, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
-import {
-  useAuthStore,
-  useUserMe,
-  useUserById,
-  useUpdateUserMe,
-  useUpdateUserById,
-  UserDetailResponseDto,
-  UserUpdateRequestDto,
-
-  useMentorMe,
-  useMentorById,
-  useUpdateMentorMe,
-  useUpdateMentorById,
-  MentorDetailResponseDto,
-  MentorUpdateRequestDto
-} from '@imphnen-frontend-service/service';
-
-
-type ProfileData = UserDetailResponseDto | MentorDetailResponseDto;
-type ProfileUpdateData = UserUpdateRequestDto | MentorUpdateRequestDto;
-
-
-const canAccessMentorFeatures = (user: { role?: { name?: string; permissions?: Array<{ name?: string }> } } | null) => {
-  if (!user?.role) return false;
-
-  const roleName = user.role.name?.toLowerCase() || '';
-  const isMentorRole = roleName.includes('mentor') || roleName.includes('admin');
-
-  if (isMentorRole) return true;
-
-
-  const permissions = user.role.permissions || [];
-  const hasMentorPermission = permissions.some((permission: { name?: string }) =>
-    permission.name?.toLowerCase().includes('mentor')
-  );
-
-  return hasMentorPermission;
-};
-
-interface ProfileContextType {
-  profileData: ProfileData | undefined;
-  isLoading: boolean;
-  error: unknown;
-  isOwnProfile: boolean;
-  profileId: string | null;
-  profileType: 'user' | 'mentor';
-  updateProfile: (data: ProfileUpdateData) => Promise<void>;
-  isUpdating: boolean;
-  canAccessMentor: boolean;
-}const ProfileContext = createContext<ProfileContextType | undefined>(undefined);
-
-interface ProfileProviderProps {
-  children: React.ReactNode;
-  profileId?: string;
-  profileType?: 'user' | 'mentor';
-}
-
-export const ProfileProvider: React.FC<ProfileProviderProps> = ({
-  children,
-  profileId,
-  profileType: forcedProfileType
-}) => {
-  const params = useParams();
-  const { session } = useAuthStore();
-  const queryClient = useQueryClient();
-
-
-  const canAccessMentor = useMemo(() => {
-    return canAccessMentorFeatures(session?.user || null);
-  }, [session?.user]);
-
-
-  const isMentorRole = useMemo(() => {
-    const roleName = session?.user?.role?.name?.toLowerCase() || '';
-    return roleName === 'mentor';
-  }, [session?.user?.role?.name]);
-
-
-  const profileType: 'user' | 'mentor' = useMemo(() => {
-    if (forcedProfileType) {
-
-      if (forcedProfileType === 'mentor' && !isMentorRole) {
-        return 'user';
-      }
-      return forcedProfileType;
-    }
-
-
-    if ((params?.mentor || (typeof window !== 'undefined' && window.location.pathname.includes('/mentor'))) && isMentorRole) {
-      return 'mentor';
-    }
-
-    return 'user';
-  }, [forcedProfileType, params, isMentorRole]);
-
-
-  const id = profileId || (params?.id as string) || undefined;
-  const isOwnProfile = !id;
-
-
-
-
-  const userMeQuery = useUserMe({
-    queryKey: ['user-me'],
-    enabled: isOwnProfile && profileType === 'user',
-  });
-  const userByIdQuery = useUserById(id || '', {
-    queryKey: ['user-by-id', id],
-    enabled: !isOwnProfile && !!id && profileType === 'user',
-  });
-  const updateUserMeMutation = useUpdateUserMe();
-  const updateUserByIdMutation = useUpdateUserById();
-
-  const mentorMeQuery = useMentorMe({
-    queryKey: ['mentor-me'],
-    enabled: isOwnProfile && profileType === 'mentor' && canAccessMentor,
-  });
-  const mentorByIdQuery = useMentorById(id || '', {
-    queryKey: ['mentor-by-id', id],
-    enabled: !isOwnProfile && !!id && profileType === 'mentor' && canAccessMentor,
-  });
-  const updateMentorMeMutation = useUpdateMentorMe();
-  const updateMentorByIdMutation = useUpdateMentorById();
-
-
-  const selectedUserQuery = isOwnProfile ? userMeQuery : userByIdQuery;
-  const selectedMentorQuery = isOwnProfile ? mentorMeQuery : mentorByIdQuery;
-
-  const {
-    data: profileData,
-    isLoading,
-    error
-  } = useMemo(() => {
-
-    if (canAccessMentor && profileType === 'mentor') {
-      return selectedMentorQuery;
-    }
-
-    return selectedUserQuery;
-  }, [profileType, canAccessMentor, selectedUserQuery, selectedMentorQuery]);
-
-
-  const selectedUserMutation = isOwnProfile ? updateUserMeMutation : updateUserByIdMutation;
-  const selectedMentorMutation = isOwnProfile ? updateMentorMeMutation : updateMentorByIdMutation;
-
-  const updateMutation = useMemo(() => {
-
-    if (canAccessMentor && profileType === 'mentor') {
-      return selectedMentorMutation;
-    }
-
-    return selectedUserMutation;
-  }, [profileType, canAccessMentor, selectedUserMutation, selectedMentorMutation]);
-
-
-  const updateProfile = useCallback(async (data: ProfileUpdateData) => {
-    try {
-      if (canAccessMentor && profileType === 'mentor') {
-
-        if (isOwnProfile) {
-          await updateMentorMeMutation.mutateAsync(data as MentorUpdateRequestDto);
-
-          await queryClient.invalidateQueries({ queryKey: ['mentor-me'] });
-        } else if (id) {
-          await updateMentorByIdMutation.mutateAsync({ id, data: data as MentorUpdateRequestDto });
-
-          await queryClient.invalidateQueries({ queryKey: ['mentor-by-id', id] });
-        }
-      } else if (isOwnProfile) {
-
-        await updateUserMeMutation.mutateAsync(data as UserUpdateRequestDto);
-
-        await queryClient.invalidateQueries({ queryKey: ['user-me'] });
-      } else if (id) {
-        await updateUserByIdMutation.mutateAsync({ id, data: data as UserUpdateRequestDto });
-
-        await queryClient.invalidateQueries({ queryKey: ['user-by-id', id] });
-      }
-    } catch (error: unknown) {
-      console.error('Failed to update profile:', error);
-
-      let apiMessage = '';
-      if (typeof error === 'object' && error !== null) {
-  const errObj = error as { response?: { data?: unknown } };
-  const data = errObj.response?.data;
-        if (data) {
-          try {
-            const parsed = typeof data === 'string' ? JSON.parse(data) : data;
-            if (parsed && typeof parsed.message === 'string') {
-              apiMessage = parsed.message;
-            }
-          } catch {
-            apiMessage = typeof data === 'string' ? data : '';
-          }
-        }
-      }
-      if (apiMessage) {
-        throw new Error(apiMessage);
-      }
-      throw error;
-    }
-  }, [
-    profileType,
-    isOwnProfile,
-    canAccessMentor,
-    id,
-    queryClient,
-    updateUserMeMutation,
-    updateUserByIdMutation,
-    updateMentorMeMutation,
-    updateMentorByIdMutation
-  ]);  const isUpdating = updateMutation.isPending;
-
-  const value: ProfileContextType = useMemo(() => ({
-    profileData,
-    isLoading,
-    error,
-    isOwnProfile,
-    profileId: isOwnProfile ? null : (id || null),
-    profileType,
-    updateProfile,
-    isUpdating,
-    canAccessMentor
-  }), [profileData, isLoading, error, isOwnProfile, id, profileType, updateProfile, isUpdating, canAccessMentor]);
-
-  return (
-    <ProfileContext.Provider value={value}>
-      {children}
-    </ProfileContext.Provider>
-  );
-};
-
-
-export const useProfile = (): ProfileContextType => {
-  const context = useContext(ProfileContext);
-  if (!context) {
-    throw new Error('useProfile must be used within a ProfileProvider');
-  }
-  return context;
-};
-
-
-export type { ProfileContextType };
-export type { ProfileData, ProfileUpdateData };

apps/dimentorin/src/app/(public)/profile/_components/guards/mentor-guard.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Guard } from '@imphnen-frontend-service/utils';
-
-interface MentorGuardProps {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-}
-
-export const MentorGuard: React.FC<MentorGuardProps> = ({
-  children,
-  fallback = (
-    <div className="p-4 text-center text-red-500">
-      <p>Akses ditolak: Anda tidak memiliki izin untuk mengakses fitur mentor.</p>
-    </div>
-  )
-}) => {
-  return (
-    <Guard
-      permissions={['mentor', 'admin']}
-      fallback={fallback}
-    >
-      {children}
-    </Guard>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/index.ts

@@ -1,17 +0,0 @@
-
-export * from './profile';
-
-
-export * from './sections';
-
-
-export * from './buttons';
-
-
-export * from './shared';
-
-
-export * from './modals';
-
-
-export * from './contexts';

apps/dimentorin/src/app/(public)/profile/_components/modals/cv-modal.tsx

@@ -1,187 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { ModalButton } from '../buttons/modal-button';
-import { useUploadCV } from '@imphnen-frontend-service/service';
-import { FileUploader } from '../shared/file-uploader';
-
-interface CVData {
-  fileName: string;
-  fileUrl?: string;
-}
-
-interface CVModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: CVData;
-  onSave: (value: CVData) => Promise<void>;
-  isLoading?: boolean;
-}
-
-export const CVModal: FC<CVModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-}) => {
-  const [cvData, setCvData] = useState(initialValue);
-  const [isUploading, setIsUploading] = useState(false);
-  const uploadCVMutation = useUploadCV();
-
-  
-  useEffect(() => {
-    setCvData(initialValue);
-  }, [initialValue]);
-
-  const handleSave = async () => {
-    try {
-      await onSave(cvData);
-
-      onClose();
-    } catch (error) {
-      console.error('Save failed:', error);
-
-    }
-  };
-
-  const handleCancel = () => {
-    setCvData(initialValue);
-    onClose();
-  };
-
-  const handleFileSelect = async (file: File) => {
-    try {
-      setIsUploading(true);
-
-
-      if (!file.type.includes('pdf')) {
-        throw new Error('Please select a PDF file');
-      }
-
-
-      const uploadResult = await uploadCVMutation.mutateAsync(file);
-
-      console.log('CV upload response:', uploadResult);
-
-
-      interface UploadData {
-        original_filename?: string;
-        filename?: string;
-        url?: string;
-      }
-
-      const uploadData = ('data' in uploadResult ? (uploadResult as { data: UploadData }).data : uploadResult as UploadData);
-
-      setCvData({
-        fileName: uploadData.original_filename || uploadData.filename || file.name,
-        fileUrl: uploadData.url || '',
-      });
-
-      console.log('CV uploaded successfully, URL:', uploadData.url);
-    } catch (error) {
-      console.error('CV upload error:', error);
-
-      const fileInput = document.getElementById('cv-upload') as HTMLInputElement;
-      if (fileInput) fileInput.value = '';
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        aria-label="Close modal"
-        type="button"
-      />
-
-
-      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-5xl mx-auto">
-
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit CV/Resume</h2>
-          </div>
-        </div>
-
-
-        <div className="px-6 py-6 space-y-6">
-          {}
-          <div className="space-y-4">
-            <div>
-              <h3 className="text-sm font-medium text-gray-700 mb-2">
-                Upload CV/Resume
-              </h3>
-              <FileUploader
-                accept=".pdf"
-                maxSize={10 * 1024 * 1024}
-                onFileSelect={handleFileSelect}
-                isLoading={isUploading}
-                dragAndDrop={true}
-                description="Klik atau tarik file PDF yang ingin di upload"
-                className="w-full"
-              />
-              <p className="text-xs text-gray-500 mt-2">
-                Format yang didukung: PDF • Maksimal ukuran: 10MB
-              </p>
-            </div>
-
-            {}
-            {cvData.fileName && (
-              <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-                <h4 className="text-sm font-medium text-blue-900 mb-3">File Terpilih</h4>
-                <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
-                    <span className="text-white text-xs font-bold">PDF</span>
-                  </div>
-                  <div className="flex-1">
-                    <p className="font-medium text-blue-900 text-sm">{cvData.fileName}</p>
-                    <p className="text-xs text-blue-600">Siap untuk disimpan</p>
-                  </div>
-                  {cvData.fileUrl && (
-                    <a
-                      href={cvData.fileUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-600 hover:text-blue-800 text-sm font-medium underline"
-                    >
-                      Preview
-                    </a>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-
-
-        {}
-        <div className="flex gap-3 p-6 pt-4 border-t border-gray-100">
-          <ModalButton
-            variant="secondary"
-            onClick={handleCancel}
-            className="flex-1"
-            disabled={isLoading || isUploading}
-          >
-            Batal
-          </ModalButton>
-          <ModalButton
-            variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-            disabled={isLoading || isUploading || !cvData.fileName}
-            loading={isLoading}
-          >
-            {isLoading ? 'Menyimpan...' : 'Simpan CV'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/modals/description-modal.tsx

@@ -1,99 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { ModalButton } from '../buttons/modal-button';
-
-interface DescriptionModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: string;
-  onSave: (value: string) => Promise<void>;
-  isLoading?: boolean;
-}
-
-export const DescriptionModal: FC<DescriptionModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-}) => {
-  const [description, setDescription] = useState(initialValue);
-
-  
-  useEffect(() => {
-    setDescription(initialValue);
-  }, [initialValue]);
-
-  const handleSave = async () => {
-    try {
-      await onSave(description);
-
-      onClose();
-    } catch (error) {
-      console.error('Save failed:', error);
-
-    }
-  };
-
-  const handleCancel = () => {
-    setDescription(initialValue);
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        aria-label="Close modal"
-        type="button"
-      />
-
-      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-5xl mx-auto">
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Description</h2>
-          </div>
-        </div>
-
-        <div className="px-6 py-4">
-          <div>
-            <label htmlFor="description-textarea" className="block text-sm font-medium text-gray-700 mb-2">
-              Description
-            </label>
-            <textarea
-              id="description-textarea"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              rows={8}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#23A1EB] focus:border-[#23A1EB] outline-none transition-colors resize-none"
-              placeholder="Write your description here..."
-            />
-          </div>
-        </div>
-
-        <div className="flex gap-3 p-6 pt-4">
-          <ModalButton
-            variant="secondary"
-            onClick={handleCancel}
-            className="flex-1"
-            disabled={isLoading}
-          >
-            Batal
-          </ModalButton>
-          <ModalButton
-            variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            {isLoading ? 'Menyimpan...' : 'Simpan'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-

apps/dimentorin/src/app/(public)/profile/_components/modals/edit-profile-modal.tsx

@@ -1,253 +0,0 @@
-import React, { FC, useState, useEffect } from 'react';
-import { Modal, InputField } from '@imphnen-frontend-service/ui/molecules';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useProfile } from '../contexts/profile-context';
-import { CameraOutlined } from '@ant-design/icons';
-import { useUploadAvatar } from '@imphnen-frontend-service/service';
-
-interface EditProfileModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  showNotification: (type: 'success' | 'error', title: string, message?: string) => void;
-}
-
-export const EditProfileModal: FC<EditProfileModalProps> = ({ isOpen, onClose, showNotification }) => {
-  const { profileData, profileType, updateProfile } = useProfile();
-  const uploadAvatarMutation = useUploadAvatar();
-  const [formData, setFormData] = useState({
-    fullname: '',
-    avatar: ''
-  });
-  const [previewUrl, setPreviewUrl] = useState<string>('/image/testimonial.webp');
-  const [isUploading, setIsUploading] = useState(false);
-
-  useEffect(() => {
-    if (profileData) {
-      const fullname = profileData.fullname ||
-        (profileType === 'mentor' && 'legal_name' in profileData ? profileData.legal_name : '') || '';
-
-
-      const avatar = (profileType === 'user' && 'avatar' in profileData)
-        ? profileData.avatar || '/image/testimonial.webp'
-        : '/image/testimonial.webp';
-
-      console.log('Modal - Profile data avatar URL:', avatar);
-      console.log('Modal - Profile data:', profileData);
-
-      setFormData({
-        fullname,
-        avatar: (profileType === 'user' && 'avatar' in profileData) ? profileData.avatar || '' : ''
-      });
-
-
-      setPreviewUrl(avatar);
-    } else {
-
-      setPreviewUrl('/image/testimonial.webp');
-    }
-  }, [profileData, profileType]);
-
-  const handleImageError = () => {
-    console.log('Image failed to load:', previewUrl);
-    setPreviewUrl('/image/testimonial.webp');
-  };
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData(prev => ({ ...prev, fullname: e.target.value }));
-  };
-
-  const handleImageUpload = async (file: File) => {
-    try {
-      setIsUploading(true);
-
-
-      const reader = new FileReader();
-      reader.onload = () => {
-        const result = reader.result as string;
-        setPreviewUrl(result);
-      };
-      reader.readAsDataURL(file);
-
-
-      const uploadResult = await uploadAvatarMutation.mutateAsync(file);
-
-      console.log('Avatar upload response:', uploadResult);
-
-
-      interface UploadData {
-        url?: string;
-      }
-
-      const uploadData = ('data' in uploadResult ? (uploadResult as { data: UploadData }).data : uploadResult as UploadData);
-
-
-      setFormData(prev => ({ ...prev, avatar: uploadData.url || '' }));
-
-
-      setPreviewUrl(uploadData.url || '/image/testimonial.webp');
-
-    } catch (error) {
-      console.error('Avatar upload error:', error);
-      showNotification('error', 'Upload Failed', 'Failed to upload avatar image');
-
-      const originalAvatar = (profileType === 'user' && profileData && 'avatar' in profileData) ? profileData.avatar : '';
-      setPreviewUrl(originalAvatar || '/image/testimonial.webp');
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleSave = async () => {
-    try {
-      const updates: Record<string, string> = {};
-
-
-      if (formData.fullname.trim() !== '') {
-        if (profileType === 'user') {
-          updates.fullname = formData.fullname;
-        } else if (profileType === 'mentor') {
-          updates.legal_name = formData.fullname;
-        }
-      }
-
-
-      if (formData.avatar && formData.avatar !== (profileData && 'avatar' in profileData ? profileData.avatar : '')) {
-        updates.avatar = formData.avatar;
-      }
-
-      if (Object.keys(updates).length > 0) {
-        await updateProfile(updates);
-        showNotification('success', 'Profile Updated', 'Your profile has been successfully updated.');
-      }
-
-      onClose();
-    } catch (err: unknown) {
-      console.error('Profile update error:', err);
-      let apiMessage = '';
-      if (typeof err === 'object' && err !== null) {
-        const errObj = err as { response?: { data?: { message?: string } } };
-        let backendMsg = '';
-        if (errObj.response?.data?.message) {
-          backendMsg = errObj.response.data.message;
-        }
-        let msg = '';
-        if ('message' in err && typeof (err as { message?: string }).message === 'string') {
-          msg = (err as { message?: string }).message || '';
-
-          if (msg.trim().startsWith('{') && msg.trim().endsWith('}')) {
-            try {
-              const parsed = JSON.parse(msg);
-              if (parsed && typeof parsed.message === 'string') {
-              msg = parsed.message;
-              }
-            } catch {
-                // Ignore JSON parse errors
-            }
-          }
-        }
-        if (backendMsg && msg && backendMsg !== msg) {
-          apiMessage = backendMsg + '\n' + msg;
-        } else if (backendMsg) {
-          apiMessage = backendMsg;
-        } else if (msg) {
-          apiMessage = msg;
-        }
-      }
-      showNotification('error', 'Failed to save changes', apiMessage || 'Please try again.');
-    }
-  };  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <Modal.Header>
-        <Modal.Title>Edit Profile</Modal.Title>
-      </Modal.Header>
-      <Modal.Content>
-        {}
-        <div className="flex justify-center pt-6 pb-4">
-          <div className="relative">
-            {}
-            <input
-              id="avatar-upload"
-              type="file"
-              accept="image/*"
-              onChange={(e) => {
-                const file = e.target.files?.[0];
-                if (file) handleImageUpload(file);
-              }}
-              className="hidden"
-              disabled={isUploading}
-            />
-
-            <label htmlFor="avatar-upload" className="cursor-pointer block relative group">
-              <img
-                src={previewUrl}
-                alt="Profile"
-                className="w-24 h-24 rounded-full object-cover border-4 border-blue-100 shadow-lg transition-all duration-300 group-hover:border-blue-200"
-                onError={handleImageError}
-              />
-
-              {/* Hover overlay */}
-              <div className="absolute inset-0 rounded-full bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center">
-                <span className="text-white text-xs opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                  Change Photo
-                </span>
-              </div>
-            </label>
-
-            {}
-            <label htmlFor="avatar-upload" className="cursor-pointer">
-              <div className="absolute bottom-0 right-0 w-8 h-8 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center transition-all duration-300 shadow-lg border-2 border-white">
-                {isUploading ? (
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                ) : (
-                  <CameraOutlined className="text-xs" />
-                )}
-              </div>
-            </label>
-          </div>
-        </div>        <div className="px-6 pb-6 space-y-6">
-          {}
-          <div className="space-y-2">
-            <InputField
-              label="Full Name"
-              name="fullname"
-              value={formData.fullname}
-              onChange={handleNameChange}
-              placeholder="Enter your full name"
-              className="w-full"
-            />
-            <p className="text-xs text-gray-500 pl-1">
-              This name will be displayed on your profile
-            </p>
-          </div>
-        </div>
-      </Modal.Content>
-      <Modal.Footer>
-        <div className="flex gap-3 w-full">
-          <Button
-            variant="secondary"
-            onClick={onClose}
-            className="flex-1"
-            disabled={isUploading}
-          >
-            Cancel
-          </Button>
-          <Button
-            variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-            disabled={isUploading}
-          >
-            {isUploading ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                Saving...
-              </>
-            ) : (
-              'Save Changes'
-            )}
-          </Button>
-        </div>
-      </Modal.Footer>
-    </Modal>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/modals/education-modal.tsx

@@ -1,184 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
-import { ModalButton } from '../buttons/modal-button';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
-
-interface Education {
-  id: string;
-  institution: string;
-  degree: string;
-  field: string;
-  period: string;
-}
-
-interface EducationModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: Education[];
-  onSave: (value: Education[]) => Promise<void>;
-  isLoading?: boolean;
-  showNotification?: (type: 'success' | 'error', title: string, message?: string) => void;
-}
-
-export const EducationModal: FC<EducationModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-  showNotification,
-}) => {
-  const [educations, setEducations] = useState<Education[]>(initialValue);
-
-  
-  useEffect(() => {
-    setEducations(initialValue);
-  }, [initialValue]);
-
-  const handleSave = async () => {
-
-    const hasEmpty = educations.some(edu =>
-      !edu.institution.trim() || !edu.degree.trim() || !edu.field.trim() || !edu.period.trim()
-    );
-    if (hasEmpty) {
-      if (showNotification) {
-        showNotification('error', 'Data Tidak Lengkap', 'Semua field harus diisi pada setiap pendidikan.');
-      } else {
-        alert('Semua field harus diisi pada setiap pendidikan.');
-      }
-      return;
-    }
-    try {
-      await onSave(educations);
-      onClose();
-    } catch (error) {
-      console.error('Save failed:', error);
-    }
-  };
-
-  const handleCancel = () => {
-    setEducations(initialValue);
-    onClose();
-  };
-
-  const addEducation = () => {
-    const newEducation: Education = {
-      id: Date.now().toString(),
-      institution: '',
-      degree: '',
-      field: '',
-      period: '',
-    };
-    setEducations([...educations, newEducation]);
-  };
-
-  const removeEducation = (id: string) => {
-    setEducations(educations.filter(edu => edu.id !== id));
-  };
-
-  const updateEducation = (id: string, field: keyof Education, value: string) => {
-    setEducations(educations.map(edu =>
-      edu.id === id ? { ...edu, [field]: value } : edu
-    ));
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        aria-label="Close modal"
-      ></button>
-
-      <div className="relative bg-white rounded-xl shadow-xl max-w-5xl w-full max-h-[95vh] overflow-hidden">
-
-        <div className="p-6 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Education</h2>
-          </div>
-        </div>
-
-
-        <div className="p-6 max-h-[60vh] overflow-y-auto">
-          <div className="space-y-6">
-            {educations.map((education, index) => (
-              <div key={education.id} className="border border-gray-200 rounded-lg p-4">
-                <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-lg font-medium text-gray-900">Education {index + 1}</h3>
-                  <ModalButton
-                    variant="danger"
-                    size="sm"
-                    onClick={() => removeEducation(education.id)}
-                    className="text-red-500 hover:text-red-700"
-                  >
-                    <DeleteOutlined />
-                  </ModalButton>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <InputField
-                    label="Institution"
-                    value={education.institution}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateEducation(education.id, 'institution', e.target.value)}
-                    placeholder="Enter institution name"
-                  />
-                  <InputField
-                    label="Degree"
-                    value={education.degree}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateEducation(education.id, 'degree', e.target.value)}
-                    placeholder="Enter degree"
-                  />
-                  <InputField
-                    label="Field"
-                    value={education.field}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateEducation(education.id, 'field', e.target.value)}
-                    placeholder="Enter field of study"
-                  />
-                  <InputField
-                    label="Period"
-                    value={education.period}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateEducation(education.id, 'period', e.target.value)}
-                    placeholder="e.g., Sep 2022 - Current"
-                  />
-                </div>
-              </div>
-            ))}
-
-            <ModalButton
-              variant="secondary"
-              onClick={addEducation}
-              className="w-full border-2 border-dashed border-gray-300 rounded-lg p-4 text-gray-500 hover:border-[#23A1EB] hover:text-[#23A1EB] transition-colors flex items-center justify-center gap-2"
-            >
-              <PlusOutlined />
-              Add Education
-            </ModalButton>
-          </div>
-        </div>
-
-
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
-          <ModalButton
-            variant="secondary"
-            className="bg-white shadow-md"
-            onClick={handleCancel}
-            disabled={isLoading}
-          >
-            Batal
-          </ModalButton>
-          <ModalButton
-            variant="primary"
-            onClick={handleSave}
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            {isLoading ? 'Menyimpan...' : 'Simpan'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/modals/experience-modal.tsx

@@ -1,182 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
-import { ModalButton } from '../buttons/modal-button';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
-
-
-interface Experience {
-  id: string;
-  company: string;
-  position: string;
-  duration: string;
-  period: string;
-}
-
-interface ExperienceModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: Experience[];
-  onSave: (value: Experience[]) => Promise<void>;
-  isLoading?: boolean;
-  showNotification?: (type: 'success' | 'error', title: string, message?: string) => void;
-}
-
-export const ExperienceModal: FC<ExperienceModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-  showNotification,
-}) => {
-  const [experiences, setExperiences] = useState<Experience[]>(initialValue);
-
-
-  useEffect(() => {
-    setExperiences(initialValue);
-  }, [initialValue]);
-
-  const handleSave = async () => {
-
-    const hasEmpty = experiences.some(exp =>
-      !exp.company.trim() || !exp.position.trim() || !exp.duration.trim() || !exp.period.trim()
-    );
-    if (hasEmpty) {
-      if (showNotification) {
-        showNotification('error', 'Data Tidak Lengkap', 'Semua field harus diisi pada setiap pengalaman kerja.');
-      } else {
-        alert('Semua field harus diisi pada setiap pengalaman kerja.');
-      }
-      return;
-    }
-    try {
-      await onSave(experiences);
-      onClose();
-    } catch (error) {
-      console.error('Save failed:', error);
-    }
-  };
-
-  const handleCancel = () => {
-    setExperiences(initialValue);
-    onClose();
-  };
-
-  const addExperience = () => {
-    const newExperience: Experience = {
-      id: Date.now().toString(),
-      company: '',
-      position: '',
-      duration: '',
-      period: '',
-    };
-    setExperiences([...experiences, newExperience]);
-  };
-
-  const removeExperience = (id: string) => {
-    setExperiences(experiences.filter(exp => exp.id !== id));
-  };
-
-  const updateExperience = (id: string, field: keyof Experience, value: string) => {
-    setExperiences(experiences.map(exp =>
-      exp.id === id ? { ...exp, [field]: value } : exp
-    ));
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        aria-label="Close modal"
-      />
-
-      <div className="relative bg-white rounded-xl shadow-xl max-w-5xl w-full max-h-[95vh] overflow-hidden">
-        <div className="p-6 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Experience</h2>
-          </div>
-        </div>
-
-        <div className="p-6 max-h-[60vh] overflow-y-auto">
-          <div className="space-y-6">
-            {experiences.map((experience, index) => (
-              <div key={experience.id} className="border border-gray-200 rounded-lg p-4">
-                <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-lg font-medium text-gray-900">Experience {index + 1}</h3>
-                  <ModalButton
-                    variant="danger"
-                    size="sm"
-                    onClick={() => removeExperience(experience.id)}
-                    className="text-red-500 hover:text-red-700"
-                  >
-                    <DeleteOutlined />
-                  </ModalButton>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <InputField
-                    label="Company"
-                    value={experience.company}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateExperience(experience.id, 'company', e.target.value)}
-                    placeholder="Enter company name"
-                  />
-                  <InputField
-                    label="Position"
-                    value={experience.position}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateExperience(experience.id, 'position', e.target.value)}
-                    placeholder="Enter position"
-                  />
-                  <InputField
-                    label="Duration"
-                    value={experience.duration}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateExperience(experience.id, 'duration', e.target.value)}
-                    placeholder="e.g., 7 Months"
-                  />
-                  <InputField
-                    label="Period"
-                    value={experience.period}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateExperience(experience.id, 'period', e.target.value)}
-                    placeholder="e.g., Jan 2024 - Present"
-                  />
-                </div>
-              </div>
-            ))}
-
-            <ModalButton
-              variant="secondary"
-              onClick={addExperience}
-              className="w-full border-2 border-dashed border-gray-300 rounded-lg p-4 text-gray-500 hover:border-[#23A1EB] hover:text-[#23A1EB] transition-colors flex items-center justify-center gap-2"
-            >
-              <PlusOutlined />
-              Add Experience
-            </ModalButton>
-          </div>
-        </div>
-
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
-          <ModalButton
-            variant="secondary"
-            className="bg-white shadow-md"
-            onClick={handleCancel}
-            disabled={isLoading}
-          >
-            Batal
-          </ModalButton>
-          <ModalButton
-            variant="primary"
-            onClick={handleSave}
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            {isLoading ? 'Menyimpan...' : 'Simpan'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/modals/index.ts

@@ -1,10 +0,0 @@
-export { NotificationModal } from './notification-modal';
-export { CVModal } from './cv-modal';
-export { DescriptionModal } from './description-modal';
-export { EducationModal } from './education-modal';
-export { ExperienceModal } from './experience-modal';
-export { SocialMediaModal } from './social-media-modal';
-export { SkillsModal } from './skills-modal';
-export { EditProfileModal } from './edit-profile-modal';
-export { LanguagesModal } from './languages-modal';
-export { PersonalInfoModal } from './personal-info-modal';

apps/dimentorin/src/app/(public)/profile/_components/modals/languages-modal.tsx

@@ -1,153 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { Input } from '@imphnen-frontend-service/ui/atoms';
-import { ModalButton } from '../buttons/modal-button';
-
-interface Language {
-  id?: string;
-  name: string;
-  level: string;
-}
-
-interface LanguagesModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: Language[];
-  onSave: (languages: Language[]) => void;
-  isLoading?: boolean;
-}
-
-export const LanguagesModal: FC<LanguagesModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-}) => {
-  const [languages, setLanguages] = useState<Language[]>(initialValue);
-
-  useEffect(() => {
-    const languagesWithIds = initialValue.map(lang => ({
-      ...lang,
-      id: lang.id || `lang-${Date.now()}-${Math.random()}`
-    }));
-    setLanguages(languagesWithIds);
-  }, [initialValue]);
-
-  const handleAddLanguage = () => {
-    setLanguages([...languages, {
-      id: `lang-${Date.now()}-${Math.random()}`,
-      name: '',
-      level: ''
-    }]);
-  };
-
-  const handleLanguageChange = (index: number, field: keyof Language, value: string) => {
-    const newLanguages = [...languages];
-    newLanguages[index] = { ...newLanguages[index], [field]: value };
-    setLanguages(newLanguages);
-  };
-
-  const handleRemoveLanguage = (index: number) => {
-    const newLanguages = languages.filter((_, i) => i !== index);
-    setLanguages(newLanguages);
-  };
-
-  const handleSave = () => {
-    
-    const languagesToSave = languages.map(({ id, ...lang }) => lang);
-    onSave(languagesToSave);
-    onClose();
-  };
-
-  const handleCancel = () => {
-    const languagesWithIds = initialValue.map(lang => ({
-      ...lang,
-      id: lang.id || `lang-${Date.now()}-${Math.random()}`
-    }));
-    setLanguages(languagesWithIds);
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {}
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        type="button"
-        aria-label="Close modal"
-      />
-
-      {}
-      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-5xl mx-auto max-h-[95vh] overflow-hidden">
-        {}
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Languages</h2>
-          </div>
-        </div>
-
-        {}
-        <div className="p-6 max-h-[60vh] overflow-y-auto">
-          <div className="space-y-4">
-            {languages.map((language, index) => (
-              <div key={language.id} className="flex flex-col sm:flex-row sm:items-end gap-3 sm:gap-2">
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-700 mb-1">Language Name</p>
-                  <Input
-                    value={language.name}
-                    onChange={(e) => handleLanguageChange(index, 'name', e.target.value)}
-                    placeholder="e.g., English"
-                    className="w-full"
-                  />
-                </div>
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-gray-700 mb-1">Level</p>
-                  <Input
-                    value={language.level}
-                    onChange={(e) => handleLanguageChange(index, 'level', e.target.value)}
-                    placeholder="e.g., Fluent"
-                    className="w-full"
-                  />
-                </div>
-                <div className="sm:flex-shrink-0">
-                  <ModalButton variant="danger" onClick={() => handleRemoveLanguage(index)} className="w-full sm:w-auto">
-                    Remove
-                  </ModalButton>
-                </div>
-              </div>
-            ))}
-            <ModalButton variant="secondary" onClick={handleAddLanguage} className="w-full">
-              Add Language
-            </ModalButton>
-          </div>
-        </div>
-
-        {}
-        <div className="flex gap-3 p-6 pt-4">
-          <ModalButton
-            variant="secondary"
-            onClick={handleCancel}
-            className="flex-1 bg-white shadow-md"
-            disabled={isLoading}
-          >
-            Cancel
-          </ModalButton>
-          <ModalButton
-            variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            {isLoading ? 'Saving...' : 'Save'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/modals/notification-modal.tsx

@@ -1,89 +0,0 @@
-import { FC } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
-import { ModalButton } from '../buttons/modal-button';
-
-export type NotificationType = {
-  isOpen: boolean;
-  onClose: () => void;
-  type: 'success' | 'error';
-  title: string;
-  message?: string;
-  header: string;
-}
-
-interface NotificationModalProps extends NotificationType {
-  isOpen: boolean;
-  onClose: () => void;
-  type: 'success' | 'error';
-  title: string;
-  message?: string;
-  header: string;
-}
-
-export const NotificationModal: FC<NotificationModalProps> = ({
-  isOpen,
-  onClose,
-  type,
-  title,
-  message,
-  header,
-}) => {
-  if (!isOpen) return null;
-
-  const isSuccess = type === 'success';
-
-  return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={onClose}
-        aria-label="Close modal"
-      />
-
-      <div className="relative bg-white rounded-xl shadow-xl max-w-md w-full overflow-hidden">
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">{header}</h2>
-          </div>
-        </div>
-
-        <div className="p-8 text-center">
-
-          <div className="mb-6">
-            {isSuccess ? (
-              <div className="w-30 h-30 mx-auto mb-4">
-                <img
-                  src="/image/success.png"
-                  alt="Success"
-                  width={80}
-                  height={80}
-                  className="w-full h-full object-contain"
-                />
-              </div>
-            ) : (
-              <div className="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                <CloseOutlined className="text-white text-3xl" />
-              </div>
-            )}
-
-            <h2 className={`text-lg font-medium ${isSuccess ? 'text-green-600' : 'text-red-600'}`}>
-              {title}
-            </h2>
-            {!isSuccess && message && (
-              <div className="mt-2 text-sm text-red-500 whitespace-pre-line">{message}</div>
-            )}
-          </div>
-
-          <ModalButton
-            variant="primary"
-            onClick={onClose}
-            className="w-full bg-[#23A1EB] hover:bg-[#23A1EB]/90"
-          >
-            Selesai
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-

apps/dimentorin/src/app/(public)/profile/_components/modals/personal-info-modal.tsx

@@ -1,137 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { ModalButton } from '../buttons/modal-button';
-
-interface PersonalInfo {
-  email: string;
-  phone: string;
-  location: string;
-}
-
-interface PersonalInfoModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: PersonalInfo;
-  onSave: (value: PersonalInfo) => Promise<void>;
-  isLoading?: boolean;
-}
-
-export const PersonalInfoModal: FC<PersonalInfoModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-}) => {
-  const [personalInfo, setPersonalInfo] = useState(initialValue);
-
-  
-  useEffect(() => {
-    setPersonalInfo(initialValue);
-  }, [initialValue]);
-
-  const handleSave = async () => {
-    try {
-      await onSave(personalInfo);
-      
-      onClose();
-    } catch (error) {
-      console.error('Save failed:', error);
-      
-    }
-  };
-
-  const handleCancel = () => {
-    setPersonalInfo(initialValue);
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        aria-label="Close modal"
-        type="button"
-      />
-
-
-      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-5xl mx-auto">
-
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Personal Information</h2>
-          </div>
-        </div>
-
-
-        <div className="px-6 py-4 space-y-4">
-          <div>
-            <label htmlFor="personal-email" className="block text-sm font-medium text-gray-700 mb-2">
-              Email
-            </label>
-            <input
-              id="personal-email"
-              type="email"
-              value={personalInfo.email}
-              onChange={(e) => setPersonalInfo({ ...personalInfo, email: e.target.value })}
-              placeholder="Enter your email"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#23A1EB] focus:border-[#23A1EB] outline-none transition-colors"
-            />
-          </div>
-
-          <div>
-            <label htmlFor="personal-phone" className="block text-sm font-medium text-gray-700 mb-2">
-              Phone
-            </label>
-            <input
-              id="personal-phone"
-              type="tel"
-              value={personalInfo.phone}
-              onChange={(e) => setPersonalInfo({ ...personalInfo, phone: e.target.value })}
-              placeholder="Enter your phone number"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#23A1EB] focus:border-[#23A1EB] outline-none transition-colors"
-            />
-          </div>
-
-          <div>
-            <label htmlFor="personal-location" className="block text-sm font-medium text-gray-700 mb-2">
-              Location
-            </label>
-            <input
-              id="personal-location"
-              type="text"
-              value={personalInfo.location}
-              onChange={(e) => setPersonalInfo({ ...personalInfo, location: e.target.value })}
-              placeholder="Enter your location"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#23A1EB] focus:border-[#23A1EB] outline-none transition-colors"
-            />
-          </div>
-        </div>
-
-
-        <div className="flex gap-3 p-6 pt-4">
-          <ModalButton variant="secondary"
-            onClick={handleCancel}
-            className="flex-1 bg-white shadow-md"
-            disabled={isLoading}
-          >
-            Batal
-          </ModalButton>
-          <ModalButton variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            {isLoading ? 'Menyimpan...' : 'Simpan'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/modals/profile-basic-info-modal.tsx

@@ -1,105 +0,0 @@
-import { FC, useState } from 'react';
-import { ModalButton } from '../buttons/modal-button';
-
-interface ProfileBasicInfo {
-  name: string;
-  title: string;
-}
-
-interface ProfileBasicInfoModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: ProfileBasicInfo;
-  onSave: (value: ProfileBasicInfo) => void;
-}
-
-export const ProfileBasicInfoModal: FC<ProfileBasicInfoModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-}) => {
-  const [profileInfo, setProfileInfo] = useState(initialValue);
-
-  const handleSave = () => {
-    onSave(profileInfo);
-    onClose();
-  };
-
-  const handleCancel = () => {
-    setProfileInfo(initialValue);
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        aria-label="Close modal"
-        type="button"
-      />
-
-
-      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-5xl mx-auto">
-
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Profile</h2>
-          </div>
-        </div>
-
-
-        <div className="px-6 py-4 space-y-4">
-          <div>
-            <label htmlFor="profile-name" className="block text-sm font-medium text-gray-700 mb-2">
-              Full Name
-            </label>
-            <input
-              id="profile-name"
-              type="text"
-              value={profileInfo.name}
-              onChange={(e) => setProfileInfo({ ...profileInfo, name: e.target.value })}
-              placeholder="Enter your full name"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#23A1EB] focus:border-[#23A1EB] outline-none transition-colors"
-            />
-          </div>
-
-          <div>
-            <label htmlFor="profile-title" className="block text-sm font-medium text-gray-700 mb-2">
-              Professional Title
-            </label>
-            <input
-              id="profile-title"
-              type="text"
-              value={profileInfo.title}
-              onChange={(e) => setProfileInfo({ ...profileInfo, title: e.target.value })}
-              placeholder="Enter your professional title"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#23A1EB] focus:border-[#23A1EB] outline-none transition-colors"
-            />
-          </div>
-        </div>
-        <div className="flex gap-3 p-6 pt-4">
-          <ModalButton
-            variant="secondary"
-            onClick={handleCancel}
-            className="flex-1"
-          >
-            Batal
-          </ModalButton>
-          <ModalButton
-            variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-          >
-            Simpan
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-

apps/dimentorin/src/app/(public)/profile/_components/modals/skills-modal.tsx

@@ -1,168 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
-import { ModalButton } from '../buttons/modal-button';
-import { InputField } from '@imphnen-frontend-service/ui/molecules';
-
-interface Skill {
-  id: string;
-  name: string;
-}
-
-interface SkillsModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: Skill[];
-  onSave: (value: Skill[]) => Promise<void>;
-  isLoading?: boolean;
-}
-
-export const SkillsModal: FC<SkillsModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-}) => {
-  const [skills, setSkills] = useState<Skill[]>(initialValue);
-  const [newSkill, setNewSkill] = useState({ name: '' });
-
-  
-  useEffect(() => {
-    setSkills(initialValue);
-  }, [initialValue]);
-
-  const handleSave = async () => {
-    try {
-      await onSave(skills);
-
-      onClose();
-    } catch (error) {
-      console.error('Save failed:', error);
-
-    }
-  };
-
-  const handleCancel = () => {
-    setSkills(initialValue);
-    setNewSkill({ name: '' });
-    onClose();
-  };
-
-  const addSkill = () => {
-    if (newSkill.name.trim()) {
-      const skill: Skill = {
-        id: Date.now().toString(),
-        name: newSkill.name.trim(),
-      };
-      setSkills([...skills, skill]);
-      setNewSkill({ name: '' });
-    }
-  };
-
-  const removeSkill = (id: string) => {
-    setSkills(skills.filter(skill => skill.id !== id));
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        type="button"
-        aria-label="Close modal"
-      />
-
-
-      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-5xl mx-auto max-h-[95vh] overflow-hidden">
-
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Skills</h2>
-          </div>
-        </div>
-
-
-        <div className="p-6 max-h-[60vh] overflow-y-auto">
-
-          <div className="mb-6 p-4 border border-gray-200 rounded-lg bg-gray-50">
-            <h3 className="text-sm font-medium text-gray-700 mb-3">Add New Skill</h3>
-            <div className="flex flex-col sm:flex-row gap-3">
-              <div className="flex-1">
-                <InputField
-                  label="Skill Name"
-                  value={newSkill.name}
-                  onChange={(e) => setNewSkill({ ...newSkill, name: e.target.value })}
-                  placeholder="e.g., React, JavaScript, etc."
-                />
-              </div>
-              <div className="flex sm:items-end">
-                <ModalButton
-                  onClick={addSkill}
-                  variant="primary"
-                  size="sm"
-                  className="w-full sm:w-auto"
-                >
-                  <PlusOutlined />
-                  <span className="sm:hidden ml-2">Add Skill</span>
-                </ModalButton>
-              </div>
-            </div>
-          </div>
-
-
-          <div>
-            <h3 className="text-sm font-medium text-gray-700 mb-3">Current Skills</h3>
-            {skills.length === 0 ? (
-              <p className="text-gray-500 text-sm py-4">No skills added yet.</p>
-            ) : (
-              <div className="space-y-2">
-                {skills.map((skill) => (
-                  <div
-                    key={skill.id}
-                    className="flex items-center justify-between p-3 border border-gray-200 rounded-md bg-white"
-                  >
-                    <div>
-                      <span className="font-medium text-gray-900">{skill.name}</span>
-                    </div>
-                    <ModalButton
-                      onClick={() => removeSkill(skill.id)}
-                      variant="danger"
-                      size="sm"
-                      className="text-red-500 hover:text-red-700"
-                    >
-                      <DeleteOutlined />
-                    </ModalButton>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-
-        <div className="flex gap-3 p-6 pt-4">
-          <ModalButton variant="secondary"
-            onClick={handleCancel}
-            className="flex-1"
-            disabled={isLoading}
-          >
-            Batal
-          </ModalButton>
-          <ModalButton variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            {isLoading ? 'Menyimpan...' : 'Simpan'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/modals/social-media-modal.tsx

@@ -1,118 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { ModalButton } from '../buttons/modal-button';
-
-interface SocialLink {
-  platform: string;
-  placeholder: string;
-  value: string;
-}
-
-interface SocialMediaModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: SocialLink[];
-  onSave: (value: SocialLink[]) => Promise<void>;
-  isLoading?: boolean;
-}
-
-export const SocialMediaModal: FC<SocialMediaModalProps> = ({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-  isLoading = false,
-}) => {
-  const [socialLinks, setSocialLinks] = useState<SocialLink[]>(initialValue);
-
-  
-  useEffect(() => {
-    setSocialLinks(initialValue);
-  }, [initialValue]);
-
-  const handleSave = async () => {
-    try {
-      await onSave(socialLinks);
-
-      onClose();
-    } catch (error) {
-      console.error('Save failed:', error);
-
-    }
-  };
-
-  const handleCancel = () => {
-    setSocialLinks(initialValue);
-    onClose();
-  };
-
-  const handleSocialLinkChange = (index: number, value: string) => {
-    const updated = [...socialLinks];
-    updated[index].value = value;
-    setSocialLinks(updated);
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-
-      <button
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
-        onClick={handleCancel}
-        aria-label="Close modal"
-        type="button"
-      />
-
-
-      <div className="relative bg-white rounded-xl shadow-xl w-full max-w-5xl mx-auto">
-
-        <div className="p-6 pb-4 border-b border-gray-200">
-          <div className="flex">
-            <h2 className="text-xl font-semibold text-gray-900 px-3 py-1 bg-[#23A1EB]/10 rounded-md flex-1">Edit Social Media</h2>
-          </div>
-        </div>
-
-
-        <div className="px-6 py-4 space-y-4 max-h-[60vh] overflow-y-auto">
-          {socialLinks.map((link, index) => (
-            <div key={link.platform}>
-              <label htmlFor={`social-${index}`} className="block text-sm font-medium text-gray-700 mb-2">
-                {link.platform}
-              </label>
-              <input
-                id={`social-${index}`}
-                type="text"
-                placeholder={link.placeholder}
-                value={link.value}
-                onChange={(e) => handleSocialLinkChange(index, e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#23A1EB] focus:border-[#23A1EB] outline-none transition-colors"
-              />
-            </div>
-          ))}
-        </div>
-
-
-        <div className="flex gap-3 p-6 pt-4">
-          <ModalButton
-            variant="secondary"
-            onClick={handleCancel}
-            className="flex-1"
-            disabled={isLoading}
-          >
-            Batal
-          </ModalButton>
-          <ModalButton
-            variant="primary"
-            onClick={handleSave}
-            className="flex-1"
-            disabled={isLoading}
-            loading={isLoading}
-          >
-            {isLoading ? 'Menyimpan...' : 'Simpan'}
-          </ModalButton>
-        </div>
-      </div>
-    </div>
-  );
-};
-

apps/dimentorin/src/app/(public)/profile/_components/profile/index.ts

@@ -1,8 +0,0 @@
-export { ProfileHeader } from './profile-header';
-export { ProfileInfo } from './profile-info';
-export { ProfileTabs } from './profile-tabs';
-export { ProfileForm } from './profile-form';
-export { ProfileSidebar } from './profile-sidebar';
-export type { SocialLink, Experience, Education, Language, PersonalInfo, ContactInfo, CvResume, NotificationState, ProfileFormProps } from './profile-form-types';
-export { useProfileFormState, useProfileDataSync } from './profile-form-hooks';
-export { useProfileHandlers } from './profile-form-handlers';

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-handlers.ts

@@ -1,120 +0,0 @@
-import type { MentorUpdateRequestDto, UserUpdateRequestDto } from '@imphnen-frontend-service/service';
-import { useProfile } from '../contexts/profile-context';
-import type { SocialLink, ProfileUpdateData, Experience, Education } from './profile-form-types';
-
-export const useProfileHandlers = (
-  showNotification: (type: 'success' | 'error', title: string, message?: string) => void
-) => {
-  const { updateProfile, profileType } = useProfile();
-
-  const handleProfileUpdate = async (updates: ProfileUpdateData) => {
-    try {
-      const result = await updateProfile(updates);
-      showNotification('success', 'Perubahan Berhasil Disimpan');
-      return result;
-    } catch (err) {
-      console.error('Profile update error:', err);
-      showNotification('error', 'Gagal menyimpan perubahan', 'Silakan coba lagi');
-      throw err;
-    }
-  };
-
-  const handlePersonalInfoSave = async (personalData: { phone: string; location: string }) => {
-    await handleProfileUpdate({
-      phone_for_verification: personalData.phone,
-      location: personalData.location
-    });
-  };
-
-  const handleContactInfoSave = async (contactData: { phone: string; location: string }) => {
-    await handleProfileUpdate({
-      phone_for_verification: contactData.phone,
-      location: contactData.location
-    });
-  };
-
-  const handleSocialMediaSave = async (newSocialLinks: SocialLink[]) => {
-    const linkedIn = newSocialLinks.find(link => link.platform === 'LinkedIn')?.value;
-    const github = newSocialLinks.find(link => link.platform === 'Github')?.value;
-    const portfolio = newSocialLinks.find(link => link.platform === 'Portfolio')?.value;
-    const twitter = newSocialLinks.find(link => link.platform === 'Twitter')?.value;
-
-    const updates: ProfileUpdateData = {
-      linkedin_url: linkedIn || undefined,
-      github_url: github || undefined,
-      twitter_url: twitter || undefined,
-    };
-
-    if (profileType === 'mentor') {
-      (updates as MentorUpdateRequestDto).portfolio_url = portfolio || undefined;
-    } else if (profileType === 'user') {
-      (updates as UserUpdateRequestDto).website_url = portfolio || undefined;
-    }
-
-    await handleProfileUpdate(updates);
-  };
-
-  const handleDescriptionSave = async (newDescription: string) => {
-    await handleProfileUpdate({
-      bio: newDescription || null
-    });
-  };
-
-  const handleSkillsSave = async (newSkills: string[]) => {
-    const updates: ProfileUpdateData = {};
-
-    if (profileType === 'user') {
-      (updates as UserUpdateRequestDto).skills = newSkills;
-    } else if (profileType === 'mentor') {
-      (updates as MentorUpdateRequestDto).expertise = newSkills;
-    }
-
-    await handleProfileUpdate(updates);
-  };
-
-  const handleLanguagesSave = async (newLanguages: Array<{ name: string; level: string }>) => {
-    await handleProfileUpdate({
-      languages: newLanguages.map(lang => lang.name)
-    } as MentorUpdateRequestDto | UserUpdateRequestDto);
-  };
-
-  const handleExperiencesSave = async (newExperiences: Experience[]) => {
-    try {
-      await handleProfileUpdate({
-        experience: newExperiences
-      });
-    } catch (error) {
-      console.error('Experience update error:', error);
-
-    }
-  };
-
-  const handleEducationSave = async (newEducations: Education[]) => {
-    try {
-      await handleProfileUpdate({
-        education: newEducations
-      });
-    } catch (error) {
-      console.error('Education update error:', error);
-
-    }
-  };
-
-  const handleCvResumeSave = async (cvData: { fileName?: string; fileUrl?: string }) => {
-    await handleProfileUpdate({
-      cv_url: cvData.fileUrl || cvData.fileName || null
-    });
-  };
-
-  return {
-    handlePersonalInfoSave,
-    handleContactInfoSave,
-    handleSocialMediaSave,
-    handleDescriptionSave,
-    handleSkillsSave,
-    handleLanguagesSave,
-    handleExperiencesSave,
-    handleEducationSave,
-    handleCvResumeSave
-  };
-};

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-hooks.ts

@@ -1,253 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useProfile } from '../contexts/profile-context';
-import type {
-  SocialLink,
-  Experience,
-  Education,
-  Language,
-  PersonalInfo,
-  ContactInfo,
-  CvResume,
-  NotificationState
-} from './profile-form-types';
-
-export const useProfileFormState = () => {
-  const { profileData, profileType } = useProfile();
-
-  const [notification, setNotification] = useState<NotificationState>({
-    isOpen: false,
-    type: 'success',
-    title: '',
-    message: ''
-  });
-
-  const [socialLinks, setSocialLinks] = useState<SocialLink[]>([
-    {
-      platform: 'LinkedIn',
-      placeholder: 'linkedin.com/in/yourprofile',
-      value: ''
-    },
-    {
-      platform: 'Github',
-      placeholder: 'github.com/yourusername',
-      value: ''
-    },
-    {
-      platform: 'Portfolio',
-      placeholder: 'yourportfolio.com',
-      value: ''
-    },
-    {
-      platform: 'Twitter',
-      placeholder: 'twitter.com/yourusername',
-      value: ''
-    }
-  ]);
-
-  const [experiences, setExperiences] = useState<Experience[]>([]);
-  const [education, setEducation] = useState<Education[]>([]);
-  const [skills, setSkills] = useState<string[]>([]);
-  const [languages, setLanguages] = useState<Language[]>([]);
-
-  const [personalInfo, setPersonalInfo] = useState<PersonalInfo>({
-    fullname: '',
-    title: '',
-    bio: '',
-    birthdate: '',
-    gender: ''
-  });
-
-  const [contactInfo, setContactInfo] = useState<ContactInfo>({
-    email: '',
-    phone: '',
-    location: ''
-  });
-
-  const [cvResume, setCvResume] = useState<CvResume>({
-    cvUrl: '',
-    resumeUrl: ''
-  });
-
-  return {
-    profileData,
-    profileType,
-    notification,
-    setNotification,
-    socialLinks,
-    setSocialLinks,
-    experiences,
-    setExperiences,
-    education,
-    setEducation,
-    skills,
-    setSkills,
-    languages,
-    setLanguages,
-    personalInfo,
-    setPersonalInfo,
-    contactInfo,
-    setContactInfo,
-    cvResume,
-    setCvResume
-  };
-};
-
-export const useProfileDataSync = (state: ReturnType<typeof useProfileFormState>) => {
-  const {
-    profileData,
-    profileType,
-    setSocialLinks,
-    setExperiences,
-    setEducation,
-    setSkills,
-    setLanguages,
-    setPersonalInfo,
-    setContactInfo,
-    setCvResume
-  } = state;
-
-
-  useEffect(() => {
-    if (profileData) {
-      const linkedinUrl = 'linkedin_url' in profileData ? profileData.linkedin_url || '' : '';
-      const githubUrl = 'github_url' in profileData ? profileData.github_url || '' : '';
-
-
-      let portfolioUrl = '';
-      if (profileType === 'mentor' && 'portfolio_url' in profileData) {
-        portfolioUrl = profileData.portfolio_url || '';
-      } else if (profileType === 'user' && 'website_url' in profileData) {
-        portfolioUrl = profileData.website_url || '';
-      }
-
-      const twitterUrl = 'twitter_url' in profileData ? profileData.twitter_url || '' : '';
-
-      setSocialLinks([
-        {
-          platform: 'LinkedIn',
-          placeholder: 'linkedin.com/in/yourprofile',
-          value: linkedinUrl
-        },
-        {
-          platform: 'Github',
-          placeholder: 'github.com/yourusername',
-          value: githubUrl
-        },
-        {
-          platform: 'Portfolio',
-          placeholder: 'yourportfolio.com',
-          value: portfolioUrl
-        },
-        {
-          platform: 'Twitter',
-          placeholder: 'twitter.com/yourusername',
-          value: twitterUrl
-        }
-      ]);
-    }
-  }, [profileData, profileType, setSocialLinks]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const experiences = 'experience' in profileData ? profileData.experience || [] : [];
-      setExperiences(experiences);
-    }
-  }, [profileData, setExperiences]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const education = 'education' in profileData ? profileData.education || [] : [];
-      setEducation(education);
-    }
-  }, [profileData, setEducation]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      let skills: string[] = [];
-      if ('skills' in profileData) {
-        skills = profileData.skills || [];
-      } else if ('expertise' in profileData) {
-        skills = profileData.expertise || [];
-      }
-      setSkills(skills);
-    }
-  }, [profileData, setSkills]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const languages: Language[] = 'languages' in profileData
-        ? (profileData.languages || []).map(lang => ({ name: lang, level: 'Intermediate' }))
-        : [];
-      setLanguages(languages);
-    }
-  }, [profileData, setLanguages]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const bio = 'bio' in profileData ? profileData.bio || '' : '';
-
-      let fullname = '';
-      if ('fullname' in profileData) {
-        fullname = profileData.fullname || '';
-      } else if ('legal_name' in profileData) {
-        fullname = profileData.legal_name || '';
-      }
-
-      const title = 'current_role' in profileData ? profileData.current_role || '' : '';
-      const birthdate = 'birthdate' in profileData ? profileData.birthdate || '' : '';
-      const gender = 'gender' in profileData ? profileData.gender || '' : '';
-
-      setPersonalInfo({
-        fullname,
-        title,
-        bio,
-        birthdate,
-        gender
-      });
-    }
-  }, [profileData, setPersonalInfo]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const email = 'email' in profileData ? profileData.email || '' : '';
-
-      let phone = '';
-      if ('phone_number' in profileData) {
-        phone = profileData.phone_number || '';
-      } else if ('phone_for_verification' in profileData) {
-        phone = profileData.phone_for_verification || '';
-      }
-
-      let location = '';
-      if ('location' in profileData) {
-        location = profileData.location || '';
-      } else if ('domicile' in profileData) {
-        location = profileData.domicile || '';
-      }
-
-      setContactInfo({
-        email,
-        phone,
-        location
-      });
-    }
-  }, [profileData, setContactInfo]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const cvUrl = profileType === 'mentor' && 'cv_url' in profileData ? profileData.cv_url || '' : '';
-
-      setCvResume({
-        cvUrl,
-        resumeUrl: ''
-      });
-    }
-  }, [profileData, profileType, setCvResume]);
-};

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form-types.ts

@@ -1,60 +0,0 @@
-import type { MentorUpdateRequestDto, UserUpdateRequestDto } from '@imphnen-frontend-service/service';
-
-export interface SocialLink {
-  platform: string;
-  placeholder: string;
-  value: string;
-}
-
-export interface Experience {
-  id: string;
-  company: string;
-  position: string;
-  duration: string;
-  period: string;
-}
-
-export interface Education {
-  id: string;
-  institution: string;
-  degree: string;
-  field: string;
-  period: string;
-}
-
-export interface Language {
-  name: string;
-  level: string;
-}
-
-export interface PersonalInfo {
-  fullname: string;
-  title: string;
-  bio: string;
-  birthdate: string;
-  gender: string;
-}
-
-export interface ContactInfo {
-  email: string;
-  phone: string;
-  location: string;
-}
-
-export interface CvResume {
-  cvUrl: string;
-  resumeUrl: string;
-}
-
-export interface NotificationState {
-  isOpen: boolean;
-  type: 'success' | 'error';
-  title: string;
-  message?: string;
-}
-
-export interface ProfileFormProps {
-  showNotification: (type: 'success' | 'error', title: string, message?: string) => void;
-}
-
-export type ProfileUpdateData = Partial<MentorUpdateRequestDto | UserUpdateRequestDto>;

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-form.tsx

@@ -1,251 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { NotificationModal } from '../modals';
-import { ExperiencesSection } from '../sections/experiences-section';
-import { CvResumeSection } from '../sections/cv-resume-section';
-import { DescriptionSection } from '../sections/description-section';
-import { EducationSection } from '../sections/education-section';
-import type { MentorUpdateRequestDto, UserUpdateRequestDto } from '@imphnen-frontend-service/service';
-import { useProfile } from '../contexts/profile-context';
-
-interface Experience {
-  id: string;
-  company: string;
-  position: string;
-  duration: string;
-  period: string;
-}
-
-interface Education {
-  id: string;
-  institution: string;
-  degree: string;
-  field: string;
-  period: string;
-}
-
-interface ProfileFormProps {
-  showNotification: (type: 'success' | 'error', title: string, message?: string) => void;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const ProfileForm: FC<ProfileFormProps> = ({ showNotification, isViewOnly = false }) => {
-  const { profileData, updateProfile, isUpdating } = useProfile();
-
-  const [notification, setNotification] = useState<{
-    isOpen: boolean;
-    type: 'success' | 'error';
-    title: string;
-    message?: string;
-  }>({
-    isOpen: false,
-    type: 'success',
-    title: '',
-    message: ''
-  });
-
-  const [experiences, setExperiences] = useState<Experience[]>([]);
-  const [education, setEducation] = useState<Education[]>([]);
-
-  
-  const [personalInfo, setPersonalInfo] = useState({
-    fullname: '',
-    title: '',
-    bio: '',
-    birthdate: '',
-    gender: ''
-  });
-
-  const [cvResume, setCvResume] = useState({
-    cvUrl: '',
-    resumeUrl: ''
-  });
-
-  
-  useEffect(() => {
-    if (profileData) {
-      const experiences = 'experience' in profileData ? profileData.experience || [] : [];
-      setExperiences(experiences);
-    }
-  }, [profileData]);
-
-  
-  useEffect(() => {
-    if (profileData) {
-      const education = 'education' in profileData ? profileData.education || [] : [];
-      setEducation(education);
-    }
-  }, [profileData]);
-
-  
-  useEffect(() => {
-    if (profileData) {
-      const bio = 'bio' in profileData ? profileData.bio || '' : '';
-
-      let fullname = '';
-      if ('fullname' in profileData) {
-        fullname = profileData.fullname || '';
-      } else if ('legal_name' in profileData) {
-        fullname = profileData.legal_name || '';
-      }
-
-      const title = 'current_role' in profileData ? profileData.current_role || '' : '';
-      const birthdate = 'birthdate' in profileData ? profileData.birthdate || '' : '';
-      const gender = 'gender' in profileData ? profileData.gender || '' : '';
-
-      setPersonalInfo({
-        fullname,
-        title,
-        bio,
-        birthdate,
-        gender
-      });
-    }
-  }, [profileData]);
-
-  
-  useEffect(() => {
-    if (profileData) {
-      const cvUrl = 'cv_url' in profileData ? profileData.cv_url || '' : '';
-
-      setCvResume({
-        cvUrl,
-        resumeUrl: ''
-      });
-    }
-  }, [profileData]);
-
-  
-  
-  function isErrorWithResponse(err: unknown): err is { response: { data: { message: string } } } {
-    return (
-      typeof err === 'object' &&
-      err !== null &&
-      
-      typeof (err as { response?: { data?: { message?: unknown } } }).response?.data?.message === 'string'
-    );
-  }
-
-  function isErrorWithMessage(err: unknown): err is { message: string } {
-    return (
-      typeof err === 'object' &&
-      err !== null &&
-      'message' in err &&
-      typeof (err as { message?: unknown }).message === 'string'
-    );
-  }
-
-  function tryParseJsonMessage(msg: string): string {
-    const trimmed = msg.trim();
-    if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
-      try {
-        const parsed = JSON.parse(trimmed);
-        if (parsed && typeof parsed.message === 'string') {
-          return parsed.message;
-        }
-      } catch {
-        return msg;
-      }
-    }
-    return msg;
-  }
-
-  function extractApiMessage(err: unknown): string {
-    if (isErrorWithResponse(err)) {
-      return err.response.data.message;
-    }
-    if (isErrorWithMessage(err)) {
-      const msg = err.message || '';
-      return tryParseJsonMessage(msg);
-    }
-    return '';
-  }
-
-  const handleProfileUpdate = async (updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto>) => {
-    if (isViewOnly) { // Prevent updates if in view-only mode
-      showNotification('error', 'Akses Ditolak', 'Anda tidak memiliki izin untuk mengedit profil ini.');
-      return;
-    }
-    try {
-      const result = await updateProfile(updates);
-      showNotification('success', 'Perubahan Berhasil Disimpan');
-      return result;
-    } catch (err: unknown) {
-      console.error('Profile update error:', err);
-      const apiMessage = extractApiMessage(err);
-      showNotification('error', 'Gagal menyimpan perubahan', apiMessage || 'Silakan coba lagi');
-      throw err;
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      {}
-      <DescriptionSection
-        initialDescription={personalInfo.bio}
-        onSave={async (newDescription) => {
-          await handleProfileUpdate({
-            bio: newDescription || null
-          });
-        }}
-        showNotification={showNotification}
-        isLoading={isUpdating}
-        isViewOnly={isViewOnly} // Pass isViewOnly
-      />
-      {}
-      <CvResumeSection
-        initialFileName={cvResume.cvUrl}
-        fullname={personalInfo.fullname}
-        onSave={async (cvData) => {
-          await handleProfileUpdate({
-            cv_url: cvData.fileUrl || null
-          });
-        }}
-        showNotification={showNotification}
-        isLoading={isUpdating}
-        isViewOnly={isViewOnly} // Pass isViewOnly
-      />
-      {}
-      <ExperiencesSection
-        initialExperiences={experiences}
-        onSave={async (newExperiences) => {
-          try {
-            await handleProfileUpdate({
-              experience: newExperiences
-            });
-          } catch (error) {
-            console.error('Experience update error:', error);
-          }
-        }}
-        showNotification={showNotification}
-        isLoading={isUpdating}
-        isViewOnly={isViewOnly} // Pass isViewOnly
-      />
-
-      {}
-      <EducationSection
-        initialEducation={education}
-        onSave={async (newEducations) => {
-          try {
-            await handleProfileUpdate({
-              education: newEducations
-            });
-          } catch (error) {
-            console.error('Education update error:', error);
-          }
-        }}
-        showNotification={showNotification}
-        isLoading={isUpdating}
-        isViewOnly={isViewOnly} // Pass isViewOnly
-      />
-
-      <NotificationModal
-        isOpen={notification.isOpen}
-        onClose={() => setNotification(prev => ({ ...prev, isOpen: false }))}
-        type={notification.type}
-        title={notification.title}
-        message={notification.message}
-        header="Profile"
-      />
-    </div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-header.tsx

@@ -1,115 +0,0 @@
-import { FC } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { EditOutlined } from '@ant-design/icons';
-import { motion } from 'framer-motion';
-import { useProfile } from '../contexts/profile-context';
-
-interface ProfileHeaderProps {
-  onEditProfileClick: () => void;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const ProfileHeader: FC<ProfileHeaderProps> = ({ onEditProfileClick, isViewOnly = false }) => {
-  const { profileData, profileType } = useProfile();
-
-  
-  const avatarSrc = (profileType === 'user' && profileData && 'avatar' in profileData)
-    ? profileData.avatar || "/image/testimonial.webp"
-    : "/image/testimonial.webp";
-
-
-  const displayFullname = profileData?.fullname ||
-    (profileType === 'mentor' && profileData && 'legal_name' in profileData
-      ? profileData.legal_name
-      : 'User Name');
-  let displayJob = 'Role';
-  if (profileData) {
-    if (profileType === 'mentor' && 'current_role' in profileData) {
-      displayJob = profileData.current_role || 'Mentor';
-    } else if (profileType === 'user' && 'role' in profileData && profileData.role) {
-      displayJob = profileData.role.name || 'User';
-    } else if ('current_role' in profileData) {
-
-      displayJob = profileData.current_role || 'Role';
-    }
-  }
-
-
-  const joinDate = profileData && 'created_at' in profileData
-    ? new Date(profileData.created_at).toLocaleDateString('id-ID', {
-        year: 'numeric',
-        month: 'long'
-      })
-    : 'April 2024';
-
-  return (
-    <motion.div
-      className="bg-white rounded-lg p-6 md:p-8 shadow-sm"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.4 }}
-    >
-      <div className="flex flex-col md:flex-row md:items-center gap-6">
-        <div className="relative flex-shrink-0">
-          <div className="w-24 h-24 md:w-32 md:h-32 rounded-full overflow-hidden bg-primary-100 flex items-center justify-center">
-            <img
-              src={avatarSrc}
-              alt="Profile"
-              className="w-full h-full object-cover"
-            />
-          </div>
-        </div>
-
-        <div className="flex-1">
-          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
-            <div>
-              <h1 className="text-xl md:text-2xl font-semibold text-neutral-800 mb-2">
-                {displayFullname}
-              </h1>
-              <p className="text-neutral-600 mb-1">{displayJob}</p>
-              {}
-              <p className="text-sm text-neutral-500 mt-2">
-                Bergabung sejak {joinDate}
-              </p>
-            </div>
-
-            {!isViewOnly && ( // Conditionally render the button
-              <Button
-                variant="secondary"
-                size="sm"
-                className="flex items-center gap-2 self-start"
-                onClick={onEditProfileClick}
-              >
-                <EditOutlined className="text-sm" />
-                Edit Profile
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {profileType === 'mentor' && (
-        <div className="flex justify-around md:justify-start md:gap-12 mt-6 pt-6 border-t border-neutral-100">
-          <div className="text-center md:text-left">
-            <p className="text-lg md:text-xl font-semibold text-primary-500">
-              {profileData && 'mentoring_sessions' in profileData ? profileData.mentoring_sessions || 'N/A' : 'N/A'}
-            </p>
-            <p className="text-xs md:text-sm text-neutral-600">Mentoring Sessions</p>
-          </div>
-          <div className="text-center md:text-left">
-            <p className="text-lg md:text-xl font-semibold text-primary-500">
-              {profileData && 'rating' in profileData ? profileData.rating || 'N/A' : 'N/A'}
-            </p>
-            <p className="text-xs md:text-sm text-neutral-600">Rating</p>
-          </div>
-          <div className="text-center md:text-left">
-            <p className="text-lg md:text-xl font-semibold text-primary-500">
-              0
-            </p>
-            <p className="text-xs md:text-sm text-neutral-600">Certificates</p>
-          </div>
-        </div>
-      )}
-    </motion.div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-info-new.tsx

@@ -1,187 +0,0 @@
-import { useState, FC, useEffect } from 'react';
-import { PersonalInfoSection } from '../sections/personal-info-section';
-import { SkillsSection } from '../sections/skills-section';
-import { LanguagesSection } from '../sections/languages-section';
-import { SocialMediaSection } from '../sections/social-media-section';
-import { NotificationType } from '../modals/notification-modal';
-import { useProfile } from '../contexts/profile-context';
-import type { MentorUpdateRequestDto, UserUpdateRequestDto } from '@imphnen-frontend-service/service';
-
-interface Language {
-  name: string;
-  level: string;
-}
-
-interface SocialLink {
-  platform: string;
-  placeholder: string;
-  value: string;
-}
-
-interface ProfileInfoProps {
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-}
-
-export const ProfileInfo: FC<ProfileInfoProps> = ({ showNotification }) => {
-  const { profileData, updateProfile, profileType } = useProfile();
-
-  const [contactInfo, setContactInfo] = useState({
-    email: '',
-    phone: '',
-    location: ''
-  });
-
-  const [currentSkills, setCurrentSkills] = useState<string[]>([]);
-  const [currentLanguages, setCurrentLanguages] = useState<Language[]>([]);
-  const [currentSocialLinks, setCurrentSocialLinks] = useState<SocialLink[]>([
-    { platform: 'LinkedIn', placeholder: 'linkedin.com/in/yourprofile', value: '' },
-    { platform: 'Github', placeholder: 'github.com/yourusername', value: '' },
-    { platform: 'Portfolio', placeholder: 'yourportfolio.com', value: '' },
-    { platform: 'Twitter', placeholder: 'twitter.com/yourusername', value: '' }
-  ]);
-
-
-  const extractContactInfo = (profileData: MentorUpdateRequestDto | UserUpdateRequestDto) => {
-    const email = 'email' in profileData && typeof profileData.email === 'string' ? profileData.email || '' : '';
-    let phone = '';
-    if ('phone_number' in profileData) {
-      phone = profileData.phone_number || '';
-    } else if ('phone_for_verification' in profileData) {
-      phone = profileData.phone_for_verification || '';
-    }
-
-    let location = '';
-    if ('location' in profileData) {
-      location = profileData.location || '';
-    } else if ('domicile' in profileData) {
-      location = profileData.domicile || '';
-    }
-
-    return { email, phone, location };
-  };
-
-  const extractSkills = (profileData: MentorUpdateRequestDto | UserUpdateRequestDto) => {
-    if ('skills' in profileData) {
-      return profileData.skills || [];
-    } else if ('expertise' in profileData) {
-      return profileData.expertise || [];
-    }
-    return [];
-  };
-
-  const extractLanguages = (profileData: MentorUpdateRequestDto | UserUpdateRequestDto): Language[] => {
-    return 'languages' in profileData
-      ? (profileData.languages || []).map((lang: string) => ({ name: lang, level: 'Intermediate' }))
-      : [];
-  };
-
-  const extractSocialLinks = (profileData: MentorUpdateRequestDto | UserUpdateRequestDto, profileType: string): SocialLink[] => {
-    const linkedinUrl = 'linkedin_url' in profileData ? profileData.linkedin_url || '' : '';
-    const githubUrl = 'github_url' in profileData ? profileData.github_url || '' : '';
-    let portfolioUrl = '';
-    if (profileType === 'mentor' && 'portfolio_url' in profileData) {
-      portfolioUrl = profileData.portfolio_url || '';
-    } else if (profileType === 'user' && 'website_url' in profileData) {
-      portfolioUrl = profileData.website_url || '';
-    }
-    const twitterUrl = 'twitter_url' in profileData ? profileData.twitter_url || '' : '';
-
-    return [
-      { platform: 'LinkedIn', placeholder: 'linkedin.com/in/yourprofile', value: linkedinUrl },
-      { platform: 'Github', placeholder: 'github.com/yourusername', value: githubUrl },
-      { platform: 'Portfolio', placeholder: 'yourportfolio.com', value: portfolioUrl },
-      { platform: 'Twitter', placeholder: 'twitter.com/yourusername', value: twitterUrl }
-    ];
-  };
-
-
-  useEffect(() => {
-    if (profileData) {
-      setContactInfo(extractContactInfo(profileData));
-      setCurrentSkills(extractSkills(profileData));
-      setCurrentLanguages(extractLanguages(profileData));
-      setCurrentSocialLinks(extractSocialLinks(profileData, profileType));
-    }
-  }, [profileData, profileType]);
-
-
-  const handleProfileUpdate = async (updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto>) => {
-    try {
-      await updateProfile(updates);
-      showNotification('success', 'Perubahan Berhasil Disimpan');
-    } catch (err) {
-      console.error('Profile update error:', err);
-      showNotification('error', 'Gagal menyimpan perubahan', 'Silakan coba lagi');
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      <PersonalInfoSection
-        initialContactInfo={contactInfo}
-        onSave={async (newContactInfo) => {
-          setContactInfo(newContactInfo);
-          await handleProfileUpdate({
-            phone_for_verification: newContactInfo.phone,
-            location: newContactInfo.location
-          });
-        }}
-        showNotification={showNotification}
-      />
-
-      <SocialMediaSection
-        initialSocialLinks={currentSocialLinks}
-        onSave={async (newSocialLinks) => {
-          setCurrentSocialLinks(newSocialLinks);
-          const linkedIn = newSocialLinks.find(link => link.platform === 'LinkedIn')?.value;
-          const github = newSocialLinks.find(link => link.platform === 'Github')?.value;
-          const portfolio = newSocialLinks.find(link => link.platform === 'Portfolio')?.value;
-          const twitter = newSocialLinks.find(link => link.platform === 'Twitter')?.value;
-
-          const updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto> = {
-            linkedin_url: linkedIn || undefined,
-            github_url: github || undefined,
-            twitter_url: twitter || undefined,
-          };
-
-          if (profileType === 'mentor') {
-            (updates as MentorUpdateRequestDto).portfolio_url = portfolio || undefined;
-          } else if (profileType === 'user') {
-            (updates as UserUpdateRequestDto).website_url = portfolio || undefined;
-          }
-
-          await handleProfileUpdate(updates);
-        }}
-        showNotification={showNotification}
-      />
-
-      <SkillsSection
-        initialSkills={currentSkills}
-        onSave={async (newSkills) => {
-          setCurrentSkills(newSkills);
-          const updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto> = {};
-
-          if (profileType === 'user') {
-            (updates as UserUpdateRequestDto).skills = newSkills;
-          } else if (profileType === 'mentor') {
-            (updates as MentorUpdateRequestDto).expertise = newSkills;
-          }
-
-          await handleProfileUpdate(updates);
-        }}
-        showNotification={showNotification}
-      />
-
-      <LanguagesSection
-        initialLanguages={currentLanguages}
-        onSave={async (newLanguages) => {
-          setCurrentLanguages(newLanguages);
-          await handleProfileUpdate({
-            languages: newLanguages.map(lang => lang.name)
-          } as MentorUpdateRequestDto | UserUpdateRequestDto);
-        }}
-        showNotification={showNotification}
-      />
-    </div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-info.tsx

@@ -1,190 +0,0 @@
-import { useState, FC, useEffect } from 'react';
-import { PersonalInfoSection } from '../sections/personal-info-section';
-import { SkillsSection } from '../sections/skills-section';
-import { LanguagesSection } from '../sections/languages-section';
-import { SocialMediaSection } from '../sections/social-media-section';
-import { NotificationType } from '../modals/notification-modal';
-import { useProfile } from '../contexts/profile-context';
-import type { MentorUpdateRequestDto, UserUpdateRequestDto } from '@imphnen-frontend-service/service';
-
-interface Language {
-  name: string;
-  level: string;
-}
-
-interface SocialLink {
-  platform: string;
-  placeholder: string;
-  value: string;
-}
-
-interface ProfileInfoProps {
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-}
-
-export const ProfileInfo: FC<ProfileInfoProps> = ({ showNotification }) => {
-  const { profileData, updateProfile, profileType } = useProfile();
-
-  const [contactInfo, setContactInfo] = useState({
-    email: '',
-    phone: '',
-    location: ''
-  });
-
-  const [currentSkills, setCurrentSkills] = useState<string[]>([]);
-  const [currentLanguages, setCurrentLanguages] = useState<Language[]>([]);
-  const [currentSocialLinks, setCurrentSocialLinks] = useState<SocialLink[]>([
-    { platform: 'LinkedIn', placeholder: 'linkedin.com/in/yourprofile', value: '' },
-    { platform: 'Github', placeholder: 'github.com/yourusername', value: '' },
-    { platform: 'Portfolio', placeholder: 'yourportfolio.com', value: '' },
-    { platform: 'Twitter', placeholder: 'twitter.com/yourusername', value: '' }
-  ]);
-
-  
-  useEffect(() => {
-    if (profileData) {
-      const email = 'email' in profileData ? profileData.email || '' : '';
-      let phone = '';
-      if ('phone_number' in profileData) {
-        phone = profileData.phone_number || '';
-      } else if ('phone_for_verification' in profileData) {
-        phone = profileData.phone_for_verification || '';
-      }
-
-      let location = '';
-      if ('location' in profileData) {
-        location = profileData.location || '';
-      } else if ('domicile' in profileData) {
-        location = profileData.domicile || '';
-      }
-
-      setContactInfo({ email, phone, location });
-    }
-  }, [profileData]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      let skills: string[] = [];
-      if ('skills' in profileData) {
-        skills = profileData.skills || [];
-      } else if ('expertise' in profileData) {
-        skills = profileData.expertise || [];
-      }
-      setCurrentSkills(skills);
-    }
-  }, [profileData]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const languages: Language[] = 'languages' in profileData
-        ? (profileData.languages || []).map(lang => ({ name: lang, level: 'Intermediate' }))
-        : [];
-      setCurrentLanguages(languages);
-    }
-  }, [profileData]);
-
-
-  useEffect(() => {
-    if (profileData) {
-      const linkedinUrl = 'linkedin_url' in profileData ? profileData.linkedin_url || '' : '';
-      const githubUrl = 'github_url' in profileData ? profileData.github_url || '' : '';
-      let portfolioUrl = '';
-      if (profileType === 'mentor' && 'portfolio_url' in profileData) {
-        portfolioUrl = profileData.portfolio_url || '';
-      } else if (profileType === 'user' && 'website_url' in profileData) {
-        portfolioUrl = profileData.website_url || '';
-      }
-      const twitterUrl = 'twitter_url' in profileData ? profileData.twitter_url || '' : '';
-
-      setCurrentSocialLinks([
-        { platform: 'LinkedIn', placeholder: 'linkedin.com/in/yourprofile', value: linkedinUrl },
-        { platform: 'Github', placeholder: 'github.com/yourusername', value: githubUrl },
-        { platform: 'Portfolio', placeholder: 'yourportfolio.com', value: portfolioUrl },
-        { platform: 'Twitter', placeholder: 'twitter.com/yourusername', value: twitterUrl }
-      ]);
-    }
-  }, [profileData, profileType]);
-
-
-  const handleProfileUpdate = async (updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto>) => {
-    try {
-      await updateProfile(updates);
-      showNotification('success', 'Perubahan Berhasil Disimpan');
-    } catch (err) {
-      console.error('Profile update error:', err);
-      showNotification('error', 'Gagal menyimpan perubahan', 'Silakan coba lagi');
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      <PersonalInfoSection
-        initialContactInfo={contactInfo}
-        onSave={async (newContactInfo) => {
-          setContactInfo(newContactInfo);
-          await handleProfileUpdate({
-            phone_for_verification: newContactInfo.phone,
-            location: newContactInfo.location
-          });
-        }}
-        showNotification={showNotification}
-      />
-
-      <SocialMediaSection
-        initialSocialLinks={currentSocialLinks}
-        onSave={async (newSocialLinks) => {
-          setCurrentSocialLinks(newSocialLinks);
-          const linkedIn = newSocialLinks.find(link => link.platform === 'LinkedIn')?.value;
-          const github = newSocialLinks.find(link => link.platform === 'Github')?.value;
-          const portfolio = newSocialLinks.find(link => link.platform === 'Portfolio')?.value;
-          const twitter = newSocialLinks.find(link => link.platform === 'Twitter')?.value;
-
-          const updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto> = {
-            linkedin_url: linkedIn || undefined,
-            github_url: github || undefined,
-            twitter_url: twitter || undefined,
-          };
-
-          if (profileType === 'mentor') {
-            (updates as MentorUpdateRequestDto).portfolio_url = portfolio || undefined;
-          } else if (profileType === 'user') {
-            (updates as UserUpdateRequestDto).website_url = portfolio || undefined;
-          }
-
-          await handleProfileUpdate(updates);
-        }}
-        showNotification={showNotification}
-      />
-
-      <SkillsSection
-        initialSkills={currentSkills}
-        onSave={async (newSkills) => {
-          setCurrentSkills(newSkills);
-          const updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto> = {};
-
-          if (profileType === 'user') {
-            (updates as UserUpdateRequestDto).skills = newSkills;
-          } else if (profileType === 'mentor') {
-            (updates as MentorUpdateRequestDto).expertise = newSkills;
-          }
-
-          await handleProfileUpdate(updates);
-        }}
-        showNotification={showNotification}
-      />
-
-      <LanguagesSection
-        initialLanguages={currentLanguages}
-        onSave={async (newLanguages) => {
-          setCurrentLanguages(newLanguages);
-          await handleProfileUpdate({
-            languages: newLanguages.map(lang => lang.name)
-          } as MentorUpdateRequestDto | UserUpdateRequestDto);
-        }}
-        showNotification={showNotification}
-      />
-    </div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-sidebar.tsx

@@ -1,239 +0,0 @@
-import { FC, useState, useEffect, useCallback } from 'react';
-import { Select } from '@imphnen-frontend-service/ui/atoms';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { PersonalInfoSection } from '../sections/personal-info-section';
-import { SkillsSection } from '../sections/skills-section';
-import type { MentorUpdateRequestDto, UserUpdateRequestDto } from '@imphnen-frontend-service/service';
-import { useProfile } from '../contexts/profile-context';
-
-interface ProfileSidebarProps {
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const ProfileSidebar: FC<ProfileSidebarProps> = ({ showNotification, isViewOnly = false }) => {
-  const { profileData, updateProfile, profileType, isLoading, isUpdating } = useProfile();
-
-
-  const getCareerStatus = useCallback(() => {
-    if (!profileData) {
-      return 'Career Status';
-    }
-
-    if (profileType === 'user' && 'career_status' in profileData) {
-      const status = profileData.career_status;
-      if (status && typeof status === 'string' && status.trim() !== '') {
-        return status;
-      }
-    }
-
-    if (profileType === 'mentor' && 'availability_commitment' in profileData) {
-      const commitment = profileData.availability_commitment;
-      if (commitment && typeof commitment === 'string' && commitment.trim() !== '') {
-        return commitment;
-      }
-    }
-
-    return 'Career Status';
-  }, [profileType, profileData]);
-
-  const getEmail = useCallback(() => {
-    if (profileData && 'email' in profileData) {
-      return profileData.email || 'email@example.com';
-    }
-    return 'email@example.com';
-  }, [profileData]);
-
-  const getPhone = useCallback(() => {
-    if (profileData && 'phone_for_verification' in profileData && profileData.phone_for_verification) {
-      return profileData.phone_for_verification;
-    }
-    if (profileType === 'user' && profileData && 'phone_number' in profileData && profileData.phone_number) {
-      return profileData.phone_number;
-    }
-    return '+62 (88) 8888 8888';
-  }, [profileType, profileData]);
-
-  const getLocation = useCallback(() => {
-    if (profileData && 'domicile' in profileData && profileData.domicile) {
-      return profileData.domicile;
-    }
-    if (profileType === 'user' && profileData && 'location' in profileData && profileData.location) {
-      return profileData.location;
-    }
-    return 'Location';
-  }, [profileType, profileData]);
-
-  const getSkills = useCallback(() => {
-    if (profileType === 'mentor' && profileData && 'expertise' in profileData && profileData.expertise) {
-      return Array.isArray(profileData.expertise) ? profileData.expertise : [];
-    }
-    if (profileType === 'user' && profileData && 'skills' in profileData && profileData.skills) {
-      return Array.isArray(profileData.skills) ? profileData.skills : [];
-    }
-    return [''];
-  }, [profileType, profileData]);
-
-  const [careerStatus, setCareerStatus] = useState<string>('Career Status');
-  const [isUpdatingCareerStatus, setIsUpdatingCareerStatus] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  const [personalInfo, setPersonalInfo] = useState({
-    email: 'email@example.com',
-    phone: '+62 (88) 8888 8888',
-    location: 'Location'
-  });
-
-  const [skills, setSkills] = useState<string[]>(['']);
-
-  useEffect(() => {
-    if (profileData && !isLoading && careerStatus === 'Career Status') {
-      const initialCareerStatus = getCareerStatus();
-
-      setCareerStatus(initialCareerStatus);
-      setIsInitialized(true);
-    }
-  }, [profileData, isLoading, careerStatus, getCareerStatus]);
-
-  useEffect(() => {
-    if (profileData && !isLoading) {
-      if (!isUpdatingCareerStatus && isInitialized) {
-        const newCareerStatus = getCareerStatus();
-        console.log('ProfileSidebar: Updating career status from API:', newCareerStatus);
-        setCareerStatus(newCareerStatus);
-      }
-
-      setPersonalInfo({
-        email: getEmail(),
-        phone: getPhone(),
-        location: getLocation()
-      });
-
-      setSkills(getSkills());
-    }
-  }, [profileData, profileType, isLoading, isInitialized, getCareerStatus, getEmail, getPhone, getLocation, getSkills, isUpdatingCareerStatus]);
-
-
-  const tryParseJsonMessage = (msg: string): string => {
-    if (msg.trim().startsWith('{') && msg.trim().endsWith('}')) {
-      try {
-        const parsed = JSON.parse(trimmed);
-        if (parsed && typeof parsed.message === 'string') {
-          return parsed.message;
-        }
-      } catch {
-        return msg;
-      }
-    }
-    return msg;
-  };
-
-
-  const extractApiMessage = (err: unknown): string => {
-    if (typeof err !== 'object' || err === null) return '';
-
-    const maybeAxiosError = err as { response?: { data?: { message?: string } } };
-    if (maybeAxiosError.response?.data?.message) {
-      return maybeAxiosError.response.data.message;
-    }
-
-    if ('message' in err && typeof (err as { message?: string }).message === 'string') {
-      const msg = (err as { message?: string }).message || '';
-      return tryParseJsonMessage(msg);
-    }
-
-    return '';
-  };
-
-  const handleProfileUpdate = async (updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto>) => {
-    if (isViewOnly) { // Prevent updates if in view-only mode
-      showNotification('error', 'Akses Ditolak', 'Anda tidak memiliki izin untuk mengedit profil ini.');
-      return;
-    }
-    try {
-      await updateProfile(updates);
-      showNotification('success', 'Perubahan Berhasil Disimpan');
-    } catch (err) {
-      console.error('Profile update error:', err);
-      const apiMessage = extractApiMessage(err);
-      showNotification('error', 'Gagal menyimpan perubahan', apiMessage || 'Silakan coba lagi');
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      <SectionWrapper title="Career Status">
-        <Select
-          value={careerStatus}
-          onChange={async (e) => {
-            if (isUpdatingCareerStatus) return; // Prevent multiple clicks
-            const newStatus = e.target.value;
-            console.log('ProfileSidebar: User selected career status:', newStatus);
-            setCareerStatus(newStatus);
-            setIsUpdatingCareerStatus(true);
-            try {
-              console.log('ProfileSidebar: Updating career status on backend...');
-
-              const updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto> = {};
-              if (profileType === 'mentor') {
-                (updates as MentorUpdateRequestDto).availability_commitment = newStatus;
-              } else {
-                (updates as UserUpdateRequestDto).career_status = newStatus;
-              }
-
-              await handleProfileUpdate(updates);
-            } catch (error) {
-              console.error('ProfileSidebar: Career status update failed:', error);
-            } finally {
-              setIsUpdatingCareerStatus(false);
-            }
-          }}
-          className="w-full min-w-[200px]"
-          disabled={isUpdatingCareerStatus || isViewOnly} // Disable if in view-only mode
-        >
-          <option value="Career Status">Career Status</option>
-          <option value="Student">Student</option>
-          <option value="Fresh Graduate">Fresh Graduate</option>
-          <option value="Junior Developer">Junior Developer</option>
-          <option value="Senior Developer">Senior Developer</option>
-          <option value="Team Lead">Team Lead</option>
-          <option value="Freelancer">Freelancer</option>
-        </Select>
-      </SectionWrapper>
-
-      <PersonalInfoSection
-        initialContactInfo={personalInfo}
-        onSave={async (newPersonalInfo) => {
-          setPersonalInfo(newPersonalInfo);
-          const updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto> = {
-            phone_for_verification: newPersonalInfo.phone || null,
-            domicile: newPersonalInfo.location || null
-          };
-          await handleProfileUpdate(updates);
-        }}
-        showNotification={showNotification}
-        isLoading={isUpdating}
-        isViewOnly={isViewOnly} // Pass isViewOnly
-      />
-
-      <SkillsSection
-        initialSkills={skills}
-        onSave={async (newSkills) => {
-          setSkills(newSkills);
-
-          const updates: Partial<MentorUpdateRequestDto | UserUpdateRequestDto> = {};
-          if (profileType === 'mentor') {
-            (updates as MentorUpdateRequestDto).expertise = newSkills;
-          } else if (profileType === 'user') {
-            (updates as UserUpdateRequestDto).skills = newSkills;
-          }
-          await handleProfileUpdate(updates);
-        }}
-        showNotification={showNotification}
-        isLoading={isUpdating}
-        isViewOnly={isViewOnly} // Pass isViewOnly
-      />
-    </div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/profile/profile-tabs.tsx

@@ -1,245 +0,0 @@
-import { FC, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { BookOutlined, TrophyOutlined, ClockCircleOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
-import { For } from '@imphnen-frontend-service/utils';
-
-type TabType = 'overview' | 'certificates' | 'activity' | 'mentoring';
-
-const tabs = [
-  { id: 'overview', label: 'Overview', icon: BookOutlined },
-  { id: 'certificates', label: 'Certificates', icon: SafetyCertificateOutlined },
-  { id: 'activity', label: 'Activity', icon: ClockCircleOutlined },
-  { id: 'mentoring', label: 'Mentoring', icon: TrophyOutlined },
-] as const;
-
-const certificates = [
-  {
-    id: 1,
-    title: 'UI/UX Design Fundamentals',
-    issuer: 'Google',
-    date: 'March 2024',
-    image: '/image/certificate-placeholder.jpg'
-  },
-  {
-    id: 2,
-    title: 'Advanced Figma Techniques',
-    issuer: 'Coursera',
-    date: 'February 2024',
-    image: '/image/certificate-placeholder.jpg'
-  }
-];
-
-const activities = [
-  {
-    id: 1,
-    type: 'mentoring',
-    title: 'Completed mentoring session with Riko',
-    date: '2 hours ago',
-    icon: TrophyOutlined
-  },
-  {
-    id: 2,
-    type: 'certificate',
-    title: 'Earned UI/UX Design Fundamentals certificate',
-    date: '1 day ago',
-    icon: SafetyCertificateOutlined
-  },
-  {
-    id: 3,
-    type: 'mentoring',
-    title: 'Started new mentoring session',
-    date: '3 days ago',
-    icon: TrophyOutlined
-  }
-];
-
-const mentoringStats = [
-  { label: 'Total Sessions', value: '15', change: '+3 this month' },
-  { label: 'Average Rating', value: '4.8/5', change: '+0.2 from last month' },
-  { label: 'Total Hours', value: '45h', change: '+12h this month' },
-  { label: 'Active Mentees', value: '8', change: '+2 this month' }
-];
-
-export const ProfileTabs: FC = () => {
-  const [activeTab, setActiveTab] = useState<TabType>('overview');
-
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case 'overview':
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="bg-white rounded-lg p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-neutral-800 mb-4">About Me</h3>
-              <p className="text-neutral-600 leading-relaxed">
-                Passionate UI/UX Designer with 5+ years of experience creating user-centered designs
-                for web and mobile applications. I love mentoring aspiring designers and sharing
-                knowledge about design thinking, prototyping, and user research methodologies.
-              </p>
-            </div>
-
-            <div className="bg-white rounded-lg p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-neutral-800 mb-4">Recent Achievements</h3>
-              <div className="grid gap-4 md:grid-cols-2">
-                <div className="p-4 bg-primary-50 rounded-lg">
-                  <div className="flex items-center gap-3 mb-2">
-                    <TrophyOutlined className="text-primary-500" />
-                    <h4 className="font-medium text-neutral-800">Top Mentor</h4>
-                  </div>
-                  <p className="text-sm text-neutral-600">Ranked #1 in UI/UX mentoring this month</p>
-                </div>
-                <div className="p-4 bg-green-50 rounded-lg">
-                  <div className="flex items-center gap-3 mb-2">
-                    <SafetyCertificateOutlined className="text-green-500" />
-                    <h4 className="font-medium text-neutral-800">New Certificate</h4>
-                  </div>
-                  <p className="text-sm text-neutral-600">Google UX Design Professional Certificate</p>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      case 'certificates':
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="bg-white rounded-lg p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-neutral-800 mb-4">My Certificates</h3>
-              <div className="grid gap-4 md:grid-cols-2">
-                <For data={certificates}>
-                  {(cert) => (
-                    <div key={cert.id} className="border border-neutral-200 rounded-lg p-4">
-                      <div className="w-full h-32 bg-neutral-100 rounded-lg mb-4 flex items-center justify-center">
-                        <SafetyCertificateOutlined className="text-4xl text-neutral-400" />
-                      </div>
-                      <h4 className="font-medium text-neutral-800 mb-1">{cert.title}</h4>
-                      <p className="text-sm text-neutral-600">{cert.issuer}</p>
-                      <p className="text-xs text-neutral-500 mt-2">{cert.date}</p>
-                    </div>
-                  )}
-                </For>
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      case 'activity':
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="bg-white rounded-lg p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-neutral-800 mb-4">Recent Activity</h3>
-              <div className="space-y-4">
-                <For data={activities}>
-                  {(activity) => (
-                    <div key={activity.id} className="flex items-start gap-4 p-4 border border-neutral-100 rounded-lg">
-                      <div className="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
-                        <activity.icon className="text-primary-500" />
-                      </div>
-                      <div className="flex-1">
-                        <p className="font-medium text-neutral-800">{activity.title}</p>
-                        <p className="text-sm text-neutral-500">{activity.date}</p>
-                      </div>
-                    </div>
-                  )}
-                </For>
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      case 'mentoring':
-        return (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            className="space-y-6"
-          >
-            <div className="bg-white rounded-lg p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-neutral-800 mb-4">Mentoring Statistics</h3>
-              <div className="grid gap-4 md:grid-cols-2">
-                <For data={mentoringStats}>
-                  {(stat) => (
-                    <div key={stat.label} className="p-4 border border-neutral-200 rounded-lg">
-                      <h4 className="text-2xl font-bold text-primary-500 mb-1">{stat.value}</h4>
-                      <p className="font-medium text-neutral-800 mb-1">{stat.label}</p>
-                      <p className="text-sm text-green-600">{stat.change}</p>
-                    </div>
-                  )}
-                </For>
-              </div>
-            </div>
-
-            <div className="bg-white rounded-lg p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-neutral-800 mb-4">Mentoring Feedback</h3>
-              <div className="space-y-4">
-                <div className="p-4 border border-neutral-100 rounded-lg">
-                  <div className="flex items-center gap-2 mb-2">
-                    <div className="flex text-yellow-400">
-                      <span>★★★★★</span>
-                    </div>
-                    <span className="text-sm text-neutral-600">5.0</span>
-                  </div>
-                  <p className="text-neutral-700 mb-2">
-                    "Excellent mentor! Very patient and explains concepts clearly."
-                  </p>
-                  <p className="text-sm text-neutral-500">- Riko, Junior Developer</p>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm">
-      <div className="border-b border-neutral-200">
-        <nav className="flex space-x-8 px-6 py-4 overflow-x-auto">
-          <For data={tabs}>
-            {(tab) => {
-              const Icon = tab.icon;
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id as TabType)}
-                  className={`flex items-center gap-2 px-3 py-2 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
-                    activeTab === tab.id
-                      ? 'border-primary-500 text-primary-600'
-                      : 'border-transparent text-neutral-600 hover:text-neutral-800 hover:border-neutral-300'
-                  }`}
-                >
-                  <Icon className="text-sm" />
-                  {tab.label}
-                </button>
-              );
-            }}
-          </For>
-        </nav>
-      </div>
-
-      <div className="p-6">
-        <AnimatePresence mode="wait">
-          {renderTabContent()}
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/sections/contact-info-section.tsx

@@ -1,95 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { MailOutlined, PhoneOutlined, EnvironmentOutlined } from '@ant-design/icons';
-import { PersonalInfoModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface ContactInfo {
-  email: string;
-  phone: string;
-  location: string;
-}
-
-interface ContactInfoSectionProps {
-  initialContactInfo: ContactInfo;
-  onSave: (newContactInfo: ContactInfo) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-}
-
-export const ContactInfoSection: FC<ContactInfoSectionProps> = ({
-  initialContactInfo,
-  onSave,
-  showNotification,
-  isLoading,
-}) => {
-  const [isPersonalInfoModalOpen, setIsPersonalInfoModalOpen] = useState(false);
-  const [contactInfo, setContactInfo] = useState<ContactInfo>(initialContactInfo);
-
-
-  useEffect(() => {
-    setContactInfo(initialContactInfo);
-  }, [initialContactInfo]);
-
-  const handleSave = async (newInfo: { email: string; phone: string; location: string }) => {
-
-    const newContactInfo = { email: newInfo.email, phone: newInfo.phone, location: newInfo.location };
-
-
-
-    await onSave(newContactInfo);
-  };
-
-  return (
-    <SectionWrapper
-      title="Personal Informations"
-      editButton={
-        <EditSectionButton onClick={() => setIsPersonalInfoModalOpen(true)} />
-      }
-      delay={0.1}
-    >
-      <div className="space-y-4">
-        <div className="flex items-start gap-3">
-          <div className="w-8 h-8 bg-[#23A1EB]/10 rounded-lg flex items-center justify-center mt-0.5">
-            <MailOutlined className="text-[#23A1EB] text-sm" />
-          </div>
-          <div className="flex-1">
-            <p className="text-sm font-medium text-gray-900">{contactInfo.email}</p>
-            <p className="text-sm text-gray-600">Email Address</p>
-          </div>
-        </div>
-
-        <div className="flex items-start gap-3">
-          <div className="w-8 h-8 bg-[#23A1EB]/10 rounded-lg flex items-center justify-center mt-0.5">
-            <PhoneOutlined className="text-[#23A1EB] text-sm" />
-          </div>
-          <div className="flex-1">
-            <p className="text-sm font-medium text-gray-900">{contactInfo.phone}</p>
-            <p className="text-sm text-gray-600">Phone Number</p>
-          </div>
-        </div>
-
-        <div className="flex items-start gap-3">
-          <div className="w-8 h-8 bg-[#23A1EB]/10 rounded-lg flex items-center justify-center mt-0.5">
-            <EnvironmentOutlined className="text-[#23A1EB] text-sm" />
-          </div>
-          <div className="flex-1">
-            <p className="text-sm font-medium text-gray-900">{contactInfo.location}</p>
-            <p className="text-sm text-gray-600">Location</p>
-          </div>
-        </div>
-      </div>
-
-      <PersonalInfoModal
-        isOpen={isPersonalInfoModalOpen}
-        onClose={() => setIsPersonalInfoModalOpen(false)}
-        initialValue={contactInfo}
-        onSave={handleSave}
-        isLoading={isLoading}
-      />
-    </SectionWrapper>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/sections/cv-resume-section.tsx

@@ -1,105 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { DownloadOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { CVModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-
-interface CvResumeSectionProps {
-  initialFileName: string;
-  fullname: string;
-  onSave: (cvData: { fileName: string; fileUrl?: string }) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const CvResumeSection: FC<CvResumeSectionProps> = ({
-  initialFileName,
-  fullname,
-  onSave,
-  showNotification,
-  isLoading = false,
-  isViewOnly = false, // Default to false
-}) => {
-  const [isCVModalOpen, setIsCVModalOpen] = useState(false);
-  const [fileName, setFileName] = useState(initialFileName);
-
-  
-  useEffect(() => {
-    setFileName(initialFileName);
-  }, [initialFileName]);
-
-  const handleSave = async (cvData: { fileName: string; fileUrl?: string }) => {
-    if (isViewOnly) return; // Prevent save if in view-only mode
-    await onSave(cvData);
-  };
-
-
-  let displayFileName = 'Belum ada CV';
-  let fileUrl = '';
-  if (fileName) {
-    if (fileName.startsWith('http') && fullname) {
-      displayFileName = `${fullname}.pdf`;
-      fileUrl = fileName;
-    } else {
-      displayFileName = fileName;
-
-    }
-  }
-
-  const handleDownload = () => {
-    if (fileUrl) {
-      const link = document.createElement('a');
-      link.href = fileUrl;
-      link.download = displayFileName;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }
-  };
-
-  return (
-    <SectionWrapper
-      title="CV/Resume"
-      editButton={
-        !isViewOnly ? ( // Conditionally render the edit button
-          <EditSectionButton
-            onClick={() => setIsCVModalOpen(true)}
-            disabled={isLoading}
-          />
-        ) : null
-      }
-      delay={0.3}
-    >
-      <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
-        <div className="w-10 h-10 bg-gray-300 rounded flex items-center justify-center">
-          <span className="text-gray-600 text-xs font-medium">PDF</span>
-        </div>
-        <div className="flex-1">
-          <p className="font-medium text-gray-900">{displayFileName}</p>
-        </div>
-        <Button
-          variant="primary"
-          size="sm"
-          className="flex items-center gap-2"
-          disabled={!fileUrl}
-          onClick={handleDownload}
-        >
-          <DownloadOutlined />
-          Download
-        </Button>
-      </div>
-
-      <CVModal
-        isOpen={isCVModalOpen && !isViewOnly} // Only open if not in view-only mode
-        onClose={() => setIsCVModalOpen(false)}
-        initialValue={{ fileName, fileUrl: fileName }}
-        onSave={handleSave}
-        isLoading={isLoading}
-      />
-    </SectionWrapper>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/sections/description-section.tsx

@@ -1,61 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { DescriptionModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface DescriptionSectionProps {
-  initialDescription: string;
-  onSave: (newDescription: string) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const DescriptionSection: FC<DescriptionSectionProps> = ({
-  initialDescription,
-  onSave,
-  showNotification,
-  isLoading = false,
-  isViewOnly = false, // Default to false
-}) => {
-  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState(false);
-  const [description, setDescription] = useState(initialDescription);
-
-  
-  useEffect(() => {
-    setDescription(initialDescription);
-  }, [initialDescription]);
-
-  const handleSave = async (newDescription: string) => {
-    if (isViewOnly) return; // Prevent save if in view-only mode
-    await onSave(newDescription);
-  };
-
-  return (
-    <SectionWrapper
-      title="Description"
-      editButton={
-        !isViewOnly ? ( // Conditionally render the edit button
-          <EditSectionButton
-            onClick={() => setIsDescriptionModalOpen(true)}
-            disabled={isLoading}
-          />
-        ) : null
-      }
-      delay={0.2}
-    >
-      <div className="text-gray-700 leading-relaxed whitespace-pre-wrap min-h-[150px] p-4 border border-gray-200 rounded-md bg-gray-50">
-        {description}
-      </div>
-
-      <DescriptionModal
-        isOpen={isDescriptionModalOpen && !isViewOnly} // Only open if not in view-only mode
-        onClose={() => setIsDescriptionModalOpen(false)}
-        initialValue={description}
-        onSave={handleSave}
-        isLoading={isLoading}
-      />
-    </SectionWrapper>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/sections/education-section.tsx

@@ -1,85 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { EducationModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface Education {
-  id: string;
-  institution: string;
-  degree: string;
-  field: string;
-  period: string;
-}
-
-interface EducationSectionProps {
-  initialEducation: Education[];
-  onSave: (newEducation: Education[]) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const EducationSection: FC<EducationSectionProps> = ({
-  initialEducation,
-  onSave,
-  showNotification,
-  isLoading = false,
-  isViewOnly = false, // Default to false
-}) => {
-  const [isEducationModalOpen, setIsEducationModalOpen] = useState(false);
-  const [education, setEducation] = useState<Education[]>(initialEducation);
-
-  
-  useEffect(() => {
-    setEducation(initialEducation);
-  }, [initialEducation]);
-
-  const handleSave = async (newEducation: Education[]) => {
-    if (isViewOnly) return; // Prevent save if in view-only mode
-    await onSave(newEducation);
-  };
-
-  return (
-    <SectionWrapper
-      title="Education"
-      editButton={
-        !isViewOnly ? ( // Conditionally render the edit button
-          <div className="flex gap-2">
-            <EditSectionButton
-              onClick={() => setIsEducationModalOpen(true)}
-              disabled={isLoading}
-            />
-          </div>
-        ) : null
-      }
-      delay={0.5}
-    >
-      <div className="space-y-4">
-        {education.map((edu) => (
-          <div key={edu.id} className="flex items-start gap-4 p-4 border border-gray-200 rounded-lg">
-            <div className="w-10 h-10 bg-gray-200 rounded-full flex-shrink-0"></div>
-            <div className="flex-1">
-              <h4 className="font-semibold text-gray-900">{edu.institution}</h4>
-              <p className="text-gray-700">{edu.degree}</p>
-              <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
-                <span>{edu.field}</span>
-                <span>•</span>
-                <span>{edu.period}</span>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <EducationModal
-        isOpen={isEducationModalOpen && !isViewOnly} // Only open if not in view-only mode
-        onClose={() => setIsEducationModalOpen(false)}
-        initialValue={education}
-        onSave={handleSave}
-        isLoading={isLoading}
-        showNotification={showNotification}
-      />
-    </SectionWrapper>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/sections/experiences-section.tsx

@@ -1,85 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { ExperienceModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface Experience {
-  id: string;
-  company: string;
-  position: string;
-  duration: string;
-  period: string;
-}
-
-interface ExperiencesSectionProps {
-  initialExperiences: Experience[];
-  onSave: (newExperiences: Experience[]) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const ExperiencesSection: FC<ExperiencesSectionProps> = ({
-  initialExperiences,
-  onSave,
-  showNotification,
-  isLoading = false,
-  isViewOnly = false, // Default to false
-}) => {
-  const [isExperienceModalOpen, setIsExperienceModalOpen] = useState(false);
-  const [experiences, setExperiences] = useState<Experience[]>(initialExperiences);
-
-  
-  useEffect(() => {
-    setExperiences(initialExperiences);
-  }, [initialExperiences]);
-
-  const handleSave = async (newExperiences: Experience[]) => {
-    if (isViewOnly) return; // Prevent save if in view-only mode
-    await onSave(newExperiences);
-  };
-
-  return (
-    <SectionWrapper
-      title="Experiences"
-      editButton={
-        !isViewOnly ? ( // Conditionally render the edit button
-          <div className="flex gap-2">
-            <EditSectionButton
-              onClick={() => setIsExperienceModalOpen(true)}
-              disabled={isLoading}
-            />
-          </div>
-        ) : null
-      }
-      delay={0.4}
-    >
-      <div className="space-y-4">
-        {experiences.map((exp) => (
-          <div key={exp.id} className="flex items-start gap-4 p-4 border border-gray-200 rounded-lg">
-            <div className="w-10 h-10 bg-gray-200 rounded-full flex-shrink-0"></div>
-            <div className="flex-1">
-              <h4 className="font-semibold text-gray-900">{exp.company}</h4>
-              <p className="text-gray-700">{exp.position}</p>
-              <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
-                <span>{exp.duration}</span>
-                <span>•</span>
-                <span>{exp.period}</span>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <ExperienceModal
-        isOpen={isExperienceModalOpen && !isViewOnly} // Only open if not in view-only mode
-        onClose={() => setIsExperienceModalOpen(false)}
-        initialValue={experiences}
-        onSave={handleSave}
-        isLoading={isLoading}
-        showNotification={showNotification}
-      />
-    </SectionWrapper>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/sections/index.ts

@@ -1,8 +0,0 @@
-export { SocialMediaSection } from './social-media-section';
-export { DescriptionSection } from './description-section';
-export { CvResumeSection } from './cv-resume-section';
-export { ExperiencesSection } from './experiences-section';
-export { EducationSection } from './education-section';
-export { PersonalInfoSection } from './personal-info-section';
-export { SkillsSection } from './skills-section';
-export { LanguagesSection } from './languages-section';

apps/dimentorin/src/app/(public)/profile/_components/sections/languages-section.tsx

@@ -1,72 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { LanguagesModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface Language {
-  name: string;
-  level: string;
-}
-
-interface LanguagesSectionProps {
-  initialLanguages: Language[];
-  onSave: (newLanguages: Language[]) => void;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-}
-
-export const LanguagesSection: FC<LanguagesSectionProps> = ({
-  initialLanguages,
-  onSave,
-  showNotification,
-  isLoading = false,
-}) => {
-  const [isLanguagesModalOpen, setIsLanguagesModalOpen] = useState(false);
-  const [languages, setLanguages] = useState<Language[]>(initialLanguages);
-
-
-  useEffect(() => {
-    setLanguages(initialLanguages);
-  }, [initialLanguages]);
-
-  const handleSave = (newLanguages: Language[]) => {
-
-
-    onSave(newLanguages);
-  };
-
-  return (
-    <SectionWrapper
-      title="Languages"
-      editButton={
-        <EditSectionButton
-          onClick={() => setIsLanguagesModalOpen(true)}
-          disabled={isLoading}
-        />
-      }
-      delay={0.4}
-    >
-      <div className="space-y-3">
-        {languages.map((language) => (
-          <div key={language.name} className="flex justify-between items-center">
-            <span className="text-sm font-medium text-neutral-800">{language.name}</span>
-            <span className="text-xs text-neutral-600 bg-neutral-100 px-2 py-1 rounded">
-              {language.level}
-            </span>
-          </div>
-        ))}
-      </div>
-
-      <LanguagesModal
-        isOpen={isLanguagesModalOpen}
-        onClose={() => setIsLanguagesModalOpen(false)}
-        initialValue={languages}
-        onSave={handleSave}
-        isLoading={isLoading}
-      />
-    </SectionWrapper>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/sections/personal-info-section.tsx

@@ -1,98 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { MailOutlined, PhoneOutlined, EnvironmentOutlined } from '@ant-design/icons';
-import { PersonalInfoModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface PersonalInfo {
-  email: string;
-  phone: string;
-  location: string;
-}
-
-interface PersonalInfoSectionProps {
-  initialContactInfo: PersonalInfo;
-  onSave: (newContactInfo: PersonalInfo) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const PersonalInfoSection: FC<PersonalInfoSectionProps> = ({
-  initialContactInfo,
-  onSave,
-  showNotification,
-  isLoading = false,
-  isViewOnly = false, // Default to false
-}) => {
-  const [isPersonalInfoModalOpen, setIsPersonalInfoModalOpen] = useState(false);
-  const [personalInfo, setPersonalInfo] = useState<PersonalInfo>(initialContactInfo);
-
-
-  useEffect(() => {
-    setPersonalInfo(initialContactInfo);
-  }, [initialContactInfo]);
-
-  const handleSave = async (newInfo: { email: string; phone: string; location: string }) => {
-    if (isViewOnly) return; // Prevent save if in view-only mode
-    const newPersonalInfo = { email: newInfo.email, phone: newInfo.phone, location: newInfo.location };
-
-    await onSave(newPersonalInfo);
-  };
-
-  return (
-    <SectionWrapper
-      title="Personal Informations"
-      editButton={
-        !isViewOnly ? ( // Conditionally render the edit button
-          <EditSectionButton
-            onClick={() => setIsPersonalInfoModalOpen(true)}
-            disabled={isLoading}
-          />
-        ) : null
-      }
-      delay={0.1}
-    >
-      <div className="space-y-4">
-        <div className="flex items-start gap-3">
-          <div className="w-8 h-8 bg-[#23A1EB]/10 rounded-lg flex items-center justify-center mt-0.5">
-            <MailOutlined className="text-[#23A1EB] text-sm" />
-          </div>
-          <div className="flex-1">
-            <p className="text-sm font-medium text-gray-900">{personalInfo.email}</p>
-            <p className="text-sm text-gray-600">Email Address</p>
-          </div>
-        </div>
-
-        <div className="flex items-start gap-3">
-          <div className="w-8 h-8 bg-[#23A1EB]/10 rounded-lg flex items-center justify-center mt-0.5">
-            <PhoneOutlined className="text-[#23A1EB] text-sm" />
-          </div>
-          <div className="flex-1">
-            <p className="text-sm font-medium text-gray-900">{personalInfo.phone}</p>
-            <p className="text-sm text-gray-600">Phone Number</p>
-          </div>
-        </div>
-
-        <div className="flex items-start gap-3">
-          <div className="w-8 h-8 bg-[#23A1EB]/10 rounded-lg flex items-center justify-center mt-0.5">
-            <EnvironmentOutlined className="text-[#23A1EB] text-sm" />
-          </div>
-          <div className="flex-1">
-            <p className="text-sm font-medium text-gray-900">{personalInfo.location}</p>
-            <p className="text-sm text-gray-600">Location</p>
-          </div>
-        </div>
-      </div>
-
-      <PersonalInfoModal
-        isOpen={isPersonalInfoModalOpen && !isViewOnly} // Only open if not in view-only mode
-        onClose={() => setIsPersonalInfoModalOpen(false)}
-        initialValue={personalInfo}
-        onSave={handleSave}
-        isLoading={isLoading}
-      />
-    </SectionWrapper>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/sections/skills-section.tsx

@@ -1,75 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { SkillsModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface Skill {
-  id: string;
-  name: string;
-}
-
-interface SkillsSectionProps {
-  initialSkills: string[];
-  onSave: (newSkills: string[]) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-  isViewOnly?: boolean; // Add isViewOnly prop
-}
-
-export const SkillsSection: FC<SkillsSectionProps> = ({
-  initialSkills,
-  onSave,
-  showNotification,
-  isLoading = false,
-  isViewOnly = false, // Default to false
-}) => {
-  const [isSkillsModalOpen, setIsSkillsModalOpen] = useState(false);
-  const [skills, setSkills] = useState<string[]>(initialSkills);
-
-
-  useEffect(() => {
-    setSkills(initialSkills);
-  }, [initialSkills]);
-
-  const handleSave = async (newSkills: Skill[]) => {
-    if (isViewOnly) return; // Prevent save if in view-only mode
-    const stringSkills = newSkills.map(skill => skill.name);
-
-    await onSave(stringSkills);
-  };
-
-  return (
-    <SectionWrapper
-      title="Skills"
-      editButton={
-        !isViewOnly ? ( // Conditionally render the edit button
-          <EditSectionButton
-            onClick={() => setIsSkillsModalOpen(true)}
-            disabled={isLoading}
-          />
-        ) : null
-      }
-      delay={0.3}
-    >
-      <div className="flex flex-wrap gap-2">
-        {skills.map((skill) => (
-          <span
-            key={skill}
-            className="inline-block px-3 py-1 bg-[#23A1EB]/10 text-[#23A1EB] text-sm rounded-md border border-[#23A1EB]/20"
-          >
-            {skill}
-          </span>
-        ))}
-      </div>
-
-      <SkillsModal
-        isOpen={isSkillsModalOpen && !isViewOnly} // Only open if not in view-only mode
-        onClose={() => setIsSkillsModalOpen(false)}
-        initialValue={skills.map(skill => ({ id: skill, name: skill }))}
-        onSave={handleSave}
-        isLoading={isLoading}
-      />
-    </SectionWrapper>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/sections/social-media-section.tsx

@@ -1,69 +0,0 @@
-import { FC, useState, useEffect } from 'react';
-import { SocialMediaModal } from '../modals';
-import { SectionWrapper } from '../shared/section-wrapper';
-import { NotificationType } from '../modals/notification-modal';
-import { EditSectionButton } from '../buttons/edit-section-button';
-
-interface SocialLink {
-  platform: string;
-  placeholder: string;
-  value: string;
-}
-
-interface SocialMediaSectionProps {
-  initialSocialLinks: SocialLink[];
-  onSave: (newSocialLinks: SocialLink[]) => Promise<void>;
-  showNotification: (type: NotificationType['type'], title: string, message?: string) => void;
-  isLoading?: boolean;
-}
-
-export const SocialMediaSection: FC<SocialMediaSectionProps> = ({
-  initialSocialLinks,
-  onSave,
-  showNotification,
-  isLoading,
-}) => {
-  const [isSocialMediaModalOpen, setIsSocialMediaModalOpen] = useState(false);
-  const [socialLinks, setSocialLinks] = useState<SocialLink[]>(initialSocialLinks);
-
-
-  useEffect(() => {
-    setSocialLinks(initialSocialLinks);
-  }, [initialSocialLinks]);
-
-  const handleSave = async (newSocialLinks: SocialLink[]) => {
-
-    await onSave(newSocialLinks);
-  };
-
-  return (
-    <SectionWrapper
-      title="Social Media"
-      editButton={
-        <EditSectionButton onClick={() => setIsSocialMediaModalOpen(true)} />
-      }
-      delay={0.1}
-    >
-      <div className="grid grid-cols-2 gap-4">
-        {socialLinks.map((link) => (
-          <div key={link.platform} className="border border-gray-200 rounded-md p-4 bg-gray-50">
-            <div className="text-sm font-medium text-gray-700 mb-2">{link.platform}</div>
-            <div className="text-gray-900 text-sm">
-              {link.value || <span className="text-gray-400 italic">{link.placeholder}</span>}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <SocialMediaModal
-        isOpen={isSocialMediaModalOpen}
-        onClose={() => setIsSocialMediaModalOpen(false)}
-        initialValue={socialLinks}
-        onSave={handleSave}
-        isLoading={isLoading}
-      />
-    </SectionWrapper>
-  );
-};
-
-

apps/dimentorin/src/app/(public)/profile/_components/shared/file-uploader.tsx

@@ -1,183 +0,0 @@
-import { FC, useRef, useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { UploadOutlined, LoadingOutlined } from '@ant-design/icons';
-
-interface FileUploaderProps {
-  accept?: string;
-  maxSize?: number;
-  onFileSelect?: (file: File) => void;
-  isLoading?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-  dragAndDrop?: boolean;
-  buttonText?: string;
-  description?: string;
-}
-
-export const FileUploader: FC<FileUploaderProps> = ({
-  accept = "*/*",
-  maxSize = 10 * 1024 * 1024,
-  onFileSelect,
-  isLoading = false,
-  className = "",
-  children,
-  dragAndDrop = false,
-  buttonText = "Choose File",
-  description = "Click to select a file"
-}) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const validateFile = (file: File): string | null => {
-    if (file.size > maxSize) {
-      return `File size must be less than ${Math.round(maxSize / (1024 * 1024))}MB`;
-    }
-
-    if (accept !== "*/*" && !accept.split(',').some(type => {
-      const trimmedType = type.trim();
-      if (trimmedType.startsWith('.')) {
-        return file.name.toLowerCase().endsWith(trimmedType.toLowerCase());
-      }
-      return new RegExp(trimmedType.replace('*', '.*')).exec(file.type);
-    })) {
-      return `File type not supported. Accepted types: ${accept}`;
-    }
-
-    return null;
-  };
-
-  const handleFileSelect = (file: File) => {
-    const error = validateFile(file);
-    if (error) {
-
-      return;
-    }
-
-    onFileSelect?.(file);
-  };
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      handleFileSelect(file);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-
-    const file = e.dataTransfer.files[0];
-    if (file) {
-      handleFileSelect(file);
-    }
-  };
-
-  const triggerFileSelect = () => {
-    if (!isLoading) {
-      fileInputRef.current?.click();
-    }
-  };
-
-  if (children) {
-    return (
-      <div className={`relative ${className}`}>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept={accept}
-          onChange={handleInputChange}
-          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
-          disabled={isLoading}
-          title="Select file to upload"
-        />
-        {children}
-      </div>
-    );
-  }
-
-  if (dragAndDrop) {
-    return (
-      <div className={className}>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept={accept}
-          onChange={handleInputChange}
-          className="hidden"
-          disabled={isLoading}
-        />
-        <button
-          type="button"
-          className={`w-full border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
-            isDragging
-              ? 'border-blue-500 bg-blue-50'
-              : 'border-gray-300 hover:border-blue-400 hover:bg-gray-50'
-          } ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          onClick={triggerFileSelect}
-          disabled={isLoading}
-          aria-label="Upload file by clicking or drag and drop"
-        >
-          {isLoading ? (
-            <div className="flex flex-col items-center">
-              <LoadingOutlined className="text-2xl text-blue-500 mb-2" />
-              <p className="text-sm text-gray-600">Uploading...</p>
-            </div>
-          ) : (
-            <>
-              <UploadOutlined className="text-2xl text-gray-400 mb-2" />
-              <p className="text-sm text-gray-600 mb-1">{description}</p>
-              <p className="text-xs text-gray-500">
-                {accept === "*/*" ? "Any file type" : accept} • Max {Math.round(maxSize / (1024 * 1024))}MB
-              </p>
-            </>
-          )}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className={className}>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={accept}
-        onChange={handleInputChange}
-        className="hidden"
-        disabled={isLoading}
-      />
-      <Button
-        variant="secondary"
-        onClick={triggerFileSelect}
-        disabled={isLoading}
-        className="w-full"
-      >
-        {isLoading ? (
-          <>
-            <LoadingOutlined className="mr-2" />
-            Uploading...
-          </>
-        ) : (
-          <>
-            <UploadOutlined className="mr-2" />
-            {buttonText}
-          </>
-        )}
-      </Button>
-    </div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/_components/shared/index.ts

@@ -1 +0,0 @@
-export { SectionWrapper } from './section-wrapper';

apps/dimentorin/src/app/(public)/profile/_components/shared/section-wrapper.tsx

@@ -1,26 +0,0 @@
-import { FC, ReactElement, ReactNode } from 'react';
-import { motion } from 'framer-motion';
-
-interface SectionWrapperProps {
-  title: string;
-  editButton?: ReactElement;
-  children: ReactNode;
-  delay?: number;
-}
-
-export const SectionWrapper: FC<SectionWrapperProps> = ({ title, editButton, children, delay = 0 }): ReactElement => {
-  return (
-    <motion.div
-      className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow duration-300"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3, delay }}
-    >
-      <div className="flex items-center justify-between mb-6">
-        <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
-        {editButton}
-      </div>
-      {children}
-    </motion.div>
-  );
-};

apps/dimentorin/src/app/(public)/profile/page.tsx

@@ -1,132 +0,0 @@
-'use client';
-
-import { FC, ReactElement, useState } from 'react';
-import { ProfileForm, ProfileSidebar, ProfileHeader } from './_components';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { NotificationModal, NotificationType } from './_components/modals/notification-modal';
-import { ProfileProvider, useProfile } from './_components/contexts/profile-context';
-import { EditProfileModal } from './_components/modals/edit-profile-modal';
-
-export const Components: FC = (): ReactElement => {
-  return (
-    <ProfileProvider profileType="user">
-      <ProfileContent />
-    </ProfileProvider>
-  );
-};
-
-const ProfileContent: FC = (): ReactElement => {
-  const { isLoading, error } = useProfile();
-
-  const [notification, setNotification] = useState<{
-    isOpen: boolean;
-    type: 'success' | 'error';
-    title: string;
-    message?: string;
-  }>({
-    isOpen: false,
-    type: 'success',
-    title: '',
-    message: ''
-  });
-
-  const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false);
-
-  const showNotification = (type: NotificationType['type'], title: string, message?: string) => {
-    setNotification({
-      isOpen: true,
-      type,
-      title,
-      message
-    });
-  };
-
-  const hideNotification = () => {
-    setNotification(prev => ({ ...prev, isOpen: false }));
-  };
-
-  const openEditProfileModal = () => {
-    setIsEditProfileModalOpen(true);
-  };
-
-  const closeEditProfileModal = () => {
-    setIsEditProfileModalOpen(false);
-  };
-
-  if (isLoading) {
-    return (
-      <main className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Loading profile...</p>
-        </div>
-      </main>
-    );
-  }
-
-  if (error) {
-    return (
-      <main className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-red-600 text-lg">Failed to load profile</p>
-          <p className="text-gray-600 mt-2">Please try again later.</p>
-        </div>
-      </main>
-    );
-  }
-
-  return (
-    <main className="min-h-screen">
-      <div className="">
-        <div className="w-full px-8 md:px-[60px] lg:px-20 py-4">
-          <div className="max-w-7xl mx-auto">
-            <Button variant="primary" className="flex items-center gap-2">
-              <ArrowLeftOutlined />
-              Kembali ke Dashboard
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="w-full px-8 md:px-[60px] lg:px-20 py-6">
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-2xl font-semibold text-gray-900">Your Profile</h1>
-        </div>
-      </div>
-
-      <div className="w-full px-8 md:px-[60px] lg:px-20 pb-12">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid gap-8 lg:grid-cols-12">
-            <div className="lg:col-span-12">
-              <ProfileHeader onEditProfileClick={openEditProfileModal} />
-            </div>
-            <div className="lg:col-span-8 order-1">
-              <ProfileForm showNotification={showNotification} />
-            </div>
-
-            <div className="lg:col-span-4 order-2">
-              <ProfileSidebar showNotification={showNotification} />
-            </div>
-          </div>
-        </div>
-      </div>
-      <NotificationModal
-        isOpen={notification.isOpen}
-        onClose={hideNotification}
-        type={notification.type}
-        title={notification.title}
-        message={notification.message}
-        header="Profile"
-      />
-      {}
-      <EditProfileModal
-        isOpen={isEditProfileModalOpen}
-        onClose={closeEditProfileModal}
-        showNotification={showNotification}
-      />
-    </main>
-  );
-};
-
-export default Components;

apps/dimentorin/src/app/_hooks/use-google-login.ts

@@ -1,139 +0,0 @@
-import { useCallback } from 'react';
-import { toast } from 'sonner';
-import { useNavigate } from 'react-router-dom';
-import { useAuthStore } from '@imphnen-frontend-service/service';
-
-export interface GoogleLoginResponse {
-  access_token?: string;
-  token?: string | {
-    access_token: string;
-    refresh_token: string;
-  };
-  accessToken?: string;
-  refresh_token?: string;
-  refreshToken?: string;
-  user?: {
-    id: string;
-    email: string;
-    fullname: string;
-    avatar: string;
-    birthdate?: string;
-    gender?: string;
-    is_active?: boolean;
-    phone_number?: string;
-    role?: {
-      id: string;
-      name: string;
-      created_at: string;
-      updated_at: string;
-      permissions: Array<{
-        id: string;
-        name: string;
-        created_at: string;
-        updated_at: string;
-      }>;
-    };
-    [key: string]: unknown;
-  };
-}
-
-export const useGoogleLogin = () => {
-  const navigate = useNavigate();
-  const { setSession } = useAuthStore();
-
-  const handleGoogleLogin = useCallback(async () => {
-    try {
-      const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:4099';
-      const callbackUrl = `${window.location.origin}/auth/google-oauth-popup`;
-
-      let authUrl;
-      if (baseUrl.endsWith('/v1')) {
-        authUrl = `${baseUrl}/auth/google/login?redirect_uri=${encodeURIComponent(callbackUrl)}`;
-      } else {
-        authUrl = `${baseUrl}/v1/auth/google/login?redirect_uri=${encodeURIComponent(callbackUrl)}`;
-      }
-
-      const popup = window.open(
-        authUrl,
-        'google-oauth',
-        'width=500,height=600,scrollbars=yes,resizable=yes'
-      );
-
-      if (!popup) {
-        toast.error('Popup diblokir. Silakan aktifkan popup untuk situs ini.');
-        return;
-      }
-
-      const handleMessage = (event: MessageEvent) => {
-        if (event.origin !== window.location.origin) {
-          return;
-        }
-
-        if (event.data.type === 'GOOGLE_OAUTH_SUCCESS') {
-          const { payload } = event.data as { payload: GoogleLoginResponse };
-
-          const tokenObj = typeof payload.token === 'object' ? payload.token : null;
-          const accessToken = tokenObj?.access_token || payload.access_token;
-          const refreshToken = tokenObj?.refresh_token || payload.refresh_token;
-          const user = payload.user;
-
-          if (accessToken && refreshToken && user && typeof accessToken === 'string' && typeof refreshToken === 'string') {
-            // Convert Google user data to match TUserItem structure
-            const convertedUser = {
-              id: user.id,
-              avatar: user.avatar || '',
-              birthdate: user.birthdate || '',
-              email: user.email,
-              fullname: user.fullname,
-              gender: user.gender || '',
-              is_active: user.is_active ?? true,
-              phone_number: user.phone_number || '',
-              role: user.role || {
-                id: '',
-                name: 'User',
-                created_at: '',
-                updated_at: '',
-                permissions: []
-              }
-            };
-
-            // Use setSession like credential login does
-            setSession({
-              token: {
-                access_token: accessToken,
-                refresh_token: refreshToken,
-              },
-              user: convertedUser,
-            });
-
-            toast.success('Login berhasil!');
-            navigate(0); // Same as credential login
-          } else {
-            toast.error('Data login tidak lengkap');
-          }
-
-          window.removeEventListener('message', handleMessage);
-        } else if (event.data.type === 'GOOGLE_OAUTH_ERROR') {
-          const { error } = event.data;
-          toast.error(`Login gagal: ${error}`);
-          window.removeEventListener('message', handleMessage);
-        }
-      };
-
-      window.addEventListener('message', handleMessage);
-
-      setTimeout(() => {
-        window.removeEventListener('message', handleMessage);
-        toast.error('Login timeout. Silakan coba lagi.');
-      }, 300000);
-
-    } catch (error) {
-      console.error('Google login error:', error);
-      toast.error('Terjadi kesalahan saat login dengan Google');
-    }
-  }, [navigate, setSession]);
-
-  return {
-    handleGoogleLogin,
-  };
-};

apps/dimentorin/src/app/auth/google-callback/page.tsx

@@ -1,80 +0,0 @@
-import { FC, ReactElement, useEffect } from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-import { useGoogleCallback, useAuthStore } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-export const GoogleCallbackPage: FC = (): ReactElement => {
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const { setSession, clearSession } = useAuthStore();
-  const { mutate: googleCallback } = useGoogleCallback();
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      const code = searchParams.get('code');
-      const state = searchParams.get('state');
-      const error = searchParams.get('error');
-
-      if (error) {
-        toast.error('Google login dibatalkan atau terjadi kesalahan');
-        navigate('/auth/login');
-        return;
-      }
-
-      if (!code || !state) {
-        toast.error('Parameter login Google tidak valid');
-        navigate('/auth/login');
-        return;
-      }
-
-      try {
-        googleCallback(
-          { code, state },
-          {
-            onSuccess: (response) => {
-              if (response.token && response.user) {
-                setSession({
-                  token: response.token,
-                  user: response.user,
-                });
-                toast.success('Login Google berhasil!');
-                navigate('/dashboard');
-              } else {
-                throw new Error('Response data tidak valid');
-              }
-            },
-            onError: (error) => {
-              console.error('Google OAuth callback error:', error);
-              toast.error('Login Google gagal');
-              clearSession();
-              navigate('/auth/login');
-            },
-          }
-        );
-      } catch (error) {
-        console.error('Google OAuth callback error:', error);
-        toast.error('Login Google gagal');
-        clearSession();
-        navigate('/auth/login');
-      }
-    };
-
-    handleCallback();
-  }, [searchParams, navigate, setSession, clearSession, googleCallback]);
-
-  return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary-500 mx-auto mb-4"></div>
-        <h2 className="text-2xl font-semibold text-primary-500 mb-2">
-          Menyelesaikan Login Google...
-        </h2>
-        <p className="text-gray-600">
-          Mohon tunggu sebentar, kami sedang memproses login Anda.
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default GoogleCallbackPage;

apps/dimentorin/src/app/auth/google-oauth-popup/page.tsx

@@ -1,201 +0,0 @@
-import { FC, ReactElement, useEffect } from 'react';
-
-let globalIsProcessed = false;
-
-export const GoogleOAuthPopupPage: FC = (): ReactElement => {
-
-  useEffect(() => {
-    if (globalIsProcessed) {
-      return;
-    }
-
-    const callBackend = async (code: string, state: string) => {
-      if (globalIsProcessed) {
-        return;
-      }
-
-      globalIsProcessed = true;
-
-      try {
-        const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:4099';
-        let callbackUrl;
-
-        if (baseUrl.endsWith('/v1')) {
-          callbackUrl = `${baseUrl}/auth/google/callback`;
-        } else {
-          callbackUrl = `${baseUrl}/v1/auth/google/callback`;
-        }
-
-        const url = new URL(callbackUrl);
-        url.searchParams.append('code', code);
-        url.searchParams.append('state', state);
-        url.searchParams.append('redirect_uri', `${window.location.origin}/auth/google-oauth-popup`);
-
-        const response = await fetch(url.toString(), {
-          method: 'GET',
-          headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-          },
-          mode: 'cors',
-          credentials: 'omit',
-        });
-
-        if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error(`HTTP ${response.status}: ${response.statusText} - ${errorText}`);
-        }
-
-        const data = await response.json();
-
-        window.opener?.postMessage(
-          {
-            type: 'GOOGLE_OAUTH_SUCCESS',
-            payload: data,
-          },
-          window.location.origin
-        );
-        window.close();
-
-      } catch (error) {
-        globalIsProcessed = false;
-
-        window.opener?.postMessage(
-          {
-            type: 'GOOGLE_OAUTH_ERROR',
-            error: `Failed to process OAuth callback: ${error instanceof Error ? error.message : String(error)}`,
-          },
-          window.location.origin
-        );
-        window.close();
-      }
-    };
-
-    const handleOAuthResponse = () => {
-      const isPopup = window.opener && window.opener !== window;
-
-      const detectJsonResponse = () => {
-        try {
-          const bodyText = document.body.innerText || document.body.textContent || '';
-          const trimmedText = bodyText.trim();
-
-          if (trimmedText.startsWith('{') && trimmedText.endsWith('}')) {
-            const parsedJson = JSON.parse(trimmedText);
-
-            if (parsedJson && typeof parsedJson === 'object') {
-              const hasAccessToken = parsedJson.access_token || parsedJson.token || parsedJson.accessToken;
-
-              if (hasAccessToken) {
-                return parsedJson;
-              }
-            }
-          }
-        } catch {
-          return null;
-        }
-        return null;
-      };
-
-      const checkOAuthParams = () => {
-        const urlParams = new URLSearchParams(window.location.search);
-        const code = urlParams.get('code');
-        const state = urlParams.get('state');
-        const error = urlParams.get('error');
-
-        if (error) {
-          if (isPopup) {
-            window.opener?.postMessage(
-              {
-                type: 'GOOGLE_OAUTH_ERROR',
-                error: error,
-              },
-              window.location.origin
-            );
-            window.close();
-          }
-          return true;
-        }
-
-        if (code && state) {
-          if (isPopup) {
-            callBackend(code, state);
-          }
-          return true;
-        }
-
-        return false;
-      };
-
-      const immediateJson = detectJsonResponse();
-      if (immediateJson && isPopup) {
-        window.opener?.postMessage(
-          {
-            type: 'GOOGLE_OAUTH_SUCCESS',
-            payload: immediateJson,
-          },
-          window.location.origin
-        );
-        window.close();
-        return;
-      }
-
-      if (checkOAuthParams()) {
-        return;
-      }
-
-      let attempts = 0;
-      const maxAttempts = 50;
-
-      const checkForJson = () => {
-        attempts++;
-        const jsonResponse = detectJsonResponse();
-
-        if (jsonResponse && isPopup) {
-          window.opener?.postMessage(
-            {
-              type: 'GOOGLE_OAUTH_SUCCESS',
-              payload: jsonResponse,
-            },
-            window.location.origin
-          );
-          window.close();
-          return;
-        }
-
-        if (attempts < maxAttempts) {
-          setTimeout(checkForJson, 500);
-        } else if (isPopup) {
-          window.opener?.postMessage(
-            {
-              type: 'GOOGLE_OAUTH_ERROR',
-              error: 'Timeout waiting for response',
-            },
-            window.location.origin
-          );
-          window.close();
-        }
-      };
-
-      setTimeout(checkForJson, 1000);
-    };
-
-    // Small delay to ensure DOM is ready
-    setTimeout(handleOAuthResponse, 100);
-  }, []);
-
-  return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="text-center">
-        <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-primary-500 mx-auto mb-4"></div>
-        <h2 className="text-lg font-semibold text-primary-500 mb-2">
-          Memproses Login Google...
-        </h2>
-        <p className="text-gray-600 text-sm">
-          Jangan tutup jendela ini.
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default GoogleOAuthPopupPage;

apps/dimentorin/src/app/auth/login/page.tsx

@@ -2,12 +2,10 @@ import { FC, ReactElement } from 'react';
 import { ControlledInputField, LoginBanner } from '@imphnen-frontend-service/ui/organisms';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useLogin } from '../../_hooks/use-login';
-import { useGoogleLogin } from '../../_hooks/use-google-login';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
   const { form, onSubmit, isLoading } = useLogin();
-  const { handleGoogleLogin } = useGoogleLogin();
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -27,8 +25,8 @@ export const Components: FC = (): ReactElement => {
                 label="Email"
                 size="lg"
                 className="w-full mb-2"
-                placeholder="Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
+                placeholder="Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)" 
-                name={'email'}
+                name={'email'}            
               />
               <ControlledInputField
                 control={form.control}
@@ -46,7 +44,7 @@ export const Components: FC = (): ReactElement => {
               </div>
               <Button className="w-full" type='submit' disabled={(!form.formState.isValid || isLoading)}>Enter Isekai</Button>
             </form>
-
+            
             <div className="flex my-3 gap-3 justify-center">
               <h5>Belum Punya akun ?</h5>
               <a href="/auth/register" className="text-primary-500 font-medium">
@@ -66,7 +64,6 @@ export const Components: FC = (): ReactElement => {
             <Button
               className="w-full my-3 text-gray-500 gap-2"
               variant="secondary"
-              onClick={handleGoogleLogin}
             >
               <p>Log In With Google</p>
               <img

apps/dimentorin/src/middleware.ts

@@ -10,17 +10,17 @@ const mappingPublicRoutes = [
   '/auth/login',
   '/auth/forgot',
   '/auth/forgot/otp',
-  '/auth/register',
+  '/auth/register', 
   '/auth/register/otp',
   '/auth/register/success',
   '/auth/new-password',
   '/auth/register-mentor',
   '/auth/register-mentor/pending',
   '/auth/register-mentor/success',
-  '/auth/google-callback',
-  '/auth/google-oauth-popup',
   '/resources',
-];const mappingRoutePermissions = [
+];
+
+const mappingRoutePermissions = [
   {
     path: '/dashboard',
     permissions: [],
@@ -96,7 +96,7 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const token = session_token?.token?.access_token;
   const userPermissions =
     session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-
+  
   // Allow to access the landing page without authentication
   // So, if the route prefix is in the mappingPublicPrefixRoutes, we return null
   // to indicate that we don't need to authenticate the user

apps/gacha/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025  4:21:27 PM

apps/gacha/.deploy-trigger

@@ -1,2 +0,0 @@
-# Deployment trigger
-# Updated to deploy circular dependency fixes and auth hooks

apps/gacha/src/app/_hooks/use-login.ts

@@ -3,9 +3,9 @@ import {
   authLoginSchema,
   TLoginRequest,
   usePostLogin,
-  useAuthStore,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
 import { toast } from 'sonner';
 import { useNavigate } from 'react-router';
 import { useVerifyEmail } from './use-verify-email';

apps/hackathon/.deploy

@@ -1 +0,0 @@
-Tue, Nov 25, 2025  16:42:27 PM

apps/hackathon/eslint.config.mjs

@@ -1,14 +0,0 @@
-import nx from '@nx/eslint-plugin';
-import baseConfig from '../../eslint.config.mjs';
-
-export default [
-  ...baseConfig,
-  ...nx.configs['flat/react'],
-  {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-    // Override or add rules here
-    rules: {
-      'jsx-a11y/accessible-emoji': 'off',
-    },
-  },
-];

apps/hackathon/index.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>IMPHNEN x Kolosal.ai Hackathon 2025</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Ikuti IMPHNEN x Kolosal.ai Hackathon 2025! Kompetisi coding online gratis dengan total hadiah Rp14.500.000. Tema: Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif."
-    />
-    <meta
-      name="keywords"
-      content="hackathon, lomba coding, kompetisi it, imphnen, kolosal.ai, ai hackathon, lomba programming 2025"
-    />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="/images/imphnen-logo-simple.svg"
-    />
-    <link rel="stylesheet" href="/src/index.css" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://hackathon.imphnen.dev/" />
-    <meta property="og:title" content="IMPHNEN x Kolosal.ai Hackathon 2025" />
-    <meta
-      property="og:description"
-      content="Total hadiah Rp14.500.000! Daftar sekarang dan wujudkan inovasi AI-mu untuk membantu usaha lokal."
-    />
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://hackathon.imphnen.dev/" />
-    <meta
-      property="twitter:title"
-      content="IMPHNEN x Kolosal.ai Hackathon 2025"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

apps/hackathon/postcss.config.mjs

@@ -1,9 +0,0 @@
-import { join } from 'path';
-
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {
-      base: join(import.meta.dirname, '../../'),
-    },
-  },
-};

apps/hackathon/project.json

@@ -1 +0,0 @@
-{}

apps/hackathon/public/images/sponsors/kolosal-logo_rlxbck.svg

@@ -1,10 +0,0 @@
-<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9814 11.6032C15.0691 11.7133 15.1239 11.8495 15.124 12C15.124 12.1501 15.0698 12.2867 14.9825 12.3968L26.8264 24H7.79044L7.76667 23.9757L0.0248413 16.3911L0 16.3679V7.63213L0.0248413 7.60885L7.76667 0.0243365L7.79044 0H26.8264L14.9814 11.6032ZM14.8659 12.5111C14.7535 12.5968 14.6143 12.6507 14.4609 12.6507C14.3071 12.6507 14.1673 12.5971 14.0548 12.5111L10.3977 16.0938C10.5164 16.2113 10.5899 16.3726 10.5899 16.5509C10.5899 16.6459 10.5668 16.7352 10.5295 16.8165L17.6956 23.8371H25.8608C25.8683 23.78 25.8804 23.7233 25.903 23.6699C25.9358 23.5923 25.9831 23.5211 26.0434 23.4614L14.8659 12.5111ZM10.3307 8.06807C10.2184 8.15365 10.0801 8.20766 9.92678 8.20774C9.80008 8.20774 9.68295 8.17075 9.58225 8.1104L5.61305 12L9.65353 15.9584C9.73677 15.9215 9.82951 15.9012 9.92678 15.9012C10.0509 15.9013 10.1655 15.9372 10.2648 15.9954L13.9381 12.3968C13.8511 12.2868 13.7977 12.1499 13.7977 12C13.7978 11.8498 13.8518 11.7132 13.9392 11.6032L10.3307 8.06807ZM10.4906 7.22053C10.5522 7.3192 10.5899 7.4339 10.5899 7.55806C10.5899 7.70823 10.5357 7.84479 10.4485 7.95485L14.0558 11.4889C14.1682 11.4034 14.3076 11.3503 14.4609 11.3503C14.6139 11.3503 14.7536 11.4026 14.8659 11.4879L26.0434 0.537519C25.9835 0.477938 25.9356 0.407383 25.903 0.33013C25.8804 0.276608 25.8682 0.220166 25.8608 0.162949H17.6956L10.4906 7.22053Z" fill="#0D0E0F"/>
-<path d="M82 5.69697V17.3333H80.291V5.69697H82Z" fill="#0D0E0F"/>
-<path d="M73.9503 17.5265C73.3939 17.5265 72.8909 17.4242 72.4413 17.2197C71.9916 17.0114 71.6353 16.7102 71.3724 16.3163C71.1133 15.9223 70.9837 15.4394 70.9837 14.8674C70.9837 14.375 71.079 13.9697 71.2695 13.6515C71.4601 13.3333 71.7173 13.0814 72.0412 12.8958C72.3651 12.7102 72.7271 12.5701 73.1272 12.4754C73.5273 12.3807 73.935 12.3087 74.3504 12.2595C74.8762 12.1989 75.303 12.1496 75.6307 12.1117C75.9584 12.0701 76.1966 12.0038 76.3452 11.9129C76.4938 11.822 76.5681 11.6742 76.5681 11.4697V11.4299C76.5681 10.9337 76.4271 10.5492 76.1452 10.2765C75.867 10.0038 75.4516 9.86742 74.8991 9.86742C74.3237 9.86742 73.8702 9.99432 73.5387 10.2481C73.211 10.4981 72.9843 10.7765 72.8585 11.0833L71.2524 10.7197C71.4429 10.1894 71.7211 9.76136 72.0869 9.4356C72.4565 9.10606 72.8814 8.86742 73.3615 8.71969C73.8417 8.56818 74.3466 8.49242 74.8762 8.49242C75.2268 8.49242 75.5983 8.53409 75.9908 8.61742C76.3871 8.69697 76.7568 8.84469 77.0997 9.0606C77.4465 9.27651 77.7304 9.58523 77.9514 9.98674C78.1724 10.3845 78.2829 10.9015 78.2829 11.5379V17.3333H76.6139V16.1401H76.5453C76.4348 16.3598 76.269 16.5758 76.048 16.7879C75.827 17 75.5431 17.1761 75.1963 17.3163C74.8496 17.4564 74.4342 17.5265 73.9503 17.5265ZM74.3218 16.1629C74.7943 16.1629 75.1982 16.0701 75.5336 15.8845C75.8727 15.6989 76.1299 15.4564 76.3052 15.1572C76.4843 14.8542 76.5738 14.5303 76.5738 14.1856V13.0606C76.5129 13.1212 76.3947 13.178 76.2195 13.2311C76.048 13.2803 75.8517 13.3239 75.6307 13.3617C75.4097 13.3958 75.1944 13.428 74.9848 13.4583C74.7753 13.4848 74.6 13.5076 74.459 13.5265C74.1275 13.5682 73.8245 13.6383 73.5502 13.7367C73.2796 13.8352 73.0624 13.9773 72.8986 14.1629C72.7385 14.3447 72.6585 14.5871 72.6585 14.8901C72.6585 15.3106 72.8147 15.6288 73.1272 15.8447C73.4397 16.0568 73.8379 16.1629 74.3218 16.1629Z" fill="#0D0E0F"/>
-<path d="M69.613 10.7367L68.064 11.0095C67.9992 10.8125 67.8963 10.625 67.7553 10.447C67.6182 10.2689 67.4314 10.1231 67.1952 10.0095C66.9589 9.89583 66.6636 9.83901 66.3092 9.83901C65.8253 9.83901 65.4214 9.94697 65.0975 10.1629C64.7736 10.375 64.6116 10.6496 64.6116 10.9867C64.6116 11.2784 64.7202 11.5133 64.9374 11.6913C65.1546 11.8693 65.5052 12.0151 65.9891 12.1288L67.3838 12.447C68.1916 12.6326 68.7937 12.9186 69.19 13.3049C69.5863 13.6913 69.7845 14.1932 69.7845 14.8106C69.7845 15.3333 69.632 15.7992 69.3272 16.2083C69.0262 16.6136 68.6051 16.9318 68.064 17.1629C67.5267 17.3939 66.9037 17.5095 66.1949 17.5095C65.2118 17.5095 64.4097 17.3011 63.7885 16.8845C63.1674 16.464 62.7864 15.8674 62.6454 15.0947L64.2972 14.8447C64.4001 15.2727 64.6116 15.5966 64.9317 15.8163C65.2518 16.0322 65.6691 16.1401 66.1835 16.1401C66.7436 16.1401 67.1914 16.0246 67.5267 15.7936C67.862 15.5587 68.0297 15.2727 68.0297 14.9356C68.0297 14.6629 67.9268 14.4337 67.721 14.2481C67.5191 14.0625 67.2085 13.9223 66.7894 13.8276L65.3032 13.5038C64.484 13.3182 63.8781 13.0227 63.4856 12.6174C63.0969 12.2121 62.9026 11.6989 62.9026 11.0776C62.9026 10.5625 63.0474 10.1117 63.337 9.72538C63.6266 9.33901 64.0267 9.03788 64.5373 8.82197C65.0479 8.60227 65.6328 8.49242 66.2921 8.49242C67.2409 8.49242 67.9878 8.69697 68.5327 9.10606C69.0776 9.51136 69.4377 10.0549 69.613 10.7367Z" fill="#0D0E0F"/>
-<path d="M57.3021 17.5095C56.479 17.5095 55.7607 17.322 55.1472 16.947C54.5337 16.572 54.0574 16.0473 53.7182 15.3731C53.3791 14.6989 53.2095 13.911 53.2095 13.0095C53.2095 12.1042 53.3791 11.3125 53.7182 10.6345C54.0574 9.95644 54.5337 9.42992 55.1472 9.05492C55.7607 8.67992 56.479 8.49242 57.3021 8.49242C58.1252 8.49242 58.8435 8.67992 59.457 9.05492C60.0705 9.42992 60.5468 9.95644 60.8859 10.6345C61.2251 11.3125 61.3946 12.1042 61.3946 13.0095C61.3946 13.911 61.2251 14.6989 60.8859 15.3731C60.5468 16.0473 60.0705 16.572 59.457 16.947C58.8435 17.322 58.1252 17.5095 57.3021 17.5095ZM57.3078 16.0833C57.8413 16.0833 58.2833 15.9432 58.6339 15.6629C58.9845 15.3826 59.2436 15.0095 59.4112 14.5436C59.5827 14.0776 59.6685 13.5644 59.6685 13.0038C59.6685 12.447 59.5827 11.9356 59.4112 11.4697C59.2436 11 58.9845 10.6231 58.6339 10.339C58.2833 10.0549 57.8413 9.91288 57.3078 9.91288C56.7705 9.91288 56.3247 10.0549 55.9703 10.339C55.6197 10.6231 55.3587 11 55.1872 11.4697C55.0196 11.9356 54.9357 12.447 54.9357 13.0038C54.9357 13.5644 55.0196 14.0776 55.1872 14.5436C55.3587 15.0095 55.6197 15.3826 55.9703 15.6629C56.3247 15.9432 56.7705 16.0833 57.3078 16.0833Z" fill="#0D0E0F"/>
-<path d="M51.573 5.69697V17.3333H49.864V5.69697H51.573Z" fill="#0D0E0F"/>
-<path d="M44.132 17.5095C43.3089 17.5095 42.5906 17.322 41.9771 16.947C41.3636 16.572 40.8873 16.0473 40.5482 15.3731C40.209 14.6989 40.0395 13.911 40.0395 13.0095C40.0395 12.1042 40.209 11.3125 40.5482 10.6345C40.8873 9.95644 41.3636 9.42992 41.9771 9.05492C42.5906 8.67992 43.3089 8.49242 44.132 8.49242C44.9551 8.49242 45.6734 8.67992 46.2869 9.05492C46.9004 9.42992 47.3767 9.95644 47.7158 10.6345C48.055 11.3125 48.2245 12.1042 48.2245 13.0095C48.2245 13.911 48.055 14.6989 47.7158 15.3731C47.3767 16.0473 46.9004 16.572 46.2869 16.947C45.6734 17.322 44.9551 17.5095 44.132 17.5095ZM44.1377 16.0833C44.6712 16.0833 45.1132 15.9432 45.4638 15.6629C45.8144 15.3826 46.0735 15.0095 46.2412 14.5436C46.4126 14.0776 46.4984 13.5644 46.4984 13.0038C46.4984 12.447 46.4126 11.9356 46.2412 11.4697C46.0735 11 45.8144 10.6231 45.4638 10.339C45.1132 10.0549 44.6712 9.91288 44.1377 9.91288C43.6004 9.91288 43.1546 10.0549 42.8002 10.339C42.4496 10.6231 42.1886 11 42.0171 11.4697C41.8495 11.9356 41.7656 12.447 41.7656 13.0038C41.7656 13.5644 41.8495 14.0776 42.0171 14.5436C42.1886 15.0095 42.4496 15.3826 42.8002 15.6629C43.1546 15.9432 43.6004 16.0833 44.1377 16.0833Z" fill="#0D0E0F"/>
-<path d="M30.7951 17.3333V5.69697H32.5613V11.2538H32.7042L37.6141 5.69697H39.8376L35.1163 10.9356L39.8547 17.3333H37.7284L33.9445 12.1345L32.5613 13.714V17.3333H30.7951Z" fill="#0D0E0F"/>
-</svg>

apps/hackathon/src/app/404.tsx

@@ -1,23 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function NotFoundPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
-      <div className="text-center">
-        <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
-          Page Not Found
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-8">
-          The page you are looking for doesn't exist or has been moved.
-        </p>
-        <Link
-          to="/"
-          className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
-        >
-          Go Back Home
-        </Link>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/callback/page.tsx

@@ -1,172 +0,0 @@
-import { FC, ReactElement, useEffect, useState, useRef } from 'react';
-import { useNavigate } from 'react-router';
-import { useGitHubCallback } from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-
-const CallbackPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
-  const [isProcessing, setIsProcessing] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const hasRunRef = useRef(false);
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      if (hasRunRef.current) {
-        return;
-      }
-      hasRunRef.current = true;
-
-      try {
-        // Check URL hash for Supabase email confirmation callback
-        const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-        const urlParams = new URLSearchParams(globalThis.location.search);
-
-        const type = hashParams.get('type') || urlParams.get('type');
-        const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
-
-        // Debug: log what we received
-        console.log('[Callback] Params:', { type, accessToken: !!accessToken, hash: globalThis.location.hash, search: globalThis.location.search });
-
-        // Handle Supabase email callbacks (has access_token in hash or query)
-        // This includes: signup confirmation, email confirmation, password recovery
-        if (accessToken) {
-          setIsProcessing(false);
-
-          // Password recovery - type is 'recovery' or we have access_token from reset email
-          if (type === 'recovery' || type === 'magiclink') {
-            toast.success('Email verified! Please set your new password.');
-            navigate('/auth/reset-password?access_token=' + accessToken);
-            return;
-          }
-
-          // Signup/Email confirmation
-          if (type === 'signup' || type === 'email_confirmation') {
-            toast.success('Email verified successfully! Please log in to continue.');
-            navigate('/auth/login');
-            return;
-          }
-
-          // If we have access_token but unknown type, assume it's password recovery
-          // (Supabase sometimes sends without explicit type)
-          toast.success('Email verified! Please set your new password.');
-          navigate('/auth/reset-password?access_token=' + accessToken);
-          return;
-        }
-
-        // Get the code from URL query params (GitHub OAuth)
-        const code = urlParams.get('code');
-
-        if (!code) {
-          throw new Error('No authorization code received');
-        }
-
-        // Exchange the code for tokens using backend API (GitHub OAuth)
-        const result = await exchangeGitHubCode({ code });
-
-        toast.success('Login successful!');
-        setIsProcessing(false);
-
-        // Check if user has completed onboarding (has location)
-        if (result.user.location) {
-          globalThis.location.replace('/dashboard');
-        } else {
-          globalThis.location.replace('/onboarding/user');
-        }
-      } catch (err) {
-        console.error('[Callback] Error:', err);
-        setError((err as Error).message);
-        setIsProcessing(false);
-        toast.error('An error occurred during login');
-
-        setTimeout(() => {
-          navigate('/auth/login');
-        }, 3000);
-      }
-    };
-
-    handleCallback();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (error) {
-    // Check if error is related to private email
-    const isPrivateEmailError =
-      error.toLowerCase().includes('failed to create user') ||
-      error.toLowerCase().includes('email') ||
-      error.toLowerCase().includes('user record');
-
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200 dark:border-red-800">
-          <div className="text-center mb-6">
-            <div className="text-red-500 text-5xl mb-4">⚠️</div>
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
-              GitHub Login Failed
-            </h2>
-            <p className="text-red-600 dark:text-red-400 mb-4 whitespace-pre-line">{error}</p>
-          </div>
-
-          {isPrivateEmailError && (
-            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
-              <h3 className="font-semibold text-amber-800 dark:text-amber-300 mb-2">
-                Is your GitHub email set to private?
-              </h3>
-              <p className="text-amber-700 dark:text-amber-400 text-sm mb-3">
-                GitHub login requires a public email address. Please follow these steps:
-              </p>
-              <ol className="text-amber-700 dark:text-amber-400 text-sm list-decimal list-inside space-y-1 mb-3">
-                <li>
-                  Go to{' '}
-                  <a
-                    href="https://github.com/settings/emails"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-amber-900 dark:hover:text-amber-200"
-                  >
-                    GitHub Email Settings
-                  </a>
-                </li>
-                <li>Uncheck "Keep my email addresses private"</li>
-                <li>
-                  Or go to{' '}
-                  <a
-                    href="https://github.com/settings/profile"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-amber-900 dark:hover:text-amber-200"
-                  >
-                    Profile Settings
-                  </a>{' '}
-                  and set a public email
-                </li>
-                <li>Try signing in with GitHub again</li>
-              </ol>
-              <p className="text-amber-600 dark:text-amber-500 text-xs">
-                Alternatively, you can sign up using email and password instead.
-              </p>
-            </div>
-          )}
-
-          <p className="text-gray-600 dark:text-gray-400 text-sm mt-6 text-center">
-            Redirecting to login page in 3 seconds...
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
-      <div className="text-center">
-        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-          Completing login...
-        </h2>
-        <p className="text-gray-600 dark:text-gray-400">Please wait</p>
-      </div>
-    </div>
-  );
-};
-
-export default CallbackPage;

apps/hackathon/src/app/auth/forgot-password/page.tsx

@@ -1,125 +0,0 @@
-import { useState } from 'react';
-import { useForgotPassword } from '@imphnen-frontend-service/service';
-import { Link, useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import ThemeToggle from '../../../components/theme-toggle';
-
-export default function ForgotPasswordPage() {
-  const [email, setEmail] = useState('');
-  const [emailSent, setEmailSent] = useState(false);
-  const navigate = useNavigate();
-  const forgotPasswordMutation = useForgotPassword();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!email) {
-      toast.error('Please enter your email');
-      return;
-    }
-
-    try {
-      await forgotPasswordMutation.mutateAsync({ email });
-
-      setEmailSent(true);
-      toast.success('Password reset email sent! Check your inbox.');
-    } catch (err) {
-      toast.error((err as Error).message || 'Failed to send reset email');
-    }
-  };
-
-  if (emailSent) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
-              <span className="text-3xl">✓</span>
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Check Your Email
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              We've sent a password reset link to <strong>{email}</strong>
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Click the link in the email to reset your password. The link will
-              expire in 1 hour.
-            </p>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors">
-                Back to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => setEmailSent(false)}
-              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-            >
-              Send another email
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/auth/login')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Login
-          </button>
-          <ThemeToggle />
-        </div>
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Forgot Password?
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            No worries, we'll send you reset instructions
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Email Address
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={forgotPasswordMutation.isPending}
-              className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={forgotPasswordMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {forgotPasswordMutation.isPending ? 'Sending...' : 'Send Reset Link'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/login/page.tsx

@@ -1,235 +0,0 @@
-import { useState, useEffect } from 'react';
-import {
-  useGitHubAuth,
-  useLogin,
-} from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { ThemeToggle } from '../../../components/theme-toggle';
-
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const { signInWithGitHub } = useGitHubAuth();
-  const loginMutation = useLogin();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-
-  // Check for password reset tokens in URL and redirect to reset-password page
-  useEffect(() => {
-    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-    const urlParams = new URLSearchParams(globalThis.location.search);
-
-    const accessToken = hashParams.get('access_token') || urlParams.get('access_token');
-    const type = hashParams.get('type') || urlParams.get('type');
-
-    // If we have an access_token, this is likely a password reset redirect that landed on the wrong page
-    if (accessToken) {
-      console.log('[Login] Detected access_token, redirecting to reset-password page');
-
-      // Check if it's a password recovery
-      if (type === 'recovery' || type === 'magiclink' || !type) {
-        toast.info('Redirecting to password reset...');
-        navigate('/auth/reset-password?access_token=' + accessToken);
-      }
-    }
-  }, [navigate]);
-
-  const handleEmailLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    if (!email || !password) {
-      setError('Please enter both email and password');
-      return;
-    }
-
-    try {
-      const result = await loginMutation.mutateAsync({ email, password });
-
-      toast.success('Login successful!');
-
-      // Redirect based on onboarding status
-      if (result.user.location) {
-        navigate('/dashboard');
-      } else {
-        navigate('/onboarding/user');
-      }
-    } catch (err) {
-      console.error('[Login] Email login failed:', err);
-      setError((err as Error).message || 'Login failed');
-    }
-  };
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-
-      const result = await signInWithGitHub();
-
-      // Check if we got a redirect URL
-      if (result?.url) {
-        globalThis.location.href = result.url;
-      } else {
-        setIsGithubLoading(false);
-        setError('Failed to get GitHub OAuth URL');
-      }
-    } catch (err) {
-      console.error('[Login] GitHub login failed:', err);
-      setError((err as Error).message || 'GitHub login failed');
-      setIsGithubLoading(false);
-    }
-  };
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Homepage
-          </button>
-          <ThemeToggle />
-        </div>
-
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Welcome Back
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 font-sans">
-            Sign in to join or create your hackathon team
-          </p>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
-          </div>
-        )}
-
-        <form onSubmit={handleEmailLogin} className="space-y-4">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="your@email.com"
-              disabled={loginMutation.isPending}
-              className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
-              required
-            />
-          </div>
-
-          <div>
-            <div className="flex items-center justify-between mb-1">
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-              >
-                Password
-              </label>
-              <Link
-                to="/auth/forgot-password"
-                className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"
-              >
-                Forgot password?
-              </Link>
-            </div>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={loginMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
-                required
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={loginMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
-            {loginMutation.isPending ? 'Signing in...' : 'Sign in with Email'}
-          </button>
-        </form>
-
-        <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
-            OR
-          </span>
-          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-        </div>
-
-        <button
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
-          <GithubOutlined className="text-xl" />
-          <span>
-            {isGithubLoading ? 'Connecting...' : 'Sign in with GitHub'}
-          </span>
-        </button>
-
-        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
-          Make sure your GitHub email is{' '}
-          <a
-            href="https://github.com/settings/emails"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 dark:text-primary-400 hover:underline"
-          >
-            set to public
-          </a>{' '}
-          for GitHub sign in to work.
-        </p>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 dark:text-gray-400 text-sm">
-            Don't have an account?{' '}
-            <Link
-              to="/auth/signup"
-              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
-            >
-              Sign up
-            </Link>
-          </p>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 dark:text-gray-500 text-xs">
-            By signing in, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/reset-password/page.tsx

@@ -1,161 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useResetPassword, useAuthStore } from '@imphnen-frontend-service/service';
-import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-
-export default function ResetPasswordPage() {
-  const navigate = useNavigate();
-  const { clearSession } = useAuthStore();
-  const resetPasswordMutation = useResetPassword();
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [accessToken, setAccessToken] = useState<string | null>(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  useEffect(() => {
-    // Get the access_token from URL hash (Supabase sends it as hash fragment)
-    // or from query params (when redirected from callback page)
-    const hashParams = new URLSearchParams(globalThis.location.hash.substring(1));
-    const queryParams = new URLSearchParams(globalThis.location.search);
-    const token = hashParams.get('access_token') || queryParams.get('access_token');
-
-    if (token) {
-      setAccessToken(token);
-    } else {
-      toast.error('Invalid or expired reset link');
-      setTimeout(() => navigate('/auth/forgot-password'), 2000);
-    }
-  }, [navigate]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (password !== confirmPassword) {
-      toast.error('Passwords do not match');
-      return;
-    }
-
-    if (password.length < 6) {
-      toast.error('Password must be at least 6 characters');
-      return;
-    }
-
-    if (!accessToken) {
-      toast.error('Invalid reset token');
-      return;
-    }
-
-    try {
-      await resetPasswordMutation.mutateAsync({
-        access_token: accessToken,
-        new_password: password,
-      });
-
-      toast.success('Password updated successfully!');
-
-      // Clear session and redirect to login
-      clearSession();
-      navigate('/auth/login');
-    } catch (err) {
-      toast.error((err as Error).message || 'Failed to reset password');
-    }
-  };
-
-  if (!accessToken) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600 dark:text-gray-400">
-            Verifying reset link...
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Set New Password
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            Enter your new password below
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              New Password
-            </label>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={resetPasswordMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                required
-                minLength={6}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-          </div>
-
-          <div>
-            <label
-              htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Confirm New Password
-            </label>
-            <div className="relative">
-              <input
-                id="confirmPassword"
-                type={showConfirmPassword ? 'text' : 'password'}
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                placeholder="••••••••"
-                disabled={resetPasswordMutation.isPending}
-                className="w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
-                required
-                minLength={6}
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={resetPasswordMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {resetPasswordMutation.isPending ? 'Updating...' : 'Update Password'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/auth/signup/page.tsx

@@ -1,406 +0,0 @@
-import { useState } from 'react';
-import { useGitHubAuth, useSignup } from '@imphnen-frontend-service/service';
-import { GithubOutlined } from '@ant-design/icons';
-import { useNavigate, Link } from 'react-router';
-import { toast } from 'sonner';
-import { Icon } from '@iconify/react';
-import { ThemeToggle } from '../../../components/theme-toggle';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-
-const signupSchema = z
-  .object({
-    fullname: z
-      .string()
-      .min(1, 'Full name is required')
-      .min(2, 'Full name must be at least 2 characters'),
-    email: z
-      .string()
-      .min(1, 'Email is required')
-      .email('Please enter a valid email address'),
-    password: z
-      .string()
-      .min(1, 'Password is required')
-      .min(6, 'Password must be at least 6 characters'),
-    confirmPassword: z.string().min(1, 'Please confirm your password'),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword'],
-  });
-
-type SignupFormData = z.infer<typeof signupSchema>;
-
-// Registration deadline: 2025-11-30 23:29:00 WIB (UTC+7)
-const REGISTRATION_DEADLINE = new Date('2025-11-30T16:29:00Z');
-
-export default function SignupPage() {
-  const navigate = useNavigate();
-
-  // Check if registration is closed
-  const isRegistrationClosed = new Date() >= REGISTRATION_DEADLINE;
-  const { signInWithGitHub } = useGitHubAuth();
-  const signupMutation = useSignup();
-  const [isGithubLoading, setIsGithubLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [registrationSuccess, setRegistrationSuccess] = useState(false);
-  const [registeredEmail, setRegisteredEmail] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isValid },
-  } = useForm<SignupFormData>({
-    resolver: zodResolver(signupSchema),
-    mode: 'onChange',
-  });
-
-  const onSubmit = async (data: SignupFormData) => {
-    setError(null);
-
-    try {
-      const result = await signupMutation.mutateAsync({
-        email: data.email,
-        password: data.password,
-        fullname: data.fullname,
-      });
-      toast.success(result.message);
-      setRegisteredEmail(data.email);
-      setRegistrationSuccess(true);
-    } catch (err) {
-      console.error('[Signup] Email signup failed:', err);
-      setError((err as Error).message || 'Signup failed');
-    }
-  };
-
-  // Show closed registration screen
-  if (isRegistrationClosed) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
-              <Icon
-                icon="mdi:clock-alert"
-                className="text-3xl text-red-600 dark:text-red-400"
-              />
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Registration Closed
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              The registration period for this hackathon has ended.
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Thank you for your interest! Registration closed on November 30, 2025 at 23:29 WIB.
-            </p>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
-                Go to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => navigate('/')}
-              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
-            >
-              Back to Homepage
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Show success screen after registration
-  if (registrationSuccess) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 text-center">
-          <div className="mb-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4">
-              <Icon
-                icon="mdi:email-check"
-                className="text-3xl text-green-600 dark:text-green-400"
-              />
-            </div>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-              Check Your Email
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              We've sent an activation link to{' '}
-              <strong>{registeredEmail}</strong>
-            </p>
-          </div>
-
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Click the link in the email to activate your account. The link
-              will expire in 24 hours.
-            </p>
-
-            <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
-              <p className="text-sm text-amber-700 dark:text-amber-300">
-                Don't forget to check your spam folder if you don't see the
-                email.
-              </p>
-            </div>
-
-            <Link to="/auth/login">
-              <button className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 transition-colors cursor-pointer">
-                Go to Login
-              </button>
-            </Link>
-
-            <button
-              onClick={() => setRegistrationSuccess(false)}
-              className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors cursor-pointer"
-            >
-              Register with different email
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const handleGithubLogin = async () => {
-    try {
-      setIsGithubLoading(true);
-
-      const result = await signInWithGitHub();
-
-      if (result?.url) {
-        globalThis.location.href = result.url;
-      } else {
-        setIsGithubLoading(false);
-        setError('Failed to get GitHub OAuth URL');
-      }
-    } catch (err) {
-      console.error('[Signup] GitHub login failed:', err);
-      setError((err as Error).message || 'GitHub login failed');
-      setIsGithubLoading(false);
-    }
-  };
-
-  const inputBaseClass =
-    'w-full px-4 py-2.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed';
-  const inputErrorClass = 'border-red-500 dark:border-red-500';
-  const inputNormalClass = 'border-gray-300 dark:border-gray-600';
-
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={() => navigate('/')}
-            className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
-          >
-            <Icon icon="ic:baseline-chevron-left" width="24" height="24" />
-            Back to Homepage
-          </button>
-          <ThemeToggle />
-        </div>
-
-        <div className="text-center mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Create Account
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400">
-            Join the hackathon community
-          </p>
-        </div>
-
-        {error && (
-          <div className="mb-6 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-            <p className="text-red-600 dark:text-red-400 text-sm">{error}</p>
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div>
-            <label
-              htmlFor="fullname"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Full Name
-            </label>
-            <input
-              id="fullname"
-              type="text"
-              {...register('fullname')}
-              placeholder="John Doe"
-              disabled={signupMutation.isPending}
-              className={`${inputBaseClass} ${
-                errors.fullname ? inputErrorClass : inputNormalClass
-              }`}
-            />
-            {errors.fullname && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.fullname.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              {...register('email')}
-              placeholder="your@email.com"
-              disabled={signupMutation.isPending}
-              className={`${inputBaseClass} ${
-                errors.email ? inputErrorClass : inputNormalClass
-              }`}
-            />
-            {errors.email && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.email.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                id="password"
-                type={showPassword ? 'text' : 'password'}
-                {...register('password')}
-                placeholder="••••••••"
-                disabled={signupMutation.isPending}
-                className={`${inputBaseClass} pr-12 ${
-                  errors.password ? inputErrorClass : inputNormalClass
-                }`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-            {errors.password && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.password.message}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label
-              htmlFor="confirmPassword"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Confirm Password
-            </label>
-            <div className="relative">
-              <input
-                id="confirmPassword"
-                type={showConfirmPassword ? 'text' : 'password'}
-                {...register('confirmPassword')}
-                placeholder="••••••••"
-                disabled={signupMutation.isPending}
-                className={`${inputBaseClass} pr-12 ${
-                  errors.confirmPassword ? inputErrorClass : inputNormalClass
-                }`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
-              >
-                <Icon icon={showConfirmPassword ? 'mdi:eye-off' : 'mdi:eye'} className="text-xl" />
-              </button>
-            </div>
-            {errors.confirmPassword && (
-              <p className="mt-1 text-sm text-red-500 dark:text-red-400">
-                {errors.confirmPassword.message}
-              </p>
-            )}
-          </div>
-
-          <button
-            type="submit"
-            disabled={!isValid || signupMutation.isPending}
-            className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
-          >
-            {signupMutation.isPending
-              ? 'Creating account...'
-              : 'Create Account'}
-          </button>
-        </form>
-
-        <div className="my-6 flex items-center">
-          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-          <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
-            OR
-          </span>
-          <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
-        </div>
-
-        <button
-          onClick={handleGithubLogin}
-          disabled={isGithubLoading}
-          type="button"
-          className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
-        >
-          <GithubOutlined className="text-xl" />
-          <span>
-            {isGithubLoading ? 'Connecting...' : 'Sign up with GitHub'}
-          </span>
-        </button>
-
-        <p className="mt-3 text-xs text-center text-gray-500 dark:text-gray-500 font-sans">
-          Make sure your GitHub email is{' '}
-          <a
-            href="https://github.com/settings/emails"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 dark:text-primary-400 hover:underline"
-          >
-            set to public
-          </a>{' '}
-          for GitHub sign up to work.
-        </p>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-600 dark:text-gray-400 text-sm">
-            Already have an account?{' '}
-            <Link
-              to="/auth/login"
-              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
-            >
-              Sign in
-            </Link>
-          </p>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-gray-500 dark:text-gray-500 text-xs">
-            By signing up, you agree to our Terms of Service and Privacy Policy
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/dashboard/layout.tsx

@@ -1,46 +0,0 @@
-import { FC, ReactElement, useState } from 'react';
-import { Outlet } from 'react-router';
-import { Sidebar } from '../../components/sidebar';
-
-const DashboardLayout: FC = (): ReactElement => {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  return (
-    <div className="flex min-h-screen bg-gray-50 dark:bg-gray-950">
-      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
-
-      <div className="flex-1 flex flex-col">
-        {/* Mobile Header with Hamburger */}
-        <div className="lg:hidden sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-700 px-4 py-3 flex items-center">
-          <button
-            onClick={() => setSidebarOpen(true)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-          >
-            <svg
-              className="w-6 h-6 text-gray-600 dark:text-gray-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
-          </button>
-          <h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
-            Hackathon
-          </h1>
-        </div>
-
-        <main className="flex-1 overflow-auto">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardLayout;

apps/hackathon/src/app/dashboard/page.tsx

@@ -1,335 +0,0 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
-import { Link } from 'react-router';
-import {
-  useMyTeams,
-  useMyInvitations,
-  useRespondToInvitation,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Icon } from '@iconify/react';
-import ProfilePage from '../profile/page';
-
-// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
-const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
-
-type Invitation = {
-  id: string;
-  team: {
-    id?: string;
-    name?: string;
-    logo?: string;
-    banner?: string;
-    description?: string;
-    city?: string;
-    visibility?: string;
-    leader_id?: string;
-  };
-  inviter: {
-    id?: string;
-    fullname?: string;
-    email?: string;
-    avatar?: string;
-  };
-};
-
-const DashboardPage: FC = (): ReactElement => {
-  const { session } = useAuthStore();
-  const [showProfileModal, setShowProfileModal] = useState(false);
-
-  // Check if team features are closed
-  const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
-  // Lock background scroll when profile modal is open
-  useEffect(() => {
-    if (showProfileModal) {
-      const originalOverflow = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-      return () => {
-        document.body.style.overflow = originalOverflow || '';
-      };
-    }
-  }, [showProfileModal]);
-  const { data: teamsData } = useMyTeams();
-  const { data: invitationsData } = useMyInvitations();
-  const { mutateAsync: respondToInvitation } = useRespondToInvitation();
-
-  const user = session?.user;
-  const myTeams = teamsData?.data || [];
-  const invitations: Invitation[] = (invitationsData?.data ||
-    []) as Invitation[];
-
-  const handleAcceptInvitation = async (invitationId: string) => {
-    try {
-      await respondToInvitation({ invitationId, action: 'accept' });
-      toast.success('Invitation accepted! You are now a team member.');
-    } catch (error) {
-      console.error('Failed to accept invitation:', error);
-      toast.error('Failed to accept invitation');
-    }
-  };
-
-  const handleRejectInvitation = async (invitationId: string) => {
-    try {
-      await respondToInvitation({ invitationId, action: 'reject' });
-      toast.success('Invitation declined');
-    } catch (error) {
-      console.error('Failed to reject invitation:', error);
-      toast.error('Failed to decline invitation');
-    }
-  };
-
-  return (
-    <>
-      <div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-            Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
-          </h1>
-          {user?.location && (
-            <p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
-              <Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
-              <span>{user.location}</span>
-            </p>
-          )}
-        </div>
-
-        {invitations.length > 0 && (
-          <div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
-              Team Invitations ({invitations.length})
-            </h2>
-            {isTeamFeaturesClosed && (
-              <div className="mb-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
-                <p className="text-sm text-amber-700 dark:text-amber-300 flex items-center gap-2">
-                  <Icon icon="mdi:clock-alert" className="text-lg shrink-0" />
-                  Team features are closed. You can no longer accept invitations.
-                </p>
-              </div>
-            )}
-            <div className="space-y-3 font-sans">
-              {invitations.map((invitation) => (
-                <div
-                  key={invitation.id}
-                  className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
-                >
-                  <div>
-                    <p className="font-medium text-gray-900 dark:text-white">
-                      {invitation.team?.name ?? 'Unnamed Team'}
-                    </p>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      Invited by{' '}
-                      {invitation.inviter?.fullname ?? 'Unknown User'}
-                    </p>
-                  </div>
-                  {!isTeamFeaturesClosed && (
-                    <div className="flex space-x-2">
-                      <Button
-                        size="sm"
-                        onClick={() => handleAcceptInvitation(invitation.id)}
-                      >
-                        Accept
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="secondary"
-                        onClick={() => handleRejectInvitation(invitation.id)}
-                      >
-                        Decline
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {myTeams.length > 0 ? (
-          (() => {
-            const team = myTeams[0] as any;
-            return (
-              <div className="mb-6 md:mb-8">
-                <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
-                  My Team
-                </h2>
-                <Link
-                  to={'/teams/' + team.id}
-                  className="block bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow border dark:border-gray-700"
-                >
-                  <img
-                    src={team.banner || '/images/banner-imphnen.webp'}
-                    alt={team.name}
-                    className="w-full aspect-3/1 object-cover"
-                  />
-                  <div className="p-4 md:p-6">
-                    <div className="flex items-center space-x-4 mb-4">
-                      {team.logo ? (
-                        <img
-                          src={team.logo}
-                          alt={team.name}
-                          className="w-16 h-16 rounded-full object-cover shrink-0"
-                        />
-                      ) : (
-                        <div className="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
-                          <Icon icon="mdi:account-group" className="text-gray-500 dark:text-gray-400 text-2xl" />
-                        </div>
-                      )}
-                      <div className="flex-1 min-w-0">
-                        <h3 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white leading-tight line-clamp-1">
-                          {team.name}
-                        </h3>
-                        <div className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-3 font-sans mt-2">
-                          {team.has_submission && (
-                            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
-                              <Icon icon="mdi:check-circle" className="text-sm" />
-                              Submitted
-                            </span>
-                          )}
-                          {team.city && (
-                            <span className="flex items-center gap-1 truncate">
-                              <Icon icon="mdi:map-marker" className="shrink-0" />
-                              <span className="truncate">{team.city}</span>
-                            </span>
-                          )}
-                          <span className="flex items-center gap-1 shrink-0">
-                            <Icon icon="mdi:account-group" />
-                            {team.member_count || team.members?.length || 0} member{(team.member_count || team.members?.length || 0) !== 1 ? 's' : ''}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    {team.description && (
-                      <p className="text-gray-600 dark:text-gray-400 line-clamp-3 font-sans">
-                        {team.description}
-                      </p>
-                    )}
-                  </div>
-                </Link>
-              </div>
-            );
-          })()
-        ) : (
-          <div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
-            <div className="text-center">
-              <div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
-              <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
-                You are not in a team yet
-              </h2>
-              <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
-                Use the sidebar to browse teams or create your own
-              </p>
-            </div>
-          </div>
-        )}
-
-        <div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
-          <div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
-          <div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
-            <div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
-              <div className="flex flex-col md:flex-row items-start">
-                {user?.avatar ? (
-                  <img
-                    src={user.avatar}
-                    alt={user.fullname || 'User'}
-                    className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
-                  />
-                ) : (
-                  <div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                    <span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
-                      U
-                    </span>
-                  </div>
-                )}
-                <div className="md:ml-6 mt-4 md:mt-14">
-                  <h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
-                    {user?.fullname ||
-                      user?.email?.split('@')[0] ||
-                      'Unnamed User'}
-                  </h2>
-
-                  {user?.location ? (
-                    <p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
-                      <Icon
-                        icon="heroicons:map-pin-16-solid"
-                        width="16"
-                        height="16"
-                      />
-                      <span className="ml-1">{user.location}</span>
-                    </p>
-                  ) : (
-                    <Link
-                      to="/onboarding/user"
-                      className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
-                    >
-                      <span className="font-sans">Complete your profile</span>
-                      <Icon
-                        icon="ic:baseline-chevron-right"
-                        width="24"
-                        height="24"
-                      />
-                    </Link>
-                  )}
-                </div>
-              </div>
-              {user?.location && (
-                <button
-                  type="button"
-                  onClick={() => setShowProfileModal(true)}
-                  className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto cursor-pointer"
-                >
-                  Edit Profile
-                </button>
-              )}
-            </div>
-            <div className="space-y-4 md:space-y-6 w-full max-w-full">
-              {user?.bio && (
-                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
-                  <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
-                    About
-                  </h3>
-                  <p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
-                    {user.bio}
-                  </p>
-                </div>
-              )}
-              <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
-                <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
-                  Contact
-                </h3>
-                <div className="flex items-center text-gray-700 dark:text-gray-300">
-                  <span className="text-gray-900 dark:text-white">
-                    {user?.email}
-                  </span>
-                </div>
-              </div>
-              {user?.skills && user.skills.length > 0 && (
-                <div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
-                  <h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
-                    Skills
-                  </h3>
-                  <div className="flex flex-wrap gap-2">
-                    {user.skills.map((skill: string) => (
-                      <span
-                        key={skill}
-                        className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
-                      >
-                        {skill}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-      <ProfilePage
-        open={showProfileModal}
-        onClose={() => setShowProfileModal(false)}
-      />
-    </>
-  );
-};
-
-export default DashboardPage;

apps/hackathon/src/app/error.tsx

@@ -1,29 +0,0 @@
-import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
-
-export default function ErrorPage() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    console.error(error);
-    errorMessage = 'Unknown error';
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-red-600 mb-4">Oops!</h1>
-        <p className="text-xl text-gray-700 mb-2">
-          Sorry, an unexpected error has occurred.
-        </p>
-        <p className="text-gray-500 italic">{errorMessage}</p>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/layout.tsx

@@ -1,102 +0,0 @@
-import {
-  Outlet,
-  ScrollRestoration,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { useAuthStore, useUserMe } from '@imphnen-frontend-service/service';
-
-// Define onboarding routes
-const ONBOARDING_ROUTES = new Set(['/onboarding/user']);
-
-export default function RootLayout() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { session } = useAuthStore();
-  const { data: userData, isLoading: isUserLoading } = useUserMe();
-  const [isChecking, setIsChecking] = useState(true);
-
-  useEffect(() => {
-    const checkAuth = async () => {
-      const pathname = location.pathname;
-
-      // Allow hackathon pages without checks
-      if (pathname.startsWith('/hackathons')) {
-        setIsChecking(false);
-        return;
-      }
-
-      // Allow auth callback without checks
-      if (pathname === '/auth/callback') {
-        setIsChecking(false);
-        return;
-      }
-
-      // Public auth pages - allow unauthenticated access
-      if (pathname.startsWith('/auth')) {
-        // If already authenticated and not on password reset pages, redirect to dashboard
-        if (session && pathname !== '/auth/reset-password') {
-          navigate('/dashboard', { replace: true });
-          setIsChecking(false);
-          return;
-        }
-        // Allow unauthenticated access to auth pages
-        setIsChecking(false);
-        return;
-      }
-
-      // Home page - allow everyone to view the landing page
-      if (pathname === '/') {
-        setIsChecking(false);
-        return;
-      }
-
-      // Require authentication for all other routes
-      if (!session) {
-        navigate('/auth/login', { replace: true });
-        setIsChecking(false);
-        return;
-      }
-
-      // Wait for user data to load before checking onboarding
-      if (isUserLoading) {
-        return;
-      }
-
-      // Check if user has completed onboarding (skip for onboarding routes)
-      if (!ONBOARDING_ROUTES.has(pathname)) {
-        const hasLocation = !!userData?.data?.location || !!session?.user?.location;
-
-        if (!hasLocation) {
-          navigate('/onboarding/user', { replace: true });
-          setIsChecking(false);
-          return;
-        }
-      }
-
-      setIsChecking(false);
-    };
-
-    checkAuth();
-  }, [location.pathname, navigate, session, userData, isUserLoading]);
-
-  // Show loading state while checking auth
-  if (isChecking) {
-    return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950">
-        <div className="text-center">
-          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
-          <p className="text-gray-600 dark:text-neutral-400">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Outlet />
-      <ScrollRestoration />
-    </>
-  );
-}

apps/hackathon/src/app/maintenance/page.tsx

@@ -1,23 +0,0 @@
-import { Link } from 'react-router';
-
-export default function MaintenancePage() {
-  return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
-      <div className="text-center">
-        <h1 className="text-6xl font-bold text-yellow-600 mb-4">🚧</h1>
-        <h2 className="text-3xl font-semibold mb-2">We'll be back soon!</h2>
-        <p className="text-gray-600">
-          Our site is currently undergoing scheduled maintenance.
-          <br />
-          Thank you for your patience.
-        </p>
-        <Link
-          to="/"
-          className="mt-4 inline-block text-primary-600 hover:underline"
-        >
-          Back to Homepage
-        </Link>
-      </div>
-    </div>
-  );
-}

apps/hackathon/src/app/onboarding/user/page.tsx

@@ -1,283 +0,0 @@
-import { FC, ReactElement, useState, useEffect } from 'react';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useNavigate } from 'react-router';
-import { useForm, Controller } from 'react-hook-form';
-import {
-  userOnboardingSchema,
-  TUserOnboardingForm,
-  useUpdateUserMe,
-  useUploadAvatar,
-  useUserMe,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
-
-import { CitySelect } from '../../../components/city-select';
-import { Icon } from '@iconify/react';
-
-const ROLE_OPTIONS = [
-  'Frontend Developer',
-  'Backend Developer',
-  'Full Stack Developer',
-  'DevOps Engineer',
-  'UI/UX Designer',
-  'Product Manager',
-  'Data Scientist',
-  'Mobile Developer',
-];
-
-const UserOnboardingPage: FC = (): ReactElement => {
-  const navigate = useNavigate();
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
-  const [avatarPreview, setAvatarPreview] = useState<string>('');
-
-  const { data: userData } = useUserMe();
-  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
-  const { mutateAsync: uploadAvatar, isPending: isUploading } =
-    useUploadAvatar();
-  const { session } = useAuthStore();
-
-  const form = useForm<TUserOnboardingForm>({
-    resolver: zodResolver(userOnboardingSchema),
-    mode: 'all',
-    defaultValues: {
-      fullname: session?.user?.fullname || userData?.data?.fullname || '',
-      location: session?.user?.location || '',
-      bio: session?.user?.bio || '',
-      skills: session?.user?.skills || [],
-    },
-  });
-
-  // Set initial avatar preview from GitHub avatar if available
-  useEffect(() => {
-    if (session?.user?.avatar && !avatarPreview) {
-      setAvatarPreview(session.user.avatar);
-    }
-  }, [session?.user?.avatar, avatarPreview]);
-
-  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      // Validate file size (max 2MB)
-      if (file.size > 2 * 1024 * 1024) {
-        toast.error('The file is too large. Maximum size is 2MB.');
-        e.target.value = '';
-        return;
-      }
-
-      // Validate file type
-      if (!file.type.startsWith('image/')) {
-        toast.error('The file must be an image');
-        e.target.value = '';
-        return;
-      }
-
-      setAvatarFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setAvatarPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      let avatarUrl = session?.user?.avatar || null;
-
-      // Upload avatar if a new file was selected
-      if (avatarFile) {
-        const uploadResult = await uploadAvatar(avatarFile);
-        avatarUrl = uploadResult.data.url;
-      }
-
-      // Update user in Supabase
-      await updateUser({
-        fullname: data.fullname,
-        avatar: avatarUrl,
-        location: data.location,
-        bio: data.bio,
-        skills: data.skills,
-      });
-
-      // Wait a bit for the onSuccess handler to update localStorage
-      // The updateUser mutation's onSuccess handler updates the Zustand store and localStorage
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // Use window.location for a full page reload to ensure middleware sees updated localStorage
-      globalThis.location.href = '/dashboard';
-    } catch (error) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : 'Onboarding failed. Please try again.'
-      );
-    }
-  });
-
-  return (
-    <div className="flex flex-col justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4 py-8">
-      <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-xl shadow-lg dark:shadow-gray-950/50">
-        <div className="mb-6">
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-            Complete Your Profile
-          </h1>
-          <p className="text-gray-600 font-sans dark:text-gray-400">
-            Tell us more about yourself to get started
-          </p>
-        </div>
-
-        <form onSubmit={onSubmit} className="space-y-6">
-          {/* Avatar Upload */}
-          <div className="flex flex-col items-center space-y-4">
-            <div className="relative">
-              {avatarPreview ? (
-                <img
-                  src={avatarPreview}
-                  alt="Avatar preview"
-                  className="w-32 h-32 rounded-full object-cover border-4 border-gray-200 dark:border-gray-700"
-                />
-              ) : (
-                <div className="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
-                  <Icon
-                    icon="ic:baseline-person"
-                    width="48"
-                    height="48"
-                    className="text-gray-400 dark:text-gray-500"
-                  />
-                </div>
-              )}
-            </div>
-            <div className="flex flex-col items-center">
-              <label htmlFor="avatar" className="cursor-pointer">
-                <span className="px-4 py-2 bg-primary-500 dark:bg-primary-600 text-white rounded-lg hover:bg-primary-600 dark:hover:bg-primary-700 inline-block">
-                  {avatarPreview ? 'Change Photo' : 'Upload Photo'}
-                </span>
-                <input
-                  id="avatar"
-                  type="file"
-                  accept="image/*"
-                  className="hidden"
-                  onChange={handleAvatarChange}
-                />
-              </label>
-              <p className="text-xs text-gray-500 dark:text-gray-500 mt-2 text-center">
-                Optional, but highly recommended. Max 2MB
-              </p>
-            </div>
-          </div>
-
-          {/* Full Name */}
-          <ControlledInputField
-            control={form.control}
-            label="Full Name"
-            placeholder="Enter your full name"
-            name="fullname"
-            className="px-3 py-2 text-label2 rounded-lg max-h-auto text-base"
-            size="md"
-            isRequired={true}
-          />
-
-          {/* City */}
-          <div className="space-y-2">
-            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
-              City <span className="text-red-500">*</span>
-            </label>
-            <Controller
-              control={form.control}
-              name="location"
-              render={({ field, fieldState }) => (
-                <CitySelect
-                  value={field.value}
-                  onChange={field.onChange}
-                  error={fieldState.error?.message}
-                  placeholder="Search your city..."
-                />
-              )}
-            />
-          </div>
-
-          {/* Role/Skills */}
-          <div className="space-y-2">
-            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
-              Role / Skills
-            </label>
-            <Controller
-              control={form.control}
-              name="skills"
-              render={({ field }) => (
-                <div className="space-y-2">
-                  <div className="grid grid-cols-2 gap-2">
-                    {ROLE_OPTIONS.map((role) => (
-                      <label
-                        key={role}
-                        className="flex items-center space-x-2 cursor-pointer"
-                      >
-                        <input
-                          type="checkbox"
-                          checked={field.value?.includes(role)}
-                          onChange={(e) => {
-                            const newValue = e.target.checked
-                              ? [...(field.value || []), role]
-                              : (field.value || []).filter((v) => v !== role);
-                            field.onChange(newValue);
-                          }}
-                          className="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-primary-500 focus:ring-blue-500 dark:focus:ring-primary-500 dark:bg-gray-800"
-                        />
-                        <span className="text-sm dark:text-gray-300">
-                          {role}
-                        </span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              )}
-            />
-          </div>
-
-          {/* Bio */}
-          <div className="space-y-2">
-            <label className="block text-base font-medium text-gray-700 dark:text-gray-300">
-              Bio{' '}
-              <span className="text-gray-400 dark:text-gray-500">
-                (Optional)
-              </span>
-            </label>
-            <Controller
-              control={form.control}
-              name="bio"
-              render={({ field, fieldState }) => (
-                <div className="flex">
-                  <Textarea
-                    {...field}
-                    placeholder="Tell us about yourself..."
-                    rows={4}
-                    className="w-full rounded-lg text-sm"
-                    style={{ resize: 'vertical' }}
-                  />
-                  {fieldState.error && (
-                    <p className="text-sm text-red-500 mt-1">
-                      {fieldState.error.message}
-                    </p>
-                  )}
-                </div>
-              )}
-            />
-          </div>
-
-          <Button
-            className="w-full"
-            type="submit"
-            disabled={!form.formState.isValid || isUpdating || isUploading}
-          >
-            {isUpdating || isUploading ? 'Saving...' : 'Complete Setup'}
-          </Button>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default UserOnboardingPage;

apps/hackathon/src/app/page.tsx

@@ -1,869 +0,0 @@
-import { useNavigate, Link } from 'react-router';
-import { useState } from 'react';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Icon } from '@iconify/react';
-import { ThemeToggle } from '../components/theme-toggle';
-import { useAuthStore } from '@imphnen-frontend-service/service';
-
-export default function HomePage() {
-  const navigate = useNavigate();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [openFaq, setOpenFaq] = useState<number | null>(0);
-  const { session } = useAuthStore();
-  const isAuthenticated = !!session?.token;
-
-  const faqs = [
-    {
-      question: 'Siapa yang bisa mengikuti hackathon ini?',
-      answer:
-        'Hackathon ini terbuka untuk mahasiswa, fresh graduate, dan profesional muda yang memiliki passion di bidang teknologi. Peserta dapat mendaftar secara tim.',
-    },
-    {
-      question: 'Apakah ada biaya pendaftaran?',
-      answer:
-        'Tidak, hackathon ini GRATIS dan terbuka untuk semua peserta yang memenuhi kriteria.',
-    },
-    {
-      question: 'Apa tema hackathon kali ini?',
-      answer:
-        'Tema hackathon kali ini adalah "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif".',
-    },
-    {
-      question: 'Bagaimana format pelaksanaannya?',
-      answer:
-        'Hackathon dilaksanakan secara online dengan berbagai tahap mulai dari pendaftaran, technical meeting, tahap penyisihan, hingga final.',
-    },
-    {
-      question: 'Apa hadiah lombanya?',
-      answer:
-        'Total hadiah senilai Rp14.500.000 dengan juara 1 mendapat Rp6.000.000, juara 2 Rp4.000.000, juara 3 Rp2.500.000, dan juara kategori lainnya Rp2.000.000.',
-    },
-    {
-      question: 'Apakah harus membentuk tim? Boleh solo?',
-      answer:
-        'Tidak boleh solo. Peserta harus membentuk tim yang terdiri dari 2 - 5 orang per tim. Peserta bisa mencari anggota melalui website ini atau WA Group Hackathon.',
-    },
-    {
-      question: 'Apakah boleh menggunakan AI (vibe coding)?',
-      answer:
-        'Ya, peserta diperbolehkan menggunakan AI tools untuk membantu development. Kami merekomendasikan menggunakan Kolosal.ai selama proses development (Free Credit)',
-    },
-    {
-      question: 'Apa project wajib di-deploy?',
-      answer:
-        'Diusahakan project agar di-deploy dan dapat diakses secara online untuk meningkatkan penilaian.',
-    },
-    {
-      question: 'Apakah peserta mendapatkan sertifikat?',
-      answer:
-        'Kami akan memberikan sertifikat kepada tim yang submit project dan menyelesaikan rangkaian hackathon.',
-    },
-    {
-      question: 'Website error dan terjadi masalah?',
-      answer:
-        'Jika menemukan masalah teknis, silakan hubungi kami melalui grup WA Hackathon.',
-    },
-  ];
-
-  return (
-    <main className="min-h-screen bg-white dark:bg-gray-950">
-      {/* Navigation */}
-      <div id="#top" className="hidden"></div>
-      <nav className="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 sticky top-0 z-50">
-        <div className="flex items-center justify-between max-w-7xl mx-auto px-4 md:px-8 py-4">
-          <div className="flex items-center gap-2">
-            <span className="text-lg md:text-xl font-bold dark:text-white">
-              IMPHNEN
-            </span>
-            <a
-              href="#top"
-              className="text-lg md:text-xl font-bold text-primary-500 hover:cursor-pointer"
-            >
-              Hackathon
-            </a>
-          </div>
-          {/* Desktop Menu */}
-          <div className="hidden md:flex text-label1 items-center gap-4 lg:gap-8">
-            <a
-              href="#timeline"
-              className="text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors"
-            >
-              Timeline
-            </a>
-            <a
-              href="#hadiah"
-              className="text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors"
-            >
-              Hadiah
-            </a>
-            <a
-              href="#faq"
-              className="text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white transition-colors"
-            >
-              FAQ
-            </a>
-            <ThemeToggle />
-            {isAuthenticated ? (
-              <Button
-                onClick={() => navigate('/dashboard')}
-                size="sm"
-                className="rounded-lg text-base"
-              >
-                Dashboard
-              </Button>
-            ) : (
-              <>
-                <Button
-                  onClick={() => navigate('/auth/login')}
-                  size="sm"
-                  variant="bordered"
-                  className="rounded-lg text-base dark:bg-gray-800"
-                >
-                  Masuk
-                </Button>
-                <Button
-                  onClick={() => navigate('/auth/signup')}
-                  size="sm"
-                  className="rounded-lg text-base"
-                >
-                  Daftar Sekarang
-                </Button>
-              </>
-            )}
-          </div>
-          {/* Mobile Menu Button */}
-          <div className="flex items-center gap-2 md:hidden">
-            <ThemeToggle />
-            <button
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              className="p-2 cursor-pointer text-gray-900 dark:text-white"
-            >
-              <svg
-                className="w-6 h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </nav>
-
-      {/* Mobile Menu */}
-      {mobileMenuOpen && (
-        <nav className="md:hidden sticky top-18 border-b border-gray-200 dark:border-gray-800 bg-white z-40 dark:bg-gray-900">
-          <div className="flex flex-col items-start gap-4 px-4 py-4">
-            <a
-              href="#timeline"
-              className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
-            >
-              Timeline
-            </a>
-            <a
-              href="#hadiah"
-              className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
-            >
-              Hadiah
-            </a>
-            <a
-              href="#faq"
-              className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white"
-            >
-              FAQ
-            </a>
-            {isAuthenticated ? (
-              <button
-                onClick={() => navigate('/dashboard')}
-                className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
-              >
-                Dashboard
-              </button>
-            ) : (
-              <>
-                <button
-                  onClick={() => navigate('/auth/login')}
-                  className="ms-3 text-gray-600 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white cursor-pointer"
-                >
-                  Masuk
-                </button>
-                <button
-                  onClick={() => navigate('/auth/login')}
-                  className="px-4 py-2 bg-primary-500 text-white text-base rounded-lg hover:bg-primary-600 transition-colors text-center cursor-pointer"
-                >
-                  Daftar Sekarang
-                </button>
-              </>
-            )}
-          </div>
-        </nav>
-      )}
-
-      {/* Hero Section */}
-      <section className="relative w-full overflow-hidden py-20">
-        <div className="absolute inset-0 overflow-hidden">
-          <div
-            className="absolute top-1/4 -left-20 w-100 h-100 rounded-full bg-linear-to-r from-primary/20 to-blue-400/20 blur-3xl"
-            style={{ transform: 'translate(10px, -5px)', opacity: 0.9 }}
-          ></div>
-          <div
-            className="absolute bottom-1/3 -right-20 w-100 h-100 rounded-full bg-linear-to-r from-blue-400/20 to-primary/20 blur-3xl"
-            style={{ transform: 'translate(0px, 0px)', opacity: 1 }}
-          ></div>
-          <div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.1)_1px,transparent_1px)] bg-size-[40px_40px]"></div>
-        </div>
-        <div className="mx-auto container px-4 relative flex flex-col items-center">
-          {/* Logos */}
-          <div className="flex items-center gap-4 md:gap-8 lg:gap-12 mb-8 md:mb-12 lg:mb-16 flex-wrap justify-center">
-            <div className="flex items-center">
-              <img
-                src="images/imphnen-logo.svg"
-                alt="IMPHNEN"
-                className="h-12 md:h-16"
-              />
-            </div>
-            <span className="text-3xl md:text-5xl font-bold text-gray-400 dark:text-gray-500">
-              ×
-            </span>
-            <div className="flex items-center">
-              <img
-                src="images/sponsors/kolosal-logo_rlxbck.svg"
-                alt="Kolosal.ai"
-                className="h-8 md:h-12 dark:invert"
-              />
-            </div>
-          </div>
-          {/* Title */}
-          <h1 className="text-h1 font-bold text-gray-900 dark:text-white mb-4 text-center">
-            Hackathon
-          </h1>
-          {/* Subtitle */}
-          <p className="text-p1 text-primary-500 font-semibold mb-6 md:mb-8 text-center px-4">
-            "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
-          </p>
-          {/* Description */}
-          <p className="text-p3 text-gray-600 dark:text-gray-200 max-w-lg md:max-w-xl text-center mb-8 md:mb-12 px-4 font-sans">
-            Kompetisi pengembangan teknologi untuk menciptakan solusi inovatif
-            yang menghadirkan dampak nyata
-          </p>
-          {/* Status */}
-          <div className="flex flex-col md:flex-row items-center gap-4 md:gap-8 mb-10 md:mb-16 text-base text-gray-600 dark:text-gray-200">
-            <div className="flex items-center gap-2 md:gap-3">
-              <Icon icon="streamline-plump:web" className="w-4 h-4" />
-              <span>Online</span>
-            </div>
-            <div className="flex items-center gap-2 md:gap-3 text-center">
-              <Icon icon="heroicons:clock" className="w-4 h-4" />
-              <span>Pendaftaran hingga 30 November 2025</span>
-            </div>
-          </div>
-          {/* CTA Buttons */}
-          <div className="flex flex-col md:flex-row items-center gap-4 px-4">
-            <Button
-              onClick={() => navigate('/auth/signup')}
-              className="rounded-lg text-base max-h-auto"
-            >
-              Daftar Sekarang
-            </Button>
-            <a
-              href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center justify-center px-4 py-2.5 border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors text-center bg-transparent hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 text-base text-gray-600 dark:text-gray-200 dark:bg-gray-800 rounded-lg font-bai-jamjuree font-semibold"
-            >
-              Gabung Grup WA Hackathon
-            </a>
-          </div>
-          {/* Scroll indicator */}
-          <div className="mt-12 md:mt-20">
-            <svg
-              className="w-6 h-6 text-gray-400 dark:text-gray-500 animate-bounce"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 14l-7 7m0 0l-7-7m7 7V3"
-              />
-            </svg>
-          </div>
-        </div>
-      </section>
-
-      {/* About Section */}
-      <section className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl md:text-5xl font-bold mb-10 dark:text-white">
-            Tentang <span className="text-primary-500">Hackathon</span>
-          </h2>
-          <p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-gray-200 mb-6">
-            <span className="font-semibold text-gray-900 dark:text-white">
-              Hackathon
-            </span>{' '}
-            adalah kompetisi pengembangan teknologi yang mengajak talenta muda
-            untuk berkolaborasi dalam menciptakan solusi inovatif.
-          </p>
-          <p className="font-sans text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-gray-200">
-            IMPHNEN bersama Kolosal.ai mengadakan Hackathon dengan tema lomba{' '}
-            <span className="font-semibold text-primary-500">
-              "Inovasi AI: Mendorong Usaha Lokal dengan AI Inklusif"
-            </span>
-            .
-          </p>
-        </div>
-      </section>
-
-      {/* Prizes Section */}
-      <section
-        id="hadiah"
-        className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-linear-to-b dark:from-gray-950 dark:to-gray-900"
-      >
-        <div className="max-w-lg md:max-w-6xl mx-auto">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4 font-bai-jamjuree dark:text-white">
-              Hadiah <span className="text-primary-500">Menarik</span>
-            </h2>
-            <p className="text-xl md:text-2xl text-primary-500 font-semibold font-sans">
-              Total Prize Pool Rp14.500.000
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {/* Prize 1 */}
-            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-500 transition-colors">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-primary-500"
-                  />
-                </div>
-              </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara 1
-              </h3>
-              <p className="text-2xl font-bold text-primary-500 text-center font-sans">
-                Rp6.000.000
-              </p>
-            </div>
-
-            {/* Prize 2 */}
-            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 transition-colors">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-gray-600 dark:text-gray-200"
-                  />
-                </div>
-              </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara 2
-              </h3>
-              <p className="text-2xl font-bold text-primary-500 text-center font-sans">
-                Rp4.000.000
-              </p>
-            </div>
-
-            {/* Prize 3 */}
-            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-orange-300 dark:hover:border-orange-500 transition-colors">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-orange-600 dark:text-orange-500"
-                  />
-                </div>
-              </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara 3
-              </h3>
-              <p className="text-2xl font-bold text-orange-600 dark:text-orange-500 text-center font-sans">
-                Rp2.500.000
-              </p>
-            </div>
-
-            {/* Special Prize */}
-            <div className="bg-white dark:bg-gray-900 rounded-xl px-4 py-8 shadow-lg border-2 border-gray-300 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500 transition-colors">
-              <div className="flex justify-center mb-4">
-                <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
-                  <Icon
-                    icon="ic:round-star"
-                    className="h-8 w-8 text-purple-600 dark:text-purple-500"
-                  />
-                </div>
-              </div>
-              <h3 className="text-xl font-bold text-center mb-2 dark:text-white">
-                Juara Kategori Lainnya
-              </h3>
-              <p className="text-2xl font-bold text-purple-600 dark:text-purple-500 text-center font-sans">
-                Rp2.000.000
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Timeline Section */}
-      <section
-        id="timeline"
-        className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950"
-      >
-        <div className="max-w-4xl mx-auto font-sans">
-          <div className="text-center mb-12 font-bai-jamjuree">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
-              Timeline <span className="text-primary-500">Acara</span>
-            </h2>
-            <p className="text-lg text-gray-600 dark:text-gray-200">
-              Jadwal lengkap pelaksanaan hackathon
-            </p>
-          </div>
-
-          <div>
-            {/* Timeline Item 1 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  30 November 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Penutupan Registrasi
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Batas akhir pendaftaran peserta hackathon.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 2 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  30 November 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Technical Meeting
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Akan diadakan technical meeting terkait lomba melalui Google
-                  Meet. Stay tune di grup WA Hackathon.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 3 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  1 - 7 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Tahap Penyisihan
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Peserta mengerjakan tantangan yang diberikan.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 4 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
-                <div className="w-0.5 h-full bg-gray-300 dark:bg-gray-700"></div>
-              </div>
-              <div className="flex-1 pb-8">
-                <p className="text-primary-500 font-semibold mb-2">
-                  8 - 14 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Penilaian & Webinar
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Proses penilaian oleh juri dan sesi webinar.
-                </p>
-              </div>
-            </div>
-
-            {/* Timeline Item 5 */}
-            <div className="flex gap-6">
-              <div className="flex flex-col items-center">
-                <div className="w-4 h-4 bg-primary-500 rounded-full"></div>
-              </div>
-              <div className="flex-1">
-                <p className="text-primary-500 font-semibold mb-2">
-                  15 Desember 2025
-                </p>
-                <h3 className="text-xl font-bold mb-2 dark:text-white">
-                  Pengumuman & Final
-                </h3>
-                <p className="text-gray-600 dark:text-gray-200">
-                  Presentasi final dan pengumuman pemenang.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Judges Section */}
-      <section className="py-16 md:py-24 px-4 md:px-8 bg-gray-50 dark:bg-gray-900 font-sans">
-        <div className="md:max-w-6xl mx-auto">
-          <div className="text-center mb-12 font-bai-jamjuree">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
-              Dewan <span className="text-primary-500">Juri</span>
-            </h2>
-            <p className="text-lg text-gray-600 dark:text-gray-200">
-              Perwakilan dari IMPHNEN dan Kolosal.ai yang akan menilai karya
-            </p>
-          </div>
-
-          <div className="w-full max-w-md md:max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-            {/* Judge 1 */}
-            <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
-              <h3 className="text-p3 font-bold mb-1 dark:text-white">
-                Alifais Farrel Ramdhani
-              </h3>
-              <div>
-                <p className="text-primary-500 font-semibold mb-1">CTO</p>
-                <p className="text-gray-600 dark:text-gray-200">Kolosal.ai</p>
-              </div>
-            </div>
-
-            {/* Judge 2 */}
-            <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
-              <h3 className="text-p3 font-bold mb-1 dark:text-white">
-                Anka Tama
-              </h3>
-              <div>
-                <p className="text-primary-500 font-semibold mb-1">Admin</p>
-                <p className="text-gray-600 dark:text-gray-200">IMPHNEN</p>
-              </div>
-            </div>
-
-            {/* Judge 3 */}
-            <div className="flex flex-col justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-8 shadow-lg text-center">
-              <h3 className="text-p3 font-bold mb-1 dark:text-white">
-                Hafid Nur
-              </h3>
-              <div>
-                <p className="text-primary-500 font-semibold mb-1">Moderator</p>
-                <p className="text-gray-600 dark:text-gray-200">IMPHNEN</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* FAQ Section */}
-      <section
-        id="faq"
-        className="py-16 md:py-24 px-4 md:px-8 bg-white dark:bg-gray-950"
-      >
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-5xl font-bold mb-4 text-primary-500">
-              FAQ
-            </h2>
-            <p className="text-lg text-gray-600 dark:text-gray-200">
-              Pertanyaan yang Sering Diajukan
-            </p>
-          </div>
-
-          <div className="space-y-4 font-sans">
-            {faqs.map((faq, index) => (
-              <div
-                key={index}
-                className="border border-gray-200 dark:border-gray-700 rounded-lg dark:bg-gray-900"
-              >
-                <button
-                  onClick={() => setOpenFaq(openFaq === index ? null : index)}
-                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
-                >
-                  <span className="font-semibold text-gray-900 dark:text-white">
-                    {faq.question}
-                  </span>
-                  <svg
-                    className={`w-5 h-5 text-primary-500 transform transition-transform ${
-                      openFaq === index ? 'rotate-180' : ''
-                    }`}
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M19 9l-7 7-7-7"
-                    />
-                  </svg>
-                </button>
-                {openFaq === index && (
-                  <div className="px-6 pb-4 text-gray-600 dark:text-gray-200">
-                    {faq.answer}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Sponsors Section */}
-      <section className="py-20 md:py-28 px-4 md:px-8 bg-gray-50 dark:bg-gray-900">
-        <div className="max-w-6xl mx-auto text-center">
-          <h2 className="text-3xl md:text-5xl font-bold mb-4 dark:text-white">
-            Sponsor & <span className="text-primary-500">Partner</span>
-          </h2>
-          <p className="text-lg text-gray-600 dark:text-gray-200 mb-8">
-            Acara ini sepenuhnya disponsori oleh
-          </p>
-
-          <div className="flex justify-center">
-            <a
-              href="https://kolosal.ai"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg inline-block border-2 border-transparent hover:border-gray-500 dark:hover:border-gray-500 transition-colors"
-            >
-              <img
-                src="images/sponsors/kolosal-logo_rlxbck.svg"
-                alt="Kolosal.ai"
-                className="h-12 md:h-16 dark:invert"
-              />
-            </a>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section
-        id="masuk"
-        className="py-20 md:py-28 px-4 md:px-8 bg-linear-to-b from-white to-blue-50 dark:from-gray-950 dark:to-gray-900"
-      >
-        <div className="max-w-4xl mx-auto text-center font-sans">
-          <h2 className="text-3xl md:text-5xl font-bold mb-6 font-bai-jamjuree dark:text-white">
-            Segera Daftarkan <span className="text-primary-500">Timmu!</span>
-          </h2>
-          <p className="text-lg md:text-xl text-left md:text-center text-gray-600 dark:text-gray-200 mb-8">
-            Jangan lewatkan kesempatan emas untuk bersaing dengan developer
-            terbaik,
-            <br className="hidden md:block" /> belajar dari para ahli, dan
-            memenangkan hadiah jutaan rupiah!
-          </p>
-
-          <div className="flex flex-col md:flex-row gap-4 justify-center">
-            <button
-              onClick={() => navigate('/auth/signup')}
-              className="px-8 py-3 bg-primary-500 text-white text-lg rounded-lg hover:bg-primary-700 transition-colors font-semibold cursor-pointer"
-            >
-              Daftar Sekarang
-            </button>
-            <a
-              href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="px-8 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-lg rounded-lg border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors font-semibold"
-            >
-              Gabung Grup WA Hackathon
-            </a>
-          </div>
-
-          <p className="text-sm text-gray-500 dark:text-gray-500 mt-6">
-            Pendaftaran ditutup pada{' '}
-            <span className="text-primary-500 font-semibold">
-              30 November 2025
-            </span>
-          </p>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="bg-gray-950 text-white py-12 px-4 md:px-8 font-sans">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-            {/* Brand */}
-            <div>
-              <div className="flex items-center gap-2 mb-4 font-bai-jamjuree">
-                <span className="text-2xl font-bold">IMPHNEN</span>
-                <span className="text-2xl font-bold text-blue-500">
-                  Hackathon
-                </span>
-              </div>
-              <p className="text-gray-400 text-sm">
-                Wujudkan ide brilian mu menjadi solusi nyata. Bergabunglah dalam
-                IMPHNEN Hackathon dan jadilah bagian dari perubahan teknologi
-                masa depan.
-              </p>
-              <div className="flex gap-4 mt-4">
-                <div className="flex gap-4">
-                  <a
-                    href="https://fb.com/groups/programmerhandal"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="Facebook"
-                  >
-                    <Icon icon="ic:baseline-facebook" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://www.instagram.com/imphnen.dev"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="Instagram"
-                  >
-                    <Icon icon="mdi:instagram" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://www.linkedin.com/company/imphnen"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="LinkedIn"
-                  >
-                    <Icon icon="mdi:linkedin" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://www.tiktok.com/@imphnen"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="TikTok"
-                  >
-                    <Icon icon="ic:baseline-tiktok" className="w-6 h-6" />
-                  </a>
-                  <a
-                    href="https://github.com/IMPHNEN"
-                    className="text-gray-400 hover:text-accent transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="GitHub"
-                  >
-                    <Icon icon="mdi:github" className="w-6 h-6" />
-                  </a>
-                </div>
-              </div>
-            </div>
-
-            {/* Quick Links */}
-            <div>
-              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
-                Quick Links
-              </h3>
-              <ul className="space-y-2 text-gray-400">
-                <li>
-                  <a
-                    href="#timeline"
-                    className="hover:text-white transition-colors"
-                  >
-                    Timeline
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="#hadiah"
-                    className="hover:text-white transition-colors"
-                  >
-                    Hadiah
-                  </a>
-                </li>
-                <li>
-                  <a href="#faq" className="hover:text-white transition-colors">
-                    FAQ
-                  </a>
-                </li>
-                <li>
-                  <Link
-                    to="/auth/signup"
-                    className="hover:text-white transition-colors"
-                  >
-                    Daftar
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            {/* Contact */}
-            <div>
-              <h3 className="font-bold text-lg mb-4 font-bai-jamjuree">
-                Contact
-              </h3>
-              <ul className="space-y-2 text-gray-400 text-sm">
-                <li className="flex items-start gap-2">
-                  <Icon
-                    icon="material-symbols:mail-outline-rounded"
-                    className="min-w-5 min-h-5 mt-0.5"
-                  />
-                  <a
-                    href="mailto:imphnen@gmail.com"
-                    className="hover:text-white transition-colors"
-                  >
-                    imphnen@gmail.com
-                  </a>
-                </li>
-                <li className="flex items-start gap-2">
-                  <Icon
-                    icon="solar:phone-linear"
-                    className="min-w-5 min-h-5 mt-0.5"
-                  />
-                  <a
-                    href="https://chat.whatsapp.com/BlxrYh9uSC37d7VPhJslGL"
-                    className="hover:text-white transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    WA Group Hackathon
-                  </a>
-                </li>
-                <li className="flex items-start gap-2">
-                  <Icon
-                    icon="streamline-plump:web"
-                    className="min-w-5 min-h-5 mt-0.5"
-                  />
-                  <a
-                    href="https://imphnen.dev"
-                    className="hover:text-white transition-colors"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    IMPHNEN.dev
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
-            <p>
-              © 2025 IMPHNEN - Ingin Menjadi Programmer Handal Namun Enggan
-              Ngoding. All rights reserved.
-            </p>
-          </div>
-        </div>
-      </footer>
-    </main>
-  );
-}

apps/hackathon/src/app/profile/page.tsx

@@ -1,391 +0,0 @@
-import { FC, ReactElement, useState, useEffect } from 'react';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Button, Textarea } from '@imphnen-frontend-service/ui/atoms';
-import { useForm, Controller } from 'react-hook-form';
-import {
-  userEditProfileSchema,
-  TUserEditProfileForm,
-  useUpdateUserMe,
-  useUploadAvatar,
-  useAuthStore,
-} from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
-import { CitySelect } from '../../components/city-select';
-import { Icon } from '@iconify/react';
-
-const ROLE_OPTIONS = [
-  'Frontend Developer',
-  'Backend Developer',
-  'Full Stack Developer',
-  'DevOps Engineer',
-  'UI/UX Designer',
-  'Product Manager',
-  'Data Scientist',
-  'Mobile Developer',
-];
-
-type ProfileModalProps = {
-  open: boolean;
-  onClose: () => void;
-};
-
-const ProfilePage: FC<ProfileModalProps> = ({
-  open,
-  onClose,
-}): ReactElement | null => {
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
-  const [avatarPreview, setAvatarPreview] = useState<string>('');
-
-  const { mutateAsync: updateUser, isPending: isUpdating } = useUpdateUserMe();
-  const { mutateAsync: uploadAvatar, isPending: isUploading } =
-    useUploadAvatar();
-  const { session } = useAuthStore();
-
-  const form = useForm<TUserEditProfileForm>({
-    resolver: zodResolver(userEditProfileSchema),
-    mode: 'all',
-    defaultValues: {
-      fullname: session?.user?.fullname || '',
-      avatar: session?.user?.avatar || null,
-      location: session?.user?.location || '',
-      bio: session?.user?.bio || '',
-      skills: session?.user?.skills || [],
-    },
-  });
-
-  // Set initial avatar preview from current user avatar
-  useEffect(() => {
-    if (session?.user?.avatar && !avatarPreview) {
-      setAvatarPreview(session.user.avatar);
-    }
-    if (session?.user?.fullname) {
-      form.setValue('fullname', session.user.fullname);
-    }
-    if (session?.user?.location) {
-      form.setValue('location', session.user.location);
-    }
-    if (session?.user?.bio) {
-      form.setValue('bio', session.user.bio);
-    }
-    if (session?.user?.skills) {
-      form.setValue('skills', session.user.skills);
-    }
-  }, [
-    session?.user?.avatar,
-    session?.user?.fullname,
-    session?.user?.location,
-    session?.user?.bio,
-    session?.user?.skills,
-    avatarPreview,
-    form,
-  ]);
-
-  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      // Validate file size (max 2MB)
-      if (file.size > 2 * 1024 * 1024) {
-        toast.error('The file is too large. Maximum size is 2MB.');
-        e.target.value = '';
-        return;
-      }
-
-      // Validate file type
-      if (!file.type.startsWith('image/')) {
-        toast.error('The file must be an image');
-        e.target.value = '';
-        return;
-      }
-
-      setAvatarFile(file);
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setAvatarPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const onSubmit = form.handleSubmit(async (data) => {
-    try {
-      let avatarUrl = session?.user?.avatar || null;
-
-      // Upload avatar if a new file was selected
-      if (avatarFile) {
-        const uploadResult = await uploadAvatar(avatarFile);
-        avatarUrl = uploadResult.data.url;
-      }
-
-      // Update user profile
-      await updateUser({
-        fullname: data.fullname,
-        avatar: avatarUrl,
-        location: data.location,
-        bio: data.bio,
-        skills: data.skills,
-      });
-
-      toast.success('Profile updated successfully!');
-
-      // Wait a bit for the onSuccess handler to update localStorage
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      // Close modal
-      onClose();
-    } catch (error) {
-      console.error('Profile update failed:', error);
-      toast.error(
-        `Failed to update profile: ${
-          error instanceof Error ? error.message : 'Unknown error'
-        }`
-      );
-    }
-  });
-
-  const isLoading = isUpdating || isUploading;
-
-  return open ? (
-    <div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-md z-50 overflow-y-auto">
-      <div className="min-h-full flex items-center justify-center">
-        <div className="bg-white dark:bg-gray-900 w-full max-w-md mx-4 my-6 sm:my-8 p-8 rounded-xl border dark:boder-gray-800">
-          <div className="mb-6">
-            <div className="flex items-center justify-between mb-2">
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-                Edit Profile
-              </h1>
-              <button
-                type="button"
-                onClick={onClose}
-                className="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-200 cursor-pointer"
-                aria-label="Close profile modal"
-              >
-                <svg
-                  className="w-6 h-6"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-            <p className="text-gray-600 font-sans dark:text-neutral-400">
-              Update your photo and name
-            </p>
-          </div>
-
-          <form onSubmit={onSubmit} className="space-y-6">
-            {/* Avatar Upload */}
-            <div className="flex flex-col items-center space-y-4">
-              <div className="relative group">
-                {avatarPreview ? (
-                  <img
-                    src={avatarPreview}
-                    alt="Avatar preview"
-                    className="w-24 h-24 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700 group-hover:border-blue-400 dark:group-hover:border-blue-500 transition-colors"
-                  />
-                ) : (
-                  <div className="w-24 h-24 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center group-hover:bg-gray-300 dark:group-hover:bg-gray-600 transition-colors">
-                    <Icon
-                      icon="ic:baseline-person"
-                      width="48"
-                      height="48"
-                      className="text-gray-400 dark:text-neutral-500"
-                    />
-                  </div>
-                )}
-                {/* Camera overlay */}
-                <label
-                  htmlFor="avatar"
-                  className="absolute bottom-0 right-0 bg-primary-500 text-white p-2 rounded-full cursor-pointer hover:bg-primary-600 transition-colors shadow-lg"
-                >
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
-                  <input
-                    id="avatar"
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={handleAvatarChange}
-                    disabled={isLoading}
-                  />
-                </label>
-              </div>
-              <p className="text-sm text-gray-500 dark:text-neutral-400 text-center font-sans">
-                Click the camera icon to change your photo
-                <br />
-                Format: JPG, PNG. Max 2MB
-              </p>
-            </div>
-
-            {/* Full Name */}
-            <ControlledInputField
-              control={form.control}
-              label="Full Name"
-              placeholder="Enter your full name"
-              name="fullname"
-              size="lg"
-            />
-
-            {/* City */}
-            <div className="space-y-2">
-              <label className="block text-label1 font-medium text-neutral-800 dark:text-neutral-300">
-                City
-              </label>
-              <Controller
-                control={form.control}
-                name="location"
-                render={({ field, fieldState }) => (
-                  <CitySelect
-                    value={field.value ?? ''}
-                    onChange={field.onChange}
-                    error={fieldState.error?.message}
-                    placeholder="Search your city..."
-                  />
-                )}
-              />
-            </div>
-
-            {/* Role/Skills */}
-            <div className="space-y-2">
-              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
-                Role / Skills
-              </label>
-              <Controller
-                control={form.control}
-                name="skills"
-                render={({ field }) => (
-                  <div className="space-y-2">
-                    <div className="grid grid-cols-2 gap-2">
-                      {ROLE_OPTIONS.map((role) => (
-                        <label
-                          key={role}
-                          className="flex items-center space-x-2 cursor-pointer font-sans"
-                        >
-                          <input
-                            type="checkbox"
-                            checked={field.value?.includes(role)}
-                            onChange={(e) => {
-                              const newValue = e.target.checked
-                                ? [...(field.value || []), role]
-                                : (field.value || []).filter((v) => v !== role);
-                              field.onChange(newValue);
-                            }}
-                            className="rounded border-gray-300 dark:border-neutral-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-800"
-                          />
-                          <span className="text-sm dark:text-neutral-300">
-                            {role}
-                          </span>
-                        </label>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Bio */}
-            <div className="space-y-2">
-              <label className="block text-label1 font-medium text-gray-700 dark:text-neutral-300">
-                Bio{' '}
-                <span className="text-gray-400 dark:text-neutral-500">
-                  (Optional)
-                </span>
-              </label>
-              <Controller
-                control={form.control}
-                name="bio"
-                render={({ field, fieldState }) => (
-                  <div>
-                    <Textarea
-                      {...field}
-                      placeholder="Tell us about yourself..."
-                      rows={4}
-                      className="w-full font-sans"
-                      size="lg"
-                    />
-                    {fieldState.error && (
-                      <p className="text-sm text-red-500 mt-1">
-                        {fieldState.error.message}
-                      </p>
-                    )}
-                  </div>
-                )}
-              />
-            </div>
-
-            {/* Action Buttons */}
-            <div className="flex space-x-3 pt-4">
-              <Button
-                type="button"
-                variant="secondary"
-                className="flex-1"
-                onClick={onClose}
-                disabled={isLoading}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="flex-1"
-                disabled={isLoading || !form.formState.isValid}
-              >
-                {isLoading ? (
-                  <span className="flex items-center justify-center">
-                    <svg
-                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <circle
-                        className="opacity-25"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        stroke="currentColor"
-                        strokeWidth="4"
-                      />
-                      <path
-                        className="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      />
-                    </svg>
-                    Saving...
-                  </span>
-                ) : (
-                  'Save'
-                )}
-              </Button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  ) : null;
-};
-
-export default ProfilePage;