Phase 7

src/app/(staff)/staff/appointments/[id]/page.tsx

@@ -163,14 +163,26 @@ export default async function StaffAppointmentDetailsPage({
             </div>
             <div>
               <span className="text-muted block text-[10px] font-bold tracking-widest uppercase">
-                Duration / Price
+                Duration
               </span>
-              <p className="font-bold">
-                {totalDuration} min · £{totalPrice.toFixed(2)}
-                {discount > 0 && (
-                  <span className="text-accent-loyalty"> (-£{discount.toFixed(2)} reward)</span>
-                )}
-              </p>
+              <p className="font-bold">{totalDuration} min</p>
+            </div>
+          </div>
+
+          <div className="border-line border-t pt-4 text-sm">
+            <div className="flex items-center justify-between">
+              <span className="text-muted">Subtotal</span>
+              <span className="font-bold">£{totalPrice.toFixed(2)}</span>
+            </div>
+            {discount > 0 && (
+              <div className="text-accent-loyalty flex items-center justify-between">
+                <span>Loyalty reward</span>
+                <span className="font-bold">-£{discount.toFixed(2)}</span>
+              </div>
+            )}
+            <div className="border-line mt-1 flex items-center justify-between border-t pt-1">
+              <span className="font-bold">Total</span>
+              <span className="font-bold">£{(totalPrice - discount).toFixed(2)}</span>
             </div>
           </div>