add user

apps/admin.saladeaula.digital/app/components/app-sidebar.tsx

@@ -12,7 +12,7 @@ import {
 } from 'lucide-react'
 
 import { NavMain } from '@/components/nav-main'
-import { OrgSwitcher } from '@/components/org-switcher'
+import { WorkspaceSwitcher } from '@/components/workspace-switcher'
 import {
   Sidebar,
   SidebarContent,
@@ -42,11 +42,6 @@ const data = {
       url: '/admins',
       icon: ShieldUserIcon
     }
-    // {
-    //   title: 'Webhooks',
-    //   url: '/webhooks',
-    //   icon: WebhookIcon
-    // }
   ],
   navContent: [
     {
@@ -76,7 +71,7 @@ export function AppSidebar({ orgs = [] }) {
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
-        <OrgSwitcher orgs={orgs} />
+        <WorkspaceSwitcher />
       </SidebarHeader>
       <SidebarContent>
         <NavMain data={data} />

apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx

@@ -29,6 +29,7 @@ import {
   TableHeader,
   TableRow
 } from '@repo/ui/components/ui/table'
+import { cn } from '@repo/ui/lib/utils'
 import { DataTablePagination } from './pagination'
 
 interface DataTableProps<TData, TValue> {
@@ -145,7 +146,7 @@ export function DataTable<TData, TValue>({
           <CardContent>
             {children}
 
-            <Table_>
+            <Table_ className="table-auto">
               <TableHeader>
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow
@@ -154,7 +155,13 @@ export function DataTable<TData, TValue>({
                   >
                     {headerGroup.headers.map((header) => {
                       return (
-                        <TableHead key={header.id} className="p-2.5">
+                        <TableHead
+                          key={header.id}
+                          className={cn(
+                            'p-2.5',
+                            header.column.columnDef.meta?.className
+                          )}
+                        >
                           {header.isPlaceholder
                             ? null
                             : flexRender(
@@ -176,7 +183,13 @@ export function DataTable<TData, TValue>({
                       data-state={row.getIsSelected() && 'selected'}
                     >
                       {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id} className="p-2.5">
+                        <TableCell
+                          key={cell.id}
+                          className={cn(
+                            'p-2.5',
+                            cell.column.columnDef.meta?.className
+                          )}
+                        >
                           {flexRender(
                             cell.column.columnDef.cell,
                             cell.getContext()

apps/admin.saladeaula.digital/app/components/workspace-switcher.tsx

@@ -2,7 +2,7 @@
 
 import { formatCNPJ } from '@brazilian-utils/brazilian-utils'
 import { CheckIcon, ChevronsUpDownIcon, PlusIcon } from 'lucide-react'
-import { useState } from 'react'
+import { createContext, useContext, useState } from 'react'
 import { useLocation, useParams } from 'react-router'
 
 import {
@@ -23,23 +23,60 @@ import {
 } from '@repo/ui/components/ui/sidebar'
 import { initials } from '@repo/ui/lib/utils'
 
-type Org = {
+type Workspace = {
   id: string
   name: string
   cnpj: string
 }
 
-export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
+type WorkspaceContextProps = {
+  workspaces: Workspace[]
+  activeWorkspace: Workspace | null
+  setActiveWorkspace: React.Dispatch<React.SetStateAction<Workspace | null>>
+}
+
+const WorkspaceContext = createContext<WorkspaceContextProps | null>(null)
+
+export function useWorksapce() {
+  const ctx = useContext(WorkspaceContext)
+
+  if (!ctx) {
+    throw new Error('WorkspaceContext is null')
+  }
+
+  return ctx
+}
+
+export function WorkspaceProvider({
+  workspaces,
+  children
+}: {
+  workspaces: Workspace[]
+  children: React.ReactNode
+}) {
+  const { orgid } = useParams()
+  const [activeWorkspace, setActiveWorkspace] = useState<Workspace | null>(
+    () => workspaces.find((ws) => ws.id === orgid) ?? null
+  )
+
+  return (
+    <WorkspaceContext
+      value={{ workspaces, activeWorkspace, setActiveWorkspace }}
+    >
+      {children}
+    </WorkspaceContext>
+  )
+}
+
+export function WorkspaceSwitcher() {
   const location = useLocation()
   const { isMobile, state } = useSidebar()
-  const { orgid } = useParams()
-  const org = orgs.find((org) => org.id === orgid) as Org
-  const [activeOrg, setActiveOrg] = useState<Org>(org)
+  const { activeWorkspace, setActiveWorkspace, workspaces } = useWorksapce()
   const [, fragment, _] = location.pathname.slice(1).split('/')
 
-  const onSelect = (org: Org) => {
-    setActiveOrg(org)
-    window.location.assign(`/${org.id}/${fragment}`)
+  const onSelect = (ws: Workspace) => {
+    setActiveWorkspace(ws)
+    window.location.assign(`/${ws.id}/${fragment}`)
   }
 
   return (
@@ -55,17 +92,20 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
                 className="aria-expanded:border flex aspect-square size-8 items-center justify-center rounded-lg"
                 aria-expanded={state === 'expanded'}
               >
-                {initials(activeOrg?.name)}
+                {initials(activeWorkspace?.name)}
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{activeOrg?.name}</span>
+                <span className="truncate font-medium">
+                  {activeWorkspace?.name}
+                </span>
                 <span className="truncate text-xs text-muted-foreground">
-                  {formatCNPJ(activeOrg?.cnpj)}
+                  {formatCNPJ(activeWorkspace?.cnpj)}
                 </span>
               </div>
               <ChevronsUpDownIcon className="ml-auto" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
+
           <DropdownMenuContent
             className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
             align="start"
@@ -75,20 +115,23 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
             <DropdownMenuLabel className="text-muted-foreground text-xs">
               Empresas
             </DropdownMenuLabel>
-            {orgs.map((org, index) => (
+
+            {workspaces.map((workspace, index) => (
               <DropdownMenuItem
                 key={index}
-                onClick={() => onSelect(org)}
+                onClick={() => onSelect(workspace)}
                 className="group gap-2 p-2 cursor-pointer aria-selected:pointer-events-none"
-                aria-selected={org.id === activeOrg.id}
+                aria-selected={workspace.id === activeWorkspace?.id}
               >
                 <div className="flex size-8 items-center justify-center rounded-lg border">
-                  {initials(org?.name)}
+                  {initials(workspace?.name)}
                 </div>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-medium">{org?.name}</span>
+                  <span className="truncate font-medium">
+                    {workspace?.name}
+                  </span>
                   <span className="truncate text-xs text-muted-foreground">
-                    {formatCNPJ(org?.cnpj)}
+                    {formatCNPJ(workspace?.cnpj)}
                   </span>
                 </div>
                 <DropdownMenuShortcut className="not-group-aria-selected:hidden">
@@ -96,7 +139,9 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) {
                 </DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
+
             <DropdownMenuSeparator />
+
             <DropdownMenuItem className="gap-2 p-2">
               <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                 <PlusIcon className="size-4" />