add subscription to org

apps/insights.saladeaula.digital/app/routes/_app.orgs.$id/route.tsx

@@ -0,0 +1,123 @@
+import type { Route } from './+types/route'
+
+import {
+  Link,
+  NavLink,
+  Outlet,
+  type ShouldRevalidateFunctionArgs
+} from 'react-router'
+
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@repo/ui/components/ui/breadcrumb'
+import { Tabs, TabsList, TabsTrigger } from '@repo/ui/components/ui/tabs'
+import { initials } from '@repo/ui/lib/utils'
+import { request as req } from '@repo/util/request'
+import { BadgeCheckIcon } from 'lucide-react'
+
+const links = [
+  { to: '', title: 'Perfil', end: true },
+  { to: 'subscription', title: 'Plano' },
+  { to: 'address', title: 'Endereço' }
+]
+
+export function meta() {
+  return [
+    {
+      title: 'Editar empresa'
+    }
+  ]
+}
+
+export async function loader({ params, request, context }: Route.LoaderArgs) {
+  const r = await req({
+    url: `/orgs/${params.id}`,
+    request,
+    context
+  })
+
+  if (!r.ok) {
+    throw new Response(null, { status: r.status })
+  }
+
+  return { org: await r.json() } as { org: any }
+}
+
+export function shouldRevalidate({
+  currentParams,
+  nextParams
+}: ShouldRevalidateFunctionArgs) {
+  return currentParams.id !== nextParams.id
+}
+
+export default function Route({ loaderData: { org } }: Route.ComponentProps) {
+  return (
+    <div className="space-y-2.5">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="../orgs">Empresas</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Editar empresa</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="lg:max-w-2xl mx-auto space-y-2.5">
+        <div className="flex gap-2.5 items-center mb-5">
+          <div className="relative">
+            {org?.subscription ? (
+              <BadgeCheckIcon className="fill-blue-500 stroke-white absolute size-4 dark:size-3.5 -top-0 -right-0 z-2" />
+            ) : null}
+
+            <Avatar className="size-12">
+              <AvatarFallback>{initials(org.name)}</AvatarFallback>
+            </Avatar>
+          </div>
+
+          <ul>
+            <li className="font-bold text-lg">{org.name}</li>
+            <li className="text-muted-foreground text-sm truncate max-lg:max-w-62">
+              {org.email}
+            </li>
+          </ul>
+        </div>
+
+        <Tabs>
+          <TabsList>
+            {links.map(({ to, title, ...props }, idx) => (
+              <NavLink
+                to={to}
+                key={idx}
+                className="aria-[current=page]:pointer-events-none"
+                {...props}
+              >
+                {({ isActive }) => (
+                  <TabsTrigger
+                    data-state={isActive ? 'active' : ''}
+                    value={title}
+                    asChild
+                  >
+                    <span>{title}</span>
+                  </TabsTrigger>
+                )}
+              </NavLink>
+            ))}
+          </TabsList>
+        </Tabs>
+
+        <Outlet context={{ org }} />
+      </div>
+    </div>
+  )
+}