Scaffold React dashboard

npm create vite@latest dashboard -- --template react-ts
cd dashboard
npm install

Create React components for flag management

Create dashboard/src/components/FlagList.tsx:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

interface Flag {
  id: string;
  name: string;
  description: string;
  status: 'off' | 'on' | 'percentage' | 'rules';
  percentage_enabled: number;
  updated_at: string;
}

export function FlagList() {
  const [flags, setFlags] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchFlags = async () => {
      try {
        const response = await axios.get('/api/flags');
        setFlags(response.data.flags);
      } catch (err) {
        console.error('Failed to fetch flags:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchFlags();
  }, []);

  if (loading) return 
Loading...
;

  return (
    

      
Feature Flags
      
          {flags.map(flag => (
            
          ))}
        

        

          

            
Name
            
Status
            
Updated
            
Actions
          
        
        

              
{flag.name}
              
{flag.status}
              
{new Date(flag.updated_at).toLocaleDateString()}
              

                Edit
                Delete
              
            
      
    
  );
}