wibu/wajs-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tambahannya

Browse Source
This commit is contained in:
bipproduction
2025-10-15 21:17:25 +08:00
commit 9e60f5ebf6
80 changed files with 17816 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.tsx Normal file
View File

@@ -0,0 +1,17 @@
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import { Notifications } from "@mantine/notifications";
import { ModalsProvider } from "@mantine/modals";
import { MantineProvider } from "@mantine/core";
import AppRoutes from "./AppRoutes";
export function App() {
return (
<MantineProvider>
<Notifications />
<ModalsProvider>
<AppRoutes />
</ModalsProvider>
</MantineProvider>
);
}

64
src/AppRoutes.tsx Normal file
View File

@@ -0,0 +1,64 @@
// ⚡ Auto-generated by generateRoutes.ts — DO NOT EDIT MANUALLY
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Qrcode from "./pages/wajs/qrcode";
import WebhookCreate from "./pages/sq/dashboard/webhook/webhook_create";
import WebhookEdit from "./pages/sq/dashboard/webhook/webhook_edit";
import WebhookHome from "./pages/sq/dashboard/webhook/webhook_home";
import WebhookLayout from "./pages/sq/dashboard/webhook/webhook_layout";
import WajsHome from "./pages/sq/dashboard/wajs/wajs_home";
import WajsLayout from "./pages/sq/dashboard/wajs/wajs_layout";
import ApikeyPage from "./pages/sq/dashboard/apikey/apikey_page";
import DashboardPage from "./pages/sq/dashboard/dashboard_page";
import DashboardLayout from "./pages/sq/dashboard/dashboard_layout";
import SqLayout from "./pages/sq/sq_layout";
import Login from "./pages/Login";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
export default function AppRoutes() {
return (
<BrowserRouter>
<Routes>
<Route path="/wajs/qrcode" element={<Qrcode />} />
<Route path="/sq" element={<SqLayout />}>
<Route path="/sq/dashboard" element={<DashboardLayout />}>
<Route path="/sq/dashboard/webhook" element={<WebhookLayout />}>
<Route index element={<WebhookHome />} />
<Route
path="/sq/dashboard/webhook/webhook-create"
element={<WebhookCreate />}
/>
<Route
path="/sq/dashboard/webhook/webhook-edit"
element={<WebhookEdit />}
/>
<Route
path="/sq/dashboard/webhook/webhook-home"
element={<WebhookHome />}
/>
</Route>
<Route path="/sq/dashboard/wajs" element={<WajsLayout />}>
<Route index element={<WajsHome />} />
<Route
path="/sq/dashboard/wajs/wajs-home"
element={<WajsHome />}
/>
</Route>
<Route
path="/sq/dashboard/apikey/apikey"
element={<ApikeyPage />}
/>
<Route path="/sq/dashboard/dashboard" element={<DashboardPage />} />
</Route>
</Route>
<Route path="/login" element={<Login />} />
<Route path="/" element={<Home />} />
<Route path="/*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}

19
src/clientRoutes.ts Normal file
View File

@@ -0,0 +1,19 @@
// AUTO-GENERATED FILE
const clientRoutes = {
"/wajs/qrcode": "/wajs/qrcode",
"/sq": "/sq",
"/sq/dashboard": "/sq/dashboard",
"/sq/dashboard/webhook": "/sq/dashboard/webhook",
"/sq/dashboard/webhook/webhook-create": "/sq/dashboard/webhook/webhook-create",
"/sq/dashboard/webhook/webhook-edit": "/sq/dashboard/webhook/webhook-edit",
"/sq/dashboard/webhook/webhook-home": "/sq/dashboard/webhook/webhook-home",
"/sq/dashboard/wajs": "/sq/dashboard/wajs",
"/sq/dashboard/wajs/wajs-home": "/sq/dashboard/wajs/wajs-home",
"/sq/dashboard/apikey/apikey": "/sq/dashboard/apikey/apikey",
"/sq/dashboard/dashboard": "/sq/dashboard/dashboard",
"/login": "/login",
"/": "/",
"/*": "/*"
} as const;
export default clientRoutes;

25
src/components/ProtectedRoute.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { useEffect, useState } from "react";
import { Navigate, Outlet } from "react-router-dom";
import clientRoutes from "@/clientRoutes";
import apiFetch from "@/lib/apiFetch";
export default function ProtectedRoute() {
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
useEffect(() => {
async function checkSession() {
try {
// backend otomatis baca cookie JWT dari request
const res = await apiFetch.api.user.find.get();
setIsAuthenticated(res.status === 200);
} catch {
setIsAuthenticated(false);
}
}
checkSession();
}, []);
if (isAuthenticated === null) return null; // or loading spinner
if (!isAuthenticated) return <Navigate to={clientRoutes["/login"]} replace />;
return <Outlet />;
}

26
src/frontend.tsx Normal file
View File

@@ -0,0 +1,26 @@
/**
* This file is the entry point for the React app, it sets up the root
* element and renders the App component to the DOM.
*
* It is included in `src/index.html`.
*/
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
const elem = document.getElementById("root")!;
const app = (
<StrictMode>
<App />
</StrictMode>
);
if (import.meta.hot) {
// With hot module reloading, `import.meta.hot.data` is persisted.
const root = (import.meta.hot.data.root ??= createRoot(elem));
root.render(app);
} else {
// The hot module reloading API is not available in production.
createRoot(elem).render(app);
}

187
src/index.css Normal file
View File

@@ -0,0 +1,187 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
}
body {
margin: 0;
display: grid;
place-items: center;
min-width: 320px;
min-height: 100vh;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
opacity: 0.05;
background: url("./logo.svg");
background-size: 256px;
transform: rotate(-12deg) scale(1.35);
animation: slide 30s linear infinite;
pointer-events: none;
}
@keyframes slide {
from {
background-position: 0 0;
}
to {
background-position: 256px 224px;
}
}
.app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
position: relative;
z-index: 1;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 0.3s;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.bun-logo {
transform: scale(1.2);
}
.bun-logo:hover {
filter: drop-shadow(0 0 2em #fbf0dfaa);
}
.react-logo {
animation: spin 20s linear infinite;
}
.react-logo:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
code {
background-color: #1a1a1a;
padding: 0.2em 0.4em;
border-radius: 0.3em;
font-family: monospace;
}
.api-tester {
margin: 2rem auto 0;
width: 100%;
max-width: 600px;
text-align: left;
display: flex;
flex-direction: column;
gap: 1rem;
}
.endpoint-row {
display: flex;
align-items: center;
gap: 0.5rem;
background: #1a1a1a;
padding: 0.75rem;
border-radius: 12px;
font: monospace;
border: 2px solid #fbf0df;
transition: 0.3s;
width: 100%;
box-sizing: border-box;
}
.endpoint-row:focus-within {
border-color: #f3d5a3;
}
.method {
background: #fbf0df;
color: #1a1a1a;
padding: 0.3rem 0.7rem;
border-radius: 8px;
font-weight: 700;
font-size: 0.9em;
appearance: none;
margin: 0;
width: min-content;
display: block;
flex-shrink: 0;
border: none;
}
.method option {
text-align: left;
}
.url-input {
width: 100%;
flex: 1;
background: 0;
border: 0;
color: #fbf0df;
font: 1em monospace;
padding: 0.2rem;
outline: 0;
}
.url-input:focus {
color: #fff;
}
.url-input::placeholder {
color: rgba(251, 240, 223, 0.4);
}
.send-button {
background: #fbf0df;
color: #1a1a1a;
border: 0;
padding: 0.4rem 1.2rem;
border-radius: 8px;
font-weight: 700;
transition: 0.1s;
cursor: var(--bun-cursor);
}
.send-button:hover {
background: #f3d5a3;
transform: translateY(-1px);
cursor: pointer;
}
.response-area {
width: 100%;
min-height: 120px;
background: #1a1a1a;
border: 2px solid #fbf0df;
border-radius: 12px;
padding: 0.75rem;
color: #fbf0df;
font: monospace;
resize: vertical;
box-sizing: border-box;
}
.response-area:focus {
border-color: #f3d5a3;
}
.response-area::placeholder {
color: rgba(251, 240, 223, 0.4);
}
@media (prefers-reduced-motion) {
*,
::before,
::after {
animation: none !important;
}
}

13
src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="./logo.svg" />
<title>Bun + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./frontend.tsx"></script>
</body>
</html>

46
src/index.tsx Normal file
View File

@@ -0,0 +1,46 @@
import Elysia, { t } from "elysia";
import Swagger from "@elysiajs/swagger";
import html from "./index.html";
import Dashboard from "./server/routes/darmasaba";
import apiAuth from "./server/middlewares/apiAuth";
import Auth from "./server/routes/auth_route";
import ApiKeyRoute from "./server/routes/apikey_route";
import type { User } from "generated/prisma";
import WaRoute from "./server/routes/wa_route";
import WebhookRoute from "./server/routes/webhook_route";
const Docs = new Elysia().use(
Swagger({
path: "/docs",
}),
);
const ApiUser = new Elysia({
prefix: "/user",
}).get("/find", (ctx) => {
const { user } = ctx as any;
return {
user: user as User,
};
});
const Api = new Elysia({
prefix: "/api",
})
.use(apiAuth)
.use(ApiKeyRoute)
.use(Dashboard)
.use(ApiUser)
.use(WaRoute)
.use(WebhookRoute);
const app = new Elysia()
.use(Api)
.use(Docs)
.use(Auth)
.get("*", html)
.listen(3000, () => {
console.log("Server running at http://localhost:3000");
});
export type ServerApp = typeof app;

11
src/lib/apiFetch.ts Normal file
View File

@@ -0,0 +1,11 @@
import { treaty } from '@elysiajs/eden'
import type { ServerApp } from '..'
const URL = process.env.BUN_PUBLIC_BASE_URL
if (!URL) {
throw new Error('BUN_PUBLIC_BASE_URL is not defined')
}
const apiFetch = treaty<ServerApp>(URL)
export default apiFetch

1
src/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

7
src/pages/Home.tsx Normal file
View File

@@ -0,0 +1,7 @@
export default function Home() {
return (
<div>
<h1>Home</h1>
</div>
);
}

84
src/pages/Login.tsx Normal file
View File

@@ -0,0 +1,84 @@
import {
Button,
Container,
Group,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { useEffect, useState } from "react";
import apiFetch from "../lib/apiFetch";
import clientRoutes from "@/clientRoutes";
import { Navigate } from "react-router-dom";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
useEffect(() => {
async function checkSession() {
try {
// backend otomatis baca cookie JWT dari request
const res = await apiFetch.api.user.find.get();
setIsAuthenticated(res.status === 200);
} catch {
setIsAuthenticated(false);
}
}
checkSession();
}, []);
const handleSubmit = async () => {
setLoading(true);
try {
const response = await apiFetch.auth.login.post({
email,
password,
});
if (response.data?.token) {
localStorage.setItem("token", response.data.token);
window.location.href = clientRoutes["/sq/dashboard"];
return;
}
if (response.error) {
alert(JSON.stringify(response.error));
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
if (isAuthenticated === null) return null; // or loading spinner
if (isAuthenticated)
return <Navigate to={clientRoutes["/sq/dashboard"]} replace />;
return (
<Container>
<Stack>
<Text>Login</Text>
<TextInput
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<TextInput
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Group justify="right">
<Button onClick={handleSubmit} disabled={loading}>
Login
</Button>
</Group>
</Stack>
</Container>
);
}

7
src/pages/NotFound.tsx Normal file
View File

@@ -0,0 +1,7 @@
export default function NotFound() {
return (
<div>
<h1>404 Not Found</h1>
</div>
);
}

327
src/pages/sq/dashboard/apikey/apikey_page.tsx Normal file
View File

@@ -0,0 +1,327 @@
import {
Button,
Card,
Container,
Group,
Stack,
Table,
Text,
TextInput,
ScrollArea,
Divider,
Tooltip,
Badge,
Loader,
ActionIcon,
Center,
} from "@mantine/core";
import { IconKey, IconPlus, IconTrash, IconCopy } from "@tabler/icons-react";
import { useEffect, useState } from "react";
import { showNotification } from "@mantine/notifications";
import apiFetch from "@/lib/apiFetch";
export default function ApiKeyPage() {
return (
<Container
w={"100%"}
size="lg"
px="md"
py="xl"
style={{
background:
"radial-gradient(800px 400px at 10% 10%, rgba(0,255,200,0.05), transparent), radial-gradient(800px 400px at 90% 90%, rgba(0,255,255,0.04), transparent), linear-gradient(180deg, #0f0f0f 0%, #191919 100%)",
borderRadius: "20px",
boxShadow: "0 0 60px rgba(0,255,200,0.04)",
color: "#EAEAEA",
minHeight: "90vh",
}}
>
<Stack gap="xl">
<Group justify="space-between">
<Group gap="xs">
<IconKey size={28} color="#00FFC8" />
<Text fw={700} fz={26} c="#EAEAEA">
API Key Management
</Text>
</Group>
<Badge
size="lg"
radius="lg"
style={{
background:
"linear-gradient(90deg, rgba(0,255,200,0.08), rgba(0,255,255,0.05))",
border: "1px solid rgba(0,255,220,0.2)",
color: "#00FFC8",
}}
>
Secure Access
</Badge>
</Group>
<Divider color="rgba(0,255,200,0.1)" />
<CreateApiKey />
</Stack>
</Container>
);
}
function CreateApiKey() {
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [expiredAt, setExpiredAt] = useState("");
const [loading, setLoading] = useState(false);
const [refresh, setRefresh] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!name.trim()) {
showNotification({
title: "Missing name",
message: "Please enter a name for your API key",
color: "red",
});
return;
}
setLoading(true);
const res = await apiFetch.api.apikey.create.post({
name,
description,
expiredAt,
});
setLoading(false);
if (res.status === 200) {
setName("");
setDescription("");
setExpiredAt("");
showNotification({
title: "Success",
message: "API key created successfully",
color: "teal",
});
setRefresh((r) => !r);
}
};
return (
<Stack gap="xl">
<Card
p="xl"
radius="lg"
style={{
background:
"linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))",
border: "1px solid rgba(0,255,200,0.1)",
boxShadow: "0 0 30px rgba(0,255,200,0.05)",
backdropFilter: "blur(6px)",
}}
>
<Stack gap="md">
<Group justify="space-between">
<Text fw={600} fz="lg" c="#EAEAEA">
Create New API Key
</Text>
<IconPlus size={22} color="#00FFC8" />
</Group>
<form onSubmit={handleSubmit}>
<Stack gap="sm">
<TextInput
label="Key Name"
placeholder="Enter key name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<TextInput
label="Description"
placeholder="Describe the key purpose"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<TextInput
label="Expiration Date"
placeholder="YYYY-MM-DD"
type="date"
value={expiredAt}
onChange={(e) => setExpiredAt(e.target.value)}
/>
<Group justify="right" mt="md">
<Button
variant="outline"
color="gray"
onClick={() => {
setName("");
setDescription("");
setExpiredAt("");
}}
>
Clear
</Button>
<Button
type="submit"
loading={loading}
style={{
background:
"linear-gradient(90deg, #00FFC8 0%, #00FFFF 100%)",
color: "#191919",
fontWeight: 600,
}}
>
Save Key
</Button>
</Group>
</Stack>
</form>
</Stack>
</Card>
<ListApiKey refresh={refresh} />
</Stack>
);
}
function ListApiKey({ refresh }: { refresh: boolean }) {
const [apiKeys, setApiKeys] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchApiKeys = async () => {
setLoading(true);
const res = await apiFetch.api.apikey.list.get();
if (res.status === 200) {
setApiKeys(res.data?.apiKeys || []);
}
setLoading(false);
};
fetchApiKeys();
}, [refresh]);
return (
<Card
p="xl"
radius="lg"
style={{
background:
"linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))",
border: "1px solid rgba(0,255,200,0.1)",
boxShadow: "0 0 30px rgba(0,255,200,0.05)",
backdropFilter: "blur(6px)",
}}
>
<Stack gap="md">
<Group justify="space-between">
<Text fw={600} fz="lg" c="#EAEAEA">
Active API Keys
</Text>
</Group>
<Divider color="rgba(0,255,200,0.05)" />
{loading ? (
<Center py="xl">
<Loader color="teal" />
</Center>
) : apiKeys.length === 0 ? (
<Center py="xl">
<Text c="#9A9A9A">No API keys found</Text>
</Center>
) : (
<ScrollArea>
<Table
highlightOnHover
verticalSpacing="sm"
horizontalSpacing="md"
style={{
color: "#EAEAEA",
borderCollapse: "separate",
borderSpacing: "0 8px",
}}
>
<Table.Thead>
<Table.Tr>
<Table.Th>Name</Table.Th>
<Table.Th>Description</Table.Th>
<Table.Th>Expired</Table.Th>
<Table.Th>Created</Table.Th>
<Table.Th>Updated</Table.Th>
<Table.Th align="right">Actions</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{apiKeys.map((apiKey: any, index: number) => (
<Table.Tr
key={index}
style={{
background: "rgba(255,255,255,0.02)",
borderRadius: 10,
transition: "background 0.15s ease",
}}
>
<Table.Td>{apiKey.name}</Table.Td>
<Table.Td c="#9A9A9A">
{apiKey.description || "—"}
</Table.Td>
<Table.Td>
{apiKey.expiredAt
? new Date(apiKey.expiredAt)
.toISOString()
.split("T")[0]
: "—"}
</Table.Td>
<Table.Td>
{new Date(apiKey.createdAt)
.toISOString()
.split("T")[0]}
</Table.Td>
<Table.Td>
{new Date(apiKey.updatedAt)
.toISOString()
.split("T")[0]}
</Table.Td>
<Table.Td align="right">
<Group gap={4} justify="right">
<Tooltip label="Copy Key" withArrow>
<ActionIcon
variant="light"
color="teal"
onClick={() => {
navigator.clipboard.writeText(apiKey.key);
showNotification({
title: "Copied",
message: "API key copied to clipboard",
color: "teal",
});
}}
>
<IconCopy size={18} />
</ActionIcon>
</Tooltip>
<Tooltip label="Delete Key" withArrow>
<ActionIcon
variant="light"
color="red"
onClick={async () => {
await apiFetch.api.apikey.delete.delete({
id: apiKey.id,
});
setApiKeys((prev) =>
prev.filter((a) => a.id !== apiKey.id)
);
showNotification({
title: "Deleted",
message: "API key removed successfully",
color: "red",
});
}}
>
<IconTrash size={18} />
</ActionIcon>
</Tooltip>
</Group>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</ScrollArea>
)}
</Stack>
</Card>
);
}

291
src/pages/sq/dashboard/dashboard_layout.tsx Normal file
View File

@@ -0,0 +1,291 @@
import { useEffect, useState } from "react";
import {
ActionIcon,
AppShell,
Avatar,
Button,
Card,
Divider,
Flex,
Group,
NavLink,
Paper,
ScrollArea,
Stack,
Text,
Title,
Tooltip,
Badge,
} from "@mantine/core";
import { useLocalStorage } from "@mantine/hooks";
import {
IconChevronLeft,
IconChevronRight,
IconDashboard,
IconKey,
IconWebhook,
IconBrandWhatsapp,
IconUser,
IconLogout,
} from "@tabler/icons-react";
import type { User } from "generated/prisma";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import apiFetch from "@/lib/apiFetch";
import clientRoutes from "@/clientRoutes";
function Logout() {
return (
<Group justify="center" mt="md">
<Button
variant="light"
color="red"
radius="xl"
size="compact-sm"
leftSection={<IconLogout size={16} />}
onClick={async () => {
await apiFetch.auth.logout.delete();
localStorage.removeItem("token");
window.location.href = "/login";
}}
>
Logout
</Button>
</Group>
);
}
export default function DashboardLayout() {
const [opened, setOpened] = useLocalStorage({
key: "nav_open",
defaultValue: true,
});
return (
<AppShell
padding="lg"
navbar={{
width: 270,
breakpoint: "sm",
collapsed: { mobile: !opened, desktop: !opened },
}}
styles={{
main: {
background: "#191919",
color: "#EAEAEA",
},
}}
>
<AppShell.Navbar
p="md"
style={{
background: "rgba(30,30,30,0.8)",
backdropFilter: "blur(10px)",
borderRight: "1px solid rgba(0,255,200,0.15)",
// boxShadow: "0 0 18px rgba(0,255,200,0.1)",
}}
>
<AppShell.Section>
<Group justify="flex-end" p="xs">
<Tooltip
label={opened ? "Collapse navigation" : "Expand navigation"}
withArrow
color="cyan"
>
<ActionIcon
variant="light"
radius="xl"
onClick={() => setOpened((v) => !v)}
aria-label="Toggle navigation"
style={{
color: "#00FFC8",
background: "rgba(0,255,200,0.1)",
// boxShadow: "0 0 10px rgba(0,255,200,0.2)",
}}
>
{opened ? <IconChevronLeft /> : <IconChevronRight />}
</ActionIcon>
</Tooltip>
</Group>
</AppShell.Section>
<AppShell.Section grow component={ScrollArea}>
<NavigationDashboard />
</AppShell.Section>
<AppShell.Section>
<HostView />
</AppShell.Section>
</AppShell.Navbar>
<AppShell.Main>
<Stack gap="md">
<Paper
withBorder
shadow="lg"
radius="xl"
p="md"
style={{
background: "rgba(45,45,45,0.6)",
backdropFilter: "blur(8px)",
border: "1px solid rgba(0,255,200,0.2)",
}}
>
<Flex align="center" gap="md">
{!opened && (
<Tooltip label="Open navigation menu" withArrow color="cyan">
<ActionIcon
variant="light"
radius="xl"
onClick={() => setOpened(true)}
aria-label="Open navigation"
style={{
color: "#00FFFF",
background: "rgba(0,255,200,0.1)",
}}
>
<IconChevronRight />
</ActionIcon>
</Tooltip>
)}
<Title order={3} fw={600} c="#EAEAEA">
Control Center
</Title>
<Badge
variant="light"
color="teal"
size="sm"
style={{
background: "rgba(0,255,200,0.15)",
color: "#00FFFF",
}}
>
Live
</Badge>
</Flex>
</Paper>
<Outlet />
</Stack>
</AppShell.Main>
</AppShell>
);
}
function HostView() {
const [host, setHost] = useState<User | null>(null);
useEffect(() => {
async function fetchHost() {
const { data } = await apiFetch.api.user.find.get();
setHost(data?.user ?? null);
}
fetchHost();
}, []);
return (
<Card
radius="xl"
withBorder
shadow="md"
p="md"
style={{
background: "rgba(45,45,45,0.6)",
border: "1px solid rgba(0,255,200,0.15)",
// boxShadow: "0 0 12px rgba(0,255,200,0.1)",
}}
>
{host ? (
<Stack gap="sm">
<Flex gap="md" align="center">
<Avatar
size="lg"
radius="xl"
style={{
background:
"linear-gradient(145deg, rgba(0,255,200,0.3), rgba(0,255,255,0.4))",
color: "#EAEAEA",
fontWeight: 700,
}}
>
{host.name?.[0]}
</Avatar>
<Stack gap={2}>
<Text fw={600} c="#EAEAEA">
{host.name}
</Text>
<Text size="sm" c="#9A9A9A">
{host.email}
</Text>
</Stack>
</Flex>
<Divider color="rgba(0,255,200,0.2)" />
<Logout />
</Stack>
) : (
<Text size="sm" c="#9A9A9A" ta="center">
Host data unavailable
</Text>
)}
</Card>
);
}
function NavigationDashboard() {
const navigate = useNavigate();
const location = useLocation();
const items = [
{
path: "/sq/dashboard/dashboard",
label: "Overview",
icon: <IconDashboard size={20} color="#00FFFF" />,
desc: "Main dashboard insights",
},
{
path: "/sq/dashboard/apikey/apikey",
label: "API Keys",
icon: <IconKey size={20} color="#00FFFF" />,
desc: "Manage and regenerate access tokens",
},
{
path: "/sq/dashboard/wajs/wajs-home",
label: "Wajs Integration",
icon: <IconBrandWhatsapp size={20} color="#00FFFF" />,
desc: "WhatsApp session manager",
},
{
path: "/sq/dashboard/webhook/webhook-home",
label: "Webhooks",
icon: <IconWebhook size={20} color="#00FFFF" />,
desc: "Incoming and outgoing event handlers",
},
];
return (
<Stack gap="xs">
{items.map((item) => (
<NavLink
key={item.path}
active={location.pathname.startsWith(item.path)}
leftSection={item.icon}
label={item.label}
description={item.desc}
onClick={() =>
navigate(clientRoutes[item.path as keyof typeof clientRoutes])
}
style={{
borderRadius: "12px",
color: "#EAEAEA",
background: location.pathname.startsWith(item.path)
? "rgba(0,255,200,0.15)"
: "transparent",
transition: "background 0.2s ease",
}}
styles={{
label: { fontWeight: 500, color: "#EAEAEA" },
description: { color: "#9A9A9A" },
}}
/>
))}
</Stack>
);
}

7
src/pages/sq/dashboard/dashboard_page.tsx Normal file
View File

@@ -0,0 +1,7 @@
export default function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
</div>
);
}

3
src/pages/sq/dashboard/wajs/wajs_home.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function WajsHome() {
return <h1>Wajs Home</h1>;
}

48
src/pages/sq/dashboard/wajs/wajs_layout.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { Navigate, Outlet } from "react-router-dom";
import useSWR from "swr";
import apiFetch from "@/lib/apiFetch";
import { Badge, Button, Chip, Group, Pill, Stack } from "@mantine/core";
import { useState } from "react";
import clientRoutes from "@/clientRoutes";
export default function WajsLayout() {
const [loading, setLoading] = useState(false);
const { data } = useSWR("/wa/qr", apiFetch.api.wa.state.get, {
revalidateOnFocus: false,
revalidateOnReconnect: false,
revalidateIfStale: false,
refreshInterval: 3000,
onSuccess(data, key, config) {
console.log(data.data?.state);
},
});
if (!data?.data?.state) return <Outlet />;
if (data.data?.state.qr)
return <Navigate to={clientRoutes["/wajs/qrcode"]} replace />;
return (
<Stack>
<Group>
<Button
loading={loading && !data.data?.state.ready}
disabled={data.data?.state.ready}
onClick={() => {
setLoading(true);
apiFetch.api.wa.start.post();
}}
>
{data.data?.state.ready ? "Ready" : "Start"}
</Button>
<Button
onClick={() => {
setLoading(true);
apiFetch.api.wa.restart.post();
}}
>
Reconnect
</Button>
</Group>
<Outlet />
</Stack>
);
}

316
src/pages/sq/dashboard/webhook/webhook_create.tsx Normal file
View File

@@ -0,0 +1,316 @@
import { useState, useMemo } from "react";
import {
Button,
Card,
Checkbox,
Group,
Stack,
Text,
TextInput,
Select,
Divider,
Title,
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconCode, IconCheck, IconX } from "@tabler/icons-react";
import Editor from "@monaco-editor/react";
import apiFetch from "@/lib/apiFetch";
import { useNavigate } from "react-router-dom";
import clientRoutes from "@/clientRoutes";
// data.from': data.from,
// data.fromNumber': data.fromNumber,
// data.fromMe': data.fromMe,
// data.body': data.body,
// data.hasMedia': data.hasMedia,
// data.type': data.type,
// data.to': data.to,
// data.deviceType': data.deviceType,
// data.notifyName': data.notifyName,
// data.media.data': data.media?.data ?? null,
// data.media.mimetype': data.media?.mimetype ?? null,
// data.media.filename': data.media?.filename ?? null,
// data.media.filesize': data.media?.filesize ?? 0,
const templateData = `
Available variables:
{{data.from}}, {{data.fromNumber}}, {{data.fromMe}}, {{data.body}}, {{data.hasMedia}}, {{data.type}}, {{data.to}}, {{data.deviceType}}, {{data.notifyName}}, {{data.media.data}}, {{data.media.mimetype}}, {{data.media.filename}}, {{data.media.filesize}}
`;
export default function WebhookCreate() {
const navigate = useNavigate();
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [url, setUrl] = useState("");
const [method, setMethod] = useState("POST");
const [headers, setHeaders] = useState(
JSON.stringify({ "Content-Type": "application/json" }, null, 2),
);
const [payload, setPayload] = useState("{}");
const [apiToken, setApiToken] = useState("");
const [enabled, setEnabled] = useState(true);
const [replay, setReplay] = useState(false);
const [replayKey, setReplayKey] = useState("");
const safeJson = (value: string) => {
try {
return JSON.stringify(JSON.parse(value || "{}"), null, 2);
} catch {
return value || "{}";
}
};
const previewCode = useMemo(() => {
let headerObj: Record<string, string> = {};
try {
headerObj = JSON.parse(headers);
} catch { }
if (apiToken) headerObj["Authorization"] = `Bearer ${apiToken}`;
const prettyHeaders = safeJson(JSON.stringify(headerObj));
const prettyPayload = safeJson(payload);
const includeBody = ["POST", "PUT", "PATCH"].includes(method.toUpperCase());
return `fetch("${url || "https://example.com/webhook"}", {
method: "${method}",
headers: ${prettyHeaders},${includeBody ? `\n body: ${prettyPayload},` : ""}
})
.then(res => res.json())
.then(console.log)
.catch(console.error);`;
}, [url, method, headers, payload, apiToken]);
async function onSubmit() {
const { data } = await apiFetch.api.webhook.create.post({
name,
description,
apiToken,
url,
method,
headers,
payload,
enabled,
replay,
replayKey,
});
if (data?.success) {
notifications.show({
title: "Webhook Created",
message: data.message,
color: "teal",
icon: <IconCheck />,
});
navigate(clientRoutes["/sq/dashboard/webhook"]);
} else {
notifications.show({
title: "Creation Failed",
message: data?.message || "Unable to create webhook",
color: "red",
icon: <IconX />,
});
}
}
return (
<Stack style={{ backgroundColor: "#191919" }} p="xl">
<Stack
gap="md"
maw={900}
mx="auto"
bg="rgba(45,45,45,0.6)"
p="xl"
style={{
borderRadius: "20px",
backdropFilter: "blur(12px)",
border: "1px solid rgba(0,255,200,0.2)",
// boxShadow: "0 0 25px rgba(0,255,200,0.15)",
}}
>
<Group justify="space-between">
<Title order={2} c="#EAEAEA" fw={600}>
Create Webhook
</Title>
<IconCode color="#00FFFF" size={28} />
</Group>
<Divider color="rgba(0,255,200,0.2)" />
<TextInput
label="Name"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<TextInput
label="Description"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<TextInput
label="Webhook URL"
placeholder="https://example.com/webhook"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
<Select
label="HTTP Method"
placeholder="Select method"
value={method}
onChange={(v) => setMethod(v || "POST")}
data={["POST", "GET", "PUT", "PATCH", "DELETE"].map((v) => ({
value: v,
label: v,
}))}
/>
<TextInput
label="API Token"
placeholder="Bearer ..."
value={apiToken}
onChange={(e) => {
setApiToken(e.target.value);
try {
const current = JSON.parse(headers);
if (!e.target.value) {
delete current["Authorization"];
} else {
current["Authorization"] = `Bearer ${e.target.value}`;
}
setHeaders(JSON.stringify(current, null, 2));
} catch { }
}}
/>
<Stack gap="xs">
<Text fw={600} c="#EAEAEA">
Headers (JSON)
</Text>
<Editor
theme="vs-dark"
height="20vh"
language="json"
value={headers}
onChange={(val) => setHeaders(val ?? "{}")}
options={{
minimap: { enabled: false },
fontSize: 13,
scrollBeyondLastLine: false,
lineNumbers: "off",
automaticLayout: true,
}}
/>
</Stack>
<Stack gap="xs">
<Text fw={600} c="#EAEAEA">
Payload
</Text>
<Text size="xs" c="#9A9A9A" mb="xs">
{templateData}
</Text>
<Editor
theme="vs-dark"
height="35vh"
language="json"
value={payload}
onChange={(val) => setPayload(val ?? "{}")}
options={{
minimap: { enabled: false },
fontSize: 13,
scrollBeyondLastLine: false,
automaticLayout: true,
}}
/>
</Stack>
<Checkbox
label="Enable Webhook"
checked={enabled}
onChange={(e) => setEnabled(e.currentTarget.checked)}
color="teal"
styles={{
label: { color: "#EAEAEA" },
}}
/>
<Checkbox
label="Enable Replay"
checked={replay}
onChange={(e) => setReplay(e.currentTarget.checked)}
color="teal"
styles={{
label: { color: "#EAEAEA" },
}}
/>
<TextInput
description="Replay Key is used to identify the webhook example: data.text"
label="Replay Key"
placeholder="Replay Key"
value={replayKey}
onChange={(e) => setReplayKey(e.target.value)}
/>
<Card
radius="xl"
p="md"
style={{
background: "rgba(25,25,25,0.6)",
border: "1px solid rgba(0,255,200,0.3)",
// boxShadow: "0 0 15px rgba(0,255,200,0.15)",
}}
>
<Stack gap="xs">
<Text fw={600} c="#EAEAEA">
Request Preview
</Text>
<Editor
theme="vs-dark"
height="35vh"
language="javascript"
value={previewCode}
options={{
readOnly: true,
minimap: { enabled: false },
fontSize: 13,
scrollBeyondLastLine: false,
automaticLayout: true,
}}
/>
</Stack>
</Card>
<Group justify="flex-end" mt="md">
<Button
onClick={() => navigate(clientRoutes["/sq/dashboard/webhook"])}
variant="subtle"
c="#EAEAEA"
styles={{
root: { backgroundColor: "#2D2D2D", borderColor: "#00FFC8" },
}}
>
Cancel
</Button>
<Button
onClick={onSubmit}
style={{
background: "linear-gradient(90deg, #00FFC8, #00FFFF)",
color: "#191919",
}}
>
Save Webhook
</Button>
</Group>
</Stack>
</Stack>
);
}

361
src/pages/sq/dashboard/webhook/webhook_edit.tsx Normal file
View File

@@ -0,0 +1,361 @@
import useSWR from "swr";
import apiFetch from "@/lib/apiFetch";
import { useSearchParams, useNavigate } from "react-router-dom";
import type { WebHook } from "generated/prisma";
import { useState } from "react";
import { useMemo } from "react";
import { notifications } from "@mantine/notifications";
import { IconCode, IconCheck, IconX } from "@tabler/icons-react";
import Editor from "@monaco-editor/react";
import { Stack, Group, Title, Divider, TextInput, Select, Checkbox, Card, Button, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import clientRoutes from "@/clientRoutes";
import { useShallowEffect } from "@mantine/hooks";
const templateData = `
Available variables:
{{data.from}}, {{data.fromNumber}}, {{data.fromMe}}, {{data.body}}, {{data.hasMedia}}, {{data.type}}, {{data.to}}, {{data.deviceType}}, {{data.notifyName}}, {{data.media.data}}, {{data.media.mimetype}}, {{data.media.filename}}, {{data.media.filesize}}
`;
export default function WebhookEdit() {
const [searchParams] = useSearchParams();
const id = searchParams.get("id");
const { data, error, isLoading, mutate } = useSWR("/", () => apiFetch.api.webhook.find({
id: id!
}).get(), {dedupingInterval: 3000})
const navigate = useNavigate();
useShallowEffect(() => {
mutate();
}, [data]);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
if (!data?.data?.webhook) return <div>No data</div>;
return (
<Stack>
<Group justify="space-between">
<Title order={2}>Edit Webhook</Title>
<Button variant="outline" onClick={() => {
modals.openConfirmModal({
title: "Remove Webhook",
children: <Text>Are you sure you want to remove this webhook?</Text>,
confirmProps: { color: "red" },
labels: {
cancel: "Cancel",
confirm: "Remove",
},
onConfirm: () => {
apiFetch.api.webhook.remove({
id: id!
}).delete()
navigate(clientRoutes["/sq/dashboard/webhook"]);
},
onCancel: () => {
navigate(clientRoutes["/sq/dashboard/webhook/webhook-edit"] + "?id=" + id);
},
})
}}>Remove</Button>
</Group>
<EditView webhook={data.data?.webhook || null} />
</Stack>
);
}
function EditView({ webhook }: { webhook: WebHook | null }) {
const navigate = useNavigate();
const [name, setName] = useState(webhook?.name || "");
const [description, setDescription] = useState(webhook?.description || "");
const [url, setUrl] = useState(webhook?.url || "");
const [method, setMethod] = useState(webhook?.method || "POST");
const [headers, setHeaders] = useState(webhook?.headers || "{}");
const [payload, setPayload] = useState(webhook?.payload || "{}");
const [apiToken, setApiToken] = useState(webhook?.apiToken || "");
const [enabled, setEnabled] = useState(webhook?.enabled || true);
const [replay, setReplay] = useState(webhook?.replay || false);
const [replayKey, setReplayKey] = useState(webhook?.replayKey || "");
const safeJson = (value: string) => {
try {
return JSON.stringify(JSON.parse(value || "{}"), null, 2);
} catch {
return value || "{}";
}
};
// useShallowEffect(() => {
// let headerObj: Record<string, string> = {};
// try {
// headerObj = JSON.parse(headers);
// } catch { }
// if (apiToken) headerObj["Authorization"] = `Bearer ${apiToken}`;
// setHeaders(JSON.stringify(headerObj, null, 2));
// }, [apiToken]);
const previewCode = useMemo(() => {
let headerObj: Record<string, string> = {};
try {
headerObj = JSON.parse(headers);
} catch { }
if (apiToken) headerObj["Authorization"] = `Bearer ${apiToken}`;
const prettyHeaders = safeJson(JSON.stringify(headerObj));
const prettyPayload = safeJson(payload);
const includeBody = ["POST", "PUT", "PATCH"].includes(method.toUpperCase());
return `fetch("${url || "https://example.com/webhook"}", {
method: "${method}",
headers: ${prettyHeaders},${includeBody ? `\n body: ${prettyPayload},` : ""}
})
.then(res => res.json())
.then(console.log)
.catch(console.error);`;
}, [url, method, headers, payload, apiToken]);
async function onSubmit() {
if (!webhook?.id) {
return notifications.show({
title: "Webhook ID Not Found",
message: "Unable to update webhook",
color: "red",
icon: <IconX />,
});
}
const { data } = await apiFetch.api.webhook.update({
id: webhook?.id,
}).put({
name,
description,
apiToken,
url,
method,
headers,
payload,
enabled,
replay,
replayKey,
});
if (data?.success) {
notifications.show({
title: "Webhook Created",
message: data.message,
color: "teal",
icon: <IconCheck />,
});
navigate(clientRoutes["/sq/dashboard/webhook"]);
} else {
notifications.show({
title: "Creation Failed",
message: data?.message || "Unable to create webhook",
color: "red",
icon: <IconX />,
});
}
}
return (
<Stack style={{ backgroundColor: "#191919" }} p="xl">
<Stack
gap="md"
maw={900}
mx="auto"
bg="rgba(45,45,45,0.6)"
p="xl"
style={{
borderRadius: "20px",
backdropFilter: "blur(12px)",
border: "1px solid rgba(0,255,200,0.2)",
// boxShadow: "0 0 25px rgba(0,255,200,0.15)",
}}
>
<Group justify="space-between">
<Title order={2} c="#EAEAEA" fw={600}>
Create Webhook
</Title>
<IconCode color="#00FFFF" size={28} />
</Group>
<Divider color="rgba(0,255,200,0.2)" />
<TextInput
label="Name"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<TextInput
label="Description"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<TextInput
label="Webhook URL"
placeholder="https://example.com/webhook"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
<Select
label="HTTP Method"
placeholder="Select method"
value={method}
onChange={(v) => setMethod(v || "POST")}
data={["POST", "GET", "PUT", "PATCH", "DELETE"].map((v) => ({
value: v,
label: v,
}))}
/>
<TextInput
label="API Token"
placeholder="Bearer ..."
value={apiToken}
onChange={(e) => {
setApiToken(e.target.value);
try {
const current = JSON.parse(headers);
if (!e.target.value) {
delete current["Authorization"];
} else {
current["Authorization"] = `Bearer ${e.target.value}`;
}
setHeaders(JSON.stringify(current, null, 2));
} catch { }
}}
/>
<Stack gap="xs">
<Text fw={600} c="#EAEAEA">
Headers (JSON)
</Text>
<Editor
theme="vs-dark"
height="20vh"
language="json"
value={headers}
onChange={(val) => setHeaders(val ?? "{}")}
options={{
minimap: { enabled: false },
fontSize: 13,
scrollBeyondLastLine: false,
lineNumbers: "off",
automaticLayout: true,
}}
/>
</Stack>
<Stack gap="xs">
<Text fw={600} c="#EAEAEA">
Payload
</Text>
<Text size="xs" c="#9A9A9A" mb="xs">
{templateData}
</Text>
<Editor
theme="vs-dark"
height="35vh"
language="json"
value={payload}
onChange={(val) => setPayload(val ?? "{}")}
options={{
minimap: { enabled: false },
fontSize: 13,
scrollBeyondLastLine: false,
automaticLayout: true,
}}
/>
</Stack>
<Checkbox
label="Enable Webhook"
checked={enabled}
onChange={(e) => setEnabled(e.target.checked as any)}
color="teal"
styles={{
label: { color: "#EAEAEA" },
}}
/>
<Checkbox
label="Enable Replay"
checked={replay}
onChange={(e) => setReplay(e.target.checked as any)}
color="teal"
styles={{
label: { color: "#EAEAEA" },
}}
/>
<TextInput
description="Replay Key is used to identify the webhook example: data.text"
label="Replay Key"
placeholder="Replay Key"
value={replayKey}
onChange={(e) => setReplayKey(e.target.value)}
/>
<Card
radius="xl"
p="md"
style={{
background: "rgba(25,25,25,0.6)",
border: "1px solid rgba(0,255,200,0.3)",
// boxShadow: "0 0 15px rgba(0,255,200,0.15)",
}}
>
<Stack gap="xs">
<Text fw={600} c="#EAEAEA">
Request Preview
</Text>
<Editor
theme="vs-dark"
height="35vh"
language="javascript"
value={previewCode}
options={{
readOnly: true,
minimap: { enabled: false },
fontSize: 13,
scrollBeyondLastLine: false,
automaticLayout: true,
}}
/>
</Stack>
</Card>
<Group justify="flex-end" mt="md">
<Button
onClick={() => navigate(clientRoutes["/sq/dashboard/webhook"])}
variant="subtle"
c="#EAEAEA"
styles={{
root: { backgroundColor: "#2D2D2D", borderColor: "#00FFC8" },
}}
>
Cancel
</Button>
<Button
onClick={onSubmit}
style={{
background: "linear-gradient(90deg, #00FFC8, #00FFFF)",
color: "#191919",
}}
>
Save Webhook
</Button>
</Group>
</Stack>
</Stack>
);
}

249
src/pages/sq/dashboard/webhook/webhook_home.tsx Normal file
View File

@@ -0,0 +1,249 @@
import { useMemo } from "react";
import {
Card,
Group,
Text,
Title,
Badge,
Loader,
Center,
Tooltip,
ActionIcon,
Stack,
Divider,
Button,
} from "@mantine/core";
import {
IconLink,
IconCode,
IconKey,
IconCheck,
IconX,
IconRefresh,
IconEdit,
IconPlus,
IconMessageReply,
} from "@tabler/icons-react";
import { notifications } from "@mantine/notifications";
import useSWR from "swr";
import apiFetch from "@/lib/apiFetch";
import { useNavigate } from "react-router-dom";
import clientRoutes from "@/clientRoutes";
import { useShallowEffect } from "@mantine/hooks";
export default function WebhookHome() {
const navigate = useNavigate();
const { data, error, isLoading, mutate } = useSWR(
"/",
apiFetch.api.webhook.list.get, { dedupingInterval: 3000, refreshInterval: 3000 });
const webhooks = useMemo(() => data?.data?.list ?? [], [data]);
useShallowEffect(() => {
mutate();
}, []);
function ButtonCreate() {
return <Tooltip label="Create new webhook" withArrow color="teal">
<Button
radius="xl"
size="md"
leftSection={<IconPlus size={18} />}
variant="gradient"
gradient={{ from: "#00FFC8", to: "#00FFFF", deg: 135 }}
style={{
color: "#191919",
fontWeight: 600,
// boxShadow: "0 0 12px rgba(0,255,200,0.25)",
transition: "transform 0.2s ease, box-shadow 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = "translateY(-2px)";
e.currentTarget.style.boxShadow =
"0 0 20px rgba(0,255,200,0.4)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = "translateY(0)";
e.currentTarget.style.boxShadow =
"0 0 12px rgba(0,255,200,0.25)";
}}
onClick={() => navigate("/sq/dashboard/webhook/webhook-create")}
>
Create Webhook
</Button>
</Tooltip>
}
if (isLoading)
return (
<Center h="100vh" bg="#191919">
<Loader color="teal" size="lg" />
</Center>
);
if (error)
return (
<Center h="100vh" bg="#191919">
<Text c="#FF4B4B" fw={500}>
Failed to load webhooks. Please try again.
</Text>
</Center>
);
if (!webhooks.length)
return (
<Center h="100vh" bg="#191919">
<Stack align="center" gap="sm">
<Text c="#9A9A9A" size="lg">
No webhooks found
</Text>
<Text c="#00FFC8" size="sm">
Connect your first webhook to start managing events
</Text>
<ButtonCreate />
</Stack>
</Center>
);
return (
<Stack style={{ backgroundColor: "#191919" }} p="xl">
<Group justify="space-between" mb="lg">
<Title order={2} c="#EAEAEA" fw={600}>
Webhook Manager
</Title>
<ButtonCreate />
<Tooltip label="Refresh webhooks" withArrow color="cyan">
<ActionIcon
variant="light"
size="lg"
radius="xl"
onClick={() => {
mutate();
notifications.show({
title: "Refreshing data",
message: "Webhook list is being updated...",
color: "teal",
});
}}
>
<IconRefresh color="#00FFFF" />
</ActionIcon>
</Tooltip>
</Group>
<Stack gap="md">
{webhooks.map((webhook) => (
<Card
key={webhook.id}
p="lg"
radius="xl"
style={{
background: "rgba(45,45,45,0.6)",
backdropFilter: "blur(12px)",
border: "1px solid rgba(0,255,200,0.2)",
// boxShadow: "0 0 12px rgba(0,255,200,0.15)",
transition: "transform 0.2s ease, box-shadow 0.2s ease",
}}
>
<Group justify="end" mb="sm">
<Group>
<IconLink color="#00FFFF" />
<Text c="#EAEAEA" fw={500} size="lg">
{webhook.name}
</Text>
</Group>
<ActionIcon
c={"teal"}
variant="light"
size="lg"
radius="xl"
onClick={() => navigate(`${clientRoutes["/sq/dashboard/webhook/webhook-edit"]}?id=${webhook.id}`)}
>
<IconEdit />
</ActionIcon>
</Group>
<Stack gap={"md"}>
<Group>
<Badge
color={webhook.enabled ? "teal" : "red"}
radius="xl"
leftSection={
webhook.enabled ? (
<IconCheck size={14} />
) : (
<IconX size={14} />
)
}
>
{webhook.enabled ? "Active" : "Disabled"}
</Badge>
<Badge bg={"teal"} leftSection={<IconMessageReply size={16} color="#00FFC8" />}>
{webhook.replay ? "Replay" : "Not Replay"}
</Badge>
</Group>
<Text c="#9A9A9A" size="sm">{webhook.description}</Text>
</Stack>
<Divider color="rgba(0,255,200,0.2)" my="sm" />
<Stack gap="xs">
<Group gap="xs">
<IconCode size={16} color="#00FFC8" />
<Text c="#9A9A9A" size="sm">
Method:
</Text>
<Text c="#EAEAEA" size="sm" fw={500}>
{webhook.method}
</Text>
</Group>
<Group gap="xs">
<IconLink size={16} color="#00FFC8" />
<Text c="#9A9A9A" size="sm">
URL:
</Text>
<Text c="#EAEAEA" size="sm" fw={500}>
{webhook.url}
</Text>
</Group>
<Group gap="xs">
<IconKey size={16} color="#00FFC8" />
<Text c="#9A9A9A" size="sm">
API Token:
</Text>
<Text c="#EAEAEA" size="sm" fw={500}>
{webhook.apiToken?.slice(0, 6) + "..." || "—"}
</Text>
</Group>
<Group gap="xs">
<Text c="#9A9A9A" size="sm">
Headers:
</Text>
<Text c="#EAEAEA" size="sm" fw={500}>
{Object.keys(webhook.headers || {}).length
? webhook.headers
: "No headers configured"}
</Text>
</Group>
<Group gap="xs">
<Text c="#9A9A9A" size="sm">
Payload:
</Text>
<Text c="#EAEAEA" size="sm" fw={500}>
{Object.keys(webhook.payload || {}).length
? webhook.payload
: "Empty payload"}
</Text>
</Group>
</Stack>
</Card>
))}
</Stack>
</Stack>
);
}

20
src/pages/sq/dashboard/webhook/webhook_layout.tsx Normal file
View File

@@ -0,0 +1,20 @@
import {
Button,
Group,
Stack,
Title,
Tooltip,
Divider,
Container,
Paper,
} from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import { useNavigate, Outlet } from "react-router-dom";
export default function WebhookLayout() {
const navigate = useNavigate();
return (
<Outlet />
);
}

25
src/pages/sq/sq_layout.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { useEffect, useState } from "react";
import { Navigate, Outlet } from "react-router-dom";
import clientRoutes from "@/clientRoutes";
import apiFetch from "@/lib/apiFetch";
export default function ProtectedRoute() {
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
useEffect(() => {
async function checkSession() {
try {
// backend otomatis baca cookie JWT dari request
const res = await apiFetch.api.user.find.get();
setIsAuthenticated(res.status === 200);
} catch {
setIsAuthenticated(false);
}
}
checkSession();
}, []);
if (isAuthenticated === null) return null; // or loading spinner
if (!isAuthenticated) return <Navigate to={clientRoutes["/login"]} replace />;
return <Outlet />;
}

22
src/pages/wajs/qrcode.tsx Normal file
View File

@@ -0,0 +1,22 @@
import apiFetch from "@/lib/apiFetch";
import { ReactQRCode } from "@lglab/react-qr-code";
import { Card, Container, Group } from "@mantine/core";
import useSWR from "swr";
export default function QrcodePage() {
const { data } = useSWR("/wa/qr", apiFetch.api.wa.qr.get, {
revalidateOnFocus: false,
revalidateOnReconnect: false,
revalidateIfStale: false,
refreshInterval: 3000,
});
return (
<Container size={"sm"}>
<h1>QrCode</h1>
<Group>
<Card bg={"white"}>
<ReactQRCode size={256} value={data?.data?.qr || ""} />
</Card>
</Group>
</Container>
);
}

8
src/react.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
<circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
<g stroke="#61dafb" stroke-width="1" fill="none">
<ellipse rx="11" ry="4.2"/>
<ellipse rx="11" ry="4.2" transform="rotate(60)"/>
<ellipse rx="11" ry="4.2" transform="rotate(120)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 338 B

51
src/server/lib/get_value_by_path.ts Normal file
View File

@@ -0,0 +1,51 @@
/**
* Helper type to recursively generate all possible key paths up to 7 levels deep.
* Example: "media.data", "a.b.c.d.e.f.g"
*/
type NestedKeyOf<T, Prev extends string = ''> = {
[K in keyof T & (string | number)]: T[K] extends Record<string, any>
? | `${Prev}${K}`
| `${Prev}${K}.${NestedKeyOf<T[K], ''>}`
: `${Prev}${K}`;
}[keyof T & (string | number)];
/**
* Safely get deep value by string path like "a.b.c[0].d"
*/
export function getValueByPath<
T extends object,
P extends string,
R = unknown
>(obj: T, path: P, defaultValue?: R): any {
try {
return path
.replace(/\[(\w+)\]/g, '.$1')
.split('.')
.reduce((acc: any, key) => (acc != null ? acc[key] : undefined), obj) ?? defaultValue;
} catch {
return defaultValue;
}
}
/**
* Safely set deep value by string path like "a.b.c[0].d"
*/
export function setValueByPath<T extends object>(
obj: T,
path: string,
value: any
): void {
const keys = path.replace(/\[(\w+)\]/g, '.$1').split('.');
let current: any = obj;
for (let i = 0; i < keys.length - 1; i++) {
const key = keys[i];
if (current[key as keyof typeof current] == null || typeof current[key as keyof typeof current] !== 'object') {
current[key as keyof typeof current] = isNaN(Number(keys[i + 1])) ? {} : [];
}
current = current[key as keyof typeof current];
}
current[keys[keys.length - 1] as keyof typeof current] = value;
}

11
src/server/lib/prisma.ts Normal file
View File

@@ -0,0 +1,11 @@
import { PrismaClient } from 'generated/prisma'
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined
}
export const prisma = globalForPrisma.prisma ?? new PrismaClient()
if (process.env.NODE_ENV !== 'production') {
globalForPrisma.prisma = prisma
}

343
src/server/lib/wa/wa_service.ts Normal file
View File

@@ -0,0 +1,343 @@
import WAWebJS, { Client, LocalAuth, MessageMedia } from 'whatsapp-web.js';
import qrcode from 'qrcode-terminal';
import fs from 'fs/promises';
import path from 'path';
import { v4 as uuid } from 'uuid';
import { prisma } from '../prisma';
import { getValueByPath } from '../get_value_by_path';
// === KONFIGURASI UTAMA ===
const MEDIA_DIR = path.join(process.cwd(), 'downloads');
await ensureDir(MEDIA_DIR);
type DataMessage = {
from: string;
fromNumber: string;
fromMe: boolean;
body: string;
hasMedia: boolean;
type: WAWebJS.MessageTypes;
to: string;
deviceType: string;
media: {
data: WAWebJS.MessageMedia["data"];
mimetype: WAWebJS.MessageMedia["mimetype"];
filename: WAWebJS.MessageMedia["filename"];
filesize: WAWebJS.MessageMedia["filesize"];
};
notifyName: string;
}
// === STATE GLOBAL ===
const state = {
client: null as Client | null,
reconnectTimeout: null as NodeJS.Timeout | null,
isReconnecting: false,
isStarting: false,
qr: null as string | null,
ready: false,
async restart() {
log('🔄 Restart manual diminta...');
await destroyClient();
await startClient();
},
async forceStart() {
log('⚠️ Force start — menghapus cache dan session auth...');
await destroyClient();
await safeRm("./.wwebjs_auth");
await safeRm("./wwebjs_cache");
await startClient();
},
async stop() {
log('🛑 Stop manual diminta...');
await destroyClient();
},
};
// === UTIL ===
function log(...args: any[]) {
console.log(`[${new Date().toISOString()}]`, ...args);
}
async function ensureDir(dir: string) {
try {
await fs.access(dir);
} catch {
await fs.mkdir(dir, { recursive: true });
}
}
async function safeRm(path: string) {
try {
await fs.rm(path, { recursive: true, force: true });
} catch (err) {
log(`⚠️ Gagal hapus ${path}:`, err);
}
}
// === CLEANUP CLIENT ===
async function destroyClient() {
if (state.reconnectTimeout) {
clearTimeout(state.reconnectTimeout);
state.reconnectTimeout = null;
}
if (state.client) {
try {
state.client.removeAllListeners();
await state.client.destroy();
log('🧹 Client lama dihentikan & listener dibersihkan');
} catch (err) {
log('⚠️ Gagal destroy client:', err);
}
state.client = null;
state.ready = false;
}
}
// === PEMBUATAN CLIENT ===
async function startClient() {
if (state.isStarting || state.isReconnecting) {
log('⏳ startClient diabaikan — proses sedang berjalan...');
return;
}
state.isStarting = true;
await destroyClient();
log('🚀 Memulai WhatsApp client...');
const client = new Client({
authStrategy: new LocalAuth({
dataPath: path.join(process.cwd(), '.wwebjs_auth'),
}),
puppeteer: {
headless: true,
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage',
'--disable-gpu',
],
},
});
state.client = client;
// === EVENT LISTENERS ===
client.on('qr', (qr) => {
state.qr = qr;
qrcode.generate(qr, { small: true });
log('🔑 QR code baru diterbitkan');
});
client.on('ready', () => {
log('✅ WhatsApp client siap digunakan!');
state.ready = true;
state.isReconnecting = false;
state.isStarting = false;
state.qr = null;
if (state.reconnectTimeout) {
clearTimeout(state.reconnectTimeout);
state.reconnectTimeout = null;
}
});
client.on('auth_failure', (msg) => {
log('❌ Autentikasi gagal:', msg);
state.ready = false;
});
client.on('disconnected', async (reason) => {
log('⚠️ Client terputus:', reason);
state.ready = false;
if (state.reconnectTimeout) clearTimeout(state.reconnectTimeout);
log('⏳ Mencoba reconnect dalam 5 detik...');
state.reconnectTimeout = setTimeout(async () => {
state.isReconnecting = false;
await startClient();
}, 5000);
});
client.on('message', handleIncomingMessage);
// === INISIALISASI ===
try {
await client.initialize();
} catch (err) {
log('❌ Gagal inisialisasi client:', err);
log('⏳ Mencoba reconnect dalam 10 detik...');
state.reconnectTimeout = setTimeout(async () => {
state.isReconnecting = false;
await startClient();
}, 10000);
} finally {
state.isStarting = false;
}
}
// === HANDLER PESAN MASUK ===
async function handleIncomingMessage(msg: WAWebJS.Message) {
log(`💬 Pesan dari ${msg.from}: ${msg.body || '[MEDIA]'}`);
if (msg.from.endsWith('@g.us') || msg.isStatus || msg.from === 'status@broadcast') {
log(`🚫 Pesan dari grup/status diabaikan (${msg.from})`);
return;
}
try {
const body = msg.body?.toLowerCase().trim() || '';
const notifyName = (msg as any)._data.notifyName;
const dataMessage: DataMessage = {
from: msg.from,
fromNumber: msg.from.split('@')[0] || '',
fromMe: msg.fromMe,
body: msg.body,
hasMedia: msg.hasMedia,
type: msg.type,
to: msg.to,
deviceType: msg.deviceType,
media: {
data: null as unknown as WAWebJS.MessageMedia['data'],
mimetype: null as unknown as WAWebJS.MessageMedia['mimetype'],
filename: null as unknown as WAWebJS.MessageMedia['filename'],
filesize: null as unknown as WAWebJS.MessageMedia['filesize'],
},
notifyName,
};
// Media handler
if (msg.hasMedia) {
const media = await msg.downloadMedia();
dataMessage.media = {
data: media.data,
mimetype: media.mimetype,
filename: media.filename,
filesize: media.filesize
};
}
// to web hook
try {
const webhooks = await prisma.webHook.findMany({ where: { enabled: true } });
if (!webhooks.length) {
log('🚫 Tidak ada webhook yang aktif');
return;
}
await Promise.allSettled(
webhooks.map(async (hook) => {
try {
console.log("send webhook " + hook.url);
const body = payloadConverter({ payload: hook.payload ?? JSON.stringify(dataMessage), data: dataMessage });
const res = await fetch(hook.url, {
method: hook.method,
headers: {
...(JSON.parse(hook.headers ?? '{}') as Record<string, string>),
...(hook.apiToken ? { Authorization: `Bearer ${hook.apiToken}` } : {}),
},
body,
});
if (!res.ok) log(`⚠️ Webhook ${hook.url} gagal: ${res.status}`);
const responseJson = await res.json();
if (hook.replay) {
try {
// === Simulasikan sedang mengetik ===
const chat = await msg.getChat();
await chat.sendStateTyping(); // tampilkan status 'sedang mengetik...'
// Durasi delay tergantung panjang teks (lebih panjang = lebih lama)
const textResponseRaw = hook.replayKey
? getValueByPath(responseJson, hook.replayKey, JSON.stringify(responseJson))
: JSON.stringify(responseJson, null, 2);
const typingDelay = Math.min(5000, Math.max(1500, textResponseRaw.length * 20)); // 1.5–5 detik
await new Promise((resolve) => setTimeout(resolve, typingDelay));
// Setelah delay, hentikan typing indicator
await chat.clearState(); // hilangkan status "mengetik..."
// Kirim balasan ke pengirim
await msg.reply(textResponseRaw);
log(`💬 Balasan dikirim ke ${msg.from} setelah mengetik selama ${typingDelay}ms`);
} catch (err) {
log('⚠️ Gagal menampilkan status mengetik:', err);
await msg.reply(hook.replayKey
? getValueByPath(responseJson, hook.replayKey, JSON.stringify(responseJson))
: JSON.stringify(responseJson, null, 2)
);
}
}
} catch (err) {
log(`❌ Gagal kirim ke ${hook.url}:`, err);
}
})
);
} catch (error) {
console.log(error);
}
} catch (err) {
log('❌ Error handling pesan:', err);
}
}
function payloadConverter({ payload, data }: { payload: string; data: DataMessage }) {
try {
const map: Record<string, string | number | boolean | null> = {
'data.from': data.from,
'data.fromNumber': data.fromNumber,
'data.fromMe': data.fromMe,
'data.body': data.body,
'data.hasMedia': data.hasMedia,
'data.type': data.type,
'data.to': data.to,
'data.deviceType': data.deviceType,
'data.notifyName': data.notifyName,
'data.media.data': data.media?.data ?? null,
'data.media.mimetype': data.media?.mimetype ?? null,
'data.media.filename': data.media?.filename ?? null,
'data.media.filesize': data.media?.filesize ?? 0,
};
let result = payload;
for (const [key, value] of Object.entries(map)) {
result = result.replace(new RegExp(`{{\\s*${key}\\s*}}`, 'g'), String(value ?? ''));
}
return result;
} catch {
return JSON.stringify(data, null, 2);
}
}
// === CLEANUP SAAT EXIT ===
process.on('SIGINT', async () => {
log('🛑 SIGINT diterima, menutup client...');
await destroyClient();
process.exit(0);
});
process.on('SIGTERM', async () => {
log('🛑 SIGTERM diterima, menutup client...');
await destroyClient();
process.exit(0);
});
const getState = () => state;
export { startClient, destroyClient, getState };
if (import.meta.main) {
await startClient();
}

54
src/server/middlewares/apiAuth.ts Normal file
View File

@@ -0,0 +1,54 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import jwt, { type JWTPayloadSpec } from '@elysiajs/jwt'
import Elysia from 'elysia'
import { prisma } from '../lib/prisma'
const secret = process.env.JWT_SECRET
export default function apiAuth(app: Elysia) {
if (!secret) {
throw new Error('JWT_SECRET is not defined')
}
return app
.use(
jwt({
name: 'jwt',
secret,
})
)
.derive(async ({ cookie, headers, jwt }) => {
let token: string | undefined
if (cookie?.token?.value) {
token = cookie.token.value as any
}
if (headers['x-token']?.startsWith('Bearer ')) {
token = (headers['x-token'] as string).slice(7)
}
if (headers['authorization']?.startsWith('Bearer ')) {
token = (headers['authorization'] as string).slice(7)
}
let user: null | Awaited<ReturnType<typeof prisma.user.findUnique>> = null
if (token) {
try {
const decoded = (await jwt.verify(token)) as JWTPayloadSpec
if (decoded.sub) {
user = await prisma.user.findUnique({
where: { id: decoded.sub as string },
})
}
} catch (err) {
console.warn('[SERVER][apiAuth] Invalid token', err)
}
}
return { user }
})
.onBeforeHandle(({ user, set }) => {
if (!user) {
set.status = 401
return { error: 'Unauthorized' }
}
})
}

105
src/server/routes/apikey_route.ts Normal file
View File

@@ -0,0 +1,105 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { type JWTPayloadSpec } from '@elysiajs/jwt'
import Elysia, { t } from 'elysia'
import { type User } from 'generated/prisma'
import { prisma } from '../lib/prisma'
const NINETY_YEARS = 60 * 60 * 24 * 365 * 90 // in seconds
type JWT = {
sign(data: Record<string, string | number> & JWTPayloadSpec): Promise<string>
verify(
jwt?: string
): Promise<false | (Record<string, string | number> & JWTPayloadSpec)>
}
const ApiKeyRoute = new Elysia({
prefix: '/apikey',
detail: { tags: ['apikey'] },
})
.post(
'/create',
async ctx => {
const { user }: { user: User } = ctx as any
const { name, description, expiredAt } = ctx.body
const { sign } = (ctx as any).jwt as JWT
// hitung expiredAt
const exp = expiredAt
? Math.floor(new Date(expiredAt).getTime() / 1000) // jika dikirim
: Math.floor(Date.now() / 1000) + NINETY_YEARS // default 90 tahun
const token = await sign({
sub: user.id,
aud: 'host',
exp,
payload: JSON.stringify({
name,
description,
expiredAt,
}),
})
const apiKey = await prisma.apiKey.create({
data: {
name,
description,
key: token,
userId: user.id,
expiredAt: new Date(exp * 1000), // simpan juga di DB biar gampang query
},
})
return { message: 'success', token, apiKey }
},
{
detail: {
summary: 'create api key',
},
body: t.Object({
name: t.String(),
description: t.String(),
expiredAt: t.Optional(t.String({ format: 'date-time' })), // ISO date string
}),
}
)
.get(
'/list',
async ctx => {
const { user }: { user: User } = ctx as any
const apiKeys = await prisma.apiKey.findMany({
where: {
userId: user.id,
},
})
return { message: 'success', apiKeys }
},
{
detail: {
summary: 'get api key list',
},
}
)
.delete(
'/delete',
async ctx => {
const { id } = ctx.body as { id: string }
const apiKey = await prisma.apiKey.delete({
where: {
id,
},
})
return { message: 'success', apiKey }
},
{
detail: {
summary: 'delete api key',
},
body: t.Object({
id: t.String(),
}),
}
)
export default ApiKeyRoute

155
src/server/routes/auth_route.ts Normal file
View File

@@ -0,0 +1,155 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { jwt as jwtPlugin, type JWTPayloadSpec } from '@elysiajs/jwt'
import Elysia, { t, type Cookie, type HTTPHeaders, type StatusMap } from 'elysia'
import { type ElysiaCookie } from 'elysia/cookies'
import { prisma } from '@/server/lib/prisma'
import type { User } from 'generated/prisma'
const secret = process.env.JWT_SECRET
if (!secret) {
throw new Error('Missing JWT_SECRET in environment variables')
}
const isProd = process.env.NODE_ENV === 'production'
const NINETY_YEARS = 60 * 60 * 24 * 365 * 90
type JWT = {
sign(data: Record<string, string | number> & JWTPayloadSpec): Promise<string>
verify(
jwt?: string
): Promise<false | (Record<string, string | number> & JWTPayloadSpec)>
}
type COOKIE = Record<string, Cookie<string | undefined>>
type SET = {
headers: HTTPHeaders
status?: number | keyof StatusMap
redirect?: string
cookie?: Record<string, ElysiaCookie>
}
async function issueToken({
jwt,
cookie,
userId,
role,
expiresAt,
}: {
jwt: JWT
cookie: COOKIE
userId: string
role: 'host' | 'user'
expiresAt: number
}) {
const token = await jwt.sign({
sub: userId,
aud: role,
exp: expiresAt,
})
cookie.token?.set({
value: token,
httpOnly: true,
secure: isProd, // aktifkan hanya di production (HTTPS)
sameSite: 'strict',
maxAge: NINETY_YEARS,
path: '/',
})
return token
}
async function login({
body,
cookie,
set,
jwt,
}: {
body: { email: string; password: string }
cookie: COOKIE
set: SET
jwt: JWT
}) {
try {
const { email, password } = body
const user = await prisma.user.findUnique({
where: { email },
})
if (!user) {
set.status = 401
return { message: 'User not found' }
}
if (user.password !== password) {
set.status = 401
return { message: 'Invalid password' }
}
const token = await issueToken({
jwt,
cookie,
userId: user.id,
role: 'user',
expiresAt: Math.floor(Date.now() / 1000) + NINETY_YEARS,
})
return { token }
} catch (error) {
console.error('Error logging in:', error)
return {
message: 'Login failed',
error:
error instanceof Error ? error.message : JSON.stringify(error ?? null),
}
}
}
const Auth = new Elysia({
prefix: '/auth',
detail: { description: 'Auth API', summary: 'Auth API', tags: ['auth'] },
})
.use(
jwtPlugin({
name: 'jwt',
secret,
})
)
.post(
'/login',
async ({ jwt, body, cookie, set }) => {
return await login({
jwt: jwt as JWT,
body,
cookie: cookie as any,
set: set as any,
})
},
{
body: t.Object({
email: t.String(),
password: t.String(),
}),
detail: {
description: 'Login with phone; auto-register if not found',
summary: 'login',
},
}
)
.delete(
'/logout',
({ cookie }) => {
cookie.token?.remove()
return { message: 'Logout successful' }
},
{
detail: {
description: 'Logout (clear token cookie)',
summary: 'logout',
},
}
)
export default Auth

8
src/server/routes/darmasaba.ts Normal file
View File

@@ -0,0 +1,8 @@
import Elysia from "elysia";
const Dashboard = new Elysia({
prefix: "/dashboard"
})
.get("/apa", () => "Hello World")
export default Dashboard

52
src/server/routes/wa_route.ts Normal file
View File

@@ -0,0 +1,52 @@
import Elysia from "elysia";
import { startClient, getState } from "../lib/wa/wa_service";
import _ from "lodash";
const WaRoute = new Elysia({
prefix: "/wa",
tags: ["WhatsApp"]
})
.post("/start", async () => {
startClient();
return {
message: "WhatsApp route started",
};
})
.get("/qr", () => {
const state = getState();
return {
qr: state.qr,
};
})
.get("/ready", () => {
const state = getState();
return {
ready: state.ready,
};
})
.post("/restart", async () => {
getState().restart();
return {
message: "WhatsApp route restarted",
};
})
.post("/force-start", async () => {
getState().forceStart();
return {
message: "WhatsApp route force started",
};
})
.post("/stop", async () => {
getState().stop();
return {
message: "WhatsApp route stopped",
};
})
.get("/state", () => {
const state = getState();
return {
state: _.omit(state, "client"),
};
})
export default WaRoute;

147
src/server/routes/webhook_route.ts Normal file
View File

@@ -0,0 +1,147 @@
import Elysia, { t } from "elysia";
import { prisma } from "../lib/prisma";
const WebhookRoute = new Elysia({
prefix: "/webhook",
tags: ["Webhook"]
})
.post("/create", async (ctx) => {
const { name, description, url, method, headers, payload, apiToken, enabled, replay, replayKey } = ctx.body;
await prisma.webHook.create({
data: {
name,
description,
url,
method,
headers: headers,
payload: payload,
apiToken,
enabled,
replay,
replayKey,
},
});
return {
success: true,
message: "Webhook route created",
};
}, {
body: t.Object({
name: t.String(),
description: t.String(),
url: t.String(),
method: t.String(),
headers: t.String(),
payload: t.String(),
apiToken: t.String(),
enabled: t.Boolean(),
replay: t.Boolean(),
replayKey: t.String(),
}),
detail: {
summary: "Create webhook",
description: "Create webhook route with live preview code",
},
})
.get("/list", async (ctx) => {
const webhooks = await prisma.webHook.findMany();
return {
list: webhooks,
};
}, {
detail: {
summary: "List webhooks",
description: "List all webhooks",
},
})
.get("/find/:id", async (ctx: { params: { id: string } }) => {
const webhook = await prisma.webHook.findUnique({
where: {
id: ctx.params.id,
},
});
return {
webhook,
};
}, {
params: t.Object({
id: t.String(),
}),
detail: {
summary: "Find webhook",
description: "Find webhook by id",
},
})
.delete("/remove/:id", async (ctx: { params: { id: string } }) => {
await prisma.webHook.delete({
where: {
id: ctx.params.id,
},
});
return {
success: true,
message: "Webhook route removed",
};
}, {
params: t.Object({
id: t.String(),
}),
detail: {
summary: "Remove webhook",
description: "Remove webhook by id",
},
})
.put("/update/:id", async (ctx) => {
const { name, description, url, method, headers, payload, apiToken, enabled, replay, replayKey } = ctx.body;
await prisma.webHook.update({
where: {
id: ctx.params.id,
},
data: {
name,
description,
url,
method,
headers: headers,
payload: payload,
apiToken,
enabled,
replay,
replayKey,
},
});
return {
success: true,
message: "Webhook route updated",
};
}, {
params: t.Object({
id: t.String(),
}),
body: t.Object({
name: t.String(),
description: t.String(),
url: t.String(),
method: t.String(),
headers: t.String(),
payload: t.String(),
apiToken: t.String(),
enabled: t.Boolean(),
replay: t.Boolean(),
replayKey: t.String(),
}),
detail: {
summary: "Update webhook",
description: "Update webhook by id",
},
})
.onError((ctx) => {
console.log(ctx.error);
return {
success: false,
message: ctx.error,
};
});
export default WebhookRoute;