@visns-studio/visns-components 5.5.4 → 5.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -0
- package/package.json +1 -1
- package/src/components/crm/DataGrid.jsx +18 -1
- package/src/components/crm/auth/ClientLogin.jsx +126 -0
- package/src/components/crm/auth/ClientOTPVerify.jsx +257 -0
- package/src/components/crm/auth/styles/ClientAuth.module.scss +167 -0
- package/src/components/crm/client/ClientDashboard.jsx +62 -0
- package/src/components/crm/client/ClientPortal.jsx +158 -0
- package/src/components/crm/client/styles/ClientDashboard.module.scss +133 -0
- package/src/components/crm/client/styles/ClientPortal.module.scss +240 -0
- package/src/components/crm/generic/GenericAuth.jsx +175 -0
- package/src/components/crm/generic/GenericClientPortal.jsx +165 -0
- package/src/components/crm/generic/styles/GenericClientPortal.module.scss +154 -0
- package/src/index.js +10 -0
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
// Generic Client Portal Styles
|
|
2
|
+
.portalContainer {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
min-height: 100vh;
|
|
6
|
+
background-color: var(--bg-color, #f8f9fa);
|
|
7
|
+
|
|
8
|
+
// Theme variations
|
|
9
|
+
&.primary {
|
|
10
|
+
--portal-primary: var(--primary-color, #0f4229);
|
|
11
|
+
--portal-secondary: var(--secondary-color, #0a2e1c);
|
|
12
|
+
--portal-accent: var(--accent-color, #4a6741);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&.secondary {
|
|
16
|
+
--portal-primary: var(--secondary-color, #0a2e1c);
|
|
17
|
+
--portal-secondary: var(--primary-color, #0f4229);
|
|
18
|
+
--portal-accent: var(--accent-color, #4a6741);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&.alternate {
|
|
22
|
+
--portal-primary: var(--alternate-color, #2c3e50);
|
|
23
|
+
--portal-secondary: var(--secondary-color, #0a2e1c);
|
|
24
|
+
--portal-accent: var(--accent-color, #4a6741);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.portalHeader {
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
align-items: center;
|
|
32
|
+
padding: 0.5rem 1.25rem;
|
|
33
|
+
background-color: var(--tertiary-color, white);
|
|
34
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
35
|
+
z-index: 10;
|
|
36
|
+
height: 48px; // Fixed height for more compact look
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.logoContainer {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.logo {
|
|
45
|
+
height: 28px;
|
|
46
|
+
max-width: 140px;
|
|
47
|
+
object-fit: contain;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.userInfo {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 0.75rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.welcomeText {
|
|
57
|
+
font-size: 0.8rem;
|
|
58
|
+
color: var(--paragraph-color, #555);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.logoutButton {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
width: 28px;
|
|
66
|
+
height: 28px;
|
|
67
|
+
padding: 0;
|
|
68
|
+
background-color: transparent;
|
|
69
|
+
border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.15);
|
|
70
|
+
border-radius: var(--radius, 4px);
|
|
71
|
+
color: var(--paragraph-color, #555);
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
transition: all 0.2s ease;
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.05);
|
|
77
|
+
border-color: var(--primary-color, #0f4229);
|
|
78
|
+
color: var(--primary-color, #0f4229);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.portalContent {
|
|
83
|
+
display: flex;
|
|
84
|
+
flex: 1;
|
|
85
|
+
height: calc(100vh - 48px); // Subtract header height
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.mainContent {
|
|
89
|
+
flex: 1;
|
|
90
|
+
padding: 1.25rem;
|
|
91
|
+
overflow-y: auto;
|
|
92
|
+
color: var(--paragraph-color, #333);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Common styles for content sections
|
|
96
|
+
.sectionTitle {
|
|
97
|
+
margin-top: 0;
|
|
98
|
+
margin-bottom: 1.5rem;
|
|
99
|
+
color: var(--header-color, #333);
|
|
100
|
+
font-size: 1.75rem;
|
|
101
|
+
font-weight: var(--title-weight, 600);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card {
|
|
105
|
+
background-color: var(--tertiary-color, white);
|
|
106
|
+
border-radius: var(--radius, 8px);
|
|
107
|
+
padding: 1.5rem;
|
|
108
|
+
margin-bottom: 1.5rem;
|
|
109
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
110
|
+
border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.05);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.button {
|
|
114
|
+
padding: 0.5rem 1rem;
|
|
115
|
+
background-color: var(--primary-color, #0f4229);
|
|
116
|
+
color: var(--tertiary-color, white);
|
|
117
|
+
border: none;
|
|
118
|
+
border-radius: var(--radius, 4px);
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
font-size: 0.9rem;
|
|
121
|
+
transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
|
|
122
|
+
|
|
123
|
+
&:hover {
|
|
124
|
+
background-color: var(--secondary-color, #0a2e1c);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&.secondary {
|
|
128
|
+
background-color: transparent;
|
|
129
|
+
border: 1px solid var(--primary-color, #0f4229);
|
|
130
|
+
color: var(--primary-color, #0f4229);
|
|
131
|
+
|
|
132
|
+
&:hover {
|
|
133
|
+
background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.05);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// Responsive styles
|
|
139
|
+
@media (max-width: 768px) {
|
|
140
|
+
.portalContent {
|
|
141
|
+
flex-direction: column;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.sidebar {
|
|
145
|
+
width: 100%;
|
|
146
|
+
border-right: none;
|
|
147
|
+
border-bottom: 1px solid #eee;
|
|
148
|
+
padding: 1rem 0;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.navLink {
|
|
152
|
+
padding: 0.5rem 1.5rem;
|
|
153
|
+
}
|
|
154
|
+
}
|
package/src/index.js
CHANGED
|
@@ -27,6 +27,10 @@ import Login from './components/crm/auth/Login';
|
|
|
27
27
|
import Profile from './components/crm/auth/Profile';
|
|
28
28
|
import Reset from './components/crm/auth/Reset';
|
|
29
29
|
import Verify from './components/crm/auth/Verify';
|
|
30
|
+
import ClientLogin from './components/crm/auth/ClientLogin';
|
|
31
|
+
import ClientOTPVerify from './components/crm/auth/ClientOTPVerify';
|
|
32
|
+
import ClientPortal from './components/crm/client/ClientPortal';
|
|
33
|
+
import ClientDashboard from './components/crm/client/ClientDashboard';
|
|
30
34
|
|
|
31
35
|
/** CMS Generic Components */
|
|
32
36
|
import CmsDetail from './components/cms/generic/CmsDetail';
|
|
@@ -37,6 +41,7 @@ import CmsSort from './components/cms/generic/CmsSort';
|
|
|
37
41
|
import AuditLog from './components/crm/generic/AuditLog';
|
|
38
42
|
import AuditLogs from './components/crm/generic/AuditLogs';
|
|
39
43
|
import GenericAuth from './components/crm/generic/GenericAuth';
|
|
44
|
+
import GenericClientPortal from './components/crm/generic/GenericClientPortal';
|
|
40
45
|
import GenericDashboard from './components/crm/generic/GenericDashboard';
|
|
41
46
|
import GenericDetail from './components/crm/generic/GenericDetail';
|
|
42
47
|
import GenericDynamic from './components/crm/generic/GenericDynamic';
|
|
@@ -55,6 +60,10 @@ export {
|
|
|
55
60
|
Autocomplete,
|
|
56
61
|
Breadcrumb,
|
|
57
62
|
Call,
|
|
63
|
+
ClientLogin,
|
|
64
|
+
ClientOTPVerify,
|
|
65
|
+
ClientPortal,
|
|
66
|
+
ClientDashboard,
|
|
58
67
|
CmsDetail,
|
|
59
68
|
CmsForm,
|
|
60
69
|
CmsIndex,
|
|
@@ -66,6 +75,7 @@ export {
|
|
|
66
75
|
Field,
|
|
67
76
|
Form,
|
|
68
77
|
GenericAuth,
|
|
78
|
+
GenericClientPortal,
|
|
69
79
|
GenericDashboard,
|
|
70
80
|
GenericDetail,
|
|
71
81
|
GenericDynamic,
|