diff --git a/public/contacts.json b/public/contacts.json
index 63297dc..c56b1fc 100644
--- a/public/contacts.json
+++ b/public/contacts.json
@@ -11,6 +11,7 @@
"linkedinUrl": "https://linkedin.com/in/johnsmith",
"notes": "Met at React conference 2023",
"tags": ["developer", "react", "frontend"],
+ "naoStatus": "not_invited",
"createdAt": "2023-10-01T10:00:00Z",
"updatedAt": "2023-10-15T14:30:00Z"
},
@@ -26,6 +27,8 @@
"linkedinUrl": "https://linkedin.com/in/sarahjohnson",
"notes": "Potential collaboration on new project",
"tags": ["product", "startup", "management"],
+ "naoStatus": "member",
+ "joinedAt": "2023-08-15T10:00:00Z",
"createdAt": "2023-09-15T09:00:00Z",
"updatedAt": "2023-10-20T16:45:00Z"
},
@@ -40,6 +43,8 @@
"profileImage": "https://i.pravatar.cc/150?img=3",
"notes": "Design consultant for mobile app",
"tags": ["design", "ux", "mobile"],
+ "naoStatus": "invited",
+ "invitedAt": "2023-12-01T15:30:00Z",
"createdAt": "2023-08-20T11:30:00Z",
"updatedAt": "2023-09-10T13:15:00Z"
},
@@ -55,6 +60,8 @@
"linkedinUrl": "https://linkedin.com/in/emilyrodriguez",
"notes": "Former colleague from previous company",
"tags": ["engineering", "management", "scaling"],
+ "naoStatus": "member",
+ "joinedAt": "2023-07-20T12:00:00Z",
"createdAt": "2023-07-10T08:00:00Z",
"updatedAt": "2023-08-25T10:20:00Z"
},
diff --git a/src/pages/ContactListPage.tsx b/src/pages/ContactListPage.tsx
index 2ef71a3..541f7af 100644
--- a/src/pages/ContactListPage.tsx
+++ b/src/pages/ContactListPage.tsx
@@ -29,7 +29,10 @@ import {
Group,
CloudDownload,
VerifiedUser,
- Favorite
+ Favorite,
+ CheckCircle,
+ Schedule,
+ Send
} from '@mui/icons-material';
import { dataService } from '../services/dataService';
import type { Contact } from '../types/contact';
@@ -121,6 +124,34 @@ const ContactListPage = () => {
}).format(date);
};
+ const getNaoStatusIndicator = (contact: Contact) => {
+ switch (contact.naoStatus) {
+ case 'member':
+ return {
+ icon: ,
+ label: 'NAO Member',
+ color: theme.palette.success.main,
+ bgColor: alpha(theme.palette.success.main, 0.08),
+ borderColor: alpha(theme.palette.success.main, 0.2)
+ };
+ case 'invited':
+ return {
+ icon: ,
+ label: 'Invited',
+ color: theme.palette.warning.main,
+ bgColor: alpha(theme.palette.warning.main, 0.08),
+ borderColor: alpha(theme.palette.warning.main, 0.2)
+ };
+ default:
+ return null;
+ }
+ };
+
+ const handleInviteToNao = (contact: Contact) => {
+ // Navigate to invitation page with contact pre-filled
+ navigate(`/invite?inviteeName=${encodeURIComponent(contact.name)}&inviteeEmail=${encodeURIComponent(contact.email)}`);
+ };
+
return (
@@ -293,6 +324,31 @@ const ContactListPage = () => {
}}
/>
)}
+
+ {/* NAO Status Indicator */}
+ {(() => {
+ const naoStatus = getNaoStatusIndicator(contact);
+ return naoStatus ? (
+
+ ) : null;
+ })()}
+
{/* Vouch and Praise Indicators */}
}
@@ -361,24 +417,48 @@ const ContactListPage = () => {
- {/* Select button for selection mode */}
- {isSelectionMode && (
-
- )}
+ {/* Action buttons */}
+
+ {/* Select button for selection mode */}
+ {isSelectionMode && (
+
+ )}
+
+ {/* Invite to NAO button for non-members (not in selection mode) */}
+ {!isSelectionMode && contact.naoStatus === 'not_invited' && (
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ handleInviteToNao(contact);
+ }}
+ sx={{
+ borderRadius: 2,
+ textTransform: 'none',
+ minWidth: 80,
+ fontSize: '0.875rem',
+ py: 0.5,
+ px: 1.5
+ }}
+ >
+ Invite
+
+ )}
+
diff --git a/src/types/contact.ts b/src/types/contact.ts
index 9aaf70f..0e8cf8e 100644
--- a/src/types/contact.ts
+++ b/src/types/contact.ts
@@ -11,6 +11,9 @@ export interface Contact {
notes?: string;
tags?: string[];
groupIds?: string[];
+ naoStatus?: 'member' | 'invited' | 'not_invited';
+ invitedAt?: Date;
+ joinedAt?: Date;
createdAt: Date;
updatedAt: Date;
}