DashboardSupportWelcome

šŸ‘¤ USER DOCS

Getting Started

Daily Operations

Shift Workspace & TasksPre-Shift SetupLine-Up CardsShift ReportsForms

Staff & Locations

Staff SchedulingManaging Locations

Oversight

Manager ReportsAnalyticsPre-Shift & Compliance

Incidents & Feedback

Incident ReportingAnonymous FeedbackMessages & Announcements

AI & Settings

AI ChatgearApp Settings

Administration

Dashboard & OnboardingAdmin

āš™ļø DEVELOPER DOCS

Getting Started

Getting StartedDevelopmentDeployment Guide

Architecture

Architecture OverviewData FlowArchitecture Decision Records

Core Domain

Core DomainDatabase ReferenceLocations DomainAuth & RBACScheduling DomainReports DomainIncidents DomainNotifications DomainAudit Log & OptimizationDesign Audit Findings

Frontend

Frontend ArchitectureFormsLoading SkeletonsComponentsPWA & NotificationsimageScreenshots

API Reference

API Reference

Endpoints

POS Sales APIOptimization Data APISchedule Shifts APIEmployee Export APIReports APIIncidents APIAI Chat APIPush Notifications APIWebhooks APICron API

Contributing

ContributingcodeCode Examples

Security

Security & Compliance
Danvas IconDanvas
Danvas IconDanvas

Components

Custom components built on top of the design system

This page documents custom components that extend the base design system.

StarRating

The StarRating component displays rating values using the design system's ember color palette, replacing emoji-based stars for consistency and accessibility.

Usage

Loading Skeletons

Architecture pattern for loading states and skeleton components

PWA & Notifications

Installable mobile experience with real-time push alerts

On this page

StarRatingUsagePropsBehaviorDesign System ComplianceImplementationRelated ComponentsRelated
import { StarRating } from "@/components/star-rating";

// Display a 4 out of 5 rating
<StarRating value={4} />

// Display with custom max (e.g., 3 stars)
<StarRating value={2} max={3} />

// Display with custom className
<StarRating value={5} className="text-lg" />

Props

PropTypeDefaultDescription
valuenumber | null | undefined—Number of filled stars (0–5)
maxnumber5Total number of stars to render
classNamestring—Additional CSS classes

Behavior

  • Null/Zero Handling: If value is null, undefined, or 0, renders a dash (—) in muted foreground color
  • Clamping: Values are clamped between 0 and max
  • Rounding: Non-integer values are rounded to nearest integer
  • Design Tokens: Uses --ember color for filled stars, --muted-foreground for empty stars

Design System Compliance

This component addresses FINDING-007 from the design audit:

  • āœ… Uses Lucide StarIcon instead of emoji (⭐)
  • āœ… Applies design token text-ember for filled state
  • āœ… Applies text-muted-foreground/30 for empty state
  • āœ… Consistent sizing via size-3.5 (14px)
  • āœ… Fill state via fill-ember and fill-transparent

Implementation

// Location: apps/app/src/app/(authenticated)/reports/components/star-rating.tsx































Related Components

  • Badge: For status chips and category labels
  • Card: For containing rating displays in report cards

Related

Form Patterns

PWA & Offline

Design System

import { StarIcon } from "lucide-react";
import { cn } from "@repo/design-system/lib/utils";
interface StarRatingProps {
value: number | null | undefined;
max?: number;
className?: string;
}
export function StarRating({ value, max = 5, className }: StarRatingProps) {
const filled = Math.max(0, Math.min(Math.round(value ?? 0), max));
if (filled === 0) {
return <span className={cn("text-muted-foreground", className)}>—</span>;
}
return (
<span className={cn("inline-flex items-center gap-0.5", className)}>
{Array.from({ length: max }, (_, i) => (
<StarIcon
key={i}
className={cn(
"size-3.5",
i < filled
? "fill-ember text-ember"
: "fill-transparent text-muted-foreground/30"
)}
/>
))}
</span>
);
}