Supabase Setup Guide for CRM Dashboard

This guide will help you set up Supabase for your Property Management Companies CRM.

Step 1: Create a Supabase Account

1. Go to https://supabase.com
2. Click "Start your project" or "Sign In"
3. Sign up with GitHub, Google, or email
4. Verify your email if needed

Step 2: Create a New Project

1. Click "New Project" on your Supabase dashboard
2. Fill in the project details:
   • Name: pathfinder (or any name you prefer)
   • Database Password: Create a strong password (save this!)
   • Region: Choose closest to Oregon (e.g., West US)
3. Click "Create new project"
4. Wait 2-3 minutes for the project to initialize

Step 3: Create the Database Table

1. In your Supabase project dashboard, click on "SQL Editor" in the left sidebar
2. Click "New Query"
3. Copy and paste the following SQL code:

-- Create the property_management_companies table
CREATE TABLE property_management_companies (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  company_name TEXT NOT NULL,
  address TEXT,
  city TEXT NOT NULL,
  state TEXT DEFAULT 'Oregon',
  zip_code TEXT,
  contact_name TEXT NOT NULL,
  contact_title TEXT,
  phone TEXT,
  email TEXT,
  website TEXT,
  units_managed INTEGER DEFAULT 0,
  status TEXT DEFAULT 'Not Contacted',
  priority TEXT DEFAULT 'Medium',
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable Row Level Security (RLS)
ALTER TABLE property_management_companies ENABLE ROW LEVEL SECURITY;

-- Create a policy that allows all operations for now
-- (You can make this more restrictive later with authentication)
CREATE POLICY "Enable all access for property_management_companies" 
ON property_management_companies 
FOR ALL 
USING (true) 
WITH CHECK (true);

-- Create an index on city for faster searches
CREATE INDEX idx_pm_companies_city ON property_management_companies(city);

-- Create an index on status for filtering
CREATE INDEX idx_pm_companies_status ON property_management_companies(status);

4. Click "Run" (or press Ctrl+Enter / Cmd+Enter)
5. You should see "Success. No rows returned"

Step 4: Get Your API Credentials

1. Click on the "Settings" icon (gear) in the left sidebar
2. Click on "API" in the settings menu
3. You'll see two important values:
   • Project URL (looks like: https://xxxxx.supabase.co)
   • anon public key (under "Project API keys")

Step 5: Add Credentials to Your Project

1. In your project root directory, create a file named .env.local
2. Add the following content (replace with your actual values):

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

3. Important: Make sure .env.local is in your .gitignore (it already should be)
4. Save the file

Step 6: Restart Your Development Server

1. Stop your development server (Ctrl+C in the terminal)
2. Restart it:

   npm run dev
   

3. Navigate to http://localhost:3000/access-crm
4. Scroll down to the Property Management Companies section

Step 7: Test It Out!

1. Click "+ Add Company" button
2. Fill in a test company:
   • Company Name: Test Property Management
   • City: Portland
   • Contact Person: John Doe
   • Fill in other details as desired
3. Click "Add Company"
4. The company should appear in the table!

Step 8: Share Access with Cole

To allow Cole to access the same data:

1. Share your .env.local file contents with Cole securely (e.g., via encrypted message, password manager, or in person)
2. Cole should:
   • Create a .env.local file in his project
   • Paste the same credentials
   • Restart his development server

Both of you will now see the same data in real-time!

Migrating Existing Data from localStorage

If you already have companies in localStorage, you can migrate them:

1. Manual Migration:

   • Add each company through the form (they'll be saved to Supabase)
   • Old localStorage data will remain as backup

2. Automatic: The app will:

   • Try to load from Supabase first
   • Fall back to localStorage if Supabase fails
   • Keep localStorage as backup when new data is fetched

Viewing Your Data

You can view and manage data directly in Supabase:

1. Go to your Supabase dashboard
2. Click "Table Editor" in the left sidebar
3. Select property_management_companies table
4. You can add, edit, or delete records here too!

Troubleshooting

"Error fetching companies"

• Check that your .env.local file exists and has correct values
• Make sure you restarted the dev server after creating .env.local
• Verify the table was created successfully in Supabase

"Error adding company"

• Check the browser console (F12) for detailed error messages
• Verify your Supabase project is active (not paused)
• Check that RLS policies are set up correctly

Can't see the data Cole added

• Make sure both are using the same Supabase project credentials
• Refresh your browser page
• Check the Table Editor in Supabase to confirm data exists

Security Notes

• The current setup allows public access to the table (good for development)
• For production, consider:
  • Adding user authentication
  • Restricting RLS policies to authenticated users only
  • Adding data validation rules
  • Setting up backups

Next Steps

Once Supabase is working, you can:

• Add user authentication (Supabase Auth)
• Set up real-time subscriptions (see changes instantly)
• Add file uploads for company documents
• Create reports and analytics
• Deploy to production (Vercel + Supabase is free!)

Support

• Supabase Docs: https://supabase.com/docs
• Supabase Discord: https://discord.supabase.com
• Next.js Docs: https://nextjs.org/docs

---

Questions? Check the Supabase dashboard, or review the error messages in your browser console (F12).