create-pxlr 1.0.0

package/templates/blog/pxlr-cms/packages/admin/src/app/page.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+import { useAuthStore } from '@/lib/store/auth';
+import { api } from '@/lib/api';
+import { Sidebar } from '@/components/layout/sidebar';
+import { Header } from '@/components/layout/header';
+import { FileText, Images, Database, Users, Loader2 } from 'lucide-react';
+
+interface StatsCard {
+  title: string;
+  value: string | number;
+  icon: React.ReactNode;
+  description: string;
+}
+
+function DashboardContent() {
+  const { data: schemas } = useQuery({
+    queryKey: ['schemas'],
+    queryFn: () => api.get('/schemas'),
+  });
+
+  const { data: documents } = useQuery({
+    queryKey: ['documents'],
+    queryFn: () => api.get('/content?limit=1'),
+  });
+
+  const { data: media } = useQuery({
+    queryKey: ['media'],
+    queryFn: () => api.get('/media?limit=1'),
+  });
+
+  const stats: StatsCard[] = [
+    {
+      title: 'Content Types',
+      value: schemas?.schemas?.length || 0,
+      icon: <Database className="h-5 w-5" />,
+      description: 'Defined schemas',
+    },
+    {
+      title: 'Documents',
+      value: documents?.pagination?.total || 0,
+      icon: <FileText className="h-5 w-5" />,
+      description: 'Total content items',
+    },
+    {
+      title: 'Media Files',
+      value: media?.pagination?.total || 0,
+      icon: <Images className="h-5 w-5" />,
+      description: 'Uploaded files',
+    },
+    {
+      title: 'System Status',
+      value: 'Online',
+      icon: <Users className="h-5 w-5" />,
+      description: 'All services running',
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome to PXLR CMS. Manage your content from here.
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat) => (
+          <div
+            key={stat.title}
+            className="rounded-lg border bg-card p-6 shadow-sm"
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-muted-foreground">
+                {stat.title}
+              </span>
+              <span className="text-muted-foreground">{stat.icon}</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-3xl font-bold">{stat.value}</span>
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {stat.description}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <div className="rounded-lg border bg-card p-6 shadow-sm">
+          <h2 className="text-lg font-semibold">Quick Start</h2>
+          <ul className="mt-4 space-y-3 text-sm">
+            <li className="flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                1
+              </span>
+              <span>Create a content schema in the Schemas section</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                2
+              </span>
+              <span>Add content documents based on your schemas</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                3
+              </span>
+              <span>Upload media files to the Media Library</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                4
+              </span>
+              <span>Access your content via the REST API</span>
+            </li>
+          </ul>
+        </div>
+
+        <div className="rounded-lg border bg-card p-6 shadow-sm">
+          <h2 className="text-lg font-semibold">API Access</h2>
+          <div className="mt-4 space-y-3">
+            <div>
+              <p className="text-sm text-muted-foreground">API Endpoint</p>
+              <code className="mt-1 block rounded bg-muted px-2 py-1 text-sm">
+                http://localhost:4000
+              </code>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground">Documentation</p>
+              <a
+                href="http://localhost:4000/docs"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1 block text-sm text-primary hover:underline"
+              >
+                View Swagger API Docs
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function HomePage() {
+  const router = useRouter();
+  const { isAuthenticated, isLoading } = useAuthStore();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.replace('/login');
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-auto bg-muted/30 p-6">
+          <DashboardContent />
+        </main>
+      </div>
+    </div>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/app/profile/layout.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { AuthLayout } from '@/components/layout/auth-layout';
+
+export default function ProfileLayout({ children }: { children: React.ReactNode }) {
+  return <AuthLayout>{children}</AuthLayout>;
+}

package/templates/blog/pxlr-cms/packages/admin/src/app/profile/page.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { useAuthStore } from '@/lib/store/auth';
+import { api } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { toast } from '@/components/ui/use-toast';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Loader2, Save, User, Mail, Shield, Calendar } from 'lucide-react';
+
+export default function ProfilePage() {
+  const { user, setUser } = useAuthStore();
+  const [name, setName] = useState(user?.name || '');
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const updateProfileMutation = useMutation({
+    mutationFn: (data: { name: string }) => api.put('/auth/profile', data),
+    onSuccess: (data) => {
+      if (data.user) {
+        setUser(data.user);
+      }
+      toast({ title: 'Profile updated successfully' });
+    },
+    onError: (error: any) => {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const changePasswordMutation = useMutation({
+    mutationFn: (data: { currentPassword: string; newPassword: string }) =>
+      api.put('/auth/password', data),
+    onSuccess: () => {
+      toast({ title: 'Password changed successfully' });
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+    },
+    onError: (error: any) => {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    },
+  });
+
+  const handleUpdateProfile = () => {
+    if (!name.trim()) {
+      toast({ title: 'Name is required', variant: 'destructive' });
+      return;
+    }
+    updateProfileMutation.mutate({ name });
+  };
+
+  const handleChangePassword = () => {
+    if (!currentPassword || !newPassword) {
+      toast({ title: 'Please fill in all password fields', variant: 'destructive' });
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      toast({ title: 'New passwords do not match', variant: 'destructive' });
+      return;
+    }
+    if (newPassword.length < 6) {
+      toast({ title: 'Password must be at least 6 characters', variant: 'destructive' });
+      return;
+    }
+    changePasswordMutation.mutate({ currentPassword, newPassword });
+  };
+
+  const initials = user?.name
+    ? user.name
+        .split(' ')
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase()
+    : 'U';
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Profile</h1>
+        <p className="text-muted-foreground">
+          Manage your account settings
+        </p>
+      </div>
+
+      {/* User Info Card */}
+      <div className="rounded-lg border bg-card p-6">
+        <div className="flex items-center gap-4 mb-6">
+          <Avatar className="h-20 w-20">
+            <AvatarFallback className="text-2xl">{initials}</AvatarFallback>
+          </Avatar>
+          <div>
+            <h2 className="text-xl font-semibold">{user?.name}</h2>
+            <p className="text-muted-foreground">{user?.email}</p>
+            <span className="inline-flex items-center gap-1 mt-1 text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">
+              <Shield className="h-3 w-3" />
+              {user?.role || 'admin'}
+            </span>
+          </div>
+        </div>
+
+        <div className="grid gap-4 text-sm">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Mail className="h-4 w-4" />
+            <span>{user?.email}</span>
+          </div>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Calendar className="h-4 w-4" />
+            <span>Member since {new Date().toLocaleDateString()}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Update Profile */}
+      <div className="rounded-lg border bg-card p-6">
+        <h2 className="text-lg font-semibold mb-4">Update Profile</h2>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Display Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Your name"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              value={user?.email || ''}
+              disabled
+              className="bg-muted"
+            />
+            <p className="text-xs text-muted-foreground">
+              Email cannot be changed
+            </p>
+          </div>
+          <Button 
+            onClick={handleUpdateProfile} 
+            disabled={updateProfileMutation.isPending}
+          >
+            {updateProfileMutation.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="mr-2 h-4 w-4" />
+            )}
+            Save Changes
+          </Button>
+        </div>
+      </div>
+
+      {/* Change Password */}
+      <div className="rounded-lg border bg-card p-6">
+        <h2 className="text-lg font-semibold mb-4">Change Password</h2>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="currentPassword">Current Password</Label>
+            <Input
+              id="currentPassword"
+              type="password"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              placeholder="Enter current password"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="newPassword">New Password</Label>
+            <Input
+              id="newPassword"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              placeholder="Enter new password"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirm New Password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Confirm new password"
+            />
+          </div>
+          <Button 
+            onClick={handleChangePassword}
+            disabled={changePasswordMutation.isPending}
+            variant="outline"
+          >
+            {changePasswordMutation.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Shield className="mr-2 h-4 w-4" />
+            )}
+            Change Password
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}