diff --git a/src/pages/contacts/form/ContactFormPage.css b/src/pages/contacts/form/ContactFormPage.css index 790e2fc1..24d39ed7 100644 --- a/src/pages/contacts/form/ContactFormPage.css +++ b/src/pages/contacts/form/ContactFormPage.css @@ -1,180 +1,152 @@ -/* Wrapper & card */ -.contactFormWrapper { - display: flex; - justify-content: center; - padding: 25px 20px; - background: #f5f6fa; +/* Contact Form Page */ +.contactFormPage { + background: #f5f5f5; min-height: 100vh; - font-family: "Roboto", "Open Sans", Arial, sans-serif; + padding: 0; } -.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; +.panel { + margin-bottom: 20px; + background-color: #fff; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } -/* 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; +.panel-default { + border-color: #ddd; } -/* Section titles */ -.sectionTitle { - margin: 0 0 12px; - color: #2b2f3b; - font-size: 13px; +.panel-connected { + border-radius: 0; + border: none; + box-shadow: none; +} + +.panel-body { + padding: 15px; +} + +/* Breadcrumb */ +.breadcrumb { + padding: 8px 15px; + margin-bottom: 20px; + list-style: none; + background-color: #f5f5f5; + border-radius: 4px; +} + +.breadcrumb-alt { + background-color: white; + border-bottom: 1px solid #e5e5e5; + padding: 10px 20px; + margin: 0 0 20px 0; + border-radius: 0; +} + +.breadcrumb > li { + display: inline-block; +} + +.breadcrumb > li + li:before { + content: ">\00a0"; + padding: 0 5px; + color: #ccc; +} + +.breadcrumb > li a { + color: #0088cc; + text-decoration: none; +} + +.breadcrumb > li a:hover { + text-decoration: underline; +} + +.breadcrumb > .active { + color: #00a0d1; + font-weight: bold; + cursor: default; +} + +/* Container */ +.container { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +/* Form Header */ +.header { + margin-bottom: 15px; +} + +.heading { + margin: 0 0 10px 0; + font-weight: 300; + line-height: 1.1; + color: #333; +} + +.heading.thin { + font-weight: 300; + font-size: 24px; + display: flex; + align-items: center; + gap: 10px; +} + +.heading.text-uppercase { 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; + margin-bottom: 15px; } -/* Responsive adjustments */ -@media (max-width: 992px) { - .contactFormBody { - grid-template-columns: repeat(2, 1fr); - } +.text-primary { + color: #0088cc; } -@media (max-width: 640px) { - .contactFormBody { - grid-template-columns: 1fr; - } - .formCard { - padding: 16px; - } +.fa-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} + +.fa-stack-1x, +.fa-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} + +.fa-stack-2x { + font-size: 2em; +} + +.fa-stack-1x { + font-size: 1em; + line-height: inherit; +} + +.fa-inverse { + color: #fff; +} + +/* Form Groups */ +.form-group { + margin-bottom: 15px; + position: relative; +} + +/* Row and Columns */ +.row { + margin-right: -15px; + margin-left: -15px; + display: flex; + flex-wrap: wrap; } \ No newline at end of file diff --git a/src/pages/contacts/form/ContactFormPage.js b/src/pages/contacts/form/ContactFormPage.js new file mode 100644 index 00000000..ed326b69 --- /dev/null +++ b/src/pages/contacts/form/ContactFormPage.js @@ -0,0 +1,673 @@ +import React, { useState, useEffect } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import "./ContactFormPage.css"; + +const ContactFormPage = () => { + const navigate = useNavigate(); + const { id } = useParams(); + const isEdit = Boolean(id); + + const [formData, setFormData] = useState({ + firstName: "", + middleName: "", + lastName: "", + title: "", + contactType: "", + gender: "", + dateOfBirth: "", + territory: "", + owner: "", + privacySetting: "PublicReadWrite", + about: "", + tags: "", + street: "", + streetLineTwo: "", + city: "", + zip: "", + country: "US", + state: "", + county: "", + timeZone: "Eastern Standard Time", + smsAddress: "", + website: "", + facebookUrl: "", + linkedInUrl: "", + twitterUrl: "", + }); + + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (isEdit) { + // TODO: Fetch contact data by ID + // For now, using mock data + setFormData({ + firstName: "John", + middleName: "A", + lastName: "Doe", + title: "Manager", + contactType: "", + gender: "", + dateOfBirth: "", + territory: "", + owner: "", + privacySetting: "PublicReadWrite", + about: "", + tags: "", + street: "", + streetLineTwo: "", + city: "", + zip: "", + country: "US", + state: "", + county: "", + timeZone: "Eastern Standard Time", + smsAddress: "", + website: "", + facebookUrl: "", + linkedInUrl: "", + twitterUrl: "", + }); + } + }, [isEdit, id]); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleSave = async (e) => { + e.preventDefault(); + setLoading(true); + + try { + // TODO: Implement actual save logic + console.log("Saving contact:", formData); + setTimeout(() => { + setLoading(false); + navigate("/contacts"); + }, 1000); + } catch (error) { + console.error("Error saving contact:", error); + setLoading(false); + } + }; + + // eslint-disable-next-line no-unused-vars + const handleCancel = () => { + navigate("/contacts"); + }; + + return ( +
+
+
+
    +
  1. + { + e.preventDefault(); + navigate("/contacts"); + }} + > + Contacts + +
    2. +
  2. {isEdit ? "Edit" : "Create"}
    3. +
+ +
+
+ {/* Page Header */} +
+
+

+ + + + + + {isEdit ? "Edit a Contact" : "Create a Contact"} + +

+
+
+ + {/* General Details Section */} +
+
+
+ General Details +
+
+
+
+
+ 50 + + +
+
+
+
+ 50 + + +
+
+
+
+ 50 + + +
+
+
+
+
+
+ 50 + + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + + + Press Enter after each tag to complete it. + +
+
+ +
+ + {/* Address Section */} +
+
+
+ Address +
+
+
+
+
+ 250 + + +
+
+
+
+ 250 + + +
+
+
+
+
+
+ 100 + + +
+
+
+
+ 20 + + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+ + {/* Phone & Email Communication Section */} +
+
+
+ Phone & Email Communication +
+
+
+ +

+ Add phone numbers for this contact +

+
+
+ +

+ Add email addresses for this contact +

+
+
+ +
+ + {/* Additional Details Section */} +
+
+
+ Additional Details +
+
+
+
+
+ + +
+
+
+
+ +
+ + + + +
+ + Do not include brackets or dashes for the number. + +
+
+
+
+ 2048 + + + + Make sure to include the protocol (http://) + +
+
+
+
+ +
+ + {/* Social Media Section */} +
+
+
+ Social Media +
+
+

+ Enter the full URL of the Social Media profile you wish to + link. +

+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+ + {/* Action Buttons */} +
+ + All fields marked with a are + required. + + +
+
+
+
+
+
+ ); +}; + +export default ContactFormPage; +