+
+
+
+
+
+
+ 
+
+
+
+
+ + Around the Horn +
++ Brewing Company +
+
+
+
+
+ + Primary Contact +
++ Thomas Hardy +
++ Sales Representative +
+
+
+ + Phone +
++ (123) 456-7890 +
+
+
+ + Billing Address +
++ 120 Hanover Sq. +
+
+
+ + London, WA1 1DP +
++ UK +
+
+
+ + Website +
++ www.aroundthehorn.com +
+
+
+ + Account Owner +
++ Sandy Anderson +
+
+
+ `;
+ }
+}
diff --git a/src/app/accounts/accounts.test.ts b/src/app/accounts/accounts.test.ts
new file mode 100644
index 0000000..850d0ff
--- /dev/null
+++ b/src/app/accounts/accounts.test.ts
@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import Accounts from './accounts.js';
+
+describe('Accounts', () => {
+ it('
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contracts (2)
+
+
+
+
+
+
+
+
+
+
+
+ Related
+
+
+
+
+
+ Details
+
+
+
+
+
+ News
+
+
+
+
+
+ Related Contacts (1)
+
+
+
+
+
+
+ + Account Name: +
++ Thomas Hardy +
+
+
+ + Title: +
++ Owner +
+
+
+ + Direct: +
+
+
+ Opportunities (1)
+
+
+
+
+
+
+ + Stage: +
++ Qualification +
+
+
+ + Amount: +
++ Owner +
+
+
+ + Close Date: +
++ 9/12/2022 +
++ No cases filed. +
+ Cases (0) ++ No notes added. +
+ Notes (0) ++ No files uploaded +
+ Files (0) +
+ 
+
+
+ + Remove the "demo-content" container, and add your own content. +
+
+
+
+
+ + Remove the "demo-content" container, and add your own content. +
+
+
+
+
+
+
+ Activity
+
+
+
+
+
+ Conversations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Upcoming Events (3)
+
+
+
+
+
+
+
+
+
+
+
+ Zoom Meeting
+
+
+
+
+ + Project Intro +
+
+
+ + 11/1/2022 +
++ - +
++ 10am +
+
+
+
+
+ On Site Meeting
+
+
+
+
+ + Sync Meeting +
+
+
+ + 11/7/2022 +
++ - +
++ 2pm +
+
+
+
+
+ Phone call
+
+
+
+
+ + Wrap Up Meeting +
+
+
+ + 11/14/2022 +
++ - +
++ 4pm +
++ No tasks added. +
+ Tasks (0) ++ No call logged. +
+ Call Logs (0) +
+
+
+
+ + Remove the "demo-content" container, and add your own content. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Accounts +
+
+
+
+
+
+ My Accounts
+
+
+ All Accounts
+
+
+
+
+
+
+
+
+
+
+ Recently Updated
+
+
+
+
+ Name
+
+
+ Recently Updated
+
+
+
+
+
+ + New Account +
+
+
+
+
+ + ACCOUNT INFORMATION +
+
+
+
+
+
+
+
+
+
+
+ -- None --
+
+
+ Analyst
+
+
+ Competitor
+
+
+ Customer
+
+
+ Integrator
+
+
+ Investor
+
+
+ Partner
+
+
+ Press
+
+
+ Prospect
+
+
+ Reseller
+
+
+ Other
+
+
+
+
+
+
+
+
+
+
+
+ -- None --
+
+
+ Agriculture
+
+
+ Apparel
+
+
+ Banking
+
+
+ Biotechnology
+
+
+ Chemicals
+
+
+ Communications
+
+
+ Construction
+
+
+
+
+ Self Employed
+
+
+ 1-10
+
+
+ 11-50
+
+
+ 51-250
+
+
+ +250
+
+
+
+
+
+ + Account Owner +
++ Andrea Silveira +
+
+
+
+
+
+
+
+
+
+ + BILLING INFORMATION +
+
+
+
+
+
+ Country 1
+
+
+ Country 1
+
+
+ Country 1
+
+
+ Country 1
+
+
+ Country 1
+
+
+
+
+
+
+
+
+
+
+ + SHIPPING INFORMATION +
+
+
+
+
+
+ Country 1
+
+
+ Country 1
+
+
+ Country 1
+
+
+ Country 1
+
+
+ Country 1
+
+
+
+
+
+ Cancel
+
+
+ Save
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ ${this.cRMAppDataTable1?.map((item) => html`
+
+
+ `)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ }
+
+ firstUpdated() {
+ const outlet = this.shadowRoot?.querySelector('router-outlet');
+ const router = new Router(outlet);
+ router.setRoutes(routes);
+ }
+}
diff --git a/src/app/calendar/calendar.test.ts b/src/app/calendar/calendar.test.ts
new file mode 100644
index 0000000..6156e30
--- /dev/null
+++ b/src/app/calendar/calendar.test.ts
@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import Calendar from './calendar.js';
+
+describe('Calendar', () => {
+ it('Home
+ Accounts
+ Contacts
+ Contracts
+ Reports
+ Calendar
+ Tasks
+
+ 
+
+ `;
+ }
+}
diff --git a/src/app/contacts/contacts.test.ts b/src/app/contacts/contacts.test.ts
new file mode 100644
index 0000000..c69aff8
--- /dev/null
+++ b/src/app/contacts/contacts.test.ts
@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import Contacts from './contacts.js';
+
+describe('Contacts', () => {
+ it('
+ + Start building! +
++ Remove the "demo-content" container, and add your own content. +
+
+
+
+ `;
+ }
+}
diff --git a/src/app/contracts/contracts.test.ts b/src/app/contracts/contracts.test.ts
new file mode 100644
index 0000000..dbd596f
--- /dev/null
+++ b/src/app/contracts/contracts.test.ts
@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import Contracts from './contracts.js';
+
+describe('Contracts', () => {
+ it('
+ + Start building! +
++ Remove the "demo-content" container, and add your own content. +
+
+
+
+ `;
+ }
+}
diff --git a/src/app/home/home.test.ts b/src/app/home/home.test.ts
new file mode 100644
index 0000000..abc508b
--- /dev/null
+++ b/src/app/home/home.test.ts
@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import Home from './home.js';
+
+describe('Home', () => {
+ it('
+ + Start building! +
++ Remove the "demo-content" container, and add your own content. +
+
+
+ `;
+ }
+}
diff --git a/src/app/models/crmapp-data/meetings-tasks-type.ts b/src/app/models/crmapp-data/meetings-tasks-type.ts
new file mode 100644
index 0000000..32cbcaa
--- /dev/null
+++ b/src/app/models/crmapp-data/meetings-tasks-type.ts
@@ -0,0 +1,10 @@
+export interface MeetingsTasksType {
+ MeetingDate: string;
+ MeetingTime: string;
+ Contact: string;
+ Company: string;
+ MeetingType: string;
+ Task: string;
+ TaskStatus: string;
+ DueDate: string;
+}
diff --git a/src/app/models/crmapp-data/table1-type.ts b/src/app/models/crmapp-data/table1-type.ts
new file mode 100644
index 0000000..657baff
--- /dev/null
+++ b/src/app/models/crmapp-data/table1-type.ts
@@ -0,0 +1,6 @@
+export interface Table1Type {
+ Client: string;
+ Contact: string;
+ Address: string;
+ Phone: string;
+}
diff --git a/src/app/models/e-commerce/revenue-type.ts b/src/app/models/e-commerce/revenue-type.ts
new file mode 100644
index 0000000..eb05b36
--- /dev/null
+++ b/src/app/models/e-commerce/revenue-type.ts
@@ -0,0 +1,4 @@
+export interface RevenueType {
+ Month: string;
+ Revenue: number;
+}
diff --git a/src/app/models/northwind/address-type.ts b/src/app/models/northwind/address-type.ts
new file mode 100644
index 0000000..49db6cd
--- /dev/null
+++ b/src/app/models/northwind/address-type.ts
@@ -0,0 +1,8 @@
+export interface AddressType {
+ street: string;
+ city: string;
+ region: string;
+ postalCode: string;
+ country: string;
+ phone: string;
+}
diff --git a/src/app/models/northwind/customers-type.ts b/src/app/models/northwind/customers-type.ts
new file mode 100644
index 0000000..b59f0fe
--- /dev/null
+++ b/src/app/models/northwind/customers-type.ts
@@ -0,0 +1,9 @@
+import { AddressType } from './address-type';
+
+export interface CustomersType {
+ customerID: string;
+ companyName: string;
+ contactName: string;
+ contactTitle: string;
+ address: AddressType;
+}
diff --git a/src/app/not-found/not-found.ts b/src/app/not-found/not-found.ts
new file mode 100644
index 0000000..f2d99f4
--- /dev/null
+++ b/src/app/not-found/not-found.ts
@@ -0,0 +1,11 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('app-not-found')
+export default class NotFound extends LitElement {
+ render() {
+ return html`
+
+
+
+
+
+
+
+
+ + New Accounts +
+
+
+ ${this.northwindCustomers?.map((item) => html`
+
+
+ `)}
+
+
+
+ View All Accounts
+
+
+
+
+
+ ${item.companyName}
+
+
+ + ${item.contactName} +
+
+
+ + ${item.address?.street} +
++ , +
++ ${item.address?.city} +
++ , +
++ ${item.address?.country} +
++ ${item.address?.phone} +
+
+
+ + Recent Contacts +
+
+
+ ${this.northwindCustomers?.map((item) => html`
+
+
+ `)}
+
+
+
+ View All Contacts
+
+
+
+
+
+ ${item.contactName}
+
+
+
+
+
+
+
+ ${this.cRMAppDataMeetingsTasks?.map((item) => html`
+
+
+ `)}
+
+
+ View Calendar
+
+
+ + My Meetings +
+
+
+
+
+ ${item.MeetingType}
+
+
+
+
+ + Meeting with +
++ ${item.Contact} +
+
+
+ + ${item.MeetingDate} +
++ - +
++ ${item.MeetingTime} +
+
+
+ ${this.cRMAppDataMeetingsTasks?.map((item) => html`
+
+
+ `)}
+
+
+ View Tasks
+
+
+ + Today’s Tasks +
+
+
+
+
+ ${item.TaskStatus}
+
+
+
+
+ + ${item.Task} +
++ - +
++ ${item.Company} +
+
+
+ + Due by +
++ ${item.DueDate} +
+Error 404: Page not found
+ `; + } +} diff --git a/src/app/reports/reports.test.ts b/src/app/reports/reports.test.ts new file mode 100644 index 0000000..cdca1da --- /dev/null +++ b/src/app/reports/reports.test.ts @@ -0,0 +1,9 @@ +import { expect } from '@open-wc/testing'; +import Reports from './reports.js'; + +describe('Reports', () => { + it('
+
+
+ `;
+ }
+}
diff --git a/src/app/services/CRMAppData-service.ts b/src/app/services/CRMAppData-service.ts
new file mode 100644
index 0000000..3bc2ed8
--- /dev/null
+++ b/src/app/services/CRMAppData-service.ts
@@ -0,0 +1,21 @@
+import { Table1Type } from '../models/crmapp-data/table1-type';
+import { MeetingsTasksType } from '../models/crmapp-data/meetings-tasks-type';
+
+class CRMAppDataService {
+ public getTable1List = async (): Promise
+ + Start building! +
++ Remove the "demo-content" container, and add your own content. +
+
+
+
+ `;
+ }
+}
diff --git a/src/assets/Account-List-Avatar-Icon.svg b/src/assets/Account-List-Avatar-Icon.svg
new file mode 100644
index 0000000..ab11dcb
--- /dev/null
+++ b/src/assets/Account-List-Avatar-Icon.svg
@@ -0,0 +1,29 @@
+
diff --git a/src/assets/Accounts Icon - Green.svg b/src/assets/Accounts Icon - Green.svg
new file mode 100644
index 0000000..f12085c
--- /dev/null
+++ b/src/assets/Accounts Icon - Green.svg
@@ -0,0 +1,51 @@
+
diff --git a/src/assets/Accounts-Avatar-Icon.svg b/src/assets/Accounts-Avatar-Icon.svg
new file mode 100644
index 0000000..161d843
--- /dev/null
+++ b/src/assets/Accounts-Avatar-Icon.svg
@@ -0,0 +1,29 @@
+
diff --git a/src/assets/CRM Logo.svg b/src/assets/CRM Logo.svg
new file mode 100644
index 0000000..70af781
--- /dev/null
+++ b/src/assets/CRM Logo.svg
@@ -0,0 +1,38 @@
+
diff --git a/src/assets/Calendar-Avatar-Icon.svg b/src/assets/Calendar-Avatar-Icon.svg
new file mode 100644
index 0000000..6bd3acd
--- /dev/null
+++ b/src/assets/Calendar-Avatar-Icon.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/Contacts-Avatar-Icon.svg b/src/assets/Contacts-Avatar-Icon.svg
new file mode 100644
index 0000000..8169bc3
--- /dev/null
+++ b/src/assets/Contacts-Avatar-Icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/Contacts-List-Avatar-Icon.svg b/src/assets/Contacts-List-Avatar-Icon.svg
new file mode 100644
index 0000000..17238be
--- /dev/null
+++ b/src/assets/Contacts-List-Avatar-Icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/Contracts-Avatar-Icon.svg b/src/assets/Contracts-Avatar-Icon.svg
new file mode 100644
index 0000000..b325c5c
--- /dev/null
+++ b/src/assets/Contracts-Avatar-Icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/Home-Avatar-Icon.svg b/src/assets/Home-Avatar-Icon.svg
new file mode 100644
index 0000000..f099155
--- /dev/null
+++ b/src/assets/Home-Avatar-Icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/Reports-Avatar-Icon.svg b/src/assets/Reports-Avatar-Icon.svg
new file mode 100644
index 0000000..2d76e49
--- /dev/null
+++ b/src/assets/Reports-Avatar-Icon.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/assets/Tasks-Avatar-Icon.svg b/src/assets/Tasks-Avatar-Icon.svg
new file mode 100644
index 0000000..669518d
--- /dev/null
+++ b/src/assets/Tasks-Avatar-Icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/start-building-dark.svg b/src/assets/start-building-dark.svg
new file mode 100644
index 0000000..d560e70
--- /dev/null
+++ b/src/assets/start-building-dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/start-building.svg b/src/assets/start-building.svg
new file mode 100644
index 0000000..c418b8d
--- /dev/null
+++ b/src/assets/start-building.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..1a6b6bc
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,2 @@
+import './app/app.js';
+import './app/app-routing.js';
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..e06ecae
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,24 @@
+body {
+ background: hsla(var(--ig-surface-500, 0 0% 100%));
+ color: var(--ig-surface-500-contrast, black);
+ font-family: var(--ig-font-family);
+}
+
+html,
+body {
+ height: 100%;
+}
+
+/* minor CSS reset */
+body, h1, h2, h3, h4, h5, h6, p {
+ margin: 0;
+}
+
+html {
+ box-sizing: border-box;
+}
+
+img, video {
+ height: auto;
+ max-width: 100%;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..aef874d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+ "compilerOptions": {
+ "target": "es2018",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "noEmitOnError": true,
+ "lib": [
+ "es2017",
+ "dom",
+ "dom.iterable"
+ ],
+ "strict": true,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "experimentalDecorators": true,
+ "importHelpers": true,
+ "outDir": "dist",
+ "sourceMap": true,
+ "inlineSources": true,
+ "rootDir": "./",
+ "declaration": true,
+ "incremental": true
+ },
+ "exclude": [
+ "test"
+ ],
+ "files": [
+ "src/index.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/tsconfig.test.json b/tsconfig.test.json
new file mode 100644
index 0000000..473725e
--- /dev/null
+++ b/tsconfig.test.json
@@ -0,0 +1,13 @@
+
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "test"
+ },
+ "exclude": [
+ "dist"
+ ],
+ "include": [
+ "**/*.ts"
+ ]
+}
diff --git a/web-dev-server.config.mjs b/web-dev-server.config.mjs
new file mode 100644
index 0000000..0325792
--- /dev/null
+++ b/web-dev-server.config.mjs
@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+ open: '/',
+ /** Use regular watch mode if HMR is not enabled. */
+ watch: !hmr,
+ /** Resolve bare module imports */
+ nodeResolve: {
+ exportConditions: ['browser', 'development'],
+ },
+
+ /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+ // esbuildTarget: 'auto'
+
+ /** Set appIndex to enable SPA routing */
+ appIndex: './index.html',
+
+ plugins: [
+ /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+ // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+ ],
+
+ // See documentation for all available options
+});
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
new file mode 100644
index 0000000..20068e9
--- /dev/null
+++ b/web-test-runner.config.mjs
@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+ /** Test files to run */
+ files: 'test/src/app/**/*.test.js',
+
+ /** Resolve bare module imports */
+ nodeResolve: {
+ exportConditions: ['browser', 'development'],
+ },
+
+ /** Filter out lit dev mode logs */
+ filterBrowserLogs(log) {
+ for (const arg of log.args) {
+ if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+ // esbuildTarget: 'auto',
+
+ /** Amount of browsers to run concurrently */
+ // concurrentBrowsers: 2,
+
+ /** Amount of test files per browser to test concurrently */
+ // concurrency: 1,
+
+ /** Browsers to run tests on */
+ // browsers: [
+ // playwrightLauncher({ product: 'chromium' }),
+ // playwrightLauncher({ product: 'firefox' }),
+ // playwrightLauncher({ product: 'webkit' }),
+ // ],
+
+ // See documentation for all available options
+});
+ + Start building! +
++ Remove the "demo-content" container, and add your own content. +
+