From 66bc2152dccdc02177a9f7d68f9e212dfe585a5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?William=20S=C3=B6derberg?= Date: Fri, 13 Mar 2026 00:37:01 +0100 Subject: [PATCH] Added emergency, jobinfo and beginner admin page --- src/App.tsx | 33 +++++----- src/data/faq.json | 2 +- src/index.css | 1 + src/pages/Documents.tsx | 2 +- src/pages/Emergency.tsx | 87 ++++++++++++++++++++++++++ src/pages/FAQ.tsx | 6 +- src/pages/JobInfo.tsx | 77 ++++++++++++++--------- src/pages/admin/AdminDashboard.tsx | 99 ++++++++++++++++++++++++++++++ 8 files changed, 258 insertions(+), 49 deletions(-) create mode 100644 src/pages/Emergency.tsx diff --git a/src/App.tsx b/src/App.tsx index 2df1b99..4815fc5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,38 +1,38 @@ // src/App.tsx -import { Calendar, FileText, Home as HomeIcon, Leaf, Map, ShieldAlert } from 'lucide-react'; -import { Link, Route, BrowserRouter as Router, Routes, useLocation } from 'react-router-dom'; +import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'; +import { Calendar, FileText, Home as HomeIcon, Map, Leaf, Briefcase, LifeBuoy, Lock } from 'lucide-react'; -import { Documents } from './pages/Documents'; -import { FAQ } from './pages/FAQ'; import { Home } from './pages/Home'; import { JobInfo } from './pages/JobInfo'; +import { FAQ } from './pages/FAQ'; +import { Documents } from './pages/Documents'; import { Schedule } from './pages/Schedule'; +import { Emergency } from './pages/Emergency'; +import { Admin } from './pages/admin/AdminDashboard'; -const Admin = () =>

Admin Dashboard (Kräver pinkod)

; - -const NavItem = ({ to, icon: Icon, label }: { to: string, icon: any, label: string }) => { +const NavItem = ({ to, icon: Icon, label, className = "" }: { to: string, icon: any, label: string, className?: string }) => { const location = useLocation(); const isActive = location.pathname === to; return ( - - {label} + + {label} ); }; function AppContent() { return ( -
+
- {/* Creative, vibrant header using only your colors */} + {/* Header & Navigation */}
{/* App Title Bar */} @@ -46,10 +46,12 @@ function AppContent() { {/* Scrollable Tab Navigation */}
@@ -62,6 +64,7 @@ function AppContent() { } /> } /> } /> + } /> } /> diff --git a/src/data/faq.json b/src/data/faq.json index 1e34dbc..2780f03 100644 --- a/src/data/faq.json +++ b/src/data/faq.json @@ -32,7 +32,7 @@ "a": "Vid fyren, 350m. Här finns info, broschyrer, personal, akvarier, fågelskådning, tumlarspaning, och Kullabergsguiderna." }, { - "q": "Tumalarsafari/Kullabergsguiderna?", + "q": "Tumalarsafari/ Kullabergsguiderna?", "a": "Skicka till Naturum, infodisk på insidan." }, { diff --git a/src/index.css b/src/index.css index 8c509cf..5c8c54e 100644 --- a/src/index.css +++ b/src/index.css @@ -11,6 +11,7 @@ --color-slate-teal: #456466; --color-seafoam: #5B8C8A; + --color-emergency: #EB514C; } body { diff --git a/src/pages/Documents.tsx b/src/pages/Documents.tsx index d5e525b..6f6e75e 100644 --- a/src/pages/Documents.tsx +++ b/src/pages/Documents.tsx @@ -33,7 +33,7 @@ export const Documents: React.FC = () => { className="group flex items-center justify-between bg-white/60 backdrop-blur-sm p-5 rounded-2xl border border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 transition-all duration-300" >
-
{doc.icon}
+
{doc.icon}
{doc.title}
diff --git a/src/pages/Emergency.tsx b/src/pages/Emergency.tsx new file mode 100644 index 0000000..0319877 --- /dev/null +++ b/src/pages/Emergency.tsx @@ -0,0 +1,87 @@ +// src/pages/Emergency.tsx + +import React from 'react'; +import { Phone, AlertTriangle, MapPin, HeartPulse } from 'lucide-react'; + +export const Emergency: React.FC = () => { + return ( +
+
+

+ + Vid Nödsituation +

+

Agera lugnt, stanna kvar på platsen och tillkalla hjälp.

+
+ + {/* 112 Card */} +
+

+ + Ring 112 +

+

+ Vid olycka, brand eller livshotande tillstånd. Berätta vem du är och vad som har hänt. +

+
+

+ + Uppge din position +

+

+ Använd appen 112 eller GPS i telefonen. Säg att du befinner dig i Kullabergs Naturreservat. Var specifik (t.ex. "Nära fyren" eller "Vid Josefinelust"). +

+
+
+ + {/* First Aid / HLR Card */} +
+

+ + Första Hjälpen & Hjärtstartare +

+
    +
  • + 1 + Säkra platsen – se till att varken du eller personen utsätts för mer fara. +
    • +
  • + 2 + + {/* Mobile View: Standard wrapping text (hides on medium screens and up) */} +

    + Finns hjärtstartare? Ja, närmaste hjärtstartare finns inne på Naturum Kullaberg (vid fyren) under deras öppettider. +

    + +
    • +
+
+ + {/* Internal Contact */} +
+

+ Intern Rapportering +

+

+ När situationen är under kontroll, meddela alltid arbetsledaren om vad som inträffat. +

+
+
+ William Söderberg + +
+
+ Oliver Nilsson + +
+
+
+
+ ); +}; \ No newline at end of file diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx index f08f1f7..fc5c661 100644 --- a/src/pages/FAQ.tsx +++ b/src/pages/FAQ.tsx @@ -16,9 +16,9 @@ export const FAQ: React.FC = () => {

- Veckoschema + Vanliga Frågor (FAQ)

-

Här hittar du när vi bemannar Kullaberg.

+

Använd den här guiden för att snabbt svara på turisternas vanligaste frågor.

@@ -42,7 +42,7 @@ export const FAQ: React.FC = () => { {isOpen ? : }
-
+
{item.a}
diff --git a/src/pages/JobInfo.tsx b/src/pages/JobInfo.tsx index 579105c..a862fe7 100644 --- a/src/pages/JobInfo.tsx +++ b/src/pages/JobInfo.tsx @@ -1,43 +1,62 @@ -// src/pages/Info.tsx +// src/pages/JobInfo.tsx import React from 'react'; +import { Briefcase, CheckCircle2, Navigation } from 'lucide-react'; export const JobInfo: React.FC = () => { return ( -
-

Jobbinfo & Regler

+
+
+

+ + Jobbinfo & Regler +

+

Läs igenom detta noggrant inför dina arbetspass.

+
-
-

Förväntningar

-

+

+

+ Förväntningar +

+

Vi förväntar oss att du tar ansvar, visar respekt för både natur och varandra, samt gör ditt bästa med dina arbetsuppgifter.

-
    -
  • Period 1: Start 23 juni kl 08:10 (Buss station Mölle)
    • -
  • Period 2: Start 7 juli kl 08:10
    • +
    +
    + Period 1 + 23 juni kl 08:10 (Buss Mölle) +
    +
    + Period 2 + 7 juli kl 08:10 +
    +
    +
+ +
+

+ Daglig Utrustning +

+
    + {['Bra promenadskor (mycket gång!)', 'Oömma/väderanpassade kläder', 'En bekväm ryggsäck', 'Egen lunch (ingen kyl/mikro)', 'Minst 1 liter vatten', 'Myggmedel & Solkräm'].map((item, idx) => ( +
  • +
    + {item} +
    • + ))}
-
-

Daglig Utrustning

-
    -
  • Bra promenadskor (du kommer gå mycket!)
    • -
  • Oömma och väderanpassade kläder
    • -
  • En bekväm ryggsäck
    • -
  • Egen lunch (ingen tillgång till kyl/mikro)
    • -
  • Minst 1 liter vatten
    • -
  • Myggmedel & Solkräm
    • -
-
- -
-

Exempel på uppgifter

-
    -
  • Parkeringsguide
    • -
  • Naturvägledare för besökare
    • -
  • Plocka skräp & ta bort invasiva växter
    • -
  • Städa anläggningar
    • -
  • Allmänt underhåll (olja skyltar, fixa staket)
    • +
    +

    + Exempel på uppgifter +

    +
      + {['Parkeringsguide', 'Naturvägledare för besökare', 'Plocka skräp & ta bort invasiva växter', 'Städa anläggningar', 'Allmänt underhåll (olja skyltar, fixa staket)'].map((task, idx) => ( +
    • + ✦ {task} +
      • + ))}
diff --git a/src/pages/admin/AdminDashboard.tsx b/src/pages/admin/AdminDashboard.tsx index e69de29..534879f 100644 --- a/src/pages/admin/AdminDashboard.tsx +++ b/src/pages/admin/AdminDashboard.tsx @@ -0,0 +1,99 @@ +// src/pages/admin/AdminDashboard.tsx + +import React, { useState } from 'react'; +import { Lock, Unlock, Upload, Users } from 'lucide-react'; + +export const Admin: React.FC = () => { + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [pin, setPin] = useState(''); + const [error, setError] = useState(''); + + const CORRECT_PIN = "1234"; // You can change this later + + const handleLogin = (e: React.FormEvent) => { + e.preventDefault(); + if (pin === CORRECT_PIN) { + setIsAuthenticated(true); + setError(''); + } else { + setError('Ogiltig pinkod.'); + setPin(''); + } + }; + + // --- VIEW: LOCKED --- + if (!isAuthenticated) { + return ( +
+
+
+ +
+

Admin Login

+

Ange pinkod för att hantera schema och närvaro.

+ +
+ setPin(e.target.value)} + placeholder="••••" + className="w-full bg-eggshell/50 border-2 border-slate-teal/30 text-center text-2xl tracking-[0.5em] text-ebony font-mono p-3 rounded-xl focus:outline-none focus:border-slate-teal focus:ring-1 focus:ring-slate-teal transition-all" + autoFocus + /> + {error &&

{error}

} + +
+
+
+ ); + } + + // --- VIEW: UNLOCKED (ADMIN DASHBOARD) --- + return ( +
+
+
+

+ + Admin Dashboard +

+

Hantera personal, scheman och närvaro.

+
+ +
+ + {/* Attendance Tracker Section Shell */} +
+
+

+ + Närvarorapport +

+ + {/* Fake Upload Button for now */} + +
+ +
+

Ingen data uppladdad ännu.

+

Ladda upp Timeedit CSV-filen för att visa interaktiv närvarolista här.

+
+
+
+ ); +}; \ No newline at end of file