improve formatting in data tables

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">
-                <Input
-                    placeholder="Search resources"
-                    value={
-                        (table.getColumn("name")?.getFilterValue() as string) ??
-                        ""
-                    }
-                    onChange={(event) =>
-                        table
-                            .getColumn("name")
-                            ?.setFilterValue(event.target.value)
-                    }
-                    className="max-w-sm mr-2"
-                />
+                <div className="flex items-center max-w-sm mr-2 w-full relative">
+                    <Input
+                        placeholder="Search resources"
+                        value={
+                            (table
+                                .getColumn("name")
+                                ?.getFilterValue() as string) ?? ""
+                        }
+                        onChange={(event) =>
+                            table
+                                .getColumn("name")
+                                ?.setFilterValue(event.target.value)
+                        }
+                        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 ||