src/components/reports/ReportControls.svelte

svelte
<script>
  export let dateRange = 'this-month';
  
  const ranges = [
    { value: 'today', label: 'Today' },
    { value: 'this-week', label: 'This Week' },
    { value: 'this-month', label: 'This Month' },
    { value: 'this-year', label: 'This Year' },
    { value: 'custom', label: 'Custom Range' }
  ];
</script>

<div class="card flex items-center space-x-4">
  <div>
    <label for="dateRange" class="block text-sm font-medium text-slate-700 mb-1">Date Range</label>
    <select
      id="dateRange"
      bind:value={dateRange}
      class="input-field"
    >
      {#each ranges as range}
        <option value={range.value}>{range.label}</option>
      {/each}
    </select>
  </div>
  
  {#if dateRange === 'custom'}
    <div>
      <label for="startDate" class="block text-sm font-medium text-slate-700 mb-1">From</label>
      <input
        id="startDate"
        type="date"
        class="input-field"
      />
    </div>
    
    <div>
      <label for="endDate" class="block text-sm font-medium text-slate-700 mb-1">To</label>
      <input
        id="endDate"
        type="date"
        class="input-field"
      />
    </div>
  {/if}
</div>

</html>