[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68ac5798e0048191a2c01aaf4cca0b00","versionInt","title","Digical – Ai Automation Savings Dashboard (react) V3","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Info, Calculator, Users, Euro, Clock, TrendingUp } from \"lucide-react\";\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from \"recharts\";\n\n// Brand tokens\nconst BRAND = {\n blue: \"#012241\",\n grey: \"#FAFAFA\",\n red: \"#E21C21\",\n font: \"Montserrat, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\"\",\n};\n\nfunction LabeledNumber({label, value, onChange, min=0, step=1, postfix, prefix, help, id}){\n return (\n

\n \n {label} {postfix ? ({postfix}) : null}\n \n

\n {prefix ? {prefix} : null}\n onChange(Number(e.target.value))}\n className={`w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-slate-900 shadow-sm focus:outline-none focus:ring-4`}\n style={{paddingLeft: prefix? '2.25rem': undefined, fontFamily: BRAND.font}}\n />\n

\n {help ? (\n

{help}

\n ): null}\n

\n );\n}\n\nfunction StatCard({icon, label, value, sub, accent=BRAND.blue}){\n return (\n

\n {icon}\n

{label}

{value}

\n {sub ?

{sub}

: null}\n

\n );\n}\n\nexport default function DigicalAutomationCalculator(){\n const [employees, setEmployees] = useState(25);\n const [hourly, setHourly] = useState(35); // €\n const [tasksPerEmpPerDay, setTasksPerEmpPerDay] = useState(20);\n const [minutesPerTask, setMinutesPerTask] = useState(5);\n const [workdaysPerMonth, setWorkdaysPerMonth] = useState(22);\n const [subscription, setSubscription] = useState(2997); // € per month for automation program\n const workMonths = 12;\n\n // Core math\n const calc = useMemo(()=>{\n const dailyTasks = employees * tasksPerEmpPerDay;\n const dailyHoursSpent = (dailyTasks * minutesPerTask) / 60; // total across org\n const timeSavedPerDay = dailyHoursSpent * 0.5; // default 50% assumption for savings\n const monthlyHoursSaved = timeSavedPerDay * workdaysPerMonth;\n const annualHoursSaved = monthlyHoursSaved * workMonths;\n const monthlySavings = monthlyHoursSaved * hourly;\n const annualSavings = monthlySavings * workMonths;\n const monthlyCost = subscription;\n const annualCost = monthlyCost * workMonths;\n const monthlyROI = monthlyCost>0 ? (monthlySavings - monthlyCost) / monthlyCost : Infinity;\n const annualROI = annualCost>0 ? (annualSavings - annualCost) / annualCost : Infinity;\n const paybackDays = monthlySavings>0 ? Math.max(0, Math.ceil((monthlyCost / monthlySavings) * workdaysPerMonth)) : Infinity;\n\n // Chart data for 12 months (cumulative)\n let cumulativeSavings = 0;\n let cumulativeCost = 0;\n const chart = Array.from({length: 12}, (_,i)=>{\n cumulativeSavings += monthlySavings;\n cumulativeCost += monthlyCost;\n return {\n month: `M${i+1}`,\n Savings: Math.round(cumulativeSavings),\n Cost: Math.round(cumulativeCost),\n Net: Math.round(cumulativeSavings - cumulativeCost),\n };\n });\n\n return { dailyHoursSpent, monthlyHoursSaved, annualHoursSaved, monthlySavings, annualSavings, monthlyCost, annualCost, monthlyROI, annualROI, paybackDays, chart };\n }, [employees, hourly, tasksPerEmpPerDay, minutesPerTask, workdaysPerMonth, subscription]);\n\n return (\n

\n {/* Header */}\n

AI Automation Impact Dashboard

\n Estimate time and cost savings from automating recurring work with Digical.\n

How to use

Enter team size, wages, and task cadence.
Adjust recurring tasks and minutes to reflect workloads.
Compare savings vs program cost.

\n \n Book your free call\n \n

\n\n {/* Assumptions Panel */}\n

\n \n \n \n \n \n \n

\n\n {/* KPI Cards */}\n

\n } label=\"Daily hours spent on recurring work\" value={`${calc.dailyHoursSpent.toLocaleString(undefined,{maximumFractionDigits:1})} h`} sub=\"Before automation\"/>\n } label=\"Annual hours saved\" value={`${Math.round(calc.annualHoursSaved).toLocaleString()} h`} sub=\"After automation\"/>\n } label=\"Annual cost savings\" value={`€${Math.round(calc.annualSavings).toLocaleString()}`} sub=\"Hours saved × hourly wage\"/>\n

\n\n

\n } label=\"Monthly ROI\" value={`${(calc.monthlyROI*100).toFixed(0)}%`} sub={`Subscription €${calc.monthlyCost.toLocaleString()}/mo`}/>\n } label=\"Annual ROI\" value={`${(calc.annualROI*100).toFixed(0)}%`} sub={`Net: €${Math.round(calc.annualSavings - calc.annualCost).toLocaleString()}`}/>\n } label=\"Payback period\" value={Number.isFinite(calc.paybackDays) ? `${calc.paybackDays} workdays` : '—'} sub=\"To break even\"/>\n

\n\n {/* Chart */}\n

Cumulative Savings vs Cost

\n \n \n \n \n \n `€${Number(v).toLocaleString()}`} />\n \n \n \n \n \n \n

Assumes constant monthly savings and costs. Adjust inputs to reflect scope and adoption.

\n\n {/* CTA bottom */}\n

\n Ready to translate the model into shipped automations and real savings?\n

\n \n Book your free call\n \n

\n\n {/* Footer note */}\n

\n Built by Digical. Estimates only. Your mileage will vary based on processes, data quality, and adoption.\n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","13690468658045913950","traceTime",1776443388229]