Dashboard: export the CSV date as ISO string in Wallets/users table, UI tweaks

Author: MananTank

apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { SearchIcon } from "lucide-react";
+import { SearchIcon, XIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-
 import type { SearchType } from "./types";
 
 export function AdvancedSearchInput(props: {
@@ -41,56 +41,57 @@ export function AdvancedSearchInput(props: {
   };
 
   return (
-    <div className="flex flex-col gap-2">
-      <div className="flex gap-2">
-        <Select
-          value={searchType}
-          onValueChange={(value) => setSearchType(value as SearchType)}
-        >
-          <SelectTrigger className="w-[140px] bg-card">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="email">Email</SelectItem>
-            <SelectItem value="phone">Phone</SelectItem>
-            <SelectItem value="id">ID</SelectItem>
-            <SelectItem value="address">Address</SelectItem>
-            <SelectItem value="externalWallet">External Wallet</SelectItem>
-          </SelectContent>
-        </Select>
+    <div className="flex flex-col md:flex-row gap-3">
+      <Select
+        value={searchType}
+        onValueChange={(value) => setSearchType(value as SearchType)}
+      >
+        <SelectTrigger className="w-[140px] bg-card">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="email">Email</SelectItem>
+          <SelectItem value="phone">Phone</SelectItem>
+          <SelectItem value="id">ID</SelectItem>
+          <SelectItem value="address">Address</SelectItem>
+          <SelectItem value="externalWallet">External Wallet</SelectItem>
+        </SelectContent>
+      </Select>
 
+      <div className="flex flex-1">
         <div className="relative flex-1">
           <Input
-            className="bg-card pl-9"
+            className="bg-card pl-9 border-r-0 rounded-r-none"
             placeholder={`Search by ${searchType}...`}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}
           />
           <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
+
+          {props.hasResults && (
+            <div className="absolute top-1/2 -translate-y-1/2 right-2 ">
+              <Button
+                variant="ghost"
+                onClick={handleClear}
+                className="p-1 h-auto"
+              >
+                <XIcon className="size-4 text-muted-foreground" />
+              </Button>
+            </div>
+          )}
         </div>
 
         <Button
           onClick={handleSearch}
+          variant="outline"
           disabled={!query.trim() || props.isLoading}
-          size="sm"
+          className="rounded-l-none gap-2 bg-card disabled:opacity-100"
         >
-          {props.isLoading ? "Searching..." : "Search"}
+          {props.isLoading && <Spinner className="size-4" />}
+          Search
         </Button>
       </div>
-
-      {props.hasResults && (
-        <div className="flex justify-center">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleClear}
-            className="gap-2"
-          >
-            Clear Search & Return to List
-          </Button>
-        </div>
-      )}
     </div>
   );
 }

apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx

@@ -12,6 +12,7 @@ import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
+  ToolTipLabel,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -21,6 +22,7 @@ import {
   useAllEmbeddedWallets,
   useEmbeddedWallets,
 } from "@/hooks/useEmbeddedWallets";
+import { CopyTextButton } from "../ui/CopyTextButton";
 import { AdvancedSearchInput } from "./AdvancedSearchInput";
 import { SearchResults } from "./SearchResults";
 import { searchUsers } from "./searchUsers";
@@ -57,7 +59,24 @@ export function InAppWalletUsersPageContent(
       columnHelper.accessor("linkedAccounts", {
         cell: (cell) => {
           const identifier = getUserIdentifier(cell.getValue());
-          return <span className="text-sm">{identifier}</span>;
+
+          if (!identifier) {
+            return "N/A";
+          }
+
+          return (
+            <CopyTextButton
+              textToShow={
+                identifier.length > 30
+                  ? `${identifier.slice(0, 30)}...`
+                  : identifier
+              }
+              textToCopy={identifier}
+              tooltip="Copy User Identifier"
+              copyIconPosition="left"
+              variant="ghost"
+            />
+          );
         },
         enableColumnFilter: true,
         header: "User Identifier",
@@ -77,7 +96,7 @@ export function InAppWalletUsersPageContent(
         cell: (cell) => {
           const externalWallets = getExternalWallets(cell.getValue());
           if (externalWallets.length === 0) {
-            return <span className="text-muted-foreground text-xs">None</span>;
+            return <span className="text-muted-foreground text-sm">None</span>;
           }
           return (
             <div className="space-y-1">
@@ -111,9 +130,14 @@ export function InAppWalletUsersPageContent(
             return;
           }
           return (
-            <span className="text-sm">
-              {format(new Date(value), "MMM dd, yyyy")}
-            </span>
+            <ToolTipLabel
+              label={format(new Date(value), "MMM dd, yyyy 'at' h:mm:ss a zzz")}
+              hoverable
+            >
+              <span className="text-sm">
+                {format(new Date(value), "MMM dd, yyyy")}
+              </span>
+            </ToolTipLabel>
           );
         },
         header: "Created",
@@ -215,7 +239,7 @@ export function InAppWalletUsersPageContent(
         return {
           address: row.wallets[0]?.address || "Uninitialized",
           created: row.wallets[0]?.createdAt
-            ? format(new Date(row.wallets[0].createdAt), "MMM dd, yyyy")
+            ? new Date(row.wallets[0].createdAt).toISOString()
             : "Wallet not created yet",
           external_wallets: externalWalletAddresses || "None",
           login_methods: row.linkedAccounts.map((acc) => acc.type).join(", "),
@@ -243,7 +267,7 @@ export function InAppWalletUsersPageContent(
       <div className="flex flex-col gap-4">
         {/* Top section */}
         <div className="flex flex-col gap-4">
-          <div className="flex items-center justify-end gap-3">
+          <div className="flex flex-col md:flex-row lg:items-center justify-end gap-3">
             <div className="w-full max-w-lg">
               <AdvancedSearchInput
                 onSearch={handleSearch}
@@ -253,10 +277,9 @@ export function InAppWalletUsersPageContent(
               />
             </div>
             <Button
-              className="gap-2"
+              className="gap-2 bg-card"
               disabled={wallets.length === 0 || isPending}
               onClick={downloadCSV}
-              size="sm"
               variant="outline"
             >
               {isPending && <Spinner className="size-4" />}