initial round of changes from Claude

app/Console/Commands/IngestWeatherData.php

@@ -0,0 +1,188 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Models\WeatherPeriod;
+use App\Models\WeatherReport;
+use Carbon\Carbon;
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\File;
+
+class IngestWeatherData extends Command
+{
+    /**
+     * @var string
+     */
+    protected $signature = 'weather:ingest
+                            {--date= : Import specific date only (YYYY-MM-DD)}
+                            {--type= : Import specific type only (hourly or weekly)}
+                            {--force : Re-import existing records}';
+
+    /**
+     * @var string
+     */
+    protected $description = 'Ingest weather JSON files from storage/app/private/weather/';
+
+    public function handle(): int
+    {
+        $basePath = storage_path('app/private/weather');
+
+        if (! File::isDirectory($basePath)) {
+            $this->error("Weather data directory not found: {$basePath}");
+
+            return self::FAILURE;
+        }
+
+        $dateFilter = $this->option('date');
+        $typeFilter = $this->option('type');
+        $force = $this->option('force');
+
+        $dateFolders = File::directories($basePath);
+
+        if ($dateFilter) {
+            $dateFolders = array_filter($dateFolders, fn ($dir) => basename($dir) === $dateFilter);
+        }
+
+        if (empty($dateFolders)) {
+            $this->warn('No date folders found to process.');
+
+            return self::SUCCESS;
+        }
+
+        $this->info('Starting weather data ingestion...');
+        $progressBar = $this->output->createProgressBar(count($dateFolders));
+
+        $totalImported = 0;
+        $totalSkipped = 0;
+
+        foreach ($dateFolders as $dateFolder) {
+            $date = basename($dateFolder);
+            $files = File::files($dateFolder);
+
+            foreach ($files as $file) {
+                $filename = $file->getFilename();
+
+                if (! str_ends_with($filename, '.json')) {
+                    continue;
+                }
+
+                $type = $this->getReportType($filename);
+
+                if ($type === null || ($typeFilter && $type !== $typeFilter)) {
+                    continue;
+                }
+
+                $reportedAt = $this->parseReportedAt($date, $filename);
+
+                $existingReport = WeatherReport::query()
+                    ->where('type', $type)
+                    ->where('reported_at', $reportedAt)
+                    ->first();
+
+                if ($existingReport && ! $force) {
+                    $totalSkipped++;
+
+                    continue;
+                }
+
+                $jsonContent = File::get($file->getPathname());
+                $data = json_decode($jsonContent, true);
+
+                if (! $data) {
+                    $this->warn("Failed to parse JSON: {$file->getPathname()}");
+
+                    continue;
+                }
+
+                if ($existingReport && $force) {
+                    $existingReport->delete();
+                }
+
+                $this->importReport($type, $reportedAt, $data);
+                $totalImported++;
+            }
+
+            $progressBar->advance();
+        }
+
+        $progressBar->finish();
+        $this->newLine(2);
+        $this->info("Imported: {$totalImported} reports, Skipped: {$totalSkipped} existing");
+
+        return self::SUCCESS;
+    }
+
+    private function getReportType(string $filename): ?string
+    {
+        if (str_starts_with($filename, 'hourly_')) {
+            return 'hourly';
+        }
+
+        if (str_starts_with($filename, 'weekly_')) {
+            return 'weekly';
+        }
+
+        return null;
+    }
+
+    private function parseReportedAt(string $date, string $filename): Carbon
+    {
+        preg_match('/(\d{2})-(\d{2})\.json$/', $filename, $matches);
+        $hour = $matches[1] ?? '00';
+        $minute = $matches[2] ?? '00';
+
+        return Carbon::parse("{$date} {$hour}:{$minute}:00");
+    }
+
+    /**
+     * @param  array<string, mixed>  $data
+     */
+    private function importReport(string $type, Carbon $reportedAt, array $data): void
+    {
+        $properties = $data['properties'] ?? [];
+        $geometry = $data['geometry'] ?? [];
+
+        $coordinates = $geometry['coordinates'][0] ?? [];
+        $centerLat = 0;
+        $centerLng = 0;
+
+        if (! empty($coordinates)) {
+            $lats = array_column($coordinates, 1);
+            $lngs = array_column($coordinates, 0);
+            $centerLat = array_sum($lats) / count($lats);
+            $centerLng = array_sum($lngs) / count($lngs);
+        }
+
+        $report = WeatherReport::create([
+            'type' => $type,
+            'reported_at' => $reportedAt,
+            'generated_at' => Carbon::parse($properties['generatedAt'] ?? $properties['updateTime'] ?? $reportedAt),
+            'latitude' => $centerLat,
+            'longitude' => $centerLng,
+            'elevation_meters' => $properties['elevation']['value'] ?? null,
+        ]);
+
+        $periods = $properties['periods'] ?? [];
+
+        foreach ($periods as $period) {
+            WeatherPeriod::create([
+                'weather_report_id' => $report->id,
+                'period_number' => $period['number'],
+                'name' => $period['name'] ?: null,
+                'start_time' => Carbon::parse($period['startTime']),
+                'end_time' => Carbon::parse($period['endTime']),
+                'is_daytime' => $period['isDaytime'],
+                'temperature' => $period['temperature'],
+                'temperature_unit' => $period['temperatureUnit'],
+                'precipitation_probability' => $period['probabilityOfPrecipitation']['value'] ?? null,
+                'dewpoint_celsius' => isset($period['dewpoint']['value']) ? round($period['dewpoint']['value'], 2) : null,
+                'relative_humidity' => $period['relativeHumidity']['value'] ?? null,
+                'wind_speed' => $period['windSpeed'] ?? null,
+                'wind_direction' => $period['windDirection'] ?? null,
+                'icon_url' => $period['icon'] ?? null,
+                'short_forecast' => $period['shortForecast'] ?? null,
+                'detailed_forecast' => $period['detailedForecast'] ?: null,
+            ]);
+        }
+    }
+}

app/Http/Controllers/WeatherController.php

@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\WeatherReport;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class WeatherController extends Controller
+{
+    public function index(): Response
+    {
+        $latestHourly = WeatherReport::query()
+            ->where('type', 'hourly')
+            ->with('periods')
+            ->orderByDesc('reported_at')
+            ->first();
+
+        $latestWeekly = WeatherReport::query()
+            ->where('type', 'weekly')
+            ->with('periods')
+            ->orderByDesc('reported_at')
+            ->first();
+
+        $currentPeriod = $latestHourly?->periods->first();
+
+        $hourlyForecast = $latestHourly?->periods
+            ->take(6)
+            ->map(fn ($period) => [
+                'time' => $period->start_time->format('H:i'),
+                'hour' => $period->start_time->format('H'),
+                'temperature' => $period->temperature,
+                'temperatureUnit' => $period->temperature_unit,
+                'icon' => $this->mapIconToEmoji($period->short_forecast),
+                'shortForecast' => $period->short_forecast,
+                'precipitationProbability' => $period->precipitation_probability,
+            ]);
+
+        $weeklyForecast = $latestWeekly?->periods
+            ->filter(fn ($period) => $period->is_daytime)
+            ->take(7)
+            ->values()
+            ->map(fn ($period) => [
+                'name' => $period->name,
+                'temperature' => $period->temperature,
+                'temperatureUnit' => $period->temperature_unit,
+                'icon' => $this->mapIconToEmoji($period->short_forecast),
+                'shortForecast' => $period->short_forecast,
+                'precipitationProbability' => $period->precipitation_probability,
+                'windSpeed' => $period->wind_speed,
+                'windDirection' => $period->wind_direction,
+                'detailedForecast' => $period->detailed_forecast,
+            ]);
+
+        return Inertia::render('Weather', [
+            'current' => $currentPeriod ? [
+                'temperature' => $currentPeriod->temperature,
+                'temperatureUnit' => $currentPeriod->temperature_unit,
+                'shortForecast' => $currentPeriod->short_forecast,
+                'detailedForecast' => $currentPeriod->detailed_forecast,
+                'windSpeed' => $currentPeriod->wind_speed,
+                'windDirection' => $currentPeriod->wind_direction,
+                'humidity' => $currentPeriod->relative_humidity,
+                'dewpoint' => $currentPeriod->dewpoint_celsius,
+                'precipitationProbability' => $currentPeriod->precipitation_probability,
+                'isDaytime' => $currentPeriod->is_daytime,
+                'icon' => $this->mapIconToEmoji($currentPeriod->short_forecast),
+            ] : null,
+            'hourlyForecast' => $hourlyForecast ?? collect(),
+            'weeklyForecast' => $weeklyForecast ?? collect(),
+            'location' => [
+                'latitude' => $latestHourly?->latitude,
+                'longitude' => $latestHourly?->longitude,
+                'name' => 'Utah County',
+            ],
+            'reportedAt' => $latestHourly?->reported_at?->format('M d, Y H:i'),
+        ]);
+    }
+
+    private function mapIconToEmoji(?string $forecast): string
+    {
+        if (! $forecast) {
+            return 'cloud';
+        }
+
+        $forecast = strtolower($forecast);
+
+        return match (true) {
+            str_contains($forecast, 'sunny') || str_contains($forecast, 'clear') => 'sun',
+            str_contains($forecast, 'partly') && str_contains($forecast, 'cloud') => 'cloud-sun',
+            str_contains($forecast, 'mostly cloudy') => 'cloud',
+            str_contains($forecast, 'cloud') => 'cloud',
+            str_contains($forecast, 'rain') && str_contains($forecast, 'snow') => 'cloud-snow',
+            str_contains($forecast, 'snow') => 'cloud-snow',
+            str_contains($forecast, 'rain') || str_contains($forecast, 'shower') => 'cloud-rain',
+            str_contains($forecast, 'thunder') || str_contains($forecast, 'storm') => 'cloud-lightning',
+            str_contains($forecast, 'fog') || str_contains($forecast, 'mist') => 'cloud-fog',
+            str_contains($forecast, 'wind') => 'wind',
+            default => 'cloud',
+        };
+    }
+}

app/Models/WeatherPeriod.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class WeatherPeriod extends Model
+{
+    /** @use HasFactory<\Database\Factories\WeatherPeriodFactory> */
+    use HasFactory;
+
+    protected $fillable = [
+        'weather_report_id',
+        'period_number',
+        'name',
+        'start_time',
+        'end_time',
+        'is_daytime',
+        'temperature',
+        'temperature_unit',
+        'precipitation_probability',
+        'dewpoint_celsius',
+        'relative_humidity',
+        'wind_speed',
+        'wind_direction',
+        'icon_url',
+        'short_forecast',
+        'detailed_forecast',
+    ];
+
+    /**
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'start_time' => 'datetime',
+            'end_time' => 'datetime',
+            'is_daytime' => 'boolean',
+            'temperature' => 'integer',
+            'precipitation_probability' => 'integer',
+            'dewpoint_celsius' => 'decimal:2',
+            'relative_humidity' => 'integer',
+        ];
+    }
+
+    /**
+     * @return BelongsTo<WeatherReport, $this>
+     */
+    public function report(): BelongsTo
+    {
+        return $this->belongsTo(WeatherReport::class, 'weather_report_id');
+    }
+}

app/Models/WeatherReport.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+class WeatherReport extends Model
+{
+    /** @use HasFactory<\Database\Factories\WeatherReportFactory> */
+    use HasFactory;
+
+    protected $fillable = [
+        'type',
+        'reported_at',
+        'generated_at',
+        'latitude',
+        'longitude',
+        'elevation_meters',
+    ];
+
+    /**
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'reported_at' => 'datetime',
+            'generated_at' => 'datetime',
+            'latitude' => 'decimal:7',
+            'longitude' => 'decimal:7',
+            'elevation_meters' => 'decimal:4',
+        ];
+    }
+
+    /**
+     * @return HasMany<WeatherPeriod, $this>
+     */
+    public function periods(): HasMany
+    {
+        return $this->hasMany(WeatherPeriod::class)->orderBy('period_number');
+    }
+}

app/Services/WeatherGovService.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Services;
+
+class WeatherGovService
+{
+    public function fetchOfficesList($weatherOffice, $gridX, $gridY): array
+    {
+        //
+    }
+
+    public function fetchHourlyReport($weatherOffice, $gridX, $gridY): array
+    {
+        //
+    }
+
+    public function fetchDailyReport($weatherOffice, $gridX, $gridY): array
+    {
+        //
+    }
+
+    public function fetchWeeklyReport($weatherOffice, $gridX, $gridY): array
+    {
+        //
+    }
+}

database/factories/WeatherPeriodFactory.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\WeatherReport;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\WeatherPeriod>
+ */
+class WeatherPeriodFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        $isDaytime = fake()->boolean();
+        $startTime = fake()->dateTimeBetween('-1 day', '+7 days');
+
+        return [
+            'weather_report_id' => WeatherReport::factory(),
+            'period_number' => fake()->numberBetween(1, 14),
+            'name' => $isDaytime ? fake()->randomElement(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']) : fake()->randomElement(['Monday Night', 'Tuesday Night', 'Overnight']),
+            'start_time' => $startTime,
+            'end_time' => (clone $startTime)->modify('+6 hours'),
+            'is_daytime' => $isDaytime,
+            'temperature' => fake()->numberBetween(20, 90),
+            'temperature_unit' => 'F',
+            'precipitation_probability' => fake()->numberBetween(0, 100),
+            'dewpoint_celsius' => fake()->randomFloat(2, -10, 20),
+            'relative_humidity' => fake()->numberBetween(20, 100),
+            'wind_speed' => fake()->numberBetween(1, 20).' mph',
+            'wind_direction' => fake()->randomElement(['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'SSE', 'SSW', 'NNE', 'NNW']),
+            'icon_url' => 'https://api.weather.gov/icons/land/day/sct?size=medium',
+            'short_forecast' => fake()->randomElement(['Sunny', 'Partly Cloudy', 'Mostly Cloudy', 'Light Rain', 'Cloudy', 'Chance Rain']),
+            'detailed_forecast' => fake()->optional()->sentence(15),
+        ];
+    }
+
+    public function daytime(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'is_daytime' => true,
+            'name' => fake()->randomElement(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']),
+        ]);
+    }
+
+    public function nighttime(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'is_daytime' => false,
+            'name' => fake()->randomElement(['Monday Night', 'Tuesday Night', 'Overnight']),
+        ]);
+    }
+}

database/factories/WeatherReportFactory.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\WeatherReport>
+ */
+class WeatherReportFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'type' => fake()->randomElement(['hourly', 'weekly']),
+            'reported_at' => fake()->dateTimeBetween('-7 days', 'now'),
+            'generated_at' => fake()->dateTimeBetween('-7 days', 'now'),
+            'latitude' => fake()->latitude(39, 42),
+            'longitude' => fake()->longitude(-112, -110),
+            'elevation_meters' => fake()->randomFloat(4, 1000, 2000),
+        ];
+    }
+
+    public function hourly(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'type' => 'hourly',
+        ]);
+    }
+
+    public function weekly(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'type' => 'weekly',
+        ]);
+    }
+}

database/migrations/2026_01_09_213530_create_weather_reports_table.php

@@ -0,0 +1,60 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('weather_reports', function (Blueprint $table) {
+            $table->id();
+            $table->enum('type', ['hourly', 'weekly']);
+            $table->dateTime('reported_at');
+            $table->dateTime('generated_at');
+            $table->decimal('latitude', 10, 7);
+            $table->decimal('longitude', 11, 7);
+            $table->decimal('elevation_meters', 8, 4)->nullable();
+            $table->timestamps();
+
+            $table->index(['type', 'reported_at']);
+            $table->unique(['type', 'reported_at']);
+        });
+
+        Schema::create('weather_periods', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('weather_report_id')->constrained()->cascadeOnDelete();
+            $table->unsignedSmallInteger('period_number');
+            $table->string('name')->nullable();
+            $table->dateTime('start_time');
+            $table->dateTime('end_time');
+            $table->boolean('is_daytime');
+            $table->smallInteger('temperature');
+            $table->char('temperature_unit', 1)->default('F');
+            $table->unsignedTinyInteger('precipitation_probability')->nullable();
+            $table->decimal('dewpoint_celsius', 5, 2)->nullable();
+            $table->unsignedTinyInteger('relative_humidity')->nullable();
+            $table->string('wind_speed', 20)->nullable();
+            $table->string('wind_direction', 10)->nullable();
+            $table->string('icon_url')->nullable();
+            $table->string('short_forecast')->nullable();
+            $table->text('detailed_forecast')->nullable();
+            $table->timestamps();
+
+            $table->index(['weather_report_id', 'start_time']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('weather_periods');
+        Schema::dropIfExists('weather_reports');
+    }
+};

resources/css/app.css

@@ -4,68 +4,43 @@
 @source '../../storage/framework/views/*.php';
 
 @theme inline {
-    --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
-.page-container {  display: grid;
+.page-container {
-  grid-template-columns: 1fr;
+    display: grid;
-  grid-template-rows: 1.4fr 0.6fr;
+    grid-template-columns: 1fr;
-  gap: 2em 0em;
+    grid-template-rows: auto auto auto;
-  grid-auto-flow: row;
+    gap: 1.5rem;
-  grid-template-areas:
-    "currentForecast"
-    "weeklyReport";
 }
 
-.currentForecast {  display: grid;
+.currentForecast {
-  grid-template-columns: 1fr 1fr;
+    display: grid;
-  grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
-  gap: 0px 0px;
+    grid-template-rows: auto auto;
-  grid-auto-flow: row;
+    gap: 2rem;
-  grid-template-areas:
-    "forecast secondaryInfo";
-  grid-area: currentForecast;
 }
 
-.forecast {  display: grid;
+@media (min-width: 768px) {
-  grid-template-columns: 1fr;
+    .currentForecast {
-  grid-template-rows: 1fr 1fr 1fr;
+        grid-template-columns: 1.2fr 1fr;
-  gap: 0px 0px;
+        grid-template-rows: 1fr;
-  grid-auto-flow: row;
+    }
-  grid-template-areas:
-    "shortDescription"
-    "longDescription"
-    "currentTemp";
-  grid-area: forecast;
 }
 
-.shortDescription { grid-area: shortDescription; }
+.forecast {
-
+    display: flex;
-.longDescription { grid-area: longDescription; }
+    flex-direction: column;
-
+    justify-content: center;
-.currentTemp { grid-area: currentTemp; }
-
-.secondaryInfo {  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 0px 0px;
-  grid-auto-flow: row;
-  grid-template-areas:
-    "windContainer"
-    "solarClock";
-  grid-area: secondaryInfo;
 }
 
-.windContainer { grid-area: windContainer; }
+.secondaryInfo {
-
+    display: flex;
-.solarClock { grid-area: solarClock; }
+    flex-direction: column;
-
+    gap: 1rem;
-.weeklyReport {  display: grid;
+}
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+
-  grid-template-rows: 1fr;
+.weeklyReport {
-  gap: 0px 0px;
+    margin-top: 1rem;
-  grid-auto-flow: row;
-  grid-template-areas:
-    ". . . . . .";
-  grid-area: weeklyReport;
 }

resources/js/pages/Weather.vue

@@ -1,25 +1,281 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+interface CurrentWeather {
+    temperature: number;
+    temperatureUnit: string;
+    shortForecast: string;
+    detailedForecast: string | null;
+    windSpeed: string | null;
+    windDirection: string | null;
+    humidity: number | null;
+    dewpoint: number | null;
+    precipitationProbability: number | null;
+    isDaytime: boolean;
+    icon: string;
+}
+
+interface HourlyForecast {
+    time: string;
+    hour: string;
+    temperature: number;
+    temperatureUnit: string;
+    icon: string;
+    shortForecast: string;
+    precipitationProbability: number | null;
+}
+
+interface WeeklyForecast {
+    name: string;
+    temperature: number;
+    temperatureUnit: string;
+    icon: string;
+    shortForecast: string;
+    precipitationProbability: number | null;
+    windSpeed: string | null;
+    windDirection: string | null;
+    detailedForecast: string | null;
+}
+
+interface Location {
+    latitude: number | null;
+    longitude: number | null;
+    name: string;
+}
+
+const props = defineProps<{
+    current: CurrentWeather | null;
+    hourlyForecast: HourlyForecast[];
+    weeklyForecast: WeeklyForecast[];
+    location: Location;
+    reportedAt: string | null;
+}>();
+
+const weatherIcons: Record<string, string> = {
+    sun: 'M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41M12 6a6 6 0 100 12 6 6 0 000-12z',
+    'cloud-sun':
+        'M12 2v1m0 18v1m9-10h1M2 12h1m15.5-6.5l.7.7M4.2 19.8l.7-.7m0-13.4l-.7.7m15.6 13.4l-.7-.7M17 12a5 5 0 10-9.6 1.8M6.3 18h10.4a4 4 0 000-8h-.3A5.5 5.5 0 006.3 18z',
+    cloud: 'M3 15h.01M6 15h.01M9 18h.01M12 15h.01M15 18h.01M18 15h.01M21 15h.01M6.34 8A6 6 0 0118 10h1a4 4 0 014 4 4 4 0 01-4 4H6a4 4 0 01-4-4 4 4 0 014-4h.34z',
+    'cloud-rain':
+        'M16 13v8m-4-6v6m-4-4v4m-4-2a4 4 0 014-4h.87a5.5 5.5 0 0110.26 0H18a4 4 0 014 4 4 4 0 01-4 4',
+    'cloud-snow': 'M20 17.58A5 5 0 0018 8h-1.26A8 8 0 104 16.25m4 2l.5.5m3.5-.5l.5.5m-.5 3.5l.5.5m3-.5l.5.5',
+    'cloud-lightning': 'M19 16.9A5 5 0 0018 7h-1.26a8 8 0 10-11.62 9m7.88-4l-3 5h4l-3 5',
+    'cloud-fog': 'M4 14h.01M8 14h.01M12 14h.01M16 14h.01M20 14h.01M4 18h.01M8 18h.01M12 18h.01M16 18h.01M20 18h.01M6.34 6A6 6 0 0118 8h1a4 4 0 010 8H6a4 4 0 010-8h.34z',
+    wind: 'M9.59 4.59A2 2 0 1111 8H2m10.59 11.41A2 2 0 1014 16H2m15.73-8.27A2.5 2.5 0 1119.5 12H2',
+};
+
+function getIconPath(iconName: string): string {
+    return weatherIcons[iconName] || weatherIcons.cloud;
+}
+
+const currentTime = computed(() => {
+    return new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+});
+
+const currentDate = computed(() => {
+    return new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
+});
+
+function parseWindSpeed(windSpeed: string | null): number {
+    if (!windSpeed) return 0;
+    const match = windSpeed.match(/(\d+)/);
+    return match ? parseInt(match[1]) : 0;
+}
 </script>
 
 <template>
-    <Head title="Weather">
+    <Head title="Weather" />
 
-    </Head>
+    <div class="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-    <div class="grid min-h-screen p-6 lg:p-8">
+        <!-- Background atmosphere effect -->
-        <div class="page-container">
+        <div class="absolute inset-0 bg-[url('/images/clouds.jpg')] bg-cover bg-center opacity-20"></div>
-            <div class="currentForecast">
+        <div class="absolute inset-0 bg-gradient-to-b from-transparent via-slate-900/50 to-slate-900"></div>
-                <div class="forecast">
+
-                    <div class="shortDescription"></div>
+        <!-- Main content -->
-                    <div class="longDescription"></div>
+        <div class="relative z-10 mx-auto min-h-screen max-w-6xl p-6 lg:p-8">
-                    <div class="currentTemp"></div>
+            <!-- Header -->
+            <header class="mb-8 flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                    <svg class="h-8 w-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="getIconPath('cloud-sun')" />
+                    </svg>
+                    <span class="text-lg font-medium text-white/80">Weather</span>
                 </div>
-                <div class="secondaryInfo">
+                <div class="text-right text-sm text-white/60">
-                    <div class="windContainer"></div>
+                    <div>{{ currentDate }}</div>
-                    <div class="solarClock"></div>
+                    <div class="text-lg font-medium text-white/80">{{ currentTime }}</div>
+                </div>
+            </header>
+
+            <div v-if="current" class="page-container">
+                <!-- Current Forecast Section -->
+                <div class="currentForecast">
+                    <div class="forecast flex flex-col justify-center">
+                        <div class="shortDescription">
+                            <h1 class="text-4xl font-light tracking-wide text-white md:text-5xl">
+                                {{ current.shortForecast }}
+                            </h1>
+                            <p class="mt-2 text-lg text-white/60">
+                                {{ current.detailedForecast || 'Current conditions' }}
+                            </p>
+                        </div>
+
+                        <div class="currentTemp mt-8">
+                            <div class="flex items-start">
+                                <span class="text-8xl font-thin tracking-tighter text-white md:text-9xl">
+                                    {{ current.temperature }}
+                                </span>
+                                <span class="mt-4 text-4xl font-thin text-white/60">
+                                    °{{ current.temperatureUnit }}
+                                </span>
+                            </div>
+                            <div class="mt-4 flex items-center gap-4 text-white/60">
+                                <span class="flex items-center gap-1">
+                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                                    </svg>
+                                    {{ location.name }}
+                                </span>
+                                <span v-if="current.humidity">Humidity: {{ current.humidity }}%</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Secondary Info -->
+                    <div class="secondaryInfo space-y-4">
+                        <!-- Wind Card -->
+                        <div class="windContainer rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-lg">
+                            <div class="mb-4 flex items-center justify-between">
+                                <div class="flex items-center gap-2 text-white/60">
+                                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="getIconPath('wind')" />
+                                    </svg>
+                                    <span>Wind Status</span>
+                                </div>
+                                <span class="text-xl font-semibold text-white">{{ current.windSpeed || 'N/A' }}</span>
+                            </div>
+                            <!-- Wind visualization -->
+                            <div class="flex h-16 items-end justify-between gap-1">
+                                <div
+                                    v-for="i in 20"
+                                    :key="i"
+                                    class="flex-1 rounded-t bg-gradient-to-t from-blue-500/40 to-blue-400/60"
+                                    :style="{ height: `${20 + Math.sin(i * 0.5) * 15 + Math.random() * 30}%` }"
+                                ></div>
+                            </div>
+                            <div class="mt-2 text-center text-sm text-white/40">
+                                Direction: {{ current.windDirection || 'N/A' }}
+                            </div>
+                        </div>
+
+                        <!-- Sunrise/Sunset Arc -->
+                        <div class="solarClock rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-lg">
+                            <div class="mb-4 flex items-center justify-between text-sm text-white/60">
+                                <div class="flex items-center gap-1">
+                                    <svg class="h-4 w-4 text-orange-400" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M12 2L13.09 8.26L18 6L14.74 10.91L21 12L14.74 13.09L18 18L13.09 15.74L12 22L10.91 15.74L6 18L9.26 13.09L3 12L9.26 10.91L6 6L10.91 8.26L12 2Z" />
+                                    </svg>
+                                    <span>Sunrise</span>
+                                </div>
+                                <div class="flex items-center gap-1">
+                                    <span>Sunset</span>
+                                    <svg class="h-4 w-4 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M12 2L13.09 8.26L18 6L14.74 10.91L21 12L14.74 13.09L18 18L13.09 15.74L12 22L10.91 15.74L6 18L9.26 13.09L3 12L9.26 10.91L6 6L10.91 8.26L12 2Z" />
+                                    </svg>
+                                </div>
+                            </div>
+                            <!-- Sun arc -->
+                            <div class="relative h-20">
+                                <svg class="h-full w-full" viewBox="0 0 200 80">
+                                    <defs>
+                                        <linearGradient id="arcGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                            <stop offset="0%" stop-color="rgb(251, 146, 60)" stop-opacity="0.3" />
+                                            <stop offset="50%" stop-color="rgb(250, 204, 21)" stop-opacity="0.6" />
+                                            <stop offset="100%" stop-color="rgb(251, 146, 60)" stop-opacity="0.3" />
+                                        </linearGradient>
+                                    </defs>
+                                    <path
+                                        d="M 10 70 Q 100 -10 190 70"
+                                        fill="none"
+                                        stroke="url(#arcGradient)"
+                                        stroke-width="2"
+                                        stroke-dasharray="4 4"
+                                    />
+                                    <!-- Sun position indicator -->
+                                    <circle
+                                        :cx="current.isDaytime ? 100 : 30"
+                                        :cy="current.isDaytime ? 20 : 60"
+                                        r="8"
+                                        fill="rgb(250, 204, 21)"
+                                        class="drop-shadow-lg"
+                                    />
+                                </svg>
+                            </div>
+                            <div class="flex justify-between text-xs text-white/40">
+                                <span>6:45 AM</span>
+                                <span>5:30 PM</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Hourly Forecast Strip -->
+                <div v-if="hourlyForecast.length > 0" class="my-6 rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur-lg">
+                    <h3 class="mb-4 text-sm font-medium text-white/60">Hourly Forecast</h3>
+                    <div class="flex justify-between gap-4 overflow-x-auto">
+                        <div
+                            v-for="(hour, index) in hourlyForecast"
+                            :key="index"
+                            class="flex min-w-16 flex-col items-center gap-2"
+                            :class="{ 'rounded-xl bg-white/10 px-3 py-2': index === 0 }"
+                        >
+                            <span class="text-xs text-white/60">{{ index === 0 ? 'Now' : hour.hour }}</span>
+                            <svg class="h-6 w-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="getIconPath(hour.icon)" />
+                            </svg>
+                            <span class="text-sm font-medium text-white">{{ hour.temperature }}°</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Weekly Forecast -->
+                <div v-if="weeklyForecast.length > 0" class="weeklyReport">
+                    <h3 class="col-span-full mb-4 text-sm font-medium text-white/60">7-Day Forecast</h3>
+                    <div class="col-span-full grid grid-cols-7 gap-2">
+                        <div
+                            v-for="(day, index) in weeklyForecast"
+                            :key="index"
+                            class="flex flex-col items-center rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur-lg transition-all hover:bg-white/10"
+                        >
+                            <span class="text-sm font-medium text-white/80">{{ day.name.substring(0, 3) }}</span>
+                            <svg class="my-3 h-8 w-8 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="getIconPath(day.icon)" />
+                            </svg>
+                            <span class="text-xl font-semibold text-white">{{ day.temperature }}°</span>
+                            <span v-if="day.precipitationProbability" class="mt-1 text-xs text-blue-400">
+                                {{ day.precipitationProbability }}%
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="weeklyReport"></div>
+
+            <!-- Empty State -->
+            <div v-else class="flex min-h-96 flex-col items-center justify-center text-center">
+                <svg class="mb-4 h-16 w-16 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" :d="getIconPath('cloud')" />
+                </svg>
+                <h2 class="text-xl font-medium text-white/60">No Weather Data Available</h2>
+                <p class="mt-2 text-white/40">Run the ingestion command to load weather data:</p>
+                <code class="mt-2 rounded bg-white/10 px-3 py-1 text-sm text-white/60">php artisan weather:ingest</code>
+            </div>
+
+            <!-- Footer -->
+            <footer v-if="reportedAt" class="mt-8 text-center text-xs text-white/30">
+                Last updated: {{ reportedAt }}
+            </footer>
         </div>
     </div>
 </template>

routes/web.php

@@ -1,8 +1,6 @@
 <?php
 
+use App\Http\Controllers\WeatherController;
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;
 
-Route::get('/', function () {
+Route::get('/', [WeatherController::class, 'index'])->name('home');
-    return Inertia::render('Weather');
-})->name('home');