page.tsx

Go to the documentation of this file.

"use client";
 
import { useState } from 'react';
import { useTheme } from '@/contexts/ThemeContext';
import { useIcon, getIconThemeList, iconThemes, Icon } from '@/contexts/IconContext';
import { getThemeList, getAllThemes, saveCustomTheme, deleteCustomTheme, Theme } from '@/lib/themes';
import CustomThemeCreator from '@/components/CustomThemeCreator';
 
export default function SettingsPage() {
  const { theme, themeId, setTheme } = useTheme();
  const { iconTheme, iconThemeId, setIconTheme } = useIcon();
  const [activeTab, setActiveTab] = useState<'appearance' | 'iconography' | 'general'>('appearance');
  const [showCustomCreator, setShowCustomCreator] = useState(false);
  const [editingTheme, setEditingTheme] = useState<Theme | undefined>(undefined);
  const [themeList, setThemeList] = useState(getThemeList());
  const iconThemeList = getIconThemeList();
 
  const handleSaveCustomTheme = (customTheme: Theme) => {
    saveCustomTheme(customTheme);
    setThemeList(getThemeList()); // Refresh the list
    setTheme(customTheme.id); // Apply the new theme
    setShowCustomCreator(false);
    setEditingTheme(undefined);
  };
 
  const handleDeleteCustomTheme = (themeIdToDelete: string) => {
    if (confirm('Are you sure you want to delete this custom theme?')) {
      deleteCustomTheme(themeIdToDelete);
      setThemeList(getThemeList()); // Refresh the list
      if (themeId === themeIdToDelete) {
        setTheme('fieldpine'); // Switch to default if deleting current theme
      }
    }
  };
 
  const handleEditCustomTheme = (themeToEdit: Theme) => {
    setEditingTheme(themeToEdit);
    setShowCustomCreator(true);
  };
 
  const allThemes = getAllThemes();
 
  return (
    <div className="min-h-screen p-4 md:p-8" style={{ background: 'var(--bg)' }}>
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-2" style={{ color: 'var(--text)' }}>
            Settings
          </h1>
          <p className="text-lg" style={{ color: 'var(--muted)' }}>
            Customize your EverydayPOS experience
          </p>
        </div>
 
        {/* Tabs */}
        <div className="flex gap-2 mb-6 border-b pb-2" style={{ borderColor: 'var(--border)' }}>
          <button
            onClick={() => setActiveTab('appearance')}
            className={`px-6 py-3 font-semibold rounded-t-lg transition-all ${
              activeTab === 'appearance' 
                ? 'text-white shadow-lg' 
                : 'hover:bg-opacity-50'
            }`}
            style={{
              background: activeTab === 'appearance' ? 'var(--brand)' : 'var(--surface)',
              color: activeTab === 'appearance' ? '#ffffff' : 'var(--text)',
              border: `2px solid ${activeTab === 'appearance' ? 'var(--brand)' : 'var(--border)'}`,
            }}
          >
            <Icon name="palette" size={20} className="inline-block mr-2" /> Appearance
          </button>
          <button
            onClick={() => setActiveTab('iconography')}
            className={`px-6 py-3 font-semibold rounded-t-lg transition-all ${
              activeTab === 'iconography' 
                ? 'text-white shadow-lg' 
                : 'hover:bg-opacity-50'
            }`}
            style={{
              background: activeTab === 'iconography' ? 'var(--brand)' : 'var(--surface)',
              color: activeTab === 'iconography' ? '#ffffff' : 'var(--text)',
              border: `2px solid ${activeTab === 'iconography' ? 'var(--brand)' : 'var(--border)'}`,
            }}
          >
            <Icon name="category" size={20} className="inline-block mr-2" /> Iconography
          </button>
          <button
            onClick={() => setActiveTab('general')}
            className={`px-6 py-3 font-semibold rounded-t-lg transition-all ${
              activeTab === 'general' 
                ? 'text-white shadow-lg' 
                : 'hover:bg-opacity-50'
            }`}
            style={{
              background: activeTab === 'general' ? 'var(--brand)' : 'var(--surface)',
              color: activeTab === 'general' ? '#ffffff' : 'var(--text)',
              border: `2px solid ${activeTab === 'general' ? 'var(--brand)' : 'var(--border)'}`,
            }}
          >
            <Icon name="settings" size={20} className="inline-block mr-2" /> General
          </button>
        </div>
 
        {/* Appearance Tab */}
        {activeTab === 'appearance' && (
          <div className="space-y-6">
            <div className="card p-6">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h2 className="text-2xl font-bold mb-2" style={{ color: 'var(--text)' }}>
                    Theme Selection
                  </h2>
                  <p style={{ color: 'var(--muted)' }}>
                    Choose a theme that matches your style. Your selection is saved automatically.
                  </p>
                </div>
                <button
                  onClick={() => {
                    setEditingTheme(undefined);
                    setShowCustomCreator(true);
                  }}
                  className="btn btn-gradient px-6 py-3 rounded-lg font-semibold flex items-center gap-2 hover-scale"
                >
                  <Icon name="add" size={20} />
                  Create Custom Theme
                </button>
              </div>
 
              {/* Theme Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {themeList.map((t) => {
                  const isSelected = themeId === t.id;
                  const themeData = allThemes[t.id];
                  
                  return (
                    <div key={t.id} className="relative">
                      <button
                        onClick={() => setTheme(t.id)}
                        className={`w-full relative p-5 rounded-xl transition-all duration-300 text-left ${
                          isSelected 
                            ? 'ring-4 ring-offset-2 scale-105 shadow-2xl' 
                            : 'hover:scale-102 hover:shadow-lg'
                        }`}
                        style={{
                          background: themeData.colors.surface,
                          borderColor: themeData.colors.brand,
                          border: `3px solid ${isSelected ? themeData.colors.brand : themeData.colors.border}`,
                        }}
                      >
                        {/* Selected Badge */}
                        {isSelected && (
                          <div 
                            className="absolute -top-2 -right-2 w-8 h-8 rounded-full flex items-center justify-center text-white font-bold shadow-lg z-10"
                            style={{ background: themeData.colors.brand }}
                          >
                            ✓
                          </div>
                        )}
 
                        {/* Custom Badge */}
                        {t.isCustom && (
                          <div 
                            className="absolute top-2 left-2 px-2 py-1 rounded text-xs font-bold text-white shadow-sm"
                            style={{ background: themeData.colors.brand }}
                          >
                            Custom
                          </div>
                        )}
 
                        {/* Theme Preview Colors */}
                        <div className="flex gap-2 mb-4">
                          <div 
                            className="w-12 h-12 rounded-lg shadow-sm"
                            style={{ background: themeData.colors.brand }}
                          />
                          <div 
                            className="w-12 h-12 rounded-lg shadow-sm"
                            style={{ background: themeData.colors.brand2 }}
                          />
                          <div 
                            className="w-12 h-12 rounded-lg shadow-sm"
                            style={{ background: themeData.colors.bg }}
                          />
                        </div>
 
                        {/* Theme Info */}
                        <h3 
                          className="text-lg font-bold mb-1"
                          style={{ color: themeData.colors.text }}
                        >
                          {t.name}
                        </h3>
                        <p 
                          className="text-sm"
                          style={{ color: themeData.colors.muted }}
                        >
                          {t.description}
                        </p>
 
                        {/* Mini Preview */}
                        <div className="mt-4 pt-4" style={{ borderTop: `1px solid ${themeData.colors.border}` }}>
                          <div className="flex items-center gap-2">
                            <div 
                              className="w-6 h-6 rounded"
                              style={{ background: themeData.colors.success || themeData.colors.brand }}
                            />
                            <div 
                              className="w-6 h-6 rounded"
                              style={{ background: themeData.colors.warn }}
                            />
                            <div 
                              className="w-6 h-6 rounded"
                              style={{ background: themeData.colors.danger }}
                            />
                            <div 
                              className="w-6 h-6 rounded"
                              style={{ background: themeData.colors.info || themeData.colors.brand2 }}
                            />
                          </div>
                        </div>
                      </button>
 
                      {/* Custom Theme Actions */}
                      {t.isCustom && (
                        <div className="flex gap-2 mt-2">
                          <button
                            onClick={() => handleEditCustomTheme(themeData)}
                            className="flex-1 px-3 py-2 bg-surface border border-border rounded-lg hover:bg-surface-2 transition text-sm font-semibold"
                            style={{ color: 'var(--text)' }}
                          >
                            <Icon name="edit" size={16} className="inline mr-1" />
                            Edit
                          </button>
                          <button
                            onClick={() => handleDeleteCustomTheme(t.id)}
                            className="flex-1 px-3 py-2 bg-danger text-white rounded-lg hover:opacity-90 transition text-sm font-semibold"
                          >
                            <Icon name="delete" size={16} className="inline mr-1" />
                            Delete
                          </button>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
 
            {/* Current Theme Info */}
            <div className="card p-6">
              <h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text)' }}>
                Current Theme Details
              </h3>
              <div className="space-y-3">
                <div>
                  <span className="font-semibold" style={{ color: 'var(--text)' }}>Name: </span>
                  <span style={{ color: 'var(--muted)' }}>{theme.name}</span>
                </div>
                <div>
                  <span className="font-semibold" style={{ color: 'var(--text)' }}>Description: </span>
                  <span style={{ color: 'var(--muted)' }}>{theme.description}</span>
                </div>
                <div>
                  <span className="font-semibold" style={{ color: 'var(--text)' }}>Border Radius: </span>
                  <span style={{ color: 'var(--muted)' }}>{theme.radius.radius}</span>
                </div>
              </div>
 
              {/* Color Palette Display */}
              <div className="mt-6">
                <h4 className="font-semibold mb-3" style={{ color: 'var(--text)' }}>
                  Color Palette
                </h4>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                  {Object.entries(theme.colors).map(([key, value]) => (
                    <div key={key} className="flex flex-col items-center">
                      <div
                        className="w-16 h-16 rounded-lg shadow-md mb-2"
                        style={{ background: value }}
                      />
                      <span className="text-xs font-mono" style={{ color: 'var(--muted)' }}>
                        {key}
                      </span>
                      <span className="text-xs font-mono" style={{ color: 'var(--muted)' }}>
                        {value}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
 
        {/* Iconography Tab */}
        {activeTab === 'iconography' && (
          <div className="space-y-6">
            <div className="card p-6">
              <h2 className="text-2xl font-bold mb-2" style={{ color: 'var(--text)' }}>
                Icon Style Selection
              </h2>
              <p className="mb-6" style={{ color: 'var(--muted)' }}>
                Choose an icon style for the entire application. Includes Google Material Icons, Material Symbols, and Emoji options.
              </p>
 
              {/* Icon Theme Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {iconThemeList.map((t) => {
                  const isSelected = iconThemeId === t.id;
                  const iconThemeData = iconThemes[t.id];
                  
                  return (
                    <button
                      key={t.id}
                      onClick={() => setIconTheme(t.id)}
                      className={`relative p-5 rounded-xl transition-all duration-300 text-left ${
                        isSelected 
                          ? 'ring-4 ring-offset-2 scale-105 shadow-2xl' 
                          : 'hover:scale-102 hover:shadow-lg'
                      }`}
                      style={{
                        background: 'var(--surface)',
                        borderColor: 'var(--brand)',
                        border: `3px solid ${isSelected ? 'var(--brand)' : 'var(--border)'}`,
                      }}
                    >
                      {/* Selected Badge */}
                      {isSelected && (
                        <div 
                          className="absolute -top-2 -right-2 w-8 h-8 rounded-full flex items-center justify-center text-white font-bold shadow-lg"
                          style={{ background: 'var(--brand)' }}
                        >
                          ✓
                        </div>
                      )}
 
                      {/* Icon Preview */}
                      <div className="flex justify-center gap-3 mb-4 text-4xl">
                        {iconThemeData.style === 'emoji' ? (
                          <>
                            <span>🏠</span>
                            <span>⚙️</span>
                            <span>❤️</span>
                            <span>⭐</span>
                          </>
                        ) : (
                          <>
                            <span
                              className={iconThemeData.style}
                              style={{
                                fontFamily: iconThemeData.fontFamily,
                                fontVariationSettings: iconThemeData.style.startsWith('material-symbols')
                                  ? `'FILL' ${iconThemeData.fill ? 1 : 0}, 'wght' ${iconThemeData.weight || 400}, 'GRAD' ${iconThemeData.grade || 0}, 'opsz' ${iconThemeData.opticalSize || 24}`
                                  : undefined,
                              }}
                            >
                              home
                            </span>
                            <span
                              className={iconThemeData.style}
                              style={{
                                fontFamily: iconThemeData.fontFamily,
                                fontVariationSettings: iconThemeData.style.startsWith('material-symbols')
                                  ? `'FILL' ${iconThemeData.fill ? 1 : 0}, 'wght' ${iconThemeData.weight || 400}, 'GRAD' ${iconThemeData.grade || 0}, 'opsz' ${iconThemeData.opticalSize || 24}`
                                  : undefined,
                              }}
                            >
                              settings
                            </span>
                            <span
                              className={iconThemeData.style}
                              style={{
                                fontFamily: iconThemeData.fontFamily,
                                fontVariationSettings: iconThemeData.style.startsWith('material-symbols')
                                  ? `'FILL' ${iconThemeData.fill ? 1 : 0}, 'wght' ${iconThemeData.weight || 400}, 'GRAD' ${iconThemeData.grade || 0}, 'opsz' ${iconThemeData.opticalSize || 24}`
                                  : undefined,
                              }}
                            >
                              favorite
                            </span>
                            <span
                              className={iconThemeData.style}
                              style={{
                                fontFamily: iconThemeData.fontFamily,
                                fontVariationSettings: iconThemeData.style.startsWith('material-symbols')
                                  ? `'FILL' ${iconThemeData.fill ? 1 : 0}, 'wght' ${iconThemeData.weight || 400}, 'GRAD' ${iconThemeData.grade || 0}, 'opsz' ${iconThemeData.opticalSize || 24}`
                                  : undefined,
                              }}
                            >
                              star
                            </span>
                          </>
                        )}
                      </div>
 
                      {/* Icon Theme Info */}
                      <h3 
                        className="text-lg font-bold mb-1"
                        style={{ color: 'var(--text)' }}
                      >
                        {t.name}
                      </h3>
                      <p 
                        className="text-sm"
                        style={{ color: 'var(--muted)' }}
                      >
                        {t.description}
                      </p>
 
                      {/* Style Properties */}
                      <div className="mt-3 pt-3" style={{ borderTop: '1px solid var(--border)' }}>
                        <div className="flex flex-wrap gap-2">
                          <span
                            className="text-xs px-2 py-1 rounded"
                            style={{ background: 'var(--brand-2)', color: 'var(--text)' }}
                          >
                            {iconThemeData.style}
                          </span>
                          {iconThemeData.fill !== undefined && (
                            <span
                              className="text-xs px-2 py-1 rounded"
                              style={{ background: 'var(--surface-2)', color: 'var(--muted)' }}
                            >
                              {iconThemeData.fill ? 'Filled' : 'Outlined'}
                            </span>
                          )}
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
 
            {/* Current Icon Theme Details */}
            <div className="card p-6">
              <h3 className="text-xl font-bold mb-4" style={{ color: 'var(--text)' }}>
                Current Icon Theme Details
              </h3>
              <div className="space-y-3">
                <div>
                  <span className="font-semibold" style={{ color: 'var(--text)' }}>Name: </span>
                  <span style={{ color: 'var(--muted)' }}>{iconTheme.name}</span>
                </div>
                <div>
                  <span className="font-semibold" style={{ color: 'var(--text)' }}>Description: </span>
                  <span style={{ color: 'var(--muted)' }}>{iconTheme.description}</span>
                </div>
                <div>
                  <span className="font-semibold" style={{ color: 'var(--text)' }}>Style: </span>
                  <span style={{ color: 'var(--muted)' }}>{iconTheme.style}</span>
                </div>
                <div>
                  <span className="font-semibold" style={{ color: 'var(--text)' }}>Font Family: </span>
                  <span style={{ color: 'var(--muted)' }}>{iconTheme.fontFamily}</span>
                </div>
                {iconTheme.weight !== undefined && (
                  <div>
                    <span className="font-semibold" style={{ color: 'var(--text)' }}>Weight: </span>
                    <span style={{ color: 'var(--muted)' }}>{iconTheme.weight}</span>
                  </div>
                )}
              </div>
 
              {/* Icon Preview Gallery */}
              <div className="mt-6">
                <h4 className="font-semibold mb-3" style={{ color: 'var(--text)' }}>
                  Icon Preview Gallery
                </h4>
                <div className="grid grid-cols-4 md:grid-cols-8 gap-4">
                  {[
                    'home', 'settings', 'person', 'search', 'shopping_cart', 'favorite', 'star', 'check',
                    'close', 'menu', 'edit', 'delete', 'save', 'print', 'email', 'phone',
                    'notifications', 'warning', 'error', 'info', 'help', 'lock', 'download', 'refresh'
                  ].map((iconName) => (
                    <div key={iconName} className="flex flex-col items-center gap-2">
                      <Icon name={iconName} size={32} />
                      <span className="text-xs text-center" style={{ color: 'var(--muted)' }}>
                        {iconName}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
 
        {/* General Tab */}
        {activeTab === 'general' && (
          <div className="card p-6">
            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text)' }}>
              General Settings
            </h2>
            <p style={{ color: 'var(--muted)' }}>
              Additional settings coming soon...
            </p>
          </div>
        )}
      </div>
 
      {/* Custom Theme Creator Modal */}
      {showCustomCreator && (
        <CustomThemeCreator
          onSave={handleSaveCustomTheme}
          onClose={() => {
            setShowCustomCreator(false);
            setEditingTheme(undefined);
          }}
          existingTheme={editingTheme}
        />
      )}
    </div>
  );
}