improve formatting in data tables

server/routers/resource/listResources.ts

@@ -58,6 +58,7 @@ function queryResources(
                 fullDomain: resources.fullDomain,
                 ssl: resources.ssl,
                 siteName: sites.name,
+                siteId: sites.niceId,
                 passwordId: resourcePassword.passwordId,
                 pincodeId: resourcePincode.pincodeId,
                 sso: resources.sso,
@@ -86,6 +87,7 @@ function queryResources(
                 ssl: resources.ssl,
                 fullDomain: resources.fullDomain,
                 siteName: sites.name,
+                siteId: sites.niceId,
                 passwordId: resourcePassword.passwordId,
                 sso: resources.sso,
                 pincodeId: resourcePincode.pincodeId,

server/routers/user/inviteUser.ts

@@ -86,7 +86,6 @@ export async function inviteUser(
 
         inviteTracker[email].timestamps.push(currentTime);
 
-        logger.debug("here0")
         const org = await db
             .select()
             .from(orgs)
@@ -98,7 +97,6 @@ export async function inviteUser(
             );
         }
 
-        logger.debug("here1")
         const existingUser = await db
             .select()
             .from(users)
@@ -114,7 +112,6 @@ export async function inviteUser(
             );
         }
 
-        logger.debug("here2")
         const inviteId = generateRandomString(
             10,
             alphabet("a-z", "A-Z", "0-9"),
@@ -124,7 +121,6 @@ export async function inviteUser(
 
         const tokenHash = await hashPassword(token);
 
-        logger.debug("here3")
         // delete any existing invites for this email
         await db
             .delete(userInvites)
@@ -133,7 +129,6 @@ export async function inviteUser(
             )
             .execute();
 
-        logger.debug("here4")
         await db.insert(userInvites).values({
             inviteId,
             orgId,
@@ -145,23 +140,21 @@ export async function inviteUser(
 
         const inviteLink = `${config.app.base_url}/invite?token=${inviteId}-${token}`;
 
-        logger.debug("here5")
+        await sendEmail(
-        // await sendEmail(
+            SendInviteLink({
-        //     SendInviteLink({
+                email,
-        //         email,
+                inviteLink,
-        //         inviteLink,
+                expiresInDays: (validHours / 24).toString(),
-        //         expiresInDays: (validHours / 24).toString(),
+                orgName: org[0].name || orgId,
-        //         orgName: org[0].name || orgId,
+                inviterName: req.user?.email,
-        //         inviterName: req.user?.email,
+            }),
-        //     }),
+            {
-        //     {
+                to: email,
-        //         to: email,
+                from: config.email?.no_reply,
-        //         from: config.email?.no_reply,
+                subject: "You're invited to join a Fossorial organization",
-        //         subject: "You're invited to join a Fossorial organization",
+            },
-        //     },
+        );
-        // );
 
-        logger.debug("here6")
         return response<InviteUserResponse>(res, {
             data: {
                 inviteLink,

src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx

@@ -24,7 +24,7 @@ export default function AccessPageHeaderAndNav({
     return (
         <>
             <SettingsSectionTitle
-                title="Users & Roles"
+                title="Manage Users & Roles"
                 description="Invite users and add them to roles to manage access to your
             organization"
             />

src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx

@@ -22,7 +22,7 @@ import {
 import { Button } from "@app/components/ui/button";
 import { useState } from "react";
 import { Input } from "@app/components/ui/input";
-import { Plus } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 import { DataTablePagination } from "@app/components/DataTablePagination";
 
 interface DataTableProps<TData, TValue> {
@@ -61,19 +61,23 @@ export function RolesDataTable<TData, TValue>({
     return (
         <div>
             <div className="flex items-center justify-between pb-4">
+                <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search roles"
                         value={
-                        (table.getColumn("name")?.getFilterValue() as string) ??
+                            (table
-                        ""
+                                .getColumn("name")
+                                ?.getFilterValue() as string) ?? ""
                         }
                         onChange={(event) =>
                             table
                                 .getColumn("name")
                                 ?.setFilterValue(event.target.value)
                         }
-                    className="max-w-sm mr-2"
+                        className="w-full pl-8"
                     />
+                    <Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
+                </div>
                 <Button
                     onClick={() => {
                         if (addRole) {

src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx

@@ -23,7 +23,7 @@ import { Button } from "@app/components/ui/button";
 import { useState } from "react";
 import { Input } from "@app/components/ui/input";
 import { DataTablePagination } from "../../../../../../components/DataTablePagination";
-import { Plus } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -61,6 +61,7 @@ export function UsersDataTable<TData, TValue>({
     return (
         <div>
             <div className="flex items-center justify-between pb-4">
+                <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search users"
                         value={
@@ -73,8 +74,10 @@ export function UsersDataTable<TData, TValue>({
                                 .getColumn("email")
                                 ?.setFilterValue(event.target.value)
                         }
-                    className="max-w-sm mr-2"
+                        className="w-full pl-8"
                     />
+                    <Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
+                </div>
                 <Button
                     onClick={() => {
                         if (inviteUser) {
@@ -98,7 +101,7 @@ export function UsersDataTable<TData, TValue>({
                                                 : flexRender(
                                                       header.column.columnDef
                                                           .header,
-                                                      header.getContext()
+                                                      header.getContext(),
                                                   )}
                                         </TableHead>
                                     );
@@ -119,7 +122,7 @@ export function UsersDataTable<TData, TValue>({
                                         <TableCell key={cell.id}>
                                             {flexRender(
                                                 cell.column.columnDef.cell,
-                                                cell.getContext()
+                                                cell.getContext(),
                                             )}
                                         </TableCell>
                                     ))}

src/app/[orgId]/settings/components/Header.tsx

@@ -149,7 +149,7 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) {
                                 size="lg"
                                 role="combobox"
                                 aria-expanded={open}
-                                className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral"
+                                className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral hover:bg-muted"
                             >
                                 <div className="flex items-center justify-between w-full">
                                     <div className="flex flex-col items-start">

src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx

@@ -309,7 +309,7 @@ export default function ResourceAuthenticationPage() {
                 <section className="space-y-8">
                     <SettingsSectionTitle
                         title="Users & Roles"
-                        description="Configure which users can access this resource (only applicable if SSO enabled)"
+                        description="Configure which users and roles can visit this resource"
                         size="1xl"
                     />
 
@@ -320,11 +320,13 @@ export default function ResourceAuthenticationPage() {
                                 defaultChecked={resource.sso}
                                 onCheckedChange={(val) => setSsoEnabled(val)}
                             />
-                            <Label htmlFor="sso-toggle">Allow SSO</Label>
+                            <Label htmlFor="sso-toggle">
+                                Allow Unified Login
+                            </Label>
                         </div>
                         <span className="text-muted-foreground text-sm">
                             Existing users will only have to login once for all
-                            resources that have SSO enabled.
+                            resources that have this enabled.
                         </span>
                     </div>
 

src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx

@@ -24,7 +24,7 @@ import { Button } from "@app/components/ui/button";
 import { useState } from "react";
 import { Input } from "@app/components/ui/input";
 import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Plus } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 
 interface ResourcesDataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -62,19 +62,23 @@ export function ResourcesDataTable<TData, TValue>({
     return (
         <div>
             <div className="flex items-center justify-between pb-4">
+                <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search resources"
                         value={
-                        (table.getColumn("name")?.getFilterValue() as string) ??
+                            (table
-                        ""
+                                .getColumn("name")
+                                ?.getFilterValue() as string) ?? ""
                         }
                         onChange={(event) =>
                             table
                                 .getColumn("name")
                                 ?.setFilterValue(event.target.value)
                         }
-                    className="max-w-sm mr-2"
+                        className="w-full pl-8"
                     />
+                    <Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
+                </div>
                 <Button
                     onClick={() => {
                         if (addResource) {

src/app/[orgId]/settings/resources/components/ResourcesTable.tsx

@@ -35,6 +35,7 @@ export type ResourceRow = {
     orgId: string;
     domain: string;
     site: string;
+    siteId: string;
     hasAuth: boolean;
 };
 
@@ -106,7 +107,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
                 return (
                     <Button variant="outline">
                         <Link
-                            href={`/${resourceRow.orgId}/settings/sites/${resourceRow.site}`}
+                            href={`/${resourceRow.orgId}/settings/sites/${resourceRow.siteId}`}
                         >
                             {resourceRow.site}
                         </Link>
@@ -175,7 +176,19 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
         },
         {
             accessorKey: "hasAuth",
-            header: "Authentication",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Authentication
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
             cell: ({ row }) => {
                 const resourceRow = row.original;
                 return (

src/app/[orgId]/settings/resources/page.tsx

@@ -51,6 +51,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
             orgId: params.orgId,
             domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
             site: resource.siteName || "None",
+            siteId: resource.siteId || "Unknown",
             hasAuth:
                 resource.sso ||
                 resource.pincodeId !== null ||

src/app/[orgId]/settings/sites/components/SitesDataTable.tsx

@@ -24,7 +24,7 @@ import { Button } from "@app/components/ui/button";
 import { useState } from "react";
 import { Input } from "@app/components/ui/input";
 import { DataTablePagination } from "../../../../../components/DataTablePagination";
-import { Plus } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -62,19 +62,23 @@ export function SitesDataTable<TData, TValue>({
     return (
         <div>
             <div className="flex items-center justify-between pb-4">
+                <div className="flex items-center max-w-sm mr-2 w-full relative">
                     <Input
                         placeholder="Search sites"
                         value={
-                        (table.getColumn("name")?.getFilterValue() as string) ??
+                            (table
-                        ""
+                                .getColumn("name")
+                                ?.getFilterValue() as string) ?? ""
                         }
                         onChange={(event) =>
                             table
                                 .getColumn("name")
                                 ?.setFilterValue(event.target.value)
                         }
-                    className="max-w-sm mr-2"
+                        className="w-full pl-8"
                     />
+                    <Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
+                </div>
                 <Button
                     onClick={() => {
                         if (addSite) {
@@ -98,7 +102,7 @@ export function SitesDataTable<TData, TValue>({
                                                 : flexRender(
                                                       header.column.columnDef
                                                           .header,
-                                                      header.getContext()
+                                                      header.getContext(),
                                                   )}
                                         </TableHead>
                                     );
@@ -119,7 +123,7 @@ export function SitesDataTable<TData, TValue>({
                                         <TableCell key={cell.id}>
                                             {flexRender(
                                                 cell.column.columnDef.cell,
-                                                cell.getContext()
+                                                cell.getContext(),
                                             )}
                                         </TableCell>
                                     ))}

src/app/[orgId]/settings/sites/components/SitesTable.tsx

@@ -100,15 +100,51 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
         },
         {
             accessorKey: "mbIn",
-            header: "MB In",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Data In
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
         },
         {
             accessorKey: "mbOut",
-            header: "MB Out",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Data Out
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
         },
         {
             accessorKey: "type",
-            header: "Connection Type",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Connection Type
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
             cell: ({ row }) => {
                 const originalRow = row.original;