Skip to content

ok-olly/team-lette

Repository files navigation

Next.js React TypeScript

Lette AI: The Property Manager’s Command Center

Stay ahead of repairs, rent issues, and resident escalations.

Lette AI gives property managers one place to review resident, landlord, and contractor conversations across email and WhatsApp, with the urgent issues surfaced first and the next step made clear.

Run locally Watch demo video View screenshots

Lette AI dashboard preview

Spot the real emergencies Unify the channels Move to action faster
Detect repeat complaints, legal risk, and operational failures before they disappear in the queue. Keep email and WhatsApp in one working inbox with shared context. Reply faster, dispatch sooner, and reduce back-and-forth across your team.

Built for property managers who need to spot what matters now, keep service levels high, and stop important messages from slipping through the cracks.

🚨 The Problem

Property management teams deal with a constant flow of repairs, rent questions, move-in issues, contractor updates, and resident complaints. The real problem is not message volume alone. It is losing context.

A message about a broken fridge can look routine on its own. If it is the third follow-up after a missed repair visit, it is no longer routine. It is an escalation, and by the time someone notices, the resident experience has already worsened.

Current tools fail to connect the dots between:

  • Historical Context: Previous failed attempts or "false promises."
  • Channel Fragmentation: Vital info split across Email, WhatsApp, and SMS.
  • Urgency vs. Noise: Routine inquiries burying legal and safety risks.

✨ Our Solution

Lette AI is a context-aware triage workspace for property managers. It turns raw, messy communication into an organized daily queue so teams can see which conversations need attention first, why they matter, and what to do next.

From one dashboard, teams can review ongoing enquiries, scan messages by channel, and open full thread history without bouncing between inboxes.

Why property teams care:

  • Prioritize faster: See repeat complaints, sensitive issues, and emerging risks before they become service failures.
  • Work from one view: Keep resident, landlord, and contractor communication visible in the same workflow.
  • Respond with confidence: Use AI-assisted drafts and routing suggestions to act quickly without losing context.

Key Features:

  • Intelligent Classification: Automatically sorts conversations into Maintenance, Rent, Leasing, Legal, and other operational categories.
  • Repeat Complaint Detection: Spots when a resident is chasing the same issue again and escalates the thread accordingly.
  • Action Suggestions: Generate a reply draft or identify the next operational handoff, such as a contractor dispatch.
  • Sentiment Heatmapping: Highlight tense or deteriorating conversations before they become formal complaints.

How property managers use it

Area What it helps with
Ongoing enquiries See active issues by type and understand where pressure is rising
Thread list Review incoming messages by channel, sender, preview, and timing
Thread detail Open the full conversation and act with the right context

Data is loaded from the Messages API (GET /api/messages), which reads new_data.json (emails) and merges with incoming WhatsApp messages from the Twilio webhook. The dashboard polls every 8 seconds so new WhatsApp messages appear automatically.


Product screenshots

Main dashboard

Main dashboard showing ongoing enquiries, thread list, and thread detail

Motion preview

Open the emergency scroller demo video

Play the emergency scroller demo (MP4)

UI views

Inbox Message detail
Inbox view Thread detail view
Categories Sorting modal
Category overview AI sorting modal

WhatsApp integration (Twilio)

When someone sends a message to your Twilio WhatsApp number, it is stored and shown in the triage inbox.

  1. Twilio setup

    • Sign up at Twilio and activate the Twilio Sandbox for WhatsApp (or use your own WhatsApp Business sender).
    • Join the Sandbox by sending the required message to the Sandbox number from your phone.
  2. Webhook URL

    • Your app must be reachable from the internet so Twilio can POST to it.
    • Local dev: use ngrok, e.g. ngrok http 3000, then use the HTTPS URL as below.
    • In Twilio Console → Try WhatsApp → Sandbox settings, set When a message comes in to:
      https://YOUR_HOST/api/webhooks/whatsapp
      (e.g. https://abc123.ngrok.io/api/webhooks/whatsapp for local dev).
  3. Flow

    • User sends a WhatsApp message to your Twilio number → Twilio POSTs to POST /api/webhooks/whatsapp → the message is appended to data/incoming-messages.json → the dashboard fetches GET /api/messages (and polls every 8s), so the new message appears in the inbox.
  4. Production

    • File-based storage (data/incoming-messages.json) is used for simplicity. For production, replace this with a database and update the webhook and GET /api/messages to read/write from it.

Docs: Twilio Docs, WhatsApp quickstart.


Quick start

# install
npm install

# run dev server
npm run dev

Open http://localhost:3000.

# build for production
npm run build
npm start

Stack

  • Next.js 14 (App Router)
  • React 18 + TypeScript
  • CSS (no UI framework) — layout and bento grid

Project layout

├── app/
│   ├── api/
│   │   ├── messages/route.ts     # GET: merged messages (static + WhatsApp)
│   │   └── webhooks/whatsapp/route.ts  # POST: Twilio WhatsApp webhook
│   ├── globals.css      # global styles
│   ├── layout.tsx       # root layout
│   └── page.tsx         # main triage inbox page
├── data/
│   └── incoming-messages.json    # WhatsApp messages from webhook
├── new_data.json                 # email dataset (metadata + emails[])
├── components/
│   ├── ChannelBlock.tsx
│   ├── Header.tsx
│   ├── OngoingEnquiriesHierarchy.tsx
│   ├── Sidebar.tsx
│   ├── ThreadCard.tsx
│   ├── ThreadDetail.tsx
│   ├── ThreadList.tsx
│   ├── icons/           # EnvelopeIcon, WhatsAppIcon
│   └── ui/              # BentoGrid, BentoCard
├── lib/
│   └── utils.ts
├── types/
│   └── message.ts       # Message, Channel, UrgencyLevel
└── Lette_AI_Triage_Inbox_PRD.docx

Data shape

Email data lives in new_data.json at the project root:

{
  "metadata": { "dataset_version": "1.1", "total_entries": 100, "properties": [...], "sender_types": [...], "urgency_levels": [...] },
  "emails": [
    {
      "id": "email_001",
      "thread_id": "thread_001",
      "timestamp": "2026-03-06T08:12:00Z",
      "from": { "name": "...", "email": "...", "type": "tenant", "unit": "Apt 14B", "property_id": "prop_001" },
      "to": "citynorth@manageco.ie",
      "subject": "URGENT - Water leaking...",
      "body": "Hi,\n\n...",
      "attachments": ["file.jpg"]
    }
  ]
}

The API maps each emails[] entry into the internal message shape and merges with WhatsApp messages from data/incoming-messages.json.


Scripts

Command Description
npm run dev Start Next.js dev server
npm run build Production build
npm run start Run production server
npm run lint Run Next.js lint

*Built for the Give(a)go Hackathon - Dublin 2026*

About

give a go hackathon

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors