mirror of
https://github.com/ceratic/project_vollidioten_website.git
synced 2026-05-14 00:16:47 +02:00
708 lines
37 KiB
TypeScript
708 lines
37 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { Project, ShopItem } from '../types';
|
|
import { Icons, ItemIcon } from '../components/IconSet';
|
|
import { dbService } from '../services/DatabaseService';
|
|
import { authService } from '../services/AuthService';
|
|
import { DiscordUser } from '../types';
|
|
import EditModal from '../components/EditModal';
|
|
import ShopManagementModal from '../components/ShopManagementModal';
|
|
import EmployeeManagementModal from '../components/EmployeeManagementModal';
|
|
import BannerManagementModal from '../components/BannerManagementModal';
|
|
import LogoManagementModal from '../components/LogoManagementModal';
|
|
import GalleryManagementModal from '../components/GalleryManagementModal';
|
|
import DeleteProjectModal from '../components/DeleteProjectModal';
|
|
|
|
const ProjectProfile: React.FC = () => {
|
|
const { id } = useParams<{ id: string }>();
|
|
const navigate = useNavigate();
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'shop' | 'manage'>('overview');
|
|
const [user, setUser] = useState<DiscordUser | null>(null);
|
|
const [org, setOrg] = useState<any>(null);
|
|
const [ownerPlayer, setOwnerPlayer] = useState<any>(null);
|
|
const [isEditDescriptionOpen, setIsEditDescriptionOpen] = useState(false);
|
|
const [isEditHiringOpen, setIsEditHiringOpen] = useState(false);
|
|
const [isShopModalOpen, setIsShopModalOpen] = useState(false);
|
|
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
|
|
const [isBannerModalOpen, setIsBannerModalOpen] = useState(false);
|
|
const [isLogoModalOpen, setIsLogoModalOpen] = useState(false);
|
|
const [isGalleryModalOpen, setIsGalleryModalOpen] = useState(false);
|
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
|
|
// Subscribe to auth and data updates
|
|
useEffect(() => {
|
|
const unsubAuth = authService.subscribe(setUser);
|
|
return unsubAuth;
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!id) {
|
|
navigate('/projects');
|
|
return;
|
|
}
|
|
|
|
// Load project data
|
|
const projectData = dbService.getProject(id);
|
|
if (projectData) {
|
|
setProject(projectData);
|
|
} else {
|
|
navigate('/projects');
|
|
return;
|
|
}
|
|
|
|
setLoading(false);
|
|
}, [id, navigate]);
|
|
|
|
useEffect(() => {
|
|
if (!project) return;
|
|
|
|
// Load associated org and owner player
|
|
if (project.associatedOrgId) {
|
|
const foundOrg = dbService.getOrg(project.associatedOrgId);
|
|
setOrg(foundOrg);
|
|
}
|
|
|
|
// Find owner player by username
|
|
const players = dbService.getPlayers();
|
|
const owner = players.find(p => p.username === project.owner);
|
|
setOwnerPlayer(owner);
|
|
}, [project]);
|
|
|
|
const onSelectPlayer = (playerId: string) => navigate(`/players/${playerId}`);
|
|
const onSelectOrg = (orgId: string) => {
|
|
const org = dbService.getOrgs().find(o => o.id === orgId);
|
|
if (org?.type === 'City') {
|
|
navigate(`/cities/${orgId}`);
|
|
} else {
|
|
navigate(`/organizations/${orgId}`);
|
|
}
|
|
};
|
|
const onBack = () => navigate('/projects');
|
|
|
|
const hasShop = project?.shopCatalog && project.shopCatalog.length > 0;
|
|
const isOwner = user?.linkedPlayerUuid && ownerPlayer && dbService.getPlayer(user.linkedPlayerUuid)?.username === project?.owner;
|
|
|
|
// Group shop items
|
|
const services = project?.shopCatalog?.filter(i => i.type === 'service') || [];
|
|
const products = project?.shopCatalog?.filter(i => i.type !== 'service') || [];
|
|
|
|
if (loading || !project) {
|
|
return (
|
|
<div className="max-w-4xl mx-auto animate-in slide-in-from-right-4 duration-300">
|
|
<div className="flex justify-center py-20">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accentInfo"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="animate-in slide-in-from-right-4 duration-300">
|
|
<button onClick={() => navigate('/projects')} className="flex items-center gap-2 text-sm text-textMuted hover:text-textMain mb-6 transition-colors group">
|
|
<span className="group-hover:-translate-x-1 transition-transform">←</span> Zurück zum Verzeichnis
|
|
</button>
|
|
|
|
{/* Banner Header */}
|
|
<div className="relative h-64 md:h-80 rounded-2xl overflow-hidden border border-border mb-8 shadow-card group">
|
|
<img
|
|
src={project.bannerUrl || 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=2070&auto=format&fit=crop'}
|
|
alt={project.title}
|
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
/>
|
|
|
|
{/* Decorative elements for Black Market */}
|
|
{project.category === 'Black Market' && (
|
|
<div className="absolute inset-0 bg-red-900/20 mix-blend-overlay" />
|
|
)}
|
|
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent" />
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 p-8">
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className={`text-xs font-mono px-2 py-1 rounded border border-white/5 uppercase tracking-wider bg-black/40 backdrop-blur ${
|
|
project.category === 'Story Arc' ? 'text-orange-400' :
|
|
project.category === 'Black Market' ? 'text-red-400' :
|
|
'text-accentInfo'
|
|
}`}>
|
|
{project.category}
|
|
</span>
|
|
{project.status === 'active' && (
|
|
<span className="flex items-center gap-1.5 text-xs font-bold text-accentSuccess bg-black/40 px-2 py-1 rounded backdrop-blur border border-white/5">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-accentSuccess animate-pulse" />
|
|
AKTIV
|
|
</span>
|
|
)}
|
|
{project.hiring && (
|
|
<span className="flex items-center gap-1.5 text-xs font-bold text-purple-400 bg-black/40 px-2 py-1 rounded backdrop-blur border border-white/5">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-purple-400 animate-pulse" />
|
|
STELLEN
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-white tracking-tight mb-2 drop-shadow-lg">{project.title}</h1>
|
|
<div className="flex items-center gap-6 text-sm text-gray-300">
|
|
<span
|
|
className={`flex items-center gap-2 ${ownerPlayer ? 'cursor-pointer hover:text-white transition-colors group/owner' : ''}`}
|
|
onClick={() => ownerPlayer && onSelectPlayer(ownerPlayer.uuid)}
|
|
>
|
|
{project.logoUrl ? (
|
|
<img
|
|
src={project.logoUrl}
|
|
alt={`${project.title} Logo`}
|
|
className="w-5 h-5 rounded-full border border-white/10 object-cover group-hover/owner:border-accentInfo transition-colors"
|
|
/>
|
|
) : (
|
|
<div className="w-5 h-5 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center text-[10px] border border-white/10 font-bold group-hover/owner:border-accentInfo group-hover/owner:text-accentInfo transition-colors">
|
|
{project.owner.charAt(0)}
|
|
</div>
|
|
)}
|
|
Inhaber: <span className="text-white font-medium group-hover/owner:underline decoration-accentInfo/50 underline-offset-4">{project.owner}</span>
|
|
</span>
|
|
{project.foundedDate && (
|
|
<span className="flex items-center gap-1.5 text-textMuted">
|
|
<Icons.Layers className="w-3.5 h-3.5" /> Gegr. {project.foundedDate}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{hasShop && (
|
|
<button
|
|
onClick={() => setActiveTab('shop')}
|
|
className="flex items-center gap-2 bg-accentInfo hover:bg-accentInfo/90 text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-lg shadow-accentInfo/20 border border-white/10 backdrop-blur-sm group/btn"
|
|
>
|
|
<Icons.ShoppingBag className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
|
|
Katalog öffnen
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex gap-8 border-b border-border mb-8 px-2">
|
|
<button
|
|
onClick={() => setActiveTab('overview')}
|
|
className={`pb-4 text-sm font-medium transition-colors border-b-2 ${activeTab === 'overview' ? 'border-accentInfo text-white' : 'border-transparent text-textMuted hover:text-white'}`}
|
|
>
|
|
Übersicht
|
|
</button>
|
|
{hasShop && (
|
|
<button
|
|
onClick={() => setActiveTab('shop')}
|
|
className={`pb-4 text-sm font-medium transition-colors border-b-2 ${activeTab === 'shop' ? 'border-accentInfo text-white' : 'border-transparent text-textMuted hover:text-white'}`}
|
|
>
|
|
Katalog ({project.shopCatalog?.length})
|
|
</button>
|
|
)}
|
|
{isOwner && (
|
|
<button
|
|
onClick={() => setActiveTab('manage')}
|
|
className={`pb-4 text-sm font-medium transition-colors border-b-2 ${activeTab === 'manage' ? 'border-accentInfo text-white' : 'border-transparent text-textMuted hover:text-white'}`}
|
|
>
|
|
Verwalten
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="min-h-[400px]">
|
|
{activeTab === 'overview' && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2 space-y-8">
|
|
<section className="bg-surface/50 border border-border rounded-xl p-6">
|
|
<h3 className="text-lg font-bold text-white mb-4">Manifest</h3>
|
|
<p className="text-textMuted leading-relaxed whitespace-pre-line text-lg">
|
|
{project.description}
|
|
</p>
|
|
</section>
|
|
|
|
{/* Project Portfolio / Gallery */}
|
|
{project.gallery && project.gallery.length > 0 && (
|
|
<section>
|
|
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
|
<Icons.Layers className="w-4 h-4 text-accentInfo" /> Portfolio
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{project.gallery.map((image, idx) => (
|
|
<div key={idx} className="rounded-xl overflow-hidden aspect-video border border-border group relative">
|
|
<img src={image.url} alt={`Portfolio ${idx}`} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<section>
|
|
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
|
<Icons.Users className="w-4 h-4 text-accentInfo" /> Personal
|
|
</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{project.employees.map((emp, idx) => {
|
|
const players = dbService.getPlayers();
|
|
const empPlayer = players.find(p => p.username === emp);
|
|
return (
|
|
<div
|
|
key={idx}
|
|
onClick={() => empPlayer && onSelectPlayer(empPlayer.uuid)}
|
|
className={`flex items-center gap-3 bg-surface border border-border p-3 rounded-lg ${empPlayer ? 'cursor-pointer hover:border-accentInfo/50 hover:bg-surfaceHighlight/30 transition-all group' : ''}`}
|
|
>
|
|
<div className="w-8 h-8 bg-surfaceHighlight rounded flex items-center justify-center text-xs font-bold text-textMuted group-hover:text-textMain transition-colors">
|
|
{emp.charAt(0)}
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-300 group-hover:text-accentInfo transition-colors">{emp}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
{project.employees.length === 0 && (
|
|
<div className="text-textMuted italic text-sm">Kein weiteres Personal registriert.</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Right Column: Statistics */}
|
|
<div className="space-y-6">
|
|
<div className="bg-surface border border-border rounded-xl p-6 h-fit">
|
|
<h3 className="text-xs font-bold uppercase text-textMuted mb-6 flex items-center gap-2">
|
|
<Icons.Terminal className="w-4 h-4" /> Unternehmensdaten
|
|
</h3>
|
|
<div className="space-y-5">
|
|
|
|
{/* Industry */}
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-textMuted">Branche</span>
|
|
<span className={`text-sm font-medium ${
|
|
project.category === 'Black Market' ? 'text-red-400' : 'text-white'
|
|
}`}>{project.category}</span>
|
|
</div>
|
|
<div className="w-full bg-white/5 h-px" />
|
|
|
|
{/* Founded */}
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-textMuted">Gegründet</span>
|
|
<span className="text-sm font-medium text-white">{project.foundedDate || 'N/A'}</span>
|
|
</div>
|
|
<div className="w-full bg-white/5 h-px" />
|
|
|
|
{/* Reputation */}
|
|
<div>
|
|
<div className="flex justify-between text-xs mb-2">
|
|
<span className="text-textMuted">Ruf</span>
|
|
<span className="font-mono text-white">{project.progress}/100</span>
|
|
</div>
|
|
<div className="h-1.5 bg-surfaceHighlight rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full ${project.category === 'Black Market' ? 'bg-red-500' : 'bg-accentInfo'}`}
|
|
style={{ width: `${project.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full bg-white/5 h-px" />
|
|
|
|
{/* Workforce */}
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-textMuted">Belegschaft</span>
|
|
<div className="flex items-center gap-2">
|
|
<Icons.Users className="w-3 h-3 text-textMuted" />
|
|
<span className="text-sm font-medium text-white">{project.employees.length + 1}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Headquarters Link */}
|
|
{org && (
|
|
<div className="mt-4 pt-4 border-t border-white/5">
|
|
<span className="text-xs text-textMuted block mb-2">Hauptsitz</span>
|
|
<div
|
|
onClick={() => onSelectOrg(org.id)}
|
|
className="flex items-center gap-3 bg-surfaceHighlight/50 p-2 rounded-lg border border-white/5 cursor-pointer hover:border-accentInfo/50 hover:bg-surfaceHighlight transition-all group"
|
|
>
|
|
<div className="w-8 h-8 rounded bg-blue-500/20 text-blue-400 flex items-center justify-center font-bold text-xs border border-blue-500/20">
|
|
{org.name.charAt(0)}
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-200 group-hover:text-white transition-colors">{org.name}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'manage' && isOwner && (
|
|
<div className="space-y-8">
|
|
<div className="bg-surface/50 border border-border rounded-xl p-6">
|
|
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
|
|
<Icons.Edit className="w-5 h-5 text-accentInfo" />
|
|
Unternehmen verwalten
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Edit Description */}
|
|
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-textMain mb-3">Manifest bearbeiten</h4>
|
|
<p className="text-xs text-textMuted mb-4">
|
|
Ändern Sie die Beschreibung und das Leitbild Ihres Unternehmens.
|
|
</p>
|
|
<button
|
|
onClick={() => setIsEditDescriptionOpen(true)}
|
|
className="w-full bg-accentInfo hover:bg-accentInfo/90 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
Beschreibung bearbeiten
|
|
</button>
|
|
</div>
|
|
|
|
{/* Toggle Hiring */}
|
|
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-textMain mb-3">Stellenanzeigen</h4>
|
|
<p className="text-xs text-textMuted mb-4">
|
|
Aktuell: {project.hiring ? 'Stellen sind ausgeschrieben' : 'Keine offenen Stellen'}
|
|
</p>
|
|
<button
|
|
onClick={() => setIsEditHiringOpen(true)}
|
|
className="w-full bg-accentInfo hover:bg-accentInfo/90 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
{project.hiring ? 'Stellenanzeigen beenden' : 'Stellen ausschreiben'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Shop Management */}
|
|
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-textMain mb-3">Shop verwalten</h4>
|
|
<p className="text-xs text-textMuted mb-4">
|
|
Fügen Sie Produkte, Dienstleistungen und Preise hinzu.
|
|
</p>
|
|
<button
|
|
onClick={() => setIsShopModalOpen(true)}
|
|
className="w-full bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
Shop bearbeiten
|
|
</button>
|
|
</div>
|
|
|
|
{/* Employee Management */}
|
|
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-textMain mb-3">Mitarbeiter verwalten</h4>
|
|
<p className="text-xs text-textMuted mb-4">
|
|
Fügen Sie Mitarbeiter hinzu oder entfernen Sie sie.
|
|
</p>
|
|
<button
|
|
onClick={() => setIsEmployeeModalOpen(true)}
|
|
className="w-full bg-green-500 hover:bg-green-600 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
Mitarbeiter verwalten
|
|
</button>
|
|
</div>
|
|
|
|
{/* Banner Management */}
|
|
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-textMain mb-3">Banner ändern</h4>
|
|
<p className="text-xs text-textMuted mb-4">
|
|
Ändern Sie das Titelbild Ihres Unternehmens.
|
|
</p>
|
|
<button
|
|
onClick={() => setIsBannerModalOpen(true)}
|
|
className="w-full bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
Banner bearbeiten
|
|
</button>
|
|
</div>
|
|
|
|
{/* Logo Management */}
|
|
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-textMain mb-3">Logo ändern</h4>
|
|
<p className="text-xs text-textMuted mb-4">
|
|
Setzen Sie ein Logo für Ihr Unternehmen.
|
|
</p>
|
|
<button
|
|
onClick={() => setIsLogoModalOpen(true)}
|
|
className="w-full bg-green-500 hover:bg-green-600 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
Logo bearbeiten
|
|
</button>
|
|
</div>
|
|
|
|
{/* Gallery Management */}
|
|
<div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-textMain mb-3">Galerie verwalten</h4>
|
|
<p className="text-xs text-textMuted mb-4">
|
|
Fügen Sie Bilder zu Ihrem Portfolio hinzu.
|
|
</p>
|
|
<button
|
|
onClick={() => setIsGalleryModalOpen(true)}
|
|
className="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
Galerie bearbeiten
|
|
</button>
|
|
</div>
|
|
|
|
{/* Danger Zone */}
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-red-400 mb-3">Gefahrenzone</h4>
|
|
<p className="text-xs text-red-300 mb-4">
|
|
Unwiderrufliche Aktionen für dieses Unternehmen.
|
|
</p>
|
|
<button
|
|
onClick={() => setIsDeleteModalOpen(true)}
|
|
className="w-full bg-red-500 hover:bg-red-600 text-white text-sm font-medium py-2 px-4 rounded transition-colors"
|
|
>
|
|
Unternehmen löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'shop' && project.shopCatalog && (
|
|
<div className="space-y-12">
|
|
|
|
{/* Services Section */}
|
|
{services.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 bg-amber-500/10 rounded-lg text-amber-400">
|
|
<Icons.Hammer className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-white">Dienstleistungen & Verträge</h2>
|
|
<p className="text-sm text-textMuted">Fachkräfte für Spezialaufträge anheuern.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{services.map(item => (
|
|
<div key={item.id} className="bg-surface border border-border rounded-xl p-6 flex flex-col hover:border-accentInfo/30 transition-all">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<h3 className="text-lg font-bold text-white">{item.name}</h3>
|
|
<span className="font-mono text-accentInfo font-bold bg-accentInfo/10 px-3 py-1 rounded">
|
|
{item.price} {item.currency}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-textMuted mb-4">{item.description}</p>
|
|
|
|
{item.materialsRequired && (
|
|
<div className="mt-auto mb-4 bg-surfaceHighlight/50 border border-white/5 rounded p-3 text-xs">
|
|
<span className="font-bold text-gray-300 block mb-1">Materialanforderungen:</span>
|
|
<span className="text-textMuted">{item.materialsRequired}</span>
|
|
</div>
|
|
)}
|
|
|
|
<button className="mt-2 w-full py-2 bg-white/5 hover:bg-white/10 rounded text-sm font-medium transition-colors border border-white/5">
|
|
Angebot anfordern
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Products Section */}
|
|
{products.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 bg-blue-500/10 rounded-lg text-blue-400">
|
|
<Icons.Box className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-white">Produktkatalog</h2>
|
|
<p className="text-sm text-textMuted">Items, Bücher und Baupläne zur sofortigen Abholung.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{products.map(item => (
|
|
<div key={item.id} className="bg-surface border border-border rounded-xl p-5 hover:border-accentInfo/30 transition-all group flex flex-col">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div className="w-12 h-12 bg-surfaceHighlight rounded-lg flex items-center justify-center text-textMuted group-hover:text-accentInfo transition-colors">
|
|
{item.type === 'blueprint' ? <Icons.Scroll className="w-6 h-6" /> :
|
|
<ItemIcon type="consumable" className="w-6 h-6" />}
|
|
</div>
|
|
<div className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase border ${
|
|
item.stock > 0 ? 'bg-green-500/10 text-green-400 border-green-500/20' : 'bg-red-500/10 text-red-400 border-red-500/20'
|
|
}`}>
|
|
{item.stock > 0 ? `${item.stock} auf Lager` : 'Ausverkauft'}
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-bold text-white mb-1">{item.name}</h3>
|
|
<p className="text-sm text-textMuted mb-4 flex-1 line-clamp-2">{item.description}</p>
|
|
|
|
<div className="mt-auto pt-4 border-t border-white/5 flex items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] text-textMuted uppercase">Preis</span>
|
|
<span className="font-mono font-bold text-accentInfo">
|
|
{item.price} <span className="text-xs font-sans text-gray-400">{item.currency}</span>
|
|
</span>
|
|
</div>
|
|
<button
|
|
disabled={item.stock === 0}
|
|
className="px-4 py-2 bg-white/5 hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed rounded text-sm font-medium transition-colors"
|
|
>
|
|
Kaufen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit Modals */}
|
|
<EditModal
|
|
isOpen={isEditDescriptionOpen}
|
|
title="Manifest bearbeiten"
|
|
initialValue={project.description}
|
|
multiline={true}
|
|
markdown={true}
|
|
onClose={() => setIsEditDescriptionOpen(false)}
|
|
onSave={async (newDescription) => {
|
|
try {
|
|
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${project.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ description: newDescription })
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Update local data
|
|
dbService.updateProject(project.id, { description: newDescription });
|
|
console.log('Description updated successfully');
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`Fehler beim Aktualisieren: ${errorData.error || 'Unbekannter Fehler'}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error updating description:', err);
|
|
alert('Netzwerkfehler beim Aktualisieren der Beschreibung');
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<EditModal
|
|
isOpen={isEditHiringOpen}
|
|
title={project.hiring ? 'Stellenanzeigen beenden' : 'Stellen ausschreiben'}
|
|
initialValue={project.hiring ? 'Ja, Stellen sind derzeit ausgeschrieben.' : 'Nein, derzeit keine offenen Stellen.'}
|
|
multiline={false}
|
|
onClose={() => setIsEditHiringOpen(false)}
|
|
onSave={async (value) => {
|
|
const newHiringStatus = !project.hiring;
|
|
|
|
try {
|
|
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${project.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({ hiring: newHiringStatus })
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Update local data
|
|
dbService.updateProject(project.id, { hiring: newHiringStatus });
|
|
console.log('Hiring status updated successfully:', newHiringStatus);
|
|
} else {
|
|
const errorData = await response.json();
|
|
alert(`Fehler beim Aktualisieren: ${errorData.error || 'Unbekannter Fehler'}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error updating hiring status:', err);
|
|
alert('Netzwerkfehler beim Aktualisieren der Stellenanzeigen');
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* Management Modals */}
|
|
<ShopManagementModal
|
|
isOpen={isShopModalOpen}
|
|
onClose={() => setIsShopModalOpen(false)}
|
|
projectId={project.id}
|
|
onUpdate={() => {
|
|
// Refresh project data
|
|
console.log('Shop updated, refreshing project data...');
|
|
// The dbService should automatically update via subscription
|
|
}}
|
|
/>
|
|
|
|
<EmployeeManagementModal
|
|
isOpen={isEmployeeModalOpen}
|
|
onClose={() => setIsEmployeeModalOpen(false)}
|
|
projectId={project.id}
|
|
onUpdate={() => {
|
|
// Refresh project data
|
|
console.log('Employees updated, refreshing project data...');
|
|
}}
|
|
/>
|
|
|
|
<BannerManagementModal
|
|
isOpen={isBannerModalOpen}
|
|
onClose={() => setIsBannerModalOpen(false)}
|
|
projectId={project.id}
|
|
currentBannerUrl={project.bannerUrl || ''}
|
|
onUpdate={() => {
|
|
// Refresh project data
|
|
console.log('Banner updated, refreshing project data...');
|
|
}}
|
|
/>
|
|
|
|
<LogoManagementModal
|
|
isOpen={isLogoModalOpen}
|
|
onClose={() => setIsLogoModalOpen(false)}
|
|
projectId={project.id}
|
|
currentLogoUrl={project.logoUrl || ''}
|
|
onUpdate={() => {
|
|
// Refresh project data
|
|
console.log('Logo updated, refreshing project data...');
|
|
}}
|
|
/>
|
|
|
|
<GalleryManagementModal
|
|
isOpen={isGalleryModalOpen}
|
|
onClose={() => setIsGalleryModalOpen(false)}
|
|
projectId={project.id}
|
|
onUpdate={() => {
|
|
// Refresh project data
|
|
console.log('Gallery updated, refreshing project data...');
|
|
}}
|
|
/>
|
|
|
|
<DeleteProjectModal
|
|
isOpen={isDeleteModalOpen}
|
|
onClose={() => setIsDeleteModalOpen(false)}
|
|
projectId={project.id}
|
|
projectTitle={project.title}
|
|
onDelete={async () => {
|
|
try {
|
|
const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${project.id}`, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert('Projekt erfolgreich gelöscht!');
|
|
onBack(); // Navigate back to projects list
|
|
} else {
|
|
alert('Fehler beim Löschen des Projekts');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error deleting project:', err);
|
|
alert('Netzwerkfehler beim Löschen');
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectProfile;
|