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

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>
);
}