mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-30 14:57:59 +00:00
zooqueen
bdda53d52e
SuperJSON carries typed values, not bytes: a FormData serialised to `{}`, so
an upload route received no payload. The transport now reads a File into
bytes on the way out and rebuilds it on the way in, so a route parses the
same FormData it received over HTTP — one encoding for all six upload
callsites, none of their own.
The editor's add-items failure now reports itself instead of only marking
the file card.
One PageHeader owns the page title and the single gap to its description,
replacing the hand-rolled title blocks; SettingsHeader takes the same gap,
which was zero on mobile.
263 lines
11 KiB
TypeScript
263 lines
11 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { Plural, Trans, useLingui } from '@lingui/react/macro';
|
|
import { Building2Icon, InboxIcon, SettingsIcon, UsersIcon } from 'lucide-react';
|
|
import { DateTime } from 'luxon';
|
|
import { Link, redirect } from 'react-router';
|
|
|
|
import { useSession } from '@hanzo/esign-lib/client-only/providers/session';
|
|
import { ORGANISATION_MEMBER_ROLE_MAP } from '@hanzo/esign-lib/constants/organisations-translations';
|
|
import { TEAM_MEMBER_ROLE_MAP } from '@hanzo/esign-lib/constants/teams-translations';
|
|
import { formatAvatarUrl } from '@hanzo/esign-lib/utils/avatars';
|
|
import { canExecuteOrganisationAction } from '@hanzo/esign-lib/utils/organisations';
|
|
import { canExecuteTeamAction } from '@hanzo/esign-lib/utils/teams';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@hanzo/esign-ui/primitives/avatar';
|
|
import { Button } from '@hanzo/esign-ui/primitives/button';
|
|
import { Card, CardContent } from '@hanzo/esign-ui/primitives/card';
|
|
import { ScrollArea, ScrollBar } from '@hanzo/esign-ui/primitives/scroll-area';
|
|
|
|
import { OrganisationInvitations } from '~/components/general/organisations/organisation-invitations';
|
|
import { PageHeader } from '~/components/general/page-header';
|
|
import { InboxTable } from '~/components/tables/inbox-table';
|
|
import { appMetaTags } from '~/utils/meta';
|
|
|
|
export function loader() {
|
|
throw redirect('/');
|
|
}
|
|
|
|
export function meta() {
|
|
return appMetaTags('Dashboard');
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { t } = useLingui();
|
|
|
|
const { user, organisations } = useSession();
|
|
|
|
// Todo: Sort by recent access (TBD by cookies)
|
|
// Teams, flattened with the organisation data still attached.
|
|
const teams = useMemo(() => {
|
|
return organisations.flatMap((org) =>
|
|
org.teams.map((team) => ({
|
|
...team,
|
|
organisation: {
|
|
...org,
|
|
teams: undefined,
|
|
},
|
|
})),
|
|
);
|
|
}, [organisations]);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
|
|
<div className="container">
|
|
<div className="mb-8">
|
|
<PageHeader
|
|
title={<Trans>Dashboard</Trans>}
|
|
description={<Trans>Welcome back! Here's an overview of your account.</Trans>}
|
|
/>
|
|
|
|
<OrganisationInvitations className="mt-4" />
|
|
</div>
|
|
|
|
{organisations.length === 0 && (
|
|
<div className="mb-12 mt-6 flex flex-col items-center justify-center rounded-lg border py-32">
|
|
<Building2Icon className="h-10 w-10" />
|
|
|
|
<div className="mt-2 flex flex-col items-center gap-0.5">
|
|
<p className="font-semibold">
|
|
<Trans>No organisations found</Trans>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
<Trans>Create an organisation to get started.</Trans>
|
|
</p>
|
|
</div>
|
|
|
|
<Button asChild className="mt-4" variant="outline">
|
|
<Link to="/settings/organisations?action=add-organisation">
|
|
<Trans>Create organisation</Trans>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Organisations Section */}
|
|
{organisations.length > 1 && (
|
|
<div className="mb-8">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Building2Icon className="h-5 w-5 text-muted-foreground" />
|
|
<h2 className="text-xl font-semibold">
|
|
<Trans>Organisations</Trans>
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Right hand side action if required. */}
|
|
{/* <Button variant="outline" size="sm" className="gap-1">
|
|
<PlusIcon className="h-4 w-4" />
|
|
<Trans>New</Trans>
|
|
</Button> */}
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{organisations.map((org) => (
|
|
<div key={org.id} className="group relative">
|
|
<Link to={`/o/${org.url}`}>
|
|
<Card className="h-full border pr-6 transition-all hover:bg-muted/50">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-10 w-10 border border-solid">
|
|
{org.avatarImageId && (
|
|
<AvatarImage src={formatAvatarUrl(org.avatarImageId)} />
|
|
)}
|
|
<AvatarFallback className="text-sm text-gray-400">
|
|
{org.name.slice(0, 1).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">{org.name}</h3>
|
|
<div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
<UsersIcon className="h-3 w-3" />
|
|
<span>
|
|
{org.ownerUserId === user.id
|
|
? t`Owner`
|
|
: t(ORGANISATION_MEMBER_ROLE_MAP[org.currentOrganisationRole])}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Building2Icon className="h-3 w-3" />
|
|
<span>
|
|
<Plural
|
|
value={org.teams.length}
|
|
one={<Trans># team</Trans>}
|
|
other={<Trans># teams</Trans>}
|
|
/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
{canExecuteOrganisationAction(
|
|
'MANAGE_ORGANISATION',
|
|
org.currentOrganisationRole,
|
|
) && (
|
|
<div className="absolute right-4 top-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
|
|
<Link to={`/o/${org.url}/settings`}>
|
|
<SettingsIcon className="h-4 w-4" />
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Teams Section */}
|
|
{teams.length >= 1 && (
|
|
<div className="mb-8">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<UsersIcon className="h-5 w-5 text-muted-foreground" />
|
|
<h2 className="text-xl font-semibold">
|
|
<Trans>Teams</Trans>
|
|
</h2>
|
|
</div>
|
|
{/* <Button variant="ghost" size="sm" asChild>
|
|
<Link to="/" className="gap-1">
|
|
<Trans>View all</Trans>
|
|
<ChevronRightIcon className="h-4 w-4" />
|
|
</Link>
|
|
</Button> */}
|
|
</div>
|
|
|
|
<ScrollArea className="w-full whitespace-nowrap pb-4">
|
|
<div className="flex gap-4">
|
|
{teams.map((team) => (
|
|
<div key={team.id} className="group relative">
|
|
<Link to={`/t/${team.url}`}>
|
|
<Card className="w-[350px] shrink-0 border transition-all hover:bg-muted/50">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-10 w-10 border border-solid">
|
|
{team.avatarImageId && (
|
|
<AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
|
|
)}
|
|
<AvatarFallback className="text-sm text-gray-400">
|
|
{team.name.slice(0, 1).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">{team.name}</h3>
|
|
<div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
<UsersIcon className="h-3 w-3" />
|
|
{team.organisation.ownerUserId === user.id
|
|
? t`Owner`
|
|
: t(TEAM_MEMBER_ROLE_MAP[team.currentTeamRole])}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Building2Icon className="h-3 w-3" />
|
|
<span className="truncate">{team.organisation.name}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 text-xs text-muted-foreground">
|
|
<Trans>
|
|
Joined{' '}
|
|
{DateTime.fromJSDate(team.createdAt).toRelative({ style: 'short' })}
|
|
</Trans>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
|
|
{canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
|
|
<div className="absolute right-4 top-4 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
|
|
<Link to={`/t/${team.url}/settings`}>
|
|
<SettingsIcon className="h-4 w-4" />
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
</div>
|
|
)}
|
|
|
|
{/* Inbox Section */}
|
|
<div>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<InboxIcon className="h-5 w-5 text-muted-foreground" />
|
|
<h2 className="text-xl font-semibold">
|
|
<Trans>Personal Inbox</Trans>
|
|
</h2>
|
|
</div>
|
|
{/* <Button variant="ghost" size="sm" asChild>
|
|
<Link to="/inbox" className="gap-1">
|
|
<span>
|
|
<Trans>View all</Trans>
|
|
</span>
|
|
<ChevronRightIcon className="h-4 w-4" />
|
|
</Link>
|
|
</Button> */}
|
|
</div>
|
|
|
|
<InboxTable />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|