Overview
DoctorSoft+ tracks user activity throughout the application using the activityService. While there isn’t a dedicated useActivity hook, activity tracking is implemented through direct service calls and React Query patterns.
Activity service integration
Activities are tracked automatically for key user actions like creating patients, scheduling appointments, and generating prescriptions. You can also create manual activities.
Tracking activity with React Query
The recommended pattern is to use React Query to fetch and cache activity data:
import { useQuery } from '@tanstack/react-query';
import { api } from '../lib/api';
function ActivityFeed() {
const { data: activities, isLoading, error } = useQuery({
queryKey: ['activities', { limit: 10 }],
queryFn: () => api.activityService.getRecentActivities(10, 0)
});
if (isLoading) return <div>Loading activities...</div>;
if (error) return <div>Error loading activities</div>;
return (
<div>
{activities?.map(activity => (
<ActivityItem key={activity.id_actividad} activity={activity} />
))}
</div>
);
}
Creating manual activities
When you need to track custom actions, use the createManualActivity method:
import { api } from '../lib/api';
async function trackCustomAction(patientId: string) {
try {
await api.activityService.createManualActivity({
tipo_actividad: 'custom_action',
descripcion: 'Performed custom medical procedure',
id_paciente: patientId,
metadata: {
procedureType: 'consultation',
duration: 30
}
});
} catch (error) {
console.error('Failed to track activity:', error);
}
}
Common patterns
RecentActivityList component
The RecentActivityList component provides a ready-to-use activity feed:
Maximum number of activities to display
Whether to use compact display mode
Callback when an activity item is clicked
import { RecentActivityList } from '../components/RecentActivityList';
import { useNavigate } from 'react-router-dom';
function Dashboard() {
const navigate = useNavigate();
return (
<RecentActivityList
limit={5}
compact={true}
onActivityClick={(activity) => {
if (activity.id_paciente) {
navigate(`/patients`);
}
}}
/>
);
}
src/pages/Dashboard.tsx:211-222
Activity filtering
Filter activities by type, patient, or date range:
import { api } from '../lib/api';
// Filter by activity type
const appointmentActivities = await api.activityService.getActivitiesByType(
'cita_nueva',
10,
0
);
// Filter by patient
const patientActivities = await api.activityService.getActivitiesByPatient(
patientId,
10,
0
);
// Filter by date range
const recentActivities = await api.activityService.getActivitiesByDateRange(
startDate,
endDate,
10,
0
);
Activity statistics
Get aggregated activity statistics:
import { api } from '../lib/api';
// Get today's statistics
const todayStats = await api.activityService.getActivityStats('today');
// Get this week's statistics
const weekStats = await api.activityService.getActivityStats('week');
// Get this month's statistics
const monthStats = await api.activityService.getActivityStats('month');
Activity types
The system tracks these activity types:
paciente_nuevo - New patient registeredpaciente_editado - Patient information updatedcita_nueva - New appointment scheduledcita_editada - Appointment modifiedcita_cancelada - Appointment cancelledcita_completada - Appointment completedreceta - Prescription creatednota_clinica - Clinical note addeddocumento - Document uploadedsomatometria - Somatometry measurement recordedreporte - Report generated
Best practices
Activities are automatically created for most user actions. Only create manual activities for custom business logic not covered by the automatic tracking.
Use React Query’s queryKey pattern to enable automatic cache invalidation when activities are created. For example, invalidate the activities query after creating a new appointment.
Activity records are permanent and cannot be edited or deleted by users. Ensure activity descriptions are accurate before creation.