221 lines
11 KiB
TypeScript
221 lines
11 KiB
TypeScript
import { Form, Link, useLoaderData } from "@remix-run/react";
|
|
import type { Employee } from "@prisma/client";
|
|
|
|
interface DashboardLayoutProps {
|
|
children: React.ReactNode;
|
|
user: Pick<Employee, "id" | "name" | "username" | "authLevel">;
|
|
}
|
|
|
|
export default function DashboardLayout({ children, user }: DashboardLayoutProps) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Navigation */}
|
|
<nav className="bg-white shadow-sm border-b border-gray-200">
|
|
<div className="max-w-full mx-auto px-0 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16">
|
|
<div className="flex items-center">
|
|
<img
|
|
className="h-12 w-auto justify-self-start"
|
|
src="/clogo-sm.png"
|
|
alt="Phosphat Report"
|
|
/>
|
|
{/* <div className="ml-4">
|
|
<h1 className="text-xl font-semibold text-gray-900">
|
|
Phosphat Report Dashboard
|
|
</h1>
|
|
</div> */}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-sm text-gray-700">
|
|
Welcome, <span className="font-medium">{user.name}</span>
|
|
</div>
|
|
{/* <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
user.authLevel === 1
|
|
? 'bg-red-100 text-red-800'
|
|
: user.authLevel === 2
|
|
? 'bg-yellow-100 text-yellow-800'
|
|
: 'bg-green-100 text-green-800'
|
|
}`}>
|
|
Level {user.authLevel}
|
|
</span> */}
|
|
</div>
|
|
|
|
<Form method="post" action="/logout">
|
|
<button
|
|
type="submit"
|
|
className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 shadow-sm transition duration-150 ease-in-out"
|
|
>
|
|
<svg className="-ml-0.5 mr-2 h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
Logout
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Sidebar */}
|
|
<div className="flex">
|
|
<div className="w-64 bg-white shadow-sm min-h-screen">
|
|
<nav className="mt-8 px-4">
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link
|
|
to="/dashboard"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5a2 2 0 012-2h4a2 2 0 012 2v6a2 2 0 01-2 2H10a2 2 0 01-2-2V5z" />
|
|
</svg>
|
|
Dashboard
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/reports"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Reports
|
|
</Link>
|
|
</li>
|
|
|
|
{(user.authLevel >= 2) && (
|
|
<>
|
|
|
|
{/* Management Section */}
|
|
<li className="mt-6">
|
|
<div className="px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Management
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/areas"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Areas
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/dredger-locations"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
Dredger Locations
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/reclamation-locations"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Reclamation Locations
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/equipment"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
|
</svg>
|
|
Equipment
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/foreman"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
Foreman
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/employees"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
|
</svg>
|
|
Employees
|
|
</Link>
|
|
</li>
|
|
</>
|
|
)}
|
|
|
|
{user.authLevel === 3 && (
|
|
<>
|
|
{/* Admin Section */}
|
|
<li className="mt-6">
|
|
<div className="px-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
Administration
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/mail-settings"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
Mail Settings
|
|
</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link
|
|
to="/test-email"
|
|
className="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-900 hover:bg-gray-50"
|
|
>
|
|
<svg className="mr-4 h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
Test Email
|
|
</Link>
|
|
</li>
|
|
</>
|
|
)}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 p-8">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |