page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
 
interface MarketingProgram {
  id: number;
  name: string;
  createDt: string;
  startDate: string;
  endDate: string;
  status: 'planning' | 'active' | 'completed' | 'paused';
  type: string;
  description?: string;
}
 
export default function MarketingCampaignsPage() {
  const [programs, setPrograms] = useState<MarketingProgram[]>([]);
  const [loading, setLoading] = useState(true);
  const [createModal, setCreateModal] = useState(false);
  const [reviewModal, setReviewModal] = useState(false);
  const [selectedProgram, setSelectedProgram] = useState<MarketingProgram | null>(null);
 
  // Form fields
  const [name, setName] = useState('');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [programType, setProgramType] = useState('loyalty');
  const [description, setDescription] = useState('');
 
  useEffect(() => {
    loadPrograms();
  }, []);
 
  const loadPrograms = async () => {
    try {
      const response = await fetch('/api/v1/marketing/programs');
      
      if (!response.ok || !response.headers.get('content-type')?.includes('application/json')) {
        // Demo mode
        setPrograms(getDemoPrograms());
        setLoading(false);
        return;
      }
 
      const data = await response.json();
      setPrograms(data.programs || []);
      setLoading(false);
    } catch (error) {
      console.error('Error loading marketing programs:', error);
      setPrograms(getDemoPrograms());
      setLoading(false);
    }
  };
 
  const getDemoPrograms = (): MarketingProgram[] => {
    return [
      {
        id: 1,
        name: 'Summer Sale 2025',
        createDt: '2025-11-15T10:00:00Z',
        startDate: '2025-12-01',
        endDate: '2026-02-28',
        status: 'active',
        type: 'promotion',
        description: 'Seasonal summer promotional campaign targeting new customers',
      },
      {
        id: 2,
        name: 'VIP Loyalty Club',
        createDt: '2025-09-01T08:30:00Z',
        startDate: '2025-10-01',
        endDate: '2026-09-30',
        status: 'active',
        type: 'loyalty',
        description: 'Year-long loyalty program with tiered benefits',
      },
      {
        id: 3,
        name: 'Back to School Email Campaign',
        createDt: '2025-12-10T14:20:00Z',
        startDate: '2026-01-15',
        endDate: '2026-02-15',
        status: 'planning',
        type: 'email',
        description: 'Targeted email campaign for school supplies',
      },
    ];
  };
 
  const getStatusBadgeColor = (status: string) => {
    switch (status) {
      case 'active': return 'bg-green-100 text-green-800';
      case 'planning': return 'bg-blue-100 text-blue-800';
      case 'completed': return 'bg-gray-100 text-gray-800';
      case 'paused': return 'bg-yellow-100 text-yellow-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };
 
  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'active': return 'Active';
      case 'planning': return 'Planning';
      case 'completed': return 'Completed';
      case 'paused': return 'Paused';
      default: return status;
    }
  };
 
  const handleCreateProgram = async () => {
    if (!name || !startDate || !endDate) {
      alert('Please fill in all required fields');
      return;
    }
 
    const newProgram = {
      name,
      startDate,
      endDate,
      type: programType,
      description,
    };
 
    try {
      const response = await fetch('/api/v1/marketing/programs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newProgram),
      });
 
      if (!response.ok) {
        alert('Program created (demo mode)');
        const demo: MarketingProgram = {
          id: programs.length + 1,
          name,
          createDt: new Date().toISOString(),
          startDate,
          endDate,
          status: 'planning',
          type: programType,
          description,
        };
        setPrograms([demo, ...programs]);
        setCreateModal(false);
        resetForm();
        return;
      }
 
      alert('Marketing program created successfully');
      loadPrograms();
      setCreateModal(false);
      resetForm();
    } catch (error) {
      console.error('Error creating program:', error);
      alert('Program created (demo mode)');
      setCreateModal(false);
      resetForm();
    }
  };
 
  const resetForm = () => {
    setName('');
    setStartDate('');
    setEndDate('');
    setProgramType('loyalty');
    setDescription('');
  };
 
  const handleReviewProgram = (program: MarketingProgram) => {
    setSelectedProgram(program);
    setReviewModal(true);
  };
 
  const formatDate = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric' 
    });
  };
 
  const formatDateTime = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'short', 
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };
 
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <div className="flex items-center gap-4 mb-4">
          <Link href="/marketing" className="text-blue-600 hover:text-blue-800">
            ← Back to Marketing
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">Marketing Programs</h1>
        </div>
        
        <p className="text-gray-600 mb-4">
          Marketing programs allows you to manage and report on customer and sales promotion efforts. 
          A marketing program is used to track things like loyalty clubs and also the responses to 
          promotional offers sent to a subset of customers.
        </p>
      </div>
 
      {/* Active Programs Summary */}
      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-xl font-semibold text-gray-900 mb-2">Active Programs</h2>
            <p className="text-3xl font-bold text-[#00946b]">
              {programs.filter(p => p.status === 'active').length}
            </p>
            <p className="text-sm text-gray-500">Currently running</p>
          </div>
          <div className="text-right">
            <p className="text-sm text-gray-500">Planning</p>
            <p className="text-2xl font-semibold text-blue-600">
              {programs.filter(p => p.status === 'planning').length}
            </p>
          </div>
          <div className="text-right">
            <p className="text-sm text-gray-500">Completed</p>
            <p className="text-2xl font-semibold text-gray-600">
              {programs.filter(p => p.status === 'completed').length}
            </p>
          </div>
        </div>
      </div>
 
      {/* Action Buttons */}
      <div className="flex flex-wrap gap-4 mb-6">
        <button
          onClick={() => setCreateModal(true)}
          className="flex items-center gap-3 bg-white border-2 border-[#00946b] rounded-lg shadow-md p-6 hover:shadow-lg transition"
        >
          <div className="text-5xl">📋</div>
          <div className="text-left">
            <div className="font-semibold text-gray-900">Create New Program</div>
            <div className="text-sm text-gray-600">Start a new campaign</div>
          </div>
        </button>
 
        <Link
          href="/marketing/campaigns/analytics"
          className="flex items-center gap-3 bg-white border-2 border-gray-300 rounded-lg shadow-md p-6 hover:shadow-lg transition opacity-50 cursor-not-allowed"
          onClick={(e) => { e.preventDefault(); alert('Analytics coming soon'); }}
        >
          <div className="text-5xl">📊</div>
          <div className="text-left">
            <div className="font-semibold text-gray-900">Campaign Analytics</div>
            <div className="text-sm text-gray-600">View performance reports</div>
          </div>
        </Link>
      </div>
 
      {/* Programs Table */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="px-6 py-4 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900">
            All Programs ({programs.length})
          </h3>
        </div>
 
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Created
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Name
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Type
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Start Date
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  End Date
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {loading ? (
                <tr>
                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">
                    Loading programs...
                  </td>
                </tr>
              ) : programs.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">
                    No marketing programs found. Create your first program to get started.
                  </td>
                </tr>
              ) : (
                programs.map((program) => (
                  <tr key={program.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {formatDateTime(program.createDt)}
                    </td>
                    <td className="px-6 py-4">
                      <div className="text-sm font-medium text-gray-900">{program.name}</div>
                      {program.description && (
                        <div className="text-sm text-gray-500 truncate max-w-xs">
                          {program.description}
                        </div>
                      )}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className="text-sm text-gray-900 capitalize">{program.type}</span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {formatDate(program.startDate)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {formatDate(program.endDate)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadgeColor(program.status)}`}>
                        {getStatusLabel(program.status)}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      <button
                        onClick={() => handleReviewProgram(program)}
                        className="text-blue-600 hover:text-blue-900 font-medium"
                      >
                        Review
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
 
      {/* Create Program Modal */}
      {createModal && (
        <div
          className="modal-overlay"
          onClick={() => setCreateModal(false)}
        >
          <div
            className="bg-white rounded-lg shadow-xl max-w-2xl w-full"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="border-b border-gray-200 px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-semibold text-gray-900">Create New Marketing Program</h2>
              <button
                onClick={() => setCreateModal(false)}
                className="text-gray-400 hover:text-gray-600 text-2xl font-bold"
              >
                ×
              </button>
            </div>
 
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Program Name <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="e.g., Summer Sale 2025"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    What short nickname will you internally refer to this program in reports etc
                  </p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Program Type
                  </label>
                  <select
                    value={programType}
                    onChange={(e) => setProgramType(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="loyalty">Loyalty Program</option>
                    <option value="promotion">Promotional Campaign</option>
                    <option value="email">Email Campaign</option>
                    <option value="sms">SMS Campaign</option>
                    <option value="event">Event Marketing</option>
                    <option value="other">Other</option>
                  </select>
                </div>
 
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Start Date <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="date"
                      value={startDate}
                      onChange={(e) => setStartDate(e.target.value)}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                    <p className="text-xs text-gray-500 mt-1">
                      When are you planning on starting promotional efforts? This is used in reports to determine any change in sales.
                    </p>
                  </div>
 
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      End Date <span className="text-red-500">*</span>
                    </label>
                    <input
                      type="date"
                      value={endDate}
                      onChange={(e) => setEndDate(e.target.value)}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                    <p className="text-xs text-gray-500 mt-1">
                      When are you planning on stopping promotional efforts?
                    </p>
                  </div>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Description
                  </label>
                  <textarea
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    placeholder="Brief description of the program goals and target audience..."
                    rows={3}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
            </div>
 
            <div className="border-t border-gray-200 px-6 py-4 flex justify-end gap-3">
              <button
                onClick={() => setCreateModal(false)}
                className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
              >
                Cancel
              </button>
              <button
                onClick={handleCreateProgram}
                className="px-4 py-2 bg-[#00946b] text-white rounded hover:bg-[#007a59]"
              >
                Create Program
              </button>
            </div>
          </div>
        </div>
      )}
 
      {/* Review Program Modal */}
      {reviewModal && selectedProgram && (
        <div
          className="modal-overlay"
          onClick={() => setReviewModal(false)}
        >
          <div
            className="bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="border-b border-gray-200 px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-semibold text-gray-900">{selectedProgram.name}</h2>
              <button
                onClick={() => setReviewModal(false)}
                className="text-gray-400 hover:text-gray-600 text-2xl font-bold"
              >
                ×
              </button>
            </div>
 
            <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
              <div className="space-y-6">
                {/* Status & Type */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-500 mb-1">Status</label>
                    <span className={`px-3 py-1 inline-flex text-sm font-semibold rounded-full ${getStatusBadgeColor(selectedProgram.status)}`}>
                      {getStatusLabel(selectedProgram.status)}
                    </span>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500 mb-1">Type</label>
                    <p className="text-gray-900 capitalize">{selectedProgram.type}</p>
                  </div>
                </div>
 
                {/* Dates */}
                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-500 mb-1">Created</label>
                    <p className="text-gray-900">{formatDateTime(selectedProgram.createDt)}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500 mb-1">Start Date</label>
                    <p className="text-gray-900">{formatDate(selectedProgram.startDate)}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500 mb-1">End Date</label>
                    <p className="text-gray-900">{formatDate(selectedProgram.endDate)}</p>
                  </div>
                </div>
 
                {/* Description */}
                {selectedProgram.description && (
                  <div>
                    <label className="block text-sm font-medium text-gray-500 mb-1">Description</label>
                    <p className="text-gray-900">{selectedProgram.description}</p>
                  </div>
                )}
 
                {/* Performance Metrics */}
                <div className="border-t pt-4">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">Performance Metrics</h3>
                  <div className="grid grid-cols-3 gap-4">
                    <div className="bg-gray-50 rounded-lg p-4">
                      <p className="text-sm text-gray-500">Total Reach</p>
                      <p className="text-2xl font-bold text-gray-900">-</p>
                      <p className="text-xs text-gray-400">Demo mode</p>
                    </div>
                    <div className="bg-gray-50 rounded-lg p-4">
                      <p className="text-sm text-gray-500">Conversion Rate</p>
                      <p className="text-2xl font-bold text-gray-900">-</p>
                      <p className="text-xs text-gray-400">Demo mode</p>
                    </div>
                    <div className="bg-gray-50 rounded-lg p-4">
                      <p className="text-sm text-gray-500">Revenue Impact</p>
                      <p className="text-2xl font-bold text-gray-900">-</p>
                      <p className="text-xs text-gray-400">Demo mode</p>
                    </div>
                  </div>
                </div>
 
                {/* Actions */}
                <div className="border-t pt-4">
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Program Actions</h3>
                  <div className="flex flex-wrap gap-3">
                    <button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                      Edit Program
                    </button>
                    <button className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
                      View Report
                    </button>
                    <button className="px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700">
                      Pause Program
                    </button>
                    <button className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                      End Program
                    </button>
                  </div>
                  <p className="text-sm text-gray-500 mt-3">
                    Note: Program actions are in demo mode and will not affect actual data.
                  </p>
                </div>
              </div>
            </div>
 
            <div className="border-t border-gray-200 px-6 py-4 flex justify-end">
              <button
                onClick={() => setReviewModal(false)}
                className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}