tambahan
This commit is contained in:
@@ -100,117 +100,117 @@ export default function WaHookHome() {
|
|||||||
|
|
||||||
<Divider color="rgba(0,255,200,0.2)" />
|
<Divider color="rgba(0,255,200,0.2)" />
|
||||||
|
|
||||||
<ScrollArea h={600} type="always" scrollHideDelay={0}>
|
<pre>{JSON.stringify(data, null, 2)}</pre>
|
||||||
<Stack gap="md">
|
|
||||||
{data?.data?.list?.length ? (
|
|
||||||
data.data.list.map((item) => {
|
|
||||||
const msg = item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0];
|
|
||||||
const contact = item.data?.entry?.[0]?.changes?.[0]?.value?.contacts?.[0];
|
|
||||||
const answer = (item.data as any)?.answer;
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
key={item.id}
|
|
||||||
radius="lg"
|
|
||||||
p="lg"
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
"linear-gradient(160deg, rgba(45,45,45,0.9) 0%, rgba(25,25,25,0.95) 100%)",
|
|
||||||
backdropFilter: "blur(14px)",
|
|
||||||
border: "1px solid rgba(0,255,200,0.25)",
|
|
||||||
boxShadow: "0 0 20px rgba(0,255,200,0.1)",
|
|
||||||
transition: "all 0.2s ease",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack gap={8}>
|
|
||||||
<Group gap="xs" align="center">
|
|
||||||
<IconUser size={16} color="#00FFC8" />
|
|
||||||
<Text c="#EAEAEA" fw={500}>
|
|
||||||
{contact?.profile?.name || "Unknown Sender"}
|
|
||||||
</Text>
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
<Group gap="xs" align="center">
|
<Stack gap="md">
|
||||||
<IconMessageCircle size={16} color="#00FFFF" />
|
{data?.data?.list?.length ? (
|
||||||
<Text c="#9A9A9A" fz="sm">
|
data.data.list.map((item) => {
|
||||||
{msg?.text?.body || "(No message content)"}
|
const msg = item.data?.entry?.[0]?.changes?.[0]?.value?.messages?.[0];
|
||||||
</Text>
|
const contact = item.data?.entry?.[0]?.changes?.[0]?.value?.contacts?.[0];
|
||||||
</Group>
|
const answer = (item.data as any)?.answer;
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={item.id}
|
||||||
|
radius="lg"
|
||||||
|
p="lg"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"linear-gradient(160deg, rgba(45,45,45,0.9) 0%, rgba(25,25,25,0.95) 100%)",
|
||||||
|
backdropFilter: "blur(14px)",
|
||||||
|
border: "1px solid rgba(0,255,200,0.25)",
|
||||||
|
boxShadow: "0 0 20px rgba(0,255,200,0.1)",
|
||||||
|
transition: "all 0.2s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack gap={8}>
|
||||||
|
<Group gap="xs" align="center">
|
||||||
|
<IconUser size={16} color="#00FFC8" />
|
||||||
|
<Text c="#EAEAEA" fw={500}>
|
||||||
|
{contact?.profile?.name || "Unknown Sender"}
|
||||||
|
</Text>
|
||||||
|
</Group>
|
||||||
|
|
||||||
<Group gap="xs" align="center">
|
<Group gap="xs" align="center">
|
||||||
<IconHash size={16} color="#00FFC8" />
|
<IconMessageCircle size={16} color="#00FFFF" />
|
||||||
<Text c="#9A9A9A" fz="xs">
|
<Text c="#9A9A9A" fz="sm">
|
||||||
{msg?.id}
|
{msg?.text?.body || "(No message content)"}
|
||||||
</Text>
|
</Text>
|
||||||
</Group>
|
</Group>
|
||||||
|
|
||||||
<Group gap="xs" align="center">
|
<Group gap="xs" align="center">
|
||||||
<IconCalendar size={16} color="#00FFFF" />
|
<IconHash size={16} color="#00FFC8" />
|
||||||
<Text c="#9A9A9A" fz="xs">
|
<Text c="#9A9A9A" fz="xs">
|
||||||
{dayjs(Number(msg?.timestamp) * 1000).format("YYYY-MM-DD HH:mm:ss")}
|
{msg?.id}
|
||||||
</Text>
|
</Text>
|
||||||
</Group>
|
</Group>
|
||||||
|
|
||||||
<Group gap="xs" align="center">
|
<Group gap="xs" align="center">
|
||||||
<IconCode size={16} color="#B554FF" />
|
<IconCalendar size={16} color="#00FFFF" />
|
||||||
<Badge
|
<Text c="#9A9A9A" fz="xs">
|
||||||
color="grape"
|
{dayjs(Number(msg?.timestamp) * 1000).format("YYYY-MM-DD HH:mm:ss")}
|
||||||
radius="sm"
|
</Text>
|
||||||
variant="light"
|
</Group>
|
||||||
styles={{
|
|
||||||
root: { backgroundColor: "rgba(181,84,255,0.15)", color: "#EAEAEA" },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{msg?.type || "Unknown"}
|
|
||||||
</Badge>
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
{answer && (
|
<Group gap="xs" align="center">
|
||||||
<Card
|
<IconCode size={16} color="#B554FF" />
|
||||||
p="sm"
|
<Badge
|
||||||
radius="md"
|
color="grape"
|
||||||
style={{
|
radius="sm"
|
||||||
backgroundColor: "rgba(45,45,45,0.7)",
|
variant="light"
|
||||||
border: "1px solid rgba(0,255,255,0.15)",
|
styles={{
|
||||||
boxShadow: "inset 0 0 10px rgba(0,255,255,0.1)",
|
root: { backgroundColor: "rgba(181,84,255,0.15)", color: "#EAEAEA" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Stack gap={4}>
|
{msg?.type || "Unknown"}
|
||||||
<Text c="#EAEAEA" fw={500} fz="sm">
|
</Badge>
|
||||||
Flow Response
|
</Group>
|
||||||
</Text>
|
|
||||||
<Text c="#9A9A9A" fz="xs">
|
{answer && (
|
||||||
id: {answer.flowId}
|
<Card
|
||||||
</Text>
|
p="sm"
|
||||||
<Text c="#9A9A9A" fz="xs">
|
radius="md"
|
||||||
type: {answer.type}
|
style={{
|
||||||
</Text>
|
backgroundColor: "rgba(45,45,45,0.7)",
|
||||||
<Text c="#EAEAEA" fz="sm">
|
border: "1px solid rgba(0,255,255,0.15)",
|
||||||
{answer.text}
|
boxShadow: "inset 0 0 10px rgba(0,255,255,0.1)",
|
||||||
</Text>
|
}}
|
||||||
</Stack>
|
>
|
||||||
</Card>
|
<Stack gap={4}>
|
||||||
)}
|
<Text c="#EAEAEA" fw={500} fz="sm">
|
||||||
</Stack>
|
Flow Response
|
||||||
</Card>
|
</Text>
|
||||||
);
|
<Text c="#9A9A9A" fz="xs">
|
||||||
})
|
id: {answer.flowId}
|
||||||
) : (
|
</Text>
|
||||||
<Card
|
<Text c="#9A9A9A" fz="xs">
|
||||||
radius="lg"
|
type: {answer.type}
|
||||||
style={{
|
</Text>
|
||||||
backgroundColor: "#2D2D2D",
|
<Text c="#EAEAEA" fz="sm">
|
||||||
border: "1px solid rgba(0,255,255,0.1)",
|
{answer.text}
|
||||||
textAlign: "center",
|
</Text>
|
||||||
padding: 60,
|
</Stack>
|
||||||
}}
|
</Card>
|
||||||
>
|
)}
|
||||||
<Text c="#9A9A9A" fz="lg">
|
</Stack>
|
||||||
No webhook activity detected yet.
|
</Card>
|
||||||
</Text>
|
);
|
||||||
</Card>
|
})
|
||||||
)}
|
) : (
|
||||||
</Stack>
|
<Card
|
||||||
</ScrollArea>
|
radius="lg"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#2D2D2D",
|
||||||
|
border: "1px solid rgba(0,255,255,0.1)",
|
||||||
|
textAlign: "center",
|
||||||
|
padding: 60,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text c="#9A9A9A" fz="lg">
|
||||||
|
No webhook activity detected yet.
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
|
||||||
<Group justify="center" mt="xl">
|
<Group justify="center" mt="xl">
|
||||||
<Pagination
|
<Pagination
|
||||||
|
|||||||
Reference in New Issue
Block a user