Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 arraysid
|
3930542182 | ||
|
arraysid
|
6f45ca295b | ||
|
arraysid
|
9c4ce1cca9 |
@@ -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": []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
+13
-2
@@ -1,3 +1,14 @@
|
|||||||
|
# API Endpoint
|
||||||
|
VITE_API_URL=
|
||||||
|
|
||||||
VITE_SUPABASE_URL=https://your-project-id.supabase.co
|
# Payload CMS Secret Key (minimum 32 characters)
|
||||||
VITE_SUPABASE_ANON_KEY=your-anon-key-here
|
CMS_SECRET=your-very-long-secret-key
|
||||||
|
|
||||||
|
# PostgreSQL Connection String
|
||||||
|
CMS_POSTGRES_URL=postgres://user:password@host:port/database
|
||||||
|
|
||||||
|
# S3 Storage Configuration
|
||||||
|
CMS_STORAGE_ENDPOINT=https://your-s3-endpoint.com
|
||||||
|
CMS_STORAGE_ACCESS_KEY_ID=your-access-key-id
|
||||||
|
CMS_STORAGE_SECRET_ACCESS_KEY=your-secret-access-key
|
||||||
|
CMS_STORAGE_REGION=ap-southeast-1
|
||||||
|
|||||||
@@ -62,7 +62,3 @@ storybook-static
|
|||||||
# Next.js
|
# Next.js
|
||||||
.next
|
.next
|
||||||
out
|
out
|
||||||
.cursor/rules/nx-rules.mdc
|
|
||||||
.github/instructions/nx.instructions.md
|
|
||||||
|
|
||||||
.env.local
|
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"mcpServers": {
|
|
||||||
"nx-mcp": {
|
|
||||||
"type": "stdio",
|
|
||||||
"command": "npx",
|
|
||||||
"args": ["nx", "mcp"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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-->
|
|
||||||
@@ -6,10 +6,9 @@
|
|||||||
|
|
||||||
This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
|
This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
|
||||||
|
|
||||||
1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
|
1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">gacha website</a>.
|
||||||
2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
|
2. **Backoffice** - Application for internal management.
|
||||||
3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
|
3. **Dimentorin** - Application for mentoring services.
|
||||||
4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
|
|
||||||
|
|
||||||
## How to install
|
## How to install
|
||||||
|
|
||||||
@@ -25,15 +24,6 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
|
|||||||
|
|
||||||
## How to run
|
## How to run
|
||||||
|
|
||||||
### Setup Environment Variables
|
|
||||||
|
|
||||||
Before running the applications, you need to set up the environment variables. You can do this by copying the `.env.example` file to `.env` and modifying the values according to your needs.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd apps/{appname}
|
|
||||||
cp .env.example .env
|
|
||||||
```
|
|
||||||
|
|
||||||
### Development
|
### Development
|
||||||
|
|
||||||
Use the following commands to run in development mode:
|
Use the following commands to run in development mode:
|
||||||
@@ -50,10 +40,6 @@ Use the following commands to run in development mode:
|
|||||||
```sh
|
```sh
|
||||||
npm run dimentorin:dev
|
npm run dimentorin:dev
|
||||||
```
|
```
|
||||||
- **Landing Page**:
|
|
||||||
```sh
|
|
||||||
npm run landing:dev
|
|
||||||
```
|
|
||||||
|
|
||||||
### Build
|
### Build
|
||||||
|
|
||||||
@@ -71,10 +57,6 @@ Use the following commands to build the applications:
|
|||||||
```sh
|
```sh
|
||||||
npm run dimentorin:build
|
npm run dimentorin:build
|
||||||
```
|
```
|
||||||
- **Landing Page**:
|
|
||||||
```sh
|
|
||||||
npm run landing:build
|
|
||||||
```
|
|
||||||
|
|
||||||
### Production
|
### Production
|
||||||
|
|
||||||
@@ -92,10 +74,6 @@ Use the following commands to run the applications in production mode:
|
|||||||
```sh
|
```sh
|
||||||
npm run dimentorin:prod
|
npm run dimentorin:prod
|
||||||
```
|
```
|
||||||
- **Landing Page**:
|
|
||||||
```sh
|
|
||||||
npm run landing:prod
|
|
||||||
```
|
|
||||||
|
|
||||||
### Storybook
|
### Storybook
|
||||||
|
|
||||||
@@ -109,6 +87,7 @@ This repository uses Storybook to develop, test, and document UI components in a
|
|||||||
npm run ui:storybook
|
npm run ui:storybook
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
- **Run Unit Test**
|
- **Run Unit Test**
|
||||||
|
|
||||||
This command runs unit tests for the UI components to ensure they function as expected.
|
This command runs unit tests for the UI components to ensure they function as expected.
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
Tue, Nov 25, 2025 4:21:27 PM
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
# Deployment trigger
|
|
||||||
# Updated to deploy circular dependency fixes and auth hooks
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
VITE_API_URL=
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" data-theme="light">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Backoffice</title>
|
<title>Backoffice</title>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
-52
@@ -1,52 +0,0 @@
|
|||||||
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"
|
|
||||||
import { PieLabelProps } from "recharts/types/polar/Pie"
|
|
||||||
|
|
||||||
type ChartProps = {
|
|
||||||
name: string
|
|
||||||
value: number
|
|
||||||
color: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const chartData: ChartProps[] = [
|
|
||||||
{ name: "Active", value: 49, color: "#23A1EB" },
|
|
||||||
{ name: "Done", value: 24, color: "#81CBF8" },
|
|
||||||
{ name: "Canceled", value: 27, color: "#BCE1FB" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const RADIAN = Math.PI / 180;
|
|
||||||
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: PieLabelProps) => {
|
|
||||||
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
||||||
const x = cx + radius * Math.cos(-(midAngle ?? 0) * RADIAN);
|
|
||||||
const y = cy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
|
|
||||||
{`${((percent ?? 1) * 100).toFixed(0)}%`}
|
|
||||||
</text>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SessionStatusChart = () => {
|
|
||||||
return (
|
|
||||||
<ResponsiveContainer width="100%" height={320}>
|
|
||||||
<PieChart width={500} height={320}>
|
|
||||||
<Pie
|
|
||||||
data={chartData}
|
|
||||||
dataKey="value"
|
|
||||||
nameKey="name"
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
innerRadius={40}
|
|
||||||
outerRadius={100}
|
|
||||||
labelLine={false}
|
|
||||||
label={renderCustomizedLabel}
|
|
||||||
>
|
|
||||||
{chartData.map((entry, index) => (
|
|
||||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
||||||
))}
|
|
||||||
</Pie>
|
|
||||||
<Tooltip />
|
|
||||||
</PieChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-36
@@ -1,36 +0,0 @@
|
|||||||
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
|
|
||||||
|
|
||||||
type ChartProps = {
|
|
||||||
name: string
|
|
||||||
activeUser: number
|
|
||||||
activeSession: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const chartData: ChartProps[] = [
|
|
||||||
{ name: "2014", activeUser: 0, activeSession: 0 },
|
|
||||||
{ name: "2015", activeUser: 15, activeSession: 25 },
|
|
||||||
{ name: "2016", activeUser: 30, activeSession: 40 },
|
|
||||||
{ name: "2017", activeUser: 45, activeSession: 55 },
|
|
||||||
{ name: "2018", activeUser: 60, activeSession: 70 },
|
|
||||||
{ name: "2019", activeUser: 75, activeSession: 85 },
|
|
||||||
{ name: "2020", activeUser: 90, activeSession: 95 },
|
|
||||||
{ name: "2021", activeUser: 85, activeSession: 80 },
|
|
||||||
{ name: "2022", activeUser: 95, activeSession: 90 },
|
|
||||||
{ name: "2023", activeUser: 100, activeSession: 100 },
|
|
||||||
]
|
|
||||||
|
|
||||||
export const UserGrowthChart = () => {
|
|
||||||
return (
|
|
||||||
<ResponsiveContainer width="100%" height={320}>
|
|
||||||
<LineChart data={chartData} width={500} height={320} margin={{ left: -32 }}>
|
|
||||||
<CartesianGrid />
|
|
||||||
<XAxis dataKey="name" />
|
|
||||||
<YAxis tickCount={10} />
|
|
||||||
<Tooltip />
|
|
||||||
<Legend />
|
|
||||||
<Line dataKey="activeUser" stroke="#23A1EB" />
|
|
||||||
<Line dataKey="activeSession" stroke="#0877C1" />
|
|
||||||
</LineChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
import { Button } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms";
|
|
||||||
import { For } from "@imphnen-frontend-service/utils";
|
|
||||||
import { ReactElement } from "react";
|
|
||||||
import { UserGrowthChart } from "./_components/chart/user-growth";
|
|
||||||
import { SessionStatusChart } from "./_components/chart/session-status";
|
|
||||||
|
|
||||||
const Overview = () => {
|
|
||||||
return (
|
|
||||||
<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 Users</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Components(): ReactElement {
|
|
||||||
return (
|
|
||||||
<BackofficeWrapper title="Dimentorin.dev">
|
|
||||||
<h1 className="text-p1 font-semibold text-neutral-700 mb-5">Overview</h1>
|
|
||||||
|
|
||||||
<div className="space-y-14">
|
|
||||||
<div>
|
|
||||||
<Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
|
|
||||||
Overview
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-5 gap-5">
|
|
||||||
<For data={Array.from({ length: 5 })}>
|
|
||||||
{(_, index) => <Overview key={index} />}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
|
|
||||||
Trends & Analytics
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-7 gap-x-5">
|
|
||||||
<div className="bg-white px-6 py-4 rounded-lg col-span-5">
|
|
||||||
<div className="flex items-center justify-between mb-7">
|
|
||||||
<h2 className="font-semibold text-p3 text-neutral-700">User Growth</h2>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
<UserGrowthChart />
|
|
||||||
</div>
|
|
||||||
<div className="bg-white px-6 py-4 rounded-lg col-span-2">
|
|
||||||
<h2 className="font-semibold text-p3 text-neutral-700 mb-7">Session Status</h2>
|
|
||||||
<SessionStatusChart />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-x-5">
|
|
||||||
<div className="bg-white px-7 py-4 rounded-lg">
|
|
||||||
<h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top 5 Mentors</h2>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="text-label1 bg-primary-50 text-left rounded-full">
|
|
||||||
<th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
|
|
||||||
<th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
|
|
||||||
<th className="font-medium py-4 px-5 rounded-r-lg">Avg Rating</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<For data={Array.from({ length: 5 })}>
|
|
||||||
{(_, index) => (
|
|
||||||
<tr key={index} className="shadow rounded-lg">
|
|
||||||
<td className="py-4 px-5">{index + 1}</td>
|
|
||||||
<td className="py-4 px-5">Mursid Al-Catraz</td>
|
|
||||||
<td className="py-4 px-5">4.9</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white px-6 py-4 rounded-lg">
|
|
||||||
<h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top Booked Mentoring Topics</h2>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<table className="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr className="text-label1 bg-primary-50 text-left font-medium">
|
|
||||||
<th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
|
|
||||||
<th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
|
|
||||||
<th className="font-medium py-4 px-5 rounded-r-lg">Total Sesi</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<For data={Array.from({ length: 5 })}>
|
|
||||||
{(_, index) => (
|
|
||||||
<tr key={index} className="shadow rounded-lg">
|
|
||||||
<td className="py-4 px-5">{index + 1}</td>
|
|
||||||
<td className="py-4 px-5">Mursid Al-Catraz</td>
|
|
||||||
<td className="py-4 px-5">1000</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,181 +0,0 @@
|
|||||||
import { SearchOutlined } from "@ant-design/icons";
|
|
||||||
import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
|
|
||||||
import { cn, For } from "@imphnen-frontend-service/utils";
|
|
||||||
import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
|
|
||||||
import { ReactElement, useState } from "react"
|
|
||||||
|
|
||||||
const TABS = {
|
|
||||||
MENTORING: 'Mentoring',
|
|
||||||
PLATFORM: 'Platform'
|
|
||||||
} as const
|
|
||||||
type Tabs = typeof TABS[keyof typeof TABS]
|
|
||||||
|
|
||||||
type FeedbackStatus = 'done' | 'todo';
|
|
||||||
|
|
||||||
interface FeedbackType {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
email: string
|
|
||||||
rating: number
|
|
||||||
status: FeedbackStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
const mockData: FeedbackType[] = Array.from({ length: 90 }, (_, i) => ({
|
|
||||||
id: i + 1,
|
|
||||||
name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
|
|
||||||
email: 'fullname23@gmail.com',
|
|
||||||
rating: 4.5,
|
|
||||||
status: i % 2 === 0 ? 'done' : 'todo',
|
|
||||||
}))
|
|
||||||
|
|
||||||
export default function Components(): ReactElement {
|
|
||||||
const [activeTab, setActiveTab] = useState<Tabs>(TABS.MENTORING)
|
|
||||||
|
|
||||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
|
|
||||||
const [pagination, setPagination] = useState<PaginationState>({
|
|
||||||
pageIndex: 0,
|
|
||||||
pageSize: 9,
|
|
||||||
});
|
|
||||||
|
|
||||||
const columns: ColumnDef<FeedbackType>[] = [
|
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
meta: { cellClassName: cn("w-20") },
|
|
||||||
header: ({ table }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={table.getIsAllRowsSelected()}
|
|
||||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'name',
|
|
||||||
header: 'Name',
|
|
||||||
accessorKey: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'email',
|
|
||||||
header: 'Email',
|
|
||||||
accessorKey: 'email',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'rating',
|
|
||||||
header: 'Rating',
|
|
||||||
accessorKey: 'rating',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
header: 'Status',
|
|
||||||
accessorKey: 'status',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.status;
|
|
||||||
const statusColors: Record<FeedbackStatus, string> = {
|
|
||||||
done: 'bg-success-200 text-success-500',
|
|
||||||
todo: 'bg-primary-200 text-primary-500',
|
|
||||||
};
|
|
||||||
const statusText: Record<FeedbackStatus, string> = {
|
|
||||||
done: 'Done',
|
|
||||||
todo: 'To Do',
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
|
||||||
>
|
|
||||||
{statusText[status]}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Action',
|
|
||||||
meta: { cellClassName: cn("w-72") },
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 w-max"
|
|
||||||
>
|
|
||||||
<SearchOutlined className="text-[16px]" /> Lihat Feedback
|
|
||||||
</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="Dimentorin.dev">
|
|
||||||
<div className="mb-8 flex justify-between items-center">
|
|
||||||
<h1 className="text-p1 font-semibold text-neutral-700">Feedback</h1>
|
|
||||||
<div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
|
|
||||||
<For data={Object.values(TABS)}>
|
|
||||||
{(tab) => (
|
|
||||||
<Button
|
|
||||||
key={tab}
|
|
||||||
variant="text"
|
|
||||||
className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
|
|
||||||
onClick={() => setActiveTab(tab)}
|
|
||||||
>
|
|
||||||
{tab}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section className="flex flex-col gap-6 p-8 bg-white rounded-md">
|
|
||||||
<div className="flex justify-between items-center gap-5 mb-2">
|
|
||||||
<div className="relative w-full">
|
|
||||||
<Input
|
|
||||||
placeholder="Cari berdasarkan nama mentor/mentee"
|
|
||||||
className="pl-12 w-full max-h-full"
|
|
||||||
/>
|
|
||||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
|
||||||
<SearchOutlined />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>Rating</option>
|
|
||||||
<option value="4.5">4.5</option>
|
|
||||||
<option value="5">5</option>
|
|
||||||
</Select>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>Status</option>
|
|
||||||
<option value="active">Active</option>
|
|
||||||
<option value="inactive">Inactive</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable data={mockData} columns={columns} table={table} />
|
|
||||||
</section>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import { BackofficeWrapper } from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import { FC, ReactElement } from 'react';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminUsers,
|
|
||||||
getAdminTeams,
|
|
||||||
getAdminSubmissions,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
|
|
||||||
export const HackathonDashboardPage: FC = (): ReactElement => {
|
|
||||||
// Fetch total participants
|
|
||||||
const { data: usersData } = useQuery({
|
|
||||||
queryKey: ['admin-users-count'],
|
|
||||||
queryFn: () => getAdminUsers({ page: 1, per_page: 1 }),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fetch total teams
|
|
||||||
const { data: teamsData } = useQuery({
|
|
||||||
queryKey: ['admin-teams-count'],
|
|
||||||
queryFn: () => getAdminTeams({ page: 1, per_page: 1 }),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Fetch total submissions
|
|
||||||
const { data: submissionsData } = useQuery({
|
|
||||||
queryKey: ['admin-submissions-count'],
|
|
||||||
queryFn: () => getAdminSubmissions({ page: 1, per_page: 1 }),
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalParticipants = usersData?.meta?.total_data ?? '??';
|
|
||||||
const totalTeams = teamsData?.meta?.total_data ?? '??';
|
|
||||||
const totalSubmissions = submissionsData?.meta?.total_data ?? '??';
|
|
||||||
|
|
||||||
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">
|
|
||||||
{totalParticipants}
|
|
||||||
</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">
|
|
||||||
{totalTeams}
|
|
||||||
</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">
|
|
||||||
{totalSubmissions}
|
|
||||||
</h3>
|
|
||||||
<p className="text-neutral-400 text-p3">Total Project Submitted</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HackathonDashboardPage;
|
|
||||||
-249
@@ -1,249 +0,0 @@
|
|||||||
import { FC } from 'react';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import {
|
|
||||||
CloseOutlined,
|
|
||||||
LinkOutlined,
|
|
||||||
ProjectOutlined,
|
|
||||||
FileImageOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { TAdminSubmissionItem } from '@imphnen-frontend-service/service';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
|
|
||||||
interface SubmissionModalProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
submission: TAdminSubmissionItem;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SubmissionModal: FC<SubmissionModalProps> = ({
|
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
submission,
|
|
||||||
}) => {
|
|
||||||
if (!isOpen) return null;
|
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'submitted':
|
|
||||||
return 'bg-success-50 border-success-200 text-success-800';
|
|
||||||
case 'pending':
|
|
||||||
return 'bg-orange-50 border-orange-200 text-orange-800';
|
|
||||||
case 'approved':
|
|
||||||
return 'bg-blue-50 border-blue-200 text-blue-800';
|
|
||||||
case 'rejected':
|
|
||||||
return 'bg-error-50 border-error-200 text-error-800';
|
|
||||||
default:
|
|
||||||
return 'bg-neutral-50 border-neutral-200 text-neutral-800';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
||||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between p-6 border-b border-neutral-200">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 rounded-full bg-success-100 flex items-center justify-center">
|
|
||||||
<ProjectOutlined className="text-success-600 text-lg" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-semibold text-neutral-900">
|
|
||||||
{submission.project_name}
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-neutral-500">
|
|
||||||
Team ID: {submission.team_id} • Submitted{' '}
|
|
||||||
{new Date(submission.submitted_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="text-neutral-400 hover:text-neutral-600 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
<CloseOutlined className="text-xl" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-6 space-y-6">
|
|
||||||
{/* Submission Status */}
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex items-center gap-3 p-4 border rounded-lg',
|
|
||||||
getStatusColor(submission.status)
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'w-3 h-3 rounded-full',
|
|
||||||
submission.status === 'submitted' && 'bg-success-500',
|
|
||||||
submission.status === 'pending' && 'bg-orange-500',
|
|
||||||
submission.status === 'approved' && 'bg-blue-500',
|
|
||||||
submission.status === 'rejected' && 'bg-error-500'
|
|
||||||
)}
|
|
||||||
></div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium">
|
|
||||||
Status:{' '}
|
|
||||||
{submission.status.charAt(0).toUpperCase() +
|
|
||||||
submission.status.slice(1)}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs">Submitted by: {submission.submitted_by}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Project Description */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-medium text-neutral-700 mb-2">
|
|
||||||
Project Description
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-neutral-600 leading-relaxed">
|
|
||||||
{submission.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Project Links */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="text-sm font-medium text-neutral-700">
|
|
||||||
Project Links
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{/* Repository URL */}
|
|
||||||
<div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<LinkOutlined className="text-primary-500 mt-1" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-xs font-medium text-neutral-600 mb-1">
|
|
||||||
Repository
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={submission.repository_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
|
|
||||||
>
|
|
||||||
{submission.repository_url}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Demo URL */}
|
|
||||||
{submission.demo_url && (
|
|
||||||
<div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<LinkOutlined className="text-primary-500 mt-1" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-xs font-medium text-neutral-600 mb-1">
|
|
||||||
Live Demo
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={submission.demo_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
|
|
||||||
>
|
|
||||||
{submission.demo_url}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Presentation URL */}
|
|
||||||
{submission.presentation_url && (
|
|
||||||
<div className="flex items-start gap-3 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<LinkOutlined className="text-primary-500 mt-1" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-xs font-medium text-neutral-600 mb-1">
|
|
||||||
Presentation
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href={submission.presentation_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary-600 hover:text-primary-700 hover:underline break-all"
|
|
||||||
>
|
|
||||||
{submission.presentation_url}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Screenshots */}
|
|
||||||
{submission.screenshots && submission.screenshots.length > 0 && (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h3 className="text-sm font-medium text-neutral-700 flex items-center gap-2">
|
|
||||||
<FileImageOutlined className="text-primary-500" />
|
|
||||||
Screenshots ({submission.screenshots.length})
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{submission.screenshots.map((screenshot, index) => (
|
|
||||||
<a
|
|
||||||
key={index}
|
|
||||||
href={screenshot}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="block rounded-lg overflow-hidden border border-neutral-200 hover:border-primary-300 transition-colors"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={screenshot}
|
|
||||||
alt={`Screenshot ${index + 1}`}
|
|
||||||
className="w-full h-40 object-cover"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Metadata */}
|
|
||||||
<div className="grid grid-cols-2 gap-4 pt-4 border-t border-neutral-200">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-neutral-500 mb-1">Created</p>
|
|
||||||
<p className="text-sm text-neutral-900">
|
|
||||||
{new Date(submission.created_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-neutral-500 mb-1">Last Updated</p>
|
|
||||||
<p className="text-sm text-neutral-900">
|
|
||||||
{new Date(submission.updated_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex items-center justify-end gap-3 p-6 border-t border-neutral-200 bg-neutral-50">
|
|
||||||
<Button variant="secondary" onClick={onClose}>
|
|
||||||
Close
|
|
||||||
</Button>
|
|
||||||
{/* <Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
console.log('Edit submission:', submission.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Edit Status
|
|
||||||
</Button> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SubmissionModal;
|
|
||||||
@@ -1,375 +0,0 @@
|
|||||||
import {
|
|
||||||
FC,
|
|
||||||
ReactElement,
|
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useCallback,
|
|
||||||
} from 'react';
|
|
||||||
import SubmissionModal from './_components/submission-modal';
|
|
||||||
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 {
|
|
||||||
SearchOutlined,
|
|
||||||
FilterOutlined,
|
|
||||||
LoadingOutlined,
|
|
||||||
EyeOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminSubmissions,
|
|
||||||
TAdminSubmissionItem,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { useSearchParams } from 'react-router-dom';
|
|
||||||
|
|
||||||
type SubmissionType = TAdminSubmissionItem;
|
|
||||||
|
|
||||||
export const HackathonSubmissionsPage: FC = (): ReactElement => {
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
const currentPage = Math.max(
|
|
||||||
1,
|
|
||||||
parseInt(searchParams.get('page') || '1', 10)
|
|
||||||
);
|
|
||||||
const searchQuery = searchParams.get('search') || '';
|
|
||||||
const perPage = parseInt(searchParams.get('per_page') || '10', 10);
|
|
||||||
const statusFilter = searchParams.get('status') || 'all';
|
|
||||||
|
|
||||||
const [showSubmissionModal, setShowSubmissionModal] = useState(false);
|
|
||||||
const [selectedSubmission, setSelectedSubmission] =
|
|
||||||
useState<SubmissionType | null>(null);
|
|
||||||
const [globalFilter, setGlobalFilter] = useState(searchQuery);
|
|
||||||
|
|
||||||
// Fetch submissions from API
|
|
||||||
const {
|
|
||||||
data: submissionsResponse,
|
|
||||||
isLoading,
|
|
||||||
isFetching,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
'admin-submissions',
|
|
||||||
currentPage,
|
|
||||||
perPage,
|
|
||||||
statusFilter,
|
|
||||||
searchQuery,
|
|
||||||
],
|
|
||||||
queryFn: () =>
|
|
||||||
getAdminSubmissions({
|
|
||||||
page: currentPage,
|
|
||||||
per_page: perPage,
|
|
||||||
status: statusFilter !== 'all' ? statusFilter : undefined,
|
|
||||||
search: searchQuery || undefined,
|
|
||||||
}),
|
|
||||||
staleTime: 30000, // 30 seconds cache
|
|
||||||
gcTime: 5 * 60 * 1000, // 5 minutes
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalData = submissionsResponse?.meta?.total_data || 0;
|
|
||||||
const totalPages = submissionsResponse?.meta?.total_page || 1;
|
|
||||||
|
|
||||||
// Handle page change
|
|
||||||
const handlePageChange = useCallback(
|
|
||||||
(newPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', newPage.toString());
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
if (statusFilter !== 'all') params.set('status', statusFilter);
|
|
||||||
setSearchParams(params);
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
[setSearchParams, perPage, searchQuery, statusFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Validate page number
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isLoading && totalPages > 0 && currentPage > totalPages) {
|
|
||||||
setSearchParams({ page: totalPages.toString() });
|
|
||||||
}
|
|
||||||
}, [currentPage, totalPages, setSearchParams, isLoading]);
|
|
||||||
|
|
||||||
// Sync globalFilter with URL
|
|
||||||
useEffect(() => {
|
|
||||||
setGlobalFilter(searchQuery);
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
// Handle search
|
|
||||||
const handleSearch = useCallback(() => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (globalFilter.trim()) {
|
|
||||||
params.set('search', globalFilter.trim());
|
|
||||||
}
|
|
||||||
if (statusFilter !== 'all') params.set('status', statusFilter);
|
|
||||||
setSearchParams(params);
|
|
||||||
}, [globalFilter, setSearchParams, perPage, statusFilter]);
|
|
||||||
|
|
||||||
const handleSearchKeyPress = useCallback(
|
|
||||||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[handleSearch]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle per page change
|
|
||||||
const handlePerPageChange = useCallback(
|
|
||||||
(newPerPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
params.set('per_page', newPerPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
if (statusFilter !== 'all') params.set('status', statusFilter);
|
|
||||||
setSearchParams(params);
|
|
||||||
},
|
|
||||||
[setSearchParams, searchQuery, statusFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle status filter change
|
|
||||||
// const handleStatusFilterChange = useCallback(
|
|
||||||
// (newStatus: string) => {
|
|
||||||
// const params = new URLSearchParams();
|
|
||||||
// params.set('page', '1');
|
|
||||||
// if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
// if (searchQuery) params.set('search', searchQuery);
|
|
||||||
// if (newStatus !== 'all') params.set('status', newStatus);
|
|
||||||
// setSearchParams(params);
|
|
||||||
// },
|
|
||||||
// [setSearchParams, perPage, searchQuery]
|
|
||||||
// );
|
|
||||||
|
|
||||||
// Handle modal
|
|
||||||
const handleShowSubmissionModal = useCallback(
|
|
||||||
(submission: SubmissionType) => {
|
|
||||||
setSelectedSubmission(submission);
|
|
||||||
setShowSubmissionModal(true);
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleCloseSubmissionModal = useCallback(() => {
|
|
||||||
setShowSubmissionModal(false);
|
|
||||||
setSelectedSubmission(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Get submissions data
|
|
||||||
const filteredData = useMemo(() => {
|
|
||||||
return submissionsResponse?.data || [];
|
|
||||||
}, [submissionsResponse]);
|
|
||||||
|
|
||||||
// Memoize columns
|
|
||||||
const columns: ColumnDef<SubmissionType>[] = useMemo(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
accessorKey: 'project_name',
|
|
||||||
header: 'Project Name',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="font-medium text-neutral-900">
|
|
||||||
{row.original.project_name}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'team_id',
|
|
||||||
header: 'Team ID',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-sm text-neutral-700 font-mono">
|
|
||||||
{row.original.team_id}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'status',
|
|
||||||
header: 'Status',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.status;
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'inline-flex items-center gap-1 px-2 py-1 rounded-2xl text-xs font-medium',
|
|
||||||
status === 'submitted'
|
|
||||||
? 'bg-success-100 text-success-800'
|
|
||||||
: status === 'pending'
|
|
||||||
? 'bg-orange-100 text-orange-800'
|
|
||||||
: 'bg-neutral-100 text-neutral-700'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{status.charAt(0).toUpperCase() + status.slice(1)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'submitted_at',
|
|
||||||
header: 'Submitted',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-neutral-900 text-sm">
|
|
||||||
{new Date(row.original.submitted_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 }) => (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
className="flex items-center gap-2 text-sm px-4 py-2"
|
|
||||||
onClick={() => handleShowSubmissionModal(row.original)}
|
|
||||||
>
|
|
||||||
<EyeOutlined className="text-sm" />
|
|
||||||
View
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[handleShowSubmissionModal]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
|
|
||||||
<h1 className="mb-8 text-p1 font-semibold text-neutral-700">
|
|
||||||
Project Submissions
|
|
||||||
</h1>
|
|
||||||
<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">
|
|
||||||
<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 by project name..."
|
|
||||||
value={globalFilter}
|
|
||||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
|
||||||
onKeyPress={handleSearchKeyPress}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Per Page Dropdown */}
|
|
||||||
<div className="relative">
|
|
||||||
<select
|
|
||||||
className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={perPage}
|
|
||||||
onChange={(e) =>
|
|
||||||
handlePerPageChange(parseInt(e.target.value, 10))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value={10}>10 / page</option>
|
|
||||||
<option value={20}>20 / page</option>
|
|
||||||
<option value={50}>50 / page</option>
|
|
||||||
<option value={100}>100 / page</option>
|
|
||||||
</select>
|
|
||||||
</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-40 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={statusFilter}
|
|
||||||
onChange={(e) => handleStatusFilterChange(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="all">All Status</option>
|
|
||||||
<option value="submitted">Submitted</option>
|
|
||||||
<option value="pending">Pending</option>
|
|
||||||
<option value="approved">Approved</option>
|
|
||||||
<option value="rejected">Rejected</option>
|
|
||||||
</select>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Active filters */}
|
|
||||||
{/* {statusFilter !== 'all' && (
|
|
||||||
<div className="flex flex-wrap gap-2 items-center">
|
|
||||||
<span className="text-sm text-neutral-600">Active filters:</span>
|
|
||||||
<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={() => handleStatusFilterChange('all')}
|
|
||||||
className="text-info-600 hover:text-info-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
handleStatusFilterChange('all');
|
|
||||||
setGlobalFilter('');
|
|
||||||
}}
|
|
||||||
className="text-sm text-neutral-600"
|
|
||||||
>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
{/* Loading & results */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
|
|
||||||
<span className="ml-3 text-neutral-600">
|
|
||||||
Loading submissions...
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : filteredData.length > 0 ? (
|
|
||||||
<>
|
|
||||||
<div className="text-sm text-neutral-600">
|
|
||||||
Showing {filteredData.length} of {totalData} submissions (Page{' '}
|
|
||||||
{currentPage} of {totalPages})
|
|
||||||
{isFetching && (
|
|
||||||
<span className="ml-2 text-primary-500">(Updating...)</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DataTable
|
|
||||||
data={filteredData}
|
|
||||||
columns={columns}
|
|
||||||
pageSize={perPage}
|
|
||||||
manualPagination={true}
|
|
||||||
pageCount={totalPages}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12 text-neutral-500">
|
|
||||||
No submissions found. Try adjusting your filters.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Submission Modal */}
|
|
||||||
{selectedSubmission && (
|
|
||||||
<SubmissionModal
|
|
||||||
isOpen={showSubmissionModal}
|
|
||||||
onClose={handleCloseSubmissionModal}
|
|
||||||
submission={selectedSubmission}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HackathonSubmissionsPage;
|
|
||||||
-514
@@ -1,514 +0,0 @@
|
|||||||
import { FC, useState, useEffect, useMemo, useRef } from 'react';
|
|
||||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import { CityFilterSelect } from '../../../../components/city-filter-select';
|
|
||||||
import TeamBannerPlaceholder from './team-banner-placeholder';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
import { TAdminTeamItem } from '@imphnen-frontend-service/service';
|
|
||||||
import {
|
|
||||||
TeamOutlined,
|
|
||||||
CloseOutlined,
|
|
||||||
DeleteOutlined,
|
|
||||||
SaveOutlined,
|
|
||||||
CalendarOutlined,
|
|
||||||
CrownOutlined,
|
|
||||||
ExclamationOutlined,
|
|
||||||
UploadOutlined,
|
|
||||||
CameraOutlined,
|
|
||||||
EyeOutlined,
|
|
||||||
EyeInvisibleOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
|
|
||||||
type TeamType = TAdminTeamItem;
|
|
||||||
|
|
||||||
interface ModalProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
team: TeamType | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ModalTeamDetail: FC<ModalProps> = ({ isOpen, onClose, team }) => {
|
|
||||||
const [formData, setFormData] = useState<TeamType | null>(null);
|
|
||||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
||||||
const [showLogoMenu, setShowLogoMenu] = useState(false);
|
|
||||||
const logoInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
const bannerInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
// Initialize form data when modal opens
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
if (team) {
|
|
||||||
setFormData({ ...team });
|
|
||||||
} else {
|
|
||||||
setFormData({
|
|
||||||
id: '',
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
city: '',
|
|
||||||
banner: null,
|
|
||||||
logo: null,
|
|
||||||
visibility: 'public',
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
leader_id: '',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [isOpen, team]);
|
|
||||||
|
|
||||||
// Check if form has changes
|
|
||||||
const hasChanges = useMemo(() => {
|
|
||||||
if (!formData || !team) return !!formData;
|
|
||||||
return (
|
|
||||||
formData.name !== team.name ||
|
|
||||||
formData.description !== team.description ||
|
|
||||||
formData.city !== team.city ||
|
|
||||||
formData.visibility !== team.visibility ||
|
|
||||||
formData.logo !== team.logo ||
|
|
||||||
formData.banner !== team.banner
|
|
||||||
);
|
|
||||||
}, [formData, team]);
|
|
||||||
|
|
||||||
// Check if required fields are filled
|
|
||||||
const isFormValid = useMemo(() => {
|
|
||||||
if (!formData) return false;
|
|
||||||
return (
|
|
||||||
formData.name.trim() !== '' &&
|
|
||||||
formData.city.trim() !== '' &&
|
|
||||||
formData.description.trim() !== ''
|
|
||||||
);
|
|
||||||
}, [formData]);
|
|
||||||
|
|
||||||
const canSave = hasChanges && isFormValid;
|
|
||||||
|
|
||||||
if (!isOpen || !formData) return null;
|
|
||||||
|
|
||||||
const handleInputChange = (field: keyof TeamType, value: string | null) => {
|
|
||||||
setFormData((prev) => (prev ? { ...prev, [field]: value } : null));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
console.log('Saving team:', formData);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = () => {
|
|
||||||
if (!team) return;
|
|
||||||
console.log('Deleting team:', team.id);
|
|
||||||
setShowDeleteConfirm(false);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLogoUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
if (!file.type.startsWith('image/')) {
|
|
||||||
alert('Please select an image file');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (file.size > 5 * 1024 * 1024) {
|
|
||||||
alert('Image size must be less than 5MB');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const logoUrl = e.target?.result as string;
|
|
||||||
handleInputChange('logo', logoUrl);
|
|
||||||
setShowLogoMenu(false);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBannerUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = event.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
if (!file.type.startsWith('image/')) {
|
|
||||||
alert('Please select an image file');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (file.size > 5 * 1024 * 1024) {
|
|
||||||
alert('Image size must be less than 5MB');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const bannerUrl = e.target?.result as string;
|
|
||||||
handleInputChange('banner', bannerUrl);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
||||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between p-6 border-b border-neutral-200">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
|
|
||||||
<TeamOutlined className="text-primary-600 text-lg" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-semibold text-neutral-900">
|
|
||||||
{team ? 'Team Details' : 'Create New Team'}
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-neutral-500">
|
|
||||||
{team
|
|
||||||
? 'View and manage team information'
|
|
||||||
: 'Add a new team to the hackathon'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="p-2 hover:bg-neutral-100 rounded-lg transition-colors cursor-pointer"
|
|
||||||
onClick={() => {
|
|
||||||
setShowLogoMenu(false);
|
|
||||||
onClose();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CloseOutlined className="text-neutral-400 text-lg" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-6 space-y-6" onClick={() => setShowLogoMenu(false)}>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={logoInputRef}
|
|
||||||
onChange={handleLogoUpload}
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={bannerInputRef}
|
|
||||||
onChange={handleBannerUpload}
|
|
||||||
accept="image/*"
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Banner Section */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Team Banner{' '}
|
|
||||||
<span className="text-xs text-neutral-500">
|
|
||||||
(3:1 aspect ratio recommended)
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<div className="relative group">
|
|
||||||
<TeamBannerPlaceholder
|
|
||||||
banner={formData.banner || undefined}
|
|
||||||
teamName={formData.name || 'Team Name'}
|
|
||||||
className="rounded-lg border border-neutral-200 transition-all group-hover:border-primary-300"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
bannerInputRef.current?.click();
|
|
||||||
}}
|
|
||||||
className="bg-white/90 hover:bg-white text-neutral-700 border-transparent shadow-sm gap-2"
|
|
||||||
>
|
|
||||||
<UploadOutlined className="text-sm" />
|
|
||||||
{formData.banner ? 'Change Banner' : 'Add Banner'}
|
|
||||||
</Button>
|
|
||||||
{formData.banner && (
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleInputChange('banner', null);
|
|
||||||
}}
|
|
||||||
className="bg-white/90 hover:bg-white text-red-600 border-transparent shadow-sm hover:text-red-700 gap-2"
|
|
||||||
>
|
|
||||||
<DeleteOutlined className="text-sm" />
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Logo & Name */}
|
|
||||||
<div className="grid grid-cols-12 gap-4 items-start">
|
|
||||||
<div className="col-span-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700 mb-2">
|
|
||||||
Logo
|
|
||||||
</label>
|
|
||||||
<div className="relative group">
|
|
||||||
<div className="w-24 h-24 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border border-neutral-200 group-hover:border-primary-300 transition-colors">
|
|
||||||
{formData.logo ? (
|
|
||||||
<img
|
|
||||||
src={formData.logo}
|
|
||||||
alt={formData.name || 'Team Logo'}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<TeamOutlined className="text-neutral-400 text-xl" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setShowLogoMenu(!showLogoMenu);
|
|
||||||
}}
|
|
||||||
className="absolute inset-0 bg-neutral-300/80 cursor-pointer rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center w-24 h-24"
|
|
||||||
>
|
|
||||||
<CameraOutlined className="text-white text-lg" />
|
|
||||||
</button>
|
|
||||||
{showLogoMenu && (
|
|
||||||
<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={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
logoInputRef.current?.click();
|
|
||||||
}}
|
|
||||||
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.logo ? 'Change Logo' : 'Upload Logo'}
|
|
||||||
</button>
|
|
||||||
{formData.logo && (
|
|
||||||
<button
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleInputChange('logo', null);
|
|
||||||
setShowLogoMenu(false);
|
|
||||||
}}
|
|
||||||
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 Logo
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-span-10 space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Team Name <span className="text-danger-500">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
|
|
||||||
placeholder="Enter team name"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Description <span className="text-danger-500">*</span>
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:border-primary-500 focus:outline-none resize-none"
|
|
||||||
placeholder="Enter team description"
|
|
||||||
rows={3}
|
|
||||||
value={formData.description}
|
|
||||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* City */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
City <span className="text-danger-500">*</span>
|
|
||||||
</label>
|
|
||||||
<CityFilterSelect
|
|
||||||
value={formData.city || 'all'}
|
|
||||||
onChange={(city) =>
|
|
||||||
handleInputChange('city', city === 'all' ? '' : city)
|
|
||||||
}
|
|
||||||
className="w-full"
|
|
||||||
placeholder="Search cities..."
|
|
||||||
allOptionLabel="Select a city"
|
|
||||||
filterIcon={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Visibility */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Team Visibility
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="visibility"
|
|
||||||
value="public"
|
|
||||||
checked={formData.visibility === 'public'}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange('visibility', e.target.value)
|
|
||||||
}
|
|
||||||
className="text-primary-600"
|
|
||||||
/>
|
|
||||||
<EyeOutlined className="text-info-600" />
|
|
||||||
<span className="text-sm">Public</span>
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="visibility"
|
|
||||||
value="private"
|
|
||||||
checked={formData.visibility === 'private'}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange('visibility', e.target.value)
|
|
||||||
}
|
|
||||||
className="text-primary-600"
|
|
||||||
/>
|
|
||||||
<EyeInvisibleOutlined className="text-neutral-600" />
|
|
||||||
<span className="text-sm">Private</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Team Details */}
|
|
||||||
{team && (
|
|
||||||
<div className="space-y-4 border-t border-neutral-200 pt-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Team Leader ID
|
|
||||||
</label>
|
|
||||||
<div className="p-3 bg-neutral-50 rounded-lg flex items-center gap-3">
|
|
||||||
<CrownOutlined className="text-yellow-600 text-lg" />
|
|
||||||
<span className="text-sm text-neutral-700 font-mono">
|
|
||||||
{team.leader_id}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Created
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<CalendarOutlined className="text-neutral-500" />
|
|
||||||
<span className="text-sm text-neutral-700">
|
|
||||||
{new Date(team.created_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-neutral-700">
|
|
||||||
Last Updated
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2 p-3 bg-neutral-50 rounded-lg">
|
|
||||||
<CalendarOutlined className="text-neutral-500" />
|
|
||||||
<span className="text-sm text-neutral-700">
|
|
||||||
{new Date(team.updated_at).toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex items-center justify-between p-6 border-t border-neutral-200">
|
|
||||||
<div>
|
|
||||||
{team && (
|
|
||||||
<Button
|
|
||||||
variant="danger"
|
|
||||||
size="md"
|
|
||||||
onClick={() => setShowDeleteConfirm(true)}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<DeleteOutlined />
|
|
||||||
Delete Team
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button variant="secondary" size="md" onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="md"
|
|
||||||
onClick={handleSave}
|
|
||||||
disabled={!canSave}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<SaveOutlined />
|
|
||||||
{team ? 'Save Changes' : 'Create Team'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Delete Confirmation Modal */}
|
|
||||||
{showDeleteConfirm && (
|
|
||||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-60 p-4">
|
|
||||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
|
|
||||||
<div className="flex items-center gap-4 mb-4">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-danger-100 flex items-center justify-center">
|
|
||||||
<ExclamationOutlined className="text-danger-600 text-xl" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-neutral-900">
|
|
||||||
Delete Team
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-neutral-500">
|
|
||||||
This action cannot be undone.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-sm text-neutral-700 mb-6">
|
|
||||||
Are you sure you want to delete "{team?.name}"? This will
|
|
||||||
permanently remove the team and all associated data.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3 justify-end">
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="md"
|
|
||||||
onClick={() => setShowDeleteConfirm(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="danger"
|
|
||||||
size="md"
|
|
||||||
onClick={handleDelete}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<DeleteOutlined />
|
|
||||||
Delete Team
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalTeamDetail;
|
|
||||||
-82
@@ -1,82 +0,0 @@
|
|||||||
import { FC } from 'react';
|
|
||||||
import { TeamOutlined } from '@ant-design/icons';
|
|
||||||
import { cn } from '@imphnen-frontend-service/utils';
|
|
||||||
|
|
||||||
interface TeamBannerPlaceholderProps {
|
|
||||||
banner?: string;
|
|
||||||
teamName: string;
|
|
||||||
className?: string;
|
|
||||||
showPlaceholder?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const TeamBannerPlaceholder: FC<TeamBannerPlaceholderProps> = ({
|
|
||||||
banner,
|
|
||||||
teamName,
|
|
||||||
className = '',
|
|
||||||
showPlaceholder = true,
|
|
||||||
}) => {
|
|
||||||
const aspectRatioClass = 'aspect-[3/1]'; // 3:1 aspect ratio
|
|
||||||
|
|
||||||
if (!banner && !showPlaceholder) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (banner) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'w-full bg-gray-100 overflow-hidden relative',
|
|
||||||
aspectRatioClass,
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={banner}
|
|
||||||
alt={`${teamName} banner`}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
onError={(e) => {
|
|
||||||
// Fallback to placeholder if image fails to load
|
|
||||||
const target = e.target as HTMLImageElement;
|
|
||||||
target.style.display = 'none';
|
|
||||||
const placeholder = target.nextElementSibling as HTMLElement;
|
|
||||||
if (placeholder) {
|
|
||||||
placeholder.style.display = 'flex';
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/* Fallback placeholder (hidden by default, shown on image error) */}
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'absolute inset-0 bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
|
|
||||||
'hidden' // Hidden by default
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="text-center">
|
|
||||||
<TeamOutlined className="text-4xl text-gray-400 mb-2" />
|
|
||||||
<p className="text-sm text-gray-500 font-medium">{teamName}</p>
|
|
||||||
<p className="text-xs text-gray-400">Team Banner</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// No banner - show placeholder
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'w-full bg-linear-to-r from-gray-100 to-gray-200 flex items-center justify-center',
|
|
||||||
aspectRatioClass,
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="text-center">
|
|
||||||
<TeamOutlined className="text-4xl text-gray-400 mb-2" />
|
|
||||||
<p className="text-sm text-gray-500 font-medium">{teamName}</p>
|
|
||||||
<p className="text-xs text-gray-400">No Banner</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TeamBannerPlaceholder;
|
|
||||||
@@ -1,447 +0,0 @@
|
|||||||
import {
|
|
||||||
FC,
|
|
||||||
ReactElement,
|
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useCallback,
|
|
||||||
} from 'react';
|
|
||||||
import ModalTeamDetail from './_components/modal-team-detail-new';
|
|
||||||
import { CityFilterSelect } from '../../../components/city-filter-select';
|
|
||||||
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,
|
|
||||||
TeamOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
FilterOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
LoadingOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminTeams,
|
|
||||||
TAdminTeamItem,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { useSearchParams } from 'react-router-dom';
|
|
||||||
|
|
||||||
type TeamType = TAdminTeamItem;
|
|
||||||
|
|
||||||
export const HackathonTeamsPage: FC = (): ReactElement => {
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
const currentPage = Math.max(
|
|
||||||
1,
|
|
||||||
parseInt(searchParams.get('page') || '1', 10)
|
|
||||||
);
|
|
||||||
const searchQuery = searchParams.get('search') || '';
|
|
||||||
const perPage = parseInt(searchParams.get('per_page') || '10', 10);
|
|
||||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
|
||||||
const [showNewTeamModal, setShowNewTeamModal] = useState(false);
|
|
||||||
const [selectedTeam, setSelectedTeam] = useState<TeamType | null>(null);
|
|
||||||
useState<TeamType | null>(null);
|
|
||||||
const [globalFilter, setGlobalFilter] = useState(searchQuery);
|
|
||||||
|
|
||||||
// Advanced filtering states
|
|
||||||
const [visibilityFilter, setVisibilityFilter] = useState('all');
|
|
||||||
const [cityFilter, setCityFilter] = useState('all');
|
|
||||||
|
|
||||||
// Fetch teams from API
|
|
||||||
const {
|
|
||||||
data: teamsResponse,
|
|
||||||
isLoading,
|
|
||||||
isFetching,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
'admin-teams',
|
|
||||||
currentPage,
|
|
||||||
perPage,
|
|
||||||
cityFilter,
|
|
||||||
visibilityFilter,
|
|
||||||
searchQuery,
|
|
||||||
],
|
|
||||||
queryFn: () =>
|
|
||||||
getAdminTeams({
|
|
||||||
page: currentPage,
|
|
||||||
per_page: perPage,
|
|
||||||
search: searchQuery || undefined,
|
|
||||||
}),
|
|
||||||
staleTime: 30000, // 30 seconds cache
|
|
||||||
gcTime: 5 * 60 * 1000, // 5 minutes
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalData = teamsResponse?.meta?.total_data || 0;
|
|
||||||
const totalPages = teamsResponse?.meta?.total_page || 1;
|
|
||||||
|
|
||||||
// Handle page change - update URL query params
|
|
||||||
const handlePageChange = useCallback(
|
|
||||||
(newPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', newPage.toString());
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
[setSearchParams, perPage, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Validate page number doesn't exceed total pages
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isLoading && totalPages > 0 && currentPage > totalPages) {
|
|
||||||
setSearchParams({ page: totalPages.toString() });
|
|
||||||
}
|
|
||||||
}, [currentPage, totalPages, setSearchParams, isLoading]);
|
|
||||||
|
|
||||||
// Sync globalFilter with URL search param on mount
|
|
||||||
useEffect(() => {
|
|
||||||
setGlobalFilter(searchQuery);
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
// Handle search teams
|
|
||||||
const handleSearch = useCallback(() => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (globalFilter.trim()) {
|
|
||||||
params.set('search', globalFilter.trim());
|
|
||||||
}
|
|
||||||
setSearchParams(params);
|
|
||||||
}, [globalFilter, setSearchParams, perPage]);
|
|
||||||
|
|
||||||
// Handle Enter key press in search input
|
|
||||||
const handleSearchKeyPress = useCallback(
|
|
||||||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[handleSearch]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle per page change
|
|
||||||
const handlePerPageChange = useCallback(
|
|
||||||
(newPerPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
params.set('per_page', newPerPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
},
|
|
||||||
[setSearchParams, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Memoize the callback to prevent recreation
|
|
||||||
const handleShowDetailModal = useCallback((team: TeamType) => {
|
|
||||||
setSelectedTeam(team);
|
|
||||||
setShowDetailModal(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCloseDetailModal = useCallback(() => {
|
|
||||||
setShowDetailModal(false);
|
|
||||||
setSelectedTeam(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleShowNewTeamModal = useCallback(() => {
|
|
||||||
setShowNewTeamModal(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleCloseNewTeamModal = useCallback(() => {
|
|
||||||
setShowNewTeamModal(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Get teams data from API response
|
|
||||||
const filteredData = useMemo(() => {
|
|
||||||
return teamsResponse?.data || [];
|
|
||||||
}, [teamsResponse]);
|
|
||||||
|
|
||||||
// Memoize columns to prevent recreation on every render
|
|
||||||
const columns: ColumnDef<TeamType>[] = useMemo(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
accessorKey: 'name',
|
|
||||||
header: 'Team',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const team = row.original;
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{/* Team Logo */}
|
|
||||||
<div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center shrink-0 overflow-hidden">
|
|
||||||
{team.logo ? (
|
|
||||||
<img
|
|
||||||
src={team.logo}
|
|
||||||
alt={team.name}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<TeamOutlined className="text-neutral-400 text-lg" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* Team Name */}
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<p
|
|
||||||
className="font-medium text-neutral-900 truncate max-w-sm"
|
|
||||||
title={team.name}
|
|
||||||
>
|
|
||||||
{team.name}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'city',
|
|
||||||
header: 'City',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-neutral-700">{row.original.city}</span>
|
|
||||||
),
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'visibility',
|
|
||||||
header: 'Visibility',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const isPublic = row.original.visibility === 'public';
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'inline-flex items-center gap-1 px-2 py-1 rounded-2xl text-xs font-medium',
|
|
||||||
isPublic
|
|
||||||
? 'bg-success-100 text-success-800'
|
|
||||||
: 'bg-neutral-100 text-neutral-700'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isPublic ? 'Public' : 'Private'}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
enableSorting: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'leader',
|
|
||||||
header: 'Leader ID',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="text-sm text-neutral-700 font-mono">
|
|
||||||
{row.original.leader_id}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: 'created_at',
|
|
||||||
header: 'Created',
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="text-neutral-900 text-sm">
|
|
||||||
{new Date(row.original.created_at).toLocaleDateString('en-UK', {
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[handleShowDetailModal]
|
|
||||||
);
|
|
||||||
|
|
||||||
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 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 teams by name or city..."
|
|
||||||
value={globalFilter}
|
|
||||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
|
||||||
onKeyPress={handleSearchKeyPress}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Per Page Dropdown */}
|
|
||||||
<div className="relative">
|
|
||||||
<select
|
|
||||||
className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={perPage}
|
|
||||||
onChange={(e) =>
|
|
||||||
handlePerPageChange(parseInt(e.target.value, 10))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value={10}>10 / page</option>
|
|
||||||
<option value={20}>20 / page</option>
|
|
||||||
<option value={50}>50 / page</option>
|
|
||||||
<option value={100}>100 / page</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Visibility 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-40 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={visibilityFilter}
|
|
||||||
onChange={(e) => setVisibilityFilter(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="all">All Visibility</option>
|
|
||||||
<option value="public">Public</option>
|
|
||||||
<option value="private">Private</option>
|
|
||||||
</select>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* City Filter */}
|
|
||||||
{/* <CityFilterSelect
|
|
||||||
value={cityFilter}
|
|
||||||
onChange={setCityFilter}
|
|
||||||
className="w-full sm:w-44"
|
|
||||||
placeholder="Search cities..."
|
|
||||||
allOptionLabel="All Cities"
|
|
||||||
/> */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right side - Add Team Button */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="md"
|
|
||||||
className="flex items-center gap-2 px-4 py-2"
|
|
||||||
onClick={handleShowNewTeamModal}
|
|
||||||
>
|
|
||||||
<PlusOutlined className="text-sm" />
|
|
||||||
Add Team
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Active filters display */}
|
|
||||||
{(visibilityFilter !== 'all' || cityFilter !== 'all') && (
|
|
||||||
<div className="flex flex-wrap gap-2 items-center">
|
|
||||||
<span className="text-sm text-neutral-600">Active filters:</span>
|
|
||||||
|
|
||||||
{/* Visibility filter badge */}
|
|
||||||
{visibilityFilter !== 'all' && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
|
|
||||||
Visibility: {visibilityFilter}
|
|
||||||
<button
|
|
||||||
onClick={() => setVisibilityFilter('all')}
|
|
||||||
className="text-info-600 hover:text-info-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* City filter badge */}
|
|
||||||
{cityFilter !== 'all' && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
|
|
||||||
City: {cityFilter}
|
|
||||||
<button
|
|
||||||
onClick={() => setCityFilter('all')}
|
|
||||||
className="text-green-600 hover:text-green-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Clear all filters */}
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setVisibilityFilter('all');
|
|
||||||
setCityFilter('all');
|
|
||||||
setGlobalFilter('');
|
|
||||||
}}
|
|
||||||
className="text-sm text-neutral-600"
|
|
||||||
>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Loading & results display */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
|
|
||||||
<span className="ml-3 text-neutral-600">Loading teams...</span>
|
|
||||||
</div>
|
|
||||||
) : filteredData.length > 0 ? (
|
|
||||||
<>
|
|
||||||
<div className="text-sm text-neutral-600">
|
|
||||||
Showing {filteredData.length} of {totalData} teams (Page{' '}
|
|
||||||
{currentPage} of {totalPages})
|
|
||||||
{isFetching && (
|
|
||||||
<span className="ml-2 text-primary-500">(Updating...)</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DataTable
|
|
||||||
data={filteredData}
|
|
||||||
columns={columns}
|
|
||||||
pageSize={perPage}
|
|
||||||
manualPagination={true}
|
|
||||||
pageCount={totalPages}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12 text-neutral-500">
|
|
||||||
No teams found. Try adjusting your filters.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Modals component */}
|
|
||||||
<ModalTeamDetail
|
|
||||||
isOpen={showDetailModal}
|
|
||||||
onClose={handleCloseDetailModal}
|
|
||||||
team={selectedTeam}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* New Team Modal */}
|
|
||||||
<ModalTeamDetail
|
|
||||||
isOpen={showNewTeamModal}
|
|
||||||
onClose={handleCloseNewTeamModal}
|
|
||||||
team={null} // null indicates creating new team
|
|
||||||
/>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HackathonTeamsPage;
|
|
||||||
-655
@@ -1,655 +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 | null;
|
|
||||||
fullname: string;
|
|
||||||
bio?: string;
|
|
||||||
location: string | null;
|
|
||||||
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 cursor-pointer"
|
|
||||||
onClick={() => {
|
|
||||||
setShowAvatarMenu(false);
|
|
||||||
handleCancel();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CloseOutlined className="text-neutral-400 text-lg" />
|
|
||||||
</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 ||
|
|
||||||
formData.fullname.trim() === ''
|
|
||||||
? 'border-red-300 bg-red-50'
|
|
||||||
: 'border-neutral-300'
|
|
||||||
)}
|
|
||||||
placeholder="Enter full name"
|
|
||||||
/>
|
|
||||||
{(!formData.fullname ||
|
|
||||||
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 ||
|
|
||||||
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 ||
|
|
||||||
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;
|
|
||||||
@@ -1,573 +0,0 @@
|
|||||||
import {
|
|
||||||
FC,
|
|
||||||
ReactElement,
|
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
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,
|
|
||||||
LoadingOutlined,
|
|
||||||
} from '@ant-design/icons';
|
|
||||||
import { CityFilterSelect } from '../../../components/city-filter-select';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {
|
|
||||||
getAdminUsers,
|
|
||||||
TAdminUserItem,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { useSearchParams } from 'react-router-dom';
|
|
||||||
|
|
||||||
type UserType = TAdminUserItem;
|
|
||||||
|
|
||||||
// Skills options for filter
|
|
||||||
const skillsOptions = [
|
|
||||||
'Frontend Developer',
|
|
||||||
'Backend Developer',
|
|
||||||
'Full Stack Developer',
|
|
||||||
'DevOps Engineer',
|
|
||||||
'UI/UX Designer',
|
|
||||||
'Product Manager',
|
|
||||||
'Data Scientist',
|
|
||||||
'Mobile Developer',
|
|
||||||
];
|
|
||||||
|
|
||||||
export const HackathonUsersPage: FC = (): ReactElement => {
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
|
||||||
const currentPage = Math.max(
|
|
||||||
1,
|
|
||||||
parseInt(searchParams.get('page') || '1', 10)
|
|
||||||
);
|
|
||||||
const searchQuery = searchParams.get('search') || '';
|
|
||||||
const perPage = parseInt(searchParams.get('per_page') || '10', 10);
|
|
||||||
const [showDetailModal, setShowDetailModal] = useState(false);
|
|
||||||
const [showNewUserModal, setShowNewUserModal] = useState(false);
|
|
||||||
const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
|
|
||||||
const [globalFilter, setGlobalFilter] = useState(searchQuery);
|
|
||||||
|
|
||||||
// Advanced filtering states
|
|
||||||
const [statusFilter, setStatusFilter] = useState('all');
|
|
||||||
const [cityFilter, setCityFilter] = useState('all');
|
|
||||||
const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
|
|
||||||
|
|
||||||
// Fetch users from API
|
|
||||||
const {
|
|
||||||
data: usersResponse,
|
|
||||||
isLoading,
|
|
||||||
isFetching,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: [
|
|
||||||
'admin-users',
|
|
||||||
currentPage,
|
|
||||||
perPage,
|
|
||||||
cityFilter,
|
|
||||||
statusFilter,
|
|
||||||
searchQuery,
|
|
||||||
],
|
|
||||||
queryFn: () =>
|
|
||||||
getAdminUsers({
|
|
||||||
page: currentPage,
|
|
||||||
per_page: perPage,
|
|
||||||
search: searchQuery || undefined,
|
|
||||||
}),
|
|
||||||
staleTime: 30000, // 30 seconds cache
|
|
||||||
gcTime: 5 * 60 * 1000, // 5 minutes
|
|
||||||
});
|
|
||||||
|
|
||||||
const totalData = usersResponse?.meta?.total_data || 0;
|
|
||||||
const totalPages = usersResponse?.meta?.total_page || 1;
|
|
||||||
|
|
||||||
// Handle page change - update URL query params
|
|
||||||
const handlePageChange = useCallback(
|
|
||||||
(newPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', newPage.toString());
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
},
|
|
||||||
[setSearchParams, perPage, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Validate page number doesn't exceed total pages
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isLoading && totalPages > 0 && currentPage > totalPages) {
|
|
||||||
setSearchParams({ page: totalPages.toString() });
|
|
||||||
}
|
|
||||||
}, [currentPage, totalPages, setSearchParams, isLoading]);
|
|
||||||
|
|
||||||
// Sync globalFilter with URL search param on mount
|
|
||||||
useEffect(() => {
|
|
||||||
setGlobalFilter(searchQuery);
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
// Handle search users
|
|
||||||
const handleSearch = useCallback(() => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
if (perPage !== 10) params.set('per_page', perPage.toString());
|
|
||||||
if (globalFilter.trim()) {
|
|
||||||
params.set('search', globalFilter.trim());
|
|
||||||
}
|
|
||||||
setSearchParams(params);
|
|
||||||
}, [globalFilter, setSearchParams, perPage]);
|
|
||||||
|
|
||||||
// Handle Enter key press in search input
|
|
||||||
const handleSearchKeyPress = useCallback(
|
|
||||||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[handleSearch]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Handle per page change
|
|
||||||
const handlePerPageChange = useCallback(
|
|
||||||
(newPerPage: number) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.set('page', '1');
|
|
||||||
params.set('per_page', newPerPage.toString());
|
|
||||||
if (searchQuery) params.set('search', searchQuery);
|
|
||||||
setSearchParams(params);
|
|
||||||
},
|
|
||||||
[setSearchParams, searchQuery]
|
|
||||||
);
|
|
||||||
|
|
||||||
// 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(() => {
|
|
||||||
const usersData = usersResponse?.data || [];
|
|
||||||
return usersData.filter((user: UserType) => {
|
|
||||||
// Status filter
|
|
||||||
if (statusFilter !== 'all') {
|
|
||||||
const isActive = statusFilter === 'active';
|
|
||||||
if (user.is_active !== isActive) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Skills filter
|
|
||||||
if (skillsFilter.length > 0) {
|
|
||||||
const userSkills = user.skills || [];
|
|
||||||
const hasMatchingSkill = skillsFilter.some((skill) =>
|
|
||||||
userSkills.includes(skill)
|
|
||||||
);
|
|
||||||
if (!hasMatchingSkill) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}, [usersResponse, statusFilter, 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 }) => {
|
|
||||||
const skills = row.original.skills || [];
|
|
||||||
return (
|
|
||||||
<div className="flex flex-wrap gap-1 max-w-xs">
|
|
||||||
{skills.length > 0 ? (
|
|
||||||
<>
|
|
||||||
{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>
|
|
||||||
))}
|
|
||||||
{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">
|
|
||||||
+{skills.length - 2}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="text-neutral-400">-</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)}
|
|
||||||
onKeyPress={handleSearchKeyPress}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Per Page Dropdown */}
|
|
||||||
<div className="relative">
|
|
||||||
<select
|
|
||||||
className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
|
|
||||||
value={perPage}
|
|
||||||
onChange={(e) =>
|
|
||||||
handlePerPageChange(parseInt(e.target.value, 10))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value={10}>10 / page</option>
|
|
||||||
<option value={20}>20 / page</option>
|
|
||||||
<option value={50}>50 / page</option>
|
|
||||||
<option value={100}>100 / page</option>
|
|
||||||
</select>
|
|
||||||
</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> */}
|
|
||||||
|
|
||||||
{/* City Filter */}
|
|
||||||
{/* <CityFilterSelect
|
|
||||||
value={cityFilter}
|
|
||||||
onChange={setCityFilter}
|
|
||||||
className="w-full sm:w-44"
|
|
||||||
placeholder="Search cities..."
|
|
||||||
allOptionLabel="All Cities"
|
|
||||||
/>
|
|
||||||
{cityFilter !== 'all' && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
|
|
||||||
Location: {cityFilter}
|
|
||||||
<button
|
|
||||||
onClick={() => setCityFilter('all')}
|
|
||||||
className="text-green-600 hover:text-green-800 cursor-pointer"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
{/* 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' ||
|
|
||||||
cityFilter !== '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 */}
|
|
||||||
{cityFilter !== 'all' && (
|
|
||||||
<span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
|
|
||||||
City: {cityFilter}
|
|
||||||
<button
|
|
||||||
onClick={() => setCityFilter('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');
|
|
||||||
setCityFilter('all');
|
|
||||||
setSkillsFilter([]);
|
|
||||||
setGlobalFilter('');
|
|
||||||
}}
|
|
||||||
className="text-sm text-neutral-600"
|
|
||||||
>
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Loading & results display */}
|
|
||||||
{isLoading ? (
|
|
||||||
<div className="flex items-center justify-center py-12">
|
|
||||||
<LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
|
|
||||||
<span className="ml-3 text-neutral-600">Loading users...</span>
|
|
||||||
</div>
|
|
||||||
) : filteredData.length > 0 ? (
|
|
||||||
<>
|
|
||||||
<div className="text-sm text-neutral-600">
|
|
||||||
Showing {filteredData.length} of {totalData} users (Page{' '}
|
|
||||||
{currentPage} of {totalPages})
|
|
||||||
{isFetching && (
|
|
||||||
<span className="ml-2 text-primary-500">(Updating...)</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<DataTable
|
|
||||||
data={filteredData}
|
|
||||||
columns={columns}
|
|
||||||
pageSize={perPage}
|
|
||||||
manualPagination={true}
|
|
||||||
pageCount={totalPages}
|
|
||||||
currentPage={currentPage}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="text-center py-12 text-neutral-500">
|
|
||||||
No users found. Try adjusting your filters.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</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;
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
import { FC, ReactElement, useState } 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
|
|
||||||
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 cursor-pointer"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AppLayout;
|
|
||||||
-85
@@ -1,85 +0,0 @@
|
|||||||
import { ArrowRightOutlined } from "@ant-design/icons";
|
|
||||||
import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { Accordion, Modal, ModalProps } from "@imphnen-frontend-service/ui/molecules";
|
|
||||||
import { cn, For } from "@imphnen-frontend-service/utils";
|
|
||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
|
|
||||||
|
|
||||||
export const ModalCreateRoadmap: FC<Omit<ModalProps, 'children'>> = ({ isOpen, onClose }) => {
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={isOpen}
|
|
||||||
onClose={onClose}
|
|
||||||
className="xl:max-w-[64rem] bg-white px-10 py-9"
|
|
||||||
closeButtonClassName="hidden"
|
|
||||||
>
|
|
||||||
<div className="overflow-y-auto max-h-[80vh]">
|
|
||||||
<h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
|
|
||||||
Create Roadmaps
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-5 gap-6 mb-12">
|
|
||||||
<div className="col-span-3">
|
|
||||||
<label className={labelClass}>Prompt</label>
|
|
||||||
<Textarea
|
|
||||||
className="min-w-full w-full h-[calc(100%-2rem)]"
|
|
||||||
placeholder="Create a learning roadmap for (subject) at the (level) level. Include topics, estimated duration, and logical progression."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-2 space-y-8">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Roadmap Name</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="Nama Roadmap" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Roadmap Name</label>
|
|
||||||
<Select className="w-full">
|
|
||||||
<option value="pemula">Pemula</option>
|
|
||||||
<option value="menengah">Menengah</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Model</label>
|
|
||||||
<Select className="w-full">
|
|
||||||
<option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
|
|
||||||
<option value="gpt-4">GPT 4</option>
|
|
||||||
<option value="gpt-4-32k">GPT 4 32k</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-span-full">
|
|
||||||
<Button>
|
|
||||||
Generate Roadmap
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2 className="text-neutral-600 text-p2 font-semibold mb-8">
|
|
||||||
Roadmap Preview
|
|
||||||
</h2>
|
|
||||||
<div className="space-y-2.5">
|
|
||||||
<For data={Array.from({ length: 3 })}>
|
|
||||||
{(_, index) => (
|
|
||||||
<Accordion
|
|
||||||
key={index}
|
|
||||||
title={`Day ${index + 1}`}
|
|
||||||
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tincidunt nisl, id consequat mi malesuada vel. Nulla facilisi. Nam in turpis ligula."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end mt-12">
|
|
||||||
<Button type="button" className="flex items-center gap-5">
|
|
||||||
Submit Roadmap
|
|
||||||
<ArrowRightOutlined />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
|
|
||||||
import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils";
|
|
||||||
import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { ModalCreateRoadmap } from "./_components/modal/create-roadmap";
|
|
||||||
|
|
||||||
type LearningStatus = 'active' | 'inactive'
|
|
||||||
|
|
||||||
type RoadmapType = {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
learningLevel: string
|
|
||||||
status: LearningStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
const mockData: RoadmapType[] = Array.from({ length: 90 }, (_, i) => ({
|
|
||||||
id: i + 1,
|
|
||||||
name: i === 0 ? 'Ahmad Wijuana' : 'Anna Wiguana',
|
|
||||||
learningLevel: ['Pemula', 'Menengah'][Math.floor(Math.random() * 2)],
|
|
||||||
status: i % 2 === 0 ? 'active' : 'inactive',
|
|
||||||
}))
|
|
||||||
|
|
||||||
export default function Components(): React.ReactElement {
|
|
||||||
const [openCreateModal, setOpenCreateModal] = useState(false)
|
|
||||||
|
|
||||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
|
|
||||||
const [pagination, setPagination] = useState<PaginationState>({
|
|
||||||
pageIndex: 0,
|
|
||||||
pageSize: 9,
|
|
||||||
});
|
|
||||||
|
|
||||||
const columns: ColumnDef<RoadmapType>[] = [
|
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
meta: { cellClassName: cn("w-20") },
|
|
||||||
header: ({ table }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={table.getIsAllRowsSelected()}
|
|
||||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'id',
|
|
||||||
header: 'No',
|
|
||||||
accessorKey: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'name',
|
|
||||||
header: 'Nama Roadmap',
|
|
||||||
accessorKey: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'learningLevel',
|
|
||||||
header: 'Tingkat Belajar',
|
|
||||||
accessorKey: 'learningLevel',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
header: 'Status',
|
|
||||||
accessorKey: 'status',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.status;
|
|
||||||
const statusColors: Record<LearningStatus, string> = {
|
|
||||||
inactive: 'bg-danger-200 text-danger-700',
|
|
||||||
active: 'bg-success-200 text-success-500',
|
|
||||||
};
|
|
||||||
const statusText: Record<LearningStatus, string> = {
|
|
||||||
inactive: 'Inactive',
|
|
||||||
active: 'Active',
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
|
||||||
>
|
|
||||||
{statusText[status]}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Action',
|
|
||||||
meta: { cellClassName: cn("w-72") },
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex gap-[8px]">
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<EditOutlined /> Action
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="danger"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<DeleteOutlined /> Delete
|
|
||||||
</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="Dimentorin.dev">
|
|
||||||
<h1 className="text-p1 font-semibold text-neutral-700 mb-8">Content & Roadmap</h1>
|
|
||||||
|
|
||||||
<section className="flex flex-col gap-6 p-8 bg-white rounded-md">
|
|
||||||
<div className="flex items-center justify-between mb-9">
|
|
||||||
<h2 className="text-p2 font-semibold text-neutral-600">AI Roadmaps</h2>
|
|
||||||
<Button type="button" variant="primary" className="flex items-center gap-2" onClick={() => setOpenCreateModal(true)}>
|
|
||||||
<PlusOutlined /> Buat Roadmap
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center gap-5 mb-2">
|
|
||||||
<div className="relative w-full">
|
|
||||||
<Input
|
|
||||||
placeholder="Cari berdasarkan nama roadmap"
|
|
||||||
className="pl-12 w-full max-h-full"
|
|
||||||
/>
|
|
||||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
|
||||||
<SearchOutlined />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>Tingkat Belajar</option>
|
|
||||||
<option value="pemula">Pemula</option>
|
|
||||||
<option value="menengah">Menengah</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable data={mockData} columns={columns} table={table} />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<ModalCreateRoadmap isOpen={openCreateModal} onClose={() => setOpenCreateModal(false)} />
|
|
||||||
</BackofficeWrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-114
@@ -1,114 +0,0 @@
|
|||||||
import { Icon } from "@iconify/react";
|
|
||||||
import { Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { Modal } from "@imphnen-frontend-service/ui/molecules";
|
|
||||||
import { cn, For } from "@imphnen-frontend-service/utils";
|
|
||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
const TOPICS = [
|
|
||||||
{ id: 2, icon: '🏢', name: 'Industry Insight' },
|
|
||||||
{ id: 4, icon: '🖥️', name: 'Basic IT' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const placeholder = `Hi [Nama Mentor], Saya [Nama Kamu] & saya berharap dapat memiliki sesi mentoring dengan Anda.
|
|
||||||
|
|
||||||
Saat ini, saya tertarik untuk mengejar __. Tujuan saya untuk sesi ini adalah __.
|
|
||||||
|
|
||||||
Saya ingin tahu secara khusus tentang ___.
|
|
||||||
1.Pertanyaan Anda
|
|
||||||
2. ...
|
|
||||||
3. ...`
|
|
||||||
|
|
||||||
const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
|
|
||||||
|
|
||||||
type ModalProps = {
|
|
||||||
open: boolean
|
|
||||||
setOpen: (open: boolean) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ModalDetailSession: FC<ModalProps> = ({ open, setOpen }) => {
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={open}
|
|
||||||
onClose={() => setOpen(false)}
|
|
||||||
className="xl:max-w-[64rem] bg-white px-10 py-9"
|
|
||||||
closeButtonClassName="hidden"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
|
|
||||||
Detail Sesi
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-9 px-9 py-7 border rounded-md gap-12 mb-10">
|
|
||||||
<div className="col-span-4 flex items-center gap-x-12">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentor</h2>
|
|
||||||
<div>
|
|
||||||
<p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
|
|
||||||
<p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Icon icon="ph:arrow-right" className="text-9xl text-primary-500" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-span-5 flex items-center gap-12">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentee</h2>
|
|
||||||
<div>
|
|
||||||
<p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
|
|
||||||
<p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-p2 font-semibold text-neutral-700 mb-4">Status</h2>
|
|
||||||
<div className="py-2 px-6 rounded-md text-center bg-success-200 text-success-500 font-semibold">
|
|
||||||
Finished
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 className="text-p3 font-medium mb-2.5">Topics</h1>
|
|
||||||
<div className="p-5 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-2.5 mb-8">
|
|
||||||
<For data={TOPICS}>
|
|
||||||
{(item, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow font-medium"
|
|
||||||
>
|
|
||||||
<span>{item.icon} </span>
|
|
||||||
<span>{item.name}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-2.5 md:grid-cols-2 md:gap-5">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Tanggal</label>
|
|
||||||
<Input type="date" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Waktu</label>
|
|
||||||
<Input type="time" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
<div className="relative md:col-span-full">
|
|
||||||
<label className={labelClass}>Lokasi</label>
|
|
||||||
<Select className="min-w-full w-full">
|
|
||||||
<option value="online">Online</option>
|
|
||||||
<option value="offline">Offline</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div className="md:col-span-full">
|
|
||||||
<label className={labelClass}>Pertanyaan Untuk Senpai</label>
|
|
||||||
<Textarea
|
|
||||||
className="min-w-full w-full h-40"
|
|
||||||
placeholder={placeholder}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,168 +0,0 @@
|
|||||||
import { SearchOutlined } from "@ant-design/icons";
|
|
||||||
import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils";
|
|
||||||
import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
|
|
||||||
import { ReactElement, useState } from "react";
|
|
||||||
import { ModalDetailSession } from "./_components/modal/detail";
|
|
||||||
|
|
||||||
type SessionStatus = 'ongoing' | 'finished';
|
|
||||||
|
|
||||||
interface SessionType {
|
|
||||||
id: string
|
|
||||||
mentorName: string
|
|
||||||
menteeName: string
|
|
||||||
datetime: number
|
|
||||||
status: SessionStatus
|
|
||||||
}
|
|
||||||
|
|
||||||
const mockData: SessionType[] = Array.from({ length: 90 }, (_, i) => ({
|
|
||||||
id: `DS-${i + 1}`,
|
|
||||||
mentorName: 'Ahmad Wijuana',
|
|
||||||
menteeName: 'Sofia Wijuana',
|
|
||||||
datetime: new Date().getTime(),
|
|
||||||
status: i % 2 === 0 ? 'ongoing' : 'finished',
|
|
||||||
}))
|
|
||||||
|
|
||||||
export default function Components(): ReactElement {
|
|
||||||
const [openDetail, setOpenDetail] = useState(false);
|
|
||||||
|
|
||||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
|
|
||||||
const [pagination, setPagination] = useState<PaginationState>({
|
|
||||||
pageIndex: 0,
|
|
||||||
pageSize: 9,
|
|
||||||
});
|
|
||||||
|
|
||||||
const columns: ColumnDef<SessionType>[] = [
|
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
meta: { cellClassName: cn("w-20") },
|
|
||||||
header: ({ table }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={table.getIsAllRowsSelected()}
|
|
||||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'id',
|
|
||||||
header: 'ID Sesi',
|
|
||||||
accessorKey: 'id',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'mentorName',
|
|
||||||
header: 'Nama Mentor',
|
|
||||||
accessorKey: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'menteeName',
|
|
||||||
header: 'Nama Mentee',
|
|
||||||
accessorKey: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'datetime',
|
|
||||||
header: 'Waktu',
|
|
||||||
accessorKey: 'datetime',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
header: 'Status',
|
|
||||||
accessorKey: 'status',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.status;
|
|
||||||
const statusColors: Record<SessionStatus, string> = {
|
|
||||||
ongoing: 'bg-warning-200 text-warning-700',
|
|
||||||
finished: 'bg-success-200 text-success-500',
|
|
||||||
};
|
|
||||||
const statusText: Record<SessionStatus, string> = {
|
|
||||||
ongoing: 'On Going',
|
|
||||||
finished: 'Finished',
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
|
||||||
>
|
|
||||||
{statusText[status]}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Action',
|
|
||||||
meta: { cellClassName: cn("w-52") },
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setOpenDetail(true);
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 w-max"
|
|
||||||
>
|
|
||||||
<SearchOutlined className="text-[16px]" /> Cek Detail
|
|
||||||
</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="Dimentorin.dev">
|
|
||||||
<h1 className="text-p1 font-semibold text-neutral-700 mb-8">Session Management</h1>
|
|
||||||
|
|
||||||
<section className="flex flex-col gap-6 p-8 bg-white rounded-md">
|
|
||||||
<div className="flex justify-between items-center gap-5 mb-2">
|
|
||||||
<div className="relative w-full">
|
|
||||||
<Input
|
|
||||||
placeholder="Cari berdasarkan nama lengkap"
|
|
||||||
className="pl-12 w-full max-h-full"
|
|
||||||
/>
|
|
||||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
|
||||||
<SearchOutlined />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>Rating</option>
|
|
||||||
<option value="4.5">4.5</option>
|
|
||||||
<option value="5">5</option>
|
|
||||||
</Select>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>Status</option>
|
|
||||||
<option value="finished">Finished</option>
|
|
||||||
<option value="ongoing">On Going</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable data={mockData} columns={columns} table={table} />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<ModalDetailSession open={openDetail} setOpen={setOpenDetail} />
|
|
||||||
</BackofficeWrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
import { Button, Input, Select, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils"
|
|
||||||
import { FC } from "react"
|
|
||||||
|
|
||||||
const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
|
|
||||||
|
|
||||||
export const GeneralSettings: FC = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1 className="text-p2 font-semibold text-neutral-700 mb-8">General Settings</h1>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<ToggleInput label="Mode Maintenance" />
|
|
||||||
|
|
||||||
<h2 className="text-p3 font-semibold text-neutral-700 mb-5">Platform Settings</h2>
|
|
||||||
<div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Nama Platform</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Bahasa</label>
|
|
||||||
<Select defaultValue="id" className="w-full">
|
|
||||||
<option value="id">Indonesia</option>
|
|
||||||
<option value="en">English</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Logo Platform</label>
|
|
||||||
<Input type="file" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Favicon</label>
|
|
||||||
<Input type="file" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 className="text-p3 font-semibold text-neutral-700 mb-5">Legal Settings</h2>
|
|
||||||
<div className="grid gap-x-8 gap-y-5 mb-20">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>URL Syarat & Ketentuan</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>URL Kebijakan Privasi</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-5">
|
|
||||||
<Button type="button" variant="bordered">
|
|
||||||
Batal
|
|
||||||
</Button>
|
|
||||||
<Button type="button">
|
|
||||||
Simpan
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import { Button, Textarea, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
|
|
||||||
import { FC } from "react"
|
|
||||||
|
|
||||||
export const NotificationSettings: FC = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1 className="text-p2 font-semibold text-neutral-700 mb-8">Notification Settings</h1>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-8 flex-wrap">
|
|
||||||
<ToggleInput label="Nyalakan Notifikasi Email" />
|
|
||||||
<ToggleInput label="Beritahu mentor ketika ada request" />
|
|
||||||
<ToggleInput label="Beritahu mentee untuk update sesi " />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-20">
|
|
||||||
<label className="text-neutral-800 font-medium inline-block mb-2 text-p3">
|
|
||||||
API Integrasi Notifikasi (URL)
|
|
||||||
</label>
|
|
||||||
<Textarea placeholder="Masukkan url API notifikasi yang akan digunakan" className="w-full h-40" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-5">
|
|
||||||
<Button type="button" variant="bordered">
|
|
||||||
Batal
|
|
||||||
</Button>
|
|
||||||
<Button type="button">
|
|
||||||
Simpan
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils"
|
|
||||||
import { FC } from "react"
|
|
||||||
|
|
||||||
const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
|
|
||||||
|
|
||||||
export const PaymentSettings: FC = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1 className="text-p2 font-semibold text-neutral-700 mb-8">Payment</h1>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Integrasi Payment Gateway</label>
|
|
||||||
<Textarea className="min-w-full w-full h-20" placeholder="Durasi dalam menit" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Mata Uang</label>
|
|
||||||
<Select defaultValue="idr">
|
|
||||||
<option value="idr">Rupiah (IDR)</option>
|
|
||||||
<option value="usd">Dollar (USD)</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Harga sesi mentoring <span className="text-neutral-600">(default)</span></label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="Masukkan harga sesi mentoring" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Tarif Komisi untuk Platform</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="Masukkan persentase komisi" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 className="text-p3 font-semibold text-neutral-700 mb-5">Invoice</h2>
|
|
||||||
<div className="mb-32">
|
|
||||||
<label className={labelClass}>Masukkan Format Invoice</label>
|
|
||||||
<Input type="file" className="min-w-full w-full" placeholder="InvoiceDimentorin.png" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-5">
|
|
||||||
<Button type="button" variant="bordered">
|
|
||||||
Batal
|
|
||||||
</Button>
|
|
||||||
<Button type="button">
|
|
||||||
Simpan
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils";
|
|
||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
|
|
||||||
|
|
||||||
export const SecuritySettings: FC = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1 className="text-p2 font-semibold text-neutral-700 mb-8">Security Settings</h1>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-8 mb-20">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Durasi Session Timeout</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="Durasi dalam menit" />
|
|
||||||
<p className="text-[10px] text-neutral-800">Auto logout setelah X menit tidak aktif</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Blokir Setelah Upaya Gagal</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="x kali perobaan login" />
|
|
||||||
<p className="text-[10px] text-neutral-800">Misal: 5 kali salah login = lock akun</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-5">
|
|
||||||
<Button type="button" variant="bordered">
|
|
||||||
Batal
|
|
||||||
</Button>
|
|
||||||
<Button type="button">
|
|
||||||
Simpan
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-118
@@ -1,118 +0,0 @@
|
|||||||
import { DeleteOutlined, UserSwitchOutlined } from "@ant-design/icons";
|
|
||||||
import { Button } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { DataTable } from "@imphnen-frontend-service/ui/organisms";
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils";
|
|
||||||
import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
|
|
||||||
import { FC, useState } from "react";
|
|
||||||
|
|
||||||
type UserRolesPermissionType = {
|
|
||||||
id: number
|
|
||||||
role: string
|
|
||||||
totalUser: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const mockData: UserRolesPermissionType[] = Array.from({ length: 90 }, (_, i) => ({
|
|
||||||
id: i + 1,
|
|
||||||
role: ['Admin', 'Super Admin', 'Mentee', 'Mentor'][Math.floor(Math.random() * 4)],
|
|
||||||
totalUser: 10
|
|
||||||
}))
|
|
||||||
|
|
||||||
export const UserRolesPermission: FC = () => {
|
|
||||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
|
|
||||||
const [pagination, setPagination] = useState<PaginationState>({
|
|
||||||
pageIndex: 0,
|
|
||||||
pageSize: 9,
|
|
||||||
});
|
|
||||||
|
|
||||||
const columns: ColumnDef<UserRolesPermissionType>[] = [
|
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
meta: { cellClassName: cn("w-20") },
|
|
||||||
header: ({ table }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={table.getIsAllRowsSelected()}
|
|
||||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'role',
|
|
||||||
header: 'Role',
|
|
||||||
accessorKey: 'role',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'totalUser',
|
|
||||||
header: 'Total User',
|
|
||||||
accessorKey: 'totalUser',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Action',
|
|
||||||
meta: { cellClassName: cn("w-96") },
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 w-max"
|
|
||||||
>
|
|
||||||
<UserSwitchOutlined className="text-[16px]" /> Manage Permissions
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="danger"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 w-max"
|
|
||||||
>
|
|
||||||
<DeleteOutlined className="text-[16px]" /> Delete Role
|
|
||||||
</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 (
|
|
||||||
<div>
|
|
||||||
<div className="mb-8 flex items-center justify-between">
|
|
||||||
<h1 className="text-p2 font-semibold text-neutral-700">User Roles & Permissions</h1>
|
|
||||||
<Button type="button">
|
|
||||||
Add Rols
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white shadow p-8 rounded-lg">
|
|
||||||
<DataTable data={mockData} columns={columns} table={table} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms"
|
|
||||||
import { cn, For } from "@imphnen-frontend-service/utils"
|
|
||||||
import { useState } from "react"
|
|
||||||
import { GeneralSettings } from "./_components/general"
|
|
||||||
import { UserRolesPermission } from "./_components/user-roles-permission"
|
|
||||||
import { NotificationSettings } from "./_components/notification"
|
|
||||||
import { SecuritySettings } from "./_components/security"
|
|
||||||
import { PaymentSettings } from "./_components/payment"
|
|
||||||
|
|
||||||
const TABS = {
|
|
||||||
general: "General Settings",
|
|
||||||
userRolePermissions: "User Roles & Permissions",
|
|
||||||
notification: "Notification Settings",
|
|
||||||
security: "Security",
|
|
||||||
payment: "Payment",
|
|
||||||
} as const
|
|
||||||
type Tabs = typeof TABS[keyof typeof TABS]
|
|
||||||
|
|
||||||
export default function Components(): React.ReactElement {
|
|
||||||
const [activeTab, setActiveTab] = useState<Tabs>(TABS.general)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BackofficeWrapper title="Dimentorin.dev">
|
|
||||||
<h1 className="text-p1 font-semibold text-neutral-700 mb-8">Settings</h1>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-x-8">
|
|
||||||
<div className="w-64 bg-white p-2.5 shadow space-y-2 rounded-md">
|
|
||||||
<For data={Object.values(TABS)}>
|
|
||||||
{(tab) => (
|
|
||||||
<button
|
|
||||||
key={tab}
|
|
||||||
className={cn(
|
|
||||||
"px-4 py-3 w-full text-left font-medium rounded-md text-neutral-400 cursor-pointer select-none hover:bg-primary-100",
|
|
||||||
activeTab === tab && "bg-primary-500 text-white hover:bg-primary-600"
|
|
||||||
)}
|
|
||||||
onClick={() => setActiveTab(tab)}
|
|
||||||
>
|
|
||||||
{tab}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
<div className="bg-white px-8 py-6 shadow space-y-2 rounded-md flex-1">
|
|
||||||
{activeTab === TABS.general && <GeneralSettings />}
|
|
||||||
{activeTab === TABS.userRolePermissions && <UserRolesPermission />}
|
|
||||||
{activeTab === TABS.notification && <NotificationSettings />}
|
|
||||||
{activeTab === TABS.security && <SecuritySettings />}
|
|
||||||
{activeTab === TABS.payment && <PaymentSettings />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-55
@@ -1,55 +0,0 @@
|
|||||||
import { Button } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { Modal } from "@imphnen-frontend-service/ui/molecules";
|
|
||||||
import { FC } from "react";
|
|
||||||
|
|
||||||
type ModalDeleteProps = {
|
|
||||||
open: boolean
|
|
||||||
setOpen: (open: boolean) => void
|
|
||||||
hadnleDelete?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ModalDelete: FC<ModalDeleteProps> = ({ open, setOpen, hadnleDelete }) => {
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
|
|
||||||
isOpen={open}
|
|
||||||
onClose={() => setOpen(false)}
|
|
||||||
closeButtonClassName="hidden"
|
|
||||||
>
|
|
||||||
<Modal.Header className="gap-8">
|
|
||||||
<img
|
|
||||||
src="/chibi-delete.webp"
|
|
||||||
alt="Delete item?"
|
|
||||||
width={148}
|
|
||||||
className="self-center"
|
|
||||||
/>
|
|
||||||
<div className="text-center">
|
|
||||||
<h2 className="text-p1 font-semibold text-danger-500 mb-3">
|
|
||||||
Hapus Akun
|
|
||||||
</h2>
|
|
||||||
<p className="text-p3 text-neutral-400">
|
|
||||||
Apakah kamu yakin untuk menghapus akun ini?
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Content className="flex gap-4">
|
|
||||||
<Button
|
|
||||||
variant="bordered"
|
|
||||||
size="lg"
|
|
||||||
className="w-full border-danger-500 text-danger-500 hover:bg-danger-50 hover:text-danger-600 hover:border-danger-600"
|
|
||||||
onClick={() => setOpen(false)}
|
|
||||||
>
|
|
||||||
Batal
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="danger"
|
|
||||||
size="lg"
|
|
||||||
className="w-full"
|
|
||||||
onClick={() => hadnleDelete?.()}
|
|
||||||
>
|
|
||||||
Hapus Akun
|
|
||||||
</Button>
|
|
||||||
</Modal.Content>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-86
@@ -1,86 +0,0 @@
|
|||||||
import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils";
|
|
||||||
import { FC, useState } from "react";
|
|
||||||
import { ModalDelete } from "../delete";
|
|
||||||
import { ModalProps } from "../type";
|
|
||||||
import { ModalSuspendOrBan } from "../suspend-or-ban";
|
|
||||||
|
|
||||||
const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
|
|
||||||
|
|
||||||
export const AccountProfile: FC<ModalProps> = ({ setOpen }) => {
|
|
||||||
const [openDelete, setOpenDelete] = useState(false)
|
|
||||||
const [openSuspendOrBan, setOpenSuspendOrBan] = useState(false)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-x-8 mb-8">
|
|
||||||
<div className="size-[100px] rounded-full overflow-hidden">
|
|
||||||
<img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="w-full object-cover" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button type="button" size="sm" variant="bordered" className="mb-4">
|
|
||||||
Upload Foto
|
|
||||||
</Button>
|
|
||||||
<p className="text-neutral-400 font-medium">
|
|
||||||
Setidaknya rekomendasi ukuran 240x240 px. <br />
|
|
||||||
.jpg, .jpeg, .png diperbolehkan
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="mb-8">
|
|
||||||
<h1 className="mb-7 text-p2 font-semibold">Informasi Pribadi</h1>
|
|
||||||
<div className="grid grid-cols-2 gap-8">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Nama Depan</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="Nama Depan" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Nama Belakang</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="Nama Belakang" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Email</label>
|
|
||||||
<Input type="email" className="min-w-full w-full" placeholder="Email" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Nomor Telepon</label>
|
|
||||||
<Input type="text" className="min-w-full w-full" placeholder="+62 81234567890" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 className="mb-7 text-p2 font-semibold">Status Akun</h1>
|
|
||||||
<div className="flex items-center gap-5">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
size="sm"
|
|
||||||
variant="bordered"
|
|
||||||
className="border-danger-500 text-danger-500"
|
|
||||||
onClick={() => setOpenSuspendOrBan(true)}
|
|
||||||
>
|
|
||||||
Suspend/Ban
|
|
||||||
</Button>
|
|
||||||
<Button type="button" size="sm" variant="danger" onClick={() => setOpenDelete(true)}>
|
|
||||||
Delete Akun
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-x-5">
|
|
||||||
<Button type="button" variant="bordered" onClick={() => setOpen(false)}>
|
|
||||||
Batal
|
|
||||||
</Button>
|
|
||||||
<Button type="button" disabled>
|
|
||||||
Simpan
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ModalDelete open={openDelete} setOpen={setOpenDelete} />
|
|
||||||
<ModalSuspendOrBan open={openSuspendOrBan} setOpen={setOpenSuspendOrBan} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-110
@@ -1,110 +0,0 @@
|
|||||||
import { SearchOutlined } from "@ant-design/icons"
|
|
||||||
import { Input, Select } from "@imphnen-frontend-service/ui/atoms"
|
|
||||||
import { DataTable } from "@imphnen-frontend-service/ui/organisms"
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils"
|
|
||||||
import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table"
|
|
||||||
import { FC, useState } from "react"
|
|
||||||
import dayjs from "dayjs"
|
|
||||||
|
|
||||||
interface ActivityLogType {
|
|
||||||
id: number
|
|
||||||
date: string
|
|
||||||
menu: string
|
|
||||||
activity: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const mockData: ActivityLogType[] = Array.from({ length: 90 }, (_, i) => ({
|
|
||||||
id: i + 1,
|
|
||||||
date: new Date().toISOString(),
|
|
||||||
menu: 'Mentoring',
|
|
||||||
activity: 'Mentoring Session',
|
|
||||||
}))
|
|
||||||
|
|
||||||
export const ActivityLog: FC = () => {
|
|
||||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
|
|
||||||
const [pagination, setPagination] = useState<PaginationState>({
|
|
||||||
pageIndex: 0,
|
|
||||||
pageSize: 9,
|
|
||||||
})
|
|
||||||
|
|
||||||
const columns: ColumnDef<ActivityLogType>[] = [
|
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
meta: { cellClassName: cn("w-16") },
|
|
||||||
header: ({ table }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={table.getIsAllRowsSelected()}
|
|
||||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'date',
|
|
||||||
header: 'Waktu',
|
|
||||||
accessorKey: 'date',
|
|
||||||
cell: (info) => dayjs(info.row.original.date).format('DD MMMM YYYY, HH:mm WIB'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'menu',
|
|
||||||
header: 'Menu',
|
|
||||||
accessorKey: 'menu',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'activity',
|
|
||||||
header: 'Activity',
|
|
||||||
accessorKey: 'activity',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
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 (
|
|
||||||
<div className="p-8 shadow rounded-lg">
|
|
||||||
<div className="flex justify-between items-center gap-5 mb-9">
|
|
||||||
<div className="relative w-1/2">
|
|
||||||
<Input
|
|
||||||
placeholder="Cari aktivitas"
|
|
||||||
className="pl-12 w-full max-h-full"
|
|
||||||
/>
|
|
||||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
|
||||||
<SearchOutlined />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-1/4">
|
|
||||||
<Input type="date" className="min-w-full w-full" />
|
|
||||||
</div>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>Menu</option>
|
|
||||||
<option value="profle">Profile</option>
|
|
||||||
<option value="profle-2">Profile</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable data={mockData} columns={columns} table={table} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-89
File diff suppressed because one or more lines are too long
-68
@@ -1,68 +0,0 @@
|
|||||||
import { Button } from "@imphnen-frontend-service/ui/atoms"
|
|
||||||
import { Modal } from "@imphnen-frontend-service/ui/molecules"
|
|
||||||
import { cn, For, Show } from "@imphnen-frontend-service/utils"
|
|
||||||
import { FC, useEffect, useState } from "react"
|
|
||||||
import { AccountProfile } from "./account-profile"
|
|
||||||
import { DetailProfile } from "./detail-profile"
|
|
||||||
import { ActivityLog } from "./activity-log"
|
|
||||||
import { ModalDetailUserProps } from "./type"
|
|
||||||
|
|
||||||
const TABS = {
|
|
||||||
account: 'account profile',
|
|
||||||
detail: 'detail profile',
|
|
||||||
activity: 'activity logs',
|
|
||||||
} as const
|
|
||||||
type TabType = typeof TABS[keyof typeof TABS]
|
|
||||||
|
|
||||||
export const ModalDetailUser: FC<ModalDetailUserProps> = ({
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
}) => {
|
|
||||||
const [activeTab, setActiveTab] = useState<TabType>(TABS.account)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) setActiveTab(TABS.account)
|
|
||||||
}, [open])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={open}
|
|
||||||
onClose={() => setOpen(false)}
|
|
||||||
className="xl:max-w-[84rem] bg-white px-10 py-9"
|
|
||||||
closeButtonClassName="hidden"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
|
|
||||||
Detail - Muhammad Firdaus Oiwobo
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="flex gap-2 bg-primary-100 p-1.5 rounded-md w-max mb-8">
|
|
||||||
<For data={Object.values(TABS)}>
|
|
||||||
{(tab) => (
|
|
||||||
<Button
|
|
||||||
key={tab}
|
|
||||||
variant="text"
|
|
||||||
className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
|
|
||||||
onClick={() => setActiveTab(tab)}
|
|
||||||
>
|
|
||||||
{tab}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Show condition={activeTab === TABS.account}>
|
|
||||||
<AccountProfile open={open} setOpen={setOpen} />
|
|
||||||
</Show>
|
|
||||||
<Show condition={activeTab === TABS.detail}>
|
|
||||||
<DetailProfile />
|
|
||||||
</Show>
|
|
||||||
<Show condition={activeTab === TABS.activity}>
|
|
||||||
<ActivityLog />
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-5
@@ -1,5 +0,0 @@
|
|||||||
import { ModalProps } from "../type";
|
|
||||||
|
|
||||||
export interface ModalDetailUserProps extends ModalProps {
|
|
||||||
userId?: number | null
|
|
||||||
}
|
|
||||||
-42
@@ -1,42 +0,0 @@
|
|||||||
import { FC } from "react";
|
|
||||||
import { ModalProps } from "../type";
|
|
||||||
import { Modal } from "@imphnen-frontend-service/ui/molecules";
|
|
||||||
import { cn } from "@imphnen-frontend-service/utils";
|
|
||||||
import { Button, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
|
|
||||||
|
|
||||||
const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
|
|
||||||
|
|
||||||
export const ModalSuspendOrBan: FC<ModalProps> = ({ open, setOpen }) => {
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={open}
|
|
||||||
onClose={() => setOpen(false)}
|
|
||||||
className="bg-white px-10 py-9 xl:max-w-[32rem]"
|
|
||||||
closeButtonClassName="hidden"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
|
|
||||||
Suspend/Ban
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Suspend/Ban</label>
|
|
||||||
<Select defaultValue="suspend" className="w-full">
|
|
||||||
<option value="suspend">Suspend</option>
|
|
||||||
<option value="banned">Banned</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className={labelClass}>Alasan</label>
|
|
||||||
<Textarea placeholder="Masukkan alasan suspend/ban" className="w-full h-40" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button type="button" className="w-full">
|
|
||||||
Selesai
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
-4
@@ -1,4 +0,0 @@
|
|||||||
export interface ModalProps {
|
|
||||||
open: boolean
|
|
||||||
setOpen: (open: boolean) => void
|
|
||||||
}
|
|
||||||
@@ -1,206 +0,0 @@
|
|||||||
import { SearchOutlined } from '@ant-design/icons';
|
|
||||||
import { Button, Input, Select } from '@imphnen-frontend-service/ui/atoms';
|
|
||||||
import {
|
|
||||||
BackofficeWrapper,
|
|
||||||
DataTable,
|
|
||||||
} from '@imphnen-frontend-service/ui/organisms';
|
|
||||||
import { cn, For } from '@imphnen-frontend-service/utils';
|
|
||||||
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;
|
|
||||||
name: string;
|
|
||||||
email: string;
|
|
||||||
rating: number;
|
|
||||||
status: UserStatus;
|
|
||||||
}
|
|
||||||
|
|
||||||
const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
|
|
||||||
id: i + 1,
|
|
||||||
name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
|
|
||||||
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 [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor');
|
|
||||||
const [showDetail, setShowDetail] = useState(false);
|
|
||||||
const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
|
|
||||||
|
|
||||||
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
|
|
||||||
const [pagination, setPagination] = useState<PaginationState>({
|
|
||||||
pageIndex: 0,
|
|
||||||
pageSize: 9,
|
|
||||||
});
|
|
||||||
|
|
||||||
const columns: ColumnDef<UserType>[] = [
|
|
||||||
{
|
|
||||||
id: 'select',
|
|
||||||
meta: { cellClassName: cn('w-20') },
|
|
||||||
header: ({ table }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={table.getIsAllRowsSelected()}
|
|
||||||
onChange={table.getToggleAllRowsSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded"
|
|
||||||
checked={row.getIsSelected()}
|
|
||||||
onChange={row.getToggleSelectedHandler()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'name',
|
|
||||||
header: 'Name',
|
|
||||||
accessorKey: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'email',
|
|
||||||
header: 'Email',
|
|
||||||
accessorKey: 'email',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'rating',
|
|
||||||
header: 'Rating',
|
|
||||||
accessorKey: 'rating',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'status',
|
|
||||||
header: 'Status',
|
|
||||||
accessorKey: 'status',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = row.original.status;
|
|
||||||
const statusColors: Record<UserStatus, string> = {
|
|
||||||
active: 'bg-success-200 text-success-500',
|
|
||||||
inactive: 'bg-danger-200 text-danger-500',
|
|
||||||
};
|
|
||||||
const statusText: Record<UserStatus, string> = {
|
|
||||||
active: 'Active',
|
|
||||||
inactive: 'Inactive',
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
|
|
||||||
>
|
|
||||||
{statusText[status]}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Action',
|
|
||||||
meta: { cellClassName: cn('w-72') },
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setSelectedUserId(row.original.id);
|
|
||||||
setShowDetail(true);
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-2 w-max"
|
|
||||||
>
|
|
||||||
<SearchOutlined className="text-[16px]" /> Lihat Detail & Action
|
|
||||||
</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="Dimentorin.dev">
|
|
||||||
<div className="mb-8 flex justify-between items-center">
|
|
||||||
<h1 className="text-p1 font-semibold text-neutral-700 mb-8">
|
|
||||||
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(
|
|
||||||
'px-3 py-2 capitalize',
|
|
||||||
activeTab === tab && 'bg-white'
|
|
||||||
)}
|
|
||||||
onClick={() => setActiveTab(tab)}
|
|
||||||
>
|
|
||||||
{tab}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section className="flex flex-col gap-6 p-8 bg-white rounded-md">
|
|
||||||
<div className="flex justify-between items-center gap-5 mb-2">
|
|
||||||
<div className="relative w-full">
|
|
||||||
<Input
|
|
||||||
placeholder="Cari berdasarkan nama lengkap"
|
|
||||||
className="pl-12 w-full max-h-full"
|
|
||||||
/>
|
|
||||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
|
|
||||||
<SearchOutlined />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>
|
|
||||||
Rating
|
|
||||||
</option>
|
|
||||||
<option value="4.5">4.5</option>
|
|
||||||
<option value="5">5</option>
|
|
||||||
</Select>
|
|
||||||
<Select>
|
|
||||||
<option selected disabled>
|
|
||||||
Status
|
|
||||||
</option>
|
|
||||||
<option value="active">Active</option>
|
|
||||||
<option value="inactive">Inactive</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable data={mockData} columns={columns} table={table} />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<ModalDetailUser
|
|
||||||
open={showDetail}
|
|
||||||
setOpen={setShowDetail}
|
|
||||||
userId={selectedUserId}
|
|
||||||
/>
|
|
||||||
</BackofficeWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import {
|
|
||||||
authLoginSchema,
|
|
||||||
TLoginRequest,
|
|
||||||
useBackofficeLogin,
|
|
||||||
} from '@imphnen-frontend-service/service';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import { useNavigate } from 'react-router';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
export const useLogin = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const loginMutation = useBackofficeLogin();
|
|
||||||
|
|
||||||
const form = useForm<TLoginRequest>({
|
|
||||||
resolver: zodResolver(authLoginSchema),
|
|
||||||
mode: 'all',
|
|
||||||
defaultValues: {
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = form.handleSubmit(async (data) => {
|
|
||||||
try {
|
|
||||||
await loginMutation.mutateAsync(data);
|
|
||||||
toast.success('Login berhasil!');
|
|
||||||
navigate('/hackathon-dashboard');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[Backoffice Login] Error:', error);
|
|
||||||
toast.error((error as Error).message || 'Login gagal');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
form,
|
|
||||||
onSubmit,
|
|
||||||
isLoading: loginMutation.isPending,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -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="/hackathon-dashboard"
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import {
|
||||||
|
authLoginSchema,
|
||||||
|
TLoginRequest,
|
||||||
|
usePostLogin,
|
||||||
|
} from '@imphnen-frontend-service/service';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
export const useLogin = () => {
|
||||||
|
const postLogin = usePostLogin();
|
||||||
|
const form = useForm<TLoginRequest>({
|
||||||
|
resolver: zodResolver(authLoginSchema),
|
||||||
|
mode: 'all',
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = form.handleSubmit((data) => {
|
||||||
|
postLogin.mutate(data, {
|
||||||
|
onSuccess: () => toast.success("Login sukses"),
|
||||||
|
onError: (error) => toast.error(error.message),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
form,
|
||||||
|
onSubmit,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { FC, ReactElement } from 'react';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
|
||||||
|
|
||||||
|
export const AppLayout: FC = (): ReactElement => {
|
||||||
|
return (
|
||||||
|
<div className="bg-primary-50 min-h-screen flex justify-center">
|
||||||
|
<div className="bg-primary-50 min-h-screen w-full flex">
|
||||||
|
<BackofficeSidebar />
|
||||||
|
<div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AppLayout;
|
||||||
+2
-2
@@ -18,7 +18,7 @@ import {
|
|||||||
RowSelectionState,
|
RowSelectionState,
|
||||||
} from '@tanstack/react-table';
|
} from '@tanstack/react-table';
|
||||||
import ModalEditAccount from './_components/modal-edit-account';
|
import ModalEditAccount from './_components/modal-edit-account';
|
||||||
import { useQueryState } from '@imphnen-frontend-service/utils';
|
import { useQueryState } from '../../hook/use-query-state';
|
||||||
|
|
||||||
interface Account {
|
interface Account {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -166,7 +166,7 @@ export const Components: FC = (): ReactElement => {
|
|||||||
</Button>
|
</Button>
|
||||||
{showFilter && (
|
{showFilter && (
|
||||||
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
|
<div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
|
||||||
<Filter onClose={() => setShowFilter(false)} options={[]} />
|
<Filter onClose={() => setShowFilter(false)} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user