Fix recent orders component UI and styling

shop/app/globals.css

@@ -10,7 +10,7 @@
     --card-foreground: 220 40% 2%;
     --popover: 0 0% 100%;
     --popover-foreground: 220 40% 2%;
-    --primary: 220 90% 56%;
+    --primary: 199 100% 43%;
     --primary-foreground: 0 0% 100%;
     --secondary: 220 14% 90%;
     --secondary-foreground: 220 40% 2%;

shop/components/HomeClient.tsx

@@ -121,7 +121,7 @@ export function HomeClient({ initialUser }: HomeClientProps) {
             >
               <Zap className="w-3.5 h-3.5 text-blue-400 fill-blue-400/20" />
             </motion.div>
-            CASPOS Lizenz-Order-Portal
+            CASPOS Lizenz-Portal
           </motion.div>
 
           {/* Headline */}
@@ -249,7 +249,7 @@ export function HomeClient({ initialUser }: HomeClientProps) {
                 </div>
                 <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Zulip</h3>
                 <p className="text-slate-400 text-sm leading-relaxed">
-                  Sie möchten sich mit anderen CASPOS Partnern austauschen, Fragen stellen oder Feedback geben? Treten Sie unserem Zulip-Chat bei.
+                  Treten Sie unserem Partner-Chat bei! tauschen Sie sich mit anderen CASPOS Partnern aus.
                 </p>
               </div>
             </motion.div></a>
@@ -285,7 +285,7 @@ export function HomeClient({ initialUser }: HomeClientProps) {
                 </div>
                 <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Support</h3>
                 <p className="text-slate-400 text-sm leading-relaxed">
-                  Sie haben ein Problem in der CASPOS? Wir helfen Ihnen gerne weiter! Erstellen Sie jetzt ein Ticket über unser Ticketsystem.
+                  Sie haben ein technisches Problem in der CASPOS? Erstellen Sie jetzt ein Ticket!
                 </p>
               </div>
             </motion.div></a>

shop/components/NavbarClient.tsx

@@ -98,7 +98,7 @@ export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
     <>
       <header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b border-white/5 backdrop-blur-md sticky top-0 z-50 bg-[#020617]/85">
         <Link className="flex items-center justify-center gap-2 group" href="/">
-          <span className="font-bold text-xl tracking-tighter text-white">CASPOS Shop</span>
+          <img src="/assets/CASPOS-logo.webp" alt="CASPOS Logo" className="h-8" />
           <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">
               Demo

shop/components/admin/recent-orders.tsx

@@ -74,43 +74,41 @@ export function AdminRecentOrders() {
     return () => clearInterval(interval)
   }, [])
 
-  return (
+    return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7 bg-[#020617]/85 p-4 rounded-xl">
-      <Card className="col-span-4 glass-dark border-white/5">
+        <div className="rounded-xl border border-white/5 bg-[#020617]/85 overflow-hidden backdrop-blur-xl col-span-4">
-        <CardHeader>
+          <CardHeader>
-          <CardTitle>Übersicht (letzte 6 Monate)</CardTitle>
+            <CardTitle className="text-white">Übersicht (letzte 6 Monate)</CardTitle>
-        </CardHeader>
+          </CardHeader>
-        <CardContent className="pl-2">
+          <CardContent className="pl-2">
-          <RevenueChart data={chartData} />
+            <RevenueChart data={chartData} />
-        </CardContent>
+          </CardContent>
-      </Card>
+        </div>
 
-      <Card className="col-span-3 glass-dark border-white/5">
+        <div className="flex flex-col gap-4 bg-[#020617]/85 p-4 rounded-xl border border-white/5 col-span-3">
-        <CardHeader className="flex flex-row items-center justify-between pb-3">
+          <div className="flex flex-row items-center justify-between pb-3">
-          <CardTitle>Neue Bestellungen</CardTitle>
+            <h3 className="font-semibold text-lg text-white">Neue Bestellungen</h3>
-          <span className="text-[10px] text-slate-500">
+            <span className="text-[10px] text-slate-500">
-            Aktualisiert: {lastChecked.toLocaleTimeString('de-DE')}
+              Aktualisiert: {lastChecked.toLocaleTimeString('de-DE')}
-          </span>
+            </span>
-        </CardHeader>
+          </div>
-        <CardContent>
+          <div className="space-y-3">
-          {orders.length === 0 ? (
+            {orders.length === 0 ? (
-            <p className="text-slate-500 text-sm italic text-center py-8">Noch keine Bestellungen</p>
+              <p className="text-slate-500 text-sm italic text-center py-8">Noch keine Bestellungen</p>
-          ) : (
+            ) : (
-            <div className="space-y-3">
+              orders.map(order => {
-              {orders.map(order => {
                 const isNew = newOrderIds.has(order.id)
                 const customerName =
                   order.customer_data?.company_name ||
                   `${order.customer_data?.first_name ?? ''} ${order.customer_data?.last_name ?? ''}`.trim() ||
                   'Unbekannt'
-
                 return (
                   <Link key={order.id} href="/admin/orders" className="block">
                     <div
                       className={`flex items-center gap-3 p-3 rounded-lg transition-all duration-500 ${
                         isNew
                           ? 'bg-primary/10 border border-primary/30 shadow-[0_0_12px_rgba(59,130,246,0.2)]'
-                          : 'bg-white/5 hover:bg-white/10 border border-white/5'
+                          : 'bg-[#020617]/20 hover:bg-[#020617]/30 border border-white/5'
                       }`}
                     >
                       <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs font-bold shrink-0">
@@ -124,18 +122,15 @@ export function AdminRecentOrders() {
                         <p className="font-medium text-white text-sm">
                           {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
                         </p>
-                        <Badge className={`text-[10px] ${statusClass[order.status] ?? ''}`}>
+                        <Badge className={`text-[10px] ${statusClass[order.status] ?? ''}`}>{statusLabel[order.status] ?? order.status}</Badge>
-                          {statusLabel[order.status] ?? order.status}
-                        </Badge>
                       </div>
                     </div>
                   </Link>
                 )
-              })}
+              })
-            </div>
+            )}
-          )}
+          </div>
-        </CardContent>
+        </div>
-      </Card>
+      </div>
-    </div>
+    )
-  )
 }