@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/src/components/ContactManagement.tsx

@@ -1,55 +1,52 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { 
-  Button, 
-  TextField, 
+import {
+  Button,
+  TextField,
   DetailsList,
   Dialog,
-  Panel 
+  Panel,
 } from '@khester/dynamics-ui-components';
-import { SelectionMode, DetailsListLayoutMode, CheckboxVisibility } from '@fluentui/react';
+import {
+  SelectionMode,
+  DetailsListLayoutMode,
+  CheckboxVisibility,
+} from '@fluentui/react';
 import { useDynamicsApi } from '../providers/DynamicsProvider';
+import { Contact } from '../models/Contact';
+import { ContactConstants } from '../constants/contact';
+import { Logger } from './Logging/logger';
 import { ContactForm } from './ContactForm';
 import './ContactManagement.css';
 
-interface Contact {
-  contactid: string;
-  firstname: string;
-  lastname: string;
-  emailaddress1: string;
-  telephone1: string;
-  createdon: string;
-  fullname?: string;
-}
-
 const columns = [
   {
-    key: 'fullname',
+    key: ContactConstants.PrimaryName,
     name: 'Name',
-    fieldName: 'fullname',
+    fieldName: ContactConstants.PrimaryName,
     minWidth: 150,
     maxWidth: 200,
     isResizable: true,
   },
   {
-    key: 'emailaddress1',
+    key: ContactConstants.EMailAddress1,
     name: 'Email',
-    fieldName: 'emailaddress1',
+    fieldName: ContactConstants.EMailAddress1,
     minWidth: 200,
     maxWidth: 300,
     isResizable: true,
   },
   {
-    key: 'telephone1',
+    key: ContactConstants.BusinessPhone,
     name: 'Phone',
-    fieldName: 'telephone1',
+    fieldName: ContactConstants.BusinessPhone,
     minWidth: 150,
     maxWidth: 200,
     isResizable: true,
   },
   {
-    key: 'createdon',
+    key: ContactConstants.CreatedOn,
     name: 'Created',
-    fieldName: 'createdon',
+    fieldName: ContactConstants.CreatedOn,
     minWidth: 150,
     maxWidth: 200,
     isResizable: true,
@@ -57,8 +54,8 @@ const columns = [
 ];
 
 export const ContactManagement: React.FC = () => {
-  const { retrieveMultiple, deleteRecord } = useDynamicsApi();
-  
+  const { apiService, isEnvironmentMock, environmentType } = useDynamicsApi();
+
   const [contacts, setContacts] = useState<Contact[]>([]);
   const [filteredContacts, setFilteredContacts] = useState<Contact[]>([]);
   const [loading, setLoading] = useState(false);
@@ -69,26 +66,58 @@ export const ContactManagement: React.FC = () => {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [contactToDelete, setContactToDelete] = useState<Contact | null>(null);
 
+  useEffect(() => {
+    Logger.userAction(
+      'ContactManagement loaded',
+      { environmentType, isEnvironmentMock },
+      'ContactManagement'
+    );
+  }, [environmentType, isEnvironmentMock]);
+
   const loadContacts = useCallback(async () => {
+    if (!apiService) {
+      Logger.error(
+        'API service not available',
+        'ContactManagement.loadContacts'
+      );
+      return;
+    }
+
     setLoading(true);
+    Logger.log('Loading contacts', 'ContactManagement.loadContacts');
+
     try {
-      const query = '$select=contactid,firstname,lastname,emailaddress1,telephone1,createdon&$orderby=createdon desc';
-      const response = await retrieveMultiple('contacts', query);
-      
-      const contactsWithFullName = response.value.map((contact: Contact) => ({
-        ...contact,
-        fullname: `${contact.firstname || ''} ${contact.lastname || ''}`.trim(),
-        createdon: new Date(contact.createdon).toLocaleDateString()
-      }));
-      
-      setContacts(contactsWithFullName);
-      setFilteredContacts(contactsWithFullName);
+      const contactsData = await Contact.retrieveActiveContacts(apiService);
+
+      const contactsWithDisplayData = contactsData.map((contact) => {
+        const contactInstance = new Contact(contact);
+        return {
+          ...contactInstance,
+          fullname:
+            `${contact.firstname || ''} ${contact.lastname || ''}`.trim(),
+          createdon: contact.createdon
+            ? new Date(contact.createdon).toLocaleDateString()
+            : '',
+        } as Contact;
+      });
+
+      setContacts(contactsWithDisplayData);
+      setFilteredContacts(contactsWithDisplayData);
+
+      Logger.log(
+        `Successfully loaded ${contactsWithDisplayData.length} contacts`,
+        'ContactManagement.loadContacts'
+      );
     } catch (error) {
-      console.error('Error loading contacts:', error);
+      Logger.error(
+        'Failed to load contacts',
+        'ContactManagement.loadContacts',
+        error
+      );
     } finally {
       setLoading(false);
     }
-  }, [retrieveMultiple]);
+  }, [apiService]);
 
   useEffect(() => {
     loadContacts();
@@ -98,62 +127,118 @@ export const ContactManagement: React.FC = () => {
     if (!searchText) {
       setFilteredContacts(contacts);
     } else {
-      const filtered = contacts.filter(contact =>
-        contact.fullname?.toLowerCase().includes(searchText.toLowerCase()) ||
-        contact.emailaddress1?.toLowerCase().includes(searchText.toLowerCase()) ||
-        contact.telephone1?.includes(searchText)
+      const filtered = contacts.filter(
+        (contact) =>
+          contact.fullname?.toLowerCase().includes(searchText.toLowerCase()) ||
+          contact.emailaddress1
+            ?.toLowerCase()
+            .includes(searchText.toLowerCase()) ||
+          contact.telephone1?.includes(searchText)
       );
       setFilteredContacts(filtered);
     }
   }, [contacts, searchText]);
 
-  const handleItemInvoked = useCallback((item: Contact) => {
-    if (selectedContact?.contactid === item.contactid) {
-      setShowEditContactPanel(true);
-    } else {
-      setSelectedContact(item);
-    }
-  }, [selectedContact]);
+  const handleItemInvoked = useCallback(
+    (item: Contact) => {
+      Logger.userAction(
+        'Contact item invoked',
+        { contactId: item.contactid, contactName: item.fullname },
+        'ContactManagement.handleItemInvoked'
+      );
+
+      if (selectedContact?.contactid === item.contactid) {
+        setShowEditContactPanel(true);
+      } else {
+        setSelectedContact(item);
+      }
+    },
+    [selectedContact]
+  );
 
   const handleNewContact = useCallback(() => {
+    Logger.userAction(
+      'New contact panel opened',
+      {},
+      'ContactManagement.handleNewContact'
+    );
     setShowNewContactPanel(true);
   }, []);
 
   const handleEditContact = useCallback(() => {
     if (selectedContact) {
+      Logger.userAction(
+        'Edit contact panel opened',
+        {
+          contactId: selectedContact.contactid,
+          contactName: selectedContact.fullname,
+        },
+        'ContactManagement.handleEditContact'
+      );
       setShowEditContactPanel(true);
     }
   }, [selectedContact]);
 
   const handleDeleteContact = useCallback(() => {
     if (selectedContact) {
+      Logger.userAction(
+        'Delete contact dialog opened',
+        {
+          contactId: selectedContact.contactid,
+          contactName: selectedContact.fullname,
+        },
+        'ContactManagement.handleDeleteContact'
+      );
       setContactToDelete(selectedContact);
       setShowDeleteDialog(true);
     }
   }, [selectedContact]);
 
   const confirmDelete = useCallback(async () => {
-    if (contactToDelete) {
+    if (contactToDelete && apiService) {
       try {
-        await deleteRecord('contacts', contactToDelete.contactid);
+        Logger.userAction(
+          'Contact deletion confirmed',
+          {
+            contactId: contactToDelete.contactid,
+            contactName: contactToDelete.fullname,
+          },
+          'ContactManagement.confirmDelete'
+        );
+
+        await Contact.delete(apiService, contactToDelete.contactid!);
         await loadContacts();
+
         setShowDeleteDialog(false);
         setContactToDelete(null);
         setSelectedContact(null);
+
+        Logger.log(
+          `Successfully deleted contact: ${contactToDelete.fullname}`,
+          'ContactManagement.confirmDelete'
+        );
       } catch (error) {
-        console.error('Error deleting contact:', error);
+        Logger.error(
+          `Failed to delete contact: ${contactToDelete.fullname}`,
+          'ContactManagement.confirmDelete',
+          error
+        );
       }
     }
-  }, [contactToDelete, deleteRecord, loadContacts]);
+  }, [contactToDelete, apiService, loadContacts]);
 
   const handleContactSaved = useCallback(() => {
+    Logger.userAction(
+      'Contact saved, refreshing list',
+      {},
+      'ContactManagement.handleContactSaved'
+    );
     loadContacts();
     setShowNewContactPanel(false);
     setShowEditContactPanel(false);
     setSelectedContact(null);
   }, [loadContacts]);
 
-
   return (
     <div className="contact-management">
       <div className="contact-management__header">
@@ -203,16 +288,16 @@ export const ContactManagement: React.FC = () => {
           layoutMode={DetailsListLayoutMode.justified}
           checkboxVisibility={CheckboxVisibility.onHover}
         />
-        
+
         {loading && (
-          <div className="contact-management__loading">
-            Loading contacts...
-          </div>
+          <div className="contact-management__loading">Loading contacts...</div>
         )}
-        
+
         {!loading && filteredContacts.length === 0 && (
           <div className="contact-management__empty">
-            {searchText ? 'No contacts found matching your search.' : 'No contacts found. Create your first contact!'}
+            {searchText
+              ? 'No contacts found matching your search.'
+              : 'No contacts found. Create your first contact!'}
           </div>
         )}
       </div>
@@ -241,7 +326,12 @@ export const ContactManagement: React.FC = () => {
         {selectedContact && (
           <ContactForm
             contactId={selectedContact.contactid}
-            initialData={selectedContact}
+            initialData={{
+              ...selectedContact,
+              birthdate: selectedContact.birthdate
+                ? new Date(selectedContact.birthdate)
+                : undefined,
+            }}
             onSave={handleContactSaved}
             onCancel={() => {
               setShowEditContactPanel(false);
@@ -259,9 +349,9 @@ export const ContactManagement: React.FC = () => {
         content={`Are you sure you want to delete ${contactToDelete?.fullname}? This action cannot be undone.`}
         actions={[
           { text: 'Delete', onClick: confirmDelete, primary: true },
-          { text: 'Cancel', onClick: () => setShowDeleteDialog(false) }
+          { text: 'Cancel', onClick: () => setShowDeleteDialog(false) },
         ]}
       />
     </div>
   );
-};
+};

package/templates/dynamics-365-starter/src/components/Logging/LogDialog.tsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import {
+  Dialog,
+  DynamicsPrimaryButton,
+  DynamicsDefaultButton,
+} from '@khester/dynamics-ui-components';
+import { useLogging, LogEntry } from './LoggingContext';
+
+/**
+ * Props for LogDialog component
+ */
+interface LogDialogProps {
+  /** Whether the dialog is open */
+  isOpen: boolean;
+  /** Callback when dialog should be closed */
+  onClose: () => void;
+  /** Optional title for the dialog */
+  title?: string;
+  /** Optional maximum height for the log content */
+  maxHeight?: string;
+}
+
+/**
+ * Dialog component for displaying logs in a modal
+ */
+export const LogDialog: React.FC<LogDialogProps> = ({
+  isOpen,
+  onClose,
+  title = 'Application Logs',
+  maxHeight = '400px',
+}) => {
+  const { logs, clearLogs } = useLogging();
+
+  /**
+   * Handle clearing all logs
+   */
+  const handleClearLogs = () => {
+    clearLogs();
+  };
+
+  /**
+   * Handle copying logs to clipboard
+   */
+  const handleCopyLogs = async () => {
+    const logText = logs.map(formatLogEntry).join('\n');
+    try {
+      await navigator.clipboard.writeText(logText);
+      // Could add a notification here if needed
+    } catch (error) {
+      // Fallback for browsers that don't support clipboard API
+      console.warn('Failed to copy logs to clipboard:', error);
+    }
+  };
+
+  /**
+   * Format a log entry for display
+   */
+  const formatLogEntry = (log: LogEntry): string => {
+    const timestamp = new Date(log.timestamp).toLocaleString();
+    const source = log.source ? ` [${log.source}]` : '';
+    return `${timestamp}${source}: ${log.message}`;
+  };
+
+  /**
+   * Format a log entry for JSX display
+   */
+  const formatLogEntryJSX = (log: LogEntry, index: number): JSX.Element => {
+    const timestamp = new Date(log.timestamp).toLocaleString();
+    const source = log.source ? ` [${log.source}]` : '';
+
+    return (
+      <div key={index} style={{ marginBottom: '8px', fontSize: '12px' }}>
+        <span style={{ color: '#666', fontFamily: 'monospace' }}>
+          {timestamp}
+        </span>
+        {source && (
+          <span
+            style={{
+              color: '#0078d4',
+              fontFamily: 'monospace',
+              marginLeft: '4px',
+            }}
+          >
+            {source}
+          </span>
+        )}
+        <span style={{ fontFamily: 'monospace', marginLeft: '4px' }}>
+          : {log.message}
+        </span>
+      </div>
+    );
+  };
+
+  const dialogActions = [
+    {
+      text: 'Close',
+      onClick: onClose,
+      primary: true,
+    },
+    {
+      text: 'Clear Logs',
+      onClick: handleClearLogs,
+      disabled: logs.length === 0,
+    },
+    {
+      text: 'Copy to Clipboard',
+      onClick: handleCopyLogs,
+      disabled: logs.length === 0,
+    },
+  ];
+
+  return (
+    <Dialog
+      hidden={!isOpen}
+      onDismiss={onClose}
+      title={title}
+      subText={`${logs.length} log ${logs.length === 1 ? 'entry' : 'entries'}`}
+      actions={dialogActions}
+      content={
+        <div
+          style={{
+            maxHeight: maxHeight,
+            overflowY: 'auto',
+            padding: '8px',
+            backgroundColor: '#f8f8f8',
+            border: '1px solid #ddd',
+            borderRadius: '4px',
+            fontFamily: 'Consolas, "Courier New", monospace',
+            minWidth: '600px',
+            maxWidth: '800px',
+          }}
+        >
+          {logs.length === 0 ? (
+            <div style={{ fontStyle: 'italic', color: '#666' }}>
+              No logs available
+            </div>
+          ) : (
+            logs.map((log, index) => formatLogEntryJSX(log, index))
+          )}
+        </div>
+      }
+    />
+  );
+};
+
+/**
+ * Simple log viewer component for inline display
+ */
+interface LogViewerProps {
+  /** Maximum height for the log container */
+  maxHeight?: string;
+  /** Whether to show timestamps */
+  showTimestamps?: boolean;
+  /** Whether to show source information */
+  showSources?: boolean;
+}
+
+export const LogViewer: React.FC<LogViewerProps> = ({
+  maxHeight = '200px',
+  showTimestamps = true,
+  showSources = true,
+}) => {
+  const { logs } = useLogging();
+
+  /**
+   * Format a log entry for inline display
+   */
+  const formatLogEntry = (log: LogEntry, index: number): JSX.Element => {
+    const timestamp = showTimestamps
+      ? new Date(log.timestamp).toLocaleString()
+      : '';
+    const source = showSources && log.source ? ` [${log.source}]` : '';
+
+    return (
+      <div
+        key={index}
+        style={{
+          marginBottom: '4px',
+          fontSize: '11px',
+          fontFamily: 'Consolas, "Courier New", monospace',
+          lineHeight: '1.4',
+        }}
+      >
+        {showTimestamps && (
+          <span style={{ color: '#666', marginRight: '8px' }}>{timestamp}</span>
+        )}
+        {showSources && source && (
+          <span style={{ color: '#0078d4', marginRight: '4px' }}>{source}</span>
+        )}
+        <span>{log.message}</span>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      style={{
+        maxHeight: maxHeight,
+        overflowY: 'auto',
+        padding: '8px',
+        backgroundColor: '#f8f8f8',
+        border: '1px solid #ddd',
+        borderRadius: '4px',
+        fontSize: '12px',
+      }}
+    >
+      {logs.length === 0 ? (
+        <div style={{ fontStyle: 'italic', color: '#666', fontSize: '12px' }}>
+          No logs available
+        </div>
+      ) : (
+        logs.map((log, index) => formatLogEntry(log, index))
+      )}
+    </div>
+  );
+};
+
+/**
+ * Floating log viewer button that opens the log dialog
+ */
+interface LogViewerButtonProps {
+  /** Position from bottom in pixels */
+  bottom?: number;
+  /** Position from right in pixels */
+  right?: number;
+  /** Whether to show log count badge */
+  showCount?: boolean;
+}
+
+export const LogViewerButton: React.FC<LogViewerButtonProps> = ({
+  bottom = 20,
+  right = 20,
+  showCount = true,
+}) => {
+  const { logs } = useLogging();
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+
+  const buttonStyle: React.CSSProperties = {
+    position: 'fixed',
+    bottom: `${bottom}px`,
+    right: `${right}px`,
+    zIndex: 1000,
+    borderRadius: '50%',
+    width: '50px',
+    height: '50px',
+    backgroundColor: '#0078d4',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+  };
+
+  const badgeStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '-5px',
+    right: '-5px',
+    backgroundColor: '#d83b01',
+    color: 'white',
+    borderRadius: '50%',
+    width: '20px',
+    height: '20px',
+    fontSize: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 'bold',
+  };
+
+  return (
+    <>
+      <button
+        style={buttonStyle}
+        onClick={() => setIsDialogOpen(true)}
+        title={`View logs (${logs.length} entries)`}
+      >
+        📋
+        {showCount && logs.length > 0 && (
+          <span style={badgeStyle}>
+            {logs.length > 99 ? '99+' : logs.length}
+          </span>
+        )}
+      </button>
+
+      <LogDialog isOpen={isDialogOpen} onClose={() => setIsDialogOpen(false)} />
+    </>
+  );
+};