Skip to content

Commit

Permalink
empty states
Browse files Browse the repository at this point in the history
  • Loading branch information
@DonKoko
DonKoko committed Nov 14, 2023
1 parent b7a1951 commit cfadc3c
Show file tree
Hide file tree
Showing 8 changed files with 243 additions and 184 deletions.
79 changes: 42 additions & 37 deletions app/components/dashboard/assets-by-category-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { Color } from "@tremor/react";
import { DonutChart } from "@tremor/react";
import { ClientOnly } from "remix-utils/client-only";
import type { loader } from "~/routes/_layout+/dashboard";
import { EmptyState } from "./empty-state";
import { Badge, Button } from "../shared";
import { InfoTooltip } from "../shared/info-tooltip";

Expand All @@ -29,7 +30,7 @@ export default function AssetsByCategoryChart() {
return (
<ClientOnly fallback={null}>
{() => (
<div className="mb-4 w-full rounded border border-gray-200">
<div className="border border-gray-200">
<div className="flex items-center justify-between">
<div className="flex-1 border-b p-4 text-left text-[14px] font-semibold text-gray-900 md:px-6">
Assets by category (top 6)
Expand All @@ -48,45 +49,49 @@ export default function AssetsByCategoryChart() {
/>
</div>
</div>
<div className="p-8">
<div className="flex flex-col items-center gap-4 lg:flex-row lg:justify-between">
<DonutChart
className="mt-6 h-[240px] w-[240px] 2xl:h-[320px] 2xl:w-[320px]"
data={assetsByCategory}
category="assets"
index="category"
showAnimation={true}
animationDuration={400}
colors={chartColors}
/>
<div className="min-w-[140px]">
<ul className="flex flex-wrap items-center lg:block">
{assetsByCategory.map((cd, i) => (
<li className="my-1" key={cd.category}>
<Button
to={`/assets?category=${cd.id}`}
variant="link"
className="border text-gray-700 hover:text-gray-500"
>
<Badge color={correspondingChartColorsHex[i]} noBg>
<span className="text-gray-600">
<strong className="text-gray-900">
{cd.assets}
</strong>{" "}
{cd.category}
</span>
</Badge>
<div className="h-full p-8">
{assetsByCategory.length > 0 ? (
<div className="flex flex-col items-center gap-4 lg:flex-row lg:justify-between">
<DonutChart
className="mt-6 h-[240px] w-[240px] 2xl:h-[320px] 2xl:w-[320px]"
data={assetsByCategory}
category="assets"
index="category"
showAnimation={true}
animationDuration={400}
colors={chartColors}
/>
<div className="min-w-[140px]">
<ul className="flex flex-wrap items-center lg:block">
{assetsByCategory.map((cd, i) => (
<li className="my-1" key={cd.category}>
<Button
to={`/assets?category=${cd.id}`}
variant="link"
className="border text-gray-700 hover:text-gray-500"
>
<Badge color={correspondingChartColorsHex[i]} noBg>
<span className="text-gray-600">
<strong className="text-gray-900">
{cd.assets}
</strong>{" "}
{cd.category}
</span>
</Badge>
</Button>
</li>
))}
<li>
<Button to="/categories" variant="link">
See all
</Button>
</li>
))}
<li>
<Button to="/categories" variant="link">
See all
</Button>
</li>
</ul>
</ul>
</div>
</div>
</div>
) : (
<EmptyState text="No assets in database" />
)}
</div>
</div>
)}
Expand Down
77 changes: 41 additions & 36 deletions app/components/dashboard/assets-by-status-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useLoaderData } from "@remix-run/react";
import { DonutChart } from "@tremor/react";
import { ClientOnly } from "remix-utils/client-only";
import type { loader } from "~/routes/_layout+/dashboard";
import { EmptyState } from "./empty-state";
import { Badge } from "../shared";
import { InfoTooltip } from "../shared/info-tooltip";

Expand All @@ -13,7 +14,7 @@ export default function AssetsByStatusChart() {
return (
<ClientOnly fallback={null}>
{() => (
<div className="mb-4 w-full rounded border border-gray-200 ">
<div className="w-full border border-gray-200 ">
<div className="flex items-center justify-between">
<div className="flex-1 border-b p-4 text-left text-[14px] font-semibold text-gray-900 md:px-6">
Assets by status
Expand All @@ -32,42 +33,46 @@ export default function AssetsByStatusChart() {
/>
</div>
</div>
<div className="p-8">
<div className="flex flex-col items-center gap-4 lg:flex-row lg:justify-between">
<DonutChart
className="mt-6 h-[240px] w-[240px] 2xl:h-[320px] 2xl:w-[320px]"
data={chartData}
category="assets"
index="status"
colors={["green", "blue"]}
showAnimation={true}
animationDuration={400}
/>
<div className="min-w-[140px]">
<ul className="flex flex-wrap items-center lg:block">
<li>
<Badge color="#22c55e" noBg>
<span className="text-gray-600">
<strong className="text-gray-900">
{availableAssets}
</strong>{" "}
Available
</span>
</Badge>
</li>
<li>
<Badge color="#3b82f6" noBg>
<span className="text-gray-600">
<strong className="text-gray-900">
{inCustodyAssets}
</strong>{" "}
In Custody
</span>
</Badge>
</li>
</ul>
<div className="h-full p-8">
{chartData?.length > 0 ? (
<div className="flex flex-col items-center gap-4 lg:flex-row lg:justify-between">
<DonutChart
className="mt-6 h-[240px] w-[240px] 2xl:h-[320px] 2xl:w-[320px]"
data={chartData}
category="assets"
index="status"
colors={["green", "blue"]}
showAnimation={true}
animationDuration={400}
/>
<div className="min-w-[140px]">
<ul className="flex flex-wrap items-center lg:block">
<li>
<Badge color="#22c55e" noBg>
<span className="text-gray-600">
<strong className="text-gray-900">
{availableAssets}
</strong>{" "}
Available
</span>
</Badge>
</li>
<li>
<Badge color="#3b82f6" noBg>
<span className="text-gray-600">
<strong className="text-gray-900">
{inCustodyAssets}
</strong>{" "}
In Custody
</span>
</Badge>
</li>
</ul>
</div>
</div>
</div>
) : (
<EmptyState text="No assets in database" />
)}
</div>
</div>
)}
Expand Down
66 changes: 38 additions & 28 deletions app/components/dashboard/custodians.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import { useLoaderData } from "@remix-run/react";
import type { TeamMemberWithUser } from "~/modules/team-member/types";
import type { loader } from "~/routes/_layout+/dashboard";
import { EmptyState } from "./empty-state";
import { InfoTooltip } from "../shared/info-tooltip";
import { Table, Td, Th, Tr } from "../table";
import { Table, Td, Tr } from "../table";

export default function CustodiansList() {
const { custodiansData } = useLoaderData<typeof loader>();

return (
<Table className="rounded border border-gray-200">
<thead>
<tr>
<Th className="text-[14px] font-semibold text-gray-900 ">
<>
<div className="rounded-t border border-b-0 border-gray-200">
<div className="flex items-center justify-between">
<div className="flex-1 p-4 text-left text-[14px] font-semibold text-gray-900 md:px-6">
Custodians
</Th>
<Th className="text-right">
</div>
<div className=" p-4 text-right text-[14px] font-semibold text-gray-900 md:px-6">
<InfoTooltip
content={
<>
Expand All @@ -23,29 +24,38 @@ export default function CustodiansList() {
</>
}
/>
</Th>
</tr>
</thead>
<tbody>
{custodiansData.map((cd) => (
<Tr key={cd.id} className="h-[72px]">
{/**
* @TODO this needs to be resolved. Its because of the createdAt & updatedAt fields.
* We need a global solution for this as it happens everywhere
* @ts-ignore */}
<Row custodian={cd.custodian} count={cd.count} />
</Tr>
))}
{custodiansData.length < 5 &&
Array(5 - custodiansData.length)
.fill(null)
.map((i) => (
<Tr key={i} className="h-[72px]">
{""}
</div>
</div>
</div>

{custodiansData.length > 0 ? (
<Table className="h-full rounded border border-gray-200 p-8">
<tbody>
{custodiansData.map((cd) => (
<Tr key={cd.id} className="h-[72px]">
{/**
* @TODO this needs to be resolved. Its because of the createdAt & updatedAt fields.
* We need a global solution for this as it happens everywhere
* @ts-ignore */}
<Row custodian={cd.custodian} count={cd.count} />
</Tr>
))}
</tbody>
</Table>
{custodiansData.length < 5 &&
Array(5 - custodiansData.length)
.fill(null)
.map((_d, i) => (
<Tr key={i} className="h-[72px]">
{""}
</Tr>
))}
</tbody>
</Table>
) : (
<div className="h-full flex-1 rounded-b border border-gray-200 p-8">
<EmptyState text="No assets in custody" />
</div>
)}
</>
);
}

Expand Down
12 changes: 12 additions & 0 deletions app/components/dashboard/empty-state.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export function EmptyState({ text }: { text: string }) {
return (
<div className="flex h-full min-h-[200px] w-full flex-col items-center justify-center">
<img
src="/images/empty-state.svg"
alt="Empty state"
className="h-auto w-[45px]"
/>
<div className="text-center font-semibold text-gray-900">{text}</div>
</div>
);
}
59 changes: 34 additions & 25 deletions app/components/dashboard/most-scanned-assets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,22 @@ import type { Asset } from "@prisma/client";
import { useLoaderData } from "@remix-run/react";
import type { loader } from "~/routes/_layout+/dashboard";
import { userFriendlyAssetStatus } from "~/utils";
import { EmptyState } from "./empty-state";
import { AssetImage } from "../assets/asset-image";
import { Badge } from "../shared";
import { InfoTooltip } from "../shared/info-tooltip";
import { Th, Td, Table, Tr } from "../table";
import { Td, Table, Tr } from "../table";

export default function MostScannedAssets() {
const { mostScannedAssets } = useLoaderData<typeof loader>();
return (
<Table className="h-[420px] rounded border border-gray-200">
<thead>
<tr>
<Th className="text-[14px] font-semibold text-gray-900">
<>
<div className="rounded-t border border-b-0 border-gray-200">
<div className="flex items-center justify-between">
<div className="flex-1 p-4 text-left text-[14px] font-semibold text-gray-900 md:px-6">
Most scanned assets
</Th>
<Th className="text-right">
</div>
<div className=" p-4 text-right text-[14px] font-semibold text-gray-900 md:px-6">
<InfoTooltip
content={
<>
Expand All @@ -28,27 +29,35 @@ export default function MostScannedAssets() {
</>
}
/>
</Th>
</tr>
</thead>
<tbody>
{mostScannedAssets.map((asset) => (
<Tr key={asset.id}>
{/* @TODO resolve this issue
</div>
</div>
</div>
{mostScannedAssets.length > 0 ? (
<Table className="rounded border border-gray-200">
<tbody>
{mostScannedAssets.map((asset) => (
<Tr key={asset.id}>
{/* @TODO resolve this issue
@ts-ignore */}
<Row item={asset} />
</Tr>
))}
{mostScannedAssets.length < 5 &&
Array(5 - mostScannedAssets.length)
.fill(null)
.map((i) => (
<Tr key={i} className="h-[72px]">
{""}
<Row item={asset} />
</Tr>
))}
</tbody>
</Table>
{mostScannedAssets.length < 5 &&
Array(5 - mostScannedAssets.length)
.fill(null)
.map((_d, i) => (
<Tr key={i} className="h-[72px]">
{""}
</Tr>
))}
</tbody>
</Table>
) : (
<div className="flex-1 rounded-b border border-gray-200 p-8">
<EmptyState text="No assets scans available" />
</div>
)}
</>
);
}

Expand Down
Loading

0 comments on commit cfadc3c

Please sign in to comment.