wip

apps/dashboard/src/actions/connect-bank-account-action.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { getUser } from "@midday/supabase/cached-queries";
+import { action } from "./safe-action";
+import { connectBankAccountSchema } from "./schema";
+
+export const connectBankAccountAction = action(
+  connectBankAccountSchema,
+  async (value) => {
+    const user = await getUser();
+
+    return value;
+  }
+);

apps/dashboard/src/actions/index.ts

@@ -63,6 +63,9 @@ export async function createBankAccountsAction(accounts) {
   const { data } = await createBankAccounts(supabase, accounts);
   const teamId = data.at(0).team_id;
 
+  // TODO: Send event to trigger.dev
+  // Kick off initial fetch and setup scheduler
+
   revalidateTag(`bank_connections_${teamId}`);
 
   return data;

apps/dashboard/src/components/charts/chart-period.tsx

@@ -1,15 +1,10 @@
 "use client";
 
 import { changeChartPeriodAction } from "@/actions/change-chart-period-action";
-import { DateRangePicker } from "@midday/ui/date-range-picker";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@midday/ui/select";
+import { Button } from "@midday/ui/button";
+import { Icons } from "@midday/ui/icons";
+import { MonthRangePicker } from "@midday/ui/month-range-picker";
+import { Popover, PopoverContent, PopoverTrigger } from "@midday/ui/popover";
 import { format } from "date-fns";
 import { useAction } from "next-safe-action/hook";
 import { parseAsString, useQueryStates } from "next-usequerystate";
@@ -19,18 +14,10 @@ export function ChartPeriod({ initialValue, defaultValue, disabled }) {
 
   const { execute } = useAction(changeChartPeriodAction);
 
-  const handleChangePeriod = (params) => {
-    setState(params);
-    execute(params);
-  };
-
   const [state, setState] = useQueryStates(
     {
-      to: parseAsString.withDefault(initialValue?.to ?? undefined),
       from: parseAsString.withDefault(initialValue?.from ?? undefined),
-      period: parseAsString.withDefault(
-        initialValue?.period ?? defaultValue.period
-      ),
+      to: parseAsString.withDefault(initialValue?.to ?? undefined),
     },
     {
       shallow: false,
@@ -52,38 +39,33 @@ export function ChartPeriod({ initialValue, defaultValue, disabled }) {
     )} `;
   }
 
+  const handleChangePeriod = (params) => {
+    const range = {
+      ...state,
+      ...(params.from && { from: params.from }),
+      ...(params.to && { to: params.to }),
+    };
+
+    execute(range);
+    setState(range);
+  };
+
   return (
     <div className="flex space-x-4">
-      <DateRangePicker
-        disabled={disabled}
-        placeholder={placeholder}
-        range={{
-          from: state?.from && new Date(state.from),
-          to: state?.to && new Date(state.to),
-        }}
-        onSelect={(range) => {
-          handleChangePeriod({
-            from: range?.from ? new Date(range.from).toISOString() : null,
-            to: range?.to ? new Date(range.to).toISOString() : null,
-          });
-        }}
-      />
-
-      <Select
-        disabled={disabled}
-        defaultValue={state.period}
-        onValueChange={(period) => handleChangePeriod({ period })}
-      >
-        <SelectTrigger className="w-[130px] font-medium">
-          <SelectValue placeholder="Monthly" />
-        </SelectTrigger>
-        <SelectContent className="mt-1">
-          <SelectGroup>
-            <SelectItem value="monthly">Monthly</SelectItem>
-            <SelectItem value="weekly">Weekly</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+      <Popover>
+        <PopoverTrigger asChild disabled={disabled}>
+          <Button
+            variant="outline"
+            className="justify-start text-left font-medium space-x-2"
+          >
+            <span>{placeholder}</span>
+            <Icons.ChevronDown />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[450px] mt-2 pt-1" align="end">
+          <MonthRangePicker setDate={handleChangePeriod} date={state} />
+        </PopoverContent>
+      </Popover>
     </div>
   );
 }

apps/dashboard/src/components/charts/chart.tsx

@@ -12,7 +12,8 @@ export async function Chart({ value, defaultValue, disabled }) {
     ? chartData
     : await getMetrics({ ...defaultValue, ...value, type });
 
-  const lastPeriodAmount = data.result[data.result.length - 1]?.current?.value;
+  const lastPeriodAmount =
+    data?.result[data.result?.length - 1]?.current?.value;
 
   return (
     <div className="relative mt-28">

apps/dashboard/src/components/counter.tsx

@@ -34,7 +34,7 @@ const InnerCounter = ({ currency, pad, value, locale }) => {
   })
     .format(paddedValue)
     .split("")
-    .map((character, index) => {
+    .map((character) => {
       if (!Number.isNaN(parseInt(character, 10)) && i < padCount) {
         i++;
         return "0";
@@ -100,8 +100,12 @@ export function Counter({
 
   return (
     <>
-      <InnerCounter value={value} currency={currency} locale={locale} />
-      <InnerCounter value={value} currency={currency} locale={locale} />
+      {value > 0 && (
+        <InnerCounter value={value} currency={currency} locale={locale} />
+      )}
+      {value > 0 && (
+        <InnerCounter value={value} currency={currency} locale={locale} />
+      )}
     </>
   );
 }

apps/dashboard/src/components/filter.tsx

@@ -242,7 +242,7 @@ export function Filter({ sections }: Props) {
 
   return (
     <div className="flex items-center">
-      <Popover open={isOpen} onOpenChange={setOpen} size>
+      <Popover open={isOpen} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button variant="outline" className="space-x-2">
             <span>Add filter</span>

apps/dashboard/src/components/main-menu.tsx

@@ -53,7 +53,7 @@ export function MainMenu() {
   ];
 
   return (
-    <nav className="mt-6 ml-1">
+    <nav className="mt-6">
       <ul className="flex flex-col gap-0.5">
         {items.map((item) => {
           const { path, icon: Icon, name } = item;
@@ -69,7 +69,7 @@ export function MainMenu() {
             >
               <li
                 className={cn(
-                  "rounded-lg border border-transparent w-[55px] h-[45px] flex items-center justify-center",
+                  "rounded-lg border border-transparent w-[45px] h-[45px] flex items-center justify-center",
                   "hover:bg-secondary hover:border-[#DCDAD2] hover:dark:border-[#2C2C2C]",
                   isActive &&
                     "bg-secondary border-[#DCDAD2] dark:border-[#2C2C2C]"

apps/dashboard/src/components/modals/select-account-modal.tsx

@@ -89,9 +89,8 @@ export function SelectAccountModal({ countryCode }) {
         },
       }));
 
+    // Change to use safe-action and listen to loading and disable modal close and button
     await createBankAccountsAction(accountsWithDetails);
-
-    router.push(`${pathname}?step=desktop`);
   }
 
   useEffect(() => {

apps/dashboard/src/components/sidebar.tsx

@@ -7,7 +7,7 @@ export function Sidebar() {
   return (
     <aside className="h-screen flex-shrink-0 flex-col justify-between flex sticky top-0 ml-4 pb-4 items-center">
       <div className="flex flex-col items-center justify-center xl:items-start xl:justify-start">
-        <div className="mt-6 xl:ml-4">
+        <div className="mt-6">
           <Link href="/">
             <Icons.LogoSmall />
           </Link>

packages/jobs/src/constants.ts

@@ -1,5 +1,4 @@
 export const Jobs = {
-  BANK_ACCOUNT_CREATED: "bank-account-created",
   TRANSACTIONS_ENCRICHMENT: "transactions-encrichment",
   TRANSACTIONS_EXPORT: "transactions-export",
   TRANSACTIONS_INITIAL_SYNC: "transactions-initial-sync",

packages/jobs/src/transactions/index.ts

@@ -1,4 +1,3 @@
-export * from "./created";
 export * from "./encrichment";
 export * from "./export";
 export * from "./initial";

packages/jobs/src/transactions/notification.ts

@@ -109,8 +109,6 @@ client.defineJob({
 
     if (emailEvents?.length) {
       triggerBulk(emailEvents);
-      await io.logger.log(`Sending emails: ${emailEvents.length}`);
-      await io.logger.log(`Emails: ${JSON.stringify(emailEvents, null, 2)}`);
     }
   },
 });