RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into azure-deploy

Browse Source
This commit is contained in:
Harkamal Randhawa
2026-04-14 23:32:16 -06:00
parent 3ee259abfd 0b244938cf
commit de37b27fcc
46 changed files with 1616 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/adopt/[id]/page.js
View File

@@ -44,6 +44,8 @@ export default function PetDetailPage() {
petStatus={pet.petStatus}
petPrice={pet.petPrice}
imageUrl={pet.imageUrl}
storeId={pet.storeId}
storeName={pet.storeName}
/>
)}
</div>

534
web/app/appointments/page.js
View File

@@ -7,6 +7,34 @@ import { useAuth } from "@/context/AuthContext";
const API_BASE = "";
const SPECIES_BREEDS = {
Dog: ["Beagle", "Boxer", "Bulldog", "Chihuahua", "Dachshund", "German Shepherd", "Golden Retriever", "Labrador Retriever", "Poodle", "Rottweiler", "Shih Tzu", "Siberian Husky", "Yorkshire Terrier", "Mixed / Other"],
Cat: ["Abyssinian", "Bengal", "British Shorthair", "Maine Coon", "Persian", "Ragdoll", "Scottish Fold", "Siamese", "Sphynx", "Mixed / Other"],
Bird: ["Canary", "Cockatiel", "Cockatoo", "Finch", "Lovebird", "Macaw", "Parakeet", "Parrot", "Other"],
Rabbit: ["Dutch", "Flemish Giant", "Holland Lop", "Lionhead", "Mini Rex", "Other"],
Hamster: ["Dwarf", "Roborovski", "Syrian", "Other"],
"Guinea Pig": ["Abyssinian", "American", "Peruvian", "Teddy", "Other"],
Reptile: ["Ball Python", "Bearded Dragon", "Blue-tongued Skink", "Corn Snake", "Leopard Gecko", "Other"],
Fish: ["Angelfish", "Betta", "Cichlid", "Clownfish", "Goldfish", "Guppy", "Tetra", "Other"],
Other: ["Other"],
};
// Explicit allowlists for species with restricted service availability.
// Species not listed here may use all services.
const SPECIES_SERVICE_ALLOWLIST = {
Bird: ["wing clipping", "beak and nail"],
Fish: ["aquarium health"],
};
function getAvailableServices(services, species) {
if (!species) return services;
const allowlist = SPECIES_SERVICE_ALLOWLIST[species];
if (!allowlist) return services;
return services.filter((s) =>
allowlist.some((kw) => s.serviceName.toLowerCase().includes(kw))
);
}
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December",
];
@@ -254,26 +282,32 @@ function AddPetModal({ token, onClose, onAdded }) {
</label>
<label className="appt-label">
Species
<input
className="appt-input"
type="text"
<select
className="appt-select"
value={species}
onChange={(e) => setSpecies(e.target.value)}
onChange={(e) => { setSpecies(e.target.value); setBreed(""); }}
required
maxLength={50}
placeholder="e.g. Dog, Cat, Bird"
/>
>
<option value="">Select a species...</option>
{Object.keys(SPECIES_BREEDS).map((s) => (
<option key={s} value={s}>{s}</option>
))}
</select>
</label>
<label className="appt-label">
Breed (optional)
<input
className="appt-input"
type="text"
Breed
<select
className="appt-select"
value={breed}
onChange={(e) => setBreed(e.target.value)}
maxLength={50}
placeholder="e.g. Golden Retriever"
/>
required
disabled={!species}
>
<option value="">{species ? "Select a breed..." : "Select a species first"}</option>
{(SPECIES_BREEDS[species] || []).map((b) => (
<option key={b} value={b}>{b}</option>
))}
</select>
</label>
<div className="profile-pet-form-actions">
<button type="submit" className="appt-submit-btn" disabled={submitting}>
@@ -294,8 +328,23 @@ function AppointmentsPage() {
const router = useRouter();
const searchParams = useSearchParams();
const preselectedPetId = searchParams.get("petId");
// Adoption mode — set when arriving from a pet detail page
const adoptionMode = searchParams.get("adoptionMode") === "true";
const adoptionPetId = searchParams.get("petId");
const adoptionPetName = searchParams.get("petName") || "";
const adoptionPetSpecies = searchParams.get("petSpecies") || "";
const adoptionPetBreed = searchParams.get("petBreed") || "";
const adoptionStoreId = searchParams.get("storeId") || "";
const adoptionStoreName = searchParams.get("storeName") || "";
const didPreselectRef = useRef(false);
// Adoption-mode URL verification
const [adoptionVerified, setAdoptionVerified] = useState(!adoptionMode);
const [adoptionVerifyError, setAdoptionVerifyError] = useState(null);
const [adoptionVerifyLoading, setAdoptionVerifyLoading] = useState(adoptionMode);
const [stores, setStores] = useState([]);
const [employees, setEmployees] = useState([]);
const [services, setServices] = useState([]);
@@ -318,7 +367,11 @@ function AppointmentsPage() {
const [appointments, setAppointments] = useState([]);
const [loadingAppointments, setLoadingAppointments] = useState(false);
const [adoptions, setAdoptions] = useState([]);
const [loadingAdoptions, setLoadingAdoptions] = useState(false);
const [showAddPetModal, setShowAddPetModal] = useState(false);
const [cancellingId, setCancellingId] = useState(null);
const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
@@ -330,6 +383,28 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
}, [authLoading, user, router, preselectedPetId]);
// Verify the pet from the URL is real, available, and at the stated store
useEffect(() => {
if (!adoptionMode || !adoptionPetId) return;
setAdoptionVerifyLoading(true);
fetch(`${API_BASE}/api/v1/pets/${adoptionPetId}`)
.then((r) => {
if (!r.ok) throw new Error("Pet not found. This link may be invalid.");
return r.json();
})
.then((pet) => {
if (pet.petStatus?.toLowerCase() !== "available") {
throw new Error(`${pet.petName || "This pet"} is no longer available for adoption (status: ${pet.petStatus}).`);
}
if (adoptionStoreId && String(pet.storeId) !== String(adoptionStoreId)) {
throw new Error("Store mismatch: this pet is not located at the specified store.");
}
setAdoptionVerified(true);
})
.catch((err) => setAdoptionVerifyError(err.message))
.finally(() => setAdoptionVerifyLoading(false));
}, [adoptionMode, adoptionPetId, adoptionStoreId]);
const loadCustomerPets = useCallback(() => {
if (!token || !canBookAppointments) return;
fetch(`${API_BASE}/api/v1/my-pets`, {
@@ -366,9 +441,24 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
}, [token, loadCustomerPets]);
useEffect(() => {
if (didPreselectRef.current) {
if (didPreselectRef.current) return;
if (adoptionMode) {
// Need both the store (so employees load) and a serviceId (so availability slots load)
if (adoptionStoreId && services.length > 0) {
setStoreId(adoptionStoreId);
// Prefer a service named "adopt", fall back to the first available service
const adoptionSvc =
services.find((s) => s.serviceName.toLowerCase().includes("adopt")) ||
services[0];
if (adoptionSvc) {
setServiceId(String(adoptionSvc.serviceId));
didPreselectRef.current = true;
}
}
return;
}
if (!preselectedPetId || services.length === 0 || allPets.length === 0) {
return;
}
@@ -382,16 +472,13 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
}
setSelectedPetIds([Number(preselectedPetId)]);
didPreselectRef.current = true;
}, [preselectedPetId, services, allPets]);
}, [adoptionMode, adoptionStoreId, preselectedPetId, services, allPets]);
const loadAppointments = useCallback(() => {
if (!token) {
return;
}
if (!token) return;
setLoadingAppointments(true);
fetch(`${API_BASE}/api/v1/appointments?size=50&sort=appointmentDate,desc`, {
headers: {Authorization: `Bearer ${token}`},
headers: { Authorization: `Bearer ${token}` },
})
.then((r) => r.json())
.then((data) => setAppointments(data.content ?? []))
@@ -399,9 +486,62 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
.finally(() => setLoadingAppointments(false));
}, [token]);
const loadAdoptions = useCallback(() => {
if (!token) return;
setLoadingAdoptions(true);
fetch(`${API_BASE}/api/v1/adoptions?size=50&sort=adoptionDate,desc`, {
headers: { Authorization: `Bearer ${token}` },
})
.then((r) => r.json())
.then((data) => setAdoptions(data.content ?? []))
.catch(() => {})
.finally(() => setLoadingAdoptions(false));
}, [token]);
useEffect(() => {
loadAppointments();
}, [loadAppointments]);
if (adoptionMode) loadAdoptions();
else loadAppointments();
}, [adoptionMode, loadAppointments, loadAdoptions]);
async function handleCancelAppointment(appointmentId) {
if (!confirm("Cancel this appointment?")) return;
setCancellingId(appointmentId);
try {
const res = await fetch(`${API_BASE}/api/v1/appointments/${appointmentId}/cancel`, {
method: "PATCH",
headers: { Authorization: `Bearer ${token}` },
});
if (!res.ok) {
const data = await res.json().catch(() => null);
throw new Error(data?.message || `Failed to cancel appointment (${res.status})`);
}
loadAppointments();
} catch (err) {
alert(err.message);
} finally {
setCancellingId(null);
}
}
async function handleCancelAdoption(adoptionId) {
if (!confirm("Cancel this adoption request?")) return;
setCancellingId(adoptionId);
try {
const res = await fetch(`${API_BASE}/api/v1/adoptions/${adoptionId}/cancel`, {
method: "PATCH",
headers: { Authorization: `Bearer ${token}` },
});
if (!res.ok) {
const data = await res.json().catch(() => null);
throw new Error(data?.message || `Failed to cancel adoption (${res.status})`);
}
loadAdoptions();
} catch (err) {
alert(err.message);
} finally {
setCancellingId(null);
}
}
useEffect(() => {
if (!token || !storeId) {
@@ -453,30 +593,30 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
.finally(() => setLoadingSlots(false));
}, [storeId, serviceId, appointmentDate]);
const selectedService = services.find((s) => s.serviceId === Number(serviceId));
const isAdoptionService = selectedService ? selectedService.serviceName.toLowerCase().includes("adopt") : false;
const isCustomerPetService = !!selectedService && !isAdoptionService;
const adoptablePets = allPets.filter(
(p) => p.petStatus && p.petStatus.toLowerCase() === "available"
const eligiblePets = customerPets.filter(
(p) => p.petStatus === "Owned" || p.petStatus === "Adopted"
);
const selectedService = services.find((s) => s.serviceId === Number(serviceId));
const selectedPet = !adoptionMode
? (eligiblePets.find((p) => p.customerPetId === selectedPetIds[0]) || null)
: null;
const availableServices = getAvailableServices(services, selectedPet?.species);
function handleServiceChange(newServiceId) {
setServiceId(newServiceId);
setSelectedPetIds([]);
}
function togglePet(petId) {
if (isAdoptionService) {
setSelectedPetIds((prev) =>
prev.includes(petId) ? [] : [petId]
);
}
else {
setSelectedPetIds((prev) =>
prev.includes(petId) ? prev.filter((id) => id !== petId) : [...prev, petId]
);
function handlePetSelect(petId) {
const newPet = eligiblePets.find((p) => p.customerPetId === petId);
setSelectedPetIds([petId]);
if (serviceId && newPet) {
const newAvailable = getAvailableServices(services, newPet.species);
if (!newAvailable.some((s) => String(s.serviceId) === String(serviceId))) {
setServiceId("");
setAppointmentTime("");
setAvailableSlots([]);
}
}
}
@@ -495,8 +635,9 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
return d.toISOString().split("T")[0];
}
const formValid =
storeId && serviceId && appointmentDate && appointmentTime && selectedPetIds.length > 0;
const formValid = adoptionMode
? Boolean(employeeId && appointmentDate && adoptionVerified)
: storeId && serviceId && appointmentDate && appointmentTime && selectedPetIds.length > 0;
async function handleSubmit(e) {
e.preventDefault();
@@ -505,19 +646,59 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
if (!canBookAppointments) {
setError("Only customer accounts can book appointments from the web app.");
return;
}
if (selectedPetIds.length === 0) {
setError(isAdoptionService ? "Please select a pet to adopt." : "Please select at least one pet.");
if (!adoptionMode && selectedPetIds.length === 0) {
setError("Please select a pet for your appointment.");
return;
}
if (!adoptionMode && selectedPet && selectedPet.petStatus !== "Owned" && selectedPet.petStatus !== "Adopted") {
setError("The selected pet is no longer eligible for appointments. Please refresh the page.");
return;
}
if (!adoptionMode && selectedPet && serviceId) {
const chosenService = services.find((s) => String(s.serviceId) === String(serviceId));
if (chosenService && getAvailableServices([chosenService], selectedPet.species).length === 0) {
setError(`"${chosenService.serviceName}" is not available for ${selectedPet.species}s. Please select a valid service.`);
return;
}
}
setSubmitting(true);
try {
if (adoptionMode) {
// Submit an adoption request directly to the adoption table
const body = {
petId: Number(adoptionPetId),
employeeId: employeeId ? Number(employeeId) : undefined,
sourceStoreId: adoptionStoreId ? Number(adoptionStoreId) : undefined,
adoptionDate: appointmentDate,
};
const res = await fetch(`${API_BASE}/api/v1/adoptions/request`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(body),
});
if (!res.ok) {
const data = await res.json().catch(() => null);
throw new Error(data?.message || data?.error || `Request failed (${res.status})`);
}
setSuccess(`Adoption request submitted! ${adoptionPetName} is now marked as Pending. We'll be in touch soon.`);
setEmployeeId("");
loadAdoptions();
return;
}
const body = {
customerId: user.customerId || user.id,
storeId: Number(storeId),
@@ -577,12 +758,6 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
if (!user) return null;
const petsToShow = isAdoptionService ? adoptablePets : isCustomerPetService ? customerPets : [];
const petSectionLabel = isAdoptionService ? "Select a Pet to Adopt" : "Select Pet(s)";
const noPetsMessage = isAdoptionService
? "No pets are currently available for adoption."
: "No pets found on your profile.";
return (
<main className="appt-page">
{showAddPetModal && (
@@ -594,50 +769,112 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
)}
<section className="appt-hero">
<h1 className="appt-hero-title">Schedule an Appointment</h1>
<p className="appt-hero-subtitle">Book a service for your pet or schedule a pet adoption visit</p>
<h1 className="appt-hero-title">{adoptionMode ? "Schedule an Adoption" : "Schedule an Appointment"}</h1>
<p className="appt-hero-subtitle">{adoptionMode ? "Schedule a pet adoption visit" : "Book a service for your pet."}</p>
<div className="title-decoration"></div>
</section>
<section className="appt-content">
{canBookAppointments ? (
<form className="appt-form" onSubmit={handleSubmit}>
<h2 className="appt-form-title">New Appointment</h2>
<h2 className="appt-form-title">{adoptionMode ? "New Adoption" : "New Appointment"}</h2>
{error && <div className="appt-error">{error}</div>}
{success && <div className="appt-success">{success}</div>}
{adoptionMode && adoptionVerifyLoading && (
<p className="appt-loading">Verifying pet details…</p>
)}
{adoptionMode && adoptionVerifyError && (
<div className="appt-error">{adoptionVerifyError}</div>
)}
{(!adoptionMode || adoptionVerified) && (<>
{/* ADOPTION MODE: locked pet + store */}
{adoptionMode && (
<label className="appt-label">
Pet
<div className="appt-locked-field">
{[adoptionPetName, adoptionPetSpecies, adoptionPetBreed].filter(Boolean).join(" · ")}
</div>
</label>
)}
{/* STEP 1 (non-adoption): select a pet first */}
{!adoptionMode && (
<div className="appt-label">
<span>Select Your Pet</span>
{eligiblePets.length === 0 ? (
<p className="appt-no-slots">You have no adopted pets available for appointments.</p>
) : (
<div className="appt-pets-grid">
{eligiblePets.map((p) => (
<label
key={p.customerPetId}
className={`appt-pet-chip ${selectedPetIds.includes(p.customerPetId) ? "appt-pet-chip--selected" : ""}`}
>
<input
type="radio"
name="customerPet"
checked={selectedPetIds.includes(p.customerPetId)}
onChange={() => handlePetSelect(p.customerPetId)}
className="appt-pet-checkbox"
/>
{p.petName}
<span className="appt-pet-chip-species">({p.species})</span>
</label>
))}
</div>
)}
</div>
)}
{/* Remaining fields — shown after pet selected (or always in adoption mode) */}
{(adoptionMode || selectedPetIds.length > 0) && (<>
<label className="appt-label">
Store Location
<select
className="appt-select"
value={storeId}
onChange={(e) => setStoreId(e.target.value)}
required
>
<option value="">Select a store...</option>
{stores.map((s) => (
<option key={s.id} value={s.id}>{s.label}</option>
))}
</select>
{adoptionMode ? (
<div className="appt-locked-field">{adoptionStoreName || "Pet's store"}</div>
) : (
<select
className="appt-select"
value={storeId}
onChange={(e) => setStoreId(e.target.value)}
required
>
<option value="">Select a store...</option>
{stores.map((s) => (
<option key={s.id} value={s.id}>{s.label}</option>
))}
</select>
)}
</label>
<label className="appt-label">
Service
<select
className="appt-select"
value={serviceId}
onChange={(e) => handleServiceChange(e.target.value)}
required
>
<option value="">Select a service...</option>
{services.map((s) => (
<option key={s.serviceId} value={s.serviceId}>
{s.serviceName} — ${Number(s.servicePrice).toFixed(2)} ({s.serviceDuration} min)
</option>
))}
</select>
</label>
{!adoptionMode && (
<label className="appt-label">
Service
{availableServices.length === 0 ? (
<p className="appt-no-slots">
No services are available for {selectedPet?.species || "this pet"}.
</p>
) : (
<select
className="appt-select"
value={serviceId}
onChange={(e) => handleServiceChange(e.target.value)}
required
>
<option value="">Select a service...</option>
{availableServices.map((s) => (
<option key={s.serviceId} value={s.serviceId}>
{s.serviceName} — ${Number(s.servicePrice).toFixed(2)} ({s.serviceDuration} min)
</option>
))}
</select>
)}
</label>
)}
{employees.length > 0 && (
<label className="appt-label">
@@ -654,7 +891,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
</label>
)}
{selectedService && (
{!adoptionMode && selectedService && (
<div className="appt-service-info">
<p>{selectedService.serviceDesc}</p>
</div>
@@ -669,7 +906,7 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
/>
</div>
{storeId && serviceId && appointmentDate && (
{!adoptionMode && storeId && serviceId && appointmentDate && (
<div className="appt-label">
<span>Available Time Slots</span>
{loadingSlots ? (
@@ -693,83 +930,62 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
</div>
)}
{serviceId && (
<div className="appt-label">
<span>{petSectionLabel}</span>
{isCustomerPetService && (
<button
type="button"
className="appt-add-pet-btn"
onClick={() => setShowAddPetModal(true)}
>
+ Add New Pet
</button>
)}
{petsToShow.length === 0 ? (
<p className="appt-no-slots">{noPetsMessage}</p>
) : isAdoptionService ? (
<div className="appt-adopt-grid">
{petsToShow.map((p) => (
<label
key={p.petId}
className={`appt-adopt-card ${selectedPetIds.includes(p.petId) ? "appt-adopt-card--selected" : ""}`}
>
<input
type="radio"
name="adoptionPet"
value={p.petId}
checked={selectedPetIds.includes(p.petId)}
onChange={() => togglePet(p.petId)}
className="appt-adopt-radio"
/>
{p.imageUrl ? (
<img src={p.imageUrl} alt={p.petName} className="appt-adopt-img" />
) : (
<div className="appt-adopt-img-placeholder">🐾</div>
)}
<div className="appt-adopt-info">
<span className="appt-adopt-name">{p.petName}</span>
<span className="appt-adopt-detail">{p.petSpecies} · {p.petBreed}</span>
<span className="appt-adopt-detail">Age: {p.petAge}</span>
</div>
</label>
))}
</div>
) : (
<div className="appt-pets-grid">
{petsToShow.map((p) => (
<label
key={p.customerPetId}
className={`appt-pet-chip ${selectedPetIds.includes(p.customerPetId) ? "appt-pet-chip--selected" : ""}`}
>
<input
type="checkbox"
checked={selectedPetIds.includes(p.customerPetId)}
onChange={() => togglePet(p.customerPetId)}
className="appt-pet-checkbox"
/>
{p.petName}
<span className="appt-pet-chip-species">({p.species})</span>
</label>
))}
</div>
)}
</div>
)}
<button
type="submit"
className="appt-submit-btn"
disabled={!formValid || submitting}
>
{submitting ? "Booking..." : isAdoptionService ? "Schedule Adoption Visit" : "Book Appointment"}
{submitting ? "Booking..." : adoptionMode ? "Schedule Adoption" : "Book Appointment"}
</button>
{success && <div className="appt-success">{success}</div>}
</>)}
</>)}
</form>
) : null}
<div className="appt-history">
<h2 className="appt-form-title">{canBookAppointments ? "Your Appointments" : "Appointments"}</h2>
{loadingAppointments ? (
<h2 className="appt-form-title">
{adoptionMode ? "Your Adoptions" : canBookAppointments ? "Your Appointments" : "Appointments"}
</h2>
{adoptionMode ? (
loadingAdoptions ? (
<p className="appt-loading">Loading adoptions...</p>
) : adoptions.length === 0 ? (
<p className="appt-empty">No adoption appointments yet.</p>
) : (
<div className="appt-list">
{adoptions.map((a) => (
<div key={a.adoptionId} className="appt-card">
<div className="appt-card-header">
<span className="appt-card-service">{a.petName}</span>
<span className={`appt-card-status appt-card-status--${a.adoptionStatus?.toLowerCase()}`}>
{a.adoptionStatus}
</span>
</div>
<div className="appt-card-details">
<span>{a.sourceStoreName}</span>
<span>{a.adoptionDate}</span>
</div>
{a.adoptionStatus?.toLowerCase() === "pending" && (
<div className="appt-card-actions">
<button
type="button"
className="appt-cancel-btn"
disabled={cancellingId === a.adoptionId}
onClick={() => handleCancelAdoption(a.adoptionId)}
>
{cancellingId === a.adoptionId ? "Cancelling..." : "Cancel"}
</button>
</div>
)}
</div>
))}
</div>
)
) : loadingAppointments ? (
<p className="appt-loading">Loading appointments...</p>
) : appointments.length === 0 ? (
<p className="appt-empty">No appointments yet.</p>
@@ -797,6 +1013,18 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
Pets: {a.customerPetNames.join(", ")}
</div>
)}
{a.appointmentStatus?.toLowerCase() === "booked" && (
<div className="appt-card-actions">
<button
type="button"
className="appt-cancel-btn"
disabled={cancellingId === a.appointmentId}
onClick={() => handleCancelAppointment(a.appointmentId)}
>
{cancellingId === a.appointmentId ? "Cancelling..." : "Cancel"}
</button>
</div>
)}
</div>
))}
</div>

97
web/app/contact/page.js
View File

@@ -1,31 +1,24 @@
const LOCATIONS = [
{
name: "Downtown Branch",
address: "123 Main St",
phone: "(123) 456-7890",
email: "downtown@petshop.com",
},
{
name: "North Branch",
address: "456 North Ave",
phone: "(987) 654-3210",
email: "north@petshop.com",
},
{
name: "West Side Store",
address: "789 West Blvd",
phone: "(555) 123-4567",
email: "westside@petshop.com",
},
];
"use client";
const PERSONNEL = [
{ name: "John Doe", role: "Store Manager" },
{ name: "Sara Smith", role: "Staff" },
{ name: "Michael Johnson", role: "Grooming Team" },
];
import { useState, useEffect } from "react";
export default function ContactPage() {
const [locations, setLocations] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const params = new URLSearchParams({ page: "0", size: "100", sort: "storeName,asc" });
fetch(`/api/v1/stores?${params}`)
.then((res) => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then((data) => setLocations(data.content ?? []))
.catch((err) => setError(err.message))
.finally(() => setLoading(false));
}, []);
return (
<main className="info-page">
<section className="info-hero">
@@ -44,28 +37,40 @@ export default function ContactPage() {
<div className="info-card">
<h2>Store Locations</h2>
<div className="info-card-grid">
{LOCATIONS.map((location) => (
<article key={location.name} className="info-mini-card">
<h3>{location.name}</h3>
<p>{location.address}</p>
<p>{location.phone}</p>
<p>{location.email}</p>
</article>
))}
</div>
</div>
<div className="info-card">
<h2>Store Personnel</h2>
<div className="info-card-grid">
{PERSONNEL.map((person) => (
<article key={person.name} className="info-mini-card">
<h3>{person.name}</h3>
<p>{person.role}</p>
</article>
))}
</div>
{loading && <p>Loading locations...</p>}
{error && <p style={{ color: "red" }}>Failed to load locations: {error}</p>}
{!loading && !error && locations.length === 0 && (
<p>No store locations found.</p>
)}
{!loading && !error && locations.length > 0 && (
<div className="info-card-grid">
{locations.map((location) => (
<article key={location.storeId} className="info-mini-card location-card">
<div className="location-card-image-wrapper">
<img
src={location.imageUrl || "/images/pet-placeholder.png"}
alt={location.storeName}
className="location-card-image"
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = "/images/pet-placeholder.png";
}}
/>
</div>
<div className="location-card-body">
<h3>{location.storeName}</h3>
<p>{location.address}</p>
<p>{location.phone}</p>
<p>{location.email}</p>
</div>
</article>
))}
</div>
)}
</div>
</section>
</main>

BIN
web/app/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 176 KiB

108
web/app/globals.css
View File

@@ -38,7 +38,7 @@ body {
align-items: center;
flex-wrap: wrap;
min-height: 70px;
border-radius: 0px 0px 10px 10px;
/* border-radius: 0px 0px 10px 10px; */
}
/* Add padding to body to account for fixed header */
@@ -62,11 +62,9 @@ body {
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
gap: 1.25rem;
flex: 1;
justify-content: center;
}
/* Indivdual Link Styles */
@@ -758,6 +756,39 @@ body {
margin-bottom: 0.5rem;
}
.location-card {
padding: 0;
overflow: hidden;
}
.location-card-image-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #eee;
}
.location-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.location-card-body {
padding: 1rem;
}
.location-card-body h3 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.location-card-body p {
margin: 0.25rem 0;
font-size: 0.9rem;
color: #555;
}
.products-hero {
text-align: center;
padding: 4rem 2rem 3rem;
@@ -1356,6 +1387,17 @@ body {
box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
}
.appt-locked-field {
padding: 0.6rem 0.85rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
background: #f5f5f5;
color: #555;
font-weight: 600;
cursor: not-allowed;
}
.appt-service-info {
background: #fff8f0;
border: 1px solid #ffd180;
@@ -1616,6 +1658,11 @@ body {
color: #c62828;
}
.appt-card-status--pending {
background: #fff8e1;
color: #f57f17;
}
.appt-card-details {
display: flex;
justify-content: space-between;
@@ -1629,6 +1676,34 @@ body {
margin-top: 0.35rem;
}
.appt-card-actions {
display: flex;
justify-content: flex-end;
margin-top: 0.6rem;
}
.appt-cancel-btn {
font-size: 0.8rem;
font-weight: 600;
padding: 0.25rem 0.85rem;
border-radius: 6px;
border: 1px solid #e53935;
background: transparent;
color: #e53935;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.appt-cancel-btn:hover:not(:disabled) {
background: #e53935;
color: #fff;
}
.appt-cancel-btn:disabled {
opacity: 0.5;
cursor: default;
}
/* Adoption Pet Selection */
.appt-adopt-grid {
@@ -2573,7 +2648,24 @@ body {
/* Mobile / Responsive */
@media (max-width: 768px) {
/* Compact nav at mid-range widths before collapsing to hamburger */
@media (min-width: 1101px) and (max-width: 1350px) {
.nav-links {
gap: 0.25rem;
}
.nav-link {
font-size: 0.9rem;
padding: 0.4rem 0.5rem;
}
.nav-auth {
gap: 0.35rem;
padding-left: 0.5rem;
}
}
@media (max-width: 1100px) {
.navbar {
padding: 0.5rem 1rem;
}
@@ -2629,7 +2721,7 @@ body {
display: none;
}
@media (max-width: 768px) {
@media (max-width: 1100px) {
/* Show hamburger bar, hide desktop nav */
.nav-mobile-bar {
display: flex;

216
web/app/profile/page.js
View File

@@ -6,6 +6,18 @@ import { useAuth } from "@/context/AuthContext";
const API_BASE = "";
const SPECIES_BREEDS = {
Dog: ["Beagle", "Boxer", "Bulldog", "Chihuahua", "Dachshund", "German Shepherd", "Golden Retriever", "Labrador Retriever", "Poodle", "Rottweiler", "Shih Tzu", "Siberian Husky", "Yorkshire Terrier", "Mixed / Other"],
Cat: ["Abyssinian", "Bengal", "British Shorthair", "Maine Coon", "Persian", "Ragdoll", "Scottish Fold", "Siamese", "Sphynx", "Mixed / Other"],
Bird: ["Canary", "Cockatiel", "Cockatoo", "Finch", "Lovebird", "Macaw", "Parakeet", "Parrot", "Other"],
Rabbit: ["Dutch", "Flemish Giant", "Holland Lop", "Lionhead", "Mini Rex", "Other"],
Hamster: ["Dwarf", "Roborovski", "Syrian", "Other"],
"Guinea Pig": ["Abyssinian", "American", "Peruvian", "Teddy", "Other"],
Reptile: ["Ball Python", "Bearded Dragon", "Blue-tongued Skink", "Corn Snake", "Leopard Gecko", "Other"],
Fish: ["Angelfish", "Betta", "Cichlid", "Clownfish", "Goldfish", "Guppy", "Tetra", "Other"],
Other: ["Other"],
};
export default function ProfilePage() {
const {user, token, loading, logout, refreshUser} = useAuth();
const router = useRouter();
@@ -18,9 +30,11 @@ export default function ProfilePage() {
const [petName, setPetName] = useState("");
const [species, setSpecies] = useState("");
const [breed, setBreed] = useState("");
const [petAge, setPetAge] = useState("1");
const [submitting, setSubmitting] = useState(false);
const [petError, setPetError] = useState(null);
const [profileForm, setProfileForm] = useState({ fullName: "", email: "", phone: "" });
const [avatarObjectUrl, setAvatarObjectUrl] = useState(null);
const [profileForm, setProfileForm] = useState({ firstName: "", lastName: "", email: "", phone: "", password: "", confirmPassword: "" });
const [profileSubmitting, setProfileSubmitting] = useState(false);
const [profileError, setProfileError] = useState(null);
const [profileSuccess, setProfileSuccess] = useState(null);
@@ -42,9 +56,12 @@ export default function ProfilePage() {
useEffect(() => {
setProfileForm({
fullName: user?.fullName || "",
firstName: user?.firstName || "",
lastName: user?.lastName || "",
email: user?.email || "",
phone: user?.phone || "",
password: "",
confirmPassword: "",
});
}, [user]);
@@ -53,7 +70,7 @@ export default function ProfilePage() {
setLoadingPets(true);
try {
const response = await fetch(`${API_BASE}/api/v1/my-pets`, {
const response = await fetch(`${API_BASE}/api/v1/my-pets?status=Owned`, {
headers: { Authorization: `Bearer ${token}` },
});
@@ -64,25 +81,21 @@ export default function ProfilePage() {
const petData = await response.json();
clearPetImageObjectUrls();
const petsWithResolvedImages = await Promise.all(
(Array.isArray(petData) ? petData : []).map(async (pet) => {
if (!pet.imageUrl) {
return pet;
}
const ownedPets = Array.isArray(petData) ? petData : [];
const petsWithResolvedImages = await Promise.all(
ownedPets.map(async (pet) => {
if (!pet.imageUrl) return pet;
try {
const imageResponse = await fetch(`${API_BASE}${pet.imageUrl}`, {
headers: { Authorization: `Bearer ${token}` },
});
if (!imageResponse.ok) {
return { ...pet, imageUrl: null };
}
if (!imageResponse.ok) return { ...pet, imageUrl: null };
const blob = await imageResponse.blob();
const objectUrl = URL.createObjectURL(blob);
petImageObjectUrlsRef.current.push(objectUrl);
return { ...pet, imageUrl: objectUrl };
} catch {
return { ...pet, imageUrl: null };
@@ -108,11 +121,37 @@ export default function ProfilePage() {
}, [clearPetImageObjectUrls]);
useEffect(() => {
if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
loadPets();
}
}, [user, loadPets]);
useEffect(() => {
let objectUrl = null;
if (user?.avatarUrl && token) {
fetch(`${API_BASE}${user.avatarUrl}`, {
headers: { Authorization: `Bearer ${token}` },
})
.then((res) => (res.ok ? res.blob() : null))
.then((blob) => {
if (blob) {
objectUrl = URL.createObjectURL(blob);
setAvatarObjectUrl(objectUrl);
} else {
setAvatarObjectUrl(null);
}
})
.catch(() => setAvatarObjectUrl(null));
} else {
setAvatarObjectUrl(null);
}
return () => {
if (objectUrl) URL.revokeObjectURL(objectUrl);
};
}, [user?.avatarUrl, token]);
function handleLogout() {
logout();
router.push("/");
@@ -120,10 +159,26 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
async function handleProfileSubmit(e) {
e.preventDefault();
setProfileSubmitting(true);
setProfileError(null);
if (profileForm.password && profileForm.password !== profileForm.confirmPassword) {
setProfileError("Passwords do not match.");
return;
}
setProfileSubmitting(true);
setProfileSuccess(null);
const payload = {
firstName: profileForm.firstName,
lastName: profileForm.lastName,
email: profileForm.email,
phone: profileForm.phone,
};
if (profileForm.password) {
payload.password = profileForm.password;
}
try {
const res = await fetch(`${API_BASE}/api/v1/auth/me`, {
method: "PUT",
@@ -131,7 +186,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(profileForm),
body: JSON.stringify(payload),
});
const data = await res.json().catch(() => null);
@@ -140,6 +195,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
}
await refreshUser();
setProfileForm((prev) => ({ ...prev, password: "", confirmPassword: "" }));
setProfileSuccess("Profile updated successfully.");
}
@@ -222,6 +278,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
setPetName("");
setSpecies("");
setBreed("");
setPetAge("1");
setPetError(null);
setShowForm(true);
}
@@ -231,6 +288,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
setPetName(pet.petName);
setSpecies(pet.species);
setBreed(pet.breed || "");
setPetAge(pet.petAge != null ? String(pet.petAge) : "1");
setPetError(null);
setShowForm(true);
}
@@ -257,7 +315,7 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({ petName, species, breed: breed || null }),
body: JSON.stringify({ petName, species, breed: breed || null, petAge: Number(petAge) }),
});
if (!res.ok) {
@@ -284,14 +342,19 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
}
try {
await fetch(`${API_BASE}/api/v1/my-pets/${id}`, {
const res = await fetch(`${API_BASE}/api/v1/my-pets/${id}`, {
method: "DELETE",
headers: { Authorization: `Bearer ${token}` },
});
if (!res.ok) {
const data = await res.json().catch(() => null);
throw new Error(data?.message || `Failed to remove pet (${res.status})`);
}
loadPets();
}
catch {
catch (err) {
alert(err.message);
}
}
@@ -324,12 +387,14 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
return <main className="auth-page"><p className="profile-loading">Loading…</p></main>;
}
const displayName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.username;
const fields = [
{label: "Full Name", value: user.fullName},
{label: "First Name", value: user.firstName || "N/A"},
{label: "Last Name", value: user.lastName || "N/A"},
{label: "Username", value: user.username},
{label: "Email", value: user.email},
{label: "Phone", value: user.phone || "—"},
{label: "Role", value: user.role},
{label: "Phone", value: user.phone || "N/A"},
...(user.storeName ? [{ label: "Store", value: user.storeName }] : []),
];
@@ -337,14 +402,14 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
<main className="profile-page-layout">
<div className="profile-card">
<div className="profile-avatar-circle">
{user.avatarUrl ? (
<img src={user.avatarUrl} alt={user.fullName || user.username} className="profile-avatar-image" />
{avatarObjectUrl ? (
<img src={avatarObjectUrl} alt={displayName} className="profile-avatar-image" />
) : (
(user.fullName || user.username).charAt(0).toUpperCase()
displayName.charAt(0).toUpperCase()
)}
</div>
<h1 className="profile-name">{user.fullName || user.username}</h1>
<h1 className="profile-name">{displayName}</h1>
<span className="profile-role-badge">{user.role}</span>
<dl className="profile-fields">
@@ -361,13 +426,23 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
{profileError && <div className="appt-error">{profileError}</div>}
{profileSuccess && <div className="appt-success">{profileSuccess}</div>}
<label className="appt-label">
Full Name
First Name
<input
className="appt-input"
type="text"
value={profileForm.fullName}
onChange={(e) => setProfileForm((current) => ({ ...current, fullName: e.target.value }))}
maxLength={100}
value={profileForm.firstName}
onChange={(e) => setProfileForm((current) => ({ ...current, firstName: e.target.value }))}
maxLength={50}
/>
</label>
<label className="appt-label">
Last Name
<input
className="appt-input"
type="text"
value={profileForm.lastName}
onChange={(e) => setProfileForm((current) => ({ ...current, lastName: e.target.value }))}
maxLength={50}
/>
</label>
<label className="appt-label">
@@ -390,6 +465,29 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
maxLength={20}
/>
</label>
<label className="appt-label">
New Password
<input
className="appt-input"
type="password"
value={profileForm.password}
onChange={(e) => setProfileForm((current) => ({ ...current, password: e.target.value }))}
minLength={6}
autoComplete="new-password"
placeholder="Leave blank to keep current"
/>
</label>
<label className="appt-label">
Confirm New Password
<input
className="appt-input"
type="password"
value={profileForm.confirmPassword}
onChange={(e) => setProfileForm((current) => ({ ...current, confirmPassword: e.target.value }))}
autoComplete="new-password"
placeholder="Leave blank to keep current"
/>
</label>
<div className="profile-avatar-actions">
<label className="profile-avatar-upload-btn">
<input
@@ -445,26 +543,45 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
</label>
<label className="appt-label">
Species
<input
className="appt-input"
type="text"
<select
className="appt-select"
value={species}
onChange={(e) => setSpecies(e.target.value)}
onChange={(e) => { setSpecies(e.target.value); setBreed(""); }}
required
maxLength={50}
placeholder="e.g. Dog, Cat, Bird"
/>
>
<option value="">Select a species...</option>
{Object.keys(SPECIES_BREEDS).map((s) => (
<option key={s} value={s}>{s}</option>
))}
</select>
</label>
<label className="appt-label">
Breed (optional)
<input
className="appt-input"
type="text"
Breed
<select
className="appt-select"
value={breed}
onChange={(e) => setBreed(e.target.value)}
maxLength={50}
placeholder="e.g. Golden Retriever"
/>
required
disabled={!species}
>
<option value="">{species ? "Select a breed..." : "Select a species first"}</option>
{(SPECIES_BREEDS[species] || []).map((b) => (
<option key={b} value={b}>{b}</option>
))}
</select>
</label>
<label className="appt-label">
Age (years)
<select
className="appt-select"
value={petAge}
onChange={(e) => setPetAge(e.target.value)}
required
>
{Array.from({ length: 20 }, (_, i) => i + 1).map((n) => (
<option key={n} value={n}>{n}</option>
))}
</select>
</label>
<div className="profile-pet-form-actions">
<button type="submit" className="appt-submit-btn" disabled={submitting}>
@@ -512,13 +629,14 @@ if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
<span className="profile-pet-card-name">{pet.petName}</span>
<span className="profile-pet-card-detail">{pet.species}</span>
{pet.breed && <span className="profile-pet-card-detail">{pet.breed}</span>}
{pet.petAge != null && <span className="profile-pet-card-detail">Age: {pet.petAge === 0 ? "< 1 yr" : `${pet.petAge} yr${pet.petAge !== 1 ? "s" : ""}`}</span>}
</div>
<div className="profile-pet-card-actions">
<button type="button" className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
<button type="button" className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
</div>
</div>
))}
<button type="button" className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
<button type="button" className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
</div>
</div>
))}
</div>
)}
</div>

28
web/app/register/page.js
View File

@@ -22,12 +22,14 @@ function RegisterPage() {
const searchParams = useSearchParams();
const [form, setForm] = useState({
fullName: "",
firstName: "",
lastName: "",
username: "",
email: "",
phone: "",
password: "",
confirmPassword: "",});
confirmPassword: "",
});
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
@@ -47,7 +49,9 @@ function RegisterPage() {
setLoading(true);
try {
await register({fullName: form.fullName,
await register({
firstName: form.firstName,
lastName: form.lastName,
username: form.username,
email: form.email,
phone: form.phone,
@@ -74,12 +78,24 @@ function RegisterPage() {
<form className="auth-form" onSubmit={handleSubmit}>
<label className="auth-label">
Full Name
First Name
<input
className="auth-input"
type="text"
name="fullName"
value={form.fullName}
name="firstName"
value={form.firstName}
onChange={handleChange}
required
/>
</label>
<label className="auth-label">
Last Name
<input
className="auth-input"
type="text"
name="lastName"
value={form.lastName}
onChange={handleChange}
required
/>

1
web/components/Footer.js
View File

@@ -43,7 +43,6 @@ export default function Footer() {
<ul className="footer-links footer-contact">
<li>(403) 123-4567</li>
<li>support@leonspetstore.com</li>
<li>123 Street Street, Calgary, Alberta, Canada</li>
</ul>
</div>

7
web/components/PetProfile.js
View File

@@ -1,7 +1,7 @@
import Link from "next/link";
import { getStatusClass } from "@/components/petUtils";
export default function PetProfile({ petId, petName, petSpecies, petBreed, petAge, petStatus, petPrice, imageUrl }) {
export default function PetProfile({ petId, petName, petSpecies, petBreed, petAge, petStatus, petPrice, imageUrl, storeId, storeName }) {
return (
<div className="pet-detail-card">
<div className="pet-detail-image-wrapper">
@@ -53,7 +53,10 @@ export default function PetProfile({ petId, petName, petSpecies, petBreed, petAg
<p className="pet-detail-cta-text">
Interested in adopting {petName}? Visit us in store or schedule an appointment.
</p>
<Link href={`/appointments?petId=${petId}`} className="pet-detail-cta-btn">
<Link
href={`/appointments?adoptionMode=true&petId=${petId}&petName=${encodeURIComponent(petName || "")}&petSpecies=${encodeURIComponent(petSpecies || "")}&petBreed=${encodeURIComponent(petBreed || "")}${storeId ? `&storeId=${storeId}` : ""}${storeName ? `&storeName=${encodeURIComponent(storeName)}` : ""}`}
className="pet-detail-cta-btn"
>
Schedule an Appointment
</Link>
</div>

10
web/context/AuthContext.js
View File

@@ -79,15 +79,21 @@ export function AuthProvider({ children }) {
return userInfo;
}, [refreshUser]);
const register = useCallback(async ({ username, password, email, fullName, phone }) => {
const register = useCallback(async ({ username, password, email, firstName, lastName, phone }) => {
const res = await fetch("/api/v1/auth/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password, email, fullName, phone }),
body: JSON.stringify({ username, password, email, firstName, lastName, phone }),
});
const data = await res.json();
if (!res.ok) {
if (data.errors && typeof data.errors === "object") {
const fieldErrors = Object.entries(data.errors)
.map(([field, msg]) => `${field}: ${msg}`)
.join(", ");
throw new Error(fieldErrors || data.message || "Registration failed");
}
throw new Error(data.message || "Registration failed");
}