StoreHubWeb Kit

Reusable data display and feedback components for StoreHub POS, payments, loyalty, inventory, and merchant operations.

Stat

src/components/components/data/Stat.astro
  • data
  • metric
  • analytics
#

Today's sales

RM 8,420
12.4%Compared with yesterday
Usage
<Stat label="Today's sales" value="RM 8,420" />

Star rating

src/components/components/data/StarRating.astro
  • data
  • rating
  • reviews
#
Usage
<StarRating rating={4.8} reviewCount={326} />

Review badge

src/components/components/data/ReviewBadge.astro
  • data
  • badge
  • social-proof
#
4.8 from 326 StoreHub merchants
Usage
<ReviewBadge rating={4.8} reviewCount={326} />

Avatar

src/components/components/data/Avatar.astro
  • data
  • avatar
  • identity
#
Usage
<Avatar name="Aina Rahman" status="active" />

Avatar group

src/components/components/data/AvatarGroup.astro
  • data
  • avatar
  • team
#
  • +1
Usage
<AvatarGroup people={[...]} max={4} />

Table

src/components/components/data/Table.astro
  • data
  • table
  • reporting
#
Top-selling items today
ItemCategoryQty soldNet sales
Nasi Lemak SpecialMains84RM 1,092
Iced KopiBeverages71RM 426
Curry PuffSnacks46RM 207
Teh TarikBeverages39RM 234
Usage
<Table caption="Top-selling items today" columns={[...]} rows={[...]} />

Check list

src/components/components/data/CheckList.astro
  • data
  • list
  • features
#

Everything your outlet needs

  • Cloud POS with real-time sales reporting
  • Integrated card and QR payments
  • Customer loyalty and automated rewards
  • Ingredient-level inventory tracking
Usage
<CheckList title="Everything your outlet needs" items={[...]} />

Timeline

src/components/components/data/Timeline.astro
  • data
  • timeline
  • onboarding
#

Your StoreHub rollout

  1. Business setup

    Menu, outlets, and staff access configured.

  2. Team training

    Your team learns POS, payments, and daily closing.

  3. Go live

    Start selling with local support on standby.

Usage
<Timeline title="Your StoreHub rollout" events={[...]} />

Progress bar

src/components/components/data/ProgressBar.astro
  • data
  • progress
  • goal
#
72%

RM 36,000 of RM 50,000

Usage
<ProgressBar value={72} label="Monthly sales goal" />

Chip

src/components/components/data/Chip.astro
  • data
  • chip
  • filter
#
Low stock
Usage
<Chip label="Low stock" icon="package-search" />

Accordion

src/components/components/data/Accordion.astro
  • data
  • accordion
  • disclosure
#
Can StoreHub support multiple outlets?

Yes. View sales, staff activity, menu changes, and inventory across every outlet from one dashboard.

Which payments can I accept?

Accept cards, QR payments, and other supported local methods through an integrated checkout flow.

Does loyalty work with the POS?

Yes. Customer profiles, points, rewards, and purchase history stay connected to each transaction.

Usage
<Accordion items={[...]} openIndex={0} />