@visns-studio/visns-components 5.5.4 → 5.5.6

package/src/components/crm/auth/styles/ClientAuth.module.scss

@@ -0,0 +1,167 @@
+// Client Auth styles
+.container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+
+.loginBox {
+  width: 100%;
+  max-width: 500px;
+  padding: 2.5rem;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.logo {
+  display: block;
+  width: 100%;
+  max-width: 240px;
+  height: auto;
+  margin: 0 auto 2rem;
+}
+
+.title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 2rem;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.formGroup {
+  margin-bottom: 1.5rem;
+  position: relative;
+}
+
+.inputLabel {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 0.5rem;
+}
+
+.input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white;
+  transition: border-color 0.2s ease;
+  
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color, #4a6741);
+    box-shadow: 0 0 0 2px rgba(74, 103, 65, 0.1);
+  }
+  
+  &.error {
+    border-color: #e53935;
+  }
+}
+
+.inputIcon {
+  position: absolute;
+  right: 1rem;
+  top: 2.4rem;
+  color: #999;
+}
+
+.button {
+  width: 100%;
+  padding: 0.9rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: white;
+  background-color: var(--primary-color, #0f4229);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background-color: var(--secondary-color, #0a2e1c);
+  }
+  
+  &:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+.linkText {
+  display: block;
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.9rem;
+  color: #666;
+  
+  a {
+    color: var(--primary-color, #0f4229);
+    text-decoration: none;
+    font-weight: 500;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// OTP verification specific styles
+.otpInput {
+  letter-spacing: 0.25rem;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.resendLink {
+  color: var(--primary-color, #0f4229);
+  text-decoration: none;
+  font-weight: 500;
+  cursor: pointer;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+  
+  &.disabled {
+    color: #999;
+    cursor: default;
+    text-decoration: none;
+  }
+}
+
+.emailHighlight {
+  font-weight: 600;
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 1rem;
+  color: #666;
+  text-decoration: none;
+  font-size: 0.9rem;
+  
+  svg {
+    margin-right: 0.5rem;
+  }
+  
+  &:hover {
+    color: var(--primary-color, #0f4229);
+  }
+}

package/src/components/crm/client/ClientDashboard.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import styles from './styles/ClientDashboard.module.scss';
+
+/**
+ * ClientDashboard - Example dashboard component for client portal
+ * 
+ * This is a simple example of a custom component that can be passed to GenericClientPortal
+ */
+const ClientDashboard = ({ clientProfile }) => {
+    return (
+        <div className={styles.dashboardContainer}>
+            <h1 className={styles.sectionTitle}>Dashboard</h1>
+            
+            <div className={styles.welcomeCard}>
+                <h2>Welcome to your Client Portal</h2>
+                <p>
+                    Hello {clientProfile.name || clientProfile.email}! This is your personal dashboard 
+                    where you can access your documents, update your profile, and more.
+                </p>
+            </div>
+            
+            <div className={styles.statsGrid}>
+                <div className={styles.statCard}>
+                    <h3>Documents</h3>
+                    <p className={styles.statNumber}>5</p>
+                    <p className={styles.statDescription}>Available documents</p>
+                </div>
+                <div className={styles.statCard}>
+                    <h3>Messages</h3>
+                    <p className={styles.statNumber}>2</p>
+                    <p className={styles.statDescription}>Unread messages</p>
+                </div>
+                <div className={styles.statCard}>
+                    <h3>Tasks</h3>
+                    <p className={styles.statNumber}>3</p>
+                    <p className={styles.statDescription}>Pending tasks</p>
+                </div>
+            </div>
+            
+            <div className={styles.recentActivity}>
+                <h2>Recent Activity</h2>
+                <ul className={styles.activityList}>
+                    <li className={styles.activityItem}>
+                        <span className={styles.activityDate}>Today</span>
+                        <span className={styles.activityDescription}>Document "Tax Return 2023" was uploaded</span>
+                    </li>
+                    <li className={styles.activityItem}>
+                        <span className={styles.activityDate}>Yesterday</span>
+                        <span className={styles.activityDescription}>You received a new message</span>
+                    </li>
+                    <li className={styles.activityItem}>
+                        <span className={styles.activityDate}>3 days ago</span>
+                        <span className={styles.activityDescription}>Your profile was updated</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default ClientDashboard;

package/src/components/crm/client/ClientPortal.jsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Routes, Route, Link } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+import CustomFetch from '../Fetch';
+
+import styles from './styles/ClientPortal.module.scss';
+
+const ClientPortal = ({ clientProfile, setClientProfile, setClientAuth, logo }) => {
+    const handleLogout = async () => {
+        try {
+            await CustomFetch('/client/logout', 'POST');
+            setClientProfile({});
+            setClientAuth(false);
+            toast.success('You have been logged out successfully');
+        } catch (error) {
+            toast.error('Error logging out. Please try again.');
+        }
+    };
+
+    return (
+        <div className={styles.portalContainer}>
+            <header className={styles.portalHeader}>
+                <div className={styles.logoContainer}>
+                    <img src={logo} alt="Client Portal" className={styles.logo} />
+                </div>
+                <div className={styles.userInfo}>
+                    <span className={styles.welcomeText}>
+                        Welcome, <strong>{clientProfile.name || clientProfile.email}</strong>
+                    </span>
+                    <button onClick={handleLogout} className={styles.logoutButton}>
+                        Logout
+                    </button>
+                </div>
+            </header>
+
+            <main className={styles.portalContent}>
+                <div className={styles.sidebar}>
+                    <nav className={styles.navigation}>
+                        <ul>
+                            <li>
+                                <Link to="/client/portal" className={styles.navLink}>
+                                    Dashboard
+                                </Link>
+                            </li>
+                            <li>
+                                <Link to="/client/portal/profile" className={styles.navLink}>
+                                    My Profile
+                                </Link>
+                            </li>
+                            <li>
+                                <Link to="/client/portal/documents" className={styles.navLink}>
+                                    Documents
+                                </Link>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+
+                <div className={styles.mainContent}>
+                    <Routes>
+                        <Route 
+                            path="/" 
+                            element={<Dashboard clientProfile={clientProfile} />} 
+                        />
+                        <Route 
+                            path="/profile" 
+                            element={<Profile clientProfile={clientProfile} setClientProfile={setClientProfile} />} 
+                        />
+                        <Route 
+                            path="/documents" 
+                            element={<Documents clientProfile={clientProfile} />} 
+                        />
+                    </Routes>
+                </div>
+            </main>
+        </div>
+    );
+};
+
+// Simple Dashboard component
+const Dashboard = ({ clientProfile }) => {
+    return (
+        <div className={styles.dashboardContainer}>
+            <h1>Dashboard</h1>
+            <div className={styles.welcomeCard}>
+                <h2>Welcome to your Client Portal</h2>
+                <p>
+                    This is your personal dashboard where you can access your documents,
+                    update your profile, and more.
+                </p>
+            </div>
+            
+            <div className={styles.statsGrid}>
+                <div className={styles.statCard}>
+                    <h3>Documents</h3>
+                    <p className={styles.statNumber}>5</p>
+                </div>
+                <div className={styles.statCard}>
+                    <h3>Messages</h3>
+                    <p className={styles.statNumber}>2</p>
+                </div>
+                <div className={styles.statCard}>
+                    <h3>Tasks</h3>
+                    <p className={styles.statNumber}>3</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// Simple Profile component
+const Profile = ({ clientProfile, setClientProfile }) => {
+    return (
+        <div className={styles.profileContainer}>
+            <h1>My Profile</h1>
+            <div className={styles.profileCard}>
+                <div className={styles.profileField}>
+                    <label>Name</label>
+                    <p>{clientProfile.name || 'Not provided'}</p>
+                </div>
+                <div className={styles.profileField}>
+                    <label>Email</label>
+                    <p>{clientProfile.email}</p>
+                </div>
+                <div className={styles.profileField}>
+                    <label>Phone</label>
+                    <p>{clientProfile.phone || 'Not provided'}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// Simple Documents component
+const Documents = ({ clientProfile }) => {
+    return (
+        <div className={styles.documentsContainer}>
+            <h1>Documents</h1>
+            <p>Your documents will appear here.</p>
+            
+            <div className={styles.documentsList}>
+                <div className={styles.documentCard}>
+                    <h3>Sample Document 1</h3>
+                    <p>Uploaded on: 2023-05-15</p>
+                    <button className={styles.viewButton}>View</button>
+                </div>
+                <div className={styles.documentCard}>
+                    <h3>Sample Document 2</h3>
+                    <p>Uploaded on: 2023-06-20</p>
+                    <button className={styles.viewButton}>View</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ClientPortal;

package/src/components/crm/client/styles/ClientDashboard.module.scss

@@ -0,0 +1,133 @@
+// Client Dashboard Styles
+.dashboardContainer {
+    width: 100%;
+}
+
+.sectionTitle {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: #333;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.welcomeCard {
+    background-color: white;
+    border-radius: 6px;
+    padding: 1.25rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    border-left: 3px solid var(--primary-color, #0f4229);
+
+    h2 {
+        margin-top: 0;
+        color: var(--primary-color, #0f4229);
+        font-size: 1.25rem;
+        margin-bottom: 0.5rem;
+    }
+
+    p {
+        color: #666;
+        line-height: 1.5;
+        margin-bottom: 0;
+        font-size: 0.9rem;
+    }
+}
+
+.statsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.statCard {
+    background-color: white;
+    border-radius: 6px;
+    padding: 1.25rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    text-align: center;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+    }
+
+    h3 {
+        margin-top: 0;
+        color: #555;
+        font-size: 0.9rem;
+        font-weight: 500;
+    }
+
+    .statNumber {
+        font-size: 2rem;
+        font-weight: 600;
+        color: var(--primary-color, #0f4229);
+        margin: 0.4rem 0;
+    }
+
+    .statDescription {
+        color: #777;
+        font-size: 0.8rem;
+        margin: 0;
+    }
+}
+
+.recentActivity {
+    background-color: white;
+    border-radius: 6px;
+    padding: 1.25rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+    h2 {
+        margin-top: 0;
+        margin-bottom: 0.75rem;
+        font-size: 1.1rem;
+        color: #333;
+    }
+}
+
+.activityList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.activityItem {
+    display: flex;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #eee;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    .activityDate {
+        flex: 0 0 80px;
+        color: #777;
+        font-size: 0.8rem;
+    }
+
+    .activityDescription {
+        flex: 1;
+        color: #333;
+        font-size: 0.9rem;
+    }
+}
+
+// Responsive styles
+@media (max-width: 768px) {
+    .statsGrid {
+        grid-template-columns: 1fr;
+    }
+
+    .activityItem {
+        flex-direction: column;
+
+        .activityDate {
+            margin-bottom: 0.5rem;
+        }
+    }
+}