mirror of
https://github.com/freedbygrace/DynamoDNS.git
synced 2026-07-27 11:58:56 +00:00
Rename "Organizations" to "Customers" and update related components and contexts.
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:
+2
-2
@@ -14,7 +14,7 @@ import RolesPage from "@/pages/roles";
|
||||
import GroupsPage from "@/pages/groups";
|
||||
import ProvidersPage from "@/pages/providers";
|
||||
import SettingsPage from "@/pages/settings";
|
||||
import OrganizationsPage from "@/pages/organizations";
|
||||
import CustomersPage from "@/pages/organizations";
|
||||
import WebhooksPage from "@/pages/webhooks";
|
||||
import WebhookLogsPage from "@/pages/webhook-logs";
|
||||
import { AuthProvider } from "@/hooks/use-auth";
|
||||
@@ -27,7 +27,7 @@ function Router() {
|
||||
<Switch>
|
||||
<Route path="/auth" component={AuthPage} />
|
||||
<ProtectedRoute path="/" component={DashboardPage} />
|
||||
<ProtectedRoute path="/customers" component={OrganizationsPage} />
|
||||
<ProtectedRoute path="/customers" component={CustomersPage} />
|
||||
<ProtectedRoute path="/domains" component={DomainsPage} />
|
||||
<ProtectedRoute path="/metrics" component={MetricsPage} />
|
||||
<ProtectedRoute path="/history" component={HistoryPage} />
|
||||
|
||||
@@ -7,8 +7,8 @@ import { Label } from '@/components/ui/label';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Organization } from '@shared/schema';
|
||||
import { useOrganization } from '@/context/organization-context';
|
||||
import { Customer } from '@shared/schema';
|
||||
import { useCustomer } from '@/context/customer-context';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useAuth } from '@/hooks/use-auth';
|
||||
import { Users, Plus, Edit, Trash2, Building, Calendar, Clock, Info, AlertCircle } from 'lucide-react';
|
||||
@@ -26,60 +26,60 @@ import {
|
||||
AlertDialogTitle
|
||||
} from '@/components/ui/alert-dialog';
|
||||
|
||||
export default function OrganizationsPage() {
|
||||
export default function CustomersPage() {
|
||||
const { user } = useAuth();
|
||||
const {
|
||||
organizations,
|
||||
currentOrganization,
|
||||
setCurrentOrganization,
|
||||
createOrganizationMutation,
|
||||
updateOrganizationMutation,
|
||||
deleteOrganizationMutation,
|
||||
domainsByOrganization
|
||||
} = useOrganization();
|
||||
customers,
|
||||
currentCustomer,
|
||||
setCurrentCustomer,
|
||||
createCustomerMutation,
|
||||
updateCustomerMutation,
|
||||
deleteCustomerMutation,
|
||||
domainsByCustomer
|
||||
} = useCustomer();
|
||||
const { toast } = useToast();
|
||||
const [newOrgName, setNewOrgName] = useState('');
|
||||
const [newOrgActive, setNewOrgActive] = useState(true);
|
||||
const [newCustomerName, setNewCustomerName] = useState('');
|
||||
const [newCustomerActive, setNewCustomerActive] = useState(true);
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||
const [isViewDialogOpen, setIsViewDialogOpen] = useState(false);
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
|
||||
const [editOrgName, setEditOrgName] = useState('');
|
||||
const [editOrgActive, setEditOrgActive] = useState(true);
|
||||
const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
|
||||
const [editCustomerName, setEditCustomerName] = useState('');
|
||||
const [editCustomerActive, setEditCustomerActive] = useState(true);
|
||||
|
||||
const isAdmin = user?.role === 'admin';
|
||||
|
||||
const handleCreateOrganization = async (e: React.FormEvent) => {
|
||||
const handleCreateCustomer = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newOrgName.trim()) {
|
||||
if (!newCustomerName.trim()) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'Organization name cannot be empty',
|
||||
description: 'Customer name cannot be empty',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await createOrganizationMutation.mutateAsync({
|
||||
name: newOrgName,
|
||||
isActive: newOrgActive,
|
||||
await createCustomerMutation.mutateAsync({
|
||||
name: newCustomerName,
|
||||
isActive: newCustomerActive,
|
||||
});
|
||||
|
||||
setNewOrgName('');
|
||||
setNewOrgActive(true);
|
||||
setNewCustomerName('');
|
||||
setNewCustomerActive(true);
|
||||
setIsDialogOpen(false);
|
||||
|
||||
toast({
|
||||
title: 'Success',
|
||||
description: 'Organization created successfully',
|
||||
description: 'Customer created successfully',
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error creating organization:', error);
|
||||
console.error('Error creating customer:', error);
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'Failed to create organization',
|
||||
description: 'Failed to create customer',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
@@ -87,43 +87,43 @@ export default function OrganizationsPage() {
|
||||
|
||||
return (
|
||||
<MainLayout
|
||||
title="Organizations"
|
||||
description="Manage your organizations and their settings."
|
||||
title="Customers"
|
||||
description="Manage your customers and their settings."
|
||||
>
|
||||
<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 && (
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Organization
|
||||
Add Customer
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New Organization</DialogTitle>
|
||||
<DialogTitle>Create New Customer</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new organization to your account.
|
||||
Add a new customer to your account.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleCreateOrganization}>
|
||||
<form onSubmit={handleCreateCustomer}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="orgName">Organization Name</Label>
|
||||
<Label htmlFor="customerName">Customer Name</Label>
|
||||
<Input
|
||||
id="orgName"
|
||||
value={newOrgName}
|
||||
onChange={(e) => setNewOrgName(e.target.value)}
|
||||
placeholder="Enter organization name"
|
||||
id="customerName"
|
||||
value={newCustomerName}
|
||||
onChange={(e) => setNewCustomerName(e.target.value)}
|
||||
placeholder="Enter customer name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="isActive"
|
||||
checked={newOrgActive}
|
||||
onCheckedChange={(checked) => setNewOrgActive(checked as boolean)}
|
||||
checked={newCustomerActive}
|
||||
onCheckedChange={(checked) => setNewCustomerActive(checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="isActive">Active</Label>
|
||||
</div>
|
||||
@@ -131,9 +131,9 @@ export default function OrganizationsPage() {
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={createOrganizationMutation.isPending}
|
||||
disabled={createCustomerMutation.isPending}
|
||||
>
|
||||
{createOrganizationMutation.isPending ? 'Creating...' : 'Create Organization'}
|
||||
{createCustomerMutation.isPending ? 'Creating...' : 'Create Customer'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
@@ -143,14 +143,14 @@ export default function OrganizationsPage() {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{organizations.map((org) => (
|
||||
{customers.map((customer) => (
|
||||
<Card
|
||||
key={org.id}
|
||||
key={customer.id}
|
||||
className={cn(
|
||||
'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">
|
||||
<div className="flex justify-between items-start">
|
||||
@@ -159,13 +159,13 @@ export default function OrganizationsPage() {
|
||||
<Building className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg mb-1">{org.name}</CardTitle>
|
||||
<CardTitle className="text-lg mb-1">{customer.name}</CardTitle>
|
||||
<CardDescription>
|
||||
{org.isActive ? 'Active' : 'Inactive'}
|
||||
{customer.isActive ? 'Active' : 'Inactive'}
|
||||
</CardDescription>
|
||||
</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">
|
||||
<Users className="h-3.5 w-3.5 text-primary-foreground" />
|
||||
</div>
|
||||
@@ -174,7 +174,7 @@ export default function OrganizationsPage() {
|
||||
</CardHeader>
|
||||
<CardContent className="pb-3">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Created on {new Date(org.createdAt).toLocaleDateString()}
|
||||
Created on {new Date(customer.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between pt-2">
|
||||
@@ -184,7 +184,7 @@ export default function OrganizationsPage() {
|
||||
className="text-muted-foreground"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedOrg(org);
|
||||
setSelectedCustomer(customer);
|
||||
setIsViewDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
@@ -199,9 +199,9 @@ export default function OrganizationsPage() {
|
||||
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedOrg(org);
|
||||
setEditOrgName(org.name);
|
||||
setEditOrgActive(org.isActive);
|
||||
setSelectedCustomer(customer);
|
||||
setEditCustomerName(customer.name);
|
||||
setEditCustomerActive(customer.isActive);
|
||||
setIsEditDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
@@ -213,7 +213,7 @@ export default function OrganizationsPage() {
|
||||
className="h-8 w-8 text-muted-foreground hover:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedOrg(org);
|
||||
setSelectedCustomer(customer);
|
||||
setIsDeleteDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
@@ -226,47 +226,47 @@ export default function OrganizationsPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{organizations.length === 0 && (
|
||||
{customers.length === 0 && (
|
||||
<Card className="border-dashed p-8">
|
||||
<div className="flex flex-col items-center justify-center text-center space-y-4">
|
||||
<Building className="w-10 h-10 text-muted-foreground" />
|
||||
<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">
|
||||
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>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<Button onClick={() => setIsDialogOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Organization
|
||||
Add Customer
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* View Organization Dialog */}
|
||||
{/* View Customer Dialog */}
|
||||
<AlertDialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Organization Details</AlertDialogTitle>
|
||||
<AlertDialogTitle>Customer Details</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
View details for this organization.
|
||||
View details for this customer.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<div className="space-y-4">
|
||||
{selectedOrg && (
|
||||
{selectedCustomer && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<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>
|
||||
<h4 className="text-sm font-medium mb-1">Status</h4>
|
||||
<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">
|
||||
Active
|
||||
</Badge>
|
||||
@@ -281,20 +281,20 @@ export default function OrganizationsPage() {
|
||||
|
||||
<div>
|
||||
<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>
|
||||
<h4 className="text-sm font-medium mb-1">Domains</h4>
|
||||
{/* Check if domain data is available for this org */}
|
||||
{selectedOrg.id in (domainsByOrganization || {}) && domainsByOrganization[selectedOrg.id]?.length > 0 ? (
|
||||
{/* Check if domain data is available for this customer */}
|
||||
{selectedCustomer.id in (domainsByCustomer || {}) && domainsByCustomer[selectedCustomer.id]?.length > 0 ? (
|
||||
<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>
|
||||
))}
|
||||
</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>
|
||||
</>
|
||||
@@ -306,33 +306,33 @@ export default function OrganizationsPage() {
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* Edit Organization Dialog */}
|
||||
{/* Edit Customer Dialog */}
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Organization</DialogTitle>
|
||||
<DialogTitle>Edit Customer</DialogTitle>
|
||||
<DialogDescription>
|
||||
Make changes to the organization details.
|
||||
Make changes to the customer details.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (!editOrgName.trim()) {
|
||||
if (!editCustomerName.trim()) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'Organization name cannot be empty',
|
||||
description: 'Customer name cannot be empty',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedOrg) {
|
||||
// Use the updateOrganizationMutation from context
|
||||
updateOrganizationMutation.mutate({
|
||||
id: selectedOrg.id,
|
||||
if (selectedCustomer) {
|
||||
// Use the updateCustomerMutation from context
|
||||
updateCustomerMutation.mutate({
|
||||
id: selectedCustomer.id,
|
||||
data: {
|
||||
name: editOrgName,
|
||||
isActive: editOrgActive,
|
||||
name: editCustomerName,
|
||||
isActive: editCustomerActive,
|
||||
}
|
||||
});
|
||||
|
||||
@@ -341,20 +341,20 @@ export default function OrganizationsPage() {
|
||||
}}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="editOrgName">Organization Name</Label>
|
||||
<Label htmlFor="editCustomerName">Customer Name</Label>
|
||||
<Input
|
||||
id="editOrgName"
|
||||
value={editOrgName}
|
||||
onChange={(e) => setEditOrgName(e.target.value)}
|
||||
placeholder="Enter organization name"
|
||||
id="editCustomerName"
|
||||
value={editCustomerName}
|
||||
onChange={(e) => setEditCustomerName(e.target.value)}
|
||||
placeholder="Enter customer name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="editIsActive"
|
||||
checked={editOrgActive}
|
||||
onCheckedChange={(checked) => setEditOrgActive(checked as boolean)}
|
||||
checked={editCustomerActive}
|
||||
onCheckedChange={(checked) => setEditCustomerActive(checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="editIsActive">Active</Label>
|
||||
</div>
|
||||
@@ -362,38 +362,38 @@ export default function OrganizationsPage() {
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={updateOrganizationMutation.isPending}
|
||||
disabled={updateCustomerMutation.isPending}
|
||||
>
|
||||
{updateOrganizationMutation.isPending ? 'Saving...' : 'Save Changes'}
|
||||
{updateCustomerMutation.isPending ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Organization Dialog */}
|
||||
{/* Delete Customer Dialog */}
|
||||
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action cannot be undone. This will permanently delete the organization
|
||||
{selectedOrg && <strong> "{selectedOrg.name}"</strong>} and all associated data.
|
||||
This action cannot be undone. This will permanently delete the customer
|
||||
{selectedCustomer && <strong> "{selectedCustomer.name}"</strong>} and all associated data.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive hover:bg-destructive/90"
|
||||
disabled={deleteOrganizationMutation.isPending}
|
||||
disabled={deleteCustomerMutation.isPending}
|
||||
onClick={() => {
|
||||
if (selectedOrg) {
|
||||
deleteOrganizationMutation.mutate(selectedOrg.id);
|
||||
if (selectedCustomer) {
|
||||
deleteCustomerMutation.mutate(selectedCustomer.id);
|
||||
setIsDeleteDialogOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{deleteOrganizationMutation.isPending ? 'Deleting...' : 'Delete'}
|
||||
{deleteCustomerMutation.isPending ? 'Deleting...' : 'Delete'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
|
||||
Reference in New Issue
Block a user