gsadmin/DynamoDNS
1
0
Fork 0
mirror of https://github.com/freedbygrace/DynamoDNS.git synced 2026-08-28 11:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename "Organizations" to "Customers" and update related components and contexts.

Browse Source 
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/cf857e9f-278e-4bf9-9300-39df1d2fb6cb.jpg
This commit is contained in:
alphaeusmote
2025-04-11 23:55:00 +00:00
parent ff27772fbd e3a670ad1f
commit 82907cec16
2 changed files with 100 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import RolesPage from "@/pages/roles";
import GroupsPage from "@/pages/groups"; import GroupsPage from "@/pages/groups";
import ProvidersPage from "@/pages/providers"; import ProvidersPage from "@/pages/providers";
import SettingsPage from "@/pages/settings"; import SettingsPage from "@/pages/settings";
import OrganizationsPage from "@/pages/organizations"; import CustomersPage from "@/pages/organizations";
import WebhooksPage from "@/pages/webhooks"; import WebhooksPage from "@/pages/webhooks";
import WebhookLogsPage from "@/pages/webhook-logs"; import WebhookLogsPage from "@/pages/webhook-logs";
import { AuthProvider } from "@/hooks/use-auth"; import { AuthProvider } from "@/hooks/use-auth";
@@ -27,7 +27,7 @@ function Router() {
<Switch> <Switch>
<Route path="/auth" component={AuthPage} /> <Route path="/auth" component={AuthPage} />
<ProtectedRoute path="/" component={DashboardPage} /> <ProtectedRoute path="/" component={DashboardPage} />
<ProtectedRoute path="/customers" component={OrganizationsPage} /> <ProtectedRoute path="/customers" component={CustomersPage} />
<ProtectedRoute path="/domains" component={DomainsPage} /> <ProtectedRoute path="/domains" component={DomainsPage} />
<ProtectedRoute path="/metrics" component={MetricsPage} /> <ProtectedRoute path="/metrics" component={MetricsPage} />
<ProtectedRoute path="/history" component={HistoryPage} /> <ProtectedRoute path="/history" component={HistoryPage} />
client/src/pages/organizations.tsx
+98 -98
View File
@@ -7,8 +7,8 @@ import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Organization } from '@shared/schema'; import { Customer } from '@shared/schema';
import { useOrganization } from '@/context/organization-context'; import { useCustomer } from '@/context/customer-context';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { useAuth } from '@/hooks/use-auth'; import { useAuth } from '@/hooks/use-auth';
import { Users, Plus, Edit, Trash2, Building, Calendar, Clock, Info, AlertCircle } from 'lucide-react'; import { Users, Plus, Edit, Trash2, Building, Calendar, Clock, Info, AlertCircle } from 'lucide-react';
@@ -26,60 +26,60 @@ import {
AlertDialogTitle AlertDialogTitle
} from '@/components/ui/alert-dialog'; } from '@/components/ui/alert-dialog';
export default function OrganizationsPage() { export default function CustomersPage() {
const { user } = useAuth(); const { user } = useAuth();
const { const {
organizations, customers,
currentOrganization, currentCustomer,
setCurrentOrganization, setCurrentCustomer,
createOrganizationMutation, createCustomerMutation,
updateOrganizationMutation, updateCustomerMutation,
deleteOrganizationMutation, deleteCustomerMutation,
domainsByOrganization domainsByCustomer
} = useOrganization(); } = useCustomer();
const { toast } = useToast(); const { toast } = useToast();
const [newOrgName, setNewOrgName] = useState(''); const [newCustomerName, setNewCustomerName] = useState('');
const [newOrgActive, setNewOrgActive] = useState(true); const [newCustomerActive, setNewCustomerActive] = useState(true);
const [isDialogOpen, setIsDialogOpen] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false);
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false); const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
const [isViewDialogOpen, setIsViewDialogOpen] = useState(false); const [isViewDialogOpen, setIsViewDialogOpen] = useState(false);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null); const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
const [editOrgName, setEditOrgName] = useState(''); const [editCustomerName, setEditCustomerName] = useState('');
const [editOrgActive, setEditOrgActive] = useState(true); const [editCustomerActive, setEditCustomerActive] = useState(true);
const isAdmin = user?.role === 'admin'; const isAdmin = user?.role === 'admin';
const handleCreateOrganization = async (e: React.FormEvent) => { const handleCreateCustomer = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (!newOrgName.trim()) { if (!newCustomerName.trim()) {
toast({ toast({
title: 'Error', title: 'Error',
description: 'Organization name cannot be empty', description: 'Customer name cannot be empty',
variant: 'destructive', variant: 'destructive',
}); });
return; return;
} }
try { try {
await createOrganizationMutation.mutateAsync({ await createCustomerMutation.mutateAsync({
name: newOrgName, name: newCustomerName,
isActive: newOrgActive, isActive: newCustomerActive,
}); });
setNewOrgName(''); setNewCustomerName('');
setNewOrgActive(true); setNewCustomerActive(true);
setIsDialogOpen(false); setIsDialogOpen(false);
toast({ toast({
title: 'Success', title: 'Success',
description: 'Organization created successfully', description: 'Customer created successfully',
}); });
} catch (error) { } catch (error) {
console.error('Error creating organization:', error); console.error('Error creating customer:', error);
toast({ toast({
title: 'Error', title: 'Error',
description: 'Failed to create organization', description: 'Failed to create customer',
variant: 'destructive', variant: 'destructive',
}); });
} }
@@ -87,43 +87,43 @@ export default function OrganizationsPage() {
return ( return (
<MainLayout <MainLayout
title="Organizations" title="Customers"
description="Manage your organizations and their settings." description="Manage your customers and their settings."
> >
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold">Organizations</h2> <h2 className="text-2xl font-bold">Customers</h2>
{isAdmin && ( {isAdmin && (
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}> <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button> <Button>
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Add Organization Add Customer
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Create New Organization</DialogTitle> <DialogTitle>Create New Customer</DialogTitle>
<DialogDescription> <DialogDescription>
Add a new organization to your account. Add a new customer to your account.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleCreateOrganization}> <form onSubmit={handleCreateCustomer}>
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="orgName">Organization Name</Label> <Label htmlFor="customerName">Customer Name</Label>
<Input <Input
id="orgName" id="customerName"
value={newOrgName} value={newCustomerName}
onChange={(e) => setNewOrgName(e.target.value)} onChange={(e) => setNewCustomerName(e.target.value)}
placeholder="Enter organization name" placeholder="Enter customer name"
required required
/> />
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
id="isActive" id="isActive"
checked={newOrgActive} checked={newCustomerActive}
onCheckedChange={(checked) => setNewOrgActive(checked as boolean)} onCheckedChange={(checked) => setNewCustomerActive(checked as boolean)}
/> />
<Label htmlFor="isActive">Active</Label> <Label htmlFor="isActive">Active</Label>
</div> </div>
@@ -131,9 +131,9 @@ export default function OrganizationsPage() {
<DialogFooter> <DialogFooter>
<Button <Button
type="submit" type="submit"
disabled={createOrganizationMutation.isPending} disabled={createCustomerMutation.isPending}
> >
{createOrganizationMutation.isPending ? 'Creating...' : 'Create Organization'} {createCustomerMutation.isPending ? 'Creating...' : 'Create Customer'}
</Button> </Button>
</DialogFooter> </DialogFooter>
</form> </form>
@@ -143,14 +143,14 @@ export default function OrganizationsPage() {
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{organizations.map((org) => ( {customers.map((customer) => (
<Card <Card
key={org.id} key={customer.id}
className={cn( className={cn(
'cursor-pointer transition-all hover:shadow-md', 'cursor-pointer transition-all hover:shadow-md',
currentOrganization?.id === org.id && 'border-primary' currentCustomer?.id === customer.id && 'border-primary'
)} )}
onClick={() => setCurrentOrganization(org)} onClick={() => setCurrentCustomer(customer)}
> >
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
@@ -159,13 +159,13 @@ export default function OrganizationsPage() {
<Building className="h-5 w-5 text-primary" /> <Building className="h-5 w-5 text-primary" />
</div> </div>
<div> <div>
<CardTitle className="text-lg mb-1">{org.name}</CardTitle> <CardTitle className="text-lg mb-1">{customer.name}</CardTitle>
<CardDescription> <CardDescription>
{org.isActive ? 'Active' : 'Inactive'} {customer.isActive ? 'Active' : 'Inactive'}
</CardDescription> </CardDescription>
</div> </div>
</div> </div>
{currentOrganization?.id === org.id && ( {currentCustomer?.id === customer.id && (
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary"> <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary">
<Users className="h-3.5 w-3.5 text-primary-foreground" /> <Users className="h-3.5 w-3.5 text-primary-foreground" />
</div> </div>
@@ -174,7 +174,7 @@ export default function OrganizationsPage() {
</CardHeader> </CardHeader>
<CardContent className="pb-3"> <CardContent className="pb-3">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Created on {new Date(org.createdAt).toLocaleDateString()} Created on {new Date(customer.createdAt).toLocaleDateString()}
</p> </p>
</CardContent> </CardContent>
<CardFooter className="flex justify-between pt-2"> <CardFooter className="flex justify-between pt-2">
@@ -184,7 +184,7 @@ export default function OrganizationsPage() {
className="text-muted-foreground" className="text-muted-foreground"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedOrg(org); setSelectedCustomer(customer);
setIsViewDialogOpen(true); setIsViewDialogOpen(true);
}} }}
> >
@@ -199,9 +199,9 @@ export default function OrganizationsPage() {
className="h-8 w-8 text-muted-foreground hover:text-foreground" className="h-8 w-8 text-muted-foreground hover:text-foreground"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedOrg(org); setSelectedCustomer(customer);
setEditOrgName(org.name); setEditCustomerName(customer.name);
setEditOrgActive(org.isActive); setEditCustomerActive(customer.isActive);
setIsEditDialogOpen(true); setIsEditDialogOpen(true);
}} }}
> >
@@ -213,7 +213,7 @@ export default function OrganizationsPage() {
className="h-8 w-8 text-muted-foreground hover:text-destructive" className="h-8 w-8 text-muted-foreground hover:text-destructive"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedOrg(org); setSelectedCustomer(customer);
setIsDeleteDialogOpen(true); setIsDeleteDialogOpen(true);
}} }}
> >
@@ -226,47 +226,47 @@ export default function OrganizationsPage() {
))} ))}
</div> </div>
{organizations.length === 0 && ( {customers.length === 0 && (
<Card className="border-dashed p-8"> <Card className="border-dashed p-8">
<div className="flex flex-col items-center justify-center text-center space-y-4"> <div className="flex flex-col items-center justify-center text-center space-y-4">
<Building className="w-10 h-10 text-muted-foreground" /> <Building className="w-10 h-10 text-muted-foreground" />
<div> <div>
<h3 className="text-lg font-medium">No Organizations</h3> <h3 className="text-lg font-medium">No Customers</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
You don't have any organizations yet. Create one to get started. You don't have any customers yet. Create one to get started.
</p> </p>
</div> </div>
{isAdmin && ( {isAdmin && (
<Button onClick={() => setIsDialogOpen(true)}> <Button onClick={() => setIsDialogOpen(true)}>
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Add Organization Add Customer
</Button> </Button>
)} )}
</div> </div>
</Card> </Card>
)} )}
{/* View Organization Dialog */} {/* View Customer Dialog */}
<AlertDialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}> <AlertDialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Organization Details</AlertDialogTitle> <AlertDialogTitle>Customer Details</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
View details for this organization. View details for this customer.
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<div className="space-y-4"> <div className="space-y-4">
{selectedOrg && ( {selectedCustomer && (
<> <>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<h4 className="text-sm font-medium mb-1">Name</h4> <h4 className="text-sm font-medium mb-1">Name</h4>
<p className="text-sm">{selectedOrg.name}</p> <p className="text-sm">{selectedCustomer.name}</p>
</div> </div>
<div> <div>
<h4 className="text-sm font-medium mb-1">Status</h4> <h4 className="text-sm font-medium mb-1">Status</h4>
<p className="text-sm"> <p className="text-sm">
{selectedOrg.isActive ? ( {selectedCustomer.isActive ? (
<Badge variant="outline" className="bg-green-50 text-green-700 hover:bg-green-50 hover:text-green-700"> <Badge variant="outline" className="bg-green-50 text-green-700 hover:bg-green-50 hover:text-green-700">
Active Active
</Badge> </Badge>
@@ -281,20 +281,20 @@ export default function OrganizationsPage() {
<div> <div>
<h4 className="text-sm font-medium mb-1">Created</h4> <h4 className="text-sm font-medium mb-1">Created</h4>
<p className="text-sm">{new Date(selectedOrg.createdAt).toLocaleDateString()}</p> <p className="text-sm">{new Date(selectedCustomer.createdAt).toLocaleDateString()}</p>
</div> </div>
<div> <div>
<h4 className="text-sm font-medium mb-1">Domains</h4> <h4 className="text-sm font-medium mb-1">Domains</h4>
{/* Check if domain data is available for this org */} {/* Check if domain data is available for this customer */}
{selectedOrg.id in (domainsByOrganization || {}) && domainsByOrganization[selectedOrg.id]?.length > 0 ? ( {selectedCustomer.id in (domainsByCustomer || {}) && domainsByCustomer[selectedCustomer.id]?.length > 0 ? (
<ul className="text-sm space-y-1 list-disc list-inside"> <ul className="text-sm space-y-1 list-disc list-inside">
{domainsByOrganization[selectedOrg.id]?.map(domain => ( {domainsByCustomer[selectedCustomer.id]?.map(domain => (
<li key={domain.id}>{domain.name}</li> <li key={domain.id}>{domain.name}</li>
))} ))}
</ul> </ul>
) : ( ) : (
<p className="text-sm text-muted-foreground">No domains associated with this organization.</p> <p className="text-sm text-muted-foreground">No domains associated with this customer.</p>
)} )}
</div> </div>
</> </>
@@ -306,33 +306,33 @@ export default function OrganizationsPage() {
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
{/* Edit Organization Dialog */} {/* Edit Customer Dialog */}
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}> <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Edit Organization</DialogTitle> <DialogTitle>Edit Customer</DialogTitle>
<DialogDescription> <DialogDescription>
Make changes to the organization details. Make changes to the customer details.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={(e) => { <form onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
if (!editOrgName.trim()) { if (!editCustomerName.trim()) {
toast({ toast({
title: 'Error', title: 'Error',
description: 'Organization name cannot be empty', description: 'Customer name cannot be empty',
variant: 'destructive', variant: 'destructive',
}); });
return; return;
} }
if (selectedOrg) { if (selectedCustomer) {
// Use the updateOrganizationMutation from context // Use the updateCustomerMutation from context
updateOrganizationMutation.mutate({ updateCustomerMutation.mutate({
id: selectedOrg.id, id: selectedCustomer.id,
data: { data: {
name: editOrgName, name: editCustomerName,
isActive: editOrgActive, isActive: editCustomerActive,
} }
}); });
@@ -341,20 +341,20 @@ export default function OrganizationsPage() {
}}> }}>
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="editOrgName">Organization Name</Label> <Label htmlFor="editCustomerName">Customer Name</Label>
<Input <Input
id="editOrgName" id="editCustomerName"
value={editOrgName} value={editCustomerName}
onChange={(e) => setEditOrgName(e.target.value)} onChange={(e) => setEditCustomerName(e.target.value)}
placeholder="Enter organization name" placeholder="Enter customer name"
required required
/> />
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
id="editIsActive" id="editIsActive"
checked={editOrgActive} checked={editCustomerActive}
onCheckedChange={(checked) => setEditOrgActive(checked as boolean)} onCheckedChange={(checked) => setEditCustomerActive(checked as boolean)}
/> />
<Label htmlFor="editIsActive">Active</Label> <Label htmlFor="editIsActive">Active</Label>
</div> </div>
@@ -362,38 +362,38 @@ export default function OrganizationsPage() {
<DialogFooter> <DialogFooter>
<Button <Button
type="submit" type="submit"
disabled={updateOrganizationMutation.isPending} disabled={updateCustomerMutation.isPending}
> >
{updateOrganizationMutation.isPending ? 'Saving...' : 'Save Changes'} {updateCustomerMutation.isPending ? 'Saving...' : 'Save Changes'}
</Button> </Button>
</DialogFooter> </DialogFooter>
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* Delete Organization Dialog */} {/* Delete Customer Dialog */}
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}> <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle> <AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
This action cannot be undone. This will permanently delete the organization This action cannot be undone. This will permanently delete the customer
{selectedOrg && <strong> "{selectedOrg.name}"</strong>} and all associated data. {selectedCustomer && <strong> "{selectedCustomer.name}"</strong>} and all associated data.
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
className="bg-destructive hover:bg-destructive/90" className="bg-destructive hover:bg-destructive/90"
disabled={deleteOrganizationMutation.isPending} disabled={deleteCustomerMutation.isPending}
onClick={() => { onClick={() => {
if (selectedOrg) { if (selectedCustomer) {
deleteOrganizationMutation.mutate(selectedOrg.id); deleteCustomerMutation.mutate(selectedCustomer.id);
setIsDeleteDialogOpen(false); setIsDeleteDialogOpen(false);
} }
}} }}
> >
{deleteOrganizationMutation.isPending ? 'Deleting...' : 'Delete'} {deleteCustomerMutation.isPending ? 'Deleting...' : 'Delete'}
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>