page.tsx

Go to the documentation of this file.

'use client';
 
import { useEffect, useState, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { useStore } from '@/contexts/StoreContext';
 
function UnauthorizedPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { session, logout } = useStore();
  const [reason, setReason] = useState('');
  const [attemptedRoute, setAttemptedRoute] = useState('');
 
  useEffect(() => {
    const reasonParam = searchParams.get('reason');
    const routeParam = searchParams.get('route');
    
    if (reasonParam) {
      setReason(reasonParam);
    }
    if (routeParam) {
      setAttemptedRoute(routeParam);
    }
  }, [searchParams]);
 
  const getMessage = () => {
    switch (reason) {
      case 'store-required':
        return {
          title: 'Store Login Required',
          description: 'This page requires you to be logged into a retail store location.',
          explanation: 'POS functions (Sales, Returns) are only available when logged into a specific store like Cowra, Griffith, or Murwillumbah.',
          action: 'Please logout and login to a retail store to access this feature.'
        };
      case 'management-required':
        return {
          title: 'Management Portal Required',
          description: 'This page is only available in the management portal.',
          explanation: 'Reports and system settings are only accessible when logged into the IIG Management Portal.',
          action: 'Please logout and login to the management portal to access this feature.'
        };
      default:
        return {
          title: 'Access Denied',
          description: 'You do not have permission to access this page.',
          explanation: 'Your current role and login location do not grant access to this resource.',
          action: 'Please contact your system administrator if you believe this is an error.'
        };
    }
  };
 
  const message = getMessage();
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 p-4">
      <div className="max-w-2xl w-full space-y-6 p-8 bg-white dark:bg-gray-800 rounded-xl shadow-2xl">
        {/* Icon */}
        <div className="flex justify-center">
          <div className="w-20 h-20 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
            <svg className="w-10 h-10 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
        </div>
 
        {/* Title */}
        <div className="text-center">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            {message.title}
          </h1>
          <p className="text-lg text-gray-600 dark:text-gray-400">
            {message.description}
          </p>
        </div>
 
        {/* Details */}
        <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-6 space-y-4">
          {/* Current Context */}
          {session && (
            <div className="space-y-2">
              <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Your Current Session:</h3>
              <div className="space-y-1 text-sm text-gray-600 dark:text-gray-300">
                <div className="flex items-center gap-2">
                  <span className="font-medium">User:</span>
                  <span>{session.user.name}</span>
                  <span className="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs rounded capitalize">
                    {session.user.role}
                  </span>
                </div>
                {session.store && (
                  <>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">Store:</span>
                      <span>{session.store.name}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="font-medium">Type:</span>
                      {session.store.type === 'management' ? (
                        <span className="px-2 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs rounded">
                          Management Portal
                        </span>
                      ) : (
                        <span className="px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs rounded">
                          Retail Store
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            </div>
          )}
 
          {attemptedRoute && (
            <div className="space-y-2 pt-2 border-t border-gray-200 dark:border-gray-600">
              <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Attempted Route:</h3>
              <div className="text-sm font-mono bg-white dark:bg-gray-800 px-3 py-2 rounded border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300">
                {attemptedRoute}
              </div>
            </div>
          )}
 
          {/* Explanation */}
          <div className="space-y-2 pt-2 border-t border-gray-200 dark:border-gray-600">
            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Why am I seeing this?</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {message.explanation}
            </p>
          </div>
 
          {/* Action */}
          <div className="space-y-2 pt-2 border-t border-gray-200 dark:border-gray-600">
            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">What should I do?</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {message.action}
            </p>
          </div>
        </div>
 
        {/* Actions */}
        <div className="flex flex-col sm:flex-row gap-3">
          <Link 
            href="/pages/home"
            className="flex-1 px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 font-semibold text-center transition"
          >
            Go to Home
          </Link>
          <button
            onClick={() => router.back()}
            className="flex-1 px-6 py-3 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 font-semibold transition"
          >
            Go Back
          </button>
          <button
            onClick={logout}
            className="flex-1 px-6 py-3 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 font-semibold transition"
          >
            Logout
          </button>
        </div>
 
        {/* Help */}
        <div className="text-center text-sm text-gray-500 dark:text-gray-400">
          <p>Need help? Contact your system administrator</p>
        </div>
      </div>
    </div>
  );
}
 
export default function UnauthorizedPage() {
  return (
    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
      <UnauthorizedPageContent />
    </Suspense>
  );
}