From 1f3b435cd679d276544bb70819a1612458e7fd6c Mon Sep 17 00:00:00 2001
From: sahilkashyap64 <sahilkashyap64@gmail.com>
Date: Fri, 8 May 2026 00:33:01 +0530
Subject: [PATCH 1/2] edit packages

---
 src/App.jsx                                   | 136 +++++-
 src/api/CoachApi/packages.js                  |  18 +-
 src/components/dashboard/DashboardPage.jsx    |   4 +
 .../dashboard/sections/PackagesSection.jsx    | 406 ++++++++++++------
 4 files changed, 421 insertions(+), 143 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e463934..6994801 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -11,7 +11,11 @@ import { useCoachStudents } from './hooks/useCoachStudents';
 import useCoachProfile from './hooks/useCoachProfile';
 import useAuth from './hooks/useAuth.jsx';
 import { createDefaultProfile } from './constants/profile';
-import { listCoachPackages } from './api/CoachApi/packages';
+import {
+  deleteCoachPackage,
+  listCoachPackages,
+  updateCoachPackage
+} from './api/CoachApi/packages';
 import {
   addCoachCustomLocation,
   deleteCoachLocation,
@@ -67,6 +71,20 @@ const resolvePackagesFromPayload = (payload) => {
   return [];
 };
 
+const resolvePackageFromPayload = (payload) => {
+  if (!payload || typeof payload !== 'object') {
+    return null;
+  }
+
+  return payload.package || payload.data?.package || payload.data || payload.result || payload.item || payload;
+};
+
+const getApiErrorMessage = (errorBody, fallbackMessage) =>
+  errorBody?.message ||
+  errorBody?.error ||
+  errorBody?.errors?.[0] ||
+  fallbackMessage;
+
 const defaultProfile = createDefaultProfile();
 
 const formatDuration = (duration) => {
@@ -1395,6 +1413,120 @@ function App() {
     packagesFetchedRef.current = true;
   };
 
+  const handlePackageUpdated = useCallback((updatedPackage, packageId, fallbackChanges = {}) => {
+    setProfileData((previousProfile) => {
+      const previousPackages = Array.isArray(previousProfile.packages)
+        ? previousProfile.packages
+        : [];
+
+      return {
+        ...previousProfile,
+        packages: previousPackages.map((existingPackage) => {
+          const existingId = existingPackage?.id ?? existingPackage?.package_id;
+
+          if (String(existingId) !== String(packageId)) {
+            return existingPackage;
+          }
+
+          if (updatedPackage && typeof updatedPackage === 'object') {
+            return {
+              ...existingPackage,
+              ...updatedPackage
+            };
+          }
+
+          return {
+            ...existingPackage,
+            ...fallbackChanges
+          };
+        })
+      };
+    });
+
+    setPackagesError(null);
+    packagesFetchedRef.current = true;
+  }, []);
+
+  const handlePackageArchiveToggle = useCallback(async (packageId, isActive) => {
+    try {
+      const response = await updateCoachPackage(packageId, { isActive });
+
+      if (!response) {
+        return { ok: false, error: 'Your session has expired. Please sign in again.' };
+      }
+
+      if (!response.ok) {
+        let message = 'Failed to update package. Please try again.';
+
+        try {
+          const errorBody = await response.json();
+          message = getApiErrorMessage(errorBody, message);
+        } catch {
+          // Ignore JSON parse errors.
+        }
+
+        return { ok: false, error: message };
+      }
+
+      const payload = await response.json().catch(() => null);
+      const updatedPackage = resolvePackageFromPayload(payload);
+
+      handlePackageUpdated(updatedPackage, packageId, { is_active: isActive, isActive });
+      return { ok: true };
+    } catch (error) {
+      return {
+        ok: false,
+        error: error instanceof Error ? error.message : 'Failed to update package.'
+      };
+    }
+  }, [handlePackageUpdated]);
+
+  const handlePackageDelete = useCallback(async (packageId) => {
+    try {
+      const response = await deleteCoachPackage(packageId);
+
+      if (!response) {
+        return { ok: false, error: 'Your session has expired. Please sign in again.' };
+      }
+
+      if (!response.ok) {
+        let message = 'Failed to delete package. Please try again.';
+
+        try {
+          const errorBody = await response.json();
+          message = getApiErrorMessage(errorBody, message);
+        } catch {
+          // Ignore JSON parse errors.
+        }
+
+        return { ok: false, error: message };
+      }
+
+      setProfileData((previousProfile) => {
+        const previousPackages = Array.isArray(previousProfile.packages)
+          ? previousProfile.packages
+          : [];
+
+        return {
+          ...previousProfile,
+          packages: previousPackages.filter((existingPackage) => {
+            const existingId = existingPackage?.id ?? existingPackage?.package_id;
+            return String(existingId) !== String(packageId);
+          })
+        };
+      });
+
+      setPackagesError(null);
+      packagesFetchedRef.current = true;
+      return { ok: true };
+    } catch (error) {
+      return {
+        ok: false,
+        error: error instanceof Error ? error.message : 'Failed to delete package.'
+      };
+    }
+  }, []);
+
   const handleOnboardingComplete = async (data) => {
     try {
       const result = await saveProfile(data);
@@ -1688,6 +1820,8 @@ function App() {
           packagesLoading={packagesLoading}
           packagesError={packagesError}
           onRefreshPackages={refreshPackages}
+          onTogglePackageActive={handlePackageArchiveToggle}
+          onDeletePackage={handlePackageDelete}
           locationsData={coachLocations}
           locationsLoading={locationsLoading}
           locationsError={locationsError}
diff --git a/src/api/CoachApi/packages.js b/src/api/CoachApi/packages.js
index 85fd7fe..f127984 100644
--- a/src/api/CoachApi/packages.js
+++ b/src/api/CoachApi/packages.js
@@ -3,11 +3,27 @@ import { apiRequest } from '../apiRequest';
 const buildPackagesPath = (includeInactive) =>
   includeInactive ? '/coach/packages?includeInactive=true' : '/coach/packages';
 
+const buildPackagePath = (id) => `/coach/packages/${id}`;
+
 export const listCoachPackages = async ({ includeInactive = false } = {}) =>
   apiRequest(buildPackagesPath(includeInactive), {
     method: 'GET'
   });
 
+export const updateCoachPackage = async (id, payload) =>
+  apiRequest(buildPackagePath(id), {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload)
+  });
+
+export const deleteCoachPackage = async (id) =>
+  apiRequest(buildPackagePath(id), {
+    method: 'DELETE'
+  });
+
 export default {
-  listCoachPackages
+  listCoachPackages,
+  updateCoachPackage,
+  deleteCoachPackage
 };
diff --git a/src/components/dashboard/DashboardPage.jsx b/src/components/dashboard/DashboardPage.jsx
index 302ed42..e674549 100644
--- a/src/components/dashboard/DashboardPage.jsx
+++ b/src/components/dashboard/DashboardPage.jsx
@@ -421,6 +421,8 @@ const DashboardPage = ({
   packagesLoading = false,
   packagesError = null,
   onRefreshPackages = () => {},
+  onTogglePackageActive = async () => ({ ok: false }),
+  onDeletePackage = async () => ({ ok: false }),
   locationsData = [],
   locationsLoading = false,
   locationsError = null,
@@ -1554,6 +1556,8 @@ const DashboardPage = ({
             packagesError={packagesError}
             onRefreshPackages={onRefreshPackages}
             onOpenCreatePackage={onOpenCreatePackage}
+            onTogglePackageActive={onTogglePackageActive}
+            onDeletePackage={onDeletePackage}
             currencyFormatter={currencyFormatter}
             formatLessonTypeLabel={formatLessonTypeLabel}
             formatValidityLabel={formatValidityLabel}
diff --git a/src/components/dashboard/sections/PackagesSection.jsx b/src/components/dashboard/sections/PackagesSection.jsx
index 6c2df26..ebe9ba4 100644
--- a/src/components/dashboard/sections/PackagesSection.jsx
+++ b/src/components/dashboard/sections/PackagesSection.jsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import { Package, RefreshCw } from 'lucide-react';
+import React, { useState } from 'react';
+import { Archive, Package, RefreshCw, RotateCcw, Trash2 } from 'lucide-react';
+import ConfirmationDialog from '../../modals/ConfirmationDialog';
 
 const PackagesSection = ({
   packages,
@@ -7,155 +8,278 @@ const PackagesSection = ({
   packagesError,
   onRefreshPackages,
   onOpenCreatePackage,
+  onTogglePackageActive,
+  onDeletePackage,
   currencyFormatter,
   formatLessonTypeLabel,
   formatValidityLabel
-}) => (
-  <section className="mt-6 space-y-6">
-    <div className="rounded-2xl bg-white p-4 shadow-sm">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div>
-          <h2 className="text-xl font-semibold text-gray-900">Lesson Packages</h2>
-          <p className="text-sm text-gray-500">
-            Create and manage lesson bundles for your students
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={onOpenCreatePackage}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-purple-700 sm:w-auto sm:justify-start"
-        >
-          <Package className="h-4 w-4" />
-          <span>Create package</span>
-        </button>
-      </div>
+}) => {
+  const [packageActionError, setPackageActionError] = useState('');
+  const [pendingPackageAction, setPendingPackageAction] = useState(null);
+  const [packagePendingDelete, setPackagePendingDelete] = useState(null);
 
-      <div className="mt-6 space-y-4">
-        {packagesLoading && packages.length === 0 && (
-          <div className="flex flex-col items-center justify-center space-y-2 py-10">
-            <RefreshCw className="h-6 w-6 animate-spin text-purple-600" />
-            <p className="text-sm text-gray-500">Loading packages...</p>
-          </div>
-        )}
-
-        {!packagesLoading && packagesError && (
-          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
-            <p className="font-medium">We couldn't load your packages.</p>
-            <p className="mt-1 text-xs text-red-600">{packagesError}</p>
-            <button
-              type="button"
-              onClick={onRefreshPackages}
-              className="mt-3 inline-flex items-center space-x-2 rounded-lg bg-red-600 px-3 py-2 text-xs font-medium text-white hover:bg-red-700"
-            >
-              <RefreshCw className="h-4 w-4" />
-              <span>Try again</span>
-            </button>
-          </div>
-        )}
+  const handleTogglePackage = async (lessonPackage) => {
+    if (!lessonPackage?.id || pendingPackageAction) {
+      return;
+    }
+
+    setPendingPackageAction({
+      id: lessonPackage.id,
+      type: lessonPackage.isActive ? 'archive' : 'restore'
+    });
+    setPackageActionError('');
+
+    const result = await onTogglePackageActive(lessonPackage.id, !lessonPackage.isActive);
+
+    if (!result?.ok) {
+      setPackageActionError(result?.error || 'Failed to update package.');
+    }
+
+    setPendingPackageAction(null);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!packagePendingDelete?.id || pendingPackageAction) {
+      return;
+    }
 
-        {!packagesLoading && !packagesError && packages.length === 0 ? (
-          <div className="rounded-xl border border-dashed border-gray-200 bg-white p-6 text-center">
-            <h3 className="text-base font-semibold text-gray-900">No packages yet</h3>
-            <p className="mt-2 text-sm text-gray-500">
-              Create your first lesson bundle to offer students multi-lesson savings.
+    setPendingPackageAction({
+      id: packagePendingDelete.id,
+      type: 'delete'
+    });
+    setPackageActionError('');
+
+    const result = await onDeletePackage(packagePendingDelete.id);
+
+    if (!result?.ok) {
+      setPackageActionError(result?.error || 'Failed to delete package.');
+    } else {
+      setPackagePendingDelete(null);
+    }
+
+    setPendingPackageAction(null);
+  };
+
+  return (
+    <section className="mt-6 space-y-6">
+      <div className="rounded-2xl bg-white p-4 shadow-sm">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900">Lesson Packages</h2>
+            <p className="text-sm text-gray-500">
+              Create and manage lesson bundles for your students
             </p>
-            <button
-              type="button"
-              onClick={onOpenCreatePackage}
-              className="mt-4 inline-flex items-center justify-center space-x-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-purple-700"
-            >
-              <Package className="h-4 w-4" />
-              <span>Create package</span>
-            </button>
           </div>
-        ) : null}
-
-        {packages.length > 0 &&
-          packages.map((lessonPackage) => (
-            <div
-              key={lessonPackage.id}
-              className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
-            >
-              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-                <div>
-                  <div className="flex flex-wrap items-center gap-2">
-                    <h3 className="text-lg font-semibold text-gray-900">
-                      {lessonPackage.name}
-                    </h3>
-                    {!lessonPackage.isActive && (
-                      <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600">
-                        Archived
-                      </span>
-                    )}
+          <button
+            type="button"
+            onClick={onOpenCreatePackage}
+            className="flex w-full items-center justify-center space-x-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-purple-700 sm:w-auto sm:justify-start"
+          >
+            <Package className="h-4 w-4" />
+            <span>Create package</span>
+          </button>
+        </div>
+
+        <div className="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
+          Purchased packages are locked. Coaches can only archive or restore them through edit.
+        </div>
+
+        <div className="mt-6 space-y-4">
+          {packageActionError && (
+            <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+              {packageActionError}
+            </div>
+          )}
+
+          {packagesLoading && packages.length === 0 && (
+            <div className="flex flex-col items-center justify-center space-y-2 py-10">
+              <RefreshCw className="h-6 w-6 animate-spin text-purple-600" />
+              <p className="text-sm text-gray-500">Loading packages...</p>
+            </div>
+          )}
+
+          {!packagesLoading && packagesError && (
+            <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+              <p className="font-medium">We couldn't load your packages.</p>
+              <p className="mt-1 text-xs text-red-600">{packagesError}</p>
+              <button
+                type="button"
+                onClick={onRefreshPackages}
+                className="mt-3 inline-flex items-center space-x-2 rounded-lg bg-red-600 px-3 py-2 text-xs font-medium text-white hover:bg-red-700"
+              >
+                <RefreshCw className="h-4 w-4" />
+                <span>Try again</span>
+              </button>
+            </div>
+          )}
+
+          {!packagesLoading && !packagesError && packages.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-gray-200 bg-white p-6 text-center">
+              <h3 className="text-base font-semibold text-gray-900">No packages yet</h3>
+              <p className="mt-2 text-sm text-gray-500">
+                Create your first lesson bundle to offer students multi-lesson savings.
+              </p>
+              <button
+                type="button"
+                onClick={onOpenCreatePackage}
+                className="mt-4 inline-flex items-center justify-center space-x-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-purple-700"
+              >
+                <Package className="h-4 w-4" />
+                <span>Create package</span>
+              </button>
+            </div>
+          ) : null}
+
+          {packages.length > 0 &&
+            packages.map((lessonPackage) => {
+              const isPending = pendingPackageAction?.id === lessonPackage.id;
+              const isArchiving = isPending && pendingPackageAction?.type === 'archive';
+              const isRestoring = isPending && pendingPackageAction?.type === 'restore';
+              const isDeleting = isPending && pendingPackageAction?.type === 'delete';
+
+              return (
+                <div
+                  key={lessonPackage.id}
+                  className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
+                >
+                  <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+                    <div>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <h3 className="text-lg font-semibold text-gray-900">
+                          {lessonPackage.name}
+                        </h3>
+                        {!lessonPackage.isActive && (
+                          <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600">
+                            Archived
+                          </span>
+                        )}
+                      </div>
+                      {lessonPackage.description && (
+                        <p className="mt-1 text-sm text-gray-500">
+                          {lessonPackage.description}
+                        </p>
+                      )}
+                    </div>
+                    <div className="flex flex-col gap-3 md:items-end">
+                      <div className="flex flex-wrap gap-2 md:justify-end">
+                        {lessonPackage.lessonTypes.length > 0 ? (
+                          lessonPackage.lessonTypes.map((type) => (
+                            <span
+                              key={`${lessonPackage.id}-${type}`}
+                              className="rounded-full bg-purple-50 px-3 py-1 text-xs font-medium text-purple-700"
+                            >
+                              {formatLessonTypeLabel(type)}
+                            </span>
+                          ))
+                        ) : (
+                          <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600">
+                            Any lesson type
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex flex-wrap gap-2 md:justify-end">
+                        <button
+                          type="button"
+                          onClick={() => handleTogglePackage(lessonPackage)}
+                          disabled={isPending}
+                          className="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-xs font-medium text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
+                        >
+                          {lessonPackage.isActive ? (
+                            <Archive className="h-4 w-4" />
+                          ) : (
+                            <RotateCcw className="h-4 w-4" />
+                          )}
+                          <span>
+                            {lessonPackage.isActive
+                              ? isArchiving
+                                ? 'Archiving...'
+                                : 'Archive'
+                              : isRestoring
+                                ? 'Restoring...'
+                                : 'Restore'}
+                          </span>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setPackageActionError('');
+                            setPackagePendingDelete(lessonPackage);
+                          }}
+                          disabled={isPending}
+                          className="inline-flex items-center gap-2 rounded-lg border border-red-200 px-3 py-2 text-xs font-medium text-red-700 transition hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-60"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                          <span>{isDeleting ? 'Deleting...' : 'Delete'}</span>
+                        </button>
+                      </div>
+                    </div>
                   </div>
-                  {lessonPackage.description && (
-                    <p className="mt-1 text-sm text-gray-500">
-                      {lessonPackage.description}
-                    </p>
-                  )}
-                </div>
-                <div className="flex flex-wrap gap-2 md:justify-end">
-                  {lessonPackage.lessonTypes.length > 0 ? (
-                    lessonPackage.lessonTypes.map((type) => (
-                      <span
-                        key={`${lessonPackage.id}-${type}`}
-                        className="rounded-full bg-purple-50 px-3 py-1 text-xs font-medium text-purple-700"
+
+                  <div className="mt-4 grid gap-4 md:grid-cols-4">
+                    <div>
+                      <p className="text-xs uppercase text-gray-500">Price</p>
+                      <p className="text-sm font-medium text-gray-900">
+                        {lessonPackage.totalPrice !== null
+                          ? currencyFormatter.format(lessonPackage.totalPrice)
+                          : 'N/A'}
+                      </p>
+                      {lessonPackage.perLessonPrice !== null && (
+                        <p className="text-xs text-gray-500">
+                          {currencyFormatter.format(lessonPackage.perLessonPrice)} per lesson
+                        </p>
+                      )}
+                    </div>
+                    <div>
+                      <p className="text-xs uppercase text-gray-500">Lessons Included</p>
+                      <p className="text-sm font-medium text-gray-900">
+                        {lessonPackage.lessonCount !== null
+                          ? `${lessonPackage.lessonCount} lessons`
+                          : 'N/A'}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs uppercase text-gray-500">Validity</p>
+                      <p className="text-sm font-medium text-gray-900">
+                        {formatValidityLabel(lessonPackage.validityMonths)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs uppercase text-gray-500">Status</p>
+                      <p
+                        className={`text-sm font-medium ${
+                          lessonPackage.isActive ? 'text-green-600' : 'text-gray-500'
+                        }`}
                       >
-                        {formatLessonTypeLabel(type)}
-                      </span>
-                    ))
-                  ) : (
-                    <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600">
-                      Any lesson type
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="mt-4 grid gap-4 md:grid-cols-4">
-                <div>
-                  <p className="text-xs uppercase text-gray-500">Price</p>
-                  <p className="text-sm font-medium text-gray-900">
-                    {lessonPackage.totalPrice !== null
-                      ? currencyFormatter.format(lessonPackage.totalPrice)
-                      : 'N/A'}
-                  </p>
-                  {lessonPackage.perLessonPrice !== null && (
-                    <p className="text-xs text-gray-500">
-                      {currencyFormatter.format(lessonPackage.perLessonPrice)} per lesson
-                    </p>
-                  )}
-                </div>
-                <div>
-                  <p className="text-xs uppercase text-gray-500">Lessons Included</p>
-                  <p className="text-sm font-medium text-gray-900">
-                    {lessonPackage.lessonCount !== null
-                      ? `${lessonPackage.lessonCount} lessons`
-                      : 'N/A'}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs uppercase text-gray-500">Validity</p>
-                  <p className="text-sm font-medium text-gray-900">
-                    {formatValidityLabel(lessonPackage.validityMonths)}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs uppercase text-gray-500">Status</p>
-                  <p
-                    className={`text-sm font-medium ${
-                      lessonPackage.isActive ? 'text-green-600' : 'text-gray-500'
-                    }`}
-                  >
-                    {lessonPackage.isActive ? 'Active' : 'Archived'}
-                  </p>
+                        {lessonPackage.isActive ? 'Active' : 'Archived'}
+                      </p>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          ))}
+              );
+            })}
+        </div>
       </div>
-    </div>
-  </section>
-);
+
+      <ConfirmationDialog
+        isOpen={Boolean(packagePendingDelete)}
+        title="Delete Package"
+        description={
+          packagePendingDelete
+            ? `Delete "${packagePendingDelete.name}"? This action cannot be undone.`
+            : 'Delete this package?'
+        }
+        confirmLabel="Delete Package"
+        cancelLabel="Keep Package"
+        onConfirm={handleConfirmDelete}
+        onCancel={() => {
+          if (!pendingPackageAction) {
+            setPackagePendingDelete(null);
+          }
+        }}
+        tone="danger"
+      />
+    </section>
+  );
+};
 
 export default PackagesSection;

From 28afc4b9c04244a5f84067f701ade55abc24d243 Mon Sep 17 00:00:00 2001
From: sahilkashyap64 <sahilkashyap64@gmail.com>
Date: Fri, 8 May 2026 00:39:31 +0530
Subject: [PATCH 2/2] Packages without purchases can be edited fully. Once
 purchased, only archive or restore is allowed. and View buyers

---
 src/App.jsx                                   |  28 +-
 src/api/CoachApi/packages.js                  |  32 +-
 src/components/dashboard/DashboardPage.jsx    |  14 +-
 .../dashboard/sections/PackagesSection.jsx    |  57 ++-
 src/components/modals/CreatePackageModal.jsx  | 189 +++++++---
 .../modals/PackagePurchasesModal.jsx          | 327 ++++++++++++++++++
 6 files changed, 593 insertions(+), 54 deletions(-)
 create mode 100644 src/components/modals/PackagePurchasesModal.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 6994801..7ecbb43 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import OnboardingFlow from './components/onboarding/OnboardingFlow';
 import AvailabilityModal from './components/modals/AvailabilityModal';
 import ConfirmationDialog from './components/modals/ConfirmationDialog';
 import CreatePackageModal from './components/modals/CreatePackageModal';
+import PackagePurchasesModal from './components/modals/PackagePurchasesModal';
 import LessonDetailModal from './components/modals/LessonDetailModal';
 import LoginPage from './components/auth/LoginPage';
 import { useCoachSchedule } from './hooks/useCoachSchedule';
@@ -167,6 +168,8 @@ function App() {
   const [visibleCalendarDates, setVisibleCalendarDates] = useState([]);
   const [showAddLessonModal, setShowAddLessonModal] = useState(false);
   const [showCreatePackageModal, setShowCreatePackageModal] = useState(false);
+  const [selectedPackageForEdit, setSelectedPackageForEdit] = useState(null);
+  const [selectedPackageForPurchases, setSelectedPackageForPurchases] = useState(null);
   const [showLessonDetailModal, setShowLessonDetailModal] = useState(false);
   const [showCreateLessonModal, setShowCreateLessonModal] = useState(false);
   const [showLessonConfirmedSheet, setShowLessonConfirmedSheet] = useState(false);
@@ -1527,6 +1530,11 @@ function App() {
     }
   }, []);
 
+  const handlePackageModalClose = useCallback(() => {
+    setShowCreatePackageModal(false);
+    setSelectedPackageForEdit(null);
+  }, []);
+
   const handleOnboardingComplete = async (data) => {
     try {
       const result = await saveProfile(data);
@@ -1806,7 +1814,15 @@ function App() {
           onEmptySlotSelect={handleEmptySlotSelect}
           onOpenAddAvailability={handleAddAvailabilityOpen}
           onOpenCreateLesson={handleCreateLessonOpen}
-          onOpenCreatePackage={() => setShowCreatePackageModal(true)}
+          onOpenCreatePackage={() => {
+            setSelectedPackageForEdit(null);
+            setShowCreatePackageModal(true);
+          }}
+          onEditPackage={(lessonPackage) => {
+            setSelectedPackageForEdit(lessonPackage);
+            setShowCreatePackageModal(true);
+          }}
+          onViewPackagePurchases={(lessonPackage) => setSelectedPackageForPurchases(lessonPackage)}
           onRequestAvailabilityOnboarding={handleRequestAvailabilityOnboarding}
           onOpenSettings={() => navigate('/settings')}
           onOpenNotifications={() => navigate('/notifications')}
@@ -1902,8 +1918,16 @@ function App() {
 
       <CreatePackageModal
         isOpen={showCreatePackageModal}
-        onClose={() => setShowCreatePackageModal(false)}
+        onClose={handlePackageModalClose}
         onCreated={handlePackageCreated}
+        onUpdated={handlePackageUpdated}
+        packageToEdit={selectedPackageForEdit}
+      />
+
+      <PackagePurchasesModal
+        isOpen={Boolean(selectedPackageForPurchases)}
+        onClose={() => setSelectedPackageForPurchases(null)}
+        lessonPackage={selectedPackageForPurchases}
       />
 
       <AvailabilityModal
diff --git a/src/api/CoachApi/packages.js b/src/api/CoachApi/packages.js
index f127984..d6aed0c 100644
--- a/src/api/CoachApi/packages.js
+++ b/src/api/CoachApi/packages.js
@@ -10,6 +10,13 @@ export const listCoachPackages = async ({ includeInactive = false } = {}) =>
     method: 'GET'
   });
 
+export const createCoachPackage = async (payload) =>
+  apiRequest('/coach/packages', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload)
+  });
+
 export const updateCoachPackage = async (id, payload) =>
   apiRequest(buildPackagePath(id), {
     method: 'PATCH',
@@ -22,8 +29,31 @@ export const deleteCoachPackage = async (id) =>
     method: 'DELETE'
   });
 
+export const getCoachPackagePurchases = async (id, params = {}) => {
+  const query = new URLSearchParams();
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === null || value === undefined || value === '') {
+      return;
+    }
+
+    query.set(key, String(value));
+  });
+
+  const queryString = query.toString();
+  const path = queryString
+    ? `${buildPackagePath(id)}/purchases?${queryString}`
+    : `${buildPackagePath(id)}/purchases`;
+
+  return apiRequest(path, {
+    method: 'GET'
+  });
+};
+
 export default {
+  createCoachPackage,
   listCoachPackages,
   updateCoachPackage,
-  deleteCoachPackage
+  deleteCoachPackage,
+  getCoachPackagePurchases
 };
diff --git a/src/components/dashboard/DashboardPage.jsx b/src/components/dashboard/DashboardPage.jsx
index e674549..8ff0c76 100644
--- a/src/components/dashboard/DashboardPage.jsx
+++ b/src/components/dashboard/DashboardPage.jsx
@@ -410,6 +410,8 @@ const DashboardPage = ({
   onEmptySlotSelect,
   onOpenAddAvailability,
   onOpenCreatePackage,
+  onEditPackage = () => {},
+  onViewPackagePurchases = () => {},
   onOpenCreateLesson,
   onRequestAvailabilityOnboarding,
   onOpenSettings,
@@ -494,7 +496,15 @@ const DashboardPage = ({
               ? totalPrice / lessonCount
               : null,
           lessonTypes,
-          isActive: entry.is_active ?? entry.isActive ?? true
+          isActive: entry.is_active ?? entry.isActive ?? true,
+          hasPurchaseHistory: Boolean(
+            entry.has_purchase_history ?? entry.hasPurchaseHistory ?? false
+          ),
+          purchaseCount: parseNumber(entry.purchase_count ?? entry.purchaseCount) ?? 0,
+          lastPurchasedAt:
+            entry.last_purchased_at ??
+            entry.lastPurchasedAt ??
+            null
         };
       })
       .sort((a, b) => {
@@ -1556,6 +1566,8 @@ const DashboardPage = ({
             packagesError={packagesError}
             onRefreshPackages={onRefreshPackages}
             onOpenCreatePackage={onOpenCreatePackage}
+            onEditPackage={onEditPackage}
+            onViewPackagePurchases={onViewPackagePurchases}
             onTogglePackageActive={onTogglePackageActive}
             onDeletePackage={onDeletePackage}
             currencyFormatter={currencyFormatter}
diff --git a/src/components/dashboard/sections/PackagesSection.jsx b/src/components/dashboard/sections/PackagesSection.jsx
index ebe9ba4..9e06f83 100644
--- a/src/components/dashboard/sections/PackagesSection.jsx
+++ b/src/components/dashboard/sections/PackagesSection.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Archive, Package, RefreshCw, RotateCcw, Trash2 } from 'lucide-react';
+import { Archive, Edit3, Package, RefreshCw, RotateCcw, Trash2, Users } from 'lucide-react';
 import ConfirmationDialog from '../../modals/ConfirmationDialog';
 
 const PackagesSection = ({
@@ -8,6 +8,8 @@ const PackagesSection = ({
   packagesError,
   onRefreshPackages,
   onOpenCreatePackage,
+  onEditPackage,
+  onViewPackagePurchases,
   onTogglePackageActive,
   onDeletePackage,
   currencyFormatter,
@@ -60,6 +62,23 @@ const PackagesSection = ({
     setPendingPackageAction(null);
   };
 
+  const formatPurchaseDate = (value) => {
+    if (!value) {
+      return 'Never';
+    }
+
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+      return 'Never';
+    }
+
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    }).format(date);
+  };
+
   return (
     <section className="mt-6 space-y-6">
       <div className="rounded-2xl bg-white p-4 shadow-sm">
@@ -81,7 +100,7 @@ const PackagesSection = ({
         </div>
 
         <div className="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
-          Purchased packages are locked. Coaches can only archive or restore them through edit.
+          Packages without purchases can be edited fully. Once purchased, only archive or restore is allowed.
         </div>
 
         <div className="mt-6 space-y-4">
@@ -136,6 +155,7 @@ const PackagesSection = ({
               const isArchiving = isPending && pendingPackageAction?.type === 'archive';
               const isRestoring = isPending && pendingPackageAction?.type === 'restore';
               const isDeleting = isPending && pendingPackageAction?.type === 'delete';
+              const isPurchased = lessonPackage.hasPurchaseHistory;
 
               return (
                 <div
@@ -159,6 +179,19 @@ const PackagesSection = ({
                           {lessonPackage.description}
                         </p>
                       )}
+                      <div className="mt-3 flex flex-wrap gap-2 text-xs text-gray-500">
+                        <span className="rounded-full bg-gray-100 px-3 py-1 font-medium text-gray-600">
+                          {lessonPackage.purchaseCount} purchases
+                        </span>
+                        <span className="rounded-full bg-gray-100 px-3 py-1 font-medium text-gray-600">
+                          Last purchased {formatPurchaseDate(lessonPackage.lastPurchasedAt)}
+                        </span>
+                        {isPurchased && (
+                          <span className="rounded-full bg-amber-100 px-3 py-1 font-medium text-amber-800">
+                            Locked after purchase
+                          </span>
+                        )}
+                      </div>
                     </div>
                     <div className="flex flex-col gap-3 md:items-end">
                       <div className="flex flex-wrap gap-2 md:justify-end">
@@ -178,6 +211,26 @@ const PackagesSection = ({
                         )}
                       </div>
                       <div className="flex flex-wrap gap-2 md:justify-end">
+                        {!isPurchased && (
+                          <button
+                            type="button"
+                            onClick={() => onEditPackage(lessonPackage)}
+                            disabled={isPending}
+                            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-xs font-medium text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
+                          >
+                            <Edit3 className="h-4 w-4" />
+                            <span>Edit</span>
+                          </button>
+                        )}
+                        <button
+                          type="button"
+                          onClick={() => onViewPackagePurchases(lessonPackage)}
+                          disabled={isPending}
+                          className="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-xs font-medium text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
+                        >
+                          <Users className="h-4 w-4" />
+                          <span>View Buyers</span>
+                        </button>
                         <button
                           type="button"
                           onClick={() => handleTogglePackage(lessonPackage)}
diff --git a/src/components/modals/CreatePackageModal.jsx b/src/components/modals/CreatePackageModal.jsx
index 1df817e..2af29d7 100644
--- a/src/components/modals/CreatePackageModal.jsx
+++ b/src/components/modals/CreatePackageModal.jsx
@@ -1,5 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { apiRequest } from '../../api/apiRequest';
+import {
+  createCoachPackage,
+  updateCoachPackage
+} from '../../api/CoachApi/packages';
 import Modal, { ModalBody, ModalFooter, ModalHeader } from './Modal';
 
 const LESSON_TYPE_OPTIONS = [
@@ -8,32 +11,68 @@ const LESSON_TYPE_OPTIONS = [
   { id: 'group', label: 'Group Classes' }
 ];
 
-const buildInitialFormState = () => ({
-  name: '',
-  description: '',
-  lessonCount: '',
-  totalPrice: '',
-  validityMonths: '',
-  lessonTypesAllowed: ['private']
+const resolvePackageFromPayload = (payload) => {
+  if (!payload || typeof payload !== 'object') {
+    return null;
+  }
+
+  return payload.package || payload.data?.package || payload.data || payload.result || payload.item || payload;
+};
+
+const getApiErrorMessage = (errorBody, fallbackMessage) =>
+  errorBody?.message ||
+  errorBody?.error ||
+  errorBody?.errors?.[0] ||
+  fallbackMessage;
+
+const buildInitialFormState = (lessonPackage) => ({
+  name: lessonPackage?.name || '',
+  description: lessonPackage?.description || '',
+  lessonCount:
+    lessonPackage?.lessonCount === null || lessonPackage?.lessonCount === undefined
+      ? ''
+      : String(lessonPackage.lessonCount),
+  totalPrice:
+    lessonPackage?.totalPrice === null || lessonPackage?.totalPrice === undefined
+      ? ''
+      : String(lessonPackage.totalPrice),
+  validityMonths:
+    lessonPackage?.validityMonths === null
+      ? '0'
+      : lessonPackage?.validityMonths === undefined
+      ? ''
+      : String(lessonPackage.validityMonths),
+  lessonTypesAllowed:
+    Array.isArray(lessonPackage?.lessonTypes) && lessonPackage.lessonTypes.length > 0
+      ? lessonPackage.lessonTypes
+      : ['private'],
+  isActive: lessonPackage?.isActive ?? true
 });
 
-const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
-  const [formValues, setFormValues] = useState(buildInitialFormState);
+const CreatePackageModal = ({
+  isOpen,
+  onClose,
+  onCreated = () => {},
+  onUpdated = () => {},
+  packageToEdit = null
+}) => {
+  const isEditMode = Boolean(packageToEdit?.id);
+  const isLockedAfterPurchase = Boolean(packageToEdit?.hasPurchaseHistory);
+  const [formValues, setFormValues] = useState(buildInitialFormState(packageToEdit));
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState('');
 
-  const lessonTypesSelected = useMemo(() => new Set(formValues.lessonTypesAllowed), [formValues.lessonTypesAllowed]);
-
-  const resetForm = () => {
-    setFormValues(buildInitialFormState());
-    setError('');
-  };
+  const lessonTypesSelected = useMemo(
+    () => new Set(formValues.lessonTypesAllowed),
+    [formValues.lessonTypesAllowed]
+  );
 
   useEffect(() => {
     if (isOpen) {
-      resetForm();
+      setFormValues(buildInitialFormState(packageToEdit));
+      setError('');
     }
-  }, [isOpen]);
+  }, [isOpen, packageToEdit]);
 
   const handleInputChange = (field) => (event) => {
     const { value } = event.target;
@@ -44,6 +83,10 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
   };
 
   const toggleLessonType = (type) => {
+    if (isLockedAfterPurchase) {
+      return;
+    }
+
     setFormValues((previous) => {
       const nextSelection = new Set(previous.lessonTypesAllowed);
 
@@ -80,6 +123,10 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
       return false;
     }
 
+    if (formValues.lessonTypesAllowed.length === 0) {
+      return false;
+    }
+
     return true;
   }, [formValues]);
 
@@ -98,15 +145,18 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
       totalPrice: Number(formValues.totalPrice),
       validityMonths:
         formValues.validityMonths === '0' ? null : Number(formValues.validityMonths),
-      lessonTypesAllowed: formValues.lessonTypesAllowed
+      lessonTypesAllowed: formValues.lessonTypesAllowed,
+      isActive: Boolean(formValues.isActive)
     };
 
+    const requestPayload = isLockedAfterPurchase
+      ? { isActive: payload.isActive }
+      : payload;
+
     try {
-      const response = await apiRequest('/coach/packages', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      });
+      const response = isEditMode
+        ? await updateCoachPackage(packageToEdit.id, requestPayload)
+        : await createCoachPackage(payload);
 
       if (!response) {
         setError('Your session has expired. Please sign in again.');
@@ -114,16 +164,14 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
       }
 
       if (!response.ok) {
-        let message = 'Failed to create package. Please try again.';
+        let message = isEditMode
+          ? 'Failed to update package. Please try again.'
+          : 'Failed to create package. Please try again.';
 
         try {
           const errorBody = await response.json();
-          message =
-            errorBody?.message ||
-            errorBody?.error ||
-            errorBody?.errors?.[0] ||
-            message;
-        } catch (parseError) {
+          message = getApiErrorMessage(errorBody, message);
+        } catch {
           // Ignore JSON parse errors and keep the default message.
         }
 
@@ -131,13 +179,19 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
         return;
       }
 
-      const createdPackage = await response.json().catch(() => null);
-      onCreated(createdPackage);
-      resetForm();
+      const responseBody = await response.json().catch(() => null);
+      const resolvedPackage = resolvePackageFromPayload(responseBody);
+
+      if (isEditMode) {
+        onUpdated(resolvedPackage, packageToEdit.id, requestPayload);
+      } else {
+        onCreated(resolvedPackage);
+      }
+
       onClose();
     } catch (requestError) {
       setError('An unexpected error occurred. Please try again.');
-      console.error('Failed to create package', requestError);
+      console.error('Failed to submit package', requestError);
     } finally {
       setIsSubmitting(false);
     }
@@ -145,57 +199,70 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} panelClassName="max-w-md">
-      <ModalHeader title="Create Lesson Package" onClose={onClose} />
+      <ModalHeader
+        title={isEditMode ? 'Edit Lesson Package' : 'Create Lesson Package'}
+        description={
+          isLockedAfterPurchase
+            ? 'This package has purchase history. Only archive or restore is allowed.'
+            : undefined
+        }
+        onClose={onClose}
+      />
       <ModalBody className="space-y-4">
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Package Name *</label>
+          <label className="mb-1 block text-sm font-medium text-gray-700">Package Name *</label>
           <input
             type="text"
             placeholder="e.g., 10 Lesson Bundle"
             value={formValues.name}
             onChange={handleInputChange('name')}
-            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+            disabled={isLockedAfterPurchase}
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:bg-gray-100"
           />
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+          <label className="mb-1 block text-sm font-medium text-gray-700">Description</label>
           <textarea
             placeholder="Brief description of the package..."
             value={formValues.description}
             onChange={handleInputChange('description')}
-            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 h-20"
+            disabled={isLockedAfterPurchase}
+            className="h-20 w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:bg-gray-100"
           />
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Number of Lessons *</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Number of Lessons *</label>
             <input
               type="number"
               min="1"
               placeholder="10"
               value={formValues.lessonCount}
               onChange={handleInputChange('lessonCount')}
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+              disabled={isLockedAfterPurchase}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:bg-gray-100"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Total Price ($) *</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Total Price ($) *</label>
             <input
               type="number"
               min="0"
               placeholder="850"
               value={formValues.totalPrice}
               onChange={handleInputChange('totalPrice')}
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+              disabled={isLockedAfterPurchase}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:bg-gray-100"
             />
           </div>
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Validity Period *</label>
+          <label className="mb-1 block text-sm font-medium text-gray-700">Validity Period *</label>
           <select
             value={formValues.validityMonths}
             onChange={handleInputChange('validityMonths')}
-            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+            disabled={isLockedAfterPurchase}
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:bg-gray-100"
           >
             <option value="">Select validity</option>
             <option value="1">1 month</option>
@@ -206,7 +273,7 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
           </select>
         </div>
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Lesson Types Allowed</label>
+          <label className="mb-1 block text-sm font-medium text-gray-700">Lesson Types Allowed</label>
           <div className="space-y-2">
             {LESSON_TYPE_OPTIONS.map(({ id, label }) => (
               <label key={id} className="flex items-center">
@@ -215,12 +282,32 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
                   className="rounded text-purple-600"
                   checked={lessonTypesSelected.has(id)}
                   onChange={() => toggleLessonType(id)}
+                  disabled={isLockedAfterPurchase}
                 />
                 <span className="ml-2 text-sm">{label}</span>
               </label>
             ))}
           </div>
         </div>
+        {isEditMode && (
+          <div>
+            <label className="mb-2 block text-sm font-medium text-gray-700">Status</label>
+            <label className="flex items-center">
+              <input
+                type="checkbox"
+                className="rounded text-purple-600"
+                checked={Boolean(formValues.isActive)}
+                onChange={(event) =>
+                  setFormValues((previous) => ({
+                    ...previous,
+                    isActive: event.target.checked
+                  }))
+                }
+              />
+              <span className="ml-2 text-sm text-gray-700">Package is active</span>
+            </label>
+          </div>
+        )}
         {error && (
           <div className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
             {error}
@@ -245,7 +332,13 @@ const CreatePackageModal = ({ isOpen, onClose, onCreated = () => {} }) => {
               : 'cursor-not-allowed bg-purple-300'
           }`}
         >
-          {isSubmitting ? 'Creating…' : 'Create Package'}
+          {isSubmitting
+            ? isEditMode
+              ? 'Saving...'
+              : 'Creating...'
+            : isEditMode
+              ? 'Save Changes'
+              : 'Create Package'}
         </button>
       </ModalFooter>
     </Modal>
diff --git a/src/components/modals/PackagePurchasesModal.jsx b/src/components/modals/PackagePurchasesModal.jsx
new file mode 100644
index 0000000..ce1ff18
--- /dev/null
+++ b/src/components/modals/PackagePurchasesModal.jsx
@@ -0,0 +1,327 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { RefreshCw, Search, Users } from 'lucide-react';
+import { getCoachPackagePurchases } from '../../api/CoachApi/packages';
+import Modal, { ModalBody, ModalFooter, ModalHeader } from './Modal';
+
+const resolvePurchases = (payload) => {
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  if (!payload || typeof payload !== 'object') {
+    return [];
+  }
+
+  return payload.purchases || payload.data?.purchases || payload.items || payload.data?.items || [];
+};
+
+const resolvePackageSummary = (payload, fallbackPackage) => {
+  if (!payload || typeof payload !== 'object') {
+    return fallbackPackage;
+  }
+
+  return payload.package || payload.data?.package || fallbackPackage;
+};
+
+const resolvePagination = (payload, purchases) => {
+  const source = payload?.pagination || payload?.meta || payload?.data?.pagination || {};
+
+  const currentPage = Number(source.page ?? payload?.page ?? 1);
+  const perPage = Number(source.perPage ?? source.per_page ?? payload?.perPage ?? 10);
+  const total = Number(source.total ?? payload?.total ?? purchases.length);
+
+  return {
+    page: Number.isFinite(currentPage) && currentPage > 0 ? currentPage : 1,
+    perPage: Number.isFinite(perPage) && perPage > 0 ? perPage : 10,
+    total: Number.isFinite(total) && total >= 0 ? total : purchases.length
+  };
+};
+
+const formatDateTime = (value) => {
+  if (!value) {
+    return 'N/A';
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return 'N/A';
+  }
+
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  }).format(date);
+};
+
+const STATUS_OPTIONS = [
+  { value: '', label: 'All statuses' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'succeeded', label: 'Succeeded' },
+  { value: 'partially_used', label: 'Partially used' },
+  { value: 'exhausted', label: 'Exhausted' }
+];
+
+const PackagePurchasesModal = ({ isOpen, onClose, lessonPackage }) => {
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('');
+  const [includePending, setIncludePending] = useState(false);
+  const [page, setPage] = useState(1);
+  const [purchases, setPurchases] = useState([]);
+  const [packageSummary, setPackageSummary] = useState(lessonPackage);
+  const [pagination, setPagination] = useState({ page: 1, perPage: 10, total: 0 });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    setSearch('');
+    setStatus('');
+    setIncludePending(false);
+    setPage(1);
+    setPurchases([]);
+    setPackageSummary(lessonPackage);
+    setError('');
+  }, [isOpen, lessonPackage]);
+
+  useEffect(() => {
+    if (!isOpen || !lessonPackage?.id) {
+      return;
+    }
+
+    let active = true;
+
+    const fetchPurchases = async () => {
+      setLoading(true);
+      setError('');
+
+      try {
+        const response = await getCoachPackagePurchases(lessonPackage.id, {
+          search,
+          status,
+          includePending: includePending ? 'true' : '',
+          perPage: 10,
+          page
+        });
+
+        if (!response) {
+          throw new Error('Your session has expired. Please sign in again.');
+        }
+
+        if (!response.ok) {
+          let message = 'Failed to load package purchases.';
+
+          try {
+            const errorBody = await response.json();
+            message =
+              errorBody?.message ||
+              errorBody?.error ||
+              errorBody?.errors?.[0] ||
+              message;
+          } catch {
+            // Ignore JSON parse errors.
+          }
+
+          throw new Error(message);
+        }
+
+        const payload = await response.json().catch(() => null);
+        const resolvedPurchases = resolvePurchases(payload);
+
+        if (!active) {
+          return;
+        }
+
+        setPurchases(Array.isArray(resolvedPurchases) ? resolvedPurchases : []);
+        setPackageSummary(resolvePackageSummary(payload, lessonPackage));
+        setPagination(resolvePagination(payload, Array.isArray(resolvedPurchases) ? resolvedPurchases : []));
+      } catch (requestError) {
+        if (!active) {
+          return;
+        }
+
+        setError(
+          requestError instanceof Error
+            ? requestError.message
+            : 'Failed to load package purchases.'
+        );
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchPurchases();
+
+    return () => {
+      active = false;
+    };
+  }, [includePending, isOpen, lessonPackage, page, search, status]);
+
+  const totalPages = useMemo(() => {
+    if (!pagination.total || !pagination.perPage) {
+      return 1;
+    }
+
+    return Math.max(1, Math.ceil(pagination.total / pagination.perPage));
+  }, [pagination.perPage, pagination.total]);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} panelClassName="max-w-4xl">
+      <ModalHeader
+        title="Package Buyers"
+        description={
+          packageSummary?.name
+            ? `${packageSummary.name} • ${packageSummary.purchaseCount ?? packageSummary.purchase_count ?? 0} purchases`
+            : 'View students who bought this package'
+        }
+        onClose={onClose}
+      />
+      <ModalBody className="space-y-4">
+        <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_auto]">
+          <label className="relative block">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value);
+                setPage(1);
+              }}
+              placeholder="Search by player name, email, or phone"
+              className="w-full rounded-lg border border-gray-300 py-2 pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+            />
+          </label>
+          <select
+            value={status}
+            onChange={(event) => {
+              setStatus(event.target.value);
+              setPage(1);
+            }}
+            className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+          >
+            {STATUS_OPTIONS.map((option) => (
+              <option key={option.value || 'all'} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <label className="flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-700">
+            <input
+              type="checkbox"
+              checked={includePending}
+              onChange={(event) => {
+                setIncludePending(event.target.checked);
+                setPage(1);
+              }}
+              className="rounded text-purple-600"
+            />
+            Include pending
+          </label>
+        </div>
+
+        {loading && (
+          <div className="flex items-center justify-center gap-2 rounded-lg border border-gray-200 py-8 text-sm text-gray-500">
+            <RefreshCw className="h-4 w-4 animate-spin text-purple-600" />
+            Loading purchases...
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && purchases.length === 0 && (
+          <div className="rounded-lg border border-dashed border-gray-200 px-6 py-10 text-center text-sm text-gray-500">
+            <Users className="mx-auto mb-3 h-5 w-5 text-gray-400" />
+            No purchases matched these filters.
+          </div>
+        )}
+
+        {!loading && !error && purchases.length > 0 && (
+          <div className="overflow-hidden rounded-xl border border-gray-200">
+            <div className="grid grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_120px_120px_160px] gap-3 border-b border-gray-200 bg-gray-50 px-4 py-3 text-xs font-semibold uppercase tracking-wide text-gray-500">
+              <span>Player</span>
+              <span>Contact</span>
+              <span>Status</span>
+              <span>Remaining</span>
+              <span>Purchased</span>
+            </div>
+            {purchases.map((purchase, index) => {
+              const rowKey = purchase.id ?? purchase.purchase_id ?? `${purchase.player_email}-${index}`;
+              const name =
+                purchase.player_full_name ||
+                purchase.playerName ||
+                purchase.full_name ||
+                'Player';
+              const contact = purchase.player_email || purchase.player_phone || 'N/A';
+              const purchaseStatus = purchase.status || purchase.purchase_status || 'unknown';
+              const creditsRemaining =
+                purchase.credits_remaining ??
+                purchase.creditsRemaining ??
+                purchase.remaining_credits ??
+                'N/A';
+              const amountPaid = purchase.amount_paid ?? purchase.amountPaid;
+
+              return (
+                <div
+                  key={rowKey}
+                  className="grid grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_120px_120px_160px] gap-3 border-b border-gray-100 px-4 py-4 text-sm last:border-b-0"
+                >
+                  <div className="min-w-0">
+                    <p className="truncate font-medium text-gray-900">{name}</p>
+                    {amountPaid !== null && amountPaid !== undefined && (
+                      <p className="text-xs text-gray-500">Paid ${amountPaid}</p>
+                    )}
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate text-gray-700">{contact}</p>
+                    {purchase.player_phone && purchase.player_email && (
+                      <p className="truncate text-xs text-gray-500">{purchase.player_phone}</p>
+                    )}
+                  </div>
+                  <div className="text-gray-700">{purchaseStatus}</div>
+                  <div className="text-gray-700">{creditsRemaining}</div>
+                  <div className="text-gray-700">{formatDateTime(purchase.purchased_at)}</div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </ModalBody>
+      <ModalFooter className="items-center sm:justify-between">
+        <div className="text-xs text-gray-500">
+          Page {pagination.page} of {totalPages}
+        </div>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => setPage((current) => Math.max(1, current - 1))}
+            disabled={pagination.page <= 1 || loading}
+            className="rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <button
+            type="button"
+            onClick={() => setPage((current) => current + 1)}
+            disabled={pagination.page >= totalPages || loading}
+            className="rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default PackagePurchasesModal;