Skip to content

Commit

Permalink
admin: interface improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@NickSavage
NickSavage committed Jan 3, 2025
1 parent e38a8fd commit 06b9b7a
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 115 deletions.
166 changes: 119 additions & 47 deletions zettelkasten-front/src/pages/admin/AdminEditUserPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState, useEffect, ChangeEvent, FormEvent } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useParams, useNavigate, Link } from "react-router-dom";
import { getUser, editUser } from "../../api/users";
import { User, defaultUser } from "../../models/User";

export function AdminEditUserPage() {
const [user, setUser] = useState<User>(defaultUser);
const [error, setError] = useState(null);
const [error, setError] = useState<string | null>(null);
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();

Expand All @@ -25,55 +25,127 @@ export function AdminEditUserPage() {

async function handleSubmit(event: FormEvent) {
event.preventDefault();
await editUser(id!, user)
.then(() => {
navigate(`/admin/user/${id}`); // Use backticks here for template literals
})
.catch((error) => {
setError(error.message);
});
try {
await editUser(id!, user);
navigate(`/admin/user/${id}`);
} catch (error: any) {
setError(error.message);
}
}

return (
<div>
<h2>Edit User</h2>
{error && <span>{error}</span>}
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input
type="text"
name="username"
value={user.username}
onChange={handleChange}
/>
</label>
</div>
<div>
<label>
Email:
<input
type="email"
name="email"
value={user.email}
onChange={handleChange}
/>
</label>
if (!user) {
return (
<div className="container mx-auto px-4 py-8">
<div className="animate-pulse bg-gray-100 rounded-lg p-8">
Loading user details...
</div>
<div>
<label>
Is Admin:
<input
type="checkbox"
name="is_admin"
checked={user.is_admin}
onChange={handleChange}
/>
</label>
</div>
);
}

return (
<div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg shadow-md p-6">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold">Edit User</h1>
<Link
to={`/admin/user/${id}`}
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
>
Cancel
</Link>
</div>
<button type="submit">Save Changes</button>
</form>

{error && (
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
{error}
</div>
)}

<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<div>
<label className="block text-gray-700 font-medium mb-2">
Username
</label>
<input
type="text"
name="username"
value={user.username}
onChange={handleChange}
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
/>
</div>

<div>
<label className="block text-gray-700 font-medium mb-2">
Email
</label>
<input
type="email"
name="email"
value={user.email}
onChange={handleChange}
className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
/>
</div>

<div className="flex items-center space-x-3">
<label className="flex items-center space-x-3 text-gray-700 font-medium cursor-pointer">
<input
type="checkbox"
name="is_admin"
checked={user.is_admin}
onChange={handleChange}
className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
/>
<span>Administrator Access</span>
</label>
</div>
</div>

<div className="space-y-4">
<div className="bg-gray-50 rounded-lg p-4">
<h3 className="text-lg font-medium text-gray-800 mb-3">Current Status</h3>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<span className="text-gray-600">Subscription:</span>
<span className={`px-2 py-1 rounded text-sm ${
user.stripe_subscription_status === "active"
? "bg-green-100 text-green-800"
: user.stripe_subscription_status === "trialing"
? "bg-blue-100 text-blue-800"
: "bg-red-100 text-red-800"
}`}>
{user.stripe_subscription_status}
</span>
</div>
<div className="flex items-center space-x-2">
<span className="text-gray-600">Account:</span>
<span className={`px-2 py-1 rounded text-sm ${
user.is_active
? "bg-green-100 text-green-800"
: "bg-red-100 text-red-800"
}`}>
{user.is_active ? "Active" : "Inactive"}
</span>
</div>
</div>
</div>
</div>
</div>

<div className="flex justify-end space-x-4 pt-6 border-t">
<button
type="submit"
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Save Changes
</button>
</div>
</form>
</div>
</div>
);
}
71 changes: 53 additions & 18 deletions zettelkasten-front/src/pages/admin/AdminPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,31 +20,66 @@ export function Admin() {
}, [isAdmin, isLoading, navigate]);

if (isLoading) {
return <div>Loading...</div>;
return (
<div className="flex items-center justify-center h-screen">
<div className="animate-pulse">Loading...</div>
</div>
);
}

if (!isLoading && !isAdmin) {
return <div></div>;
}

return (
<div className="flex h-screen">
<div className="flex flex-1">
<div className="w-64 bg-gray-800 text-white p-4">
<ul>
<li>
<Link to="/admin" className="block py-2 px-4 hover:bg-gray-700">Users</Link>
<Link to="/admin/mailing-list" className="block py-2 px-4 hover:bg-gray-700">Mailing List</Link>
<Link to="/app" className="block py-2 px-4 hover:bg-gray-700">Back to App</Link>
</li>
</ul>
<div className="flex h-screen overflow-hidden">
{/* Fixed Sidebar */}
<div className="w-64 flex-shrink-0 bg-gray-800">
<div className="h-full flex flex-col">
<div className="flex-1 overflow-y-auto py-4">
<nav className="px-4">
<ul className="space-y-2">
<li>
<Link
to="/admin"
className="block py-2 px-4 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition-colors"
>
Users
</Link>
</li>
<li>
<Link
to="/admin/mailing-list"
className="block py-2 px-4 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition-colors"
>
Mailing List
</Link>
</li>
<li>
<Link
to="/app"
className="block py-2 px-4 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white transition-colors"
>
Back to App
</Link>
</li>
</ul>
</nav>
</div>
</div>
<div className="flex-1 p-4">
<Routes>
<Route path="/" element={<AdminUserIndex />} />
<Route path="user/:id" element={<AdminUserDetailPage />} />
<Route path="user/:id/edit" element={<AdminEditUserPage />} />
<Route path="mailing-list" element={<AdminMailingListPage />} />
</Routes>
</div>

{/* Main Content Area */}
<div className="flex-1 overflow-hidden">
<div className="h-full overflow-y-auto">
<div className="p-4">
<Routes>
<Route path="/" element={<AdminUserIndex />} />
<Route path="user/:id" element={<AdminUserDetailPage />} />
<Route path="user/:id/edit" element={<AdminEditUserPage />} />
<Route path="mailing-list" element={<AdminMailingListPage />} />
</Routes>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 06b9b7a

Please sign in to comment.