Function DashboardCost

pages/usage.tsx:215–254

()

}

function DashboardCost() {
  // It's getting WET in here
  const supabase = useSupabaseClient<Database>();
  const { profile, refreshProfile } = useProfile();
  const [cost, setCost] = useState([{}] as { date: string; value: number }[]);
  const [sum, setSum] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!profile) return;
    (async () => {
      const res = await supabase
        .from("usage")
        .select("*")
        .eq("org_id", profile?.org_id!);
      if (res.error) throw res.error;
      setCost(res.data.map((d) => ({ date: d.date, value: d.usage })));
      setSum(res.data.reduce((acc, curr) => acc + curr.usage, 0));
      setLoading(false);
    })();
  }, [profile, refreshProfile, supabase]);
  return (
    <div className="bg-gray-800 min-h-screen">
      <Navbar current={"Usage"} />
      <div className="h-[calc(100%-4rem)] flex flex-col gap-y-4 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 bg-gray-800 pb-8 place-items-center">
        <div className="mt-8 bg-gray-850 rounded-md px-6 py-4 overflow-visible max-w-7xl w-full">
          <div className="place-items-center m-auto  text-center">
            <h1 className="text-2xl text-gray-100">OpenAI API usage </h1>
            <p className="text-gray-200 mt-2 text-xl font-bold text-purple-500">
              {`Total Cost $${Math.round(sum * 100) / 100}`}
            </p>
          </div>
          <div className="max-w-5xl mx-auto">
            {!loading && <DatesBarGraph data={cost} ylabel="Cost (USD)" />}
          </div>
        </div>
      </div>
    </div>
  );
}

export const getServerSideProps = pageGetServerSideProps;