matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate typeform into app

Browse Source
This commit is contained in:
Matt
2024-12-30 13:48:00 -05:00
parent 3dbf3ee127
commit ef0d48826a
3 changed files with 207 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
dashboard/src/App.jsx
View File

@@ -95,7 +95,7 @@ const DashboardLayout = () => {
<Navigation />
<div className="p-4 space-y-4">
<TypeformDashboard />
<div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
<div className="xl:col-span-4 col-span-6">
<div className="space-y-4 h-full w-full">
@@ -137,6 +137,9 @@ const DashboardLayout = () => {
<div id="meta-campaigns">
<MetaCampaigns />
</div>
<div id="typeform">
<TypeformDashboard />
</div>
<div id="gorgias-overview">
<GorgiasOverview />
</div>

1
dashboard/src/components/dashboard/Navigation.jsx
View File

@@ -27,6 +27,7 @@ const Navigation = () => {
{ id: "analytics", label: "Analytics" },
{ id: "user-behavior", label: "User Behavior" },
{ id: "meta-campaigns", label: "Meta Ads" },
{ id: "typeform", label: "Customer Surveys" },
{ id: "gorgias-overview", label: "Customer Service" },
{ id: "calls", label: "Calls" },
];

311
dashboard/src/components/dashboard/TypeformDashboard.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
Card,
CardContent,
@@ -30,7 +30,7 @@ import {
Tooltip,
ResponsiveContainer,
Cell,
ReferenceLine
ReferenceLine,
} from "recharts";
// Get form IDs from environment variables
@@ -40,8 +40,8 @@ const FORM_IDS = {
};
const FORM_NAMES = {
[FORM_IDS.FORM_1]: 'Product Relevance',
[FORM_IDS.FORM_2]: 'Winback Survey',
[FORM_IDS.FORM_1]: "Product Relevance",
[FORM_IDS.FORM_2]: "Winback Survey",
};
// Loading skeleton components
@@ -128,28 +128,30 @@ const ProductRelevanceFeed = ({ responses }) => (
responses={responses}
title="Product Relevance Responses"
renderSummary={(response) => {
const answer = response.answers?.find(a => a.type === 'boolean');
const textAnswer = response.answers?.find(a => a.type === 'text')?.text;
const answer = response.answers?.find((a) => a.type === "boolean");
const textAnswer = response.answers?.find((a) => a.type === "text")?.text;
return (
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{response.hidden?.email ? (
<a
<a
href={`https://backend.acherryontop.com/search/?search_for=customers&search=${response.hidden.email}`}
className="text-sm font-medium text-gray-900 dark:text-gray-100 hover:underline"
>
{response.hidden?.name || 'Anonymous'}
{response.hidden?.name || "Anonymous"}
</a>
) : (
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{response.hidden?.name || 'Anonymous'}
{response.hidden?.name || "Anonymous"}
</span>
)}
<Badge
<Badge
className={
answer?.boolean ? "bg-green-200 text-green-700" : "bg-red-200 text-red-700"
answer?.boolean
? "bg-green-200 text-green-700"
: "bg-red-200 text-red-700"
}
>
{answer?.boolean ? "Yes" : "No"}
@@ -163,9 +165,7 @@ const ProductRelevanceFeed = ({ responses }) => (
</time>
</div>
{textAnswer && (
<div className="text-sm text-muted-foreground">
"{textAnswer}"
</div>
<div className="text-sm text-muted-foreground">"{textAnswer}"</div>
)}
</div>
);
@@ -178,34 +178,43 @@ const WinbackFeed = ({ responses }) => (
responses={responses}
title="Winback Survey Responses"
renderSummary={(response) => {
const likelihoodAnswer = response.answers?.find(a => a.type === 'number');
const reasonsAnswer = response.answers?.find(a => a.type === 'choices');
const feedbackAnswer = response.answers?.find(a => a.type === 'text' && a.field.type === 'long_text');
const likelihoodAnswer = response.answers?.find(
(a) => a.type === "number"
);
const reasonsAnswer = response.answers?.find((a) => a.type === "choices");
const feedbackAnswer = response.answers?.find(
(a) => a.type === "text" && a.field.type === "long_text"
);
return (
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{response.hidden?.email ? (
<a
<a
href={`https://backend.acherryontop.com/search/?search_for=customers&search=${response.hidden.email}`}
className="text-sm font-medium text-gray-900 dark:text-gray-100 hover:underline"
>
{response.hidden?.name || 'Anonymous'}
{response.hidden?.name || "Anonymous"}
</a>
) : (
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{response.hidden?.name || 'Anonymous'}
{response.hidden?.name || "Anonymous"}
</span>
)}
<Badge
<Badge
className={
likelihoodAnswer?.number === 1 ? "bg-red-200 text-red-700" :
likelihoodAnswer?.number === 2 ? "bg-orange-200 text-orange-700" :
likelihoodAnswer?.number === 3 ? "bg-yellow-200 text-yellow-700" :
likelihoodAnswer?.number === 4 ? "bg-lime-200 text-lime-700" :
likelihoodAnswer?.number === 5 ? "bg-green-200 text-green-700" :
"bg-gray-200 text-gray-700"
likelihoodAnswer?.number === 1
? "bg-red-200 text-red-700"
: likelihoodAnswer?.number === 2
? "bg-orange-200 text-orange-700"
: likelihoodAnswer?.number === 3
? "bg-yellow-200 text-yellow-700"
: likelihoodAnswer?.number === 4
? "bg-lime-200 text-lime-700"
: likelihoodAnswer?.number === 5
? "bg-green-200 text-green-700"
: "bg-gray-200 text-gray-700"
}
>
{likelihoodAnswer?.number}/5
@@ -246,14 +255,17 @@ const TypeformDashboard = () => {
const [error, setError] = useState(null);
const [formData, setFormData] = useState({
form1: { responses: null, hasMore: false, lastToken: null },
form2: { responses: null, hasMore: false, lastToken: null }
form2: { responses: null, hasMore: false, lastToken: null },
});
const fetchResponses = async (formId, before = null) => {
const params = { page_size: 1000 };
if (before) params.before = before;
const response = await axios.get(`/api/typeform/forms/${formId}/responses`, { params });
const response = await axios.get(
`/api/typeform/forms/${formId}/responses`,
{ params }
);
return response.data;
};
@@ -268,23 +280,25 @@ const TypeformDashboard = () => {
forms.map(async (formId) => {
const responses = await fetchResponses(formId);
const hasMore = responses.items.length === 1000;
const lastToken = hasMore ? responses.items[responses.items.length - 1].token : null;
const lastToken = hasMore
? responses.items[responses.items.length - 1].token
: null;
return {
responses,
hasMore,
lastToken
lastToken,
};
})
);
setFormData({
form1: results[0],
form2: results[1]
form2: results[1],
});
} catch (err) {
console.error('Error fetching Typeform data:', err);
setError('Failed to load form data. Please try again later.');
console.error("Error fetching Typeform data:", err);
setError("Failed to load form data. Please try again later.");
} finally {
setLoading(false);
}
@@ -300,27 +314,31 @@ const TypeformDashboard = () => {
const form2Responses = formData.form2.responses.items;
// Product Relevance metrics
const yesResponses = form1Responses.filter(r =>
r.answers?.some(a => a.type === 'boolean' && a.boolean === true)
const yesResponses = form1Responses.filter((r) =>
r.answers?.some((a) => a.type === "boolean" && a.boolean === true)
).length;
const totalForm1 = form1Responses.length;
const yesPercentage = Math.round((yesResponses / totalForm1) * 100) || 0;
// Winback Survey metrics
const likelihoodAnswers = form2Responses
.map(r => r.answers?.find(a => a.type === 'number'))
.map((r) => r.answers?.find((a) => a.type === "number"))
.filter(Boolean)
.map(a => a.number);
const averageLikelihood = likelihoodAnswers.length
? Math.round((likelihoodAnswers.reduce((a, b) => a + b, 0) / likelihoodAnswers.length) * 10) / 10
.map((a) => a.number);
const averageLikelihood = likelihoodAnswers.length
? Math.round(
(likelihoodAnswers.reduce((a, b) => a + b, 0) /
likelihoodAnswers.length) *
10
) / 10
: 0;
// Get reasons for not ordering (only predefined choices)
const reasonsMap = new Map();
form2Responses.forEach(response => {
const reasonsAnswer = response.answers?.find(a => a.type === 'choices');
form2Responses.forEach((response) => {
const reasonsAnswer = response.answers?.find((a) => a.type === "choices");
if (reasonsAnswer?.choices?.labels) {
reasonsAnswer.choices.labels.forEach(label => {
reasonsAnswer.choices.labels.forEach((label) => {
reasonsMap.set(label, (reasonsMap.get(label) || 0) + 1);
});
}
@@ -331,19 +349,19 @@ const TypeformDashboard = () => {
.map(([label, count]) => ({
reason: label,
count,
percentage: Math.round((count / form2Responses.length) * 100)
percentage: Math.round((count / form2Responses.length) * 100),
}));
return {
productRelevance: {
yesPercentage,
yesCount: yesResponses,
noCount: totalForm1 - yesResponses
noCount: totalForm1 - yesResponses,
},
winback: {
averageRating: averageLikelihood,
reasons: sortedReasons
}
reasons: sortedReasons,
},
};
};
@@ -351,15 +369,21 @@ const TypeformDashboard = () => {
// Find the newest response across both forms
const getNewestResponse = () => {
if (!formData.form1.responses?.items?.length && !formData.form2.responses?.items?.length) return null;
if (
!formData.form1.responses?.items?.length &&
!formData.form2.responses?.items?.length
)
return null;
const form1Latest = formData.form1.responses?.items[0]?.submitted_at;
const form2Latest = formData.form2.responses?.items[0]?.submitted_at;
if (!form1Latest) return form2Latest;
if (!form2Latest) return form1Latest;
return new Date(form1Latest) > new Date(form2Latest) ? form1Latest : form2Latest;
return new Date(form1Latest) > new Date(form2Latest)
? form1Latest
: form2Latest;
};
const newestResponse = getNewestResponse();
@@ -377,12 +401,16 @@ const TypeformDashboard = () => {
}
// Calculate likelihood counts for the chart
const likelihoodCounts = !loading && formData.form2.responses ? [1, 2, 3, 4, 5].map(rating => ({
rating: rating.toString(),
count: formData.form2.responses.items
.filter(r => r.answers?.find(a => a.type === 'number')?.number === rating)
.length
})) : [];
const likelihoodCounts =
!loading && formData.form2.responses
? [1, 2, 3, 4, 5].map((rating) => ({
rating: rating.toString(),
count: formData.form2.responses.items.filter(
(r) =>
r.answers?.find((a) => a.type === "number")?.number === rating
).length,
}))
: [];
return (
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
@@ -393,7 +421,8 @@ const TypeformDashboard = () => {
</CardTitle>
{newestResponse && (
<p className="text-sm text-muted-foreground">
Newest response: {format(new Date(newestResponse), "MMM d, h:mm a")}
Newest response:{" "}
{format(new Date(newestResponse), "MMM d, h:mm a")}
</p>
)}
</div>
@@ -407,36 +436,51 @@ const TypeformDashboard = () => {
) : (
<>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-6">
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="p-6">
<div className="flex items-baseline justify-between">
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">How likely are you to place another order with us?</CardTitle>
<span className={`text-2xl font-bold ${
metrics.winback.averageRating <= 1 ? "text-red-600 dark:text-red-500" :
metrics.winback.averageRating <= 2 ? "text-orange-600 dark:text-orange-500" :
metrics.winback.averageRating <= 3 ? "text-yellow-600 dark:text-yellow-500" :
metrics.winback.averageRating <= 4 ? "text-lime-600 dark:text-lime-500" :
"text-green-600 dark:text-green-500"
}`}>
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">
How likely are you to place another order with us?
</CardTitle>
<span
className={`text-2xl font-bold ${
metrics.winback.averageRating <= 1
? "text-red-600 dark:text-red-500"
: metrics.winback.averageRating <= 2
? "text-orange-600 dark:text-orange-500"
: metrics.winback.averageRating <= 3
? "text-yellow-600 dark:text-yellow-500"
: metrics.winback.averageRating <= 4
? "text-lime-600 dark:text-lime-500"
: "text-green-600 dark:text-green-500"
}`}
>
{metrics.winback.averageRating}
<span className="text-base font-normal text-muted-foreground">/5 avg</span>
<span className="text-base font-normal text-muted-foreground">
/5 avg
</span>
</span>
</div>
</CardHeader>
<CardContent>
<div className="h-[200px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
<BarChart
data={likelihoodCounts}
margin={{ top: 0, right: 10, left: -20, bottom: -25 }}
>
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
<CartesianGrid
strokeDasharray="3 3"
className="stroke-muted"
/>
<XAxis
dataKey="rating"
tickFormatter={(value) => {
return value === "1" ? "Not at all" : value === "5" ? "Extremely" : "";
return value === "1"
? "Not at all"
: value === "5"
? "Extremely"
: "";
}}
textAnchor="middle"
interval={0}
@@ -463,14 +507,18 @@ const TypeformDashboard = () => {
/>
<Bar dataKey="count">
{likelihoodCounts.map((_, index) => (
<Cell
<Cell
key={`cell-${index}`}
fill={
index === 0 ? "#ef4444" : // red
index === 1 ? "#f97316" : // orange
index === 2 ? "#eab308" : // yellow
index === 3 ? "#84cc16" : // lime
"#10b981" // green
index === 0
? "#ef4444" // red
: index === 1
? "#f97316" // orange
: index === 2
? "#eab308" // yellow
: index === 3
? "#84cc16" // lime
: "#10b981" // green
}
/>
))}
@@ -483,7 +531,9 @@ const TypeformDashboard = () => {
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="p-6">
<div className="flex items-baseline justify-between gap-2">
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">Were the suggested products in this email relevant to you?</CardTitle>
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">
Were the suggested products in this email relevant to you?
</CardTitle>
<div className="flex flex-col items-end">
<span className="text-2xl font-bold text-green-600 dark:text-green-500">
{metrics.productRelevance.yesPercentage}% Relevant
@@ -495,11 +545,15 @@ const TypeformDashboard = () => {
<div className="h-[100px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={[{
yes: metrics.productRelevance.yesCount,
no: metrics.productRelevance.noCount,
total: metrics.productRelevance.yesCount + metrics.productRelevance.noCount
}]}
data={[
{
yes: metrics.productRelevance.yesCount,
no: metrics.productRelevance.noCount,
total:
metrics.productRelevance.yesCount +
metrics.productRelevance.noCount,
},
]}
layout="vertical"
stackOffset="expand"
margin={{ top: 0, right: 0, left: -20, bottom: 0 }}
@@ -513,19 +567,31 @@ const TypeformDashboard = () => {
const yesCount = payload[0].payload.yes;
const noCount = payload[0].payload.no;
const total = yesCount + noCount;
const yesPercent = Math.round((yesCount / total) * 100);
const noPercent = Math.round((noCount / total) * 100);
const yesPercent = Math.round(
(yesCount / total) * 100
);
const noPercent = Math.round(
(noCount / total) * 100
);
return (
<Card className="p-3 shadow-lg bg-white dark:bg-gray-900/60 backdrop-blur-sm border-none">
<CardContent className="p-0 space-y-2">
<div className="space-y-1">
<div className="flex justify-between items-center text-sm">
<span className="text-emerald-500 font-medium">Yes:</span>
<span className="ml-4 text-muted-foreground">{yesCount} ({yesPercent}%)</span>
<span className="text-emerald-500 font-medium">
Yes:
</span>
<span className="ml-4 text-muted-foreground">
{yesCount} ({yesPercent}%)
</span>
</div>
<div className="flex justify-between items-center text-sm">
<span className="text-red-500 font-medium">No:</span>
<span className="ml-4 text-muted-foreground">{noCount} ({noPercent}%)</span>
<span className="text-red-500 font-medium">
No:
</span>
<span className="ml-4 text-muted-foreground">
{noCount} ({noPercent}%)
</span>
</div>
</div>
</CardContent>
@@ -535,7 +601,12 @@ const TypeformDashboard = () => {
return null;
}}
/>
<Bar dataKey="yes" stackId="stack" fill="#10b981" radius={[0, 0, 0, 0]}>
<Bar
dataKey="yes"
stackId="stack"
fill="#10b981"
radius={[0, 0, 0, 0]}
>
<text
x="50%"
y="50%"
@@ -547,7 +618,12 @@ const TypeformDashboard = () => {
{metrics.productRelevance.yesPercentage}%
</text>
</Bar>
<Bar dataKey="no" stackId="stack" fill="#ef4444" radius={[0, 0, 0, 0]} />
<Bar
dataKey="no"
stackId="stack"
fill="#ef4444"
radius={[0, 0, 0, 0]}
/>
</BarChart>
</ResponsiveContainer>
</div>
@@ -561,26 +637,43 @@ const TypeformDashboard = () => {
<div className="grid grid-cols-2 lg:grid-cols-12 gap-4">
<div className="col-span-4 lg:col-span-12 xl:col-span-4">
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<Card className="bg-white dark:bg-gray-900/60 backdrop-blur-sm h-full">
<CardHeader>
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">Reasons for Not Ordering</CardTitle>
<CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">
Reasons for Not Ordering
</CardTitle>
</CardHeader>
<CardContent>
<div className="overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-300 dark:hover:scrollbar-thumb-gray-600">
<Table>
<TableHeader>
<TableRow>
<TableHead className="font-medium text-gray-900 dark:text-gray-100">Reason</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">Count</TableHead>
<TableHead className="text-right w-[80px] font-medium text-gray-900 dark:text-gray-100">%</TableHead>
<TableHead className="font-medium text-gray-900 dark:text-gray-100">
Reason
</TableHead>
<TableHead className="text-right font-medium text-gray-900 dark:text-gray-100">
Count
</TableHead>
<TableHead className="text-right w-[80px] font-medium text-gray-900 dark:text-gray-100">
%
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{metrics.winback.reasons.map((reason, index) => (
<TableRow key={index} className="hover:bg-muted/50 transition-colors">
<TableCell className="font-medium text-gray-900 dark:text-gray-100">{reason.reason}</TableCell>
<TableCell className="text-right text-muted-foreground">{reason.count}</TableCell>
<TableCell className="text-right text-muted-foreground">{reason.percentage}%</TableCell>
<TableRow
key={index}
className="hover:bg-muted/50 transition-colors"
>
<TableCell className="font-medium text-gray-900 dark:text-gray-100">
{reason.reason}
</TableCell>
<TableCell className="text-right text-muted-foreground">
{reason.count}
</TableCell>
<TableCell className="text-right text-muted-foreground">
{reason.percentage}%
</TableCell>
</TableRow>
))}
</TableBody>
@@ -589,7 +682,7 @@ const TypeformDashboard = () => {
</CardContent>
</Card>
</div>
<div className="col-span-4 lg:col-span-6 xl:col-span-4">
<WinbackFeed responses={formData.form2.responses} />
</div>
@@ -604,4 +697,4 @@ const TypeformDashboard = () => {
);
};
export default TypeformDashboard;
export default TypeformDashboard;