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:
alphaeusmote
2025-04-11 23:55:00 +00:00
parent ff27772fbd
commit e3a670ad1f
2 changed files with 100 additions and 100 deletions
+2 -2
View File
@@ -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} />
+98 -98
View File
@@ -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>