updating the layout based on the endpoints

src/pages/HomePage.tsx

@@ -11,9 +11,10 @@ import styles from "./HomePage.module.scss";
 
 type HomePageProps = {
   backendPreference: BackendPreference;
+  onNavigate: (path: string) => void;
 };
 
-export function HomePage({ backendPreference }: HomePageProps) {
+export function HomePage({ backendPreference, onNavigate }: HomePageProps) {
   const [companies, setCompanies] = useState<Company[]>([]);
   const [schedules, setSchedules] = useState<Schedule[]>([]);
   const [users, setUsers] = useState<Employee[]>([]);
@@ -77,18 +78,18 @@ export function HomePage({ backendPreference }: HomePageProps) {
       {error ? <p className={styles.error}>{error}</p> : null}
       {isLoading ? <p className={styles.muted}>Loading dashboard...</p> : null}
       <section className={styles.statsGrid} aria-label="Dashboard overview">
-        <article className={styles.card}>
+        <button className={styles.card} onClick={() => onNavigate("/users")} type="button">
           <span>Total users</span>
           <strong>{users.length}</strong>
-        </article>
-        <article className={styles.card}>
+        </button>
+        <button className={styles.card} onClick={() => onNavigate("/schedule")} type="button">
           <span>Working today</span>
           <strong>{workingToday}</strong>
-        </article>
-        <article className={styles.card}>
+        </button>
+        <button className={styles.card} onClick={() => onNavigate("/companies")} type="button">
           <span>Companies</span>
           <strong>{companies.length}</strong>
-        </article>
+        </button>
       </section>
     </>
   );