refactor(UI): 🏗️ Ui changes and API changes

web/src/pages/AccountsPage.tsx

@@ -21,7 +21,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { IconEdit, IconTrash, IconPlus, IconAlertCircle, IconBrandWhatsapp } from '@tabler/icons-react';
-import { apiClient } from '../lib/api';
+import { listRecords, createRecord, updateRecord, deleteRecord } from '../lib/query';
 import type { WhatsAppAccount } from '../types';
 
 export default function AccountsPage() {
@@ -31,6 +31,7 @@ export default function AccountsPage() {
   const [opened, { open, close }] = useDisclosure(false);
   const [editingAccount, setEditingAccount] = useState<WhatsAppAccount | null>(null);
   const [formData, setFormData] = useState({
+    account_id: '',
     phone_number: '',
     display_name: '',
     account_type: 'whatsmeow' as 'whatsmeow' | 'business-api',
@@ -45,7 +46,7 @@ export default function AccountsPage() {
   const loadAccounts = async () => {
     try {
       setLoading(true);
-      const data = await apiClient.getAccounts();
+      const data = await listRecords<WhatsAppAccount>('whatsapp_accounts');
       setAccounts(data || []);
       setError(null);
     } catch (err) {
@@ -59,6 +60,7 @@ export default function AccountsPage() {
   const handleCreate = () => {
     setEditingAccount(null);
     setFormData({
+      account_id: '',
       phone_number: '',
       display_name: '',
       account_type: 'whatsmeow',
@@ -71,6 +73,7 @@ export default function AccountsPage() {
   const handleEdit = (account: WhatsAppAccount) => {
     setEditingAccount(account);
     setFormData({
+      account_id: account.account_id || '',
       phone_number: account.phone_number,
       display_name: account.display_name || '',
       account_type: account.account_type,
@@ -85,7 +88,7 @@ export default function AccountsPage() {
       return;
     }
     try {
-      await apiClient.deleteAccount(id);
+      await deleteRecord('whatsapp_accounts', id);
       notifications.show({
         title: 'Success',
         message: 'Account deleted successfully',
@@ -121,14 +124,14 @@ export default function AccountsPage() {
 
     try {
       if (editingAccount) {
-        await apiClient.updateAccount(editingAccount.id, formData);
+        await updateRecord('whatsapp_accounts', editingAccount.id, formData);
         notifications.show({
           title: 'Success',
           message: 'Account updated successfully',
           color: 'green',
         });
       } else {
-        await apiClient.createAccount(formData);
+        await createRecord('whatsapp_accounts', formData);
         notifications.show({
           title: 'Success',
           message: 'Account created successfully',
@@ -192,6 +195,7 @@ export default function AccountsPage() {
       <Table highlightOnHover withTableBorder withColumnBorders>
         <Table.Thead>
           <Table.Tr>
+            <Table.Th>Account ID</Table.Th>
             <Table.Th>Phone Number</Table.Th>
             <Table.Th>Display Name</Table.Th>
             <Table.Th>Type</Table.Th>
@@ -204,7 +208,7 @@ export default function AccountsPage() {
         <Table.Tbody>
           {accounts.length === 0 ? (
             <Table.Tr>
-              <Table.Td colSpan={7}>
+              <Table.Td colSpan={8}>
                 <Center h={200}>
                   <Stack align="center">
                     <IconBrandWhatsapp size={48} stroke={1.5} color="gray" />
@@ -216,7 +220,8 @@ export default function AccountsPage() {
           ) : (
             accounts.map((account) => (
               <Table.Tr key={account.id}>
-                <Table.Td fw={500}>{account.phone_number || '-'}</Table.Td>
+                <Table.Td fw={500}>{account.account_id || '-'}</Table.Td>
+                <Table.Td>{account.phone_number || '-'}</Table.Td>
                 <Table.Td>{account.display_name || '-'}</Table.Td>
                 <Table.Td>
                   <Badge color={account.account_type === 'whatsmeow' ? 'green' : 'blue'} variant="light">
@@ -270,6 +275,15 @@ export default function AccountsPage() {
       >
         <form onSubmit={handleSubmit}>
           <Stack>
+            <TextInput
+              label="Account ID"
+              placeholder="my-business-account"
+              value={formData.account_id}
+              onChange={(e) => setFormData({ ...formData, account_id: e.target.value })}
+              required
+              description="Unique identifier for this account (lowercase, alphanumeric, hyphens allowed)"
+            />
+
             <TextInput
               label="Phone Number"
               placeholder="+1234567890"

web/src/pages/EventLogsPage.tsx

@@ -17,7 +17,7 @@ import {
   Tooltip
 } from '@mantine/core';
 import { IconAlertCircle, IconFileText, IconSearch } from '@tabler/icons-react';
-import { apiClient } from '../lib/api';
+import { listRecords } from '../lib/query';
 import type { EventLog } from '../types';
 
 export default function EventLogsPage() {
@@ -36,7 +36,7 @@ export default function EventLogsPage() {
   const loadLogs = async () => {
     try {
       setLoading(true);
-      const data = await apiClient.getEventLogs({ limit: 1000, offset: 0 });
+      const data = await listRecords<EventLog>('event_logs');
       setLogs(data || []);
       setError(null);
     } catch (err) {

web/src/pages/HooksPage.tsx

@@ -24,7 +24,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { IconEdit, IconTrash, IconPlus, IconAlertCircle, IconWebhook } from '@tabler/icons-react';
-import { apiClient } from '../lib/api';
+import { listRecords, createRecord, updateRecord, deleteRecord } from '../lib/query';
 import type { Hook } from '../types';
 
 export default function HooksPage() {
@@ -53,7 +53,7 @@ export default function HooksPage() {
   const loadHooks = async () => {
     try {
       setLoading(true);
-      const data = await apiClient.getHooks();
+      const data = await listRecords<Hook>('hooks');
       setHooks(data || []);
       setError(null);
     } catch (err) {
@@ -103,7 +103,7 @@ export default function HooksPage() {
       return;
     }
     try {
-      await apiClient.deleteHook(id);
+      await deleteRecord('hooks', id);
       notifications.show({
         title: 'Success',
         message: 'Hook deleted successfully',
@@ -163,14 +163,14 @@ export default function HooksPage() {
 
     try {
       if (editingHook) {
-        await apiClient.updateHook(editingHook.id, formData);
+        await updateRecord('hooks', editingHook.id, formData);
         notifications.show({
           title: 'Success',
           message: 'Hook updated successfully',
           color: 'green',
         });
       } else {
-        await apiClient.createHook(formData);
+        await createRecord('hooks', formData);
         notifications.show({
           title: 'Success',
           message: 'Hook created successfully',

web/src/types/index.ts

@@ -30,6 +30,7 @@ export interface Hook {
 export interface WhatsAppAccount {
   id: string;
   user_id: string;
+  account_id?: string; // User-friendly unique identifier
   phone_number: string;
   display_name?: string;
   account_type: 'whatsmeow' | 'business-api';