Skip to content

SSF-168 Dashboard stats component#132

Open
Juwang110 wants to merge 1 commit intomainfrom
jw/ssf-168-dashboard-stats-component
Open

SSF-168 Dashboard stats component#132
Juwang110 wants to merge 1 commit intomainfrom
jw/ssf-168-dashboard-stats-component

Conversation

@Juwang110
Copy link

ℹ️ Issue

Closes https://vidushimisra.atlassian.net/browse/SSF-168

📝 Description

Created a reusable dashboard stats component that will be used by all different dashboard types.

✔️ Verification

I temporarily made a new page with the component imported to verify the design matched figma

Screenshot 2026-03-16 122402

🏕️ (Optional) Future Work / Notes

N/A

Copy link
Collaborator

@sam-schu sam-schu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The spacing between the stat boxes looks too wide, and the font weight looks too thin

stats: Record<string, string>;
};

// Called like: <DashboardStats stats={{ Food Requests: '1200', Orders: '50', Items Received: '1000', Value Received: '$40',}}></DashboardStats>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think at least the multi-word keys in this example need quotes

const colors = ['blue.core', 'red', 'yellow.hover', 'teal.hover'];

return (
<SimpleGrid columns={4} gap={10} mx={8} my={4}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does this specify 4 columns, but the color mapping seems to be written to support any number of columns?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants