diff --git a/NOTIFICATION_REFACTOR_STATUS.md b/NOTIFICATION_REFACTOR_STATUS.md
new file mode 100644
index 0000000..73190d7
--- /dev/null
+++ b/NOTIFICATION_REFACTOR_STATUS.md
@@ -0,0 +1,327 @@
+# Notification System Refactor - Implementation Status
+
+**Started:** November 11, 2025, 6:52 PM (GMT+7)  
+**Status:** 🚧 In Progress (Phase 1 Complete)
+
+---
+
+## ✅ Phase 1 Complete: Backend + Staff Frontend
+
+### Backend (100% Complete)
+
+**File:** `includes/Api/NotificationsController.php`
+
+**Changes:**
+1. ✅ Added `GET /notifications/staff/events` endpoint
+2. ✅ Added `GET /notifications/customer/events` endpoint  
+3. ✅ Created `get_all_events()` private helper method
+4. ✅ Added `recipient_type` field to all events
+5. ✅ Filtering logic for staff vs customer events
+
+**Event Classification:**
+- **Staff Events:** order_placed, order_cancelled, low_stock, out_of_stock
+- **Customer Events:** order_processing, order_completed, order_refunded, new_customer, customer_note
+
+### Frontend - Main Page (100% Complete)
+
+**File:** `admin-spa/src/routes/Settings/Notifications.tsx`
+
+**Changes:**
+1. ✅ Removed tabs (Events, Channels, Templates)
+2. ✅ Added card-based layout
+3. ✅ Three cards: Staff Notifications, Customer Notifications, Activity Log
+4. ✅ Links to `/settings/notifications/staff` and `/settings/notifications/customer`
+5. ✅ Modern UI with icons and descriptions
+
+### Frontend - Staff Section (100% Complete)
+
+**File:** `admin-spa/src/routes/Settings/Notifications/Staff.tsx`
+
+**Changes:**
+1. ✅ Created Staff Notifications page with tabs
+2. ✅ Tabs: Channels, Events, Templates
+3. ✅ Back button to main Notifications page
+4. ✅ Reuses existing components
+
+**File:** `admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx`
+- ✅ Copied from `Notifications/Channels.tsx`
+- ✅ No changes needed (already works for staff)
+
+**File:** `admin-spa/src/routes/Settings/Notifications/Staff/Events.tsx`
+- ✅ Copied from `Notifications/Events.tsx`
+- ✅ Updated to use `/notifications/staff/events` endpoint
+- ✅ Updated query key to `notification-staff-events`
+- ✅ Fixed import paths
+
+---
+
+## 🚧 Phase 2: Customer Frontend (To Do)
+
+### Customer Notifications Page
+
+**File to Create:** `admin-spa/src/routes/Settings/Notifications/Customer.tsx`
+
+```typescript
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { SettingsLayout } from '../components/SettingsLayout';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { __ } from '@/lib/i18n';
+import { ChevronLeft } from 'lucide-react';
+import CustomerChannels from './Customer/Channels';
+import CustomerEvents from './Customer/Events';
+import NotificationTemplates from './Templates';
+
+export default function CustomerNotifications() {
+  const [activeTab, setActiveTab] = useState('channels');
+
+  return (
+    <SettingsLayout
+      title={__('Customer Notifications')}
+      description={__('Configure notifications sent to customers')}
+      action={
+        <Link to="/settings/notifications">
+          <Button variant="ghost" size="sm">
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            {__('Back to Notifications')}
+          </Button>
+        </Link>
+      }
+    >
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
+          <TabsTrigger value="events">{__('Events')}</TabsTrigger>
+          <TabsTrigger value="templates">{__('Templates')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="channels" className="space-y-4">
+          <CustomerChannels />
+        </TabsContent>
+
+        <TabsContent value="events" className="space-y-4">
+          <CustomerEvents />
+        </TabsContent>
+
+        <TabsContent value="templates" className="space-y-4">
+          <NotificationTemplates recipientType="customer" />
+        </TabsContent>
+      </Tabs>
+    </SettingsLayout>
+  );
+}
+```
+
+### Customer Channels Component
+
+**File to Create:** `admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx`
+
+**Features:**
+- Email channel (always available)
+- Push notifications (requires customer opt-in)
+- SMS channel (addon, coming soon)
+- Different messaging for customer context
+
+### Customer Events Component
+
+**File to Create:** `admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx`
+
+**Features:**
+- Use `/notifications/customer/events` endpoint
+- Query key: `notification-customer-events`
+- Categories:
+  - **Orders:** Processing, Completed, Refunded
+  - **Account:** New Customer, Customer Note
+  - **Shipping:** (future) Shipped, Delivered, Tracking Updates
+  - **Marketing:** (future) Abandoned Cart, Promotions
+
+---
+
+## 🚧 Phase 3: Routes Registration (To Do)
+
+### Update App Routes
+
+**File to Update:** `admin-spa/src/App.tsx`
+
+**Add Routes:**
+```typescript
+<Route path="/settings/notifications/staff" element={<StaffNotifications />} />
+<Route path="/settings/notifications/customer" element={<CustomerNotifications />} />
+```
+
+---
+
+## 🚧 Phase 4: Templates Update (To Do)
+
+### Update Templates Component
+
+**File to Update:** `admin-spa/src/routes/Settings/Notifications/Templates.tsx`
+
+**Changes:**
+- Accept `recipientType` prop (`'staff' | 'customer'`)
+- Filter templates by recipient type
+- Show different template categories based on recipient
+
+---
+
+## 📋 Implementation Checklist
+
+### Phase 1: Backend + Staff (Complete ✅)
+- [x] Backend: Add staff/customer endpoints
+- [x] Backend: Add recipient_type to events
+- [x] Backend: Filter events by recipient
+- [x] Frontend: Restructure main Notifications page
+- [x] Frontend: Create Staff Notifications page
+- [x] Frontend: Move Channels to Staff/Channels
+- [x] Frontend: Move Events to Staff/Events
+- [x] Frontend: Update Staff/Events endpoint
+
+### Phase 2: Customer Frontend (In Progress 🚧)
+- [ ] Create Customer Notifications page
+- [ ] Create Customer/Channels component
+- [ ] Create Customer/Events component
+- [ ] Update Customer/Events to use customer endpoint
+- [ ] Add customer-specific messaging
+
+### Phase 3: Routes (Pending 📋)
+- [ ] Register /settings/notifications/staff route
+- [ ] Register /settings/notifications/customer route
+- [ ] Test navigation between pages
+
+### Phase 4: Templates (Pending 📋)
+- [ ] Add recipientType prop to Templates
+- [ ] Filter templates by recipient
+- [ ] Test template editing for both types
+
+### Phase 5: Testing (Pending 📋)
+- [ ] Test staff notifications flow
+- [ ] Test customer notifications flow
+- [ ] Test navigation
+- [ ] Test data persistence
+- [ ] Test with different events
+
+---
+
+## 🎯 Next Steps
+
+1. **Create Customer Notifications Page**
+   - Copy structure from Staff.tsx
+   - Update titles and descriptions
+   - Link to Customer components
+
+2. **Create Customer/Channels Component**
+   - Similar to Staff/Channels
+   - Add SMS channel (disabled, coming soon)
+   - Customer-specific messaging
+
+3. **Create Customer/Events Component**
+   - Use `/notifications/customer/events`
+   - Query key: `notification-customer-events`
+   - Customer event categories
+
+4. **Register Routes**
+   - Add to App.tsx
+   - Test navigation
+
+5. **Update Templates**
+   - Add recipientType prop
+   - Filter by recipient
+
+6. **Test Everything**
+   - End-to-end testing
+   - Fix any issues
+
+---
+
+## 📊 Progress
+
+**Overall:** 40% Complete
+
+- Backend: 100% ✅
+- Main Page: 100% ✅
+- Staff Section: 100% ✅
+- Customer Section: 0% 📋
+- Routes: 0% 📋
+- Templates: 0% 📋
+- Testing: 0% 📋
+
+---
+
+## 🚀 Quick Start for Next Session
+
+```bash
+# Continue from where we left off
+
+# 1. Create Customer Notifications page
+# File: admin-spa/src/routes/Settings/Notifications/Customer.tsx
+
+# 2. Create Customer/Channels component
+# File: admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx
+
+# 3. Create Customer/Events component
+# File: admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
+
+# 4. Register routes in App.tsx
+
+# 5. Test the flow
+```
+
+---
+
+## 📚 Architecture
+
+```
+Settings → Notifications (Main Hub)
+├── Staff Notifications (/settings/notifications/staff)
+│   ├── Channels Tab
+│   │   ├── Email (Built-in)
+│   │   └── Push Notifications (Built-in)
+│   ├── Events Tab
+│   │   ├── Orders (order_placed, order_cancelled)
+│   │   ├── Products (low_stock, out_of_stock)
+│   │   └── Customers (admin view)
+│   └── Templates Tab
+│       └── Staff email/push templates
+│
+└── Customer Notifications (/settings/notifications/customer)
+    ├── Channels Tab
+    │   ├── Email (Built-in)
+    │   ├── Push Notifications (Requires opt-in)
+    │   └── SMS (Addon, coming soon)
+    ├── Events Tab
+    │   ├── Orders (order_processing, order_completed, order_refunded)
+    │   ├── Account (new_customer, customer_note)
+    │   └── Shipping (future: shipped, delivered)
+    └── Templates Tab
+        └── Customer email/push templates
+```
+
+---
+
+## ✅ Success Criteria
+
+1. **Clear Separation**
+   - Staff and Customer sections are visually distinct
+   - Easy to navigate between sections
+   - No confusion about which notifications are for whom
+
+2. **Code Reusability**
+   - 70-80% code reuse between Staff and Customer
+   - Shared components where possible
+   - DRY principles followed
+
+3. **Scalability**
+   - Easy to add new event types
+   - Easy to add new channels
+   - Easy to add new recipient types (future: vendors, partners)
+
+4. **User Experience**
+   - Intuitive navigation
+   - Clear labeling
+   - Helpful descriptions
+   - Responsive design
+
+---
+
+**Status:** Phase 1 complete, ready for Phase 2! 🚀