mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-04 07:52:08 +00:00
adding first commit
This commit is contained in:
npalOmega
parent
90a7556392
commit
3461d3159e
29 changed files with 2399 additions and 67 deletions
991
package-lock.json
generated
991
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -3,13 +3,21 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/icons-material": "^7.3.1",
|
||||
"@mui/material": "^7.3.1",
|
||||
"@testing-library/dom": "^10.4.1",
|
||||
"@testing-library/jest-dom": "^6.6.4",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"http-proxy-middleware": "^3.0.5",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.9.4",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-toastify": "^11.0.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
38
src/App.js
38
src/App.js
|
|
@ -1,25 +1,21 @@
|
|||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import React from "react";
|
||||
import Sidebar from "./components/Sidebar";
|
||||
import Topbar from "./components/Topbar";
|
||||
import Contacts from "./components/Contacts";
|
||||
import ContactsList from './pages/contacts/list/List'
|
||||
import ContactFormPage from './pages/contacts/form/ContactFormPage'
|
||||
|
||||
function App() {
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
<div className="app">
|
||||
<Sidebar />
|
||||
<div className="mainArea">
|
||||
<Topbar />
|
||||
<div className="contentWrapper">
|
||||
<ContactFormPage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
}
|
||||
45
src/Site.Layout.js
Normal file
45
src/Site.Layout.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import React from "react";
|
||||
import { Container } from "@mui/material";
|
||||
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
||||
import "./site.css";
|
||||
import TopNav from "./components/TopNav";
|
||||
import LeftNav from "./components/LeftNav";
|
||||
import Main from "./components/Main";
|
||||
|
||||
const THEME = createTheme({
|
||||
typography: {
|
||||
fontFamily: `"Dosis", "Nunito", sans-serif`,
|
||||
fontSize: 14,
|
||||
fontWeightLight: 300,
|
||||
fontWeightRegular: 400,
|
||||
fontWeightMedium: 500,
|
||||
},
|
||||
palette: {
|
||||
header: {
|
||||
main: "#4D81B7",
|
||||
contrastText: "header background",
|
||||
},
|
||||
},
|
||||
flexBox: {
|
||||
display: "flex",
|
||||
},
|
||||
});
|
||||
|
||||
const Layout = (props) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
return (
|
||||
<ThemeProvider theme={THEME}>
|
||||
<TopNav handleDrawerOpen={handleDrawerOpen}/>
|
||||
<LeftNav handleDrawerClose= {handleDrawerClose} open={open}/>
|
||||
<Main open={open} maxWidth="lg">{props.children}</Main>
|
||||
</ThemeProvider>
|
||||
)};
|
||||
export default Layout;
|
||||
108
src/apiUtil.js
Normal file
108
src/apiUtil.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import { API_ERROR_MESSAGE } from "./constants";
|
||||
import { getAccessToken, setToken } from "./tokenUtility";
|
||||
|
||||
const STANDARD_HEADERS = {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
pragma: "no-cache",
|
||||
"cache-control": "no-cache",
|
||||
Authorization: getAccessToken()
|
||||
};
|
||||
|
||||
const STANDARD_HEADERS_FORM = {
|
||||
accept: "application/json",
|
||||
pragma: "no-cache",
|
||||
"cache-control": "no-cache",
|
||||
Authorization: getAccessToken(),
|
||||
};
|
||||
|
||||
export const get = (url) =>
|
||||
fetch(url, {
|
||||
headers: { ...STANDARD_HEADERS, Authorization: getAccessToken() },
|
||||
method: "GET",
|
||||
})
|
||||
.then(handleHttpResponse)
|
||||
.catch((ex) => {
|
||||
throw new Error(ex.message || API_ERROR_MESSAGE);
|
||||
});
|
||||
|
||||
export const post = (url, payload) =>
|
||||
fetch(url, {
|
||||
headers: STANDARD_HEADERS,
|
||||
method: "POST",
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(handleHttpResponse)
|
||||
.catch((ex) => {
|
||||
throw new Error(ex.message || API_ERROR_MESSAGE);
|
||||
});
|
||||
|
||||
export const postFormBody = (url, payload) => {
|
||||
const formData = new FormData();
|
||||
|
||||
for (const [key, value] of Object.entries(payload)) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
|
||||
return fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
...STANDARD_HEADERS_FORM,
|
||||
},
|
||||
body: formData,
|
||||
})
|
||||
.then(handleHttpResponse)
|
||||
.catch((ex) => {
|
||||
throw new Error(ex.message || API_ERROR_MESSAGE);
|
||||
});
|
||||
};
|
||||
|
||||
export const put = (url, payload) =>
|
||||
fetch(url, {
|
||||
headers: STANDARD_HEADERS,
|
||||
method: "PUT",
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(handleHttpResponse)
|
||||
.catch((ex) => {
|
||||
throw new Error(ex.message || API_ERROR_MESSAGE);
|
||||
});
|
||||
|
||||
export const putFormBody = (url, payload) => {
|
||||
const formData = new FormData();
|
||||
|
||||
for (const [key, value] of Object.entries(payload)) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
|
||||
fetch(url, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
...STANDARD_HEADERS_FORM,
|
||||
},
|
||||
body: formData,
|
||||
})
|
||||
.then(handleHttpResponse)
|
||||
.catch((ex) => {
|
||||
throw new Error(ex.message || API_ERROR_MESSAGE);
|
||||
});
|
||||
}
|
||||
export const deleteItem = (url, payload) =>
|
||||
fetch(url, {
|
||||
headers: STANDARD_HEADERS,
|
||||
method: "Delete",
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(handleHttpResponse)
|
||||
.catch((ex) => {
|
||||
throw new Error(ex.message || API_ERROR_MESSAGE);
|
||||
});
|
||||
|
||||
const handleHttpResponse = (response) => {
|
||||
if (response.ok)
|
||||
return response.json();
|
||||
else if (response.status === 401) {
|
||||
throw new Error("You are not authorized to access this page.");
|
||||
}
|
||||
throw new Error(API_ERROR_MESSAGE);
|
||||
};
|
||||
59
src/components/ContactTable.js
Normal file
59
src/components/ContactTable.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import React from "react";
|
||||
|
||||
export default function ContactTable({rows}) {
|
||||
return (
|
||||
<div className="tableWrap">
|
||||
<table className="contactTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="colCheck"><input type="checkbox" /></th>
|
||||
<th>Name</th>
|
||||
<th>Phone Number</th>
|
||||
<th>Email</th>
|
||||
<th className="actionsCol">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map(r => (
|
||||
<tr key={r.id}>
|
||||
<td className="colCheck"><input type="checkbox" /></td>
|
||||
<td>
|
||||
<div className="rowName">
|
||||
<div className="avatarThumb">{r.name.split(" ").map(n=>n[0]).slice(0,2).join("")}</div>
|
||||
<div className="nameText">
|
||||
<div className="nameLink">{r.name}</div>
|
||||
<div className="sub">Officetrax Demo Account</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="mono">{r.phone}</td>
|
||||
<td className="mono link">{r.email}</td>
|
||||
<td className="actionsCol">
|
||||
<button className="iconSmall">✎</button>
|
||||
<button className="iconSmall">🗑</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="tableFooter">
|
||||
<div className="left">
|
||||
Records per page:
|
||||
<select>
|
||||
<option>12</option>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="right">
|
||||
Jump to Page:
|
||||
<select>
|
||||
<option>1</option>
|
||||
</select>
|
||||
<span className="rowsInfo">1-6 of {rows.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
src/components/Contacts.js
Normal file
44
src/components/Contacts.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from "react";
|
||||
import ContactTable from "./ContactTable";
|
||||
|
||||
const sampleContacts = [
|
||||
{id:1, name:"Johan Doe", phone:"(575) 877-7777", email:"varucetyq@mailinator.com"},
|
||||
{id:2, name:"Adam Moussa", phone:"(631) 664-3950", email:"adam@seahavenind.com"},
|
||||
{id:3, name:"test", phone:"(123) 343-444554", email:"test@gmail.com"},
|
||||
{id:4, name:"Jane K Smith", phone:"(456) 789-8328", email:"jane@gmail.com"},
|
||||
{id:5, name:"Zohan Raley", phone:"(123) 567-7688", email:"zohan@gmail.com"},
|
||||
{id:6, name:"npaltest", phone:"9999999999", email:"amanmeutd46@gmail.com"},
|
||||
];
|
||||
|
||||
export default function Contacts(){
|
||||
return (
|
||||
<section className="contactsPage">
|
||||
<div className="pageTitle">Contacts</div>
|
||||
|
||||
<div className="card controlsCard">
|
||||
<div className="controlsTop">
|
||||
<div className="leftControls">
|
||||
<button className="iconBtn">☰</button>
|
||||
<div className="filter">
|
||||
<select>
|
||||
<option>Name</option>
|
||||
<option>Account</option>
|
||||
</select>
|
||||
<input placeholder="Enter search criteria here..." />
|
||||
<button className="searchBtn">Search!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rightControls">
|
||||
<button className="iconSmall">🔍</button>
|
||||
<button className="iconSmall">⬇️</button>
|
||||
<button className="iconSmall">📄</button>
|
||||
<button className="iconSmall">≡</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContactTable rows={sampleContacts} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
157
src/components/Sidebar.js
Normal file
157
src/components/Sidebar.js
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import React from "react";
|
||||
import {
|
||||
FaTachometerAlt,
|
||||
FaCalendarAlt,
|
||||
FaFileAlt,
|
||||
FaUserTie,
|
||||
FaMoneyCheckAlt,
|
||||
FaAddressBook,
|
||||
FaChartBar,
|
||||
FaTools,
|
||||
FaBell,
|
||||
FaClipboardList,
|
||||
FaCubes,
|
||||
FaMapMarkerAlt,
|
||||
} from "react-icons/fa";
|
||||
|
||||
const navItems = [
|
||||
{ label: "Dashboard", icon: <FaTachometerAlt /> },
|
||||
{ label: "Calendar", icon: <FaCalendarAlt /> },
|
||||
{ label: "Documents", icon: <FaFileAlt /> },
|
||||
{ label: "Employees", icon: <FaUserTie /> },
|
||||
{ label: "Accounts", icon: <FaMoneyCheckAlt /> },
|
||||
{ label: "Contacts", icon: <FaAddressBook /> },
|
||||
{ label: "Reports", icon: <FaChartBar /> },
|
||||
{ label: "Work Orders", icon: <FaTools /> },
|
||||
{ label: "Follow Ups", icon: <FaBell /> },
|
||||
{ label: "PM Schedules", icon: <FaClipboardList /> },
|
||||
{ label: "Assets", icon: <FaCubes /> },
|
||||
{ label: "Locations", icon: <FaMapMarkerAlt /> },
|
||||
];
|
||||
|
||||
export default function Sidebar() {
|
||||
const [selected, setSelected] = React.useState("Contacts");
|
||||
|
||||
return (
|
||||
<aside
|
||||
className="sidebar"
|
||||
style={{
|
||||
width: 250,
|
||||
height: "100vh",
|
||||
backgroundColor: "#fbfbfb", // left nav background color
|
||||
color: "#333",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: 20,
|
||||
boxSizing: "border-box",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="logoRow"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: 30,
|
||||
gap: 10,
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="logoMark"
|
||||
style={{
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
color: "#e74c3c",
|
||||
}}
|
||||
>
|
||||
SEA
|
||||
</div>
|
||||
<div
|
||||
className="logoText"
|
||||
style={{
|
||||
fontSize: 18,
|
||||
lineHeight: 1.2,
|
||||
color: "#333",
|
||||
}}
|
||||
>
|
||||
Haven
|
||||
<br />
|
||||
<span style={{ fontSize: 14, fontWeight: "normal", color: "#666" }}>
|
||||
Industries
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="navTitle"
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
marginBottom: 15,
|
||||
letterSpacing: 1.5,
|
||||
color: "#888",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
NAVIGATION
|
||||
</div>
|
||||
|
||||
<ul
|
||||
className="navList"
|
||||
style={{
|
||||
listStyle: "none",
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{navItems.map(({ label, icon }, i) => {
|
||||
const isActive = selected === label;
|
||||
return (
|
||||
<li
|
||||
key={i}
|
||||
className={`navItem ${isActive ? "active" : ""}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "10px 15px",
|
||||
marginBottom: 8,
|
||||
borderRadius: 6,
|
||||
cursor: "pointer",
|
||||
backgroundColor: isActive ? "#eee" : "transparent", // selected bg #eee
|
||||
color: "#333",
|
||||
fontWeight: isActive ? "bold" : "normal",
|
||||
userSelect: "none",
|
||||
transition: "background-color 0.2s",
|
||||
}}
|
||||
onClick={() => setSelected(label)}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive) e.currentTarget.style.backgroundColor = "#f5f5f5";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!isActive) e.currentTarget.style.backgroundColor = "transparent";
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="glyph"
|
||||
style={{
|
||||
marginRight: 12,
|
||||
fontSize: 18,
|
||||
display: "inline-flex",
|
||||
width: 20,
|
||||
justifyContent: "center",
|
||||
color: isActive ? "#999" : "#aaa",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<span>{label}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
20
src/components/Topbar.js
Normal file
20
src/components/Topbar.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import React from "react";
|
||||
|
||||
export default function Topbar(){
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div className="topLeft">
|
||||
<button className="hamburger">☰</button>
|
||||
<div className="searchBox">
|
||||
<input placeholder="Search by name or number..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="topRight">
|
||||
<div className="notif">🔔<span className="dot">1</span></div>
|
||||
<div className="username">Adam Moussa</div>
|
||||
<div className="avatar">AM</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
30
src/constants.js
Normal file
30
src/constants.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export const ADD = "add";
|
||||
export const EDIT = "edit";
|
||||
|
||||
export const API_ERROR_MESSAGE =
|
||||
"Sorry, something went wrong. Please try again later.";
|
||||
export const API_SUCCESS_MESSAGE =
|
||||
"You changes has been successfully saved.";
|
||||
export const API_DELETE_SUCCESS_MESSAGE =
|
||||
"Item is deleted";
|
||||
|
||||
//export const API_URL = "http://console.seahavenind.com/api";
|
||||
export const API_URL = "https://localhost:7195/api";
|
||||
|
||||
|
||||
export const form_text_builder = (mode) => {
|
||||
let PRIMARY_TEXT = "";
|
||||
let SECONDARY_TEXT = "";
|
||||
let BUTTON_TEXT = "";
|
||||
|
||||
if (mode == ADD) {
|
||||
PRIMARY_TEXT = "Add an Item";
|
||||
SECONDARY_TEXT = "Add your new item below";
|
||||
BUTTON_TEXT = "Add Item";
|
||||
} else {
|
||||
PRIMARY_TEXT = "Edit an Item";
|
||||
SECONDARY_TEXT = "Edit your item below";
|
||||
BUTTON_TEXT = "Save Item";
|
||||
}
|
||||
return { PRIMARY_TEXT, SECONDARY_TEXT, BUTTON_TEXT };
|
||||
};
|
||||
9
src/data/contacts.js
Normal file
9
src/data/contacts.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
const sampleContacts = [
|
||||
{ id: 1, name: 'Johan Doe', phone: '(575) 877-7777', email: 'varucetyq@mailinator.com' },
|
||||
{ id: 2, name: 'Adam Moussa', phone: '(631) 664-3950', email: 'adam@seahavenind.com' },
|
||||
{ id: 3, name: 'test', phone: '(123) 343-444554', email: 'test@gmail.com' },
|
||||
{ id: 4, name: 'Jane K Smith', phone: '(456) 789-8328', email: 'jane@gmail.com' },
|
||||
{ id: 5, name: 'Zohan Raley', phone: '(123) 567-7688', email: 'zohan@gmail.com' },
|
||||
{ id: 6, name: 'npaltest', phone: '9999999999', email: 'amanmeutd46@gmail.com' },
|
||||
];
|
||||
export default sampleContacts;
|
||||
143
src/index.css
143
src/index.css
|
|
@ -1,13 +1,136 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
:root{
|
||||
--sidebar-w: 220px;
|
||||
--topbar-h: 64px;
|
||||
--blue:#0b4b6a;
|
||||
--muted:#f2f4f6;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
*{box-sizing:border-box}
|
||||
html,body,#root{height:100%}
|
||||
body{
|
||||
margin:0;
|
||||
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background:#f4f6f7;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.app{display:flex;min-height:100vh;align-items:stretch}
|
||||
.sidebar{
|
||||
width:var(--sidebar-w);
|
||||
background:#f1f3f4;
|
||||
border-right:1px solid #e0e3e4;
|
||||
padding:18px 12px;
|
||||
position:fixed;
|
||||
left:0;top:0;bottom:0;
|
||||
overflow:auto;
|
||||
}
|
||||
.mainArea{
|
||||
margin-left:var(--sidebar-w);
|
||||
flex:1;
|
||||
min-height:100vh;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.topbar{
|
||||
height:var(--topbar-h);
|
||||
background:var(--blue);
|
||||
color:white;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
padding:0 50px;
|
||||
position:sticky;
|
||||
top:0;
|
||||
z-index:10;
|
||||
}
|
||||
.topbar .hamburger{background:transparent;border:none;color:white;font-size:20px;margin-right:12px}
|
||||
.topbar .searchBox{background:#083a52; padding:6px 10px;border-radius:6px;min-width:420px;}
|
||||
.topbar input{width:100%;border:none;padding:6px 8px;border-radius:4px;background:white;color:#333}
|
||||
.topRight{display:flex;align-items:center;gap:12px}
|
||||
.topRight .avatar{background:#1fa8de;color:white;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600}
|
||||
.topRight .notif{position:relative}
|
||||
.topRight .dot{position:absolute;right:-6px;top:-6px;background:#ffb400;color:#222;padding:2px 6px;border-radius:10px;font-size:11px}
|
||||
.topLeft {display: flex;}
|
||||
/* Sidebar content */
|
||||
.logoRow{display:flex;align-items:center;gap:8px;padding-bottom:16px}
|
||||
.logoMark{width:48px;height:48px;background:linear-gradient(90deg,#60c6ff,#1fa8de);color:white;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800}
|
||||
.logoText{font-size:14px;line-height:1}
|
||||
.logoText span{font-size:11px;color:#556}
|
||||
.navTitle{font-size:12px;color:#7b8588;margin:10px 6px}
|
||||
.navList{list-style:none;padding:0;margin:0}
|
||||
.navItem{display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;color:#394647;cursor:pointer}
|
||||
.navItem .glyph{display:inline-block;width:22px;text-align:center;color:#8b9496}
|
||||
.navItem:hover{background:#e9edf0}
|
||||
.navItem.active{background:#e1edf4;border-left:3px solid #0b80b5}
|
||||
|
||||
/* Content */
|
||||
.contentWrapper{padding:20px 40px;}
|
||||
|
||||
/* Contacts page */
|
||||
.contactsPage .pageTitle{font-size:18px;font-weight:600;margin-bottom:10px}
|
||||
.card.controlsCard{
|
||||
background:white;
|
||||
border-radius:4px;
|
||||
padding:18px;
|
||||
box-shadow:0 1px 0 rgba(0,0,0,0.06);
|
||||
border:1px solid #e6e9ea;
|
||||
}
|
||||
|
||||
/* controls */
|
||||
.controlsTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
|
||||
.leftControls{display:flex;align-items:center;gap:12px}
|
||||
.iconBtn{border:1px solid #d6d9da;background:#fff;padding:8px;border-radius:4px}
|
||||
.filter{display:flex;gap:8px;align-items:center}
|
||||
.filter select{padding:8px;border-radius:4px;border:1px solid #d8d8d8;background:#fff}
|
||||
.filter input{padding:8px;border-radius:4px;border:1px solid #d8d8d8;min-width:360px}
|
||||
.searchBtn{background:#0b95d4;color:#fff;border:none;padding:8px 12px;border-radius:4px}
|
||||
.rightControls{display:flex;gap:8px;align-items:center}
|
||||
.iconSmall{background:transparent;border:1px solid #e0e0e0;padding:6px;border-radius:6px;cursor:pointer}
|
||||
|
||||
/* table */
|
||||
.tableWrap{margin-top:6px}
|
||||
.contactTable{width:100%;border-collapse:collapse}
|
||||
.contactTable thead th{
|
||||
text-align:left;padding:12px;background:#9fb2bf;color:white;font-weight:600;border-bottom:1px solid #d5d8d9;
|
||||
}
|
||||
.contactTable thead .colCheck{width:48px}
|
||||
.contactTable tbody td{border-bottom:1px solid #eee;padding:14px 12px;vertical-align:middle}
|
||||
.contactTable tbody tr:nth-child(odd){background:#fff}
|
||||
.contactTable tbody tr:nth-child(even){background:#fbfbfb}
|
||||
.rowName{display:flex;align-items:center;gap:12px}
|
||||
.avatarThumb{width:40px;height:40px;border-radius:6px;background:#f0b380;border:1px solid #9b6b45;display:flex;align-items:center;justify-content:center;color:#4b2b18;font-weight:700}
|
||||
.nameText .nameLink{color:#0b6fa1;font-weight:600}
|
||||
.nameText .sub{font-size:12px;color:#8f9a9f}
|
||||
.mono{font-family:monospace;color:#444}
|
||||
.link{color:#0a8ab6}
|
||||
.actionsCol{width:120px;text-align:right}
|
||||
|
||||
/* footer of table */
|
||||
.tableFooter{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:8px 6px;color:#666;font-size:13px}
|
||||
.tableFooter select{margin-left:8px;padding:6px}
|
||||
|
||||
/* rightPanel */
|
||||
.rightPanel{
|
||||
width:320px;
|
||||
position:fixed;
|
||||
right:0;
|
||||
top:0;
|
||||
bottom:0;
|
||||
background:#222b34;
|
||||
color:white;
|
||||
border-left:1px solid rgba(255,255,255,0.04);
|
||||
padding:18px;
|
||||
overflow:auto;
|
||||
}
|
||||
.panelHeader{background:#623be3;padding:12px;border-radius:6px;text-align:center;margin-bottom:14px;font-weight:700;color:white}
|
||||
.panelBody{padding:6px}
|
||||
.panelInput{width:100%;padding:10px;border-radius:4px;border:none;background:#333;color:#ddd;margin-bottom:12px}
|
||||
.panelRow{margin:10px 0}
|
||||
.allianceList{margin-top:14px}
|
||||
.allianceRow{display:flex;align-items:center;gap:10px;padding:8px;background:#2a3138;border-radius:6px;margin-bottom:10px;justify-content:space-between}
|
||||
.pill{padding:6px 10px;border-radius:6px;color:white;font-weight:700}
|
||||
.pill.blue{background:#6fb3e6}
|
||||
.pill.purple{background:#7f63e3}
|
||||
.pill.green{background:#2b9b59}
|
||||
.numbers{color:#d5dbe0}
|
||||
1
src/index.html
Normal file
1
src/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<div id="root"></div>
|
||||
21
src/index.js
21
src/index.js
|
|
@ -1,17 +1,12 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
|
|
|
|||
74
src/pages/ContactsPage.js
Normal file
74
src/pages/ContactsPage.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import React, { useState } from 'react';
|
||||
import {
|
||||
Paper, Typography, Box, Table, TableHead, TableRow, TableCell,
|
||||
TableBody, TableContainer, IconButton, Checkbox, TablePagination, TextField, Button
|
||||
} from '@mui/material';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
|
||||
import sampleContacts from '../data/contacts';
|
||||
|
||||
export default function ContactsPage() {
|
||||
const [rows] = useState(sampleContacts);
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
const filtered = rows.filter(r => r.name.toLowerCase().includes(query.toLowerCase()) || r.email.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
return (
|
||||
<Paper elevation={1} sx={{ p: 2 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h6">Contacts</Typography>
|
||||
<Button variant="contained" startIcon={<AddIcon />}>Add</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 2, display: 'flex', gap: 1 }}>
|
||||
<TextField placeholder="Search contacts..." variant="outlined" size="small" value={query} onChange={(e)=>setQuery(e.target.value)} sx={{ flex: 1 }} />
|
||||
<Button variant="outlined">Filter</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead sx={{ bgcolor: '#9fb0bd' }}>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox"><Checkbox /></TableCell>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Phone Number</TableCell>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell padding="checkbox"><Checkbox /></TableCell>
|
||||
<TableCell>{row.name}</TableCell>
|
||||
<TableCell>{row.phone}</TableCell>
|
||||
<TableCell>{row.email}</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton size="small"><EditIcon fontSize="small" /></IconButton>
|
||||
<IconButton size="small"><DeleteIcon fontSize="small" /></IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{filtered.length === 0 && <TableRow><TableCell colSpan={5} align="center">No contacts</TableCell></TableRow>}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<TablePagination
|
||||
component="div"
|
||||
count={filtered.length}
|
||||
page={page}
|
||||
onPageChange={(e, p) => setPage(p)}
|
||||
rowsPerPage={rowsPerPage}
|
||||
onRowsPerPageChange={(e) => { setRowsPerPage(parseInt(e.target.value, 10)); setPage(0); }}
|
||||
rowsPerPageOptions={[5,10,25,50]}
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
4
src/pages/contacts/edit/api.js
Normal file
4
src/pages/contacts/edit/api.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import {post } from "../../../apiUtil";
|
||||
import { API_URL } from '../../../constants';
|
||||
|
||||
export const editContact = (item) => post(`${API_URL}/Contact/EditContacts`, item)
|
||||
180
src/pages/contacts/form/ContactFormPage.css
Normal file
180
src/pages/contacts/form/ContactFormPage.css
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
/* Wrapper & card */
|
||||
.contactFormWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 25px 20px;
|
||||
background: #f5f6fa;
|
||||
min-height: 100vh;
|
||||
font-family: "Roboto", "Open Sans", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.formCard {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
padding: 20px 22px 26px;
|
||||
border: 1px solid #e6e9ee;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.formHeader {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.formHeader h2 {
|
||||
margin: 0;
|
||||
color: #1f3b4d;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Section titles */
|
||||
.sectionTitle {
|
||||
margin: 0 0 12px;
|
||||
color: #2b2f3b;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Account widget (assignment) */
|
||||
.account-widget {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
background: #fbfcfd;
|
||||
border: 1px dashed #d6e6ef;
|
||||
color: #0a4b6b;
|
||||
}
|
||||
.account-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #e9f4fb;
|
||||
color: #0077a8;
|
||||
border-radius: 4px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:20px;
|
||||
}
|
||||
.account-info .account-title {
|
||||
font-weight:700;
|
||||
}
|
||||
.account-info .account-action {
|
||||
color: #0b63a7;
|
||||
font-weight:700;
|
||||
margin-top:4px;
|
||||
}
|
||||
.account-sub {
|
||||
color:#667085;
|
||||
font-size:12px;
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
/* Form layout */
|
||||
.contactFormBody {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 12px 18px;
|
||||
align-items: start;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Form groups */
|
||||
.formGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.formGroup.fullWidth {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Labels and controls */
|
||||
.formLabel {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #253244;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.required { color: #d93025; margin-left: 4px; }
|
||||
|
||||
.formControl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
color: #1f2937;
|
||||
background: #fff;
|
||||
border: 1px solid #d6dbe4;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.formControl:focus {
|
||||
outline: none;
|
||||
border-color: #0b78b0;
|
||||
box-shadow: 0 0 0 4px rgba(11,120,176,0.08);
|
||||
}
|
||||
|
||||
/* Hints / muted */
|
||||
.muted {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.formHint {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Form actions */
|
||||
.formActions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #e9eef3;
|
||||
padding-top: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.formNote {
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btnPrimary {
|
||||
background-color: #198754;
|
||||
border: 1px solid #198754;
|
||||
color: #fff;
|
||||
padding: 10px 18px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btnPrimary:disabled {
|
||||
background-color: #c9c9c9;
|
||||
border-color: #c9c9c9;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.contactFormBody {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.contactFormBody {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.formCard {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
293
src/pages/contacts/form/ContactFormPage.js
Normal file
293
src/pages/contacts/form/ContactFormPage.js
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
import React, { useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import { toast } from "react-toastify";
|
||||
import "./ContactFormPage.css";
|
||||
import { addContact } from "../new/api";
|
||||
import { editContact } from "../edit/api";
|
||||
|
||||
const ContactFormPage = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const isEdit = !!id;
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [contact, setContact] = useState({});
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked } = e.target;
|
||||
setContact((prev) => ({
|
||||
...prev,
|
||||
[name]: type === "checkbox" ? checked : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!contact.FirstName || !contact.LastName) {
|
||||
toast.error("First and last name are required.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// API call based on mode
|
||||
const payload = {
|
||||
...contact,
|
||||
Details: {
|
||||
Gender: contact.Gender,
|
||||
DateOfBirth: contact.DateOfBirth,
|
||||
PrivacySetting: contact.PrivacySetting,
|
||||
About: contact.About,
|
||||
Tags: contact.Tags,
|
||||
},
|
||||
};
|
||||
|
||||
if (isEdit) {
|
||||
await editContact(payload);
|
||||
toast.success("Contact updated successfully!");
|
||||
} else {
|
||||
await addContact(payload);
|
||||
toast.success("Contact created successfully!");
|
||||
}
|
||||
|
||||
navigate("/contacts");
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("Something went wrong while saving the contact.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="contactFormWrapper">
|
||||
<div className="formCard">
|
||||
<div className="formHeader">
|
||||
<h2>{isEdit ? "Edit Contact" : "Create a Contact"}</h2>
|
||||
</div>
|
||||
|
||||
<form className="contactForm" onSubmit={handleSubmit} noValidate>
|
||||
{/* Assignment */}
|
||||
<section className="section assignment">
|
||||
<h5 className="sectionTitle">Assignment</h5>
|
||||
<div className="account-widget">
|
||||
<div className="account-icon">🔍</div>
|
||||
<div className="account-info">
|
||||
<div className="account-title">No Account selected</div>
|
||||
<div className="account-action">Click here to search Accounts</div>
|
||||
<div className="account-sub">Use this to identify the company the Contact works for, or is otherwise associated with</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
{/* General Details */}
|
||||
<section className="section">
|
||||
<h5 className="sectionTitle">General Details</h5>
|
||||
|
||||
<div className="contactFormBody">
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">First Name <span className="required">*</span></label>
|
||||
<input
|
||||
name="FirstName"
|
||||
className="formControl"
|
||||
placeholder="Enter first name"
|
||||
value={contact.FirstName || ""}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Middle Name</label>
|
||||
<input
|
||||
name="MiddleName"
|
||||
className="formControl"
|
||||
placeholder="Enter middle name"
|
||||
value={contact.MiddleName || ""}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Last Name <span className="required">*</span></label>
|
||||
<input
|
||||
name="LastName"
|
||||
className="formControl"
|
||||
placeholder="Enter last name"
|
||||
value={contact.LastName || ""}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Title</label>
|
||||
<input
|
||||
name="Title"
|
||||
className="formControl"
|
||||
placeholder="Enter a title"
|
||||
value={contact.Title || ""}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Contact Type</label>
|
||||
<select
|
||||
name="ContactTypeID"
|
||||
className="formControl"
|
||||
value={contact.ContactTypeID || ""}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Select a Contact Type</option>
|
||||
<option value="5">Corporate</option>
|
||||
<option value="6">Store Mgr</option>
|
||||
<option value="7">Facilities</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Gender</label>
|
||||
<select name="Gender" className="formControl" value={contact.Gender || ""} onChange={handleChange}>
|
||||
<option value="">Select a gender</option>
|
||||
<option value="0">Male</option>
|
||||
<option value="1">Female</option>
|
||||
<option value="2">Not specified</option>
|
||||
<option value="3">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Date of Birth</label>
|
||||
<input type="date" name="DateOfBirth" className="formControl" value={contact.DateOfBirth || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Territory <span className="required">*</span></label>
|
||||
<select name="TerritoryID" className="formControl" value={contact.TerritoryID || "-1"} onChange={handleChange}>
|
||||
<option value="">Select a Territory</option>
|
||||
<option value="-1">No Territory</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Owner <span className="required">*</span></label>
|
||||
<select name="OwnerEmployeeID" className="formControl" value={contact.OwnerEmployeeID || "63"} onChange={handleChange}>
|
||||
<option value="63">Nirmalya Pal</option>
|
||||
<option value="64">Officetrax Test Employee</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Privacy Setting <span className="required">*</span></label>
|
||||
<select name="PrivacySetting" className="formControl" value={contact.PrivacySetting || "PublicReadWrite"} onChange={handleChange}>
|
||||
<option value="PublicReadWrite">Public read/write</option>
|
||||
<option value="PublicReadOnly">Public read only</option>
|
||||
<option value="Private">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup fullWidth">
|
||||
<label className="formLabel">About</label>
|
||||
<input name="About" className="formControl" placeholder="Enter details about the contact" value={contact.About || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup fullWidth">
|
||||
<label className="formLabel">Tags</label>
|
||||
<input name="Tags" className="formControl" placeholder="Enter tags (comma separated)" value={contact.Tags || ""} onChange={handleChange} />
|
||||
<div className="formHint">Press Enter after each tag to complete it.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
{/* Address */}
|
||||
<section className="section">
|
||||
<h5 className="sectionTitle">Address</h5>
|
||||
|
||||
<div className="contactFormBody">
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Address 1</label>
|
||||
<input name="Address1" className="formControl" placeholder="Enter street address" value={contact.Address1 || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Address 2</label>
|
||||
<input name="Address2" className="formControl" placeholder="Enter apt/unit/suite number" value={contact.Address2 || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">City</label>
|
||||
<input name="City" className="formControl" placeholder="Enter city name" value={contact.City || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Zip/Postal Code</label>
|
||||
<input name="Zip" className="formControl" placeholder="Enter code" value={contact.Zip || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Country</label>
|
||||
<select name="Country" className="formControl" value={contact.Country || "US"} onChange={handleChange}>
|
||||
<option value="">Select a Country</option>
|
||||
<option value="US">United States</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">State / Province</label>
|
||||
<select name="State" className="formControl" value={contact.State || ""} onChange={handleChange}>
|
||||
<option value="">Select a State/Province</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="NY">New York</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
{/* Social Media */}
|
||||
<section className="section">
|
||||
<h5 className="sectionTitle">Social Media</h5>
|
||||
<p className="muted">Enter the full URL of the Social Media profile you wish to link.</p>
|
||||
|
||||
<div className="contactFormBody">
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Facebook</label>
|
||||
<input name="FacebookUrl" className="formControl" placeholder="Enter Facebook URL" value={contact.FacebookUrl || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">LinkedIn</label>
|
||||
<input name="LinkedInUrl" className="formControl" placeholder="Enter LinkedIn URL" value={contact.LinkedInUrl || ""} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="formGroup">
|
||||
<label className="formLabel">Twitter</label>
|
||||
<input name="TwitterUrl" className="formControl" placeholder="Enter Twitter URL" value={contact.TwitterUrl || ""} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
{/* Submit */}
|
||||
<div className="formActions">
|
||||
<div className="formNote">All fields marked with <span className="required">*</span> are required.</div>
|
||||
<button className="btnPrimary" type="submit" disabled={loading}>
|
||||
{loading ? "Saving..." : isEdit ? "Update Contact" : "Create Contact"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactFormPage;
|
||||
22
src/pages/contacts/list/Delete.js
Normal file
22
src/pages/contacts/list/Delete.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React from "react";
|
||||
import { deleteContact } from "./api";
|
||||
|
||||
export default function DeleteModal({ open, item, onClose, onSuccess }) {
|
||||
if(!open) return null;
|
||||
const handleDelete=()=>{ deleteContact(item.id).then(()=>onSuccess()); };
|
||||
return (
|
||||
<div className="modalRoot">
|
||||
<div className="modalScrim" onClick={onClose}/>
|
||||
<div className="modalCard">
|
||||
<div className="modalHeader"><div className="modalTitle">Delete Item?</div><button onClick={onClose}>✕</button></div>
|
||||
<div className="modalBody">
|
||||
<div>Are you sure you want to delete this contact?</div>
|
||||
<div className="modalActions">
|
||||
<button onClick={onClose}>Cancel</button>
|
||||
<button onClick={handleDelete}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
0
src/pages/contacts/list/Form.js
Normal file
0
src/pages/contacts/list/Form.js
Normal file
63
src/pages/contacts/list/List.js
Normal file
63
src/pages/contacts/list/List.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import React, { useState } from "react";
|
||||
import useItems from "./useItems";
|
||||
import Table from "./Table";
|
||||
import "./styles.css";
|
||||
|
||||
export default function ContactsList() {
|
||||
const { rows, search, setSearch, page, setPage, pageSize, setPageSize,
|
||||
totalCount, loading, err, reload } = useItems();
|
||||
|
||||
const [formState, setFormState] = useState({ open: false, item: null });
|
||||
const [delState, setDelState] = useState({ open: false, item: null });
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
|
||||
const onSubmitSuccess = () => { setFormState({ open: false, item: null }); reload(); };
|
||||
const onDeleteSuccess = () => { setDelState({ open: false, item: null }); reload(); };
|
||||
|
||||
return (
|
||||
<section className="contactsPage">
|
||||
<div className="pageTitle">Contacts</div>
|
||||
<div className="card controlsCard">
|
||||
<div className="controlsTop">
|
||||
<div className="leftControls">
|
||||
<div className="filter">
|
||||
<select defaultValue="Name">
|
||||
<option>Name</option>
|
||||
<option>Account</option>
|
||||
<option>Owner</option>
|
||||
<option>Email</option>
|
||||
<option>Phone</option>
|
||||
<option>Title</option>
|
||||
</select>
|
||||
<input value={search} onChange={(e)=>setSearch(e.target.value)} placeholder="Enter search criteria here..." />
|
||||
<button className="searchBtn">Search!</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rightControls">
|
||||
<button className="iconSmall" title="New Contact" onClick={() => setFormState({ open: true, item: null })}>＋</button>
|
||||
</div>
|
||||
</div>
|
||||
<Table loading={loading} error={err} rows={rows} onEdit={(item)=> setFormState({ open: true, item })}
|
||||
onDelete={(item)=> setDelState({ open: true, item })} page={page} setPage={setPage}
|
||||
pageSize={pageSize} setPageSize={setPageSize} totalCount={totalCount} totalPages={totalPages} />
|
||||
</div>
|
||||
{/* {formState.open && (
|
||||
<Form
|
||||
open={formState.open}
|
||||
item={formState.item}
|
||||
onClose={() => setFormState({ open: false, item: null })}
|
||||
onSuccess={onSubmitSuccess}
|
||||
/>
|
||||
)} */}
|
||||
|
||||
{/* {delState.open && (
|
||||
<DeleteModal
|
||||
open={delState.open}
|
||||
item={delState.item}
|
||||
onClose={() => setDelState({ open: false, item: null })}
|
||||
onSuccess={onDeleteSuccess}
|
||||
/>
|
||||
)} */}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
37
src/pages/contacts/list/Table.js
Normal file
37
src/pages/contacts/list/Table.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react";
|
||||
|
||||
export default function Table({ loading, error, rows, onEdit, onDelete,
|
||||
page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
|
||||
return (
|
||||
<div className="tableWrap">
|
||||
{error && <div style={{ color: "#b00020" }}>{error}</div>}
|
||||
<table className="contactTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" /></th>
|
||||
<th>Name</th><th>Account</th><th>Title</th><th>Email</th><th>Phone</th><th>Owner</th><th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? <tr><td colSpan={8}>Loading…</td></tr> :
|
||||
rows.length === 0 ? <tr><td colSpan={8}>No records found.</td></tr> :
|
||||
rows.map(r => (
|
||||
<tr key={r.id}>
|
||||
<td><input type="checkbox" /></td>
|
||||
<td>{r.name}</td>
|
||||
<td>{r.account}</td>
|
||||
<td>{r.title}</td>
|
||||
<td>{r.email}</td>
|
||||
<td>{r.phoneNumber}</td>
|
||||
<td>{r.owner}</td>
|
||||
<td>
|
||||
<button className="iconSmall" onClick={()=>onEdit(r)}>✎</button>
|
||||
<button className="iconSmall" onClick={()=>onDelete(r)}>🗑</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/contacts/list/api.js
Normal file
27
src/pages/contacts/list/api.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { get, post } from "../../../apiUtil";
|
||||
import { API_URL } from '../../../constants';
|
||||
|
||||
|
||||
export const fetchContactsPaged = async ({ search = "", page = 1, pageSize = 12 }) => {
|
||||
const res = await get(`${API_URL}/Contact/GetContactList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`);
|
||||
const rows = (res?.data || res?.Data || []).map(x => ({
|
||||
id: x.Id,
|
||||
name: x.Name,
|
||||
account: x.Account ?? "",
|
||||
title: x.Title ?? "",
|
||||
email: x.email ?? x.Email ?? "",
|
||||
phoneNumber: x.phone ?? x.PhoneNumber ?? "",
|
||||
owner: x.Owner ?? "",
|
||||
}));
|
||||
return {
|
||||
rows,
|
||||
page: res?.PageNumber ?? 1,
|
||||
pageSize: res?.PageSize ?? pageSize,
|
||||
totalCount: res?.TotalCount ?? rows.length,
|
||||
totalPages: res?.TotalPages ?? 1,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export const deleteContact = (id) =>
|
||||
get(`/api/Contact/DeleteContacts?id=${id}`);
|
||||
6
src/pages/contacts/list/styles.css
Normal file
6
src/pages/contacts/list/styles.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* CSS for modals, table, and controls – minimal to work with existing global styles */
|
||||
.contactTable { width:100%; border-collapse:collapse; }
|
||||
.contactTable th, .contactTable td { border:1px solid #ddd; padding:8px; }
|
||||
.modalRoot{position:fixed;inset:0;z-index:1000;}
|
||||
.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
|
||||
.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
|
||||
31
src/pages/contacts/list/useItems.js
Normal file
31
src/pages/contacts/list/useItems.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { fetchContactsPaged } from "./api";
|
||||
|
||||
export default function useItems() {
|
||||
const [rows, setRows] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(12);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
const reload = useCallback(() => {
|
||||
setLoading(true);
|
||||
setErr("");
|
||||
fetchContactsPaged({ search, page, pageSize })
|
||||
.then(({ rows, totalCount }) => {
|
||||
setRows(rows);
|
||||
setTotalCount(totalCount);
|
||||
})
|
||||
.catch((e) => setErr(e.message || "Failed to load"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [search, page, pageSize]);
|
||||
|
||||
useEffect(() => { reload(); }, [reload]);
|
||||
|
||||
return useMemo(() => ({
|
||||
rows, search, setSearch, page, setPage, pageSize, setPageSize,
|
||||
totalCount, loading, err, reload
|
||||
}), [rows, search, page, pageSize, totalCount, loading, err, reload]);
|
||||
}
|
||||
4
src/pages/contacts/new/api.js
Normal file
4
src/pages/contacts/new/api.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import {post } from "../../../apiUtil";
|
||||
import { API_URL } from '../../../constants';
|
||||
|
||||
export const addContact = (item) => post(`${API_URL}/Contact/AddContacts`, item);
|
||||
12
src/setupProxy.js
Normal file
12
src/setupProxy.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
const { createProxyMiddleware } = require('http-proxy-middleware');
|
||||
|
||||
module.exports = function(app) {
|
||||
app.use(
|
||||
'/api',
|
||||
createProxyMiddleware({
|
||||
//target: 'http://console.seahavenind.com',
|
||||
target: 'https://localhost:7195',
|
||||
changeOrigin: true,
|
||||
})
|
||||
);
|
||||
};
|
||||
7
src/site.css
Normal file
7
src/site.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600&family=Nunito:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap");
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
32
src/tokenUtility.js
Normal file
32
src/tokenUtility.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
const tokenKey = "token";
|
||||
|
||||
export const setUser = (user) => {
|
||||
if (user && user.token) {
|
||||
window.localStorage.setItem(tokenKey, JSON.stringify(user));
|
||||
}
|
||||
else {
|
||||
window.localStorage.removeItem(tokenKey);
|
||||
}
|
||||
}
|
||||
|
||||
export const getAccessToken = () => {
|
||||
let result = window.localStorage.getItem(tokenKey);
|
||||
if (!result) {
|
||||
return "";
|
||||
}
|
||||
const user = JSON.parse(result);
|
||||
return `Bearer ${user.token}`;
|
||||
}
|
||||
|
||||
export const getUser = () => {
|
||||
let result = window.localStorage.getItem(tokenKey);
|
||||
if (!result) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return JSON.parse(result);
|
||||
}
|
||||
|
||||
export const removeToken = () => {
|
||||
window.localStorage.removeItem(tokenKey);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue