feat: update sidebar nav, add open play toggle, mark courts 5-6 as open play

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/app/(admin)/settings/page.tsx

@@ -37,6 +37,7 @@ interface Court {
   status: string;
   siteId: string;
   site?: { name: string };
+  isOpenPlay?: boolean;
 }
 
 interface User {
@@ -479,7 +480,14 @@ export default function SettingsPage() {
                   <tbody>
                     {courts.map((court) => (
                       <tr key={court.id} className="border-b border-primary-50 hover:bg-primary-50/50">
-                        <td className="px-4 py-3 font-medium text-primary-800">{court.name}</td>
+                        <td className="px-4 py-3 font-medium text-primary-800">
+                          {court.name}
+                          {court.isOpenPlay && (
+                            <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-700">
+                              Open Play
+                            </span>
+                          )}
+                        </td>
                         <td className="px-4 py-3 text-primary-600">{court.site?.name || "-"}</td>
                         <td className="px-4 py-3 text-primary-600 capitalize">{court.type}</td>
                         <td className="px-4 py-3 text-primary-600">${court.hourlyRate}</td>
@@ -709,6 +717,7 @@ function CourtFormModal({
   const [hourlyRate, setHourlyRate] = useState(court?.hourlyRate?.toString() || "300");
   const [peakHourlyRate, setPeakHourlyRate] = useState(court?.peakHourlyRate?.toString() || "");
   const [status, setStatus] = useState(court?.status || "active");
+  const [isOpenPlay, setIsOpenPlay] = useState(court?.isOpenPlay ?? false);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -719,6 +728,7 @@ function CourtFormModal({
       hourlyRate: parseFloat(hourlyRate),
       peakHourlyRate: peakHourlyRate ? parseFloat(peakHourlyRate) : null,
       status,
+      isOpenPlay,
     });
   };
 
@@ -797,6 +807,18 @@ function CourtFormModal({
               <option value="inactive">Inactive</option>
             </select>
           </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="isOpenPlay"
+              checked={isOpenPlay}
+              onChange={(e) => setIsOpenPlay(e.target.checked)}
+              className="rounded border-primary-300"
+            />
+            <label htmlFor="isOpenPlay" className="text-sm text-primary-700">
+              Open Play Court (free, for group scheduling)
+            </label>
+          </div>
           <div className="flex gap-3 pt-4">
             <Button type="button" variant="outline" onClick={onClose} className="flex-1">
               Cancel