Gör en idé
möjlig att prova.

Bygg en snygg, lekfull svensk godisbutik som heter Godisglädje. Visa sex påhittade godissorter med godisillustrationer, kort beskrivning och pris i kronor. Kunden ska kunna lägga godis i en varukorg, ändra antal och ta bort varor. Visa totalsumman tydligt. Knappen ”Slutför demoköp” ska visa ett glatt tackmeddelande utan att fråga efter personuppgifter. Använd färg, generös typografi och en bra mobilvy. Allt ska fungera med lokal exempeldata, utan databas, inloggning eller betalning. Visa ”Övningsbutik · inga riktiga köp”.

Bygg en imponerande, lättanvänd svensk Track & Trace-prototyp för ett transportföretag. Den ska kännas som premiumservice: kunden förstår läget, får hjälp att ta nästa steg och har alltid nära till sin personliga speditör.

Börja med en genomarbetad neutral visuell identitet, utan logotyp. Vi kommer att ladda upp JATA Cargo-logotypen i nästa iteration och då ändra hela uttrycket. Använd tydlig typografi, luft, genomtänkta färger och diskreta övergångar. Gör en generös desktopvy och en verkligt användbar mobilversion.

Vår gemensamma övningsdatabas är redan skapad. Använd vanlig fetch mot ett externt skrivskyddat API:
Bas-URL: https://ttgjrxcqlchhxakjqdwj.supabase.co/rest/v1/
HTTP-header apikey: sb_publishable_8gC1y4ymi1veP73dIGLWtA_jtFToRON

Denna nyckel är avsedd för frontend och ger bara läsåtkomst. Anslut inte databasen via Lovables inbyggda Supabase-administration. Skapa eller ändra inga tabeller där. Alla grupper läser samma data. För Miras säkra AI-anrop får du använda det egna Lovable-projektets server/AI-funktioner, separat från den gemensamma databasen.

Undersök API:ts faktiska svar innan du bygger:
shipments?ref=eq.DEMO-102&select=*
shipments?select=ref,customer_id,customer,mode,status,origin,destination,estimated_start,estimated_end,delivered_at,updated_at,vessel_id,voyage_id,origin_latitude,origin_longitude,destination_latitude,destination_longitude,receiving_deadline,priority&order=ref.asc&limit=1000
vessels?select=*
voyages?select=*
locations?select=*
demo_scenarios?select=*
demo_metadata?id=eq.tracking&select=*

Svaren är JSON-arrayer. En försändelses details innehåller den kundvänliga informationen: ref, customer, mode, goods, from, to, status, statusLabel, deliveryLabel, delivery, previousDelivery, lastUpdate, explanation, action, nextStep och timeline. Valfria fält kan saknas. timeline innehåller label, time och done. Toppskiktets datum och relationer kan användas för filter och beräkningar. status är transit, delayed eller delivered.

Skapa tre sammankopplade vyer:

1. Försändelser. Visa en användbar översikt direkt, med klickbara sammanfattningar för status. Sök på referens, kund, ort eller fartyg. Filtrera på kund, status och transportslag. Visa 20 försändelser åt gången. Klick öppnar en tydlig detaljvy med leveransfönster, senaste uppdatering, tidslinje och nästa steg. Behåll exempelknapparna DEMO-101, DEMO-102 och DEMO-103. DEMO-999 ska ge ett ärligt besked om att referensen saknas.

2. Fartyg. Sök på namn och visa fartygens resor, rutter och ankomst. Klick på ett fartyg ska visa dess resa och relaterade försändelser. Använd vessel_id och voyage_id för sambanden.

3. Världskarta. Använd en riktig interaktiv bakgrundskarta med etablerat kartbibliotek och tillåten kartkälla utan betald API-nyckel. Behåll obligatorisk attribution. Visa de fiktiva fartygspositionerna, hamnarna och de illustrerade rutterna från voyages.route_geometry. GeoJSON använder longitud, latitud. Klick på en markör öppnar samma fartyg och försändelser som i listan. En motsvarande lista ska finnas för den som inte vill använda kartan. Markera att positioner och rutter är illustrerade övningsdata, inte AIS eller livepositioner.

Lägg till en tydlig knapp ”Prova en demohändelse”. Läs DEMO-DELAY-6H från demo_scenarios. Aktivering gäller bara denna vy och skriver ingenting till databasen. Lägg sex timmar till ankomstfönstret för scenariots affected_refs och markera dem försenade. Räkna vilka som då kommer efter sin receiving_deadline. Uppdatera sammanfattningar, fartyg, karta, lista och detaljer konsekvent. Visa ursprunglig och ändrad tid, ”Demohändelse aktiv” och ”Återställ scenario”. Orelaterade och redan levererade försändelser ändras inte. Räkna från data; skriv inte in resultatantal för hand.

Mira ska vara en riktig AI-assistent via Lovables inbyggda AI, med en snabb och ekonomisk stödd modell och säkra serveranrop. Presentera henne som ”Mira · AI-assistent”. Hon ska kunna förklara en försening, hitta relaterade försändelser och förbereda nästa steg. Låt henne veta vilket ärende, fartyg, kund och scenario vi tittar på. Hämta ett litet relevant underlag från databasen på serversidan, kontrollera scenario-id där och visa referenserna hon bygger svaret på som klickbara källor. Skicka inte alla 1 000 fullständiga poster till modellen.

Ge Mira kontextuella startfrågor: ”Vad betyder förseningen för mig?”, ”Vilka försändelser påverkas?” och ”Hjälp mig ta detta vidare”. Hon ska vara varm, kortfattad och konkret. Hon utgår alltid från det valda ärendet: ”godset”, ”min leverans” och liknande syftar på försändelsen som redan är öppen. Hon frågar aldrig efter en redan känd referens. Hämta inte andra kundärenden om frågan inte kräver en översikt. Hon skiljer mellan ”registrerad som levererad” och att kunden faktiskt har fått godset. Om kunden bestrider en leverans tar hon motsägelsen på allvar, anger vad systemet registrerat, säger att eventuell kvittens/mottagaridentitet saknas och hjälper kunden förbereda en relevant kontroll med sin speditör. Hon säger vad hon inte vet och hittar aldrig på pris, kapacitet, garanterad leverans eller en genomförd bokning. Ett AI-fel ska visas öppet; spela inte upp ett färdigt svar som om det kom från modellen. Välj en stark och snabb chattmodell från projektets tillgängliga modeller. Ge tillräckligt utrymme för ett fullständigt kort svar; för resonemangsmodeller passar låg resonemangsnivå bättre för den här snabba dialogen. Ett avbrutet eller längdbegränsat svar ska ge möjlighet att försöka igen, inte presenteras som färdigt.

Ha alltid knappen ”Prata med din speditör” synlig, även i Mira. Bevara ärendet, kundens ursprungliga beskrivning, följdfrågorna, vad vi vet och vad som behöver klaras ut i ett redigerbart underlag som går att kopiera. Låt kunden ange vem hen brukar ha kontakt med, utan att hitta på en tilldelad kontaktperson. Visa ”Underlag klart · inget har skickats”. Den verkliga kontaktvägen är https://www.jatacargo.se/kontakta-oss/. Skicka inget automatiskt och påstå inte att någon redan har tagit över.

All data är påhittad. Visa ”Övningsprototyp · påhittade data” och kalla en vy över alla kunder för ”Övningsöversikt”. Använd den fasta scenariotiden från demo_metadata. Markera uppskattade tider som förväntade och faktiska leveranser som faktiska. Visa laddning, begripligt fel med ”Försök igen” och ett hjälpsamt tomt resultat. Behåll text för status, tydliga etiketter och synligt tangentbordsfokus. Använd namnet JATA Cargo utskrivet när företaget nämns.

Bygg ett sammanhängande flöde som går att prova direkt. Visa version 0.2.0 diskret och håll versionsfil och CHANGELOG.md i samklang. Prova sökning, karta/fartyg, demohändelse/återställning och vägen från Mira till den egna speditören innan du är klar.

Använd den här logotypen och gör hela upplevelsen till JATA Cargo. Anpassa färger, typografi, knappar, kartmarkörer och Miras uttryck så att allt hänger ihop. Behåll fungerande flöden och läsbarhet. Det ska kännas personligt, enkelt och premium.

När vi provade fastnade kunden här: [vad ni såg]. Ändra detta så att kunden kan [önskat resultat]. Behåll det som redan fungerar. Prova samma situation igen efter ändringen.