تصميم تطبييق ويب مع شاشه تحكم

Core Features & Technology

• Bilingual Interface: The entire application will support both English and Arabic, with a clear toggle for users to switch between languages.

• Responsive Design: The app will be fully functional on desktops, tablets, and mobile phones, which is crucial for field surveyors.

• Role-Based Access Control: The system will differentiate between standard users (surveyors) and administrators, with different permissions and views.

• Real-time Data Sync: Data entered in the field will be immediately available in the admin portal.

Suggested Technology Stack

• Frontend: React.js or Vue.js (For a dynamic and responsive user interface).

• Backend: Node.js with Express.js (For building a fast and scalable API).

• Database: MongoDB or PostgreSQL (MongoDB is flexible for evolving data, while PostgreSQL is robust for relational data).

• Deployment: A cloud platform like AWS, Google Cloud, or Vercel.

User Application (Surveyor View)

This is the main interface for field agents.

Initial Screen

The first thing the user sees is a choice:

• Customer Type: Dropdown menu

• New Customer (Initiates the "New Customer" workflow)

• Existing Customer (Initiates the "Existing Customer" workflow)

Workflow 1: New Customer Onboarding

This is a multi-page form to register a new client.

Page 1: Customer & Location Details

• Customer Arabic Name: Text field (accepts Arabic characters).

• Customer English Name: Text field (accepts English characters).

• CR Number:

• Input: Number field, validated for 10 digits.

• Attachment: Required photo upload of the Commercial Registration (CR) document.

• VAT Number:

• Input: Number field, validated to be 15 digits, start with 3, and end with 0003.

• Attachment: Required photo upload of the VAT certificate.

• National Address:

• Input: Text field for the address.

• Attachment: Required photo upload of the National Address proof.

• Contact Person Name: Text field.

• Contact Person Phone: Number field, validated for 10 digits and must start with 05.

• GPS Location: A button to "Capture Location" that automatically records the device's latitude, longitude, and altitude.

• City: Dropdown menu populated from the database.

• District: Dropdown menu that is dynamically filtered based on the selected City.

• Street: Text field.

Page 2: Shop Details

• Shop Size: Dropdown menu with options:

• Less than 100 M

• 100-400 M

• More than 400 M

• Shop Type: Dropdown menu with options:

• Small

• Medium

• Large

• Mini Market

• Super Market

• Juice Center

• Shop Photo: Required photo upload of the shop's exterior/interior.

• Count of Counters: Dropdown menu with numeric options from 1 to 10, plus an option for "More than 10".

• Need Alamal Freezer?: Dropdown menu (Yes/No).

• If Yes is selected, a new text field appears: "Freezer Size", allowing the user to specify the required size.

Page 3: Competitor Analysis

• Competitors List: A dynamic list where each item has a competitor name and a checkbox.

• Sadafco

• Quality

• Iglo

• Ice Queen

• Iceburg

• Dandy

• Panda

• Galaxy

• Other

• For each competitor, if the checkbox is checked, a text box appears next to it prompting the user to enter the "Count of freezers" available for that competitor.

Page 4: Survey Closure

• Surveyor Name: Dropdown menu populated with the list of registered users. The current logged-in user can be pre-selected.

• Date: Automatically populated with the current date and time of form submission.

Workflow 2: Existing Customer Visit

This workflow is for updating or adding information for a pre-existing customer.

Initial Step: Search

• The user will be presented with a search bar to find the customer by CR Number, Customer Name, or Phone Number.

• Upon selecting a customer, the system will fetch their existing data and populate the following forms.

Editing Logic

• All fields will be pre-filled with existing data from the database.

• If a field in the database is empty, it will be shown as a blank, editable field.

• Crucially, any field that the user edits will change its background color (e.g., to light yellow) to provide a clear visual indicator of what has been changed during the visit.

Page 1: Customer & Location Details

• This page is identical to Page 1 of the "New Customer" workflow, allowing the surveyor to view and edit all customer information.

Page 2: Shop & Freezer Details

This page combines shop details with specific details about freezers on-site.

• Shop Details (Editable):

• Shop Size

• Shop Type

• Shop Photo (can be updated)

• Count of Counters

• Freezer Details (This section can be repeated for multiple freezers):

• Freezer Size: Dropdown menu (e.g., 100L, 200L, ..., 1200L).

• Freezer Type: Dropdown menu (Vertical, Horizontal).

• Freezer Photo: Required photo upload.

• Freezer Sticker Status: Dropdown menu (Good, Bad).

• Freezer Basket: Dropdown menu (Yes, No).

• Freezer Old Code: Text field for manual entry.

• Freezer New Code: A button that opens the phone's camera to scan a barcode.

Page 3: Visit & Competitor Details

• Route Number: Dropdown menu populated from the database.

• Salesman Name: Dropdown menu populated from the database.

• Journal Day: Dropdown menu with weekdays (Saturday to Thursday).

• Number of Weekly Visits: Dropdown menu (1, 2, 3, 4).

• Competitors List: This section is identical to the one in the "New Customer" workflow, allowing for updates on competitor presence.

Admin Portal ️

A secure web interface for managers and administrative staff.

Dashboard & Data Viewer

• A central dashboard showing key metrics (e.g., new customers today, total visits, etc.).

• A powerful, searchable, and filterable table displaying all collected customer and visit data.

• Admins can click on any record to see the full details, including all uploaded photos.

Data Management

• Data Export: Functionality to download the entire database or filtered results as an Excel (.xlsx) or CSV (.csv) file.

• Data Import/Upload: A dedicated section for administrators to upload and manage the backend data files, including:

• Cities & Districts List

• User/Surveyor List

• Salesman & Route List

User Control & Permissions

• User Management: A secure section to add, edit, or deactivate users (surveyors).

• Data Isolation: A critical feature where a standard user (surveyor) can only see the data they have personally created. They will not be able to see data from other surveyors.

• Admin View: Administrators will have a global view and can see all data from all users.