Hanzo AI
d4f4071ee4
Drop the dual-licensed `ee/` tree entirely. All features previously
locked behind the Hanzo Dataroom Commercial License are now part of the
AGPL-3.0 core and freely available — custom domains, branded viewing,
advanced analytics, watermarks, access controls, Q&A, AI vector stores,
workflows, SAML SSO, dataroom invitations, conversations, templates.
Layout changes:
* `ee/features/{ai,conversations,workflows,permissions,storage,templates,
dataroom-invitations,access-notifications,security,conversions}/` →
`features/<name>/` (AGPL).
* `ee/limits/` → `lib/billing/limits/` with every plan resolving to an
unlimited profile (no users/links/documents/domains/datarooms cap,
conversations and watermarks always on).
* `ee/stripe/` → `lib/billing/legacy/` (already a compat shim over
`@hanzoai/commerce`; renewal-reminder webhook is now a no-op).
* `ee/features/billing/cancellation/` deleted. Pause/unpause/cancel/
retention routes now compile against `lib/billing/cancellation.ts`
stubs that return 410 Gone; `isTeamPaused`/`isTeamPausedById` in
`lib/billing/paused.ts` always report active. `CancellationModal` is
a no-op shim in `components/billing/`.
* `app/(ee)/api/*` route group folded into `app/api/*` (SAML auth,
SCIM, AI chat, workflows, FAQ, link-upload).
Build: `npm run build` green.
382 lines
12 KiB
TypeScript
382 lines
12 KiB
TypeScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { useTeam } from "@/context/team-context";
|
|
import { PlanEnum } from "@/lib/billing/legacy/constants";
|
|
import {
|
|
ColumnDef,
|
|
SortingState,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getPaginationRowModel,
|
|
getSortedRowModel,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
import { format } from "date-fns";
|
|
import {
|
|
AlertTriangleIcon,
|
|
BadgeCheckIcon,
|
|
ChevronDownIcon,
|
|
ChevronUpIcon,
|
|
ChevronsUpDownIcon,
|
|
Download,
|
|
UserIcon,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import useSWR from "swr";
|
|
|
|
import { usePlan } from "@/lib/swr/use-billing";
|
|
import { durationFormat, fetcher, timeAgo } from "@/lib/utils";
|
|
import { downloadCSV } from "@/lib/utils/csv";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { BadgeTooltip } from "@/components/ui/tooltip";
|
|
import { DataTablePagination } from "@/components/visitors/data-table-pagination";
|
|
import { VisitorAvatar } from "@/components/visitors/visitor-avatar";
|
|
|
|
import { UpgradeButton } from "../ui/upgrade-button";
|
|
|
|
interface Visitor {
|
|
email: string;
|
|
viewerId: string | null;
|
|
totalViews: number;
|
|
lastActive: Date;
|
|
uniqueDocuments: number;
|
|
verified: boolean;
|
|
totalDuration: number;
|
|
viewerName?: string | null;
|
|
}
|
|
|
|
const columns: ColumnDef<Visitor>[] = [
|
|
{
|
|
accessorKey: "email",
|
|
header: "Visitor",
|
|
cell: ({ row }) => (
|
|
<div className="flex items-center overflow-visible sm:space-x-3">
|
|
<VisitorAvatar viewerEmail={row.original.email} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="focus:outline-none">
|
|
<p className="flex items-center gap-x-2 overflow-visible text-sm font-medium text-gray-800 dark:text-gray-200">
|
|
{row.original.viewerName || row.original.email}{" "}
|
|
{row.original.verified && (
|
|
<BadgeTooltip content="Verified visitor">
|
|
<BadgeCheckIcon className="h-4 w-4 text-emerald-500 hover:text-emerald-600" />
|
|
</BadgeTooltip>
|
|
)}
|
|
</p>
|
|
{row.original.viewerName && row.original.email && (
|
|
<p className="text-xs text-muted-foreground/60">
|
|
{row.original.email}
|
|
</p>
|
|
)}
|
|
<p className="text-sm text-muted-foreground">
|
|
{row.original.uniqueDocuments} document
|
|
{row.original.uniqueDocuments !== 1 ? "s" : ""} viewed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "totalViews",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
className={
|
|
column.getIsSorted()
|
|
? "text-nowrap font-medium"
|
|
: "text-nowrap font-normal"
|
|
}
|
|
>
|
|
Total Views
|
|
{column.getIsSorted() === "asc" ? (
|
|
<ChevronUpIcon className="ml-2 h-4 w-4" />
|
|
) : column.getIsSorted() === "desc" ? (
|
|
<ChevronDownIcon className="ml-2 h-4 w-4" />
|
|
) : (
|
|
<ChevronsUpDownIcon className="ml-2 h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<div className="text-sm text-muted-foreground">
|
|
{row.original.totalViews}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "totalDuration",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
className={
|
|
column.getIsSorted()
|
|
? "text-nowrap font-medium"
|
|
: "text-nowrap font-normal"
|
|
}
|
|
>
|
|
Total Time Spent
|
|
{column.getIsSorted() === "asc" ? (
|
|
<ChevronUpIcon className="ml-2 h-4 w-4" />
|
|
) : column.getIsSorted() === "desc" ? (
|
|
<ChevronDownIcon className="ml-2 h-4 w-4" />
|
|
) : (
|
|
<ChevronsUpDownIcon className="ml-2 h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<div className="text-sm text-muted-foreground">
|
|
{durationFormat(row.original.totalDuration)}
|
|
</div>
|
|
),
|
|
},
|
|
// {
|
|
// accessorKey: "avgCompletionRate",
|
|
// header: ({ column }) => {
|
|
// return (
|
|
// <Button
|
|
// variant="ghost"
|
|
// onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
// className={
|
|
// column.getIsSorted()
|
|
// ? "text-nowrap font-medium"
|
|
// : "text-nowrap font-normal"
|
|
// }
|
|
// >
|
|
// Avg. Completion
|
|
// {column.getIsSorted() === "asc" ? (
|
|
// <ChevronUpIcon className="ml-2 h-4 w-4" />
|
|
// ) : column.getIsSorted() === "desc" ? (
|
|
// <ChevronDownIcon className="ml-2 h-4 w-4" />
|
|
// ) : (
|
|
// <ChevronsUpDownIcon className="ml-2 h-4 w-4" />
|
|
// )}
|
|
// </Button>
|
|
// );
|
|
// },
|
|
// cell: ({ row }) => (
|
|
// <div className="flex justify-start text-sm text-muted-foreground">
|
|
// <Gauge
|
|
// value={row.original.avgCompletionRate}
|
|
// size="small"
|
|
// showValue={true}
|
|
// />
|
|
// </div>
|
|
// ),
|
|
// },
|
|
{
|
|
accessorKey: "lastActive",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
className={
|
|
column.getIsSorted()
|
|
? "text-nowrap font-medium"
|
|
: "text-nowrap font-normal"
|
|
}
|
|
>
|
|
Last Active
|
|
{column.getIsSorted() === "asc" ? (
|
|
<ChevronUpIcon className="ml-2 h-4 w-4" />
|
|
) : column.getIsSorted() === "desc" ? (
|
|
<ChevronDownIcon className="ml-2 h-4 w-4" />
|
|
) : (
|
|
<ChevronsUpDownIcon className="ml-2 h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<div className="text-sm text-muted-foreground">
|
|
{timeAgo(row.original.lastActive)}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function VisitorsTable({
|
|
startDate,
|
|
endDate,
|
|
}: {
|
|
startDate: Date;
|
|
endDate: Date;
|
|
}) {
|
|
const router = useRouter();
|
|
const teamInfo = useTeam();
|
|
const { isTrial, isFree, isPaused } = usePlan();
|
|
const { interval = "7d" } = router.query;
|
|
const [sorting, setSorting] = useState<SortingState>([
|
|
{ id: "lastActive", desc: true },
|
|
]);
|
|
|
|
const { data } = useSWR<{ visitors: Visitor[]; hiddenFromPause: number }>(
|
|
teamInfo?.currentTeam?.id
|
|
? `/api/analytics?type=visitors&interval=${interval}&teamId=${teamInfo.currentTeam.id}${interval === "custom" ? `&startDate=${format(startDate, "MM-dd-yyyy")}&endDate=${format(endDate, "MM-dd-yyyy")}` : ""}`
|
|
: null,
|
|
fetcher,
|
|
{
|
|
keepPreviousData: true,
|
|
revalidateOnFocus: false,
|
|
},
|
|
);
|
|
|
|
const visitors = data?.visitors;
|
|
const hiddenFromPause = data?.hiddenFromPause ?? 0;
|
|
|
|
const table = useReactTable({
|
|
data: visitors || [],
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
onSortingChange: setSorting,
|
|
getSortedRowModel: getSortedRowModel(),
|
|
state: {
|
|
sorting,
|
|
},
|
|
});
|
|
|
|
const handleExport = () => {
|
|
if (isFree && !isTrial) {
|
|
toast.error("Please upgrade to export data");
|
|
return;
|
|
}
|
|
|
|
if (!visitors?.length) {
|
|
toast.error("No data to export");
|
|
return;
|
|
}
|
|
|
|
const exportData = visitors.map((visitor) => ({
|
|
Email: visitor.email,
|
|
"Total Views": visitor.totalViews,
|
|
"Unique Documents": visitor.uniqueDocuments,
|
|
"Total Duration": durationFormat(visitor.totalDuration),
|
|
"Last Active": new Date(visitor.lastActive).toISOString(),
|
|
Verified: visitor.verified ? "Yes" : "No",
|
|
}));
|
|
|
|
downloadCSV(exportData, "visitors");
|
|
};
|
|
|
|
const UpgradeOrExportButton = () => {
|
|
if (isFree && !isTrial) {
|
|
return (
|
|
<UpgradeButton
|
|
text="Export"
|
|
clickedPlan={PlanEnum.Pro}
|
|
trigger="dashboard_visitors_export"
|
|
variant="outline"
|
|
size="sm"
|
|
/>
|
|
);
|
|
} else {
|
|
return (
|
|
<Button variant="outline" size="sm" onClick={handleExport}>
|
|
<Download className="!size-4" />
|
|
Export
|
|
</Button>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{isPaused && hiddenFromPause > 0 && (
|
|
<div className="flex flex-col items-start justify-center gap-2 rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-950 sm:flex-row sm:items-center">
|
|
<span className="flex items-center gap-x-1 text-sm">
|
|
<AlertTriangleIcon className="inline-block h-4 w-4 text-orange-500" />
|
|
{hiddenFromPause} view{hiddenFromPause !== 1 ? "s" : ""} occurred
|
|
after your team was paused and{" "}
|
|
{hiddenFromPause !== 1 ? "are" : "is"} hidden.{" "}
|
|
</span>
|
|
<Link
|
|
href="/settings/billing"
|
|
className="text-sm font-medium text-orange-600 underline hover:text-orange-700"
|
|
>
|
|
Unpause subscription to see all views
|
|
</Link>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-end">
|
|
<UpgradeOrExportButton />
|
|
</div>
|
|
<div className="overflow-x-auto rounded-xl border">
|
|
<Table>
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<TableHead key={header.id} className="px-0 first:px-4">
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext(),
|
|
)}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{table.getRowModel().rows?.length ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<TableRow
|
|
key={row.id}
|
|
data-state={row.getIsSelected() && "selected"}
|
|
>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell key={cell.id}>
|
|
{flexRender(
|
|
cell.column.columnDef.cell,
|
|
cell.getContext(),
|
|
)}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={columns.length}
|
|
className="h-24 text-center"
|
|
>
|
|
<div className="flex w-full flex-col items-center justify-center gap-4 rounded-xl py-4">
|
|
<div className="hidden rounded-full sm:block">
|
|
<div className="rounded-full border border-white bg-gradient-to-t from-gray-100 p-1 md:p-3">
|
|
<UserIcon className="size-6" />
|
|
</div>
|
|
</div>
|
|
<p>No visitors in the last {interval}</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<DataTablePagination table={table} name="visitor" />
|
|
</div>
|
|
);
|
|
}
|