add zustard

apps/admin.saladeaula.digital/app/routes/_.$orgid.scheduled/route.tsx

@@ -16,7 +16,7 @@ import {
   UserIcon
 } from 'lucide-react'
 import { toast } from 'sonner'
-import { DateTime } from 'luxon'
+import { DateTime as LuxonDateTime } from 'luxon'
 import { Fragment, Suspense } from 'react'
 import { Await } from 'react-router'
 
@@ -67,6 +67,7 @@ import {
 import { Spinner } from '@repo/ui/components/ui/spinner'
 import { useParams } from 'react-router'
 import { useRevalidator } from 'react-router'
+import { DateTime } from '@repo/ui/components/datetime'
 import {
   Tabs,
   TabsContent,
@@ -239,7 +240,7 @@ function Timeline({
       {events.map(([run_at, items], index) => (
         <div className="grid grid-cols-1 lg:grid-cols-5 gap-2.5" key={index}>
           <div>
-            {DateTime.fromISO(run_at)
+            {LuxonDateTime.fromISO(run_at)
               .setLocale('pt-BR')
               .toFormat('cccc, dd LLL yyyy')}
           </div>
@@ -276,7 +277,13 @@ function Scheduled({ items = [] }) {
                 <ul className="lg:flex gap-2.5 text-muted-foreground text-sm *:flex *:gap-1 *:items-center">
                   <li>
                     <CalendarIcon className="size-3.5" />
-                    <span>{datetime.format(new Date(scheduled_at))}</span>
+                    <span>
+                      <DateTime
+                        options={{ hour: '2-digit', minute: '2-digit' }}
+                      >
+                        {scheduled_at}
+                      </DateTime>
+                    </span>
                   </li>
                   <li>
                     <UserIcon className="size-3.5" />
@@ -345,7 +352,13 @@ function Executed({ items = [] }) {
                 <ul className="lg:flex gap-2.5 text-muted-foreground text-sm *:flex *:gap-1 *:items-center">
                   <li>
                     <ClockCheckIcon className="size-3.5" />
-                    <span>{datetime.format(new Date(created_at))}</span>
+                    <span>
+                      <DateTime
+                        options={{ hour: '2-digit', minute: '2-digit' }}
+                      >
+                        {created_at}
+                      </DateTime>
+                    </span>
                   </li>
                 </ul>
               </div>
@@ -384,7 +397,13 @@ function Failed({ items = [] }) {
                 <ul className="lg:flex gap-2.5 text-muted-foreground text-sm *:flex *:gap-1 *:items-center">
                   <li>
                     <ClockAlertIcon className="size-3.5" />
-                    <span>{datetime.format(new Date(created_at))}</span>
+                    <span>
+                      <DateTime
+                        options={{ hour: '2-digit', minute: '2-digit' }}
+                      >
+                        {created_at}
+                      </DateTime>
+                    </span>
                   </li>
 
                   {cause?.type === 'DeduplicationConflictError' ? (
@@ -535,11 +554,3 @@ function grouping(items) {
   )
   return newItems.sort((x, y) => x[0].localeCompare(y[0]))
 }
-
-const datetime = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-})