Loyaly/loyaly-merchant
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

dashboard design changes

Browse Source
This commit is contained in:
Aravind
2026-08-05 18:34:37 +05:30
parent 2c8c394795
commit 9d7bbad32c
92 changed files with 5104 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/features/lyts/RewardCard.tsx
View File

@@ -38,8 +38,8 @@ export function RewardCard({reward, nowMs}: {reward: Reward; nowMs: number}) {
title={reward.name}
subtitle={
<HStack gap={1.5} vAlign="center">
<Icon icon={ICONS.lyt} size="xsm" color="secondary" />
<Text size="sm" color="secondary">
<Icon icon={ICONS.lyt} size="sm" color="secondary" />
<Text size="base" weight="medium">
{formatLyt(reward.costLyt)}
</Text>
</HStack>
@@ -47,7 +47,7 @@ export function RewardCard({reward, nowMs}: {reward: Reward; nowMs: number}) {
actions={<Badge variant={status.variant} label={status.label} />}
/>
<VStack gap={1.5}>
<VStack gap={2}>
<ProgressBar
value={rate}
max={100}
@@ -55,10 +55,10 @@ export function RewardCard({reward, nowMs}: {reward: Reward; nowMs: number}) {
hasValueLabel={false}
/>
<HStack hAlign="between">
<Text size="xsm" color="secondary">
<Text size="sm" weight="medium">
{formatCompact(reward.used)} redeemed
</Text>
<Text size="xsm" color="secondary">
<Text size="sm" weight="medium">
{formatCompact(reward.claimed)} claimed
</Text>
</HStack>

31
src/features/lyts/RewardPerformanceTable.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import {Table, proportional, pixel} from '@astryxdesign/core/Table';
import {proportional, pixel} from '@astryxdesign/core/Table';
import {ResponsiveTable} from '@/components/patterns/ResponsiveTable';
import type {TableColumn} from '@astryxdesign/core/Table';
import {Badge} from '@astryxdesign/core/Badge';
import {Text} from '@astryxdesign/core/Text';
@@ -45,7 +46,7 @@ export function RewardPerformanceTable({
width: proportional(2),
renderCell: (row) => (
<HStack gap={2} vAlign="center">
<Text size="sm" weight="medium">
<Text size="base" weight="semibold">
{row.name}
</Text>
<Badge
@@ -58,44 +59,42 @@ export function RewardPerformanceTable({
{
key: 'costLyt',
header: 'Cost',
width: pixel(96),
width: pixel(104),
align: 'end',
renderCell: (row) => <Text size="sm">{formatLyt(row.costLyt)}</Text>,
renderCell: (row) => <Text size="base" weight="medium">{formatLyt(row.costLyt)}</Text>,
},
{
key: 'claimed',
header: 'Claimed',
width: pixel(96),
width: pixel(104),
align: 'end',
renderCell: (row) => <Text size="sm">{formatCompact(row.claimed)}</Text>,
renderCell: (row) => <Text size="base" weight="medium">{formatCompact(row.claimed)}</Text>,
},
{
key: 'used',
header: 'Redeemed',
width: pixel(104),
width: pixel(112),
align: 'end',
renderCell: (row) => <Text size="sm">{formatCompact(row.used)}</Text>,
renderCell: (row) => <Text size="base" weight="medium">{formatCompact(row.used)}</Text>,
},
{
key: 'rate',
header: 'Rate',
width: pixel(104),
width: pixel(112),
align: 'end',
// Measured against a 50% house benchmark, so the arrow says "better or
// worse than a reward should do" rather than "up or down since when?".
renderCell: (row) => (
<HStack hAlign="end">
<MetricDelta value={row.rate - 50} isRiseGood size="xsm" />
<MetricDelta value={row.rate - 50} isRiseGood size="sm" />
</HStack>
),
},
{
key: 'outstanding',
header: 'Outstanding',
width: pixel(128),
width: pixel(140),
align: 'end',
renderCell: (row) => (
<Text size="sm">{formatLyt(row.outstanding)}</Text>
<Text size="base" weight="semibold">{formatLyt(row.outstanding)}</Text>
),
},
];
@@ -129,12 +128,12 @@ export function RewardPerformanceTable({
.sort((a, b) => b.rate - a.rate);
return (
<Table
<ResponsiveTable
data={rows}
columns={columns}
idKey="id"
primaryKey="name"
density="compact"
hasHover
/>
);
}}