Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: list end customers in companies admin and improve dark/light mode contrast across all admin components
All checks were successful
Staging Build / build (push) Successful in 2m36s
Details

Browse Source
This commit is contained in:
DanielS
2026-06-25 02:11:07 +02:00
parent bf27c62f62
commit ef9422908d
11 changed files with 222 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
shop/app/admin/companies/page.tsx
View File

@@ -13,8 +13,7 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { getCompanies, createCompany, updateCompany, deleteCompany } from '@/lib/actions/companies'
import { getUsersByCompany } from '@/lib/actions/users'
import { getCompanies, createCompany, updateCompany, deleteCompany, getEndCustomersByCompany } from '@/lib/actions/companies'
export default function CompaniesPage() {
const [companies, setCompanies] = useState<any[]>([])
@@ -33,10 +32,10 @@ export default function CompaniesPage() {
const [deletingId, setDeletingId] = useState<string | null>(null)
const [searchQuery, setSearchQuery] = useState('')
const [isUsersOpen, setIsUsersOpen] = useState(false)
const [selectedCompanyForUsers, setSelectedCompanyForUsers] = useState<any>(null)
const [companyUsers, setCompanyUsers] = useState<any[]>([])
const [loadingUsers, setLoadingUsers] = useState(false)
const [isCustomersOpen, setIsCustomersOpen] = useState(false)
const [selectedCompanyForCustomers, setSelectedCompanyForCustomers] = useState<any>(null)
const [companyCustomers, setCompanyCustomers] = useState<any[]>([])
const [loadingCustomers, setLoadingCustomers] = useState(false)
const loadCompanies = async () => {
setLoading(true)
@@ -91,17 +90,17 @@ export default function CompaniesPage() {
}
}
const handleShowUsers = async (company: any) => {
setSelectedCompanyForUsers(company)
setIsUsersOpen(true)
setLoadingUsers(true)
const handleShowCustomers = async (company: any) => {
setSelectedCompanyForCustomers(company)
setIsCustomersOpen(true)
setLoadingCustomers(true)
try {
const data = await getUsersByCompany(company.id)
setCompanyUsers(data)
const data = await getEndCustomersByCompany(company.id)
setCompanyCustomers(data)
} catch (err) {
console.error('Fehler beim Laden der Benutzer:', err)
console.error('Fehler beim Laden der Endkunden:', err)
} finally {
setLoadingUsers(false)
setLoadingCustomers(false)
}
}
@@ -212,9 +211,9 @@ export default function CompaniesPage() {
<Button
variant="ghost"
size="icon"
onClick={() => handleShowUsers(company)}
onClick={() => handleShowCustomers(company)}
className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
title="Benutzer anzeigen"
title="Endkunden dieser Firma anzeigen"
>
<Users className="h-4 w-4" />
</Button>
@@ -342,60 +341,54 @@ export default function CompaniesPage() {
</DialogContent>
</Dialog>
{/* Dialog: Benutzer der Firma anzeigen */}
<Dialog open={isUsersOpen} onOpenChange={(val) => {
setIsUsersOpen(val);
{/* Dialog: Endkunden der Firma anzeigen */}
<Dialog open={isCustomersOpen} onOpenChange={(val) => {
setIsCustomersOpen(val);
if (!val) {
setCompanyUsers([]);
setCompanyCustomers([]);
}
}}>
<DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
<DialogHeader>
<DialogTitle>
Benutzer von {selectedCompanyForUsers?.name}
Endkunden von {selectedCompanyForCustomers?.name}
</DialogTitle>
<DialogDescription className="text-slate-500 dark:text-slate-400">
Liste aller Benutzer, die dieser Firma zugewiesen sind.
Liste aller Endkunden, die von den Partnern dieser Firma betreut werden.
</DialogDescription>
</DialogHeader>
<div className="py-4">
{loadingUsers ? (
{loadingCustomers ? (
<div className="flex justify-center items-center py-8">
<Loader2 className="w-6 h-6 text-indigo-500 animate-spin" />
<span className="ml-2 text-slate-400 text-sm">Lade Benutzer...</span>
<span className="ml-2 text-slate-400 text-sm">Lade Endkunden...</span>
</div>
) : companyUsers.length === 0 ? (
) : companyCustomers.length === 0 ? (
<p className="text-center text-slate-500 text-sm py-8">
Keine Benutzer für diese Firma registriert.
Keine Endkunden für diese Firma registriert.
</p>
) : (
<div className="space-y-3 max-h-60 overflow-y-auto pr-1">
{companyUsers.map((user) => (
<div key={user.id} className="flex justify-between items-center p-3 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5">
<div>
<p className="text-sm font-semibold text-slate-900 dark:text-white">
{user.first_name || user.last_name ? `${user.first_name} ${user.last_name}` : 'Kein Name'}
</p>
<p className="text-xs text-slate-500 dark:text-slate-400">
{user.email}
</p>
{companyCustomers.map((customer) => (
<div key={customer.id} className="flex flex-col gap-1 p-3 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5">
<p className="text-sm font-semibold text-slate-900 dark:text-white">
{customer.company_name}
</p>
<div className="flex justify-between items-center text-xs text-slate-500 dark:text-slate-400">
<span>
{customer.first_name || customer.last_name ? `${customer.first_name || ''} ${customer.last_name || ''}`.trim() : 'Kein Ansprechpartner'}
</span>
<span>
{customer.zip} {customer.city}
</span>
</div>
<span className={`text-[10px] font-bold uppercase rounded-full px-2.5 py-0.5 border ${
user.role === 'admin'
? 'bg-purple-500/10 text-purple-400 border-purple-500/30'
: user.role === 'gesperrt'
? 'bg-red-500/10 text-red-400 border-red-500/30'
: 'bg-blue-500/10 text-blue-400 border-blue-500/30'
}`}>
{user.role}
</span>
</div>
))}
</div>
)}
</div>
<DialogFooter>
<Button onClick={() => { setIsUsersOpen(false); setCompanyUsers([]); }} className="bg-slate-800 hover:bg-slate-700 text-white font-semibold">
<Button onClick={() => { setIsCustomersOpen(false); setCompanyCustomers([]); }} className="bg-slate-800 hover:bg-slate-700 text-white font-semibold">
Schließen
</Button>
</DialogFooter>

32
shop/app/admin/layout.tsx
View File

@@ -25,9 +25,9 @@ export default async function AdminLayout({
}
return (
<div className="flex min-h-screen bg-[#020617] text-white">
<div className="flex min-h-screen bg-slate-50 dark:bg-[#020617] text-slate-900 dark:text-white">
{/* Sidebar */}
<aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl flex flex-col">
<aside className="w-64 border-r border-slate-200 dark:border-white/5 bg-white dark:bg-black/20 backdrop-blur-xl flex flex-col">
<div className="p-6">
<Link href="/" className="flex items-center gap-2">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
@@ -38,55 +38,55 @@ export default async function AdminLayout({
</div>
<nav className="flex-1 px-4 space-y-2 py-4">
<Link href="/admin" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<LayoutDashboard className="w-5 h-5" />
Dashboard
</Link>
<Link href="/admin/products" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/products" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<Package className="w-5 h-5" />
Produkte
</Link>
<Link href="/admin/categories" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/categories" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<LayoutGrid className="w-5 h-5" />
Kategorien
</Link>
<Link href="/admin/orders" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/orders" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<ShoppingCart className="w-5 h-5" />
Bestellungen
</Link>
<Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<Users className="w-5 h-5" />
Benutzer
</Link>
<Link href="/admin/companies" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/companies" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<Building2 className="w-5 h-5" />
Firmen
</Link>
<div className="pt-2 pb-1 px-3">
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-600">Einstellungen</span>
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-600">Einstellungen</span>
</div>
<Link href="/admin/einstellungen" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/einstellungen" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<Settings className="w-5 h-5" />
Allgemein
</Link>
<Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<Wrench className="w-5 h-5" />
SMTP
</Link>
<Link href="/admin/tools" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
<Link href="/admin/tools" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
<Database className="w-5 h-5" />
DB-Tools
</Link>
</nav>
<div className="p-4 border-t border-white/5 space-y-4">
<div className="p-4 border-t border-slate-200 dark:border-white/5 space-y-4">
<AdminLogoutButton />
<div className="px-3 pt-2 flex items-center gap-2 border-t border-white/5 opacity-60">
<span className="font-bold text-sm tracking-tighter text-white">CASPOS Store</span>
<div className="px-3 pt-2 flex items-center gap-2 border-t border-slate-200 dark:border-white/5 opacity-60">
<span className="font-bold text-sm tracking-tighter text-slate-800 dark:text-white">CASPOS Store</span>
<DemoWrapper>
<span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
<span className="text-[10px] bg-amber-500/20 text-amber-600 dark:text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
Demo
</span>
</DemoWrapper>

34
shop/components/admin/category-dialog.tsx
View File

@@ -99,10 +99,10 @@ export function CategoryDialog({
</Button>
)}
</DialogTrigger>
<DialogContent className="glass-dark border-white/10 text-white shadow-2xl">
<DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
<DialogHeader>
<DialogTitle>{category ? 'Kategorie bearbeiten' : 'Neue Kategorie erstellen'}</DialogTitle>
<DialogDescription className="text-slate-300">
<DialogDescription className="text-slate-500 dark:text-slate-400">
Definieren Sie eine Kategorie für Ihre Produkte.
</DialogDescription>
</DialogHeader>
@@ -116,9 +116,9 @@ export function CategoryDialog({
name="name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Name</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Name</FormLabel>
<FormControl>
<Input placeholder="z.B. Software" className="bg-white/5 border-white/10 text-white" {...field} />
<Input placeholder="z.B. Software" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -129,9 +129,9 @@ export function CategoryDialog({
name="description"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Beschreibung</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
<FormControl>
<Input placeholder="Kurze Beschreibung" className="bg-white/5 border-white/10 text-white" {...field} />
<Input placeholder="Kurze Beschreibung" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -142,16 +142,16 @@ export function CategoryDialog({
name="icon"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Icon</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Icon</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger className="bg-white/5 border-white/10 text-white">
<SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
<SelectValue placeholder="Icon wählen" />
</SelectTrigger>
</FormControl>
<SelectContent className="glass-dark border-white/10 text-white">
<SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
{icons.map(({ name, Icon }) => (
<SelectItem key={name} value={name} className="text-white hover:bg-white/10">
<SelectItem key={name} value={name}>
<div className="flex items-center gap-2">
<Icon className="w-4 h-4" />
{name}
@@ -169,18 +169,18 @@ export function CategoryDialog({
name="sort_order"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Reihenfolge im Bestellvorgang</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Reihenfolge im Bestellvorgang</FormLabel>
<FormControl>
<Input
type="number"
min={0}
placeholder="0 = zuerst"
className="bg-white/5 border-white/10 text-white"
className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500"
{...field}
/>
</FormControl>
<FormMessage />
<p className="text-xs text-slate-400">Kleinere Zahl = weiter oben im Bestellformular angezeigt.</p>
<p className="text-xs text-slate-500 dark:text-slate-400">Kleinere Zahl = weiter oben im Bestellformular angezeigt.</p>
</FormItem>
)}
/>
@@ -188,7 +188,7 @@ export function CategoryDialog({
control={form.control}
name="is_required"
render={({ field }) => (
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-white/10 bg-white/5 p-4">
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
<FormControl>
<Checkbox
checked={field.value}
@@ -196,10 +196,10 @@ export function CategoryDialog({
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="text-white font-semibold cursor-pointer">
<FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
Pflichtauswahl im Bestellvorgang
</FormLabel>
<p className="text-xs text-slate-400">
<p className="text-xs text-slate-500 dark:text-slate-400">
Wenn aktiv, muss der Kunde aus dieser Kategorie einen Artikel wählen.
Wenn deaktiviert, ist die Kategorie optional.
</p>
@@ -210,7 +210,7 @@ export function CategoryDialog({
</div>
</ScrollArea>
<DialogFooter className="pt-4">
<Button type="submit" className="w-full bg-primary hover:bg-primary/90">
<Button type="submit" className="w-full bg-primary hover:bg-primary/90 text-white">
{category ? 'Aktualisieren' : 'Erstellen'}
</Button>
</DialogFooter>

32
shop/components/admin/category-list.tsx
View File

@@ -41,39 +41,39 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
}
return (
<Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
<Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden text-slate-900 dark:text-white">
<CardHeader>
<CardTitle>Kategorienübersicht</CardTitle>
<CardDescription className="text-slate-400">
<CardDescription className="text-slate-500 dark:text-slate-400">
Verwalten Sie die Hauptkategorien für Ihre Produkte.
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow className="border-white/10 hover:bg-white/5">
<TableHead className="text-white font-bold w-10">Icon</TableHead>
<TableHead className="text-white font-bold">Name</TableHead>
<TableHead className="text-white font-bold">Beschreibung</TableHead>
<TableHead className="text-white font-bold w-28">
<TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
<TableHead className="text-slate-700 dark:text-white font-bold w-10">Icon</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold">Beschreibung</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold w-28">
<span className="flex items-center gap-1">
<ArrowUpDown className="w-3 h-3" /> Reihenfolge
</span>
</TableHead>
<TableHead className="text-white font-bold w-24">Typ</TableHead>
<TableHead className="text-right text-white font-bold">Aktionen</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold w-24">Typ</TableHead>
<TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{categories.map((category) => (
<TableRow key={category.id} className="border-white/5 hover:bg-white/5 transition-colors">
<TableRow key={category.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
<TableCell>
<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
{getIcon(category.icon)}
</div>
</TableCell>
<TableCell className="font-medium text-white">{category.name}</TableCell>
<TableCell className="text-slate-300">{category.description}</TableCell>
<TableCell className="font-medium text-slate-900 dark:text-white">{category.name}</TableCell>
<TableCell className="text-slate-700 dark:text-slate-300">{category.description}</TableCell>
<TableCell>
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/20 text-primary text-sm font-bold">
{category.sort_order}
@@ -81,15 +81,15 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
</TableCell>
<TableCell>
{category.is_required ? (
<Badge className="bg-green-500/20 text-green-400 border border-green-500/30 whitespace-nowrap">Pflicht</Badge>
<Badge className="bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 whitespace-nowrap">Pflicht</Badge>
) : (
<Badge variant="outline" className="border-white/20 text-slate-400 whitespace-nowrap">Optional</Badge>
<Badge variant="outline" className="border-slate-200 dark:border-white/20 text-slate-500 dark:text-slate-400 whitespace-nowrap">Optional</Badge>
)}
</TableCell>
<TableCell className="text-right">
<div className="flex justify-end gap-2">
<CategoryDialog category={category}>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-white">
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
<Edit2 className="h-4 w-4" />
</Button>
</CategoryDialog>
@@ -107,7 +107,7 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
))}
{categories.length === 0 && (
<TableRow>
<TableCell colSpan={6} className="text-center py-10 text-slate-400">
<TableCell colSpan={6} className="text-center py-10 text-slate-500 dark:text-slate-400">
Keine Kategorien gefunden.
</TableCell>
</TableRow>

68
shop/components/admin/create-product-dialog.tsx
View File

@@ -120,12 +120,12 @@ export function CreateProductDialog({ children, categories, product }: { childre
</Button>
)}
</DialogTrigger>
<DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col glass-dark border-white/10 text-white shadow-2xl">
<DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
<DialogHeader>
<DialogTitle className="text-2xl font-bold">
{product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
</DialogTitle>
<DialogDescription className="text-slate-300">
<DialogDescription className="text-slate-500 dark:text-slate-400">
Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
</DialogDescription>
</DialogHeader>
@@ -140,9 +140,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
name="name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Produktname</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Produktname</FormLabel>
<FormControl>
<Input placeholder="z.B. Basic ERP" className="bg-white/5 border-white/10 text-white" {...field} />
<Input placeholder="z.B. Basic ERP" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -153,9 +153,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
name="base_price"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Basispreis (€)</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Basispreis (€)</FormLabel>
<FormControl>
<Input type="number" step="0.01" className="bg-white/5 border-white/10 text-white" {...field} />
<Input type="number" step="0.01" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -168,16 +168,16 @@ export function CreateProductDialog({ children, categories, product }: { childre
name="category_id"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Kategorie</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Kategorie</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger className="bg-white/5 border-white/10 text-white">
<SelectValue placeholder="Kategorie wählen" className="text-white" />
<SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
<SelectValue placeholder="Kategorie wählen" />
</SelectTrigger>
</FormControl>
<SelectContent className="glass-dark border-white/10 text-white">
<SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
{categories.map(cat => (
<SelectItem key={cat.id} value={cat.id} className="text-white">{cat.name}</SelectItem>
<SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem>
))}
</SelectContent>
</Select>
@@ -191,7 +191,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
name="billing_interval"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Abrechnungsmodell</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Abrechnungsmodell</FormLabel>
<div className="grid grid-cols-2 gap-2 pt-1">
{[
{ value: 'one_time', label: 'Einmalig', icon: '💳' },
@@ -203,8 +203,8 @@ export function CreateProductDialog({ children, categories, product }: { childre
onClick={() => field.onChange(opt.value)}
className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
field.value === opt.value
? 'border-primary bg-primary/10 text-white'
: 'border-white/10 bg-white/5 text-slate-400 hover:bg-white/10'
? 'border-primary bg-primary/10 text-primary dark:text-white'
: 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
}`}
>
<span className="text-lg">{opt.icon}</span>
@@ -222,16 +222,16 @@ export function CreateProductDialog({ children, categories, product }: { childre
name="description"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Beschreibung</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
<FormControl>
<Input placeholder="Kurze Beschreibung des Produkts" className="bg-white/5 border-white/10 text-white placeholder:text-slate-400" {...field} />
<Input placeholder="Kurze Beschreibung des Produkts" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Separator className="bg-white/10" />
<Separator className="bg-slate-200 dark:bg-white/10" />
<div className="space-y-4">
<div className="flex items-center justify-between">
@@ -268,7 +268,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
.filter((_, idx) => idx !== index)
return (
<div key={field.id} className="p-4 rounded-lg bg-white/5 border border-white/10 space-y-4 relative group">
<div key={field.id} className="p-4 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 space-y-4 relative group">
<Button
type="button"
variant="ghost"
@@ -285,9 +285,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
name={`modules.${index}.name`}
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Modulname</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Modulname</FormLabel>
<FormControl>
<Input placeholder="z.B. Cloud Storage" className="bg-white/10 border-white/10 text-white placeholder:text-slate-400" {...field} />
<Input placeholder="z.B. Cloud Storage" className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -298,9 +298,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
name={`modules.${index}.price`}
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Aufpreis (€)</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Aufpreis (€)</FormLabel>
<FormControl>
<Input type="number" step="0.01" className="bg-white/10 border-white/10 text-white" {...field} />
<Input type="number" step="0.01" className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -308,15 +308,15 @@ export function CreateProductDialog({ children, categories, product }: { childre
/>
</div>
<div className="grid grid-cols-2 gap-4 border border-white/10 rounded-lg p-3 bg-black/20">
<div className="grid grid-cols-2 gap-4 border border-slate-200 dark:border-white/10 rounded-lg p-3 bg-slate-100 dark:bg-black/20">
{/* Requirements Selection Matrix */}
<FormField
control={form.control}
name={`modules.${index}.requirements`}
render={({ field: reqField }) => (
<div className="space-y-2">
<FormLabel className="text-white text-xs font-semibold">Benötigt Module</FormLabel>
<ScrollArea className="h-28 border border-white/5 rounded p-2 bg-white/5">
<FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Benötigt Module</FormLabel>
<ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
{otherModules.length === 0 ? (
<p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p>
) : (
@@ -339,7 +339,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
/>
<label
htmlFor={`req-${index}-${other.id}`}
className="text-xs text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
title={other.name}
>
{other.name}
@@ -360,8 +360,8 @@ export function CreateProductDialog({ children, categories, product }: { childre
name={`modules.${index}.exclusions`}
render={({ field: exclField }) => (
<div className="space-y-2">
<FormLabel className="text-white text-xs font-semibold">Schließt aus</FormLabel>
<ScrollArea className="h-28 border border-white/5 rounded p-2 bg-white/5">
<FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Schließt aus</FormLabel>
<ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
{otherModules.length === 0 ? (
<p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p>
) : (
@@ -384,7 +384,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
/>
<label
htmlFor={`excl-${index}-${other.id}`}
className="text-xs text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
title={other.name}
>
{other.name}
@@ -413,7 +413,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel className="text-white">Erforderlich</FormLabel>
<FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">Erforderlich</FormLabel>
</div>
</FormItem>
)}
@@ -424,7 +424,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
})}
{fields.length === 0 && (
<div className="text-center py-6 border-2 border-dashed border-white/5 rounded-lg text-slate-400 text-sm">
<div className="text-center py-6 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-lg text-slate-500 dark:text-slate-400 text-sm">
Noch keine Module hinzugefügt.
</div>
)}
@@ -432,9 +432,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
</div>
</ScrollArea>
<DialogFooter className="pt-4 border-t border-white/10">
<Button type="button" variant="ghost" onClick={() => setOpen(false)}>Abbrechen</Button>
<Button type="submit" className="bg-primary hover:bg-primary/90">Speichern</Button>
<DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10">
<Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">Abbrechen</Button>
<Button type="submit" className="bg-primary hover:bg-primary/90 text-white">Speichern</Button>
</DialogFooter>
</form>
</Form>

2
shop/components/admin/logout-menu-item.tsx
View File

@@ -42,7 +42,7 @@ export function AdminLogoutButton() {
return (
<button
onClick={handleLogout}
className="flex w-full items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all text-left"
className="flex w-full items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all text-left"
>
<LogOut className="w-5 h-5" />
Abmelden

34
shop/components/admin/product-list.tsx
View File

@@ -32,28 +32,28 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
}
return (
<Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
<Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden text-slate-900 dark:text-white">
<CardHeader>
<CardTitle>Produktübersicht</CardTitle>
<CardDescription className="text-slate-400">
<CardDescription className="text-slate-500 dark:text-slate-400">
Alle konfigurierten Software-Lösungen und Erweiterungen.
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow className="border-white/10 hover:bg-white/5">
<TableHead className="text-white font-bold">Name</TableHead>
<TableHead className="text-white font-bold">Basispreis</TableHead>
<TableHead className="text-white font-bold">Module</TableHead>
<TableHead className="text-white font-bold">Status</TableHead>
<TableHead className="text-right text-white font-bold">Aktionen</TableHead>
<TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
<TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold">Basispreis</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold">Module</TableHead>
<TableHead className="text-slate-700 dark:text-white font-bold">Status</TableHead>
<TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{products.map((product) => (
<TableRow key={product.id} className="border-white/5 hover:bg-white/5 transition-colors">
<TableCell className="font-medium text-white">
<TableRow key={product.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
<TableCell className="font-medium text-slate-900 dark:text-white">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
{product.name}
@@ -63,20 +63,20 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
</Badge>
)}
{product.billing_interval === 'monthly' && (
<Badge className="text-[10px] bg-blue-500/20 text-blue-400 border border-blue-500/30 py-0 h-4">Abo/Monat</Badge>
<Badge className="text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 border border-blue-500/30 py-0 h-4">Abo/Monat</Badge>
)}
{product.billing_interval === 'one_time' && (
<Badge className="text-[10px] bg-slate-500/20 text-slate-300 border border-slate-500/30 py-0 h-4">Einmalig</Badge>
<Badge className="text-[10px] bg-slate-500/20 text-slate-600 dark:text-slate-300 border border-slate-500/30 py-0 h-4">Einmalig</Badge>
)}
</div>
<p className="text-xs text-slate-300 font-normal">{product.description}</p>
<p className="text-xs text-slate-500 dark:text-slate-400 font-normal">{product.description}</p>
</div>
</TableCell>
<TableCell className="text-white font-semibold">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.base_price)}</TableCell>
<TableCell className="text-slate-900 dark:text-white font-semibold">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.base_price)}</TableCell>
<TableCell>
<div className="flex items-center gap-1">
<Layers className="w-3 h-3 text-primary" />
<span className="text-slate-200">{product.modules?.length || 0} Module</span>
<span className="text-slate-700 dark:text-slate-200">{product.modules?.length || 0} Module</span>
</div>
</TableCell>
<TableCell>
@@ -87,7 +87,7 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
<TableCell className="text-right">
<div className="flex justify-end gap-2">
<CreateProductDialog categories={categories} product={product}>
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-white">
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
<Edit2 className="h-4 w-4" />
</Button>
</CreateProductDialog>
@@ -105,7 +105,7 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
))}
{products.length === 0 && (
<TableRow>
<TableCell colSpan={5} className="text-center py-10 text-slate-400">
<TableCell colSpan={5} className="text-center py-10 text-slate-500 dark:text-slate-400">
Keine Produkte gefunden. Erstellen Sie Ihr erstes Produkt!
</TableCell>
</TableRow>

48
shop/components/admin/user-dialog.tsx
View File

@@ -121,10 +121,10 @@ export function UserDialog({ companies }: UserDialogProps) {
<Plus className="mr-2 h-4 w-4" /> Benutzer neu anlegen
</Button>
</DialogTrigger>
<DialogContent className="glass-dark border-white/10 text-white shadow-2xl">
<DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
<DialogHeader>
<DialogTitle>Neuen Benutzer anlegen</DialogTitle>
<DialogDescription className="text-slate-300">
<DialogDescription className="text-slate-500 dark:text-slate-400">
Geben Sie die E-Mail, die Rolle und optional die Firma für den neuen Benutzer ein. Nach der Erstellung erhält der Benutzer eine E-Mail zum Festlegen seines Passworts.
</DialogDescription>
</DialogHeader>
@@ -136,9 +136,9 @@ export function UserDialog({ companies }: UserDialogProps) {
name="email"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">E-Mail</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">E-Mail</FormLabel>
<FormControl>
<Input placeholder="user@example.com" className="bg-white/5 border-white/10 text-white" {...field} />
<Input placeholder="user@example.com" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -150,9 +150,9 @@ export function UserDialog({ companies }: UserDialogProps) {
name="first_name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Vorname</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Vorname</FormLabel>
<FormControl>
<Input placeholder="Vorname" className="bg-white/5 border-white/10 text-white" {...field} />
<Input placeholder="Vorname" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -163,9 +163,9 @@ export function UserDialog({ companies }: UserDialogProps) {
name="last_name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Nachname</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Nachname</FormLabel>
<FormControl>
<Input placeholder="Nachname" className="bg-white/5 border-white/10 text-white" {...field} />
<Input placeholder="Nachname" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -177,14 +177,14 @@ export function UserDialog({ companies }: UserDialogProps) {
name="role"
render={({ field }) => (
<FormItem>
<FormLabel className="text-white">Rolle</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Rolle</FormLabel>
<FormControl>
<select
className="flex h-10 w-full rounded-md border border-white/10 bg-slate-950/80 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
className="flex h-10 w-full rounded-md border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-950/80 px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
{...field}
>
<option value="partner">Partner</option>
<option value="admin">Admin</option>
<option value="partner" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Partner</option>
<option value="admin" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Admin</option>
</select>
</FormControl>
<FormMessage />
@@ -198,7 +198,7 @@ export function UserDialog({ companies }: UserDialogProps) {
const selectedCompany = localCompanies.find((c) => c.id === field.value)
return (
<FormItem className="flex flex-col">
<FormLabel className="text-white">Firma</FormLabel>
<FormLabel className="text-slate-900 dark:text-white">Firma</FormLabel>
<FormControl>
<div className="flex flex-col gap-2">
<div className="relative" ref={dropdownRef}>
@@ -210,20 +210,20 @@ export function UserDialog({ companies }: UserDialogProps) {
setDropdownOpen(!dropdownOpen)
setSearch('')
}}
className="w-full text-left text-sm bg-white/5 border border-white/10 rounded-md px-3 py-2 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 max-w-full truncate"
className="w-full text-left text-sm bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md px-3 py-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 max-w-full truncate"
>
{selectedCompany ? selectedCompany.name : 'Keine Firma'}
</button>
</div>
{dropdownOpen && (
<div className="absolute z-50 mt-1 left-0 w-full bg-slate-900 border border-white/10 rounded-lg shadow-xl overflow-hidden">
<div className="p-2 border-b border-white/10">
<div className="absolute z-50 mt-1 left-0 w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-lg shadow-xl overflow-hidden">
<div className="p-2 border-b border-slate-200 dark:border-white/10">
<input
type="text"
placeholder="Firma suchen..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1.5 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
className="w-full text-xs bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded px-2 py-1.5 text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
autoFocus
/>
</div>
@@ -235,8 +235,8 @@ export function UserDialog({ companies }: UserDialogProps) {
setDropdownOpen(false)
setSearch('')
}}
className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
!field.value ? 'text-primary font-semibold' : 'text-slate-300'
className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
!field.value ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
}`}
>
Keine Firma
@@ -252,8 +252,8 @@ export function UserDialog({ companies }: UserDialogProps) {
setDropdownOpen(false)
setSearch('')
}}
className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
field.value === c.id ? 'text-primary font-semibold' : 'text-slate-300'
className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
field.value === c.id ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
}`}
>
{c.name}
@@ -270,7 +270,7 @@ export function UserDialog({ companies }: UserDialogProps) {
placeholder="Name der neuen Firma"
value={newCompanyName}
onChange={(e) => setNewCompanyName(e.target.value)}
className="bg-white/5 border-white/10 text-white text-xs h-8"
className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs h-8"
/>
<Button
type="button"
@@ -307,7 +307,7 @@ export function UserDialog({ companies }: UserDialogProps) {
setShowNewCompanyInput(false)
setNewCompanyName('')
}}
className="text-xs h-8 text-slate-400"
className="text-xs h-8 text-slate-500 dark:text-slate-400"
>
Abbrechen
</Button>
@@ -329,7 +329,7 @@ export function UserDialog({ companies }: UserDialogProps) {
}}
/>
<DialogFooter>
<Button type="submit" className="w-full bg-primary hover:bg-primary/90">
<Button type="submit" className="w-full bg-primary hover:bg-primary/90 text-white">
Benutzer erstellen
</Button>
</DialogFooter>

70
shop/components/admin/user-list.tsx
View File

@@ -147,10 +147,10 @@ export function UserList({ initialUsers, companies }: UserListProps) {
let lastCompanyName: string | null = null
return (
<Card className="glass-dark border-white/10 shadow-2xl overflow-visible">
<Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-visible text-slate-900 dark:text-white">
<CardHeader>
<CardTitle>Benutzerverwaltung</CardTitle>
<CardDescription className="text-slate-400">
<CardDescription className="text-slate-500 dark:text-slate-400">
Rollen, Firmenzuweisungen, Passwörter und Benutzerkonten verwalten.
</CardDescription>
</CardHeader>
@@ -163,31 +163,31 @@ export function UserList({ initialUsers, companies }: UserListProps) {
placeholder="Benutzer suchen (E-Mail, Firma, Rolle)..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-9 pr-4 py-2 text-sm bg-white/5 border border-white/10 rounded-md text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-950 transition-all"
className="w-full pl-9 pr-4 py-2 text-sm bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950 transition-all"
/>
</div>
<div className="flex flex-wrap items-center gap-3">
<div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors">
<div className="flex items-center gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
<input
type="checkbox"
id="hideLocked"
checked={hideLocked}
onChange={(e) => setHideLocked(e.target.checked)}
className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer"
className="h-4 w-4 rounded border-slate-200 dark:border-white/10 bg-white dark:bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950 accent-primary cursor-pointer"
/>
<label htmlFor="hideLocked" className="text-xs text-slate-300 font-medium cursor-pointer select-none">
<label htmlFor="hideLocked" className="text-xs text-slate-700 dark:text-slate-300 font-medium cursor-pointer select-none">
Gesperrte ausblenden
</label>
</div>
<div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors">
<div className="flex items-center gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
<input
type="checkbox"
id="groupByCompany"
checked={groupByCompany}
onChange={(e) => setGroupByCompany(e.target.checked)}
className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer"
className="h-4 w-4 rounded border-slate-200 dark:border-white/10 bg-white dark:bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950 accent-primary cursor-pointer"
/>
<label htmlFor="groupByCompany" className="text-xs text-slate-300 font-medium cursor-pointer select-none">
<label htmlFor="groupByCompany" className="text-xs text-slate-700 dark:text-slate-300 font-medium cursor-pointer select-none">
Nach Firma gruppieren
</label>
</div>
@@ -195,12 +195,12 @@ export function UserList({ initialUsers, companies }: UserListProps) {
</div>
<Table containerClassName="overflow-visible">
<TableHeader>
<TableRow className="border-white/10 hover:bg-white/5">
<TableHead className="text-slate-200">E-Mail</TableHead>
<TableHead className="text-slate-200">Rolle</TableHead>
<TableHead className="text-slate-200">Firma</TableHead>
<TableHead className="text-slate-200">Zuletzt angemeldet</TableHead>
<TableHead className="text-right text-slate-200">Aktionen</TableHead>
<TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
<TableHead className="text-slate-700 dark:text-slate-200">E-Mail</TableHead>
<TableHead className="text-slate-700 dark:text-slate-200">Rolle</TableHead>
<TableHead className="text-slate-700 dark:text-slate-200">Firma</TableHead>
<TableHead className="text-slate-700 dark:text-slate-200">Zuletzt angemeldet</TableHead>
<TableHead className="text-right text-slate-700 dark:text-slate-200">Aktionen</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -217,14 +217,14 @@ export function UserList({ initialUsers, companies }: UserListProps) {
return (
<Fragment key={user.id}>
{showGroupHeader && (
<TableRow className="bg-white/5 border-y border-white/10 hover:bg-white/5">
<TableRow className="bg-slate-50 dark:bg-white/5 border-y border-slate-200 dark:border-white/10 hover:bg-slate-100 dark:hover:bg-white/5">
<TableCell colSpan={5} className="font-semibold text-primary py-2 px-4 text-xs tracking-wider uppercase">
Firma: {currentCompanyName}
</TableCell>
</TableRow>
)}
<TableRow className="border-white/5 hover:bg-white/5 transition-colors">
<TableCell className="font-medium text-white">
<TableRow className="border-slate-150 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
<TableCell className="font-medium text-slate-900 dark:text-white">
<div className="flex flex-col">
<div className="flex items-center gap-2">
<Mail className="w-4 h-4 text-slate-500" />
@@ -251,7 +251,7 @@ export function UserList({ initialUsers, companies }: UserListProps) {
(e.target as HTMLInputElement).blur()
}
}}
className="bg-transparent border-b border-transparent hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-400 w-20 px-1 py-0.5 transition-all placeholder:text-slate-600 placeholder:italic"
className="bg-transparent border-b border-transparent hover:border-slate-300 dark:hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-600 dark:text-slate-400 w-20 px-1 py-0.5 transition-all placeholder:text-slate-500 placeholder:italic"
/>
<input
type="text"
@@ -273,7 +273,7 @@ export function UserList({ initialUsers, companies }: UserListProps) {
(e.target as HTMLInputElement).blur()
}
}}
className="bg-transparent border-b border-transparent hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-400 w-24 px-1 py-0.5 transition-all placeholder:text-slate-600 placeholder:italic"
className="bg-transparent border-b border-transparent hover:border-slate-300 dark:hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-600 dark:text-slate-400 w-24 px-1 py-0.5 transition-all placeholder:text-slate-500 placeholder:italic"
/>
</div>
</div>
@@ -286,18 +286,18 @@ export function UserList({ initialUsers, companies }: UserListProps) {
<select
value={role}
onChange={(e) => handleRoleChange(user.id, e.target.value as Role)}
className={`text-xs font-semibold rounded px-3 py-1.5 cursor-pointer focus:outline-none focus:ring-2 transition-colors ${
className={`text-xs font-semibold rounded px-3 py-1.5 cursor-pointer focus:outline-none focus:ring-2 transition-colors bg-white dark:bg-slate-950/80 ${
role === 'admin'
? 'bg-purple-500/20 text-purple-300 border border-purple-500/40 focus:ring-purple-500/50'
? 'text-purple-600 dark:text-purple-300 border border-purple-500/40 focus:ring-purple-500/50'
: role === 'gesperrt'
? 'bg-red-500/20 text-red-300 border border-red-500/40 focus:ring-red-500/50'
: 'bg-blue-500/20 text-blue-300 border border-blue-500/40 focus:ring-blue-500/50'
? 'text-red-600 dark:text-red-300 border border-red-500/40 focus:ring-red-500/50'
: 'text-blue-600 dark:text-blue-300 border border-blue-500/40 focus:ring-blue-500/50'
}`}
style={{ appearance: 'auto' }}
>
<option value="admin">Admin</option>
<option value="partner">Partner</option>
<option value="gesperrt">Gesperrt</option>
<option value="admin" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Admin</option>
<option value="partner" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Partner</option>
<option value="gesperrt" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Gesperrt</option>
</select>
)}
</div>
@@ -315,21 +315,21 @@ export function UserList({ initialUsers, companies }: UserListProps) {
setCompanyDropdownOpen(companyDropdownOpen === user.id ? null : user.id)
setCompanySearch('')
}}
className="text-xs bg-white/5 border border-white/10 rounded px-3 py-1.5 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50 max-w-[180px] truncate text-left"
className="text-xs bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded px-3 py-1.5 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50 max-w-[180px] truncate text-left"
>
{user.company_name || 'Keine Firma'}
</button>
)}
</div>
{companyDropdownOpen === user.id && (
<div className="absolute z-50 mt-1 left-0 w-56 bg-slate-900 border border-white/10 rounded-lg shadow-xl overflow-hidden">
<div className="p-2 border-b border-white/10">
<div className="absolute z-50 mt-1 left-0 w-56 bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-lg shadow-xl overflow-hidden">
<div className="p-2 border-b border-slate-200 dark:border-white/10">
<input
type="text"
placeholder="Firma suchen..."
value={companySearch}
onChange={(e) => setCompanySearch(e.target.value)}
className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1.5 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
className="w-full text-xs bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded px-2 py-1.5 text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
autoFocus
/>
</div>
@@ -337,8 +337,8 @@ export function UserList({ initialUsers, companies }: UserListProps) {
<button
type="button"
onClick={() => { handleCompanyChange(user.id, ''); setCompanyDropdownOpen(null); setCompanySearch(''); }}
className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
!user.company_id ? 'text-primary font-semibold' : 'text-slate-300'
className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
!user.company_id ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
}`}
>
Keine Firma
@@ -350,8 +350,8 @@ export function UserList({ initialUsers, companies }: UserListProps) {
key={c.id}
type="button"
onClick={() => { handleCompanyChange(user.id, c.id); setCompanyDropdownOpen(null); setCompanySearch(''); }}
className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
user.company_id === c.id ? 'text-primary font-semibold' : 'text-slate-300'
className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
user.company_id === c.id ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
}`}
>
{c.name}

24
shop/lib/actions/companies.ts
View File

@@ -52,3 +52,27 @@ export async function assignCompanyToUser(userId: string, companyId: string | nu
revalidatePath('/admin/users')
return true
}
export async function getEndCustomersByCompany(companyId: string) {
const admin = createAdminClient()
// 1. Get all partners of this company
const { data: partners, error: partnersError } = await admin
.from('users')
.select('id')
.eq('company_id', companyId)
if (partnersError) throw partnersError
if (!partners || partners.length === 0) return []
const partnerIds = partners.map((p) => p.id)
// 2. Get all end customers belonging to these partners
const { data: customers, error: customersError } = await admin
.from('end_customers')
.select('*')
.in('partner_id', partnerIds)
if (customersError) throw customersError
return customers || []
}

35
shop/lib/actions/users.ts
View File

@@ -231,38 +231,3 @@ export async function updateUserProfile(id: string, data: { first_name: string |
revalidatePath('/admin/users');
}
export async function getUsersByCompany(companyId: string) {
const admin = createAdminClient();
const { data: dbUsers, error: dbError } = await admin
.from('users')
.select('id, role')
.eq('company_id', companyId);
if (dbError) throw dbError;
if (dbUsers.length === 0) return [];
const { data: { users }, error } = await admin.auth.admin.listUsers();
if (error) throw error;
const authUserMap = new Map(users.map((u) => [u.id, u]));
const userIds = dbUsers.map((u) => u.id);
const { data: dbProfiles } = await admin
.from('profiles')
.select('id, first_name, last_name')
.in('id', userIds);
const profileMap = new Map((dbProfiles || []).map((p) => [p.id, p]));
return dbUsers.map((u) => {
const authUser = authUserMap.get(u.id);
const profile = profileMap.get(u.id);
return {
id: u.id,
email: authUser?.email || '',
role: u.role,
first_name: profile?.first_name || '',
last_name: profile?.last_name || '',
};
});
}