feat: Add authentication system and UI improvements

- Add login/signup functionality with localStorage
- Implement collapsible sidebar menu
- Add Communication & Tools section to Debtor Profile
- Add activity logs with Account Created & DVN sent entries
- Update Reports page to use real payment data
- Add campaign creation functionality
- Add debtor names to Communications table
- All sensitive data uses mock/demo values only

Author: Andreas-Allcode

src/App.jsx

@@ -1,14 +1,48 @@
 import './App.css'
 import Pages from "@/pages/index.jsx"
+import Login from "@/pages/Login.jsx"
 import { Toaster } from "@/components/ui/toaster"
+import { Toaster as SonnerToaster } from 'sonner'
+import { Loader2 } from 'lucide-react'
+import { useState, useEffect } from 'react'
 
 function App() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const checkAuthStatus = () => {
+    const currentUser = localStorage.getItem('currentUser');
+    setIsLoggedIn(!!currentUser);
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    checkAuthStatus();
+  }, []);
+
+  const handleLogin = () => {
+    checkAuthStatus();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
   return (
     <>
-      <Pages />
+      {isLoggedIn ? (
+        <Pages />
+      ) : (
+        <Login onLogin={handleLogin} />
+      )}
       <Toaster />
+      <SonnerToaster richColors />
     </>
   )
 }
 
-export default App 
+export default App

src/api/entities.js

@@ -13,6 +13,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Badge } from "@/components/ui/badge";
 import { Communication } from '@/api/entities';
 import { Payment } from '@/api/entities';
+import { ActivityLog } from '@/api/entities';
 import { 
   Loader2, 
   MessageSquare, 
@@ -88,18 +89,15 @@ export default function ActivityLogModal({ isOpen, onClose, caseId, debtorName }
   const fetchActivityLog = async () => {
     setIsLoading(true);
     try {
-      let [communications, payments] = await Promise.all([
+      let [communications, payments, activityLogs] = await Promise.all([
         Communication.filter({ case_id: caseId }, '-created_date'),
-        Payment.filter({ case_id: caseId }, '-payment_date')
+        Payment.filter({ case_id: caseId }, '-payment_date'),
+        ActivityLog.filter({ case_id: caseId }, '-activity_date')
       ]);
 
-      // Generate fake data if real data is empty
-      if (communications.length === 0) {
-        communications = generateFakeCommunications(caseId, debtorName);
-      }
-      if (payments.length === 0) {
-        payments = generateFakePayments(caseId);
-      }
+      // Debug: Log the fetched data
+      console.log('Fetched activity logs:', activityLogs);
+      console.log('Case ID:', caseId);
 
       // Combine all activities with unified structure
       const allActivities = [
@@ -136,28 +134,24 @@ export default function ActivityLogModal({ isOpen, onClose, caseId, debtorName }
           },
           icon: DollarSign,
           color: 'green'
-        }))
-      ];
-
-      // Add mock status change events (in a real app, these would come from an audit log)
-      const statusChanges = [
-        {
-          id: 'status_1',
-          type: 'status_change',
-          timestamp: subDays(new Date(), 5).toISOString(),
-          title: 'Status Updated',
-          description: 'Status changed to In Collection',
+        })),
+        ...activityLogs.map(log => ({
+          id: `activity_${log.id}`,
+          type: 'activity',
+          subType: log.activity_type,
+          timestamp: log.activity_date,
+          title: log.description,
+          description: log.metadata ? JSON.parse(log.metadata).event || '' : '',
           details: {
-            fromStatus: 'new',
-            toStatus: 'in_collection',
-            changedBy: 'system'
+            performedBy: log.performed_by,
+            metadata: log.metadata
           },
-          icon: UserCheck,
-          color: 'purple'
-        }
+          icon: log.activity_type === 'debt_validation_sent' ? Send : UserCheck,
+          color: 'orange'
+        }))
       ];
 
-      allActivities.push(...statusChanges);
+      console.log('All activities:', allActivities);
       setActivities(allActivities);
     } catch (error) {
       console.error("Error fetching activity log:", error);
@@ -250,7 +244,7 @@ export default function ActivityLogModal({ isOpen, onClose, caseId, debtorName }
               <SelectItem value="all">All Events</SelectItem>
               <SelectItem value="communication">Communications</SelectItem>
               <SelectItem value="payment">Payments</SelectItem>
-              <SelectItem value="status_change">Status Changes</SelectItem>
+              <SelectItem value="activity">Activity Log</SelectItem>
             </SelectContent>
           </Select>
           <Button

src/components/debts/ActivityLogModal.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { getCCAiCampaigns } from '@/api/functions';
+import { Campaign } from '@/api/entities';
 import { Plus, Send, Eye, BarChart2 } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { createPageUrl } from '@/utils';
@@ -15,7 +15,7 @@ export default function Campaigns() {
   useEffect(() => {
     const fetchCampaigns = async () => {
       try {
-        const { data } = await getCCAiCampaigns();
+        const data = await Campaign.list();
         setCampaigns(data || []);
       } catch (error) {
         console.error("Error fetching campaigns:", error);
@@ -29,6 +29,7 @@ export default function Campaigns() {
   const getStatusColor = (status) => {
     const colors = {
       draft: "bg-gray-100 text-gray-800",
+      active: "bg-green-100 text-green-800",
       sent: "bg-green-100 text-green-800",
       sending: "bg-blue-100 text-blue-800",
       archived: "bg-yellow-100 text-yellow-800",
@@ -67,14 +68,24 @@ export default function Campaigns() {
             <Card key={campaign.id} className="flex flex-col">
               <CardHeader>
                 <div className="flex justify-between items-start">
-                  <CardTitle className="text-lg">{campaign.title}</CardTitle>
+                  <CardTitle className="text-lg">{campaign.name}</CardTitle>
                   <Badge className={getStatusColor(campaign.status)}>{campaign.status}</Badge>
                 </div>
               </CardHeader>
               <CardContent className="flex-grow">
                 <p className="text-sm text-gray-600 line-clamp-2">
-                  Subject: {campaign.subject}
+                  {campaign.description || 'No description available'}
                 </p>
+                <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <span className="text-gray-500">Target:</span>
+                    <span className="ml-1 font-medium">{campaign.target_count || 0}</span>
+                  </div>
+                  <div>
+                    <span className="text-gray-500">Sent:</span>
+                    <span className="ml-1 font-medium">{campaign.sent_count || 0}</span>
+                  </div>
+                </div>
               </CardContent>
               <div className="p-6 pt-0 flex gap-2">
                  <Button variant="outline" size="sm" className="w-full">

src/pages/Campaigns.jsx

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect } from 'react';
-import { Communication, Template, Case } from '@/api/entities';
+import { Communication, Template, Case, Debtor } from '@/api/entities';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -26,6 +26,8 @@ import { createPageUrl } from '@/utils';
 export default function Communications() {
   const [communications, setCommunications] = useState([]);
   const [templates, setTemplates] = useState([]);
+  const [cases, setCases] = useState([]);
+  const [debtors, setDebtors] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState('');
   const [filterType, setFilterType] = useState('all');
@@ -36,22 +38,37 @@ export default function Communications() {
 
   const loadData = async () => {
     try {
-      const [commsRes, tempsRes] = await Promise.all([
+      const [commsRes, tempsRes, casesRes, debtorsRes] = await Promise.all([
         Communication.list('-sent_date'),
-        Template.list()
+        Template.list(),
+        Case.list(),
+        Debtor.list()
       ]);
       setCommunications(commsRes || []);
       setTemplates(tempsRes || []);
+      setCases(casesRes || []);
+      setDebtors(debtorsRes || []);
     } catch (error) {
       console.error('Error loading communications:', error);
     } finally {
       setIsLoading(false);
     }
   };
 
+  const getDebtorName = (caseId) => {
+    const case_ = cases.find(c => c.id === caseId);
+    if (case_?.debtor_id) {
+      const debtor = debtors.find(d => d.id === case_.debtor_id);
+      return debtor?.name || case_.debtor_name;
+    }
+    return case_?.debtor_name || 'Unknown';
+  };
+
   const filteredCommunications = (communications || []).filter(comm => {
+    const debtorName = getDebtorName(comm.case_id);
     const matchesSearch = comm.subject?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         comm.content?.toLowerCase().includes(searchTerm.toLowerCase());
+                         comm.content?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         debtorName?.toLowerCase().includes(searchTerm.toLowerCase());
     const matchesType = filterType === 'all' || comm.type === filterType;
     return matchesSearch && matchesType;
   });
@@ -211,6 +228,7 @@ export default function Communications() {
                   <TableRow>
                     <TableHead>Type</TableHead>
                     <TableHead>Subject/Content</TableHead>
+                    <TableHead>Debtor</TableHead>
                     <TableHead>Case ID</TableHead>
                     <TableHead>Sent Date</TableHead>
                     <TableHead>Status</TableHead>
@@ -227,11 +245,12 @@ export default function Communications() {
                         <TableCell><div className="h-4 bg-gray-200 rounded animate-pulse" /></TableCell>
                         <TableCell><div className="h-4 bg-gray-200 rounded animate-pulse" /></TableCell>
                         <TableCell><div className="h-4 bg-gray-200 rounded animate-pulse" /></TableCell>
+                        <TableCell><div className="h-4 bg-gray-200 rounded animate-pulse" /></TableCell>
                       </TableRow>
                     ))
                   ) : filteredCommunications.length === 0 ? (
                     <TableRow>
-                      <TableCell colSpan={6} className="text-center py-8">
+                      <TableCell colSpan={7} className="text-center py-8">
                         <MessageSquare className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                         <p className="text-gray-500">No communications found</p>
                       </TableCell>
@@ -253,6 +272,9 @@ export default function Communications() {
                             </p>
                           </div>
                         </TableCell>
+                        <TableCell>
+                          <span className="font-medium text-sm">{getDebtorName(comm.case_id)}</span>
+                        </TableCell>
                         <TableCell>
                           <Badge variant="outline">{comm.case_id}</Badge>
                         </TableCell>