feat: Restructure notifications - Staff and Customer separation (WIP)

## 🎯 Phase 1: Backend + Frontend Structure

### Backend Changes

**NotificationsController.php:**
- ✅ Added `/notifications/staff/events` endpoint
- ✅ Added `/notifications/customer/events` endpoint
- ✅ Created `get_all_events()` helper method
- ✅ Added `recipient_type` field to all events
- ✅ Filter events by recipient (staff vs customer)

### Frontend Changes

**Main Notifications Page:**
- ✅ Restructured to show cards for Staff, Customer, Activity Log
- ✅ Entry point with clear separation
- ✅ Modern card-based UI

**Staff Notifications:**
- ✅ Created `/settings/notifications/staff` route
- ✅ Moved Channels.tsx → Staff/Channels.tsx
- ✅ Moved Events.tsx → Staff/Events.tsx
- ✅ Updated Staff/Events to use `/notifications/staff/events`
- ✅ Fixed import paths

### Structure

```
Settings → Notifications
├── Staff Notifications (admin alerts)
│   ├── Channels (Email, Push)
│   ├── Events (Orders, Products, Customers)
│   └── Templates
└── Customer Notifications (customer emails)
    ├── Channels (Email, Push, SMS)
    ├── Events (Orders, Shipping, Account)
    └── Templates
```

---

**Next:** Customer notifications page + routes

admin-spa/src/routes/Settings/Notifications.tsx

@@ -1,39 +1,116 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { Link } from 'react-router-dom';
 import { SettingsLayout } from './components/SettingsLayout';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
 import { __ } from '@/lib/i18n';
-import NotificationEvents from './Notifications/Events';
-import NotificationChannels from './Notifications/Channels';
-import NotificationTemplates from './Notifications/Templates';
+import { Bell, Users, ChevronRight, Activity } from 'lucide-react';
 
 export default function NotificationsSettings() {
-  const [activeTab, setActiveTab] = useState('events');
-
   return (
     <SettingsLayout
       title={__('Notifications')}
-      description={__('Manage notification events, channels, and templates')}
+      description={__('Manage staff and customer notifications')}
       action={<div />} // Empty action to trigger contextual header
     >
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="events">{__('Events')}</TabsTrigger>
-          <TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
-          <TabsTrigger value="templates">{__('Templates')}</TabsTrigger>
-        </TabsList>
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Staff Notifications */}
+        <Card className="hover:shadow-md transition-shadow">
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-primary/10 rounded-lg">
+                <Bell className="h-6 w-6 text-primary" />
+              </div>
+              <div>
+                <CardTitle>{__('Staff Notifications')}</CardTitle>
+                <CardDescription>
+                  {__('Alerts for admins and staff members')}
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              {__('Get notified about orders, low stock, new customers, and more. Configure email and push notifications for your team.')}
+            </p>
+            <div className="flex items-center justify-between pt-2">
+              <div className="text-sm text-muted-foreground">
+                {__('Orders, Products, Customers')}
+              </div>
+              <Link to="/settings/notifications/staff">
+                <Button variant="outline" size="sm">
+                  {__('Configure')}
+                  <ChevronRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
 
-        <TabsContent value="events" className="space-y-4">
-          <NotificationEvents />
-        </TabsContent>
+        {/* Customer Notifications */}
+        <Card className="hover:shadow-md transition-shadow">
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-blue-500/10 rounded-lg">
+                <Users className="h-6 w-6 text-blue-500" />
+              </div>
+              <div>
+                <CardTitle>{__('Customer Notifications')}</CardTitle>
+                <CardDescription>
+                  {__('Transactional emails and updates for customers')}
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              {__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')}
+            </p>
+            <div className="flex items-center justify-between pt-2">
+              <div className="text-sm text-muted-foreground">
+                {__('Orders, Shipping, Account')}
+              </div>
+              <Link to="/settings/notifications/customer">
+                <Button variant="outline" size="sm">
+                  {__('Configure')}
+                  <ChevronRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
 
-        <TabsContent value="channels" className="space-y-4">
-          <NotificationChannels />
-        </TabsContent>
-
-        <TabsContent value="templates" className="space-y-4">
-          <NotificationTemplates />
-        </TabsContent>
-      </Tabs>
+        {/* Activity Log */}
+        <Card className="hover:shadow-md transition-shadow">
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-purple-500/10 rounded-lg">
+                <Activity className="h-6 w-6 text-purple-500" />
+              </div>
+              <div>
+                <CardTitle>{__('Activity Log')}</CardTitle>
+                <CardDescription>
+                  {__('View notification history and activities')}
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              {__('Track all notification activities, view delivery status, and monitor system events.')}
+            </p>
+            <div className="flex items-center justify-between pt-2">
+              <div className="text-sm text-muted-foreground">
+                {__('Coming soon')}
+              </div>
+              <Button variant="outline" size="sm" disabled>
+                {__('View Log')}
+                <ChevronRight className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
     </SettingsLayout>
   );
 }