customer-module-frontend 1.0.1-beta.1

package/src/hooks/useBreadcrumb.tsx

@@ -0,0 +1,93 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { accountData, contactsData } from '../constants/index';
+
+export function useBreadcrumb() {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const path = location.pathname;  // works even in MemoryRouter
+
+    const items = [];
+
+    // Handle nested route: /accounts/:accountId/contacts/:contactId
+    if (path.startsWith("/accounts") && path.includes("/contacts/")) {
+        items.push({
+            label: "Accounts",
+            command: () => navigate("/accounts")
+        });
+
+        const parts = path.split("/");
+        const accountId = parts[2];
+        const contactId = parts[4]; // /accounts/:accountId/contacts/:contactId
+
+        if (accountId) {
+            const account = accountData.data.results.find(
+                (acc: { id: number; name: string }) => acc.id.toString() === accountId
+            );
+            const accountName = account?.name || 'Account';
+            
+            items.push({
+                label: accountName,
+                command: () => navigate(`/accounts/${accountId}`)
+            });
+        }
+
+        if (contactId) {
+            const contact = contactsData.data.results.find(
+                (cont: { id: number; name: string }) => cont.id.toString() === contactId
+            );
+            const contactName = contact?.name || 'Contact';
+            
+            items.push({
+                label: contactName,
+                command: () => navigate(`/accounts/${accountId}/contacts/${contactId}`)
+            });
+        }
+    }
+    // Handle /accounts/:accountId route
+    else if (path.startsWith("/accounts")) {
+        items.push({
+            label: "Accounts",
+            command: () => navigate("/accounts")
+        });
+
+        const parts = path.split("/");
+
+        if (parts[2]) {
+            const accountId = parts[2];
+            const account = accountData.data.results.find(
+                (acc: { id: number; name: string }) => acc.id.toString() === accountId
+            );
+            const accountName = account?.name || 'Account';
+            
+            items.push({
+                label: accountName,
+                command: () => navigate(`/accounts/${accountId}`)
+            });
+        }
+    }
+    // Handle /contacts/:contactId route
+    else if (path.startsWith("/contacts")) {
+        items.push({
+            label: "Contacts",
+            command: () => navigate("/contacts")
+        });
+
+        const parts = path.split("/");
+
+        if (parts[2]) {
+            const contactId = parts[2];
+            const contact = contactsData.data.results.find(
+                (cont: { id: number; name: string }) => cont.id.toString() === contactId
+            );
+            const contactName = contact?.name || 'Contact';
+            
+            items.push({
+                label: contactName,
+                command: () => navigate(`/contacts/${contactId}`)
+            });
+        }
+    }
+
+    return items;
+}

package/src/index.css

@@ -0,0 +1,315 @@
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap");
+@import "tailwindcss" prefix(cm);
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.p-tabview-panels {
+  padding: 0 !important;
+}
+
+.p-tabview-nav-link {
+  padding-top: 14px !important;
+  padding-bottom: 14px !important;
+}
+
+.p-tabview-nav {
+  border-bottom-width: 1px !important;
+}
+
+@theme {
+
+  /* Red color palette */
+  --color-red-50: #FCE4E4;
+  --color-red-100: #F9C9C9;
+  --color-red-200: #F19192;
+  --color-red-300: #EB5C5C;
+  --color-red-400: #E42525;
+  --color-red-500: #B81717;
+  --color-red-600: #911212;
+  --color-red-700: #6D0D0E;
+  --color-red-800: #480909;
+  --color-red-900: #230505;
+  --color-red-950: #120202;
+
+   /* Blue color palette */
+   --color-blue-50: #E6EFFD;
+   --color-blue-100: #D4E2FC;
+   --color-blue-200: #A9C5F9;
+   --color-blue-300: #7EA8F6;
+   --color-blue-400: #538BF3;
+   --color-blue-500: #276CF0;
+   --color-blue-600: #0F53D2;
+   --color-blue-700: #0C3E9D;
+   --color-blue-800: #072969;
+   --color-blue-900: #041534;
+   --color-blue-950: #020918;
+
+   /* Green color palette */
+   --color-green-50: #EAF9F2;
+   --color-green-100: #D3F4E1;
+   --color-green-200: #A6E9C3;
+   --color-green-300: #77DEA6;
+   --color-green-400: #4AD387;
+   --color-green-500: #2DBB6D;
+   --color-green-600: #239456;
+   --color-green-700: #1B6F41;
+   --color-green-800: #114A2B;
+   --color-green-900: #0A2516;
+   --color-green-950: #05150C;
+
+   /* Pastel Blue color palette */
+   --color-pastel-blue-50: #EFF5FB;
+   --color-pastel-blue-100: #DBE9F5;
+   --color-pastel-blue-200: #BBD6EC;
+   --color-pastel-blue-300: #97C0E2;
+   --color-pastel-blue-400: #77ADD9;
+   --color-pastel-blue-500: #5398CF;
+   --color-pastel-blue-600: #337CB7;
+   --color-pastel-blue-700: #255C87;
+   --color-pastel-blue-800: #1A3E5D;
+   --color-pastel-blue-900: #0B1E2C;
+   --color-pastel-blue-950: #071018;
+
+   /* Pastel Yellow color palette */
+   --color-pastel-yellow-50: #FBF9E8;
+   --color-pastel-yellow-100: #FAF5D6;
+   --color-pastel-yellow-200: #F4EAA9;
+   --color-pastel-yellow-300: #EFDF80;
+   --color-pastel-yellow-400: #E9D659;
+   --color-pastel-yellow-500: #E3CB2D;
+   --color-pastel-yellow-600: #C2AB1A;
+   --color-pastel-yellow-700: #907F13;
+   --color-pastel-yellow-800: #5F540E;
+   --color-pastel-yellow-900: #322C07;
+   --color-pastel-yellow-950: #241D00;
+
+   /* Slate color palette */
+   --color-slate-50: #F8FAFC;
+   --color-slate-100: #F1F5F9;
+   --color-slate-150: #EDF1F6;
+   --color-slate-200: #E2E8F0;
+   --color-slate-300: #CBD5E1;
+   --color-slate-400: #94A3B8;
+   --color-slate-500: #64758B;
+   --color-slate-600: #475569;
+   --color-slate-700: #334155;
+   --color-slate-800: #1E293B;
+   --color-slate-900: #0F172A;
+   --color-slate-950: #020617;
+
+  /* Slate colors */
+  --color-slate-surface-white: #ffffff;
+  --color-slate-surface-subtle: #f8fafc;
+  --color-slate-surface-subtle-100: #f1f5f9;
+  --color-slate-surface-subtle-150: #edf1f6;
+  --color-slate-surface-subtle-200: #e2e8f0;
+  --color-slate-surface-subtle-300: #cbd5e1;
+  --color-slate-surface-default: #94a3b8;
+  --color-slate-surface-dark-500: #64758b;
+  --color-slate-surface-dark-600: #475569;
+  --color-slate-surface-darkest: #334155;
+  --color-slate-surface-disabled: #e2e8f0;
+
+  --color-slate-border-default: #94a3b8;
+  --color-slate-border-light: #e2e8f0;
+  --color-slate-border-mild: #edf1f6;
+  --color-slate-border-dark: #64758b;
+
+  --color-slate-text-title: #1E293B;
+  --color-slate-text-body: #334155;
+  --color-slate-text-subtle: #64758b;
+  --color-slate-text-caption: #cbd5e1;
+  --color-slate-text-disabled: #94a3b8;
+
+  --color-slate-icons-active: #334155;
+  --color-slate-icons-subtle: #64758b;
+  --color-slate-icons-disabled: #94a3b8;
+
+  /* Primary colors */
+  --color-primary-surface-default: #276cf0;
+  --color-primary-surface-subtle: #e6effd;
+  --color-primary-surface-dark: #0c3e9d;
+  --color-primary-surface-mild-dark: #0f53d2;
+  --color-primary-surface-lighter: #7ea8f6;
+
+  --color-primary-border-subtle: #d4e2fc;
+  --color-primary-border-lighter: #a9c5f9;
+  --color-primary-border-default: #276cf0;
+  --color-primary-border-dark: #0c3e9d;
+
+  --color-primary-text-default: #0c3e9d;
+  --color-primary-text-label: #0c3e9d;
+
+  /* Error colors */
+  --color-error-surface-default: var(--color-red-500);
+  --color-error-surface-subtle: var(--color-red-50);
+  --color-error-surface-dark: var(--color-red-200);
+  --color-error-surface-disabled: var(--color-red-300);
+
+  --color-error-border-lighter: var(--color-red-200);
+  --color-error-border-default: var(--color-red-400);
+  --color-error-border-dark: var(--color-red-500);
+
+  --color-error-text-title: var(--sc-color-red-800);
+  --color-error-text-subtle: var(--sc-color-red-500);
+  --color-error-text-body: var(--sc-color-red-700);
+  --color-error-text-disabled: var(--sc-color-red-500);
+  --color-error-text-caption: var(--sc-color-red-300);
+
+
+  --color-success-surface-default: var(--sc-color-green-300);
+  --color-success-surface-subtle: var(--sc-color-green-100);
+  --color-success-surface-dark: var(--sc-color-green-400);
+
+  --color-success-border-lighter: var(--sc-color-green-200);
+  --color-success-border-default: var(--sc-color-green-400);
+  --color-success-border-dark: var(--sc-color-green-500);
+
+  --color-success-text-title: var(--sc-color-green-800);
+  --color-success-text-subtle: var(--sc-color-green-500);
+  --color-success-text-body: var(--sc-color-green-700);
+  --color-success-text-disabled: var(--sc-color-green-500);
+  --color-success-text-caption: var(--sc-color-green-300);
+
+
+  /* Blue colors */
+  --color-blue-surface-default: var(--sc-color-blue-100);
+  --color-blue-surface-subtle: var(--sc-color-blue-50);
+  --color-blue-surface-dark: var(--sc-color-blue-200);
+  --color-blue-surface-disabled: var(--sc-color-blue-300);
+
+  --color-blue-border-default: var(--sc-color-blue-400);
+  --color-blue-border-dark: var(--sc-color-blue-500);
+  --color-blue-border-light: var(--sc-color-blue-200);
+
+  --color-blue-text-title: var(--sc-color-blue-800);
+  --color-blue-text-body: var(--sc-color-blue-700);
+  --color-blue-text-subtle: var(--sc-color-blue-500);
+  --color-blue-text-caption: var(--sc-color-blue-300);
+  --color-blue-text-disabled: var(--sc-color-blue-500);
+
+  /* Pastel Yellow colors */
+  --color-pastel-yellow-surface-subtle: var(--sc-color-pastel-yellow-100);
+  --color-pastel-yellow-text-title: var(--sc-color-pastel-yellow-800);
+  --color-pastel-yellow-text-body: var(--sc-color-pastel-yellow-700);
+
+  /* Pastel Light Blue colors */
+  --color-pastel-light-blue-surface-default: var(--sc-color-pastel-blue-400);
+  --color-pastel-light-blue-surface-subtle: var(--sc-color-pastel-blue-100);
+  --color-pastel-light-blue-surface-mild: var(--sc-color-pastel-blue-50);
+  --color-pastel-light-blue-surface-dark: var(--sc-color-pastel-blue-700);
+
+  --color-pastel-light-blue-border-default: var(--sc-color-pastel-blue-500);
+  --color-pastel-light-blue-border-dark: var(--sc-color-pastel-blue-800);
+  --color-pastel-light-blue-border-light: var(--sc-color-pastel-blue-300);
+
+  --color-pastel-light-blue-text-title: var(--sc-color-pastel-blue-700);
+  --color-pastel-light-blue-text-body: var(--sc-color-pastel-blue-700);
+  --color-pastel-light-blue-text-subtle: var(--sc-color-pastel-blue-500);
+  --color-pastel-light-blue-text-caption: var(--sc-color-pastel-blue-300);
+  --color-pastel-light-blue-text-disabled: var(--sc-color-pastel-blue-500);
+
+  /* Additional colors */
+  --color-primary-blue: #007bff;
+  --color-primary-blue-dark: #0056b3;
+  --color-primary-blue-light: #66b3ff;
+
+  --color-secondary-green: #28a745;
+  --color-secondary-green-dark: #1e7e34;
+  --color-secondary-green-light: #71dd8a;
+
+  --color-accent-orange: #fd7e14;
+  --color-accent-purple: #6f42c1;
+  --color-accent-teal: #20c997;
+
+
+  --color-gray-1: #f8f9fa;
+  --color-gray-2: #e9ecef;
+  --color-gray-3: #dee2e6;
+  --color-gray-4: #ced4da;
+  --color-gray-5: #adb5bd;
+  --color-gray-6: #6c757d;
+  --color-gray-7: #495057;
+  --color-gray-8: #343a40;
+  --color-gray-9: #212529;
+
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-error: #dc3545;
+  --color-info: #17a2b8;
+
+  --color-banner-bg: #d4e2fc;
+  --color-banner-text: #0c3e9d;
+  --color-banner-icon-bg: #2563eb;
+  --color-toggle-inactive: #94a3b8;
+  --color-toggle-active: #276cf0;
+  --color-savings-bg: #d1fae5;
+  --color-savings-text: #059669;
+  --color-card-border: #e5e7eb;
+  --color-card-hover-border: #d1d5db;
+  --color-plan-highlighted-bg: #475569;
+  --color-google-blue: #4285f4;
+  --color-google-blue-hover: #3367d6;
+  --color-google-blue-active: #2d5aa0;
+  --color-error-surface-subtle: #FCE4E4;
+  --color-error-surface-dark: #F19192;
+
+
+
+
+  --font-family-sans: "Hanken Grotesk", sans-serif;
+  --font-optical-sizing: auto;
+  --font-weight: 400;
+  --font-style: normal;
+
+  --font-size-label-medium: 1rem;
+
+  --font-size-body-xs: 0.75rem;
+  --font-size-body-sm: 0.875rem;
+  --font-size-body-md: 1rem;
+  --font-size-body-lg: 1.125rem;
+  --font-size-body-xl: 1.25rem;
+  --font-size-body-2xl: 1.5rem;
+  --font-size-body-3xl: 1.75rem;
+  --font-size-body-4xl: 2rem;
+  --font-size-body-5xl: 2.25rem;
+
+  /* Heading font sizes */
+  --font-size-heading-h4: 1.25rem; /* 20px */
+  --font-size-heading-h3: 1.5rem; /* 24px */
+  --font-size-heading-h2: 1.875rem; /* 30px */
+  --font-size-heading-h1: 2.25rem; /* 36px */
+
+  /* Line heights corresponding to font sizes */
+  --line-height-body-xs: 1.125;
+  --line-height-body-sm: 1.25;
+  --line-height-body-md: 1.5;
+  --line-height-body-lg: 1.75;
+  --line-height-body-xl: 2;
+  --line-height-body-2xl: 2.25;
+  --line-height-body-3xl: 2.5;
+  --line-height-body-4xl: 2.75;
+  --line-height-body-5xl: 3;
+
+  /* Heading line heights */
+  --line-height-heading-h4: 1.2; /* 24px / 20px */
+  --line-height-heading-h3: 1.1667; /* 28px / 24px */
+  --line-height-heading-h2: 1.2; /* 36px / 30px */
+  --line-height-heading-h1: 1.2222; /* 44px / 36px */
+
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --font-weight-normal: 400;
+  --font-weight-light: 300;
+  --font-weight-thin: 100;
+  --font-weight-extra-light: 200;
+  --font-weight-extra-bold: 800;
+  --font-weight-extra-black: 900;
+}
+
+.p-tabview-nav {
+  height: 48px;
+}
+

package/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { MemoryRouter } from 'react-router-dom';
+import 'hiver-ui-kit-extended/dist/hiver-ui-kit-extended.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>
+  </StrictMode>,
+)

package/src/pages/AccountDetail.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useState } from 'react';
+import Card from '../components/Card';
+import { Tabs } from 'hiver-ui-kit-extended';
+import messageIcon from '../assets/message.svg';
+import contactsIcon from '../assets/contacts.svg';
+import AccountsConversation from '../components/AccountsConversation';
+import DetailsCard from '../components/DetailsCard';
+import AccountDetails from '../components/AccountDetails';
+import AccountContacts from '../components/AccountContacts';
+import detailsIcon from '../assets/details.svg';
+
+const AccountDetail: React.FC = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const tabsItems = [
+    {
+      label: (
+        <>
+          <img src={messageIcon} alt="conversations" className="cm:inline-block cm:mr-2 cm:w-3.5 cm:h-3.5" />
+          Conversations
+        </>
+      ) as unknown as string,
+      content: '',
+      url: '/accounts'
+    },
+    {
+      label: (
+        <>
+          <img src={contactsIcon} alt="contacts" className="cm:inline-block cm:mr-2 cm:w-3.5 cm:h-3.5" />
+          Contacts
+        </>
+      ) as unknown as string,
+      content: '',
+      url: '/google'
+    },
+  ];
+  const onTabChange = (e: any) => {
+    console.log('onTabChange', e);
+    setActiveIndex(e.index);
+  };
+
+  return (
+    <div className="cm:flex cm:gap-2 cm:items-start cm:relative cm:shrink-0 cm:w-full">
+      <Card>
+        <Tabs value={activeIndex} onTabChange={onTabChange} items={tabsItems} />
+        {activeIndex === 0 && <AccountsConversation />}
+        {activeIndex === 1 && <AccountContacts/>}
+      </Card>
+      <DetailsCard
+        header={
+          <div className="cm:flex cm:gap-2 cm:items-center cm:justify-center cm:px-0 cm:rounded-[6px] cm:shrink-0">
+            <div className="cm:relative cm:shrink-0 cm:w-3.5 cm:h-3.5">
+              <img src={detailsIcon} alt="details" className="cm:w-3.5 cm:h-3.5" />
+            </div>
+            <p className="cm:font-medium cm:leading-5 cm:text-sm cm:text-slate-text-body cm:whitespace-nowrap">
+              Account details
+            </p>
+          </div>
+        }
+      >
+        <AccountDetails />
+      </DetailsCard>
+    </div>
+  );
+};
+
+export default AccountDetail;
+

package/src/pages/Accounts.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import AccountTable from '../components/Listing/AccountTable';
+
+const Accounts: React.FC = () => {
+
+  return (
+    <AccountTable />
+  );
+};
+
+export default Accounts;
+

package/src/pages/ContactDetail.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useState } from 'react';
+import Card from '../components/Card';
+import { Tabs } from 'hiver-ui-kit-extended';
+import messageIcon from '../assets/message.svg';
+import ContactConversation from '../components/ContactConversation';
+import DetailsCard from '../components/DetailsCard';
+import ContactDetails from '../components/ContactDetails';
+import detailsIcon from '../assets/details.svg';
+
+const ContactDetail: React.FC = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const tabsItems = [
+    {
+      label: (
+        <>
+          <img src={messageIcon} alt="conversations" className="cm:inline-block cm:mr-2 cm:w-3.5 cm:h-3.5" />
+          Conversations
+        </>
+      ) as unknown as string,
+      content: '',
+      url: '/contacts'
+    },
+  ];
+  const onTabChange = (e: any) => {
+    console.log('onTabChange', e);
+    setActiveIndex(e.index);
+  };
+
+  return (
+    <div className="cm:flex cm:gap-2 cm:items-start cm:relative cm:shrink-0 cm:w-full">
+      <Card>
+        <Tabs value={activeIndex} onTabChange={onTabChange} items={tabsItems} />
+        {activeIndex === 0 && <ContactConversation />}
+      </Card>
+      <DetailsCard
+        header={
+          <div className="cm:flex cm:gap-2 cm:h-8 cm:items-center cm:justify-center cm:px-0 cm:py-1 cm:rounded-[6px] cm:shrink-0">
+            <div className="cm:relative cm:shrink-0 cm:w-3.5 cm:h-3.5">
+              <img src={detailsIcon} alt="details" className="cm:w-3.5 cm:h-3.5" />
+            </div>
+            <p className="cm:font-medium cm:leading-5 cm:text-sm cm:text-slate-text-body cm:whitespace-nowrap">
+              Contact details
+            </p>
+          </div>
+        }
+      >
+        <ContactDetails />
+      </DetailsCard>
+    </div>
+  );
+};
+
+export default ContactDetail;
+

package/src/pages/Contacts.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ContactTable from '../components/Listing/ContactTable';
+
+const Contacts: React.FC = () => {
+
+  return (
+    <ContactTable />
+  );
+};
+
+export default Contacts;
+

package/src/stores/count.tsx

@@ -0,0 +1,17 @@
+import { create } from 'zustand'
+
+interface CountState {
+  count: number
+  increment: () => void
+  decrement: () => void
+  reset: () => void
+  setCount: (count: number) => void
+}
+
+export const useCountStore = create<CountState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 }),
+  setCount: (count: number) => set({ count }),
+}))