nl-d365boilerplate-vite 1.0.0

package/src/pages/Demo.tsx

@@ -0,0 +1,465 @@
+import { useEffect, useState } from "react";
+import { useAccounts, type Account } from "@/hooks/useAccounts";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Loading03Icon,
+  Add01Icon,
+  PencilEdit01Icon,
+  Delete02Icon,
+  Cancel01Icon,
+  ReloadIcon,
+  TestTube01Icon,
+} from "hugeicons-react";
+import { PageLayout } from "@/components/page-layout";
+
+const Demo = () => {
+  const {
+    accounts,
+    loading,
+    error,
+    isReady,
+    fetchAccounts,
+    createAccount,
+    updateAccount,
+    deleteAccount,
+    clearError,
+  } = useAccounts();
+
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const [formData, setFormData] = useState<Partial<Account>>({
+    name: "",
+    emailaddress1: "",
+    telephone1: "",
+    websiteurl: "",
+    address1_city: "",
+  });
+
+  useEffect(() => {
+    if (isReady) {
+      fetchAccounts();
+    }
+  }, [isReady, fetchAccounts]);
+
+  const handleInputChange = (field: keyof Account, value: string) => {
+    setFormData((prev: Partial<Account>) => ({ ...prev, [field]: value }));
+  };
+
+  const handleCreate = async () => {
+    if (!formData.name) {
+      alert("Account name is required");
+      return;
+    }
+
+    const accountId = await createAccount(formData);
+    if (accountId) {
+      setIsCreateDialogOpen(false);
+      resetForm();
+    }
+  };
+
+  const handleUpdate = async () => {
+    if (!selectedAccount?.accountid) return;
+
+    const success = await updateAccount(selectedAccount.accountid, formData);
+    if (success) {
+      setIsEditDialogOpen(false);
+      setSelectedAccount(null);
+      resetForm();
+    }
+  };
+
+  const handleDelete = async (accountId: string) => {
+    if (!confirm("Are you sure you want to delete this account?")) return;
+
+    await deleteAccount(accountId);
+  };
+
+  const filteredAccounts = searchTerm
+    ? accounts.filter((account: Account) =>
+        account.name?.toLowerCase().includes(searchTerm.toLowerCase()),
+      )
+    : accounts;
+
+  const resetForm = () => {
+    setFormData({
+      name: "",
+      emailaddress1: "",
+      telephone1: "",
+      websiteurl: "",
+      address1_city: "",
+    });
+  };
+
+  const openEditDialog = (account: Account) => {
+    setSelectedAccount(account);
+    setFormData({
+      name: account.name || "",
+      emailaddress1: account.emailaddress1 || "",
+      telephone1: account.telephone1 || "",
+      websiteurl: account.websiteurl || "",
+      address1_city: account.address1_city || "",
+    });
+    setIsEditDialogOpen(true);
+  };
+
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return "N/A";
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  return (
+    <PageLayout
+      title="Accounts Management"
+      description="Comprehensive CRUD operations demo"
+      icon={TestTube01Icon}
+      toolbar={
+        <Button
+          leftIcon={Add01Icon}
+          onClick={() => setIsCreateDialogOpen(true)}
+          disabled={!isReady}
+        >
+          Create Account
+        </Button>
+      }
+    >
+      <div className="space-y-6">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription className="flex justify-between items-center">
+              <span>{error}</span>
+              <Button variant="ghost" size="sm" onClick={clearError}>
+                Dismiss
+              </Button>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Search Accounts</CardTitle>
+            <CardDescription>
+              Search accounts by name or view all accounts
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <Input
+                  placeholder="Search by account name..."
+                  value={searchTerm}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setSearchTerm(e.target.value)
+                  }
+                />
+              </div>
+              <Button
+                variant="outline"
+                leftIcon={Cancel01Icon}
+                onClick={() => setSearchTerm("")}
+              >
+                Clear
+              </Button>
+              <Button
+                leftIcon={ReloadIcon}
+                isLoading={loading}
+                onClick={fetchAccounts}
+              >
+                Refresh
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              Accounts ({filteredAccounts.length}
+              {searchTerm && ` of ${accounts.length}`})
+            </CardTitle>
+            <CardDescription>
+              {isReady
+                ? "Active accounts in your Dynamics 365 environment"
+                : "Connecting to Dynamics 365..."}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {loading ? (
+              <div className="flex justify-center items-center py-8">
+                <Loading03Icon className="h-8 w-8 animate-spin text-primary" />
+              </div>
+            ) : filteredAccounts.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                {searchTerm
+                  ? "No accounts match your search. Try a different term."
+                  : "No accounts found. Create your first account to get started."}
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Email</TableHead>
+                      <TableHead>Phone</TableHead>
+                      <TableHead>City</TableHead>
+                      <TableHead>Created On</TableHead>
+                      <TableHead className="text-right">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredAccounts.map((account: Account) => (
+                      <TableRow key={account.accountid}>
+                        <TableCell className="font-medium">
+                          {account.name || "N/A"}
+                        </TableCell>
+                        <TableCell>{account.emailaddress1 || "N/A"}</TableCell>
+                        <TableCell>{account.telephone1 || "N/A"}</TableCell>
+                        <TableCell>{account.address1_city || "N/A"}</TableCell>
+                        <TableCell>{formatDate(account.createdon)}</TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-2">
+                            <Button
+                              variant="outline"
+                              size="icon"
+                              onClick={() => openEditDialog(account)}
+                            >
+                              <PencilEdit01Icon />
+                            </Button>
+                            <Button
+                              variant="destructive"
+                              size="icon"
+                              onClick={() =>
+                                handleDelete(account.accountid || "")
+                              }
+                            >
+                              <Delete02Icon />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+          <DialogContent className="sm:max-w-[600px]">
+            <DialogHeader>
+              <DialogTitle>Create New Account</DialogTitle>
+              <DialogDescription>
+                Fill in the details to create a new account in Dynamics 365.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="create-name">
+                  Account Name <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  id="create-name"
+                  value={formData.name}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("name", e.target.value)
+                  }
+                  placeholder="Enter account name"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="create-email">Email Address</Label>
+                <Input
+                  id="create-email"
+                  type="email"
+                  value={formData.emailaddress1}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("emailaddress1", e.target.value)
+                  }
+                  placeholder="email@example.com"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="create-phone">Phone Number</Label>
+                <Input
+                  id="create-phone"
+                  type="tel"
+                  value={formData.telephone1}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("telephone1", e.target.value)
+                  }
+                  placeholder="+1 (555) 000-0000"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="create-website">Website URL</Label>
+                <Input
+                  id="create-website"
+                  type="url"
+                  value={formData.websiteurl}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("websiteurl", e.target.value)
+                  }
+                  placeholder="https://example.com"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="create-city">City</Label>
+                <Input
+                  id="create-city"
+                  value={formData.address1_city}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("address1_city", e.target.value)
+                  }
+                  placeholder="Enter city"
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setIsCreateDialogOpen(false);
+                  resetForm();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleCreate}
+                isLoading={loading}
+                leftIcon={Add01Icon}
+              >
+                Create Account
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+          <DialogContent className="sm:max-w-[600px]">
+            <DialogHeader>
+              <DialogTitle>Edit Account</DialogTitle>
+              <DialogDescription>
+                Update the account details in Dynamics 365.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="edit-name">
+                  Account Name <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  id="edit-name"
+                  value={formData.name}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("name", e.target.value)
+                  }
+                  placeholder="Enter account name"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="edit-email">Email Address</Label>
+                <Input
+                  id="edit-email"
+                  type="email"
+                  value={formData.emailaddress1}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("emailaddress1", e.target.value)
+                  }
+                  placeholder="email@example.com"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="edit-phone">Phone Number</Label>
+                <Input
+                  id="edit-phone"
+                  type="tel"
+                  value={formData.telephone1}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("telephone1", e.target.value)
+                  }
+                  placeholder="+1 (555) 000-0000"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="edit-website">Website URL</Label>
+                <Input
+                  id="edit-website"
+                  type="url"
+                  value={formData.websiteurl}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("websiteurl", e.target.value)
+                  }
+                  placeholder="https://example.com"
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="edit-city">City</Label>
+                <Input
+                  id="edit-city"
+                  value={formData.address1_city}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    handleInputChange("address1_city", e.target.value)
+                  }
+                  placeholder="Enter city"
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setIsEditDialogOpen(false);
+                  setSelectedAccount(null);
+                  resetForm();
+                }}
+              >
+                Cancel
+              </Button>
+              <Button onClick={handleUpdate} isLoading={loading}>
+                Update Account
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </PageLayout>
+  );
+};
+
+export default Demo;