From 33b506492c36ce876b30c7778b5475b885b944fb Mon Sep 17 00:00:00 2001
From: madhumach <94madhu94@gmail.com>
Date: Thu, 5 Mar 2026 20:30:11 -0800
Subject: [PATCH 1/5] add Dataverse upload feature

---
 samples/Dataverse/src/App.css                 |  87 +++++
 samples/Dataverse/src/App.tsx                 | 145 +++++---
 .../Dataverse/src/components/AccountCard.tsx  |  42 +++
 .../Dataverse/src/components/AccountForm.tsx  | 347 ++++++++++++++++++
 .../Dataverse/src/components/AccountList.tsx  |  56 +++
 samples/Dataverse/src/components/index.ts     |   4 +
 samples/Dataverse/src/hooks/index.ts          |   1 +
 .../Dataverse/src/hooks/useAccountsCrud.ts    | 240 ++++++++++++
 8 files changed, 881 insertions(+), 41 deletions(-)
 create mode 100644 samples/Dataverse/src/components/AccountCard.tsx
 create mode 100644 samples/Dataverse/src/components/AccountForm.tsx
 create mode 100644 samples/Dataverse/src/components/AccountList.tsx
 create mode 100644 samples/Dataverse/src/hooks/useAccountsCrud.ts

diff --git a/samples/Dataverse/src/App.css b/samples/Dataverse/src/App.css
index dda1952..420ccd2 100644
--- a/samples/Dataverse/src/App.css
+++ b/samples/Dataverse/src/App.css
@@ -64,6 +64,41 @@ header p {
   position: relative;
 }
 
+/* Page Navigation Tabs */
+.page-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 24px;
+  border-bottom: 2px solid #c5b4e3;
+  padding-bottom: 0;
+}
+
+.tab-btn {
+  padding: 10px 28px;
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  font-family: 'Segoe UI', 'Segoe Sans Text', sans-serif;
+  font-weight: 500;
+  color: #702573;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -2px;
+  border-radius: 8px 8px 0 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+.tab-btn:hover {
+  background: rgba(197, 180, 227, 0.2);
+}
+
+.tab-btn.active {
+  color: #c03bc4;
+  border-bottom-color: #c03bc4;
+  background: rgba(192, 59, 196, 0.08);
+  font-weight: 600;
+}
+
 /* Error message */
 .error-message {
   background: linear-gradient(135deg, #fee 0%, #fdd 100%);
@@ -465,6 +500,58 @@ footer code {
   font-weight: 500;
 }
 
+/* Attachment sub-form */
+.attachment-subform {
+  margin-top: 32px;
+  padding: 20px 24px;
+  background: rgba(197, 180, 227, 0.12);
+  border: 1px solid rgba(197, 180, 227, 0.4);
+  border-radius: 12px;
+}
+
+.attachment-subform h3 {
+  margin: 0 0 16px 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #702573;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.attachment-actions {
+  margin-top: 8px;
+}
+
+.required-mark {
+  color: #c03bc4;
+  margin-left: 2px;
+}
+
+/* Upload toast */
+.upload-toast {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 14px 20px;
+  border-radius: 10px;
+  margin-bottom: 16px;
+  font-weight: 500;
+  font-size: 0.95rem;
+  animation: fadeIn 0.25s ease-out;
+}
+
+.upload-toast--success {
+  background: linear-gradient(135deg, #e6f9f0 0%, #d4f5e5 100%);
+  border: 1px solid #a3d9b8;
+  color: #1a6640;
+}
+
+.upload-toast--error {
+  background: linear-gradient(135deg, #fee 0%, #fdd 100%);
+  border: 1px solid #fcc;
+  color: #c33;
+}
+
 /* Smooth animations */
 @keyframes fadeIn {
   from {
diff --git a/samples/Dataverse/src/App.tsx b/samples/Dataverse/src/App.tsx
index 28babd5..a02103e 100644
--- a/samples/Dataverse/src/App.tsx
+++ b/samples/Dataverse/src/App.tsx
@@ -2,8 +2,9 @@
  * Dataverse Demo App - Main Application Component
  *
  * This app demonstrates how to use Power Apps code apps with Dataverse:
- * - CRUD operations (Create, Read, Update, Delete) on Contact entities
+ * - CRUD operations (Create, Read, Update, Delete) on Contact and Account entities
  * - Lookup fields (linking Contacts to Accounts)
+ * - File upload (AccountForm attachment sub-form)
  * - Error handling and best practices
  * - Component-based architecture
  *
@@ -14,12 +15,13 @@
  * 1. COMPONENTS (Presentation Layer):
  *    - Pure presentational components (UI only, no business logic)
  *    - Receive data via props, emit events via callbacks
- *    - Examples: Header, ContactList, ContactForm, ErrorMessage
+ *    - Examples: Header, ContactList, ContactForm, AccountList, AccountForm,
+ *                ErrorMessage
  *
  * 2. HOOKS (Business Logic Layer):
  *    - Custom hooks that manage state and orchestrate services
  *    - Handle error handling, loading states, and data transformations
- *    - Examples: useContacts, useAccounts, useLookupResolver
+ *    - Examples: useContacts, useAccounts, useAccountsCrud, useLookupResolver
  *
  * 3. SERVICES (Data Access Layer):
  *    - Auto-generated by PAC CLI from Dataverse metadata
@@ -38,35 +40,56 @@
  * - Clarity: Clear boundaries between presentation, logic, and data access
  */
 
+import { useState } from 'react';
 import {
   Header,
   ErrorMessage,
   ContactList,
   ContactForm,
+  AccountList,
+  AccountForm,
   Footer,
-} from "./components";
-import { useContacts, useAccounts } from "./hooks";
-import "./App.css";
+} from './components';
+import { useContacts, useAccounts, useAccountsCrud } from './hooks';
+import './App.css';
+
+type ActivePage = 'contacts' | 'accounts';
 
 function App() {
+  const [activePage, setActivePage] = useState<ActivePage>('contacts');
+
   // PATTERN: Custom hooks handle all the business logic and state management
   // The component stays simple and focused on rendering UI
   const {
-    contacts,           // Array of contact records
-    loading,            // Loading state for initial data fetch
-    error,              // Error message string (null if no error)
-    selectedContact,    // Currently selected contact for editing (null if none)
-    isCreating,         // Flag indicating if we're in "create new" mode
-    startCreate,        // Function to enter create mode
-    selectContact,      // Function to select a contact for editing
-    cancelForm,         // Function to cancel create/edit and return to list
-    handleFormSubmit,   // Function to handle form submission (routes to create or update)
-    deleteContact,      // Function to delete a contact
+    contacts,
+    loading: contactsLoading,
+    error: contactsError,
+    selectedContact,
+    isCreating: isCreatingContact,
+    startCreate: startCreateContact,
+    selectContact,
+    cancelForm: cancelContactForm,
+    handleFormSubmit: handleContactFormSubmit,
+    deleteContact,
   } = useContacts();
 
-  // Load accounts for the Managing Partner lookup dropdown
+  // Load accounts for the Managing Partner lookup dropdown in the Contact form
   const { accounts } = useAccounts();
 
+  // Full CRUD hook for the Accounts page
+  const {
+    accounts: accountsList,
+    loading: accountsLoading,
+    error: accountsError,
+    selectedAccount,
+    isCreating: isCreatingAccount,
+    startCreate: startCreateAccount,
+    selectAccount,
+    cancelForm: cancelAccountForm,
+    handleFormSubmit: handleAccountFormSubmit,
+    deleteAccount,
+  } = useAccountsCrud();
+
   return (
     <div className="app-container">
       {/* Header Section */}
@@ -75,32 +98,72 @@ function App() {
         description="Demonstrating CRUD operations with Power Apps Code Apps"
       />
 
-      {/* Error Display - Shows only when error exists */}
-      <ErrorMessage error={error} />
+      {/* Page Navigation Tabs */}
+      <nav className="page-tabs">
+        <button
+          className={`tab-btn ${activePage === 'contacts' ? 'active' : ''}`}
+          onClick={() => setActivePage('contacts')}
+        >
+          Contacts
+        </button>
+        <button
+          className={`tab-btn ${activePage === 'accounts' ? 'active' : ''}`}
+          onClick={() => setActivePage('accounts')}
+        >
+          Accounts
+        </button>
+      </nav>
 
-      {/* Main Content Grid - Two column layout (list + form) */}
-      <div className="content-grid">
-        {/* Left Column: Contacts List */}
-        <ContactList
-          contacts={contacts}
-          selectedContact={selectedContact}
-          loading={loading}
-          onSelect={selectContact}
-          onCreateNew={startCreate}
-        />
+      {/* Contacts Page */}
+      {activePage === 'contacts' && (
+        <>
+          <ErrorMessage error={contactsError} />
+          <div className="content-grid">
+            <ContactList
+              contacts={contacts}
+              selectedContact={selectedContact}
+              loading={contactsLoading}
+              onSelect={selectContact}
+              onCreateNew={startCreateContact}
+            />
+            {(isCreatingContact || selectedContact) && (
+              <ContactForm
+                selectedContact={selectedContact}
+                isCreating={isCreatingContact}
+                accounts={accounts}
+                onSubmit={handleContactFormSubmit}
+                onCancel={cancelContactForm}
+                onDelete={deleteContact}
+              />
+            )}
+          </div>
+        </>
+      )}
 
-        {/* Right Column: Contact Form (shown only when creating or editing) */}
-        {(isCreating || selectedContact) && (
-          <ContactForm
-            selectedContact={selectedContact}
-            isCreating={isCreating}
-            accounts={accounts}
-            onSubmit={handleFormSubmit}
-            onCancel={cancelForm}
-            onDelete={deleteContact}
-          />
-        )}
-      </div>
+      {/* Accounts Page */}
+      {activePage === 'accounts' && (
+        <>
+          <ErrorMessage error={accountsError} />
+          <div className="content-grid">
+            <AccountList
+              accounts={accountsList}
+              selectedAccount={selectedAccount}
+              loading={accountsLoading}
+              onSelect={selectAccount}
+              onCreateNew={startCreateAccount}
+            />
+            {(isCreatingAccount || selectedAccount) && (
+              <AccountForm
+                selectedAccount={selectedAccount}
+                isCreating={isCreatingAccount}
+                onSubmit={handleAccountFormSubmit}
+                onCancel={cancelAccountForm}
+                onDelete={deleteAccount}
+              />
+            )}
+          </div>
+        </>
+      )}
 
       {/* Footer Section */}
       <Footer />
diff --git a/samples/Dataverse/src/components/AccountCard.tsx b/samples/Dataverse/src/components/AccountCard.tsx
new file mode 100644
index 0000000..0eca492
--- /dev/null
+++ b/samples/Dataverse/src/components/AccountCard.tsx
@@ -0,0 +1,42 @@
+/**
+ * AccountCard Component
+ * Displays a single account in a card format with actions
+ *
+ * PATTERN: Pure Presentational Component
+ * - Minimal component focused on a single UI concern
+ * - No state or business logic
+ * - Delegates all actions via callback props
+ */
+
+import type { Accounts } from '../generated/models/AccountsModel';
+
+interface AccountCardProps {
+  account: Accounts;
+  isSelected: boolean;
+  onSelect: (account: Accounts) => void;
+}
+
+export function AccountCard({ account, isSelected, onSelect }: AccountCardProps) {
+  return (
+    <div
+      className={`contact-card ${isSelected ? 'selected' : ''}`}
+      onClick={() => onSelect(account)}
+    >
+      <h3>{account.name}</h3>
+
+      {account.emailaddress1 && (
+        <p className="email">{account.emailaddress1}</p>
+      )}
+
+      {account.telephone1 && !account.emailaddress1 && (
+        <p className="email">{account.telephone1}</p>
+      )}
+
+      {(account.address1_city || account.address1_country) && (
+        <p className="email">
+          {[account.address1_city, account.address1_country].filter(Boolean).join(', ')}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/samples/Dataverse/src/components/AccountForm.tsx b/samples/Dataverse/src/components/AccountForm.tsx
new file mode 100644
index 0000000..fb1a11c
--- /dev/null
+++ b/samples/Dataverse/src/components/AccountForm.tsx
@@ -0,0 +1,347 @@
+/**
+ * AccountForm Component
+ * Form for creating or editing an account
+ *
+ * PATTERN DEMONSTRATION:
+ * - Uses controlled components (React pattern for form state)
+ * - Tracks unsaved changes to alert users before navigating away
+ * - Edit mode includes an Attachment sub-form that calls AccountsService.upload
+ *
+ * COMPONENT ARCHITECTURE:
+ * - Pure presentational component for the main form fields
+ * - Attachment sub-form calls AccountsService.upload directly (upload is a one-off
+ *   action that belongs at the component boundary, not in the CRUD hook)
+ * - Toast notification surfaces the IOperationResult success/error for 5 seconds
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import type { Accounts } from '../generated/models/AccountsModel';
+import { AccountsService } from '../generated/services/AccountsService';
+
+export interface AccountFormData {
+  name: string;
+  emailaddress1: string;
+  telephone1: string;
+  websiteurl: string;
+  description: string;
+  address1_city: string;
+  address1_country: string;
+}
+
+interface AccountFormProps {
+  selectedAccount: Accounts | null;
+  isCreating: boolean;
+  onSubmit: (formData: AccountFormData) => Promise<boolean>;
+  onCancel: () => void;
+  onDelete: (accountId: string) => void;
+}
+
+interface Toast {
+  message: string;
+  type: 'success' | 'error';
+}
+
+export function AccountForm({
+  selectedAccount,
+  isCreating,
+  onSubmit,
+  onCancel,
+  onDelete,
+}: AccountFormProps) {
+  // --- Main form state ---
+  const [formData, setFormData] = useState<AccountFormData>({
+    name: '',
+    emailaddress1: '',
+    telephone1: '',
+    websiteurl: '',
+    description: '',
+    address1_city: '',
+    address1_country: '',
+  });
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  // --- Attachment sub-form state ---
+  const [attachmentFile, setAttachmentFile] = useState<File | null>(null);
+  const [columnName, setColumnName] = useState('');
+  const [fileDisplayName, setFileDisplayName] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+
+  // --- Toast state ---
+  const [toast, setToast] = useState<Toast | null>(null);
+  const toastTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Populate form when a different account is selected
+  useEffect(() => {
+    if (selectedAccount) {
+      setFormData({
+        name: selectedAccount.name || '',
+        emailaddress1: selectedAccount.emailaddress1 || '',
+        telephone1: selectedAccount.telephone1 || '',
+        websiteurl: selectedAccount.websiteurl || '',
+        description: selectedAccount.description || '',
+        address1_city: selectedAccount.address1_city || '',
+        address1_country: selectedAccount.address1_country || '',
+      });
+      setHasUnsavedChanges(false);
+    } else if (isCreating) {
+      setFormData({
+        name: '',
+        emailaddress1: '',
+        telephone1: '',
+        websiteurl: '',
+        description: '',
+        address1_city: '',
+        address1_country: '',
+      });
+      setHasUnsavedChanges(false);
+    }
+    // Reset attachment state when account changes
+    setAttachmentFile(null);
+    setColumnName('');
+    setFileDisplayName('');
+  }, [selectedAccount, isCreating]);
+
+  // Clear toast timer on unmount
+  useEffect(() => {
+    return () => {
+      if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+    };
+  }, []);
+
+  const showToast = (message: string, type: 'success' | 'error') => {
+    if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+    setToast({ message, type });
+    toastTimerRef.current = setTimeout(() => setToast(null), 5000);
+  };
+
+  // --- Main form handlers ---
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const success = await onSubmit(formData);
+    if (success) setHasUnsavedChanges(false);
+  };
+
+  const handleChange = (field: keyof AccountFormData, value: string) => {
+    setFormData({ ...formData, [field]: value });
+    setHasUnsavedChanges(true);
+  };
+
+  const handleCancel = () => {
+    setHasUnsavedChanges(false);
+    onCancel();
+  };
+
+  // --- Attachment handlers ---
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] ?? null;
+    setAttachmentFile(file);
+    // Reset dependent fields when file changes
+    setColumnName('');
+    setFileDisplayName('');
+  };
+
+  const handleUpload = async () => {
+    if (!attachmentFile || !selectedAccount?.accountid || !columnName.trim()) return;
+
+    setIsUploading(true);
+    try {
+      const result = await AccountsService.upload(
+        selectedAccount.accountid,
+        columnName.trim(),
+        attachmentFile,
+        fileDisplayName.trim() || attachmentFile.name,
+      );
+
+      if (result.success) {
+        showToast(`File "${attachmentFile.name}" uploaded successfully.`, 'success');
+        // Reset attachment fields on success
+        setAttachmentFile(null);
+        setColumnName('');
+        setFileDisplayName('');
+        // Reset the file input element
+        const fileInput = document.getElementById('attachment-file') as HTMLInputElement;
+        if (fileInput) fileInput.value = '';
+      } else {
+        const errorMsg = result.error?.message ?? 'Upload failed.';
+        showToast(`Upload failed: ${errorMsg}`, 'error');
+      }
+    } catch (err) {
+      showToast(`Upload error: ${(err as Error).message}`, 'error');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <section className="contact-form">
+      {/* Toast notification */}
+      {toast && (
+        <div className={`upload-toast upload-toast--${toast.type}`}>
+          {toast.message}
+        </div>
+      )}
+
+      <div className="section-header">
+        <div className="header-with-status">
+          <h2>{isCreating ? 'Create New Account' : 'Edit Account'}</h2>
+          {hasUnsavedChanges && (
+            <span className="unsaved-label">Unsaved changes</span>
+          )}
+        </div>
+        <button onClick={handleCancel} className="btn-secondary">
+          Cancel
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="name">Account Name *</label>
+          <input
+            type="text"
+            id="name"
+            value={formData.name}
+            onChange={(e) => handleChange('name', e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="emailaddress1">Email</label>
+          <input
+            type="email"
+            id="emailaddress1"
+            value={formData.emailaddress1}
+            onChange={(e) => handleChange('emailaddress1', e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="telephone1">Phone</label>
+          <input
+            type="tel"
+            id="telephone1"
+            value={formData.telephone1}
+            onChange={(e) => handleChange('telephone1', e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="websiteurl">Website</label>
+          <input
+            type="url"
+            id="websiteurl"
+            value={formData.websiteurl}
+            onChange={(e) => handleChange('websiteurl', e.target.value)}
+            placeholder="https://"
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="address1_city">City</label>
+          <input
+            type="text"
+            id="address1_city"
+            value={formData.address1_city}
+            onChange={(e) => handleChange('address1_city', e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="address1_country">Country</label>
+          <input
+            type="text"
+            id="address1_country"
+            value={formData.address1_country}
+            onChange={(e) => handleChange('address1_country', e.target.value)}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="description">Description</label>
+          <textarea
+            id="description"
+            value={formData.description}
+            onChange={(e) => handleChange('description', e.target.value)}
+            rows={3}
+          />
+        </div>
+
+        <div className="form-actions">
+          <button type="submit" className="btn-primary">
+            {isCreating ? 'Create Account' : 'Update Account'}
+          </button>
+          <button type="button" onClick={handleCancel} className="btn-secondary">
+            Cancel
+          </button>
+          {!isCreating && selectedAccount && (
+            <button
+              type="button"
+              onClick={() => onDelete(selectedAccount.accountid!)}
+              className="btn-danger"
+            >
+              Delete Account
+            </button>
+          )}
+        </div>
+      </form>
+
+      {/* Attachment sub-form — Edit mode only */}
+      {!isCreating && selectedAccount && (
+        <div className="attachment-subform">
+          <h3>Attachments</h3>
+
+          <div className="form-group">
+            <label htmlFor="attachment-file">File</label>
+            <input
+              type="file"
+              id="attachment-file"
+              onChange={handleFileChange}
+            />
+          </div>
+
+          {attachmentFile && (
+            <>
+              <div className="form-group">
+                <label htmlFor="attachment-column">
+                  Column Name <span className="required-mark">*</span>
+                </label>
+                <input
+                  type="text"
+                  id="attachment-column"
+                  value={columnName}
+                  onChange={(e) => setColumnName(e.target.value)}
+                  placeholder="e.g. cr3d5_filecol"
+                  required
+                />
+                <small>The schema name of the file/image column to upload to</small>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="attachment-displayname">Display Name</label>
+                <input
+                  type="text"
+                  id="attachment-displayname"
+                  value={fileDisplayName}
+                  onChange={(e) => setFileDisplayName(e.target.value)}
+                  placeholder={attachmentFile.name}
+                />
+                <small>Defaults to the file name if left blank</small>
+              </div>
+
+              <div className="attachment-actions">
+                <button
+                  type="button"
+                  className="btn-primary"
+                  onClick={handleUpload}
+                  disabled={isUploading || !columnName.trim()}
+                >
+                  {isUploading ? 'Uploading...' : 'Upload'}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/samples/Dataverse/src/components/AccountList.tsx b/samples/Dataverse/src/components/AccountList.tsx
new file mode 100644
index 0000000..f767cdc
--- /dev/null
+++ b/samples/Dataverse/src/components/AccountList.tsx
@@ -0,0 +1,56 @@
+/**
+ * AccountList Component
+ * Displays a grid of accounts with option to create new ones
+ *
+ * PATTERN: Pure Presentational Component
+ * - No business logic or service calls
+ * - All data received via props
+ * - All actions delegated via callback props
+ */
+
+import type { Accounts } from '../generated/models/AccountsModel';
+import { AccountCard } from './AccountCard';
+
+interface AccountListProps {
+  accounts: Accounts[];
+  selectedAccount: Accounts | null;
+  loading: boolean;
+  onSelect: (account: Accounts) => void;
+  onCreateNew: () => void;
+}
+
+export function AccountList({
+  accounts,
+  selectedAccount,
+  loading,
+  onSelect,
+  onCreateNew,
+}: AccountListProps) {
+  return (
+    <section className="contacts-list">
+      <div className="section-header">
+        <h2>Accounts ({accounts.length})</h2>
+        <button onClick={onCreateNew} className="btn-primary">
+          + New Account
+        </button>
+      </div>
+
+      {loading ? (
+        <p>Loading accounts...</p>
+      ) : accounts.length === 0 ? (
+        <p>No accounts found. Create one to get started!</p>
+      ) : (
+        <div className="contacts-grid">
+          {accounts.map((account) => (
+            <AccountCard
+              key={account.accountid}
+              account={account}
+              isSelected={selectedAccount?.accountid === account.accountid}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/samples/Dataverse/src/components/index.ts b/samples/Dataverse/src/components/index.ts
index 63113ae..933692f 100644
--- a/samples/Dataverse/src/components/index.ts
+++ b/samples/Dataverse/src/components/index.ts
@@ -8,6 +8,10 @@ export { ErrorMessage } from './ErrorMessage';
 export { ContactCard } from './ContactCard';
 export { ContactList } from './ContactList';
 export { ContactForm } from './ContactForm';
+export { AccountCard } from './AccountCard';
+export { AccountList } from './AccountList';
+export { AccountForm } from './AccountForm';
 export { Footer } from './Footer';
 
 export type { ContactFormData } from './ContactForm';
+export type { AccountFormData } from './AccountForm';
diff --git a/samples/Dataverse/src/hooks/index.ts b/samples/Dataverse/src/hooks/index.ts
index 8d7bb9f..da15dde 100644
--- a/samples/Dataverse/src/hooks/index.ts
+++ b/samples/Dataverse/src/hooks/index.ts
@@ -5,5 +5,6 @@
 
 export { useContacts } from './useContacts';
 export { useAccounts } from './useAccounts';
+export { useAccountsCrud } from './useAccountsCrud';
 export { useLookupResolver } from './useLookupResolver';
 export type { ResolvedLookups } from './useLookupResolver';
diff --git a/samples/Dataverse/src/hooks/useAccountsCrud.ts b/samples/Dataverse/src/hooks/useAccountsCrud.ts
new file mode 100644
index 0000000..ca7f6c1
--- /dev/null
+++ b/samples/Dataverse/src/hooks/useAccountsCrud.ts
@@ -0,0 +1,240 @@
+/**
+ * useAccountsCrud Hook
+ * Custom hook for managing account CRUD operations
+ *
+ * This hook encapsulates all the business logic for:
+ * - Loading accounts from Dataverse
+ * - Creating new accounts
+ * - Updating existing accounts
+ * - Deleting accounts
+ * - Error handling and loading states
+ *
+ * ARCHITECTURE PATTERN:
+ * This hook acts as the "controller" layer between UI components and services.
+ * It manages state, orchestrates service calls, and handles errors.
+ * Components remain pure and presentational by delegating all business logic here.
+ *
+ * NOTE: This hook provides full CRUD for the Accounts page.
+ * The separate `useAccounts` hook is a lightweight read-only hook used to
+ * populate lookup dropdowns (e.g. the Managing Partner field on contacts).
+ */
+
+import { useState, useEffect } from 'react';
+import { AccountsService } from '../generated/services/AccountsService';
+import type { Accounts } from '../generated/models/AccountsModel';
+import type { AccountFormData } from '../components/AccountForm';
+
+// Constants for query limits
+const MAX_ACCOUNTS_TO_LOAD = 50;
+const DEFAULT_SORT_ORDER = 'createdon desc';
+
+export function useAccountsCrud() {
+  const [accounts, setAccounts] = useState<Accounts[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedAccount, setSelectedAccount] = useState<Accounts | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+
+  /**
+   * Load all accounts from Dataverse on mount
+   */
+  useEffect(() => {
+    loadAccounts();
+  }, []);
+
+  /**
+   * READ: Fetch all accounts from Dataverse
+   *
+   * BEST PRACTICE: Always use 'select' to request only needed fields
+   * - Improves performance by reducing payload size
+   * - Makes code self-documenting (clear which fields are used)
+   */
+  const loadAccounts = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const result = await AccountsService.getAll({
+        select: [
+          'accountid',
+          'name',
+          'emailaddress1',
+          'telephone1',
+          'websiteurl',
+          'description',
+          'address1_city',
+          'address1_country',
+          'createdon',
+          'modifiedon',
+          '_createdby_value',
+        ],
+        orderBy: [DEFAULT_SORT_ORDER],
+        top: MAX_ACCOUNTS_TO_LOAD,
+      });
+
+      if (result.data) {
+        setAccounts(result.data);
+        if (result.data.length > 0 && !selectedAccount) {
+          setSelectedAccount(result.data[0]);
+        }
+      } else {
+        setError('Failed to load accounts');
+      }
+    } catch (err) {
+      setError(`Error loading accounts: ${(err as Error).message}`);
+      console.error('Error loading accounts:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * CREATE: Add a new account to Dataverse
+   */
+  const createAccount = async (formData: AccountFormData): Promise<boolean> => {
+    try {
+      setError(null);
+
+      if (!formData.name) {
+        setError('Account name is required');
+        return false;
+      }
+
+      const newAccount: any = {
+        name: formData.name,
+        emailaddress1: formData.emailaddress1 || undefined,
+        telephone1: formData.telephone1 || undefined,
+        websiteurl: formData.websiteurl || undefined,
+        description: formData.description || undefined,
+        address1_city: formData.address1_city || undefined,
+        address1_country: formData.address1_country || undefined,
+      };
+
+      const result = await AccountsService.create(newAccount);
+
+      if (result.data) {
+        setIsCreating(false);
+        setSelectedAccount(null);
+        await loadAccounts();
+        return true;
+      } else {
+        setError('Failed to create account');
+        return false;
+      }
+    } catch (err) {
+      setError(`Error creating account: ${(err as Error).message}`);
+      console.error('Error creating account:', err);
+      return false;
+    }
+  };
+
+  /**
+   * UPDATE: Modify an existing account
+   */
+  const updateAccount = async (formData: AccountFormData): Promise<boolean> => {
+    try {
+      if (!selectedAccount?.accountid) {
+        setError('No account selected');
+        return false;
+      }
+
+      setError(null);
+
+      const updates: any = {
+        name: formData.name,
+        emailaddress1: formData.emailaddress1 || undefined,
+        telephone1: formData.telephone1 || undefined,
+        websiteurl: formData.websiteurl || undefined,
+        description: formData.description || undefined,
+        address1_city: formData.address1_city || undefined,
+        address1_country: formData.address1_country || undefined,
+      };
+
+      const result = await AccountsService.update(selectedAccount.accountid, updates);
+
+      if (result.data) {
+        setSelectedAccount(null);
+        await loadAccounts();
+        return true;
+      } else {
+        setError('Failed to update account');
+        return false;
+      }
+    } catch (err) {
+      setError(`Error updating account: ${(err as Error).message}`);
+      console.error('Error updating account:', err);
+      return false;
+    }
+  };
+
+  /**
+   * DELETE: Remove an account from Dataverse
+   */
+  const deleteAccount = async (accountId: string): Promise<boolean> => {
+    try {
+      if (!confirm('Are you sure you want to delete this account?')) {
+        return false;
+      }
+
+      setError(null);
+
+      await AccountsService.delete(accountId);
+
+      if (selectedAccount?.accountid === accountId) {
+        setSelectedAccount(null);
+        setIsCreating(false);
+      }
+
+      await loadAccounts();
+      return true;
+    } catch (err) {
+      setError(`Error deleting account: ${(err as Error).message}`);
+      console.error('Error deleting account:', err);
+      return false;
+    }
+  };
+
+  const startCreate = () => {
+    setSelectedAccount(null);
+    setIsCreating(true);
+    setError(null);
+  };
+
+  const selectAccount = (account: Accounts) => {
+    setSelectedAccount(account);
+    setIsCreating(false);
+    setError(null);
+  };
+
+  const cancelForm = () => {
+    setSelectedAccount(null);
+    setIsCreating(false);
+    setError(null);
+  };
+
+  const handleFormSubmit = async (formData: AccountFormData): Promise<boolean> => {
+    if (isCreating) {
+      return await createAccount(formData);
+    } else {
+      return await updateAccount(formData);
+    }
+  };
+
+  return {
+    // State
+    accounts,
+    loading,
+    error,
+    selectedAccount,
+    isCreating,
+    // Actions
+    loadAccounts,
+    createAccount,
+    updateAccount,
+    deleteAccount,
+    startCreate,
+    selectAccount,
+    cancelForm,
+    handleFormSubmit,
+  };
+}

From 9b63d5dfa041a24b40f157041c6fcb25d91f4d02 Mon Sep 17 00:00:00 2001
From: madhumach <94madhu94@gmail.com>
Date: Thu, 5 Mar 2026 20:38:32 -0800
Subject: [PATCH 2/5] add new model and services

---
 .../src/generated/models/AccountsModel.ts     | 19 ++++++++-----------
 .../src/generated/services/AccountsService.ts | 14 ++++++++++++++
 .../src/generated/services/ContactsService.ts | 13 +++++++++++++
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/samples/Dataverse/src/generated/models/AccountsModel.ts b/samples/Dataverse/src/generated/models/AccountsModel.ts
index 52aa1c1..2f4d6a6 100644
--- a/samples/Dataverse/src/generated/models/AccountsModel.ts
+++ b/samples/Dataverse/src/generated/models/AccountsModel.ts
@@ -287,8 +287,7 @@ export interface AccountsBase {
   adx_modifiedbyipaddress?: string;
   adx_modifiedbyusername?: string;
   businesstypecode?: Accountsbusinesstypecode;
-  "crd1b_aimodel@odata.bind"?: string;
-  "crd1b_ContactPerson@odata.bind"?: string;
+  cr3d5_imagecol?: string;
   creditlimit?: string;
   creditonhold?: Accountscreditonhold;
   customersizecode?: Accountscustomersizecode;
@@ -373,11 +372,13 @@ export interface Accounts extends AccountsBase {
   aging90?: string;
   aging90_base?: string;
   businesstypecodename?: string;
-  crd1b_accountfileattachment?: string;
-  crd1b_accountfileattachment_name?: string;
-  crd1b_aimodelname?: string;
-  crd1b_contactpersonname?: string;
-  crd1b_contactpersonyominame?: string;
+  cr3d5_filecol?: string;
+  cr3d5_filecol_name?: string;
+  cr3d5_filecol2?: string;
+  cr3d5_filecol2_name?: string;
+  cr3d5_imagecol_timestamp?: string;
+  cr3d5_imagecol_url?: string;
+  cr3d5_imagecolid?: string;
   createdbyexternalpartyname?: string;
   createdbyexternalpartyyominame?: string;
   createdbyname?: string;
@@ -445,10 +446,6 @@ export interface Accounts extends AccountsBase {
   timespentbymeonemailandmeetings?: string;
   transactioncurrencyidname?: string;
   versionnumber?: string;
-  crd1b_aimodel?: object;
-  _crd1b_aimodel_value?: string;
-  crd1b_contactperson?: object;
-  _crd1b_contactperson_value?: string;
   createdby?: object;
   _createdby_value?: string;
   createdbyexternalparty?: object;
diff --git a/samples/Dataverse/src/generated/services/AccountsService.ts b/samples/Dataverse/src/generated/services/AccountsService.ts
index 316a689..a03e48a 100644
--- a/samples/Dataverse/src/generated/services/AccountsService.ts
+++ b/samples/Dataverse/src/generated/services/AccountsService.ts
@@ -69,4 +69,18 @@ export class AccountsService {
       },
     });
   }
+
+  public static async upload(id: string, columnName: string, file: File, fileDisplayName?: string): Promise<IOperationResult<void>> {
+    const arrayBuffer = await file.arrayBuffer();
+    const data = new Uint8Array(arrayBuffer);
+    const result = await AccountsService.client.uploadRecordAsync(
+      AccountsService.dataSourceName,
+      id.toString(),
+      columnName,
+      fileDisplayName || file.name,
+      data,
+    );
+    return result;
+  }
+
 }
diff --git a/samples/Dataverse/src/generated/services/ContactsService.ts b/samples/Dataverse/src/generated/services/ContactsService.ts
index 9451cf5..40ca900 100644
--- a/samples/Dataverse/src/generated/services/ContactsService.ts
+++ b/samples/Dataverse/src/generated/services/ContactsService.ts
@@ -69,4 +69,17 @@ export class ContactsService {
       },
     });
   }
+
+  public static async upload(id: string, columnName: string, file: File, fileDisplayName?: string): Promise<IOperationResult<void>> {
+    const arrayBuffer = await file.arrayBuffer();
+    const data = new Uint8Array(arrayBuffer);
+    const result = await ContactsService.client.uploadRecordAsync(
+      ContactsService.dataSourceName,
+      id.toString(),
+      columnName,
+      fileDisplayName || file.name,
+      data,
+    );
+    return result;
+  }
 }

From 55363345ee7ff00f1c736d8c268ca18236d00595 Mon Sep 17 00:00:00 2001
From: madhumach <94madhu94@gmail.com>
Date: Fri, 6 Mar 2026 13:02:11 -0800
Subject: [PATCH 3/5] add display of current uploaded file name

---
 samples/Dataverse/src/App.css                 | 29 +++++++++++++++++++
 .../Dataverse/src/components/AccountForm.tsx  | 19 ++++++++++--
 .../Dataverse/src/hooks/useAccountsCrud.ts    |  2 ++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/samples/Dataverse/src/App.css b/samples/Dataverse/src/App.css
index 420ccd2..4057c43 100644
--- a/samples/Dataverse/src/App.css
+++ b/samples/Dataverse/src/App.css
@@ -522,6 +522,35 @@ footer code {
   margin-top: 8px;
 }
 
+.file-current {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: rgba(197, 180, 227, 0.15);
+  border: 1px solid rgba(197, 180, 227, 0.5);
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
+.file-current-icon {
+  font-size: 1.1rem;
+  flex-shrink: 0;
+}
+
+.file-current-name {
+  color: #702573;
+  font-weight: 500;
+  word-break: break-all;
+}
+
+.file-empty {
+  margin: 0;
+  color: rgba(112, 37, 115, 0.5);
+  font-size: 0.88rem;
+  font-style: italic;
+}
+
 .required-mark {
   color: #c03bc4;
   margin-left: 2px;
diff --git a/samples/Dataverse/src/components/AccountForm.tsx b/samples/Dataverse/src/components/AccountForm.tsx
index fb1a11c..81c4c2a 100644
--- a/samples/Dataverse/src/components/AccountForm.tsx
+++ b/samples/Dataverse/src/components/AccountForm.tsx
@@ -135,8 +135,8 @@ export function AccountForm({
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0] ?? null;
     setAttachmentFile(file);
-    // Reset dependent fields when file changes
-    setColumnName('');
+    // Pre-fill column name with cr3d5_filecol; user can override if needed
+    setColumnName('cr3d5_filecol');
     setFileDisplayName('');
   };
 
@@ -290,8 +290,21 @@ export function AccountForm({
         <div className="attachment-subform">
           <h3>Attachments</h3>
 
+          {/* Current file stored in cr3d5_filecol */}
+          <div className="form-group">
+            <label>cr3d5_filecol (current value)</label>
+            {selectedAccount.cr3d5_filecol_name ? (
+              <div className="file-current">
+                <span className="file-current-icon">📄</span>
+                <span className="file-current-name">{selectedAccount.cr3d5_filecol_name}</span>
+              </div>
+            ) : (
+              <p className="file-empty">No file uploaded yet.</p>
+            )}
+          </div>
+
           <div className="form-group">
-            <label htmlFor="attachment-file">File</label>
+            <label htmlFor="attachment-file">Upload new file</label>
             <input
               type="file"
               id="attachment-file"
diff --git a/samples/Dataverse/src/hooks/useAccountsCrud.ts b/samples/Dataverse/src/hooks/useAccountsCrud.ts
index ca7f6c1..7742b34 100644
--- a/samples/Dataverse/src/hooks/useAccountsCrud.ts
+++ b/samples/Dataverse/src/hooks/useAccountsCrud.ts
@@ -67,6 +67,8 @@ export function useAccountsCrud() {
           'createdon',
           'modifiedon',
           '_createdby_value',
+          'cr3d5_filecol',
+          'cr3d5_filecol_name',
         ],
         orderBy: [DEFAULT_SORT_ORDER],
         top: MAX_ACCOUNTS_TO_LOAD,

From 5641f647379b39e6b0dd719b401af7449d90e91f Mon Sep 17 00:00:00 2001
From: madhumach <94madhu94@gmail.com>
Date: Mon, 16 Mar 2026 14:08:07 -0700
Subject: [PATCH 4/5] new test with code gen v2

---
 samples/Dataverse/src/App.tsx                 |   2 +
 .../Dataverse/src/components/AccountForm.tsx  |  27 ++--
 .../src/generated/models/AccountsModel.ts     | 150 +++++-------------
 .../src/generated/services/AccountsService.ts |   6 +-
 .../src/generated/services/ContactsService.ts |  13 --
 .../Dataverse/src/hooks/useAccountsCrud.ts    |  15 +-
 6 files changed, 77 insertions(+), 136 deletions(-)

diff --git a/samples/Dataverse/src/App.tsx b/samples/Dataverse/src/App.tsx
index a02103e..4ea3b1f 100644
--- a/samples/Dataverse/src/App.tsx
+++ b/samples/Dataverse/src/App.tsx
@@ -88,6 +88,7 @@ function App() {
     cancelForm: cancelAccountForm,
     handleFormSubmit: handleAccountFormSubmit,
     deleteAccount,
+    loadAccounts,
   } = useAccountsCrud();
 
   return (
@@ -159,6 +160,7 @@ function App() {
                 onSubmit={handleAccountFormSubmit}
                 onCancel={cancelAccountForm}
                 onDelete={deleteAccount}
+                onUploadSuccess={loadAccounts}
               />
             )}
           </div>
diff --git a/samples/Dataverse/src/components/AccountForm.tsx b/samples/Dataverse/src/components/AccountForm.tsx
index 81c4c2a..0304d7a 100644
--- a/samples/Dataverse/src/components/AccountForm.tsx
+++ b/samples/Dataverse/src/components/AccountForm.tsx
@@ -15,7 +15,7 @@
  */
 
 import { useState, useEffect, useRef } from 'react';
-import type { Accounts } from '../generated/models/AccountsModel';
+import type { Accounts, AccountsUploadColumnName } from '../generated/models/AccountsModel';
 import { AccountsService } from '../generated/services/AccountsService';
 
 export interface AccountFormData {
@@ -34,6 +34,7 @@ interface AccountFormProps {
   onSubmit: (formData: AccountFormData) => Promise<boolean>;
   onCancel: () => void;
   onDelete: (accountId: string) => void;
+  onUploadSuccess?: () => void;
 }
 
 interface Toast {
@@ -47,6 +48,7 @@ export function AccountForm({
   onSubmit,
   onCancel,
   onDelete,
+  onUploadSuccess,
 }: AccountFormProps) {
   // --- Main form state ---
   const [formData, setFormData] = useState<AccountFormData>({
@@ -62,7 +64,7 @@ export function AccountForm({
 
   // --- Attachment sub-form state ---
   const [attachmentFile, setAttachmentFile] = useState<File | null>(null);
-  const [columnName, setColumnName] = useState('');
+  const [columnName, setColumnName] = useState<AccountsUploadColumnName>('cr3d5_filecol');
   const [fileDisplayName, setFileDisplayName] = useState('');
   const [isUploading, setIsUploading] = useState(false);
 
@@ -97,7 +99,7 @@ export function AccountForm({
     }
     // Reset attachment state when account changes
     setAttachmentFile(null);
-    setColumnName('');
+    setColumnName('cr3d5_filecol');
     setFileDisplayName('');
   }, [selectedAccount, isCreating]);
 
@@ -147,16 +149,17 @@ export function AccountForm({
     try {
       const result = await AccountsService.upload(
         selectedAccount.accountid,
-        columnName.trim(),
+        columnName,
         attachmentFile,
         fileDisplayName.trim() || attachmentFile.name,
       );
 
       if (result.success) {
         showToast(`File "${attachmentFile.name}" uploaded successfully.`, 'success');
+        onUploadSuccess?.();
         // Reset attachment fields on success
         setAttachmentFile(null);
-        setColumnName('');
+        setColumnName('cr3d5_filecol');
         setFileDisplayName('');
         // Reset the file input element
         const fileInput = document.getElementById('attachment-file') as HTMLInputElement;
@@ -318,14 +321,16 @@ export function AccountForm({
                 <label htmlFor="attachment-column">
                   Column Name <span className="required-mark">*</span>
                 </label>
-                <input
-                  type="text"
+                <select
                   id="attachment-column"
                   value={columnName}
-                  onChange={(e) => setColumnName(e.target.value)}
-                  placeholder="e.g. cr3d5_filecol"
-                  required
-                />
+                  onChange={(e) => setColumnName(e.target.value as AccountsUploadColumnName)}
+                >
+                  <option value="cr3d5_filecol">cr3d5_filecol</option>
+                  <option value="cr3d5_filecol2">cr3d5_filecol2</option>
+                  <option value="cr3d5_imagecol">cr3d5_imagecol</option>
+                  <option value="entityimage">entityimage</option>
+                </select>
                 <small>The schema name of the file/image column to upload to</small>
               </div>
 
diff --git a/samples/Dataverse/src/generated/models/AccountsModel.ts b/samples/Dataverse/src/generated/models/AccountsModel.ts
index 2f4d6a6..1d428f6 100644
--- a/samples/Dataverse/src/generated/models/AccountsModel.ts
+++ b/samples/Dataverse/src/generated/models/AccountsModel.ts
@@ -53,11 +53,6 @@ export const Accountsbusinesstypecode = {
   1: 'DefaultValue'
 } as const;
 export type Accountsbusinesstypecode = keyof typeof Accountsbusinesstypecode;
-export const Accountscreditonhold = {
-  0: 'No',
-  1: 'Yes'
-} as const;
-export type Accountscreditonhold = keyof typeof Accountscreditonhold;
 export const Accountscustomersizecode = {
   1: 'DefaultValue'
 } as const;
@@ -77,46 +72,6 @@ export const Accountscustomertypecode = {
   12: 'Other'
 } as const;
 export type Accountscustomertypecode = keyof typeof Accountscustomertypecode;
-export const Accountsdonotbulkemail = {
-  0: 'Allow',
-  1: 'DoNotAllow'
-} as const;
-export type Accountsdonotbulkemail = keyof typeof Accountsdonotbulkemail;
-export const Accountsdonotbulkpostalmail = {
-  0: 'No',
-  1: 'Yes'
-} as const;
-export type Accountsdonotbulkpostalmail = keyof typeof Accountsdonotbulkpostalmail;
-export const Accountsdonotemail = {
-  0: 'Allow',
-  1: 'DoNotAllow'
-} as const;
-export type Accountsdonotemail = keyof typeof Accountsdonotemail;
-export const Accountsdonotfax = {
-  0: 'Allow',
-  1: 'DoNotAllow'
-} as const;
-export type Accountsdonotfax = keyof typeof Accountsdonotfax;
-export const Accountsdonotphone = {
-  0: 'Allow',
-  1: 'DoNotAllow'
-} as const;
-export type Accountsdonotphone = keyof typeof Accountsdonotphone;
-export const Accountsdonotpostalmail = {
-  0: 'Allow',
-  1: 'DoNotAllow'
-} as const;
-export type Accountsdonotpostalmail = keyof typeof Accountsdonotpostalmail;
-export const Accountsdonotsendmm = {
-  0: 'Send',
-  1: 'DoNotSend'
-} as const;
-export type Accountsdonotsendmm = keyof typeof Accountsdonotsendmm;
-export const Accountsfollowemail = {
-  0: 'DoNotAllow',
-  1: 'Allow'
-} as const;
-export type Accountsfollowemail = keyof typeof Accountsfollowemail;
 export const Accountsindustrycode = {
   1: 'Accounting',
   2: 'AgricultureandNon_petrolNaturalResourceExtraction',
@@ -153,21 +108,6 @@ export const Accountsindustrycode = {
   33: 'Wholesale'
 } as const;
 export type Accountsindustrycode = keyof typeof Accountsindustrycode;
-export const Accountsisprivate = {
-  0: 'No',
-  1: 'Yes'
-} as const;
-export type Accountsisprivate = keyof typeof Accountsisprivate;
-export const Accountsmarketingonly = {
-  0: 'No',
-  1: 'Yes'
-} as const;
-export type Accountsmarketingonly = keyof typeof Accountsmarketingonly;
-export const Accountsmerged = {
-  0: 'No',
-  1: 'Yes'
-} as const;
-export type Accountsmerged = keyof typeof Accountsmerged;
 export const Accountsownershipcode = {
   1: 'Public',
   2: 'Private',
@@ -175,11 +115,6 @@ export const Accountsownershipcode = {
   4: 'Other'
 } as const;
 export type Accountsownershipcode = keyof typeof Accountsownershipcode;
-export const Accountsparticipatesinworkflow = {
-  0: 'No',
-  1: 'Yes'
-} as const;
-export type Accountsparticipatesinworkflow = keyof typeof Accountsparticipatesinworkflow;
 export const Accountspaymenttermscode = {
   1: 'Net30',
   2: '_2_10_Net30',
@@ -243,11 +178,11 @@ export interface AccountsBase {
   address1_county?: string;
   address1_fax?: string;
   address1_freighttermscode?: Accountsaddress1_freighttermscode;
-  address1_latitude?: string;
+  address1_latitude?: number;
   address1_line1?: string;
   address1_line2?: string;
   address1_line3?: string;
-  address1_longitude?: string;
+  address1_longitude?: number;
   address1_name?: string;
   address1_postalcode?: string;
   address1_postofficebox?: string;
@@ -258,7 +193,7 @@ export interface AccountsBase {
   address1_telephone2?: string;
   address1_telephone3?: string;
   address1_upszone?: string;
-  address1_utcoffset?: string;
+  address1_utcoffset?: number;
   address2_addressid?: string;
   address2_addresstypecode?: Accountsaddress2_addresstypecode;
   address2_city?: string;
@@ -266,11 +201,11 @@ export interface AccountsBase {
   address2_county?: string;
   address2_fax?: string;
   address2_freighttermscode?: Accountsaddress2_freighttermscode;
-  address2_latitude?: string;
+  address2_latitude?: number;
   address2_line1?: string;
   address2_line2?: string;
   address2_line3?: string;
-  address2_longitude?: string;
+  address2_longitude?: number;
   address2_name?: string;
   address2_postalcode?: string;
   address2_postofficebox?: string;
@@ -281,47 +216,47 @@ export interface AccountsBase {
   address2_telephone2?: string;
   address2_telephone3?: string;
   address2_upszone?: string;
-  address2_utcoffset?: string;
+  address2_utcoffset?: number;
   adx_createdbyipaddress?: string;
   adx_createdbyusername?: string;
   adx_modifiedbyipaddress?: string;
   adx_modifiedbyusername?: string;
   businesstypecode?: Accountsbusinesstypecode;
   cr3d5_imagecol?: string;
-  creditlimit?: string;
-  creditonhold?: Accountscreditonhold;
+  creditlimit?: number;
+  creditonhold?: boolean;
   customersizecode?: Accountscustomersizecode;
   customertypecode?: Accountscustomertypecode;
   description?: string;
-  donotbulkemail?: Accountsdonotbulkemail;
-  donotbulkpostalmail?: Accountsdonotbulkpostalmail;
-  donotemail?: Accountsdonotemail;
-  donotfax?: Accountsdonotfax;
-  donotphone?: Accountsdonotphone;
-  donotpostalmail?: Accountsdonotpostalmail;
-  donotsendmm?: Accountsdonotsendmm;
+  donotbulkemail?: boolean;
+  donotbulkpostalmail?: boolean;
+  donotemail?: boolean;
+  donotfax?: boolean;
+  donotphone?: boolean;
+  donotpostalmail?: boolean;
+  donotsendmm?: boolean;
   emailaddress1?: string;
   emailaddress2?: string;
   emailaddress3?: string;
   entityimage?: string;
   fax?: string;
-  followemail?: Accountsfollowemail;
+  followemail?: boolean;
   ftpsiteurl?: string;
-  importsequencenumber?: string;
+  importsequencenumber?: number;
   industrycode?: Accountsindustrycode;
   lastonholdtime?: string;
   lastusedincampaign?: string;
-  marketcap?: string;
-  marketingonly?: Accountsmarketingonly;
+  marketcap?: number;
+  marketingonly?: boolean;
   "msa_managingpartnerid@odata.bind"?: string;
   name: string;
-  numberofemployees?: string;
+  numberofemployees?: number;
   overriddencreatedon?: string;
   ownerid: string;
   owneridtype: string;
   ownershipcode?: Accountsownershipcode;
   "ParentAccountId@odata.bind"?: string;
-  participatesinworkflow?: Accountsparticipatesinworkflow;
+  participatesinworkflow?: boolean;
   paymenttermscode?: Accountspaymenttermscode;
   preferredappointmentdaycode?: Accountspreferredappointmentdaycode;
   preferredappointmenttimecode?: Accountspreferredappointmenttimecode;
@@ -331,8 +266,8 @@ export interface AccountsBase {
   primarysatoriid?: string;
   primarytwitterid?: string;
   processid?: string;
-  revenue?: string;
-  sharesoutstanding?: string;
+  revenue?: number;
+  sharesoutstanding?: number;
   shippingmethodcode?: Accountsshippingmethodcode;
   sic?: string;
   "SLAId@odata.bind"?: string;
@@ -345,10 +280,10 @@ export interface AccountsBase {
   telephone3?: string;
   territorycode?: Accountsterritorycode;
   tickersymbol?: string;
-  timezoneruleversionnumber?: string;
+  timezoneruleversionnumber?: number;
   "TransactionCurrencyId@odata.bind"?: string;
   traversedpath?: string;
-  utcconversiontimezonecode?: string;
+  utcconversiontimezonecode?: number;
   websiteurl?: string;
   yominame?: string;
 }
@@ -365,18 +300,18 @@ export interface Accounts extends AccountsBase {
   address2_composite?: string;
   address2_freighttermscodename?: string;
   address2_shippingmethodcodename?: string;
-  aging30?: string;
-  aging30_base?: string;
-  aging60?: string;
-  aging60_base?: string;
-  aging90?: string;
-  aging90_base?: string;
+  aging30?: number;
+  aging30_base?: number;
+  aging60?: number;
+  aging60_base?: number;
+  aging90?: number;
+  aging90_base?: number;
   businesstypecodename?: string;
   cr3d5_filecol?: string;
   cr3d5_filecol_name?: string;
   cr3d5_filecol2?: string;
   cr3d5_filecol2_name?: string;
-  cr3d5_imagecol_timestamp?: string;
+  cr3d5_imagecol_timestamp?: number;
   cr3d5_imagecol_url?: string;
   cr3d5_imagecolid?: string;
   createdbyexternalpartyname?: string;
@@ -386,7 +321,7 @@ export interface Accounts extends AccountsBase {
   createdon?: string;
   createdonbehalfbyname?: string;
   createdonbehalfbyyominame?: string;
-  creditlimit_base?: string;
+  creditlimit_base?: number;
   creditonholdname?: string;
   customersizecodename?: string;
   customertypecodename?: string;
@@ -397,19 +332,19 @@ export interface Accounts extends AccountsBase {
   donotphonename?: string;
   donotpostalmailname?: string;
   donotsendmarketingmaterialname?: string;
-  entityimage_timestamp?: string;
+  entityimage_timestamp?: number;
   entityimage_url?: string;
   entityimageid?: string;
-  exchangerate?: string;
+  exchangerate?: number;
   followemailname?: string;
   industrycodename?: string;
-  isprivate?: Accountsisprivate;
+  isprivate?: boolean;
   isprivatename?: string;
-  marketcap_base?: string;
+  marketcap_base?: number;
   marketingonlyname?: string;
   masteraccountidname?: string;
   masteraccountidyominame?: string;
-  merged?: Accountsmerged;
+  merged?: boolean;
   mergedname?: string;
   modifiedbyexternalpartyname?: string;
   modifiedbyexternalpartyyominame?: string;
@@ -420,7 +355,7 @@ export interface Accounts extends AccountsBase {
   modifiedonbehalfbyyominame?: string;
   msa_managingpartneridname?: string;
   msa_managingpartneridyominame?: string;
-  onholdtime?: string;
+  onholdtime?: number;
   owneridname: string;
   owneridyominame: string;
   ownershipcodename?: string;
@@ -436,7 +371,7 @@ export interface Accounts extends AccountsBase {
   preferredsystemuseridyominame?: string;
   primarycontactidname?: string;
   primarycontactidyominame?: string;
-  revenue_base?: string;
+  revenue_base?: number;
   shippingmethodcodename?: string;
   slainvokedidname?: string;
   slaname?: string;
@@ -445,7 +380,7 @@ export interface Accounts extends AccountsBase {
   territorycodename?: string;
   timespentbymeonemailandmeetings?: string;
   transactioncurrencyidname?: string;
-  versionnumber?: string;
+  versionnumber?: number;
   createdby?: object;
   _createdby_value?: string;
   createdbyexternalparty?: object;
@@ -480,4 +415,5 @@ export interface Accounts extends AccountsBase {
   _slainvokedid_value?: string;
   transactioncurrencyid?: object;
   _transactioncurrencyid_value?: string;
-}
\ No newline at end of file
+}
+export type AccountsUploadColumnName = 'cr3d5_filecol' | 'cr3d5_filecol2' | 'cr3d5_imagecol' | 'entityimage';
diff --git a/samples/Dataverse/src/generated/services/AccountsService.ts b/samples/Dataverse/src/generated/services/AccountsService.ts
index a03e48a..b33a914 100644
--- a/samples/Dataverse/src/generated/services/AccountsService.ts
+++ b/samples/Dataverse/src/generated/services/AccountsService.ts
@@ -4,6 +4,7 @@
  */
 
 import type { AccountsBase, Accounts } from '../models/AccountsModel';
+import type { AccountsUploadColumnName } from '../models/AccountsModel';
 import type { GetEntityMetadataOptions, EntityMetadata } from '@microsoft/power-apps/data/metadata/dataverse';
 import type { IGetOptions, IGetAllOptions } from '../models/CommonModels';
 import type { IOperationResult } from '@microsoft/power-apps/data';
@@ -70,10 +71,10 @@ export class AccountsService {
     });
   }
 
-  public static async upload(id: string, columnName: string, file: File, fileDisplayName?: string): Promise<IOperationResult<void>> {
+  public static async upload(id: string, columnName: AccountsUploadColumnName, file: File, fileDisplayName?: string): Promise<IOperationResult<void>> {
     const arrayBuffer = await file.arrayBuffer();
     const data = new Uint8Array(arrayBuffer);
-    const result = await AccountsService.client.uploadRecordAsync(
+    const result = await AccountsService.client.uploadFileToRecord(
       AccountsService.dataSourceName,
       id.toString(),
       columnName,
@@ -82,5 +83,4 @@ export class AccountsService {
     );
     return result;
   }
-
 }
diff --git a/samples/Dataverse/src/generated/services/ContactsService.ts b/samples/Dataverse/src/generated/services/ContactsService.ts
index 40ca900..9451cf5 100644
--- a/samples/Dataverse/src/generated/services/ContactsService.ts
+++ b/samples/Dataverse/src/generated/services/ContactsService.ts
@@ -69,17 +69,4 @@ export class ContactsService {
       },
     });
   }
-
-  public static async upload(id: string, columnName: string, file: File, fileDisplayName?: string): Promise<IOperationResult<void>> {
-    const arrayBuffer = await file.arrayBuffer();
-    const data = new Uint8Array(arrayBuffer);
-    const result = await ContactsService.client.uploadRecordAsync(
-      ContactsService.dataSourceName,
-      id.toString(),
-      columnName,
-      fileDisplayName || file.name,
-      data,
-    );
-    return result;
-  }
 }
diff --git a/samples/Dataverse/src/hooks/useAccountsCrud.ts b/samples/Dataverse/src/hooks/useAccountsCrud.ts
index 7742b34..88f093b 100644
--- a/samples/Dataverse/src/hooks/useAccountsCrud.ts
+++ b/samples/Dataverse/src/hooks/useAccountsCrud.ts
@@ -19,7 +19,7 @@
  * populate lookup dropdowns (e.g. the Managing Partner field on contacts).
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { AccountsService } from '../generated/services/AccountsService';
 import type { Accounts } from '../generated/models/AccountsModel';
 import type { AccountFormData } from '../components/AccountForm';
@@ -33,8 +33,14 @@ export function useAccountsCrud() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedAccount, setSelectedAccount] = useState<Accounts | null>(null);
+  const selectedAccountRef = useRef<Accounts | null>(null);
   const [isCreating, setIsCreating] = useState(false);
 
+  // Keep ref in sync so loadAccounts always reads the current selectedAccount
+  useEffect(() => {
+    selectedAccountRef.current = selectedAccount;
+  }, [selectedAccount]);
+
   /**
    * Load all accounts from Dataverse on mount
    */
@@ -76,7 +82,12 @@ export function useAccountsCrud() {
 
       if (result.data) {
         setAccounts(result.data);
-        if (result.data.length > 0 && !selectedAccount) {
+        const currentId = selectedAccountRef.current?.accountid;
+        if (currentId) {
+          // Refresh the selected account so fields like cr3d5_filecol_name are up to date
+          const refreshed = result.data.find(a => a.accountid === currentId);
+          if (refreshed) setSelectedAccount(refreshed);
+        } else if (result.data.length > 0) {
           setSelectedAccount(result.data[0]);
         }
       } else {

From 6fee8ec18bdb8994ac6a836c7f57a4230234e02b Mon Sep 17 00:00:00 2001
From: madhumach <94madhu94@gmail.com>
Date: Fri, 20 Mar 2026 21:52:39 -0700
Subject: [PATCH 5/5] file images downloads feature for records

---
 samples/Dataverse/src/App.css                 |  42 ++++++
 .../Dataverse/src/components/AccountForm.tsx  | 124 ++++++++++++++++++
 samples/Dataverse/src/components/Footer.tsx   |   3 +
 .../Dataverse/src/hooks/useAccountsCrud.ts    |   2 +
 samples/Dataverse/vite.config.ts              |   5 +
 5 files changed, 176 insertions(+)

diff --git a/samples/Dataverse/src/App.css b/samples/Dataverse/src/App.css
index 4057c43..634b647 100644
--- a/samples/Dataverse/src/App.css
+++ b/samples/Dataverse/src/App.css
@@ -542,6 +542,48 @@ footer code {
   color: #702573;
   font-weight: 500;
   word-break: break-all;
+  flex: 1;
+}
+
+.file-action-btn {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: rgba(112, 37, 115, 0.6);
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0 2px;
+}
+
+.file-action-btn:hover:not(:disabled) {
+  color: #702573;
+}
+
+.file-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.file-clear-btn {
+  margin-left: auto;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: rgba(112, 37, 115, 0.6);
+  font-size: 1.2rem;
+  line-height: 1;
+  padding: 0 2px;
+}
+
+.file-clear-btn:hover:not(:disabled) {
+  color: #c0392b;
+}
+
+.file-clear-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .file-empty {
diff --git a/samples/Dataverse/src/components/AccountForm.tsx b/samples/Dataverse/src/components/AccountForm.tsx
index 0304d7a..e1e3254 100644
--- a/samples/Dataverse/src/components/AccountForm.tsx
+++ b/samples/Dataverse/src/components/AccountForm.tsx
@@ -67,6 +67,9 @@ export function AccountForm({
   const [columnName, setColumnName] = useState<AccountsUploadColumnName>('cr3d5_filecol');
   const [fileDisplayName, setFileDisplayName] = useState('');
   const [isUploading, setIsUploading] = useState(false);
+  const [isClearingFile, setIsClearingFile] = useState(false);
+  const [downloadingCol, setDownloadingCol] = useState<AccountsUploadColumnName | null>(null);
+  const [imageFullSize, setImageFullSize] = useState(false);
 
   // --- Toast state ---
   const [toast, setToast] = useState<Toast | null>(null);
@@ -142,6 +145,70 @@ export function AccountForm({
     setFileDisplayName('');
   };
 
+  const triggerBlobDownload = (data: Uint8Array, fileName: string) => {
+    const blob = new Blob([data as BlobPart], { type: 'application/octet-stream' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  };
+
+  const handleDownload = async (col: AccountsUploadColumnName, fallbackFileName: string) => {
+    if (!selectedAccount?.accountid) return;
+    setDownloadingCol(col);
+    try {
+      const result = await AccountsService.downloadFile(selectedAccount.accountid, col);
+      if (result.success && result.data) {
+        triggerBlobDownload(result.data, result.fileName ?? fallbackFileName);
+      } else {
+        showToast('Download failed.', 'error');
+      }
+    } catch (err) {
+      showToast(`Download error: ${(err as Error).message}`, 'error');
+    } finally {
+      setDownloadingCol(null);
+    }
+  };
+
+  const handleDownloadImage = async (fallbackFileName: string) => {
+    if (!selectedAccount?.accountid) return;
+    setDownloadingCol('cr3d5_imagecol');
+    try {
+      const result = await AccountsService.downloadImage(selectedAccount.accountid, 'cr3d5_imagecol', imageFullSize);
+      if (result.success && result.data) {
+        triggerBlobDownload(result.data, result.fileName ?? fallbackFileName);
+      } else {
+        showToast(`Image download failed: ${result.error?.message ?? 'unknown error'}`, 'error');
+      }
+    } catch (err) {
+      showToast(`Image download error: ${(err as Error).message}`, 'error');
+    } finally {
+      setDownloadingCol(null);
+    }
+  };
+
+  const handleClearFile = async (col: AccountsUploadColumnName) => {
+    if (!selectedAccount?.accountid) return;
+    setIsClearingFile(true);
+    try {
+      const result = await AccountsService.deleteFileOrImage(selectedAccount.accountid, col);
+      if (result.success) {
+        showToast('File removed successfully.', 'success');
+        onUploadSuccess?.();
+      } else {
+        showToast(`Failed to clear file: ${result.error?.message ?? 'unknown error'}`, 'error');
+      }
+    } catch (err) {
+      showToast(`Error clearing file: ${(err as Error).message}`, 'error');
+    } finally {
+      setIsClearingFile(false);
+    }
+  };
+
   const handleUpload = async () => {
     if (!attachmentFile || !selectedAccount?.accountid || !columnName.trim()) return;
 
@@ -300,12 +367,69 @@ export function AccountForm({
               <div className="file-current">
                 <span className="file-current-icon">📄</span>
                 <span className="file-current-name">{selectedAccount.cr3d5_filecol_name}</span>
+                <button
+                  type="button"
+                  className="file-action-btn"
+                  onClick={() => handleDownload('cr3d5_filecol', selectedAccount.cr3d5_filecol_name!)}
+                  disabled={downloadingCol === 'cr3d5_filecol'}
+                  title="Download file"
+                >
+                  {downloadingCol === 'cr3d5_filecol' ? '…' : '⬇'}
+                </button>
+                <button
+                  type="button"
+                  className="file-clear-btn"
+                  onClick={() => handleClearFile('cr3d5_filecol')}
+                  disabled={isClearingFile}
+                  title="Remove file"
+                >
+                  {isClearingFile ? '…' : '×'}
+                </button>
               </div>
             ) : (
               <p className="file-empty">No file uploaded yet.</p>
             )}
           </div>
 
+          {/* Current image stored in cr3d5_imagecol */}
+          <div className="form-group">
+            <label>cr3d5_imagecol (current value)</label>
+            {selectedAccount.cr3d5_imagecol_url ? (
+              <div className="file-current">
+                <span className="file-current-name">Stored image</span>
+                <button
+                  type="button"
+                  className="file-action-btn"
+                  onClick={() => setImageFullSize(f => !f)}
+                  title={imageFullSize ? 'Switch to thumbnail' : 'Switch to full size'}
+                  style={{ fontSize: '0.7rem', padding: '2px 6px' }}
+                >
+                  {imageFullSize ? 'Full' : 'Thumb'}
+                </button>
+                <button
+                  type="button"
+                  className="file-action-btn"
+                  onClick={() => handleDownloadImage(selectedAccount.name || 'image')}
+                  disabled={downloadingCol === 'cr3d5_imagecol'}
+                  title="Download image"
+                >
+                  {downloadingCol === 'cr3d5_imagecol' ? '…' : '⬇'}
+                </button>
+                <button
+                  type="button"
+                  className="file-clear-btn"
+                  onClick={() => handleClearFile('cr3d5_imagecol')}
+                  disabled={isClearingFile}
+                  title="Remove image"
+                >
+                  {isClearingFile ? '…' : '×'}
+                </button>
+              </div>
+            ) : (
+              <p className="file-empty">No image uploaded yet.</p>
+            )}
+          </div>
+
           <div className="form-group">
             <label htmlFor="attachment-file">Upload new file</label>
             <input
diff --git a/samples/Dataverse/src/components/Footer.tsx b/samples/Dataverse/src/components/Footer.tsx
index efc444b..60cb597 100644
--- a/samples/Dataverse/src/components/Footer.tsx
+++ b/samples/Dataverse/src/components/Footer.tsx
@@ -8,6 +8,8 @@
  * - Educates developers about the service layer pattern
  */
 
+declare const __APP_VERSION__: string;
+
 export function Footer() {
   return (
     <footer>
@@ -16,6 +18,7 @@ export function Footer() {
         All operations use the <code>ContactsService</code> and <code>AccountsService</code> generated files.
         Services handle all Dataverse communication, keeping components pure and testable.
       </p>
+      <p style={{ fontSize: '0.75rem', opacity: 0.6 }}>v{__APP_VERSION__}</p>
     </footer>
   );
 }
diff --git a/samples/Dataverse/src/hooks/useAccountsCrud.ts b/samples/Dataverse/src/hooks/useAccountsCrud.ts
index 88f093b..6446c1b 100644
--- a/samples/Dataverse/src/hooks/useAccountsCrud.ts
+++ b/samples/Dataverse/src/hooks/useAccountsCrud.ts
@@ -75,6 +75,8 @@ export function useAccountsCrud() {
           '_createdby_value',
           'cr3d5_filecol',
           'cr3d5_filecol_name',
+          'cr3d5_imagecol',
+          'cr3d5_imagecol_url',
         ],
         orderBy: [DEFAULT_SORT_ORDER],
         top: MAX_ACCOUNTS_TO_LOAD,
diff --git a/samples/Dataverse/vite.config.ts b/samples/Dataverse/vite.config.ts
index b8d6f98..a92cb22 100644
--- a/samples/Dataverse/vite.config.ts
+++ b/samples/Dataverse/vite.config.ts
@@ -2,6 +2,8 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import * as path from "path";
 import { powerApps } from "./plugins/powerApps";
+import { readFileSync } from "fs";
+const { version } = JSON.parse(readFileSync("./package.json", "utf-8"));
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -12,4 +14,7 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(version),
+  },
 });