main.dart formatting / commenting

README.md

@@ -1,10 +1,10 @@
-
 # Job Link
 
 This is my app `Job Link` for the 2023-2024 FBLA Coding and Programming event.\
 WI SLC Winner.
 
-It uses the [Flutter Framework](https://flutter.dev/) for the front end and the [Dart Language](https://dart.dev/) for both the front end and API.
+It uses the [Flutter Framework](https://flutter.dev/) for the front end and
+the [Dart Language](https://dart.dev/) for both the front end and API.
 
 ## 3rd Party Libraries
 
@@ -16,24 +16,32 @@ It uses the [Flutter Framework](https://flutter.dev/) for the front end and the
 - [open_filex](https://pub.dev/packages/open_filex)
 - [postgres](https://pub.dev/packages/postgres)
 - [argon2](https://pub.dev/packages/argon2)
+- [rive](https://pub.dev/packages/rive)
+
+[Clearbit's logo API](https://clearbit.com/logo) was also used to get logos for businesses.
 
 ## Requirements
 
 ### Job Link
-- **OS**: Windows, Linux, MacOS, Android, IOS. Note that some releases may not contain a MacOS or IOS build.
+
+- **OS**: Windows, Linux, MacOS, Android, IOS. Note that some releases may not contain a MacOS or
+  IOS build.
 - Stable internet connection.
 
 ### API
+
 - **OS**: Windows, Linux, MacOS.
 - Stable internet connection.
 
 ## Installation/Usage
 
-Please view the README in [fbla_ui](fbla_ui/README.md) and [fbla-api](fbla-api/README.md) for specific instructions for installation and usage for each part of the app.
+Please view the README in [fbla_ui](fbla_ui/README.md) and [fbla-api](fbla-api/README.md) for
+specific instructions for installation and usage for each part of the app.
 
 ## Competitions
 
-[Here](https://docs.google.com/presentation/d/1ZbSE9RqobU2T-NDIm3CUtT_9nEhOm3_B47NZl1-c_QA) is the presentation used for competitions.
+[Here](https://docs.google.com/presentation/d/1ZbSE9RqobU2T-NDIm3CUtT_9nEhOm3_B47NZl1-c_QA) is the
+presentation used for competitions.
 
 ### WI State Leadership Conference
 
@@ -44,13 +52,24 @@ Used release 0.1.1\
 Questions asked (with my answers):
 
 **Q**: Why did you decide to use the apps (framework and tools I assume) you used?\
-**A**: I decided to use Flutter primarily because of its cross-platform capabilities and its integration with the [Material design specification](https://m3.material.io/). I also decided to use it because I had some previous experience with Flutter and Dart, and Dart is somewhat similar to Java which I also had experience with.
+**A**: I decided to use Flutter primarily because of its cross-platform capabilities and its
+integration with the [Material design specification](https://m3.material.io/). I also decided to use
+it because I had some previous experience with Flutter and Dart, and Dart is somewhat similar to
+Java which I also had experience with.
 
-This one seems to just be a clarification for the `User input is validated` category of the [scoring sheet](https://connect.fbla.org/headquarters/files/High%20School%20Competitive%20Events%20Resources/Individual%20Guidelines/Presentation%20Events/Coding--Programming.pdf) (page 5-6)\
-**Q**: You mentioned that you validated that the description [of the business] is required, do you validate all the inputs or just that?\
-**A**: I validate that all of the required fields are inputted, and I also check for a valid email address and website format.
+This one seems to just be a clarification for the `User input is validated` category of
+the [scoring sheet](https://connect.fbla.org/headquarters/files/High%20School%20Competitive%20Events%20Resources/Individual%20Guidelines/Presentation%20Events/Coding--Programming.pdf) (
+page 5-6)\
+**Q**: You mentioned that you validated that the description [of the business] is required, do you
+validate all the inputs or just that?\
+**A**: I validate that all of the required fields are inputted, and I also check for a valid email
+address and website format.
 
-This seems to be for the [scoring sheet](https://connect.fbla.org/headquarters/files/High%20School%20Competitive%20Events%20Resources/Individual%20Guidelines/Presentation%20Events/Coding--Programming.pdf) (page 5-6) `Code Quality` section.\
+This seems to be for
+the [scoring sheet](https://connect.fbla.org/headquarters/files/High%20School%20Competitive%20Events%20Resources/Individual%20Guidelines/Presentation%20Events/Coding--Programming.pdf) (
+page 5-6) `Code Quality` section.\
 While looking through a binder of the presentation and source code:\
 **Q**: Is your source code all properly commented?\
-**A**: While it is hard to comment UI code because of the nature of it, I did my best to use comments where applicable, and I also provide extensive documentation of the installation and usage of the app in the documentation in the README files.
+**A**: While it is hard to comment UI code because of the nature of it, I did my best to use
+comments where applicable, and I also provide extensive documentation of the installation and usage
+of the app in the documentation in the README files.

fbla-api/README.md

@@ -4,13 +4,16 @@ This is the API for my 2023-2024 FBLA Coding & Programming App
 
 1. Install [Dart SDK](https://dart.dev/get-dart).
 2. Clone the repo .
+
 ```bash
 git clone https://git.marinodev.com/MarinoDev/FBLA24.git
 cd FBLA24/fbla-api/
 ```
+
 3. Run `dart pub install` to install dart packages.
 4. Install [PostgreSQL](https://www.postgresql.org/) and set it up.
 5. Create `fbla` database in postgres.
+
 ```SQL
 CREATE DATABASE fbla
     WITH
@@ -19,9 +22,11 @@ CREATE DATABASE fbla
     CONNECTION LIMIT = -1
     IS_TEMPLATE = False;
 ```
+
 Make sure to change [username] to the actual username of your postgres instance.
 
 6. Create `businesses` table.
+
 ```SQL
 -- Table: public.businesses
 
@@ -48,9 +53,39 @@ TABLESPACE pg_default;
 ALTER TABLE IF EXISTS public.businesses
     OWNER to [username];
 ```
+
 Make sure to change [username] to the actual username of your postgres instance.
 
-7. Create `users` table.
+7. Create `listings` table.
+
+```SQL
+-- Table: public.listings
+
+-- DROP TABLE IF EXISTS public.listings;
+
+CREATE TABLE IF NOT EXISTS public.listings
+(
+    id integer NOT NULL GENERATED ALWAYS AS IDENTITY ( INCREMENT 1 START 1 MINVALUE 1 MAXVALUE 2147483647 CACHE 1 ),
+    "businessId" integer NOT NULL,
+    name text COLLATE pg_catalog."default" NOT NULL,
+    description text COLLATE pg_catalog."default" NOT NULL,
+    type text COLLATE pg_catalog."default" NOT NULL,
+    wage text COLLATE pg_catalog."default",
+    link text COLLATE pg_catalog."default",
+    "offerType" text COLLATE pg_catalog."default" NOT NULL,
+    CONSTRAINT listing_pkey PRIMARY KEY (id)
+)
+
+TABLESPACE pg_default;
+
+ALTER TABLE IF EXISTS public.listings
+    OWNER to [username];
+```
+
+Make sure to change [username] to the actual username of your postgres instance.
+
+8. Create `users` table.
+
 ```SQL
 -- Table: public.users
 
@@ -68,11 +103,19 @@ CREATE TABLE IF NOT EXISTS public.users
 TABLESPACE pg_default;
 
 ALTER TABLE IF EXISTS public.users
-    OWNER to postgres;
+    OWNER to [username];
 ```
-8. Set environment variables `JOBLINK_POSTGRES_ADDRESS` (IP address), `JOBLINK_POSTGRES_PORT` (default 5432), `JOBLINK_POSTGRES_USERNAME`, and `JOBLINK_POSTGRES_PASSWORD` to appropriate information for your postgres database. Also set `JOBLINK_SECRET_KEY` to anything you want to generate JSON Web Tokens. 
-9. Set lib/create_first_user.dart username and password variables at top of file and run with `dart run lib/create_first_user.dart`.\
-Note: the username and password you use here will be what you use to log into the app as an admin.
+
+Make sure to change [username] to the actual username of your postgres instance.
+
+8. Set environment variables `JOBLINK_POSTGRES_ADDRESS` (IP address), `JOBLINK_POSTGRES_PORT` (
+   default 5432), `JOBLINK_POSTGRES_USERNAME`, and `JOBLINK_POSTGRES_PASSWORD` to appropriate
+   information for your postgres database. Also set `JOBLINK_SECRET_KEY` to anything you want to
+   generate JSON Web Tokens.
+9. Set lib/create_first_user.dart username and password variables at top of file and run
+   with `dart run lib/create_first_user.dart`.\
+   Note: the username and password you use here will be what you use to log into the app as an
+   admin.
 
 ## Usage
 
@@ -83,9 +126,14 @@ Note the address it is serving at, you will need this to connect it to the UI, a
 
 ### Docker
 
-Run it in a docker container with [Docker Build](https://docs.docker.com/reference/cli/docker/image/build/) and [Docker Compose](https://docs.docker.com/compose/) using the included [Dockerfile](Dockerfile) and [docker-compose.yml](docker-compose.yml) files. If using `Docker Compose`, change the first portion of the volumes path on line 9 to any desired storage location.\
+Run it in a docker container
+with [Docker Build](https://docs.docker.com/reference/cli/docker/image/build/)
+and [Docker Compose](https://docs.docker.com/compose/) using the included [Dockerfile](Dockerfile)
+and [docker-compose.yml](docker-compose.yml) files. If using `Docker Compose`, change the first
+portion of the volumes path on line 9 to any desired storage location.\
 Note the address it is serving at, you will need this to connect it to the UI, and to run tests.
 
 ### Testing
 
-You can test all functionality of your api with `dart run test/fbla_api_test.dart`, setting `apiAddress` on line 8 to your api address.
+You can test all functionality of your api with `dart run test/fbla_api_test.dart`,
+setting `apiAddress` on line 8 to your api address.

fbla-api/lib/create_first_user.dart

@@ -1,14 +1,17 @@
+import 'dart:io';
 import 'dart:math';
 import 'dart:typed_data';
+
 import 'package:argon2/argon2.dart';
-import 'dart:io';
 import 'package:postgres/postgres.dart';
 
+// Set these to the desired username and password of your user
 String username = 'admin';
-String password = 'password';
+String password = 'adminPassword';
 
 var r = Random.secure();
-String randomSalt = String.fromCharCodes(List.generate(32, (index) => r.nextInt(33) + 89));
+String randomSalt =
+    String.fromCharCodes(List.generate(32, (index) => r.nextInt(33) + 89));
 final salt = randomSalt.toBytesLatin1();
 
 var parameters = Argon2Parameters(
@@ -37,10 +40,8 @@ Future<void> main() async {
   argon2.generateBytes(passwordBytes, result);
   var resultHex = result.toHexString();
 
-  postgres.query(
-  '''
+  postgres.query('''
           INSERT INTO public.users (username, password_hash, salt) 
           VALUES ('$username', '$resultHex', '$randomSalt')
-          '''
-  );
+          ''');
 }

fbla-api/lib/fbla_api.dart

@@ -22,7 +22,19 @@ enum BusinessType {
   other,
 }
 
-enum JobType { cashier, server, mechanic, other }
+enum JobType {
+  retail,
+  customerService,
+  foodService,
+  finance,
+  healthcare,
+  education,
+  maintenance,
+  manufacturing,
+  other,
+}
+
+enum OfferType { job, internship, apprenticeship }
 
 class Business {
   int id;
@@ -84,6 +96,7 @@ class JobListing {
   JobType type;
   String? wage;
   String? link;
+  OfferType offerType;
 
   JobListing(
       {this.id,
@@ -92,7 +105,8 @@ class JobListing {
       required this.description,
       required this.type,
       this.wage,
-      this.link});
+      this.link,
+      required this.offerType});
 
   factory JobListing.fromJson(Map<String, dynamic> json) {
     bool typeValid = true;
@@ -110,7 +124,7 @@ class JobListing {
         type: typeValid ? JobType.values.byName(json['type']) : JobType.other,
         wage: json['wage'],
         link: json['link'],
-    );
+        offerType: OfferType.values.byName(json['offerType']));
   }
 }
 
@@ -154,6 +168,15 @@ void main() async {
 
   final app = Router();
 
+  // CORS preflight acceptor
+  app.options('/<ignored|.*>', (Request request) {
+    return Response.ok(null, headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
+      'Access-Control-Allow-Headers': '*',
+    });
+  });
+
   // routes
   app.get('/fbla-api/hello', (Request request) async {
     print('Hello received');
@@ -166,49 +189,57 @@ void main() async {
   app.get('/fbla-api/businessdata/overview/jobs', (Request request) async {
     print('business overview request received');
 
-    var filters = request.url.queryParameters['filters']?.split(',') ??
+    var typeFilters = request.url.queryParameters['typeFilters']?.split(',') ??
         JobType.values.asNameMap().keys;
+    var offerFilters =
+        request.url.queryParameters['offerFilters']?.split(',') ??
+            OfferType.values.asNameMap().keys;
 
-    Map<String, dynamic> output = {};
-
-    for (int i = 0; i < filters.length; i++) {
     var postgresResult = (await postgres.query('''
-        SELECT json_agg(
-          json_build_object(
+          SELECT jsonb_agg(
+              jsonb_build_object(
                   'id', b.id,
                   'name', b.name,
                   'contactName', b."contactName",
                   'contactEmail', b."contactEmail",
                   'contactPhone', b."contactPhone",
                   'locationName', b."locationName",
-            'listings', (
-                SELECT json_agg(
-                           json_build_object(
-                               'id', l.id,
-                               'name', l.name,
-                               'description', l.description,
-                               'type', l.type,
-                               'wage', l.wage,
-                               'link', l.link
+                  'locationAddress', b."locationAddress",
+                  'listings', b.listings
               )
+          ) AS result
+          FROM (
+              SELECT 
+                  businesses.id,
+                  businesses.name,
+                  businesses."contactName",
+                  businesses."contactEmail",
+                  businesses."contactPhone",
+                  businesses."locationName",
+                  businesses."locationAddress",
+                  jsonb_agg(
+                      jsonb_build_object(
+                          'id', listings.id,
+                          'name', listings.name,
+                          'description', listings.description,
+                          'type', listings.type,
+                          'wage', listings.wage,
+                          'link', listings.link,
+                          'offerType', listings."offerType"
                       )
-                FROM listings l
-                WHERE l."businessId" = b.id AND l.type = '${filters.elementAt(i)}'
-            )
-          )
-        )
-        FROM businesses b
-        WHERE b.id IN (SELECT "businessId" FROM public.listings WHERE type='${filters.elementAt(i)}')
-        GROUP BY b.id;
+                  ) AS listings
+              FROM businesses
+              JOIN listings ON businesses.id = listings."businessId"
+                  AND listings.type IN (${typeFilters.map((element) => "'$element'").join(',')})
+                  AND listings."offerType" IN (${offerFilters.map((element) => "'$element'").join(',')})
+              GROUP BY businesses.id, businesses.name, businesses."contactName", businesses."contactEmail",
+                       businesses."contactPhone", businesses."locationName", businesses."locationAddress"
+          ) b
+          WHERE b.listings IS NOT NULL;
         '''));
 
-      if (postgresResult.isNotEmpty) {
-        output.addAll({filters.elementAt(i): postgresResult[0][0]});
-      }
-    }
-
     return Response.ok(
-      json.encode(output),
+      json.encode(postgresResult[0][0]),
       headers: {
         'Access-Control-Allow-Origin': '*',
         'Content-Type': 'text/plain'
@@ -232,9 +263,11 @@ void main() async {
             'name', name,
             'description', description,
             'website', website,
+            'contactName', "contactName",
             'contactEmail', "contactEmail",
             'contactPhone', "contactPhone",
-            'locationName', "locationName"
+            'locationName', "locationName",
+            'locationAddress', "locationAddress"
           )
         ) FROM public.businesses WHERE type='${filters.elementAt(i)}'
         '''))[0][0];
@@ -244,7 +277,6 @@ void main() async {
       }
     }
 
-    // await Future.delayed(Duration(seconds: 5));
     return Response.ok(
       json.encode(output),
       headers: {
@@ -301,6 +333,7 @@ void main() async {
                     'name', l.name,
                     'description', l.description,
                     'type', l.type,
+                    'offerType', l."offerType",
                     'wage', l.wage,
                     'link', l.link
                 )
@@ -348,25 +381,11 @@ void main() async {
           'contactPhone', b."contactPhone",
           'notes', b.notes,
           'locationName', b."locationName",
-          'locationAddress', b."locationAddress",
-          'listings', CASE 
-            WHEN COUNT(l.id) = 0 THEN 'null'
-            ELSE json_agg(
-                json_build_object(
-                    'id', l.id,
-                    'businessId', l."businessId",
-                    'name', l.name,
-                    'description', l.description,
-                    'type', l.type,
-                    'wage', l.wage,
-                    'link', l.link
-                )
-            )
-        END
+          'locationAddress', b."locationAddress"
         )
         FROM businesses b
         LEFT JOIN listings l ON b.id = l."businessId"
-        WHERE b.id IN ${'$filters'.replaceAll('[', '(').replaceAll(']', ')')}
+        WHERE b.id IN (${filters.join(',')})
         GROUP BY b.id;
     '''));
 
@@ -413,8 +432,8 @@ void main() async {
     print('business logo request received');
 
     var logo = File('logos/$logoId.png');
+    try {
       List<int> content = logo.readAsBytesSync();
-
       return Response.ok(
         content,
         headers: {
@@ -422,6 +441,16 @@ void main() async {
           'Content-Type': 'image/png'
         },
       );
+    } catch (e) {
+      print('Error reading logo!');
+      return Response.notFound(
+        'logo not found',
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Content-Type': 'image/png'
+        },
+      );
+    }
   });
   app.post('/fbla-api/createbusiness', (Request request) async {
     print('create business request received');
@@ -475,8 +504,8 @@ void main() async {
       JobListing listing = JobListing.fromJson(json);
 
       await postgres.query('''
-      INSERT INTO listings ("businessId", name, description, type, wage, link)
-      VALUES ('${listing.businessId}', '${listing.name.replaceAll("'", "''")}', '${listing.description.replaceAll("'", "''")}', '${listing.type.name}', '${listing.wage ?? 'NULL'}', '${listing.link?.replaceAll("'", "''") ?? 'NULL'}')
+      INSERT INTO listings ("businessId", name, description, type, wage, link, "offerType")
+      VALUES ('${listing.businessId}', '${listing.name.replaceAll("'", "''")}', '${listing.description.replaceAll("'", "''")}', '${listing.type.name}', '${listing.wage ?? 'NULL'}', '${listing.link?.replaceAll("'", "''") ?? 'NULL'}', '${listing.offerType.name}')
       '''
           .replaceAll("'null'", 'NULL'));
 
@@ -619,7 +648,7 @@ void main() async {
 
       await postgres.query('''
         UPDATE listings SET
-        "businessId" = ${listing.businessId}, name = '${listing.name.replaceAll("'", "''")}'::text, description = '${listing.description.replaceAll("'", "''")}'::text, type = '${listing.type.name}'::text, wage = '${listing.wage ?? 'NULL'}'::text, link = '${listing.link?.replaceAll("'", "''") ?? 'NULL'}'::text WHERE
+        "businessId" = ${listing.businessId}, name = '${listing.name.replaceAll("'", "''")}'::text, description = '${listing.description.replaceAll("'", "''")}'::text, type = '${listing.type.name}'::text, wage = '${listing.wage ?? 'NULL'}'::text, link = '${listing.link?.replaceAll("'", "''") ?? 'NULL'}'::text, "offerType"='${listing.offerType.name}'::text WHERE
         id = ${listing.id};
         '''
           .replaceAll("'null'", 'NULL'));
@@ -801,6 +830,31 @@ void main() async {
       },
     );
   });
+  app.get('/fbla-api/clearbit/<website>',
+      (Request request, String website) async {
+    print('clearbit logo request received');
+
+    website = Uri.decodeComponent(website);
+
+    var response =
+        await http.get(Uri.parse('https://logo.clearbit.com/$website'));
+    if (response.statusCode == 200) {
+      return Response.ok(
+        response.bodyBytes,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Content-Type': 'image/png'
+        },
+      );
+    } else {
+      return Response.notFound(
+        'logo not found',
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+        },
+      );
+    }
+  });
 
   // get ip address for hosting
   for (var interface in await NetworkInterface.list()) {

fbla_ui/Jenkinsfile

@@ -3,7 +3,7 @@ pipeline {
     stages {
         stage('Flutter Cleanup') {
             steps {
-        sh '''flutter upgrade --force
+                sh '''flutter upgrade
 flutter pub upgrade
 flutter --version
 flutter doctor
@@ -40,10 +40,10 @@ flutter clean'''
                     steps {
                         script {
                             def remote = [
-                name: 'HostServer',
-                host: '192.168.0.216',
-                user: 'fbla',
-                password: 'fbla',
+                                    name         : 'HostServer',
+                                    host         : '192.168.0.216',
+                                    user         : 'fbla',
+                                    password     : 'fbla',
                                     allowAnyHosts: true,
                             ]
                             sshRemove(path: '/home/fbla/fbla-webserver/webfiles/fbla', remote: remote)
@@ -58,13 +58,13 @@ flutter clean'''
                     steps {
                         script {
                             def remote = [
-                name: 'HostServer',
-                host: '192.168.0.216',
-                user: 'fbla',
-                password: 'fbla',
+                                    name         : 'HostServer',
+                                    host         : '192.168.0.216',
+                                    user         : 'fbla',
+                                    password     : 'fbla',
                                     allowAnyHosts: true,
                             ]
-              if(env.BRANCH_NAME == 'main') {
+                            if (env.BRANCH_NAME == 'main') {
                                 sshRemove(path: '/home/fbla/builds/main/linux', remote: remote)
                                 sshCommand remote: remote, command: "mkdir /home/fbla/builds/main/linux"
                                 sshPut(from: 'build/linux/x64/release', into: '/home/fbla/builds/main/linux', remote: remote)
@@ -105,12 +105,12 @@ flutter clean'''
             steps {
                 script {
                     def remote = [
-            name: 'MarinoDev',
-            host: 'marinodev.com',
-            port: 21098,
-            user: 'mariehdi',
-            identityFile: '/var/jenkins_home/marinoDevPrivateKey',
-            passphrase: 'marinodev',
+                            name         : 'MarinoDev',
+                            host         : 'marinodev.com',
+                            port         : 21098,
+                            user         : 'mariehdi',
+                            identityFile : '/var/jenkins_home/marinoDevPrivateKey',
+                            passphrase   : 'marinodev',
                             allowAnyHosts: true,
                     ]
                     sshRemove(path: '/home/mariehdi/public_html/fbla', remote: remote)

fbla_ui/analysis_options.yaml

@@ -7,6 +7,9 @@
 
 # The following line activates a set of recommended lints for Flutter apps,
 # packages, and plugins designed to encourage good coding practices.
+analyzer:
+  errors:
+    use_build_context_synchronously: ignore
 include: package:flutter_lints/flutter.yaml
 
 linter:

fbla_ui/android/app/build.gradle

@@ -1,3 +1,9 @@
+plugins {
+    id "com.android.application"
+    id "kotlin-android"
+    id "dev.flutter.flutter-gradle-plugin"
+}
+
 def localProperties = new Properties()
 def localPropertiesFile = rootProject.file('local.properties')
 if (localPropertiesFile.exists()) {
@@ -6,11 +12,6 @@ if (localPropertiesFile.exists()) {
     }
 }
 
-def flutterRoot = localProperties.getProperty('flutter.sdk')
-if (flutterRoot == null) {
-    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
-}
-
 def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
 if (flutterVersionCode == null) {
     flutterVersionCode = '1'
@@ -21,10 +22,6 @@ if (flutterVersionName == null) {
     flutterVersionName = '1.0'
 }
 
-apply plugin: 'com.android.application'
-apply plugin: 'kotlin-android'
-apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
-
 android {
     namespace "com.marinodev.fbla_ui"
     compileSdkVersion flutter.compileSdkVersion
@@ -69,5 +66,4 @@ flutter {
 }
 
 dependencies {
-    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
 }

fbla_ui/android/build.gradle

@@ -1,16 +1,3 @@
-buildscript {
-    ext.kotlin_version = '1.7.10'
-    repositories {
-        google()
-        mavenCentral()
-    }
-
-    dependencies {
-        classpath 'com.android.tools.build:gradle:7.3.0'
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
-    }
-}
-
 allprojects {
     repositories {
         google()
@@ -22,6 +9,7 @@ rootProject.buildDir = '../build'
 subprojects {
     project.buildDir = "${rootProject.buildDir}/${project.name}"
 }
+
 subprojects {
     project.evaluationDependsOn(':app')
 }

fbla_ui/android/settings.gradle

@@ -1,11 +1,25 @@
-include ':app'
+pluginManagement {
+    def flutterSdkPath = {
+        def properties = new Properties()
+        file("local.properties").withInputStream { properties.load(it) }
+        def flutterSdkPath = properties.getProperty("flutter.sdk")
+        assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
+        return flutterSdkPath
+    }()
 
-def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
-def properties = new Properties()
+    includeBuild("$flutterSdkPath/packages/flutter_tools/gradle")
 
-assert localPropertiesFile.exists()
-localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
+    repositories {
+        google()
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
 
-def flutterSdkPath = properties.getProperty("flutter.sdk")
-assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
-apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"
+plugins {
+    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
+    id "com.android.application" version "7.3.0" apply false
+    id "org.jetbrains.kotlin.android" version "1.9.24" apply false
+}
+
+include ":app"

fbla_ui/lib/home.dart

@@ -20,6 +20,7 @@ class Home extends StatefulWidget {
 
 class _HomeState extends State<Home> {
   Set<JobType> jobTypeFilters = <JobType>{};
+  Set<OfferType> offerTypeFilters = <OfferType>{};
   Set<BusinessType> businessTypeFilters = <BusinessType>{};
   String searchQuery = '';
   late Future refreshBusinessDataOverviewJobFuture;
@@ -65,12 +66,16 @@ class _HomeState extends State<Home> {
   }
 
   Future<void> _updateOverviewBusinessesJobsCallback(
-      Set<JobType>? newFilters) async {
-    if (newFilters != null) {
-      jobTypeFilters = Set.from(newFilters);
+      Set<JobType>? newJobTypeFilters,
+      Set<OfferType>? newOfferTypeFilters) async {
+    if (newJobTypeFilters != null) {
+      jobTypeFilters = Set.from(newJobTypeFilters);
     }
-    var refreshedData =
-        fetchBusinessDataOverviewJobs(typeFilters: jobTypeFilters.toList());
+    if (newOfferTypeFilters != null) {
+      offerTypeFilters = Set.from(newOfferTypeFilters);
+    }
+    var refreshedData = fetchBusinessDataOverviewJobs(
+        typeFilters: jobTypeFilters, offerFilters: offerTypeFilters);
     await refreshedData;
     setState(() {
       refreshBusinessDataOverviewJobFuture = refreshedData;
@@ -94,13 +99,11 @@ class _HomeState extends State<Home> {
   Widget build(BuildContext context) {
     bool widescreen = MediaQuery.sizeOf(context).width >= widescreenWidth;
     return Scaffold(
-      // floatingActionButton: _getFAB(widescreen, scrollControllerBusinesses,
-      //     scrollControllerJobs, currentPageIndex),
       bottomNavigationBar: _getNavigationBar(widescreen),
       body: RefreshIndicator(
         edgeOffset: 145,
         onRefresh: () async {
-          _updateOverviewBusinessesJobsCallback(null);
+          _updateOverviewBusinessesJobsCallback(null, null);
           _updateOverviewBusinessesBusinessCallback(null);
         },
         child: widescreen
@@ -168,13 +171,6 @@ class _HomeState extends State<Home> {
                 color: Theme.of(context).colorScheme.onSurface,
               ),
               label: 'Job Listings'),
-          // NavigationDestination(
-          //     icon: const Icon(Icons.description_outlined),
-          //     selectedIcon: Icon(
-          //       Icons.description,
-          //       color: Theme.of(context).colorScheme.onSurface,
-          //     ),
-          //     label: 'Export Data')
         ],
       );
     }
@@ -186,7 +182,6 @@ class _HomeState extends State<Home> {
       children: [
         NavigationRail(
           selectedIndex: currentPageIndex,
-          groupAlignment: -1,
           indicatorColor:
               Theme.of(context).colorScheme.primary.withOpacity(0.5),
           trailing: Expanded(
@@ -219,7 +214,6 @@ class _HomeState extends State<Home> {
               ),
               if (loggedIn)
                 FloatingActionButton(
-                  child: Icon(Icons.add),
                   heroTag: 'Homepage',
                   onPressed: () {
                     if (currentPageIndex == 0) {
@@ -236,6 +230,7 @@ class _HomeState extends State<Home> {
                                   const CreateEditJobListing()));
                     }
                   },
+                  child: const Icon(Icons.add),
                 )
             ],
           ),
@@ -260,51 +255,11 @@ class _HomeState extends State<Home> {
                   color: Theme.of(context).colorScheme.onSurface,
                 ),
                 label: const Text('Job Listings')),
-            // NavigationRailDestination(
-            //     icon: const Icon(Icons.description_outlined),
-            //     selectedIcon: Icon(
-            //       Icons.description,
-            //       color: Theme.of(context).colorScheme.onSurface,
-            //     ),
-            //     label: const Text('Export Data'))
           ],
         ),
-        // children.first
       ],
     );
-    // }
-    // return children.first;
   }
-
-//   Widget _contentPane() {
-//     return IndexedStack(
-//       index: currentPageIndex,
-//       children: [
-//         BusinessesOverview(
-//           searchQuery: searchQuery,
-//           refreshBusinessDataOverviewFuture:
-//               refreshBusinessDataOverviewBusinessFuture,
-//           updateBusinessesCallback: _updateOverviewBusinessesBusinessCallback,
-//           themeCallback: widget.themeCallback,
-//           updateLoggedIn: _updateLoggedIn,
-//         ),
-//         JobsOverview(
-//             searchQuery: searchQuery,
-//             refreshJobDataOverviewFuture: refreshBusinessDataOverviewJobFuture,
-//             updateBusinessesCallback: _updateOverviewBusinessesJobsCallback,
-//             themeCallback: widget.themeCallback, updateLoggedIn: _updateLoggedIn),
-//         ExportData(
-//             searchQuery: searchQuery,
-//             refreshBusinessDataOverviewFuture:
-//                 refreshBusinessDataOverviewBusinessFuture,
-//             updateBusinessesWithJobCallback:
-//                 _updateOverviewBusinessesJobsCallback,
-//             themeCallback: widget.themeCallback,
-//             refreshJobDataOverviewFuture: refreshBusinessDataOverviewJobFuture,
-//             updateBusinessesCallback: _updateOverviewBusinessesBusinessCallback)
-//       ],
-//     );
-//   }
 }
 
 class _ContentPane extends StatelessWidget {
@@ -314,7 +269,7 @@ class _ContentPane extends StatelessWidget {
       updateOverviewBusinessesBusinessCallback;
   final void Function() themeCallback;
   final Future refreshBusinessDataOverviewJobFuture;
-  final Future<void> Function(Set<JobType>)
+  final Future<void> Function(Set<JobType>?, Set<OfferType>?)
       updateOverviewBusinessesJobsCallback;
   final int currentPageIndex;
   final void Function(bool) updateLoggedIn;
@@ -350,35 +305,7 @@ class _ContentPane extends StatelessWidget {
           themeCallback: themeCallback,
           updateLoggedIn: updateLoggedIn,
         ),
-        // ExportData(
-        //     searchQuery: searchQuery,
-        //     refreshBusinessDataOverviewFuture:
-        //         refreshBusinessDataOverviewBusinessFuture,
-        //     updateBusinessesWithJobCallback:
-        //         updateOverviewBusinessesJobsCallback,
-        //     themeCallback: themeCallback,
-        //     refreshJobDataOverviewFuture: refreshBusinessDataOverviewJobFuture,
-        //     updateBusinessesCallback: updateOverviewBusinessesBusinessCallback)
       ],
     );
   }
 }
-
-// class FABAnimator extends FloatingActionButtonAnimator {
-//   @override
-//   Offset getOffset({Offset begin, Offset end, double progress}) {
-//     return end;
-//   }
-//
-//   @override
-//   Animation<double> getRotationAnimation({required Animation<double> parent}) {
-//     return Tween<double>(begin: 0.0, end: 1.0).animate(parent);
-//     throw UnimplementedError();
-//   }
-//
-//   @override
-//   Animation<double> getScaleAnimation({required Animation<double> parent}) {
-//     return Tween<double>(begin: 0.0, end: 1.0).animate(parent);
-//     throw UnimplementedError();
-//   }
-// }

fbla_ui/lib/main.dart

@@ -21,6 +21,7 @@ void main() async {
   ));
 }
 
+/// Main app page loader and theme manager
 class MainApp extends StatefulWidget {
   final int? initialPage;
 
@@ -31,6 +32,24 @@ class MainApp extends StatefulWidget {
 }
 
 class _MainAppState extends State<MainApp> {
+  @override
+  Widget build(BuildContext context) {
+    // prevent landscape mode (it looks bad)
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.portraitUp,
+      DeviceOrientation.portraitDown,
+    ]);
+
+    return MaterialApp(
+      title: 'Job Link',
+      themeMode: themeMode,
+      darkTheme: _darkThemeData(),
+      theme: _lightThemeData(),
+      home: Home(themeCallback: _switchTheme, initialPage: widget.initialPage),
+    );
+  }
+
+  /// Switch the theme mode based on the currently selected theme and the system prefs
   void _switchTheme() async {
     final prefs = await SharedPreferences.getInstance();
     if (MediaQuery.of(context).platformBrightness == Brightness.dark &&
@@ -58,46 +77,76 @@ class _MainAppState extends State<MainApp> {
     }
   }
 
-  @override
-  Widget build(BuildContext context) {
-    SystemChrome.setPreferredOrientations([
-      DeviceOrientation.portraitUp,
-      DeviceOrientation.portraitDown,
-    ]);
-
-    return MaterialApp(
-      title: 'Job Link',
-      themeMode: themeMode,
-      darkTheme: ThemeData(
+  /// Static theme for dark mode
+  ThemeData _darkThemeData() {
+    return ThemeData(
+      scaffoldBackgroundColor: const Color(0xFF121212),
       colorScheme: ColorScheme.dark(
         brightness: Brightness.dark,
         primary: Colors.blue.shade700,
         onPrimary: Colors.white,
         secondary: Colors.blue.shade900,
+        onSecondary: Colors.white,
         surface: const Color.fromARGB(255, 31, 31, 31),
-          surfaceContainer: const Color.fromARGB(255, 40, 40, 40),
+        surfaceContainer: const Color.fromARGB(255, 46, 46, 46),
         tertiary: Colors.green.shade900,
       ),
       iconTheme: const IconThemeData(color: Colors.white),
-        inputDecorationTheme: const InputDecorationTheme(),
       useMaterial3: true,
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        fillColor: Colors.grey.withOpacity(0.1),
+        labelStyle: const TextStyle(color: Colors.grey),
+        floatingLabelStyle: WidgetStateTextStyle.resolveWith((states) {
+          if (states.contains(WidgetState.focused) &&
+              !states.contains(WidgetState.hovered)) {
+            return TextStyle(color: Colors.blue.shade700);
+          }
+          return const TextStyle(color: Colors.grey);
+        }),
       ),
-      theme: ThemeData(
+      dropdownMenuTheme: const DropdownMenuThemeData(
+        inputDecorationTheme: InputDecorationTheme(
+          filled: true,
+        ),
+      ),
+    );
+  }
+
+  /// Static theme for light mode
+  ThemeData _lightThemeData() {
+    return ThemeData(
+      scaffoldBackgroundColor: Colors.grey.shade300,
       colorScheme: ColorScheme.light(
         brightness: Brightness.light,
         primary: Colors.blue.shade700,
         onPrimary: Colors.white,
-          secondary: Colors.blue.shade200,
-          surface: Colors.grey.shade200,
-          surfaceContainer: Colors.grey.shade300,
+        secondary: Colors.blue.shade300,
+        onSecondary: Colors.black,
+        surface: Colors.grey.shade100,
+        surfaceContainer: Colors.grey.shade200,
         tertiary: Colors.green,
       ),
       iconTheme: const IconThemeData(color: Colors.black),
-        inputDecorationTheme:
-            const InputDecorationTheme(border: UnderlineInputBorder()),
-        useMaterial3: true,
+      inputDecorationTheme: InputDecorationTheme(
+        // border: OutlineInputBorder(),
+        filled: true,
+        fillColor: Colors.grey.withOpacity(0.25),
+        labelStyle: TextStyle(color: Colors.grey.shade700),
+        floatingLabelStyle: WidgetStateTextStyle.resolveWith((states) {
+          if (states.contains(WidgetState.focused) &&
+              !states.contains(WidgetState.hovered)) {
+            return TextStyle(color: Colors.blue.shade700);
+          }
+          return TextStyle(color: Colors.grey.shade700);
+        }),
       ),
-      home: Home(themeCallback: _switchTheme, initialPage: widget.initialPage),
+      dropdownMenuTheme: const DropdownMenuThemeData(
+        inputDecorationTheme: InputDecorationTheme(
+          filled: true,
+        ),
+      ),
+      useMaterial3: true,
     );
   }
 }

fbla_ui/lib/pages/business_detail.dart

@@ -4,12 +4,12 @@ import 'package:fbla_ui/pages/create_edit_listing.dart';
 import 'package:fbla_ui/pages/listing_detail.dart';
 import 'package:fbla_ui/shared/api_logic.dart';
 import 'package:fbla_ui/shared/global_vars.dart';
+import 'package:fbla_ui/shared/utils.dart';
+import 'package:fbla_ui/shared/widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:rive/rive.dart';
 import 'package:url_launcher/url_launcher.dart';
 
-import '../shared/utils.dart';
-
 class BusinessDetail extends StatefulWidget {
   final int id;
   final String name;
@@ -22,6 +22,7 @@ class BusinessDetail extends StatefulWidget {
 
 class _CreateBusinessDetailState extends State<BusinessDetail> {
   late Future loadBusiness;
+  bool _isRetrying = false;
 
   @override
   void initState() {
@@ -60,11 +61,17 @@ class _CreateBusinessDetailState extends State<BusinessDetail> {
                         padding: const EdgeInsets.all(8.0),
                         child: FilledButton(
                           child: const Text('Retry'),
-                          onPressed: () {
-                            var refreshedData = fetchBusiness(widget.id);
+                          onPressed: () async {
+                            if (!_isRetrying) {
+                              setState(() {
+                                _isRetrying = true;
+                              });
+                              var refreshedData =
+                                  await fetchBusiness(widget.id);
                               setState(() {
                                 loadBusiness = refreshedData;
                               });
+                            }
                           },
                         ),
                       ),
@@ -105,36 +112,50 @@ class _CreateBusinessDetailState extends State<BusinessDetail> {
         });
   }
 
-  ListView _detailBody(Business business) {
+  Widget _detailBody(Business business) {
     return ListView(
       children: [
         // Title, logo, desc, website
+        Center(
+          child: SizedBox(
+            width: 800,
+            child: Column(
+              children: [
                 Padding(
                   padding: const EdgeInsets.only(top: 4.0),
                   child: Card(
                     clipBehavior: Clip.antiAlias,
                     child: Column(
                       children: [
-                ListTile(
+                        Padding(
+                          padding: const EdgeInsets.only(right: 8.0),
+                          child: ListTile(
+                            titleAlignment: ListTileTitleAlignment.titleHeight,
                             title: Text(business.name!,
-                      textAlign: TextAlign.left,
                                 style: const TextStyle(
                                     fontSize: 24, fontWeight: FontWeight.bold)),
                             subtitle: Text(
                               business.description!,
-                    textAlign: TextAlign.left,
                             ),
+                            contentPadding:
+                                const EdgeInsets.only(bottom: 8, left: 16),
                             leading: ClipRRect(
                               borderRadius: BorderRadius.circular(6.0),
-                    child: Image.network('$apiAddress/logos/${business.id}',
+                              child: Image.network(
+                                  '$apiAddress/logos/${business.id}',
                                   width: 48,
-                        height: 48, errorBuilder: (BuildContext context,
-                            Object exception, StackTrace? stackTrace) {
-                      return Icon(getIconFromBusinessType(business.type!),
+                                  height: 48, errorBuilder:
+                                      (BuildContext context, Object exception,
+                                          StackTrace? stackTrace) {
+                                return Icon(
+                                    getIconFromBusinessType(
+                                        business.type ?? BusinessType.other),
                                     size: 48);
                               }),
                             ),
                           ),
+                        ),
+                        if (business.website != null)
                           ListTile(
                             leading: const Icon(Icons.link),
                             title: const Text('Website'),
@@ -153,81 +174,45 @@ class _CreateBusinessDetailState extends State<BusinessDetail> {
                   ),
                 ),
                 // Available positions
-        if (business.listings != null)
-          Card(
-            clipBehavior: Clip.antiAlias,
-            child:
-                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-              Padding(
-                  padding: const EdgeInsets.only(left: 16, top: 4),
-                  child: _GetListingsTitle(business)),
-              _JobList(business: business)
-            ]),
-          ),
-        // Contact info
+                if (business.listings != null || loggedIn)
                   Card(
                     clipBehavior: Clip.antiAlias,
                     child: Column(
-            children: [
-              Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
                           Padding(
-                    padding: const EdgeInsets.only(left: 16.0, top: 8.0),
-                    child: Text(
-                      business.contactName!,
-                      textAlign: TextAlign.left,
-                      style: const TextStyle(
-                          fontSize: 20, fontWeight: FontWeight.bold),
+                              padding: const EdgeInsets.only(left: 16, top: 8),
+                              child: _GetListingsTitle(business)),
+                          if (business.listings != null)
+                            _JobList(business: business)
+                          else
+                            Padding(
+                              padding: const EdgeInsets.only(bottom: 8.0),
+                              child: Row(
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: [
+                                  const Padding(
+                                    padding: EdgeInsets.only(left: 16.0),
+                                    child: Text('No job listings exist.'),
                                   ),
-                  ),
-                ],
-              ),
-              if (business.contactPhone != null)
-                ListTile(
-                  leading: const Icon(Icons.phone),
-                  title: Text(business.contactPhone!),
-                  // maybe replace ! with ?? ''. same is true for below
-                  onTap: () {
-                    showDialog(
-                        context: context,
-                        builder: (BuildContext context) {
-                          return AlertDialog(
-                            backgroundColor:
-                                Theme.of(context).colorScheme.surface,
-                            title: Text('Contact ${business.contactName}'),
-                            content: Text(
-                                'Would you like to call or text ${business.contactName}?'),
-                            actions: [
                                   TextButton(
-                                  child: const Text('Text'),
+                                    child: const Text('add one?'),
                                     onPressed: () {
-                                    launchUrl(Uri.parse(
-                                        'sms:${business.contactPhone}'));
-                                    Navigator.of(context).pop();
-                                  }),
-                              TextButton(
-                                  child: const Text('Call'),
-                                  onPressed: () async {
-                                    launchUrl(Uri.parse(
-                                        'tel:${business.contactPhone}'));
-                                    Navigator.of(context).pop();
-                                  }),
-                            ],
-                          );
-                        });
+                                      Navigator.of(context).push(
+                                          MaterialPageRoute(
+                                              builder: (context) =>
+                                                  CreateEditJobListing(
+                                                    inputBusiness: business,
+                                                  )));
                                     },
-                ),
-              if (business.contactEmail != null)
-                ListTile(
-                  leading: const Icon(Icons.email),
-                  title: Text(business.contactEmail!),
-                  onTap: () {
-                    launchUrl(Uri.parse('mailto:${business.contactEmail}'));
-                  },
-                ),
+                                  )
                                 ],
                               ),
+                            )
+                        ]),
                   ),
+                // Contact info
+                ContactInformationCard(business: business),
                 // Location
                 Card(
                   clipBehavior: Clip.antiAlias,
@@ -237,7 +222,7 @@ class _CreateBusinessDetailState extends State<BusinessDetail> {
                     subtitle: Text(business.locationAddress!),
                     onTap: () {
                       launchUrl(Uri.parse(Uri.encodeFull(
-                  'https://www.google.com/maps/search/?api=1&query=${business.locationName}')));
+                          'https://www.google.com/maps/search/?api=1&query=${business.locationName} ${business.locationAddress}')));
                     },
                   ),
                 ),
@@ -248,12 +233,17 @@ class _CreateBusinessDetailState extends State<BusinessDetail> {
                       leading: const Icon(Icons.notes),
                       title: const Text(
                         'Additional Notes',
-                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+                        style: TextStyle(
+                            fontSize: 20, fontWeight: FontWeight.bold),
                       ),
                       subtitle: Text(business.notes!),
                     ),
                   ),
               ],
+            ),
+          ),
+        ),
+      ],
     );
   }
 
@@ -350,6 +340,7 @@ class _JobListItem extends StatelessWidget {
       subtitle: Text(
         jobListing.description,
         style: const TextStyle(overflow: TextOverflow.ellipsis),
+        maxLines: 2,
       ),
       trailing: _getEditIcon(context, fromBusiness, jobListing),
       onTap: () {
@@ -390,14 +381,16 @@ class _GetListingsTitle extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (!loggedIn) {
-      return const Text('Available Postitions',
-          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold));
+      return Text(
+          'Available Postitions (${fromBusiness.listings?.length ?? '0'})',
+          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold));
     } else {
       return Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          const Text('Available Postitions',
-              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
+          Text('Available Postitions (${fromBusiness.listings?.length ?? '0'})',
+              style:
+                  const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
           Padding(
             padding: const EdgeInsets.only(right: 24.0),
             child: IconButton(

fbla_ui/lib/pages/businesses_overview.dart

@@ -40,6 +40,7 @@ class _BusinessesOverviewState extends State<BusinessesOverview> {
   ScrollController controller = ScrollController();
   bool _extended = true;
   double prevPixelPosition = 0;
+  bool _isRetrying = false;
 
   Map<BusinessType, List<Business>> _filterBySearch(
       Map<BusinessType, List<Business>> businesses, String query) {
@@ -138,9 +139,14 @@ class _BusinessesOverviewState extends State<BusinessesOverview> {
                             padding: const EdgeInsets.all(8.0),
                             child: FilledButton(
                               child: const Text('Retry'),
-                              onPressed: () {
-                                widget.updateBusinessesCallback(
+                              onPressed: () async {
+                                if (!_isRetrying) {
+                                  setState(() {
+                                    _isRetrying = true;
+                                  });
+                                  await widget.updateBusinessesCallback(
                                       businessTypeFilters);
+                                }
                               },
                             ),
                           ),
@@ -213,6 +219,7 @@ class _BusinessesOverviewState extends State<BusinessesOverview> {
               : Theme.of(context).colorScheme.onSurface,
         ),
         onPressed: () {
+          selectedChips = Set.from(businessTypeFilters);
           showDialog(
               context: context,
               builder: (BuildContext context) {
@@ -224,15 +231,24 @@ class _BusinessesOverviewState extends State<BusinessesOverview> {
                     });
                   }
 
-                  List<Padding> chips = [];
+                  List<Widget> chips = [];
                   for (var type in BusinessType.values) {
-                    chips.add(Padding(
-                      padding: const EdgeInsets.all(4),
-                      child: FilterChip(
+                    chips.add(FilterChip(
+                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                         showCheckmark: false,
                         shape: RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(20)),
-                          label: Text(getNameFromBusinessType(type)),
+                            borderRadius: BorderRadius.circular(20),
+                            side: BorderSide(
+                                color:
+                                    Theme.of(context).colorScheme.secondary)),
+                        selectedColor: Theme.of(context).colorScheme.secondary,
+                        label: Text(
+                          getNameFromBusinessType(type),
+                          style: TextStyle(
+                              color: selectedChips.contains(type)
+                                  ? Theme.of(context).colorScheme.onSecondary
+                                  : Theme.of(context).colorScheme.onSurface),
+                        ),
                         selected: selectedChips.contains(type),
                         onSelected: (bool selected) {
                           if (selected) {
@@ -241,8 +257,7 @@ class _BusinessesOverviewState extends State<BusinessesOverview> {
                             selectedChips.remove(type);
                           }
                           setDialogState(filters);
-                          }),
-                    ));
+                        }));
                   }
 
                   return AlertDialog(
@@ -250,6 +265,8 @@ class _BusinessesOverviewState extends State<BusinessesOverview> {
                     content: SizedBox(
                       width: 400,
                       child: Wrap(
+                        spacing: 8,
+                        runSpacing: 8,
                         children: chips,
                       ),
                     ),
@@ -338,9 +355,9 @@ class _BusinessDisplayPanelState extends State<BusinessDisplayPanel> {
       );
     }
 
-    List<BusinessHeader> headers = [];
+    List<_BusinessHeader> headers = [];
     for (BusinessType businessType in widget.groupedBusinesses.keys) {
-      headers.add(BusinessHeader(
+      headers.add(_BusinessHeader(
           businessType: businessType,
           widescreen: widget.widescreen,
           businesses: widget.groupedBusinesses[businessType]!));
@@ -351,23 +368,22 @@ class _BusinessDisplayPanelState extends State<BusinessDisplayPanel> {
   }
 }
 
-class BusinessHeader extends StatefulWidget {
+class _BusinessHeader extends StatefulWidget {
   final BusinessType businessType;
   final List<Business> businesses;
   final bool widescreen;
 
-  const BusinessHeader({
-    super.key,
+  const _BusinessHeader({
     required this.businessType,
     required this.businesses,
     required this.widescreen,
   });
 
   @override
-  State<BusinessHeader> createState() => _BusinessHeaderState();
+  State<_BusinessHeader> createState() => _BusinessHeaderState();
 }
 
-class _BusinessHeaderState extends State<BusinessHeader> {
+class _BusinessHeaderState extends State<_BusinessHeader> {
   @override
   Widget build(BuildContext context) {
     return SliverStickyHeader(
@@ -391,7 +407,8 @@ class _BusinessHeaderState extends State<BusinessHeader> {
               getIconFromBusinessType(widget.businessType),
               color: Theme.of(context).colorScheme.onPrimary,
             )),
-        Text(getNameFromBusinessType(widget.businessType)),
+        Text(getNameFromBusinessType(widget.businessType),
+            style: TextStyle(color: Theme.of(context).colorScheme.onPrimary)),
       ],
     );
   }
@@ -433,6 +450,7 @@ class _BusinessHeaderState extends State<BusinessHeader> {
     }
   }
 
+  /// A desktop widget that displays basic info about a business
   Widget _businessTile(Business business, BusinessType jobType) {
     return MouseRegion(
       cursor: SystemMouseCursors.click,
@@ -491,17 +509,18 @@ class _BusinessHeaderState extends State<BusinessHeader> {
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
+                      if (business.website != null)
                         IconButton(
                           icon: const Icon(Icons.link),
                           onPressed: () {
-                          launchUrl(Uri.parse('https://${business.website}'));
+                            launchUrl(Uri.parse(business.website!));
                           },
                         ),
                       IconButton(
                         icon: const Icon(Icons.location_on),
                         onPressed: () {
                           launchUrl(Uri.parse(Uri.encodeFull(
-                              'https://www.google.com/maps/search/?api=1&query=${business.locationName}')));
+                              'https://www.google.com/maps/search/?api=1&query=${business.locationName} ${business.locationAddress}')));
                         },
                       ),
                       if (business.contactPhone != null)
@@ -555,6 +574,7 @@ class _BusinessHeaderState extends State<BusinessHeader> {
     );
   }
 
+  /// A mobile widget that displays basic info about a business
   Widget _businessListItem(Business business, BusinessType? jobType) {
     return Card(
       child: ListTile(

fbla_ui/lib/pages/create_edit_business.dart

@@ -1,5 +1,6 @@
 import 'package:fbla_ui/main.dart';
 import 'package:fbla_ui/shared/api_logic.dart';
+import 'package:fbla_ui/shared/global_vars.dart';
 import 'package:fbla_ui/shared/utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -23,15 +24,14 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
   late TextEditingController _notesController;
   late TextEditingController _locationNameController;
   late TextEditingController _locationAddressController;
-
-  // late TextEditingController _businessTypeController;
+  late bool widescreen;
 
   Business business = Business(
     id: 0,
     name: 'Business',
     description: 'Add details about the business below.',
     type: null,
-    website: '',
+    website: null,
     contactName: null,
     contactEmail: null,
     contactPhone: null,
@@ -56,8 +56,8 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
       _descriptionController = TextEditingController();
     }
     _websiteController = TextEditingController(
-        text: business.website!
-            .replaceAll('https://', '')
+        text: business.website
+            ?.replaceAll('https://', '')
             .replaceAll('http://', '')
             .replaceAll('www.', ''));
     _contactNameController = TextEditingController(text: business.contactName);
@@ -76,6 +76,7 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
 
   @override
   Widget build(BuildContext context) {
+    widescreen = MediaQuery.sizeOf(context).width >= widescreenWidth;
     return PopScope(
       canPop: !_isLoading,
       onPopInvoked: _handlePop,
@@ -87,10 +88,14 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                   ? Text('Edit ${widget.inputBusiness?.name}', maxLines: 1)
                   : const Text('Add New Business'),
             ),
-            floatingActionButton: FloatingActionButton(
-              child: _isLoading
-                  ? const Padding(
-                      padding: EdgeInsets.all(16.0),
+            floatingActionButton: !widescreen
+                ? FloatingActionButton.extended(
+                    heroTag: 'saveBusiness',
+                    label: const Text('Save'),
+                    icon: _isLoading
+                        ? const SizedBox(
+                            width: 24,
+                            height: 24,
                             child: CircularProgressIndicator(
                               color: Colors.white,
                               strokeWidth: 3.0,
@@ -98,54 +103,20 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                           )
                         : const Icon(Icons.save),
                     onPressed: () async {
-                if (business.type == null) {
-                  setState(() {
-                    dropDownErrorText = 'Business type is required';
-                  });
-                  formKey.currentState!.validate();
-                } else {
-                  setState(() {
-                    dropDownErrorText = null;
-                  });
-                  if (formKey.currentState!.validate()) {
-                    formKey.currentState?.save();
-                    setState(() {
-                      _isLoading = true;
-                    });
-                    String? result;
-                    if (widget.inputBusiness != null) {
-                      result = await editBusiness(business);
-                    } else {
-                      result = await createBusiness(business);
-                    }
-                    setState(() {
-                      _isLoading = false;
-                    });
-                    if (result != null) {
-                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-                          width: 400,
-                          behavior: SnackBarBehavior.floating,
-                          content: Text(result)));
-                    } else {
-                      Navigator.pushReplacement(
-                          context,
-                          MaterialPageRoute(
-                              builder: (context) => const MainApp()));
-                    }
+                      if (!_isLoading) {
+                        await _saveBusiness(context);
                       } else {
                         ScaffoldMessenger.of(context).showSnackBar(
-                      SnackBar(
-                        content: const Text('Check field inputs!'),
-                        width: 200,
+                          const SnackBar(
+                            width: 400,
                             behavior: SnackBarBehavior.floating,
-                        shape: RoundedRectangleBorder(
-                            borderRadius: BorderRadius.circular(10)),
+                            content: Text('Please wait for it to save.'),
                           ),
                         );
                       }
-                }
                     },
-            ),
+                  )
+                : null,
             body: ListView(
               children: [
                 Center(
@@ -153,41 +124,53 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                     width: 800,
                     child: Column(
                       children: [
-                        ListTile(
+                        Padding(
+                          padding: const EdgeInsets.only(top: 4.0),
+                          child: Card(
+                            child: Padding(
+                              padding: const EdgeInsets.only(right: 8.0),
+                              child: ListTile(
+                                titleAlignment:
+                                    ListTileTitleAlignment.titleHeight,
                                 title: Text(business.name!,
-                              textAlign: TextAlign.left,
                                     style: const TextStyle(
-                                  fontSize: 24, fontWeight: FontWeight.bold)),
+                                        fontSize: 24,
+                                        fontWeight: FontWeight.bold)),
                                 subtitle: Text(
                                   business.description!,
-                            textAlign: TextAlign.left,
                                 ),
+                                contentPadding:
+                                    const EdgeInsets.only(bottom: 8, left: 16),
                                 leading: ClipRRect(
                                   borderRadius: BorderRadius.circular(6.0),
                                   child: Image.network(
+                                      '$apiAddress/clearbit/${Uri.encodeComponent(business.website ?? '')}',
                                       width: 48,
-                                height: 48,
-                                'https://logo.clearbit.com/${business.website}',
-                                errorBuilder: (BuildContext context,
-                                    Object exception, StackTrace? stackTrace) {
+                                      height: 48, errorBuilder:
+                                          (BuildContext context,
+                                              Object exception,
+                                              StackTrace? stackTrace) {
                                     return Icon(
-                                  getIconFromBusinessType(business.type != null
-                                      ? business.type!
-                                      : BusinessType.other),
+                                        getIconFromBusinessType(business.type ??
+                                            BusinessType.other),
                                         size: 48);
                                   }),
                                 ),
                               ),
+                            ),
+                          ),
+                        ),
                         Card(
                           child: Column(
                             children: [
                               Padding(
                                 padding: const EdgeInsets.only(
-                                    left: 8.0, right: 8.0),
+                                    top: 8.0,
+                                    bottom: 8.0,
+                                    left: 8.0,
+                                    right: 8.0),
                                 child: TextFormField(
                                   controller: _nameController,
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   maxLength: 30,
                                   onChanged: (inputName) {
                                     setState(() {
@@ -210,11 +193,9 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                               ),
                               Padding(
                                 padding: const EdgeInsets.only(
-                                    left: 8.0, right: 8.0),
+                                    bottom: 8.0, left: 8.0, right: 8.0),
                                 child: TextFormField(
                                   controller: _descriptionController,
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   maxLength: 500,
                                   maxLines: null,
                                   onChanged: (inputDesc) {
@@ -242,49 +223,56 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                     left: 8.0, right: 8.0, bottom: 16.0),
                                 child: TextFormField(
                                   controller: _websiteController,
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   keyboardType: TextInputType.url,
                                   onChanged: (inputUrl) {
-                                    business.website = Uri.encodeFull(inputUrl);
+                                    setState(() {
+                                      business.website =
+                                          Uri.encodeFull(inputUrl);
+                                    });
+                                    if (inputUrl.trim().isEmpty) {
+                                      business.website = null;
+                                    } else {
                                       if (!business.website!
                                               .contains('http://') &&
                                           !business.website!
                                               .contains('https://')) {
+                                        setState(() {
                                           business.website =
-                                          'https://${business.website}';
+                                              'https://${business.website!.trim()}';
+                                        });
+                                      }
                                     }
                                   },
                                   onTapOutside: (PointerDownEvent event) {
                                     FocusScope.of(context).unfocus();
                                   },
                                   decoration: const InputDecoration(
-                                    labelText: 'Website (required)',
+                                    labelText: 'Website',
                                   ),
                                   validator: (value) {
                                     if (value != null &&
-                                        !RegExp(r'(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:\/[^\/\s]*)*')
+                                        value.isNotEmpty &&
+                                        !RegExp(r'(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:/[^/\s]*)*')
                                             .hasMatch(value)) {
                                       return 'Enter a valid Website';
                                     }
-                                    if (value != null && value.trim().isEmpty) {
-                                      return 'Website is required';
-                                    }
                                     return null;
                                   },
                                 ),
                               ),
-                              Padding(
+                              Align(
+                                alignment: Alignment.centerLeft,
+                                child: Padding(
                                   padding: const EdgeInsets.only(
-                                    left: 8.0, right: 8.0, bottom: 8.0),
-                                child: Row(
-                                  mainAxisAlignment:
-                                      MainAxisAlignment.spaceBetween,
-                                  children: [
-                                    const Text('Type of Business',
-                                        style: TextStyle(fontSize: 16)),
-                                    DropdownMenu<BusinessType>(
+                                      left: 8.0, right: 8.0, bottom: 16.0),
+                                  child: DropdownMenu<BusinessType>(
                                     initialSelection: business.type,
+                                    width: (MediaQuery.sizeOf(context).width -
+                                                24) <
+                                            776
+                                        ? MediaQuery.sizeOf(context).width - 24
+                                        : 776,
+                                    menuHeight: 300,
                                     label: const Text('Business Type'),
                                     errorText: dropDownErrorText,
                                     dropdownMenuEntries: [
@@ -292,8 +280,8 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                           in BusinessType.values)
                                         DropdownMenuEntry(
                                             value: type,
-                                              label: getNameFromBusinessType(
-                                                  type)),
+                                            label:
+                                                getNameFromBusinessType(type)),
                                     ],
                                     onSelected: (inputType) {
                                       setState(() {
@@ -302,85 +290,11 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                       });
                                     },
                                   ),
-                                  ],
                                 ),
                               ),
-
-                              // Padding(
-                              //   padding: const EdgeInsets.only(
-                              //       left: 8.0, right: 8.0, bottom: 16.0),
-                              //   child: Row(
-                              //     children: [
-                              //       ElevatedButton(
-                              //         style: ButtonStyle(
-                              //             backgroundColor:
-                              //                 MaterialStateProperty.all(
-                              //                     Theme.of(context)
-                              //                         .colorScheme
-                              //                         .background)),
-                              //         child: const Row(
-                              //           children: [
-                              //             Icon(Icons.search),
-                              //             Text('Search For Location'),
-                              //           ],
-                              //         ),
-                              //         onPressed: () {},
-                              //       ),
-                              //       const Padding(
-                              //         padding: EdgeInsets.only(
-                              //             left: 32.0, right: 32.0),
-                              //         child: Text(
-                              //           'OR',
-                              //           style: TextStyle(fontSize: 24),
-                              //         ),
-                              //       ),
-                              //       Expanded(
-                              //         child: Column(
-                              //           children: [
-                              //             TextFormField(
-                              //               controller: _locationNameController,
-                              //               onChanged: (inputName) {
-                              //                 setState(() {
-                              //                   business.locationName =
-                              //                       inputName;
-                              //                 });
-                              //               },
-                              //               onTapOutside:
-                              //                   (PointerDownEvent event) {
-                              //                 FocusScope.of(context).unfocus();
-                              //               },
-                              //               decoration: const InputDecoration(
-                              //                 labelText:
-                              //                     'Location Name (optional)',
-                              //               ),
-                              //             ),
-                              //             TextFormField(
-                              //               controller:
-                              //                   _locationAddressController,
-                              //               onChanged: (inputAddr) {
-                              //                 setState(() {
-                              //                   business.locationAddress =
-                              //                       inputAddr;
-                              //                 });
-                              //               },
-                              //               onTapOutside:
-                              //                   (PointerDownEvent event) {
-                              //                 FocusScope.of(context).unfocus();
-                              //               },
-                              //               decoration: const InputDecoration(
-                              //                 labelText:
-                              //                     'Location Address (optional)',
-                              //               ),
-                              //             ),
-                              //           ],
-                              //         ),
-                              //       ),
-                              //     ],
-                              //   ),
-                              // ),
                               Padding(
                                 padding: const EdgeInsets.only(
-                                    left: 8.0, right: 8.0, bottom: 8.0),
+                                    left: 8.0, right: 8.0, bottom: 16.0),
                                 child: TextFormField(
                                   controller: _contactNameController,
                                   onSaved: (inputText) {
@@ -393,8 +307,6 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                     labelText:
                                         'Contact Information Name (required)',
                                   ),
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   validator: (value) {
                                     if (value == null || value.trim().isEmpty) {
                                       return 'Contact name is required';
@@ -405,13 +317,11 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                               ),
                               Padding(
                                 padding: const EdgeInsets.only(
-                                    left: 8.0, right: 8.0, bottom: 8.0),
+                                    left: 8.0, right: 8.0, bottom: 16.0),
                                 child: TextFormField(
                                   controller: _contactPhoneController,
                                   inputFormatters: [PhoneFormatter()],
                                   keyboardType: TextInputType.phone,
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   onChanged: (inputText) {
                                     if (inputText.trim().isEmpty) {
                                       business.contactPhone = null;
@@ -430,7 +340,9 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                         (value == null || value.isEmpty)) {
                                       return 'At least one contact method is required';
                                     }
-                                    if (value != null && value.length != 14) {
+                                    if (value != null &&
+                                        value.isNotEmpty &&
+                                        value.length != 14) {
                                       return 'Enter a valid phone number';
                                     }
                                     return null;
@@ -439,7 +351,7 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                               ),
                               Padding(
                                 padding: const EdgeInsets.only(
-                                    left: 8.0, right: 8.0, bottom: 8.0),
+                                    left: 8.0, right: 8.0, bottom: 16.0),
                                 child: TextFormField(
                                   controller: _contactEmailController,
                                   keyboardType: TextInputType.emailAddress,
@@ -450,8 +362,6 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                       business.contactEmail = inputText.trim();
                                     }
                                   },
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   onTapOutside: (PointerDownEvent event) {
                                     FocusScope.of(context).unfocus();
                                   },
@@ -482,7 +392,7 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                               ),
                               Padding(
                                 padding: const EdgeInsets.only(
-                                    left: 8.0, right: 8.0, bottom: 8.0),
+                                    left: 8.0, right: 8.0, bottom: 16.0),
                                 child: TextFormField(
                                   controller: _locationNameController,
                                   onChanged: (inputName) {
@@ -490,8 +400,6 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                       business.locationName = inputName.trim();
                                     });
                                   },
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   onTapOutside: (PointerDownEvent event) {
                                     FocusScope.of(context).unfocus();
                                   },
@@ -516,8 +424,6 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                                       business.locationAddress = inputAddr;
                                     });
                                   },
-                                  autovalidateMode:
-                                      AutovalidateMode.onUserInteraction,
                                   onTapOutside: (PointerDownEvent event) {
                                     FocusScope.of(context).unfocus();
                                   },
@@ -558,9 +464,55 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
                             ],
                           ),
                         ),
-                        SizedBox(
+                        if (!widescreen)
+                          const SizedBox(
                             height: 75,
                           )
+                        else
+                          Align(
+                            alignment: Alignment.topRight,
+                            child: Padding(
+                              padding: const EdgeInsets.all(8.0),
+                              child: FilledButton(
+                                child: Row(
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                    Padding(
+                                      padding: const EdgeInsets.only(
+                                          top: 8.0, right: 8.0, bottom: 8.0),
+                                      child: _isLoading
+                                          ? SizedBox(
+                                              width: 24,
+                                              height: 24,
+                                              child: CircularProgressIndicator(
+                                                color: Theme.of(context)
+                                                    .colorScheme
+                                                    .onPrimary,
+                                                strokeWidth: 3.0,
+                                              ),
+                                            )
+                                          : const Icon(Icons.save),
+                                    ),
+                                    const Text('Save'),
+                                  ],
+                                ),
+                                onPressed: () async {
+                                  if (!_isLoading) {
+                                    await _saveBusiness(context);
+                                  } else {
+                                    ScaffoldMessenger.of(context).showSnackBar(
+                                      const SnackBar(
+                                        width: 400,
+                                        behavior: SnackBarBehavior.floating,
+                                        content:
+                                            Text('Please wait for it to save.'),
+                                      ),
+                                    );
+                                  }
+                                },
+                              ),
+                            ),
+                          )
                       ],
                     ),
                   ),
@@ -582,6 +534,53 @@ class _CreateEditBusinessState extends State<CreateEditBusiness> {
       );
     }
   }
+
+  Future<void> _saveBusiness(BuildContext context) async {
+    if (business.type == null) {
+      setState(() {
+        dropDownErrorText = 'Business type is required';
+      });
+      formKey.currentState!.validate();
+    } else {
+      setState(() {
+        dropDownErrorText = null;
+      });
+      if (formKey.currentState!.validate()) {
+        formKey.currentState?.save();
+        setState(() {
+          _isLoading = true;
+        });
+        String? result;
+        if (widget.inputBusiness != null) {
+          result = await editBusiness(business);
+        } else {
+          result = await createBusiness(business);
+        }
+        setState(() {
+          _isLoading = false;
+        });
+        if (result != null) {
+          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+              width: 400,
+              behavior: SnackBarBehavior.floating,
+              content: Text(result)));
+        } else {
+          Navigator.pushReplacement(context,
+              MaterialPageRoute(builder: (context) => const MainApp()));
+        }
+      } else {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: const Text('Check field inputs!'),
+            width: 200,
+            behavior: SnackBarBehavior.floating,
+            shape:
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+          ),
+        );
+      }
+    }
+  }
 }
 
 class PhoneFormatter extends TextInputFormatter {

fbla_ui/lib/pages/create_edit_listing.dart

@@ -1,9 +1,11 @@
-import 'package:fbla_ui/main.dart';
 import 'package:fbla_ui/shared/api_logic.dart';
+import 'package:fbla_ui/shared/global_vars.dart';
 import 'package:fbla_ui/shared/utils.dart';
 import 'package:flutter/material.dart';
 import 'package:rive/rive.dart';
 
+import '../main.dart';
+
 class CreateEditJobListing extends StatefulWidget {
   final JobListing? inputJobListing;
   final Business? inputBusiness;
@@ -21,19 +23,23 @@ class _CreateEditJobListingState extends State<CreateEditJobListing> {
   late TextEditingController _descriptionController;
   late TextEditingController _wageController;
   late TextEditingController _linkController;
-  List nameMapping = [];
+  List<Map<String, dynamic>> nameMapping = [];
   String? typeDropdownErrorText;
   String? businessDropdownErrorText;
+  late bool widescreen;
 
   JobListing listing = JobListing(
       id: null,
       businessId: null,
       name: 'Job Listing',
-      description: 'Add details about the business below.',
+      description: 'Add details about the job below.',
       type: null,
       wage: null,
-      link: null);
+      link: null,
+      offerType: null);
   bool _isLoading = false;
+  late String businessName;
+  bool _isRetrying = false;
 
   @override
   void initState() {
@@ -53,15 +59,17 @@ class _CreateEditJobListingState extends State<CreateEditJobListing> {
             .replaceAll('http://', '')
             .replaceAll('www.', ''));
     getBusinessNameMapping = fetchBusinessNames();
+    businessName = widget.inputBusiness?.name ?? 'Offering business';
+    if (widget.inputBusiness != null) {
+      listing.businessId = widget.inputBusiness!.id;
+    }
   }
 
   final formKey = GlobalKey<FormState>();
 
   @override
   Widget build(BuildContext context) {
-    if (widget.inputBusiness != null) {
-      listing.businessId = widget.inputBusiness!.id;
-    }
+    widescreen = MediaQuery.sizeOf(context).width >= widescreenWidth;
     return PopScope(
       canPop: !_isLoading,
       onPopInvoked: _handlePop,
@@ -73,10 +81,14 @@ class _CreateEditJobListingState extends State<CreateEditJobListing> {
                   ? Text('Edit ${widget.inputJobListing?.name}', maxLines: 1)
                   : const Text('Add New Job Listing'),
             ),
-            floatingActionButton: FloatingActionButton(
-                child: _isLoading
-                    ? const Padding(
-                        padding: EdgeInsets.all(16.0),
+            floatingActionButton: !widescreen
+                ? FloatingActionButton.extended(
+                    heroTag: 'saveListing',
+                    label: const Text('Save'),
+                    icon: _isLoading
+                        ? const SizedBox(
+                            width: 24,
+                            height: 24,
                             child: CircularProgressIndicator(
                               color: Colors.white,
                               strokeWidth: 3.0,
@@ -84,6 +96,483 @@ class _CreateEditJobListingState extends State<CreateEditJobListing> {
                           )
                         : const Icon(Icons.save),
                     onPressed: () async {
+                      if (!_isLoading) {
+                        await _saveListing(context);
+                      } else {
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          const SnackBar(
+                            width: 400,
+                            behavior: SnackBarBehavior.floating,
+                            content: Text('Please wait for it to save.'),
+                          ),
+                        );
+                      }
+                    })
+                : null,
+            body: FutureBuilder(
+                future: getBusinessNameMapping,
+                builder: (context, snapshot) {
+                  if (snapshot.connectionState == ConnectionState.done) {
+                    if (snapshot.hasData) {
+                      if (snapshot.data.runtimeType == String) {
+                        return Padding(
+                          padding: const EdgeInsets.all(16.0),
+                          child: Column(children: [
+                            Center(
+                                child: Text(snapshot.data,
+                                    textAlign: TextAlign.center)),
+                            Padding(
+                              padding: const EdgeInsets.all(8.0),
+                              child: FilledButton(
+                                child: const Text('Retry'),
+                                onPressed: () async {
+                                  if (!_isRetrying) {
+                                    setState(() {
+                                      _isRetrying = true;
+                                    });
+                                    var refreshedData = fetchBusinessNames();
+                                    await refreshedData;
+                                    setState(() {
+                                      getBusinessNameMapping = refreshedData;
+                                      _isRetrying = false;
+                                    });
+                                  }
+                                },
+                              ),
+                            ),
+                          ]),
+                        );
+                      }
+
+                      nameMapping = snapshot.data;
+                      nameMapping.sort((a, b) =>
+                          a['name'].toString().compareTo(b['name'].toString()));
+
+                      return ListView(
+                        children: [
+                          Center(
+                            child: SizedBox(
+                              width: 800,
+                              child: Column(
+                                children: [
+                                  Padding(
+                                    padding: const EdgeInsets.only(top: 4.0),
+                                    child: Card(
+                                      child: Padding(
+                                        padding:
+                                            const EdgeInsets.only(right: 8.0),
+                                        child: ListTile(
+                                          titleAlignment: ListTileTitleAlignment
+                                              .titleHeight,
+                                          title: Text(listing.name,
+                                              style: const TextStyle(
+                                                  fontSize: 24,
+                                                  fontWeight: FontWeight.bold)),
+                                          subtitle: Column(
+                                            crossAxisAlignment:
+                                                CrossAxisAlignment.start,
+                                            children: [
+                                              Text(
+                                                businessName,
+                                                style: const TextStyle(
+                                                    fontSize: 18),
+                                              ),
+                                              Text(
+                                                listing.description,
+                                              ),
+                                            ],
+                                          ),
+                                          contentPadding:
+                                              const EdgeInsets.only(left: 16),
+                                          leading: ClipRRect(
+                                            borderRadius:
+                                                BorderRadius.circular(6.0),
+                                            child: Image.network(
+                                                '$apiAddress/logos/${listing.businessId}',
+                                                width: 48,
+                                                height: 48, errorBuilder:
+                                                    (BuildContext context,
+                                                        Object exception,
+                                                        StackTrace?
+                                                            stackTrace) {
+                                              return Icon(
+                                                  getIconFromJobType(
+                                                      listing.type ??
+                                                          JobType.other),
+                                                  size: 48);
+                                            }),
+                                          ),
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                  // Business Type Dropdown
+                                  Card(
+                                    child: Column(
+                                      children: [
+                                        Align(
+                                          alignment: Alignment.centerLeft,
+                                          child: Padding(
+                                            padding: const EdgeInsets.only(
+                                                left: 8.0,
+                                                right: 8.0,
+                                                bottom: 8.0,
+                                                top: 8.0),
+                                            child: DropdownMenu<int>(
+                                              menuHeight: 300,
+                                              width: (MediaQuery.sizeOf(context)
+                                                              .width -
+                                                          24) <
+                                                      776
+                                                  ? MediaQuery.sizeOf(context)
+                                                          .width -
+                                                      24
+                                                  : 776,
+                                              errorText:
+                                                  businessDropdownErrorText,
+                                              initialSelection:
+                                                  widget.inputBusiness?.id,
+                                              label: const Text(
+                                                  'Offering Business'),
+                                              dropdownMenuEntries: [
+                                                for (Map<String, dynamic> map
+                                                    in nameMapping)
+                                                  DropdownMenuEntry(
+                                                      value: map['id']!,
+                                                      label: map['name'])
+                                              ],
+                                              onSelected: (inputType) {
+                                                setState(() {
+                                                  listing.businessId =
+                                                      inputType!;
+                                                  businessName = nameMapping
+                                                      .where((element) =>
+                                                          element['id'] ==
+                                                          listing.businessId)
+                                                      .first['name'];
+                                                  businessDropdownErrorText =
+                                                      null;
+                                                });
+                                              },
+                                            ),
+                                          ),
+                                        ),
+                                        Align(
+                                          alignment: Alignment.centerLeft,
+                                          child: Wrap(
+                                            children: [
+                                              Padding(
+                                                padding: const EdgeInsets.only(
+                                                    left: 8.0,
+                                                    right: 8.0,
+                                                    bottom: 16.0,
+                                                    top: 8.0),
+                                                child: DropdownMenu<JobType>(
+                                                  initialSelection:
+                                                      listing.type,
+                                                  label: const Text('Job Type'),
+                                                  errorText:
+                                                      typeDropdownErrorText,
+                                                  width: calculateDropdownWidth(
+                                                      context),
+                                                  menuHeight: 300,
+                                                  dropdownMenuEntries: [
+                                                    for (JobType type
+                                                        in JobType.values)
+                                                      DropdownMenuEntry(
+                                                          value: type,
+                                                          label:
+                                                              getNameFromJobType(
+                                                                  type))
+                                                  ],
+                                                  onSelected: (inputType) {
+                                                    setState(() {
+                                                      listing.type = inputType!;
+                                                      typeDropdownErrorText =
+                                                          null;
+                                                    });
+                                                  },
+                                                ),
+                                              ),
+                                              Padding(
+                                                padding: const EdgeInsets.only(
+                                                    left: 8.0,
+                                                    right: 8.0,
+                                                    bottom: 8.0,
+                                                    top: 8.0),
+                                                child: DropdownMenu<OfferType>(
+                                                  initialSelection:
+                                                      listing.offerType,
+                                                  label:
+                                                      const Text('Offer Type'),
+                                                  errorText:
+                                                      typeDropdownErrorText,
+                                                  width: calculateDropdownWidth(
+                                                      context),
+                                                  dropdownMenuEntries: [
+                                                    for (OfferType type
+                                                        in OfferType.values)
+                                                      DropdownMenuEntry(
+                                                          value: type,
+                                                          label:
+                                                              getNameFromOfferType(
+                                                                  type))
+                                                  ],
+                                                  onSelected: (inputType) {
+                                                    setState(() {
+                                                      listing.offerType =
+                                                          inputType!;
+                                                      typeDropdownErrorText =
+                                                          null;
+                                                    });
+                                                  },
+                                                ),
+                                              ),
+                                            ],
+                                          ),
+                                        ),
+                                        Padding(
+                                          padding: const EdgeInsets.only(
+                                              left: 8.0,
+                                              right: 8.0,
+                                              bottom: 8.0),
+                                          child: TextFormField(
+                                            controller: _nameController,
+                                            maxLength: 40,
+                                            onChanged: (inputName) {
+                                              setState(() {
+                                                listing.name = inputName;
+                                              });
+                                            },
+                                            onTapOutside:
+                                                (PointerDownEvent event) {
+                                              FocusScope.of(context).unfocus();
+                                            },
+                                            decoration: const InputDecoration(
+                                              labelText:
+                                                  'Job Listing Name (required)',
+                                            ),
+                                            validator: (value) {
+                                              if (value != null &&
+                                                  value.isEmpty) {
+                                                return 'Name is required';
+                                              }
+                                              return null;
+                                            },
+                                          ),
+                                        ),
+                                        Padding(
+                                          padding: const EdgeInsets.only(
+                                              left: 8.0,
+                                              right: 8.0,
+                                              bottom: 8.0),
+                                          child: TextFormField(
+                                            controller: _descriptionController,
+                                            maxLength: 500,
+                                            maxLines: null,
+                                            onChanged: (inputDesc) {
+                                              setState(() {
+                                                listing.description = inputDesc;
+                                              });
+                                            },
+                                            onTapOutside:
+                                                (PointerDownEvent event) {
+                                              FocusScope.of(context).unfocus();
+                                            },
+                                            decoration: const InputDecoration(
+                                              labelText:
+                                                  'Job Listing Description (required)',
+                                            ),
+                                            validator: (value) {
+                                              if (value != null &&
+                                                  value.isEmpty) {
+                                                return 'Description is required';
+                                              }
+                                              return null;
+                                            },
+                                          ),
+                                        ),
+                                        Padding(
+                                          padding: const EdgeInsets.only(
+                                              left: 8.0,
+                                              right: 8.0,
+                                              bottom: 16.0),
+                                          child: TextFormField(
+                                            controller: _wageController,
+                                            onChanged: (input) {
+                                              setState(() {
+                                                listing.wage = input;
+                                              });
+                                            },
+                                            onTapOutside:
+                                                (PointerDownEvent event) {
+                                              FocusScope.of(context).unfocus();
+                                            },
+                                            decoration: const InputDecoration(
+                                              labelText: 'Wage Information',
+                                            ),
+                                          ),
+                                        ),
+                                        Padding(
+                                          padding: const EdgeInsets.only(
+                                              left: 8.0,
+                                              right: 8.0,
+                                              bottom: 16.0),
+                                          child: TextFormField(
+                                            controller: _linkController,
+                                            keyboardType: TextInputType.url,
+                                            onChanged: (inputUrl) {
+                                              if (inputUrl != '') {
+                                                listing.link =
+                                                    Uri.encodeFull(inputUrl);
+                                                if (!listing.link!
+                                                        .contains('http://') &&
+                                                    !listing.link!
+                                                        .contains('https://')) {
+                                                  listing.link =
+                                                      'https://${listing.link}';
+                                                }
+                                              } else {
+                                                listing.link = null;
+                                              }
+                                            },
+                                            validator: (value) {
+                                              if (value != null &&
+                                                  value.isNotEmpty &&
+                                                  !RegExp(r'(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:/[^/\s]*)*')
+                                                      .hasMatch(value)) {
+                                                return 'Enter a valid Website';
+                                              }
+                                              return null;
+                                            },
+                                            onTapOutside:
+                                                (PointerDownEvent event) {
+                                              FocusScope.of(context).unfocus();
+                                            },
+                                            decoration: const InputDecoration(
+                                              labelText:
+                                                  'Additional Information Link',
+                                            ),
+                                          ),
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                  if (!widescreen)
+                                    const SizedBox(
+                                      height: 75,
+                                    )
+                                  else
+                                    Align(
+                                      alignment: Alignment.topRight,
+                                      child: Padding(
+                                        padding: const EdgeInsets.all(8.0),
+                                        child: FilledButton(
+                                          child: Row(
+                                            mainAxisSize: MainAxisSize.min,
+                                            children: [
+                                              Padding(
+                                                padding: const EdgeInsets.only(
+                                                    top: 8.0,
+                                                    right: 8.0,
+                                                    bottom: 8.0),
+                                                child: _isLoading
+                                                    ? SizedBox(
+                                                        width: 24,
+                                                        height: 24,
+                                                        child:
+                                                            CircularProgressIndicator(
+                                                          color:
+                                                              Theme.of(context)
+                                                                  .colorScheme
+                                                                  .onPrimary,
+                                                          strokeWidth: 3.0,
+                                                        ),
+                                                      )
+                                                    : const Icon(Icons.save),
+                                              ),
+                                              const Text('Save'),
+                                            ],
+                                          ),
+                                          onPressed: () async {
+                                            if (!_isLoading) {
+                                              await _saveListing(context);
+                                            } else {
+                                              ScaffoldMessenger.of(context)
+                                                  .showSnackBar(
+                                                const SnackBar(
+                                                  width: 400,
+                                                  behavior:
+                                                      SnackBarBehavior.floating,
+                                                  content: Text(
+                                                      'Please wait for it to save.'),
+                                                ),
+                                              );
+                                            }
+                                          },
+                                        ),
+                                      ),
+                                    )
+                                ],
+                              ),
+                            ),
+                          ),
+                        ],
+                      );
+                    } else if (snapshot.hasError) {
+                      return Padding(
+                        padding: const EdgeInsets.only(left: 16.0, right: 16.0),
+                        child: Text(
+                            'Error when loading data! Error: ${snapshot.error}'),
+                      );
+                    }
+                  } else if (snapshot.connectionState ==
+                      ConnectionState.waiting) {
+                    return Container(
+                      padding: const EdgeInsets.all(8.0),
+                      alignment: Alignment.center,
+                      child: const SizedBox(
+                        width: 75,
+                        height: 75,
+                        child: RiveAnimation.asset(
+                            'assets/mdev_triangle_loading.riv'),
+                      ),
+                    );
+                  }
+                  return const Padding(
+                    padding: EdgeInsets.only(left: 16.0, right: 16.0),
+                    child: Text('Error when loading data!'),
+                  );
+                }),
+          )),
+    );
+  }
+
+  double calculateDropdownWidth(BuildContext context) {
+    double screenWidth = MediaQuery.sizeOf(context).width;
+
+    if ((screenWidth - 40) / 2 < 200) {
+      return screenWidth - 24;
+    } else if ((screenWidth - 40) / 2 < 380) {
+      return (screenWidth - 40) / 2;
+    } else {
+      return 380;
+    }
+  }
+
+  void _handlePop(bool didPop) {
+    if (!didPop) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(
+          width: 400,
+          behavior: SnackBarBehavior.floating,
+          content: Text('Please wait for it to save.'),
+        ),
+      );
+    }
+  }
+
+  Future<void> _saveListing(BuildContext context) async {
     if (listing.type == null || listing.businessId == null) {
       if (listing.type == null) {
         setState(() {
@@ -135,336 +624,11 @@ class _CreateEditJobListingState extends State<CreateEditJobListing> {
             content: const Text('Check field inputs!'),
             width: 200,
             behavior: SnackBarBehavior.floating,
-                          shape: RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(10)),
+            shape:
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
           ),
         );
       }
     }
-                }),
-            body: FutureBuilder(
-                future: getBusinessNameMapping,
-                builder: (context, snapshot) {
-                  if (snapshot.connectionState == ConnectionState.done) {
-                    if (snapshot.hasData) {
-                      if (snapshot.data.runtimeType == String) {
-                        return Padding(
-                          padding: const EdgeInsets.all(16.0),
-                          child: Column(children: [
-                            Center(
-                                child: Text(snapshot.data,
-                                    textAlign: TextAlign.center)),
-                            Padding(
-                              padding: const EdgeInsets.all(8.0),
-                              child: FilledButton(
-                                child: const Text('Retry'),
-                                onPressed: () async {
-                                  var refreshedData = fetchBusinessNames();
-                                  await refreshedData;
-                                  setState(() {
-                                    getBusinessNameMapping = refreshedData;
-                                  });
-                                },
-                              ),
-                            ),
-                          ]),
-                        );
-                      }
-
-                      nameMapping = snapshot.data;
-
-                      return ListView(
-                        children: [
-                          Center(
-                            child: SizedBox(
-                              width: 800,
-                              child: Column(
-                                children: [
-                                  ListTile(
-                                    title: Text(listing.name,
-                                        textAlign: TextAlign.left,
-                                        style: const TextStyle(
-                                            fontSize: 24,
-                                            fontWeight: FontWeight.bold)),
-                                    subtitle: Text(
-                                      listing.description,
-                                      textAlign: TextAlign.left,
-                                    ),
-                                    leading: ClipRRect(
-                                      borderRadius: BorderRadius.circular(6.0),
-                                      child: Image.network(
-                                          width: 48,
-                                          height: 48,
-                                          listing.businessId != null
-                                              ? '$apiAddress/logos/${listing.businessId}'
-                                              : '',
-                                          errorBuilder: (BuildContext context,
-                                              Object exception,
-                                              StackTrace? stackTrace) {
-                                        return Icon(
-                                            getIconFromJobType(
-                                              listing.type ?? JobType.other,
-                                            ),
-                                            size: 48);
-                                      }),
-                                    ),
-                                  ),
-                                  // Business Type Dropdown
-                                  Card(
-                                    child: Column(
-                                      children: [
-                                        Padding(
-                                          padding: const EdgeInsets.only(
-                                              left: 8.0,
-                                              right: 8.0,
-                                              bottom: 8.0,
-                                              top: 8),
-                                          child: Row(
-                                            mainAxisAlignment:
-                                                MainAxisAlignment.spaceBetween,
-                                            children: [
-                                              const Text('Type of Job',
-                                                  style:
-                                                      TextStyle(fontSize: 16)),
-                                              DropdownMenu<JobType>(
-                                                initialSelection: listing.type,
-                                                label: const Text('Job Type'),
-                                                errorText:
-                                                    typeDropdownErrorText,
-                                                dropdownMenuEntries: [
-                                                  for (JobType type
-                                                      in JobType.values)
-                                                    DropdownMenuEntry(
-                                                        value: type,
-                                                        label:
-                                                            getNameFromJobType(
-                                                                type))
-                                                ],
-                                                onSelected: (inputType) {
-                                                  setState(() {
-                                                    listing.type = inputType!;
-                                                    typeDropdownErrorText =
-                                                        null;
-                                                  });
-                                                },
-                                              ),
-                                            ],
-                                          ),
-                                        ),
-                                        Padding(
-                                          padding: const EdgeInsets.only(
-                                              left: 8.0,
-                                              right: 8.0,
-                                              bottom: 8.0,
-                                              top: 8),
-                                          child: Row(
-                                            mainAxisAlignment:
-                                                MainAxisAlignment.spaceBetween,
-                                            children: [
-                                              const Text(
-                                                  'Business that has the job',
-                                                  style:
-                                                      TextStyle(fontSize: 16)),
-                                              DropdownMenu<int>(
-                                                errorText:
-                                                    businessDropdownErrorText,
-                                                initialSelection:
-                                                    widget.inputBusiness?.id,
-                                                label: const Text('Business'),
-                                                dropdownMenuEntries: [
-                                                  for (Map<String, dynamic> map
-                                                      in nameMapping)
-                                                    DropdownMenuEntry(
-                                                        value: map['id']!,
-                                                        label: map['name'])
-                                                ],
-                                                onSelected: (inputType) {
-                                                  setState(() {
-                                                    listing.businessId =
-                                                        inputType!;
-                                                    businessDropdownErrorText =
-                                                        null;
-                                                  });
-                                                },
-                                              ),
-                                            ],
-                                          ),
-                                        ),
-                                        Padding(
-                                          padding: const EdgeInsets.only(
-                                              left: 8.0, right: 8.0),
-                                          child: TextFormField(
-                                            controller: _nameController,
-                                            autovalidateMode: AutovalidateMode
-                                                .onUserInteraction,
-                                            maxLength: 30,
-                                            onChanged: (inputName) {
-                                              setState(() {
-                                                listing.name = inputName;
-                                              });
-                                            },
-                                            onTapOutside:
-                                                (PointerDownEvent event) {
-                                              FocusScope.of(context).unfocus();
-                                            },
-                                            decoration: const InputDecoration(
-                                              labelText:
-                                                  'Job Listing Name (required)',
-                                            ),
-                                            validator: (value) {
-                                              if (value != null &&
-                                                  value.isEmpty) {
-                                                return 'Name is required';
-                                              }
-                                              return null;
-                                            },
-                                          ),
-                                        ),
-                                        Padding(
-                                          padding: const EdgeInsets.only(
-                                              left: 8.0, right: 8.0),
-                                          child: TextFormField(
-                                            controller: _descriptionController,
-                                            autovalidateMode: AutovalidateMode
-                                                .onUserInteraction,
-                                            maxLength: 500,
-                                            maxLines: null,
-                                            onChanged: (inputDesc) {
-                                              setState(() {
-                                                listing.description = inputDesc;
-                                              });
-                                            },
-                                            onTapOutside:
-                                                (PointerDownEvent event) {
-                                              FocusScope.of(context).unfocus();
-                                            },
-                                            decoration: const InputDecoration(
-                                              labelText:
-                                                  'Job Listing Description (required)',
-                                            ),
-                                            validator: (value) {
-                                              if (value != null &&
-                                                  value.isEmpty) {
-                                                return 'Description is required';
-                                              }
-                                              return null;
-                                            },
-                                          ),
-                                        ),
-                                        Padding(
-                                          padding: const EdgeInsets.only(
-                                              left: 8.0,
-                                              right: 8.0,
-                                              bottom: 8.0),
-                                          child: TextFormField(
-                                            controller: _wageController,
-                                            onChanged: (input) {
-                                              setState(() {
-                                                listing.wage = input;
-                                              });
-                                            },
-                                            onTapOutside:
-                                                (PointerDownEvent event) {
-                                              FocusScope.of(context).unfocus();
-                                            },
-                                            decoration: const InputDecoration(
-                                              labelText: 'Wage Information',
-                                            ),
-                                          ),
-                                        ),
-                                        Padding(
-                                          padding: const EdgeInsets.only(
-                                              left: 8.0,
-                                              right: 8.0,
-                                              bottom: 8.0),
-                                          child: TextFormField(
-                                            controller: _linkController,
-                                            autovalidateMode: AutovalidateMode
-                                                .onUserInteraction,
-                                            keyboardType: TextInputType.url,
-                                            onChanged: (inputUrl) {
-                                              if (inputUrl != '') {
-                                                listing.link =
-                                                    Uri.encodeFull(inputUrl);
-                                                if (!listing.link!
-                                                        .contains('http://') &&
-                                                    !listing.link!
-                                                        .contains('https://')) {
-                                                  listing.link =
-                                                      'https://${listing.link}';
-                                                }
-                                              }
-                                              listing.link = null;
-                                            },
-                                            validator: (value) {
-                                              if (value != null &&
-                                                  value.isNotEmpty &&
-                                                  !RegExp(r'(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:\/[^\/\s]*)*')
-                                                      .hasMatch(value)) {
-                                                return 'Enter a valid Website';
-                                              }
-                                              return null;
-                                            },
-                                            onTapOutside:
-                                                (PointerDownEvent event) {
-                                              FocusScope.of(context).unfocus();
-                                            },
-                                            decoration: const InputDecoration(
-                                              labelText:
-                                                  'Additional Information Link',
-                                            ),
-                                          ),
-                                        ),
-                                      ],
-                                    ),
-                                  ),
-                                  const SizedBox(
-                                    height: 75,
-                                  )
-                                ],
-                              ),
-                            ),
-                          ),
-                        ],
-                      );
-                    } else if (snapshot.hasError) {
-                      return Padding(
-                        padding: const EdgeInsets.only(left: 16.0, right: 16.0),
-                        child: Text(
-                            'Error when loading data! Error: ${snapshot.error}'),
-                      );
-                    }
-                  } else if (snapshot.connectionState ==
-                      ConnectionState.waiting) {
-                    return Container(
-                      padding: const EdgeInsets.all(8.0),
-                      alignment: Alignment.center,
-                      child: const SizedBox(
-                        width: 75,
-                        height: 75,
-                        child: RiveAnimation.asset(
-                            'assets/mdev_triangle_loading.riv'),
-                      ),
-                    );
-                  }
-                  return const Padding(
-                    padding: EdgeInsets.only(left: 16.0, right: 16.0),
-                    child: Text('Error when loading data!'),
-                  );
-                }),
-          )),
-    );
-  }
-
-  void _handlePop(bool didPop) {
-    if (!didPop) {
-      ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(
-          width: 400,
-          behavior: SnackBarBehavior.floating,
-          content: Text('Please wait for it to save.'),
-        ),
-      );
-    }
   }
 }

fbla_ui/lib/pages/listing_detail.dart

@@ -1,11 +1,14 @@
 import 'package:fbla_ui/main.dart';
+import 'package:fbla_ui/pages/business_detail.dart';
 import 'package:fbla_ui/pages/create_edit_listing.dart';
 import 'package:fbla_ui/shared/api_logic.dart';
 import 'package:fbla_ui/shared/global_vars.dart';
 import 'package:fbla_ui/shared/utils.dart';
+import 'package:fbla_ui/shared/widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
 
+/// A page to view all specific details about a single job listing (with its businesses contact info)
 class JobListingDetail extends StatefulWidget {
   final JobListing listing;
   final Business fromBusiness;
@@ -29,49 +32,102 @@ class _CreateBusinessDetailState extends State<JobListingDetail> {
     );
   }
 
-  ListView _detailBody(JobListing listing) {
+  /// body of the JobListingDetail
+  Widget _detailBody(JobListing listing) {
     return ListView(
       children: [
-        // Title, logo, desc, website
+        Center(
+          child: SizedBox(
+            width: 800,
+            child: Column(
+              children: [
+                // Top summary card
                 Padding(
                     padding: const EdgeInsets.only(top: 4.0),
-          child: Card(
+                    child: _summaryCard(listing)),
+                // Wage card
+                if (listing.wage != null && listing.wage != '')
+                  Card(
+                    child: ListTile(
+                      leading: const Icon(Icons.attach_money),
+                      subtitle: Text(listing.wage!),
+                      title: const Text('Wage Information'),
+                    ),
+                  ),
+                // Contact information for the business contact
+                ContactInformationCard(business: widget.fromBusiness)
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Top card including title, logo, description, and business name
+  Widget _summaryCard(JobListing listing) {
+    return Card(
       clipBehavior: Clip.antiAlias,
       child: Column(
         children: [
           Padding(
-                  padding: const EdgeInsets.all(16.0),
-                  child: Row(
+            padding: const EdgeInsets.only(right: 8.0),
+            child: ListTile(
+              minVerticalPadding: 0,
+              titleAlignment: ListTileTitleAlignment.titleHeight,
+              title: Padding(
+                padding: const EdgeInsets.only(top: 8.0),
+                child: Text(
+                    '${listing.name} (${getNameFromOfferType(listing.offerType!)})',
+                    style: const TextStyle(
+                        fontSize: 24, fontWeight: FontWeight.bold)),
+              ),
+              subtitle: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                      Padding(
-                        padding: const EdgeInsets.only(right: 16.0),
+                  MouseRegion(
+                    cursor: SystemMouseCursors.click,
+                    child: GestureDetector(
+                      onTap: () {
+                        Navigator.push(context,
+                            MaterialPageRoute(builder: (context) {
+                          return BusinessDetail(
+                              id: widget.fromBusiness.id,
+                              name: widget.fromBusiness.name!);
+                        }));
+                      },
+                      child: Text(
+                        widget.fromBusiness.name!,
+                        style: const TextStyle(fontSize: 18),
+                      ),
+                    ),
+                  ),
+                  Text(listing.description),
+                ],
+              ),
+              contentPadding: const EdgeInsets.only(bottom: 8, left: 16),
+              leading: Badge(
+                label: Text(
+                  getLetterFromOfferType(listing.offerType!),
+                  style: const TextStyle(fontSize: 16),
+                ),
+                largeSize: 24,
+                offset: const Offset(12, -3),
+                textColor: Colors.white,
+                backgroundColor: getColorFromOfferType(listing.offerType!),
                 child: ClipRRect(
                   borderRadius: BorderRadius.circular(6.0),
                   child: Image.network(
-                              '$apiAddress/logos/${listing.businessId}',
+                      '$apiAddress/logos/${widget.fromBusiness.id}',
                       width: 48,
                       height: 48, errorBuilder: (BuildContext context,
                           Object exception, StackTrace? stackTrace) {
-                            return Icon(getIconFromJobType(listing.type!),
+                    return Icon(
+                        getIconFromJobType(listing.type ?? JobType.other),
                         size: 48);
                   }),
                 ),
               ),
-                      Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(listing.name,
-                              style: const TextStyle(
-                                  fontSize: 24, fontWeight: FontWeight.bold)),
-                          Text(widget.fromBusiness.name!,
-                              style: const TextStyle(fontSize: 16)),
-                          Text(
-                            listing.description,
-                          ),
-                        ],
-                      ),
-                    ],
             ),
           ),
           if (listing.link != null && listing.link != '')
@@ -90,88 +146,10 @@ class _CreateBusinessDetailState extends State<JobListingDetail> {
             ),
         ],
       ),
-          ),
-        ),
-        // Wage
-        Visibility(
-          visible: listing.wage != null && listing.wage != '',
-          child: Card(
-            child: ListTile(
-              leading: const Icon(Icons.attach_money),
-              subtitle: Text(listing.wage!),
-              title: const Text('Wage Information'),
-            ),
-          ),
-        ),
-        Card(
-          clipBehavior: Clip.antiAlias,
-          child: Column(
-            children: [
-              Row(
-                children: [
-                  Padding(
-                    padding: const EdgeInsets.only(left: 16.0, top: 8.0),
-                    child: Text(
-                      widget.fromBusiness.contactName!,
-                      textAlign: TextAlign.left,
-                      style: const TextStyle(
-                          fontSize: 20, fontWeight: FontWeight.bold),
-                    ),
-                  ),
-                ],
-              ),
-              if (widget.fromBusiness.contactPhone != null)
-                ListTile(
-                  leading: const Icon(Icons.phone),
-                  title: Text(widget.fromBusiness.contactPhone!),
-                  // maybe replace ! with ?? ''. same is true for below
-                  onTap: () {
-                    showDialog(
-                        context: context,
-                        builder: (BuildContext context) {
-                          return AlertDialog(
-                            backgroundColor:
-                                Theme.of(context).colorScheme.surface,
-                            title: Text(
-                                'Contact ${widget.fromBusiness.contactName}'),
-                            content: Text(
-                                'Would you like to call or text ${widget.fromBusiness.contactName}?'),
-                            actions: [
-                              TextButton(
-                                  child: const Text('Text'),
-                                  onPressed: () {
-                                    launchUrl(Uri.parse(
-                                        'sms:${widget.fromBusiness.contactPhone}'));
-                                    Navigator.of(context).pop();
-                                  }),
-                              TextButton(
-                                  child: const Text('Call'),
-                                  onPressed: () async {
-                                    launchUrl(Uri.parse(
-                                        'tel:${widget.fromBusiness.contactPhone}'));
-                                    Navigator.of(context).pop();
-                                  }),
-                            ],
-                          );
-                        });
-                  },
-                ),
-              if (widget.fromBusiness.contactEmail != null)
-                ListTile(
-                  leading: const Icon(Icons.email),
-                  title: Text(widget.fromBusiness.contactEmail!),
-                  onTap: () {
-                    launchUrl(Uri.parse(
-                        'mailto:${widget.fromBusiness.contactEmail}'));
-                  },
-                ),
-            ],
-          ),
-        ),
-      ],
     );
   }
 
+  /// Edit / delete actions if the user is logged in
   List<Widget>? _getActions(JobListing listing, Business fromBusiness) {
     if (loggedIn) {
       return [
@@ -217,7 +195,9 @@ class _CreateBusinessDetailState extends State<JobListingDetail> {
                               Navigator.pushReplacement(
                                   context,
                                   MaterialPageRoute(
-                                      builder: (context) => const MainApp()));
+                                      builder: (context) => const MainApp(
+                                            initialPage: 1,
+                                          )));
                             }
                           }),
                     ],

fbla_ui/lib/pages/listings_overview.dart

@@ -15,7 +15,8 @@ import 'package:url_launcher/url_launcher.dart';
 class JobsOverview extends StatefulWidget {
   final String searchQuery;
   final Future refreshJobDataOverviewFuture;
-  final Future<void> Function(Set<JobType>) updateBusinessesCallback;
+  final Future<void> Function(Set<JobType>?, Set<OfferType>?)
+      updateBusinessesCallback;
   final void Function() themeCallback;
   final void Function(bool) updateLoggedIn;
 
@@ -36,10 +37,12 @@ class _JobsOverviewState extends State<JobsOverview> {
   bool _isPreviousData = false;
   late Map<JobType, List<Business>> overviewBusinesses;
   Set<JobType> jobTypeFilters = <JobType>{};
+  Set<OfferType> offerTypeFilters = <OfferType>{};
   String searchQuery = '';
   ScrollController controller = ScrollController();
   bool _extended = true;
   double prevPixelPosition = 0;
+  bool _isRetrying = false;
 
   Map<JobType, List<Business>> _filterBySearch(
       Map<JobType, List<Business>> businesses, String query) {
@@ -66,9 +69,15 @@ class _JobsOverviewState extends State<JobsOverview> {
     });
   }
 
-  void _setFilters(Set<JobType> filters) async {
-    jobTypeFilters = Set.from(filters);
-    widget.updateBusinessesCallback(jobTypeFilters);
+  void _setFilters(Set<JobType>? newJobTypeFilters,
+      Set<OfferType>? newOfferTypeFilters) async {
+    if (newJobTypeFilters != null) {
+      jobTypeFilters = Set.from(newJobTypeFilters);
+    }
+    if (newOfferTypeFilters != null) {
+      offerTypeFilters = Set.from(newOfferTypeFilters);
+    }
+    widget.updateBusinessesCallback(jobTypeFilters, offerTypeFilters);
   }
 
   void _scrollListener() {
@@ -114,9 +123,8 @@ class _JobsOverviewState extends State<JobsOverview> {
             setSearch: _setSearch,
             searchHintText: 'Search Job Listings',
             themeCallback: widget.themeCallback,
-            filterIconButton: _filterIconButton(
-              jobTypeFilters,
-            ),
+            filterIconButton:
+                _filterIconButton(jobTypeFilters, offerTypeFilters),
             updateLoggedIn: widget.updateLoggedIn,
             generatePDF: _generatePDF,
           ),
@@ -138,8 +146,14 @@ class _JobsOverviewState extends State<JobsOverview> {
                             padding: const EdgeInsets.all(8.0),
                             child: FilledButton(
                               child: const Text('Retry'),
-                              onPressed: () {
-                                widget.updateBusinessesCallback(jobTypeFilters);
+                              onPressed: () async {
+                                if (!_isRetrying) {
+                                  setState(() {
+                                    _isRetrying = true;
+                                  });
+                                  await widget.updateBusinessesCallback(
+                                      null, null);
+                                }
                               },
                             ),
                           ),
@@ -201,77 +215,147 @@ class _JobsOverviewState extends State<JobsOverview> {
     );
   }
 
-  Widget _filterIconButton(Set<JobType> filters) {
-    Set<JobType> selectedChips = Set.from(filters);
+  Widget _filterIconButton(
+      Set<JobType> jobTypeFilters, Set<OfferType> offerTypeFilters) {
+    Set<JobType> selectedJobTypeChips = Set.from(jobTypeFilters);
+    Set<OfferType> selectedOfferTypeChips = Set.from(offerTypeFilters);
 
     return IconButton(
         icon: Icon(
           Icons.filter_list,
-          color: filters.isNotEmpty
+          color: jobTypeFilters.isNotEmpty
               ? Theme.of(context).colorScheme.primary
               : Theme.of(context).colorScheme.onSurface,
         ),
         onPressed: () {
+          selectedJobTypeChips = Set.from(jobTypeFilters);
+          selectedOfferTypeChips = Set.from(offerTypeFilters);
           showDialog(
               context: context,
               builder: (BuildContext context) {
                 return StatefulBuilder(
                     builder: (BuildContext context, StateSetter setState) {
-                  void setDialogState(Set<JobType> newFilters) {
+                  void setDialogState(Set<JobType>? newJobTypeFilters,
+                      Set<OfferType>? newOfferTypeFilters) {
+                    if (newJobTypeFilters != null) {
                       setState(() {
-                      filters = newFilters;
+                        selectedJobTypeChips = newJobTypeFilters;
                       });
                     }
+                    if (newOfferTypeFilters != null) {
+                      setState(() {
+                        selectedOfferTypeChips = newOfferTypeFilters;
+                      });
+                    }
+                  }
 
-                  List<Padding> chips = [];
-                  for (var type in JobType.values) {
-                    chips.add(Padding(
-                      padding: const EdgeInsets.all(4),
-                      child: FilterChip(
+                  List<Widget> jobTypeChips = [];
+                  for (JobType type in JobType.values) {
+                    jobTypeChips.add(FilterChip(
+                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                         showCheckmark: false,
                         shape: RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(20)),
-                          label: Text(getNameFromJobType(type)),
-                          selected: selectedChips.contains(type),
+                            borderRadius: BorderRadius.circular(20),
+                            side: BorderSide(
+                                color:
+                                    Theme.of(context).colorScheme.secondary)),
+                        selectedColor: Theme.of(context).colorScheme.secondary,
+                        label: Text(
+                          getNameFromJobType(type),
+                          style: TextStyle(
+                              color: selectedJobTypeChips.contains(type)
+                                  ? Theme.of(context).colorScheme.onSecondary
+                                  : Theme.of(context).colorScheme.onSurface),
+                        ),
+                        selected: selectedJobTypeChips.contains(type),
                         onSelected: (bool selected) {
                           if (selected) {
-                              selectedChips.add(type);
+                            selectedJobTypeChips.add(type);
                           } else {
-                              selectedChips.remove(type);
+                            selectedJobTypeChips.remove(type);
                           }
-                            setDialogState(filters);
-                          }),
-                    ));
+                          setDialogState(selectedJobTypeChips, null);
+                        }));
+                  }
+
+                  List<Widget> offerTypeChips = [];
+                  for (OfferType type in OfferType.values) {
+                    offerTypeChips.add(FilterChip(
+                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                        showCheckmark: false,
+                        shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(20),
+                            side: BorderSide(
+                                color:
+                                    Theme.of(context).colorScheme.secondary)),
+                        selectedColor: Theme.of(context).colorScheme.secondary,
+                        label: Text(
+                          getNameFromOfferType(type),
+                          style: TextStyle(
+                              color: selectedOfferTypeChips.contains(type)
+                                  ? Theme.of(context).colorScheme.onSecondary
+                                  : Theme.of(context).colorScheme.onSurface),
+                        ),
+                        selected: selectedOfferTypeChips.contains(type),
+                        onSelected: (bool selected) {
+                          if (selected) {
+                            selectedOfferTypeChips.add(type);
+                          } else {
+                            selectedOfferTypeChips.remove(type);
+                          }
+                          setDialogState(null, selectedOfferTypeChips);
+                        }));
                   }
 
                   return AlertDialog(
                     title: const Text('Filter Options'),
                     content: SizedBox(
                       width: 400,
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Text('Job Type Filters:'),
+                          Padding(
+                            padding: const EdgeInsets.symmetric(vertical: 8.0),
                             child: Wrap(
-                        children: chips,
+                              spacing: 8,
+                              runSpacing: 8,
+                              children: jobTypeChips,
+                            ),
+                          ),
+                          const Text('Offer Type Filters:'),
+                          Padding(
+                            padding: const EdgeInsets.symmetric(vertical: 8.0),
+                            child: Wrap(
+                              spacing: 8,
+                              runSpacing: 8,
+                              children: offerTypeChips,
+                            ),
+                          ),
+                        ],
                       ),
                     ),
                     actions: [
                       TextButton(
                         child: const Text('Reset'),
                         onPressed: () {
-                          _setFilters(<JobType>{});
-                          // selectedChips = <BusinessType>{};
+                          _setFilters(<JobType>{}, <OfferType>{});
                           Navigator.of(context).pop();
                         },
                       ),
                       TextButton(
                         child: const Text('Cancel'),
                         onPressed: () {
-                          // selectedChips = Set.from(filters);
+                          // setDialogState(jobTypeFilters, offerTypeFilters);
                           Navigator.of(context).pop();
                         },
                       ),
                       TextButton(
                         child: const Text('Apply'),
                         onPressed: () {
-                          _setFilters(selectedChips);
+                          _setFilters(
+                              selectedJobTypeChips, selectedOfferTypeChips);
                           Navigator.of(context).pop();
                         },
                       )
@@ -337,9 +421,9 @@ class _JobDisplayPanelState extends State<JobDisplayPanel> {
       );
     }
 
-    List<BusinessHeader> headers = [];
+    List<_JobHeader> headers = [];
     for (JobType jobType in widget.jobGroupedBusinesses.keys) {
-      headers.add(BusinessHeader(
+      headers.add(_JobHeader(
           jobType: jobType,
           widescreen: widget.widescreen,
           businesses: widget.jobGroupedBusinesses[jobType]!));
@@ -349,23 +433,22 @@ class _JobDisplayPanelState extends State<JobDisplayPanel> {
   }
 }
 
-class BusinessHeader extends StatefulWidget {
+class _JobHeader extends StatefulWidget {
   final JobType jobType;
   final List<Business> businesses;
   final bool widescreen;
 
-  const BusinessHeader({
-    super.key,
+  const _JobHeader({
     required this.jobType,
     required this.businesses,
     required this.widescreen,
   });
 
   @override
-  State<BusinessHeader> createState() => _BusinessHeaderState();
+  State<_JobHeader> createState() => _JobHeaderState();
 }
 
-class _BusinessHeaderState extends State<BusinessHeader> {
+class _JobHeaderState extends State<_JobHeader> {
   @override
   Widget build(BuildContext context) {
     return SliverStickyHeader(
@@ -389,7 +472,8 @@ class _BusinessHeaderState extends State<BusinessHeader> {
               getIconFromJobType(widget.jobType),
               color: Theme.of(context).colorScheme.onPrimary,
             )),
-        Text(getNameFromJobType(widget.jobType)),
+        Text(getNameFromJobType(widget.jobType),
+            style: TextStyle(color: Theme.of(context).colorScheme.onPrimary)),
       ],
     );
   }
@@ -408,7 +492,7 @@ class _BusinessHeaderState extends State<BusinessHeader> {
           delegate: SliverChildBuilderDelegate(
             childCount: businesses.length,
             (BuildContext context, int index) {
-              return _businessTile(
+              return _jobBusinessTile(
                 businesses[index],
                 widget.jobType,
               );
@@ -421,7 +505,7 @@ class _BusinessHeaderState extends State<BusinessHeader> {
         delegate: SliverChildBuilderDelegate(
           childCount: businesses.length,
           (BuildContext context, int index) {
-            return _businessListItem(
+            return _jobBusinessListItem(
               businesses[index],
               widget.jobType,
             );
@@ -431,7 +515,8 @@ class _BusinessHeaderState extends State<BusinessHeader> {
     }
   }
 
-  Widget _businessTile(Business business, JobType jobType) {
+  /// A desktop widget that displays basic info about a job
+  Widget _jobBusinessTile(Business business, JobType jobType) {
     return MouseRegion(
       cursor: SystemMouseCursors.click,
       child: GestureDetector(
@@ -451,21 +536,35 @@ class _BusinessHeaderState extends State<BusinessHeader> {
                 children: [
                   Padding(
                       padding: const EdgeInsets.all(8.0),
+                      child: Badge(
+                        label: Text(
+                          getLetterFromOfferType(
+                              business.listings![0].offerType!),
+                          style: const TextStyle(fontSize: 16),
+                        ),
+                        largeSize: 24,
+                        offset: const Offset(12, -3),
+                        textColor: Colors.white,
+                        backgroundColor: getColorFromOfferType(
+                            business.listings![0].offerType!),
                         child: ClipRRect(
                           borderRadius: BorderRadius.circular(6.0),
-                        child: Image.network('$apiAddress/logos/${business.id}',
+                          child: Image.network(
+                              '$apiAddress/logos/${business.id}',
                               height: 48,
                               width: 48, errorBuilder: (BuildContext context,
                                   Object exception, StackTrace? stackTrace) {
-                          return Icon(getIconFromBusinessType(business.type!),
+                            return Icon(
+                                getIconFromJobType(business.listings![0].type!),
                                 size: 48);
                           }),
+                        ),
                       )),
                   Flexible(
                     child: Padding(
                       padding: const EdgeInsets.all(8.0),
                       child: Text(
-                        business.listings![0].name,
+                        '${business.listings![0].name} (${getNameFromOfferType(business.listings![0].offerType!)})',
                         style: const TextStyle(
                             fontSize: 18, fontWeight: FontWeight.bold),
                         maxLines: 2,
@@ -494,8 +593,7 @@ class _BusinessHeaderState extends State<BusinessHeader> {
                         IconButton(
                           icon: const Icon(Icons.link),
                           onPressed: () {
-                            launchUrl(Uri.parse(
-                                'https://${business.listings![0].link!}'));
+                            launchUrl(Uri.parse(business.listings![0].link!));
                           },
                         ),
                       IconButton(
@@ -556,17 +654,33 @@ class _BusinessHeaderState extends State<BusinessHeader> {
     );
   }
 
-  Widget _businessListItem(Business business, JobType? jobType) {
+  /// A mobile widget that displays basic info about a job
+  Widget _jobBusinessListItem(Business business, JobType? jobType) {
     return Card(
       child: ListTile(
-        leading: ClipRRect(
+        leading: Badge(
+          label: Text(getLetterFromOfferType(business.listings![0].offerType!)),
+          textColor: Colors.white,
+          isLabelVisible: true,
+          offset: const Offset(7, -5),
+          alignment: Alignment.topRight,
+          padding: business.listings![0].offerType! == OfferType.internship
+              ? const EdgeInsets.symmetric(horizontal: 5)
+              : null,
+          backgroundColor:
+              getColorFromOfferType(business.listings![0].offerType!),
+          child: ClipRRect(
               borderRadius: BorderRadius.circular(3.0),
               child: Image.network('$apiAddress/logos/${business.id}',
                   height: 24, width: 24, errorBuilder: (BuildContext context,
                       Object exception, StackTrace? stackTrace) {
-              return Icon(getIconFromBusinessType(business.type!));
+                return Icon(
+                  getIconFromJobType(business.listings![0].type!),
+                );
               })),
-        title: Text(business.listings![0].name),
+        ),
+        title: Text(
+            '${business.listings![0].name} (${getNameFromOfferType(business.listings![0].offerType!)})'),
         subtitle: Text(business.listings![0].description,
             maxLines: 2, overflow: TextOverflow.ellipsis),
         onTap: () {

fbla_ui/lib/pages/signin_page.dart

@@ -37,7 +37,7 @@ class _SignInPageState extends State<SignInPage> {
             heightFactor: 1.0,
             child: Container(
               padding: const EdgeInsets.fromLTRB(12, 50, 12, 50),
-              height: 475,
+              height: 450,
               width: 500,
               child: Card(
                 child: Padding(
@@ -60,9 +60,12 @@ class _SignInPageState extends State<SignInPage> {
                           controller: _usernameController,
                           autocorrect: false,
                           decoration: const InputDecoration(
-                              prefixIcon: Icon(Icons.person_outline),
+                            prefixIcon: Padding(
+                              padding: EdgeInsets.all(16.0),
+                              child: Icon(Icons.person_outline),
+                            ),
                             labelText: 'Username',
-                              border: OutlineInputBorder()),
+                          ),
                         ),
                       ),
                       Padding(
@@ -107,11 +110,13 @@ class _SignInPageState extends State<SignInPage> {
                           autocorrect: false,
                           obscureText: obscurePassword,
                           decoration: InputDecoration(
-                            prefixIcon: const Icon(Icons.fingerprint),
+                            prefixIcon: const Padding(
+                              padding: EdgeInsets.all(16.0),
+                              child: Icon(Icons.fingerprint),
+                            ),
                             labelText: 'Password',
-                            border: const OutlineInputBorder(),
                             suffixIcon: Padding(
-                              padding: const EdgeInsets.all(8.0),
+                              padding: const EdgeInsets.only(right: 16.0),
                               child: IconButton(
                                 onPressed: () {
                                   setState(() {
@@ -131,35 +136,45 @@ class _SignInPageState extends State<SignInPage> {
                           errorMessage!,
                           style: const TextStyle(color: Colors.red),
                         ),
-                      CheckboxListTile(
-                        value: rememberMe,
-                        onChanged: (value) async {
-                          setState(() {
-                            rememberMe = value!;
-                          });
-                        },
-                        title: const Text('Remember me'),
-                      ),
-                      ElevatedButton.icon(
-                        style: ElevatedButton.styleFrom(
-                          backgroundColor:
-                              Theme.of(context).colorScheme.primary,
-                          // padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 12.0, bottom: 12.0),
-                        ),
-                        icon: _isloading
-                            ? const SizedBox(
+                      Padding(
+                        padding: const EdgeInsets.only(
+                            top: 8.0, left: 8.0, right: 8.0),
+                        child: FilledButton(
+                          style: FilledButton.styleFrom(
+                              shape: const RoundedRectangleBorder(
+                                  borderRadius:
+                                      BorderRadius.all(Radius.circular(6)))),
+                          child: SizedBox(
+                            width: 374,
+                            height: 40,
+                            child: Row(
+                              mainAxisSize: MainAxisSize.min,
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                _isloading
+                                    ? const Padding(
+                                        padding: EdgeInsets.only(right: 8.0),
+                                        child: SizedBox(
                                             width: 20,
                                             height: 20,
                                             child: CircularProgressIndicator(
                                               color: Colors.white,
                                               strokeWidth: 3,
-                                ))
-                            : const Icon(Icons.done, color: Colors.white),
-                        label: const Text('Sign In',
-                            style: TextStyle(color: Colors.white)),
+                                            )),
+                                      )
+                                    : const Padding(
+                                        padding: EdgeInsets.only(right: 8.0),
+                                        child: Icon(Icons.done,
+                                            color: Colors.white),
+                                      ),
+                                const Text('Sign in',
+                                    style: TextStyle(
+                                        color: Colors.white, fontSize: 18)),
+                              ],
+                            ),
+                          ),
                           onPressed: () async {
                             setState(() {
-                            errorMessage = null;
                               _isloading = true;
                             });
                             jwt = await signIn(username, password).timeout(
@@ -189,6 +204,44 @@ class _SignInPageState extends State<SignInPage> {
                             }
                           },
                         ),
+                      ),
+                      Expanded(
+                        child: Align(
+                          alignment: Alignment.bottomLeft,
+                          child: Row(
+                            children: [
+                              Padding(
+                                padding: const EdgeInsets.only(left: 8.0),
+                                child: MouseRegion(
+                                  cursor: SystemMouseCursors.click,
+                                  child: GestureDetector(
+                                    child: Row(
+                                      children: [
+                                        Checkbox(
+                                            value: rememberMe,
+                                            onChanged: (value) {
+                                              setState(() {
+                                                rememberMe = value!;
+                                              });
+                                            }),
+                                        const Padding(
+                                          padding: EdgeInsets.all(8.0),
+                                          child: Text('Remember me'),
+                                        )
+                                      ],
+                                    ),
+                                    onTap: () {
+                                      setState(() {
+                                        rememberMe = !rememberMe;
+                                      });
+                                    },
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
                     ],
                   ),
                 ),

fbla_ui/lib/shared/api_logic.dart

@@ -7,7 +7,8 @@ import 'package:fbla_ui/shared/utils.dart';
 import 'package:http/http.dart' as http;
 
 var apiAddress = 'https://homelab.marinodev.com/fbla-api';
-// var apiAddress = 'http://192.168.0.114:8000/fbla-api';
+// var apiAddress = 'http://192.168.0.114:8000/fbla-api'; // TODO
+
 var client = http.Client();
 
 Future fetchBusinessData() async {
@@ -50,31 +51,44 @@ Future fetchBusinessNames() async {
   }
 }
 
-Future fetchBusinessDataOverviewJobs({List<JobType>? typeFilters}) async {
+Future fetchBusinessDataOverviewJobs(
+    {Iterable<JobType>? typeFilters, Iterable<OfferType>? offerFilters}) async {
   try {
-    String? typeString =
-        typeFilters?.map((jobType) => jobType.name).toList().join(',');
-    Uri uri =
-        Uri.parse('$apiAddress/businessdata/overview/jobs?filters=$typeString');
-    if (typeFilters == null || typeFilters.isEmpty) {
-      uri = Uri.parse('$apiAddress/businessdata/overview/jobs');
+    String uriString = '$apiAddress/businessdata/overview/jobs';
+    if (typeFilters != null && typeFilters.isNotEmpty) {
+      uriString +=
+          '?typeFilters=${typeFilters.map((jobType) => jobType.name).join(',')}';
+      if (offerFilters != null && offerFilters.isNotEmpty) {
+        uriString +=
+            '&offerFilters=${offerFilters.map((offerType) => offerType.name).join(',')}';
       }
+    } else if (offerFilters != null && offerFilters.isNotEmpty) {
+      uriString +=
+          '?offerFilters=${offerFilters.map((offerType) => offerType.name).join(',')}';
+    }
+    Uri uri = Uri.parse(uriString);
+
     var response = await http.get(uri).timeout(const Duration(seconds: 20));
     if (response.statusCode == 200) {
-      var decodedResponse = json.decode(response.body);
+      List<Map<String, dynamic>> decodedResponse =
+          json.decode(response.body).cast<Map<String, dynamic>>();
+
+      List<Business> initialBusinesses =
+          decodedResponse.map((element) => Business.fromJson(element)).toList();
+
       Map<JobType, List<Business>> groupedBusinesses = {};
 
-      for (String stringType in decodedResponse.keys) {
-        List<Business> businesses = [];
-
-        for (Map<String, dynamic> map in decodedResponse[stringType]) {
-          Business business = Business.fromJson(map);
-          businesses.add(business);
+      for (Business business in initialBusinesses) {
+        for (JobListing job in business.listings!) {
+          List<Business> newBusinesses = groupedBusinesses[job.type!] ?? [];
+          Business newBusiness = Business.copy(business);
+          newBusiness.listings =
+              newBusiness.listings!.where((element) => element == job).toList();
+          newBusinesses.add(newBusiness);
+          groupedBusinesses.addAll({job.type!: newBusinesses});
+        }
       }
 
-        groupedBusinesses
-            .addAll({JobType.values.byName(stringType): businesses});
-      }
       return groupedBusinesses;
     } else {
       return 'Error ${response.statusCode}! Please try again later!';
@@ -225,6 +239,8 @@ Future createListing(JobListing listing) async {
       "businessId": ${listing.businessId},
       "name": "${listing.name}",
       "description": "${listing.description.replaceAll('\n', '\\n')}",
+      "type": "${listing.type!.name}",
+      "offerType": "${listing.offerType!.name}",
       "wage": "${listing.wage}",
       "link": "${listing.link}"
     }
@@ -324,6 +340,7 @@ Future editListing(JobListing listing) async {
       "name": "${listing.name}",
       "description": "${listing.description.replaceAll('\n', '\\n')}",
       "type": "${listing.type!.name}",
+      "offerType": "${listing.offerType!.name}",
       "wage": "${listing.wage}",
       "link": "${listing.link}"
     }
@@ -366,9 +383,6 @@ Future marinoDevLogo() async {
     Uri.parse('$apiAddress/marinodev'),
   );
 
-  // File logo = File ('${getTemporaryDirectory().toString()}/marinodev.svg');
-  // logo.writeAsBytes(response.bodyBytes);
-
   return response.bodyBytes;
 }
 

fbla_ui/lib/shared/export.dart

@@ -11,6 +11,68 @@ import 'package:pdf/pdf.dart';
 import 'package:pdf/widgets.dart' as pw;
 import 'package:printing/printing.dart';
 
+Map<DataTypeBusiness, int> dataTypePriorityBusiness = {
+  DataTypeBusiness.logo: 0,
+  DataTypeBusiness.name: 1,
+  DataTypeBusiness.description: 2,
+  DataTypeBusiness.type: 3,
+  DataTypeBusiness.website: 4,
+  DataTypeBusiness.contactName: 5,
+  DataTypeBusiness.contactEmail: 6,
+  DataTypeBusiness.contactPhone: 7,
+  DataTypeBusiness.notes: 8
+};
+
+Map<DataTypeBusiness, String> dataTypeFriendlyBusiness = {
+  DataTypeBusiness.logo: 'Logo',
+  DataTypeBusiness.name: 'Name',
+  DataTypeBusiness.description: 'Description',
+  DataTypeBusiness.type: 'Type',
+  DataTypeBusiness.website: 'Website',
+  DataTypeBusiness.contactName: 'Contact Name',
+  DataTypeBusiness.contactEmail: 'Contact Email',
+  DataTypeBusiness.contactPhone: 'Contact Phone',
+  DataTypeBusiness.notes: 'Notes'
+};
+
+Map<DataTypeJob, int> dataTypePriorityJob = {
+  DataTypeJob.businessName: 1,
+  DataTypeJob.name: 2,
+  DataTypeJob.description: 3,
+  DataTypeJob.type: 4,
+  DataTypeJob.offerType: 5,
+  DataTypeJob.wage: 6,
+  DataTypeJob.link: 7,
+};
+
+Map<DataTypeJob, String> dataTypeFriendlyJob = {
+  DataTypeJob.businessName: 'Business Name',
+  DataTypeJob.name: 'Job Listing Name',
+  DataTypeJob.description: 'Description',
+  DataTypeJob.type: 'Job Type',
+  DataTypeJob.offerType: 'Offer Type',
+  DataTypeJob.wage: 'Wage Information',
+  DataTypeJob.link: 'Additional Info Link',
+};
+
+Set<DataTypeBusiness> sortDataTypesBusiness(Set<DataTypeBusiness> set) {
+  List<DataTypeBusiness> list = set.toList();
+  list.sort((a, b) {
+    return dataTypePriorityBusiness[a]!.compareTo(dataTypePriorityBusiness[b]!);
+  });
+  set = list.toSet();
+  return set;
+}
+
+Set<DataTypeJob> sortDataTypesJob(Set<DataTypeJob> set) {
+  List<DataTypeJob> list = set.toList();
+  list.sort((a, b) {
+    return dataTypePriorityJob[a]!.compareTo(dataTypePriorityJob[b]!);
+  });
+  set = list.toSet();
+  return set;
+}
+
 class _FilterBusinessDataTypeChips extends StatefulWidget {
   final Set<DataTypeBusiness> selectedDataTypesBusiness;
 
@@ -25,16 +87,12 @@ class _FilterBusinessDataTypeChipsState
     extends State<_FilterBusinessDataTypeChips> {
   @override
   Widget build(BuildContext context) {
-    List<Padding> chips = [];
+    List<Widget> chips = [];
     for (var type in DataTypeBusiness.values) {
-      chips.add(Padding(
-        padding:
-            const EdgeInsets.only(left: 3.0, right: 3.0, bottom: 3.0, top: 3.0),
-        child: FilterChip(
+      chips.add(FilterChip(
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(20),
-                side:
-                    BorderSide(color: Theme.of(context).colorScheme.secondary)),
+              side: BorderSide(color: Theme.of(context).colorScheme.secondary)),
           label: Text(dataTypeFriendlyBusiness[type]!),
           showCheckmark: false,
           selected: widget.selectedDataTypesBusiness.contains(type),
@@ -46,10 +104,11 @@ class _FilterBusinessDataTypeChipsState
                 widget.selectedDataTypesBusiness.remove(type);
               }
             });
-            }),
-      ));
+          }));
     }
     return Wrap(
+      spacing: 6,
+      runSpacing: 6,
       children: chips,
     );
   }
@@ -74,6 +133,7 @@ class _FilterJobDataTypeChipsState extends State<_FilterJobDataTypeChips> {
         padding:
             const EdgeInsets.only(left: 3.0, right: 3.0, bottom: 3.0, top: 3.0),
         child: FilterChip(
+            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
             shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(20),
                 side:
@@ -93,6 +153,8 @@ class _FilterJobDataTypeChipsState extends State<_FilterJobDataTypeChips> {
       ));
     }
     return Wrap(
+      spacing: 6,
+      runSpacing: 6,
       children: chips,
     );
   }
@@ -113,11 +175,13 @@ Future<void> generatePDF(
       context: context,
       builder: (BuildContext context) {
         return AlertDialog(
+          contentPadding: const EdgeInsets.all(16),
+          scrollable: true,
           title: const Text('Export Settings'),
           content: SizedBox(
             width: 400,
-            height: 200,
             child: Column(
+              mainAxisSize: MainAxisSize.min,
               children: [
                 const Padding(
                   padding: EdgeInsets.all(8.0),
@@ -208,21 +272,42 @@ Future<void> generatePDF(
                       for (JobListing job in business.listings!) {
                         List<pw.Widget> jobRow = [];
                         for (DataTypeJob dataType in dataTypesJob) {
-                          if (dataType != DataTypeJob.businessName) {
-                            var currentValue =
-                                jobValueFromDataType(job, dataType);
-                            if (currentValue != null) {
-                              jobRow.add(pw.Padding(
-                                  child: pw.Text(currentValue),
-                                  padding: const pw.EdgeInsets.all(4.0)));
-                            } else {
-                              jobRow.add(pw.Container());
-                            }
-                          } else {
+                          switch (dataType) {
+                            case DataTypeJob.businessName:
                               jobRow.add(pw.Padding(
                                   child: pw.Text(business.name!),
                                   padding: const pw.EdgeInsets.all(4.0)));
+                            case DataTypeJob.type:
+                              jobRow.add(pw.Padding(
+                                  child: pw.Text(getNameFromJobType(job.type!)),
+                                  padding: const pw.EdgeInsets.all(4.0)));
+                            case DataTypeJob.offerType:
+                              jobRow.add(pw.Padding(
+                                  child: pw.Text(
+                                      getNameFromOfferType(job.offerType!)),
+                                  padding: const pw.EdgeInsets.all(4.0)));
+                            default:
+                              jobRow.add(pw.Padding(
+                                  child: pw.Text(
+                                      jobValueFromDataType(job, dataType) ??
+                                          ''),
+                                  padding: const pw.EdgeInsets.all(4.0)));
                           }
+                          // if (dataType != DataTypeJob.businessName) {
+                          //   var currentValue =
+                          //       jobValueFromDataType(job, dataType);
+                          //   if (currentValue != null) {
+                          //     jobRow.add(pw.Padding(
+                          //         child: pw.Text(currentValue),
+                          //         padding: const pw.EdgeInsets.all(4.0)));
+                          //   } else {
+                          //     jobRow.add(pw.Container());
+                          //   }
+                          // } else {
+                          //   jobRow.add(pw.Padding(
+                          //       child: pw.Text(business.name!),
+                          //       padding: const pw.EdgeInsets.all(4.0)));
+                          // }
                         }
                         tableRows.add(pw.TableRow(children: jobRow));
                       }
@@ -344,6 +429,11 @@ Map<int, pw.TableColumnWidth> _businessColumnSizes(
     map.addAll(
         {sorted.indexOf(DataTypeBusiness.logo): const pw.FixedColumnWidth(32)});
   }
+  if (sorted.contains(DataTypeBusiness.type)) {
+    space -= 68;
+    map.addAll(
+        {sorted.indexOf(DataTypeBusiness.type): const pw.FixedColumnWidth(68)});
+  }
   if (dataTypes.contains(DataTypeBusiness.contactName)) {
     space -= 72;
     map.addAll({
@@ -369,7 +459,7 @@ Map<int, pw.TableColumnWidth> _businessColumnSizes(
     leftNum += 1;
   }
   if (dataTypes.contains(DataTypeBusiness.notes)) {
-    leftNum += 2;
+    leftNum += 1;
   }
   if (dataTypes.contains(DataTypeBusiness.description)) {
     leftNum += 3;
@@ -391,9 +481,8 @@ Map<int, pw.TableColumnWidth> _businessColumnSizes(
     });
   }
   if (dataTypes.contains(DataTypeBusiness.notes)) {
-    map.addAll({
-      sorted.indexOf(DataTypeBusiness.notes): pw.FixedColumnWidth(leftNum * 2)
-    });
+    map.addAll(
+        {sorted.indexOf(DataTypeBusiness.notes): pw.FixedColumnWidth(leftNum)});
   }
   if (dataTypes.contains(DataTypeBusiness.description)) {
     map.addAll({
@@ -416,6 +505,13 @@ Map<int, pw.TableColumnWidth> _jobColumnSizes(Set<DataTypeJob> dataTypes) {
           .first): const pw.FractionColumnWidth(0.2)
     });
   }
+  if (dataTypes.contains(DataTypeJob.type)) {
+    map.addAll({
+      sortedDataTypes.indexOf(sortedDataTypes
+          .where((element) => element == DataTypeJob.type)
+          .first): const pw.FractionColumnWidth(0.1)
+    });
+  }
   if (dataTypes.contains(DataTypeJob.name)) {
     map.addAll({
       sortedDataTypes.indexOf(sortedDataTypes
@@ -427,7 +523,14 @@ Map<int, pw.TableColumnWidth> _jobColumnSizes(Set<DataTypeJob> dataTypes) {
     map.addAll({
       sortedDataTypes.indexOf(sortedDataTypes
           .where((element) => element == DataTypeJob.description)
-          .first): const pw.FractionColumnWidth(0.4)
+          .first): const pw.FractionColumnWidth(0.3)
+    });
+  }
+  if (dataTypes.contains(DataTypeJob.offerType)) {
+    map.addAll({
+      sortedDataTypes.indexOf(sortedDataTypes
+          .where((element) => element == DataTypeJob.offerType)
+          .first): const pw.FractionColumnWidth(0.1)
     });
   }
   if (dataTypes.contains(DataTypeJob.wage)) {
@@ -456,7 +559,7 @@ dynamic businessValueFromDataType(
     case DataTypeBusiness.description:
       return business.description;
     case DataTypeBusiness.type:
-      return business.type;
+      return getNameFromBusinessType(business.type!);
     case DataTypeBusiness.website:
       return business.website;
     case DataTypeBusiness.contactName:
@@ -478,6 +581,10 @@ dynamic jobValueFromDataType(JobListing job, DataTypeJob dataType) {
       return job.name;
     case DataTypeJob.description:
       return job.description;
+    case DataTypeJob.type:
+      return job.type;
+    case DataTypeJob.offerType:
+      return job.offerType;
     case DataTypeJob.wage:
       return job.wage;
     case DataTypeJob.link:

fbla_ui/lib/shared/utils.dart

@@ -5,80 +5,24 @@ enum DataTypeBusiness {
   logo,
   name,
   description,
+  type,
   website,
   contactName,
   contactEmail,
   contactPhone,
   notes,
-  type,
 }
 
 enum DataTypeJob {
   businessName,
   name,
   description,
+  type,
+  offerType,
   wage,
   link,
 }
 
-Map<DataTypeBusiness, int> dataTypePriorityBusiness = {
-  DataTypeBusiness.logo: 0,
-  DataTypeBusiness.name: 1,
-  DataTypeBusiness.description: 2,
-  DataTypeBusiness.type: 3,
-  DataTypeBusiness.website: 4,
-  DataTypeBusiness.contactName: 5,
-  DataTypeBusiness.contactEmail: 6,
-  DataTypeBusiness.contactPhone: 7,
-  DataTypeBusiness.notes: 8
-};
-
-Map<DataTypeBusiness, String> dataTypeFriendlyBusiness = {
-  DataTypeBusiness.logo: 'Logo',
-  DataTypeBusiness.name: 'Name',
-  DataTypeBusiness.description: 'Description',
-  DataTypeBusiness.type: 'Type',
-  DataTypeBusiness.website: 'Website',
-  DataTypeBusiness.contactName: 'Contact Name',
-  DataTypeBusiness.contactEmail: 'Contact Email',
-  DataTypeBusiness.contactPhone: 'Contact Phone',
-  DataTypeBusiness.notes: 'Notes'
-};
-
-Map<DataTypeJob, int> dataTypePriorityJob = {
-  DataTypeJob.businessName: 1,
-  DataTypeJob.name: 2,
-  DataTypeJob.description: 3,
-  DataTypeJob.wage: 4,
-  DataTypeJob.link: 5,
-};
-
-Map<DataTypeJob, String> dataTypeFriendlyJob = {
-  DataTypeJob.businessName: 'Business Name',
-  DataTypeJob.name: 'Job Listing Name',
-  DataTypeJob.description: 'Description',
-  DataTypeJob.wage: 'Wage',
-  DataTypeJob.link: 'Additional Info Link',
-};
-
-Set<DataTypeBusiness> sortDataTypesBusiness(Set<DataTypeBusiness> set) {
-  List<DataTypeBusiness> list = set.toList();
-  list.sort((a, b) {
-    return dataTypePriorityBusiness[a]!.compareTo(dataTypePriorityBusiness[b]!);
-  });
-  set = list.toSet();
-  return set;
-}
-
-Set<DataTypeJob> sortDataTypesJob(Set<DataTypeJob> set) {
-  List<DataTypeJob> list = set.toList();
-  list.sort((a, b) {
-    return dataTypePriorityJob[a]!.compareTo(dataTypePriorityJob[b]!);
-  });
-  set = list.toSet();
-  return set;
-}
-
 enum BusinessType {
   food,
   shop,
@@ -88,7 +32,17 @@ enum BusinessType {
   other,
 }
 
-enum JobType { cashier, server, mechanic, other }
+enum JobType {
+  retail,
+  customerService,
+  foodService,
+  education,
+  maintenance,
+  manufacturing,
+  other,
+}
+
+enum OfferType { job, internship, apprenticeship }
 
 class JobListing {
   int? id;
@@ -96,17 +50,20 @@ class JobListing {
   String name;
   String description;
   JobType? type;
+  OfferType? offerType;
   String? wage;
   String? link;
 
-  JobListing(
-      {this.id,
+  JobListing({
+    this.id,
     this.businessId,
     required this.name,
     required this.description,
     this.type,
+    this.offerType,
     this.wage,
-      this.link});
+    this.link,
+  });
 
   factory JobListing.copy(JobListing input) {
     return JobListing(
@@ -115,6 +72,7 @@ class JobListing {
       name: input.name,
       description: input.description,
       type: input.type,
+      offerType: input.offerType,
       wage: input.wage,
       link: input.link,
     );
@@ -139,7 +97,7 @@ class Business {
       {required this.id,
       required this.name,
       required this.description,
-      required this.website,
+      this.website,
       this.type,
       this.contactName,
       this.contactEmail,
@@ -161,7 +119,9 @@ class Business {
             description: json['listings'][i]['description'],
             type: JobType.values.byName(json['listings'][i]['type']),
             wage: json['listings'][i]['wage'],
-            link: json['listings'][i]['link']));
+            link: json['listings'][i]['link'],
+            offerType:
+                OfferType.values.byName(json['listings'][i]['offerType'])));
       }
     }
 
@@ -217,12 +177,18 @@ IconData getIconFromBusinessType(BusinessType type) {
 
 IconData getIconFromJobType(JobType type) {
   switch (type) {
-    case JobType.cashier:
+    case JobType.retail:
       return Icons.shopping_bag;
-    case JobType.server:
+    case JobType.customerService:
+      return Icons.support_agent;
+    case JobType.foodService:
       return Icons.restaurant;
-    case JobType.mechanic:
-      return Icons.construction;
+    case JobType.education:
+      return Icons.school;
+    case JobType.maintenance:
+      return Icons.handyman;
+    case JobType.manufacturing:
+      return Icons.factory;
     case JobType.other:
       return Icons.work;
   }
@@ -247,12 +213,18 @@ pw.IconData getPwIconFromBusinessType(BusinessType type) {
 
 pw.IconData getPwIconFromJobType(JobType type) {
   switch (type) {
-    case JobType.cashier:
+    case JobType.retail:
       return const pw.IconData(0xf1cc);
-    case JobType.server:
+    case JobType.customerService:
+      return const pw.IconData(0xf0e2);
+    case JobType.foodService:
       return const pw.IconData(0xe56c);
-    case JobType.mechanic:
-      return const pw.IconData(0xea3c);
+    case JobType.education:
+      return const pw.IconData(0xe80c);
+    case JobType.maintenance:
+      return const pw.IconData(0xf10b);
+    case JobType.manufacturing:
+      return const pw.IconData(0xebbc);
     case JobType.other:
       return const pw.IconData(0xe8f9);
   }
@@ -277,17 +249,56 @@ String getNameFromBusinessType(BusinessType type) {
 
 String getNameFromJobType(JobType type) {
   switch (type) {
-    case JobType.cashier:
-      return 'Cashier';
-    case JobType.server:
-      return 'Server';
-    case JobType.mechanic:
-      return 'Mechanic';
+    case JobType.retail:
+      return 'Retail';
+    case JobType.customerService:
+      return 'Customer Service';
+    case JobType.foodService:
+      return 'Food Service';
+    case JobType.education:
+      return 'Education';
+    case JobType.maintenance:
+      return 'Maintenance';
+    case JobType.manufacturing:
+      return 'Manufacturing';
     case JobType.other:
       return 'Other';
   }
 }
 
+String getNameFromOfferType(OfferType type) {
+  switch (type) {
+    case OfferType.job:
+      return 'Job';
+    case OfferType.internship:
+      return 'Internship';
+    case OfferType.apprenticeship:
+      return 'Apprenticeship';
+  }
+}
+
+String getLetterFromOfferType(OfferType type) {
+  switch (type) {
+    case OfferType.job:
+      return 'J';
+    case OfferType.internship:
+      return 'I';
+    case OfferType.apprenticeship:
+      return 'A';
+  }
+}
+
+Color getColorFromOfferType(OfferType type) {
+  switch (type) {
+    case OfferType.job:
+      return Colors.blue;
+    case OfferType.internship:
+      return Colors.green.shade800;
+    case OfferType.apprenticeship:
+      return Colors.red;
+  }
+}
+
 IconData getIconFromThemeMode(ThemeMode theme) {
   switch (theme) {
     case ThemeMode.dark:

fbla_ui/lib/shared/widgets.dart

@@ -6,488 +6,6 @@ import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:url_launcher/url_launcher.dart';
 
-// class BusinessDisplayPanel extends StatefulWidget {
-//   final Map<JobType, List<Business>>? jobGroupedBusinesses;
-//   final Map<BusinessType, List<Business>>? businessGroupedBusinesses;
-//   final bool widescreen;
-//   final Set<Business>? selectedBusinesses;
-//
-//   const BusinessDisplayPanel(
-//       {super.key,
-//       this.jobGroupedBusinesses,
-//       this.businessGroupedBusinesses,
-//       required this.widescreen,
-//       this.selectedBusinesses});
-//
-//   @override
-//   State<BusinessDisplayPanel> createState() => _BusinessDisplayPanelState();
-// }
-//
-// class _BusinessDisplayPanelState extends State<BusinessDisplayPanel> {
-//   @override
-//   Widget build(BuildContext context) {
-//     if ((widget.businessGroupedBusinesses?.keys ?? <BusinessType>[]).isEmpty &&
-//         (widget.jobGroupedBusinesses?.keys ?? <JobType>[]).isEmpty) {
-//       return const SliverToBoxAdapter(
-//         child: Center(
-//           child: Padding(
-//             padding: EdgeInsets.all(16.0),
-//             child: Text(
-//               'No results found!\nPlease change your search filters.',
-//               textAlign: TextAlign.center,
-//               style: TextStyle(fontSize: 18),
-//             ),
-//           ),
-//         ),
-//       );
-//     }
-//
-//     List<BusinessHeader> headers = [];
-//     if (widget.jobGroupedBusinesses != null) {
-//       for (JobType jobType in widget.jobGroupedBusinesses!.keys) {
-//         headers.add(BusinessHeader(
-//             jobType: jobType,
-//             widescreen: widget.widescreen,
-//             // selectable: widget.selectable,
-//             selectedBusinesses: widget.selectedBusinesses,
-//             // updateSelectedBusinessesCallback:
-//             //     widget.updateSelectedBusinessesCallback,
-//             businesses: widget.jobGroupedBusinesses![jobType]!));
-//       }
-//       headers.sort((a, b) => a.jobType!.index.compareTo(b.jobType!.index));
-//       return MultiSliver(children: headers);
-//     } else if (widget.businessGroupedBusinesses != null) {
-//       for (BusinessType businessType
-//           in widget.businessGroupedBusinesses!.keys) {
-//         headers.add(BusinessHeader(
-//             businessType: businessType,
-//             widescreen: widget.widescreen,
-//             selectedBusinesses: widget.selectedBusinesses,
-//             businesses: widget.businessGroupedBusinesses![businessType]!));
-//       }
-//       headers.sort(
-//           (a, b) => a.businessType!.index.compareTo(b.businessType!.index));
-//       return MultiSliver(children: headers);
-//     }
-//     return const Text('Error with input data!');
-//   }
-// }
-//
-// class BusinessHeader extends StatefulWidget {
-//   final JobType? jobType;
-//   final BusinessType? businessType;
-//   final List<Business> businesses;
-//   final Set<Business>? selectedBusinesses;
-//   final bool widescreen;
-//   final void Function()? updateSelectedBusinessesCallback;
-//
-//   const BusinessHeader({
-//     super.key,
-//     this.jobType,
-//     this.businessType,
-//     required this.businesses,
-//     required this.widescreen,
-//     this.updateSelectedBusinessesCallback,
-//     this.selectedBusinesses,
-//   });
-//
-//   @override
-//   State<BusinessHeader> createState() => _BusinessHeaderState();
-// }
-//
-// class _BusinessHeaderState extends State<BusinessHeader> {
-//   refresh() {
-//     setState(() {});
-//   }
-//
-//   @override
-//   Widget build(BuildContext context) {
-//     return SliverStickyHeader(
-//       header: Container(
-//         height: 55.0,
-//         color: Theme.of(context).colorScheme.primary,
-//         padding: const EdgeInsets.symmetric(horizontal: 16.0),
-//         alignment: Alignment.centerLeft,
-//         child: _getHeaderRow(widget.selectedBusinesses),
-//       ),
-//       sliver: _getChildSliver(
-//           widget.businesses, widget.widescreen, widget.selectedBusinesses),
-//     );
-//   }
-//
-//   Widget _getHeaderRow(Set<Business>? selectedBusinesses) {
-//     if (selectedBusinesses != null) {
-//       return Row(
-//         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-//         children: [
-//           Row(
-//             children: [
-//               Padding(
-//                   padding: const EdgeInsets.only(left: 4.0, right: 12.0),
-//                   child: Icon(
-//                     widget.jobType != null
-//                         ? getIconFromJobType(widget.jobType!)
-//                         : getIconFromBusinessType(widget.businessType!),
-//                     color: Theme.of(context).colorScheme.onPrimary,
-//                   )),
-//               Text(widget.jobType != null
-//                   ? getNameFromJobType(widget.jobType!)
-//                   : getNameFromBusinessType(widget.businessType!)),
-//             ],
-//           ),
-//           Padding(
-//             padding: const EdgeInsets.only(right: 12.0),
-//             child: Checkbox(
-//               checkColor: Theme.of(context).colorScheme.primary,
-//               activeColor: Theme.of(context).colorScheme.onPrimary,
-//               value: widget.selectedBusinesses!.containsAll(widget.businesses),
-//               onChanged: (value) {
-//                 if (value!) {
-//                   setState(() {
-//                     widget.selectedBusinesses!.addAll(widget.businesses);
-//                   });
-//                 } else {
-//                   setState(() {
-//                     widget.selectedBusinesses!.removeAll(widget.businesses);
-//                   });
-//                 }
-//               },
-//             ),
-//           ),
-//         ],
-//       );
-//     } else {
-//       return Row(
-//         children: [
-//           Padding(
-//             padding: const EdgeInsets.only(left: 4.0, right: 12.0),
-//             child: Icon(
-//               widget.jobType != null
-//                   ? getIconFromJobType(widget.jobType!)
-//                   : getIconFromBusinessType(widget.businessType!),
-//               color: Theme.of(context).colorScheme.onPrimary,
-//             ),
-//           ),
-//           Text(
-//             widget.jobType != null
-//                 ? getNameFromJobType(widget.jobType!)
-//                 : getNameFromBusinessType(widget.businessType!),
-//             style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
-//           ),
-//         ],
-//       );
-//     }
-//   }
-//
-//   Widget _getChildSliver(List<Business> businesses, bool widescreen,
-//       Set<Business>? selectedBusinesses) {
-//     if (widescreen) {
-//       return SliverPadding(
-//         padding: const EdgeInsets.all(4),
-//         sliver: SliverGrid(
-//           gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-//             mainAxisExtent: 250.0,
-//             maxCrossAxisExtent: 400.0,
-//             mainAxisSpacing: 4.0,
-//             crossAxisSpacing: 4.0,
-//           ),
-//           delegate: SliverChildBuilderDelegate(
-//             childCount: businesses.length,
-//             (BuildContext context, int index) {
-//               return BusinessCard(
-//                 business: businesses[index],
-//                 selectedBusinesses: selectedBusinesses,
-//                 widescreen: widescreen,
-//                 callback: refresh,
-//                 jobType: widget.jobType,
-//               );
-//             },
-//           ),
-//         ),
-//       );
-//     } else {
-//       return SliverList(
-//         delegate: SliverChildBuilderDelegate(
-//           childCount: businesses.length,
-//           (BuildContext context, int index) {
-//             return BusinessCard(
-//               business: businesses[index],
-//               selectedBusinesses: selectedBusinesses,
-//               widescreen: widescreen,
-//               callback: refresh,
-//               jobType: widget.jobType,
-//             );
-//           },
-//         ),
-//       );
-//     }
-//   }
-// }
-//
-// class BusinessCard extends StatefulWidget {
-//   final Business business;
-//   final bool widescreen;
-//   final Set<Business>? selectedBusinesses;
-//   final Function callback;
-//   final JobType? jobType;
-//   final BusinessType? businessType;
-//
-//   const BusinessCard({
-//     super.key,
-//     required this.business,
-//     required this.widescreen,
-//     required this.callback,
-//     this.jobType,
-//     this.businessType,
-//     this.selectedBusinesses,
-//   });
-//
-//   @override
-//   State<BusinessCard> createState() => _BusinessCardState();
-// }
-//
-// class _BusinessCardState extends State<BusinessCard> {
-//   @override
-//   Widget build(BuildContext context) {
-//     if (widget.widescreen) {
-//       return _businessTile(widget.business, widget.selectedBusinesses,
-//           widget.jobType, widget.businessType);
-//     } else {
-//       return _businessListItem(widget.business, widget.selectedBusinesses,
-//           widget.callback, widget.jobType, widget.businessType);
-//     }
-//   }
-//
-//   Widget _businessTile(Business business, Set<Business>? selectedBusinesses,
-//       JobType? jobType, BusinessType? businessType) {
-//     return MouseRegion(
-//       cursor: SystemMouseCursors.click,
-//       child: GestureDetector(
-//         onTap: () {
-//           Navigator.of(context).push(MaterialPageRoute(
-//               builder: (context) => BusinessDetail(
-//                     id: business.id,
-//                     name: business.name!,
-//                   )));
-//         },
-//         child: Card(
-//           clipBehavior: Clip.antiAlias,
-//           child: Column(
-//             crossAxisAlignment: CrossAxisAlignment.center,
-//             children: [
-//               _getTileRow(business, selectedBusinesses, widget.callback),
-//               Padding(
-//                 padding: const EdgeInsets.all(8.0),
-//                 child: Text(
-//                   business.description!,
-//                   maxLines: selectedBusinesses != null ? 7 : 5,
-//                   overflow: TextOverflow.ellipsis,
-//                 ),
-//               ),
-//               const Spacer(),
-//               Padding(
-//                   padding: const EdgeInsets.all(8.0),
-//                   child: selectedBusinesses == null
-//                       ? Row(
-//                           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-//                           children: [
-//                             IconButton(
-//                               icon: const Icon(Icons.link),
-//                               onPressed: () {
-//                                 launchUrl(
-//                                     Uri.parse('https://${business.website}'));
-//                               },
-//                             ),
-//                             if (business.locationName != '')
-//                               IconButton(
-//                                 icon: const Icon(Icons.location_on),
-//                                 onPressed: () {
-//                                   launchUrl(Uri.parse(Uri.encodeFull(
-//                                       'https://www.google.com/maps/search/?api=1&query=${business.locationName}')));
-//                                 },
-//                               ),
-//                             if ((business.contactPhone != null) &&
-//                                 (business.contactPhone != ''))
-//                               IconButton(
-//                                 icon: const Icon(Icons.phone),
-//                                 onPressed: () {
-//                                   showDialog(
-//                                       context: context,
-//                                       builder: (BuildContext context) {
-//                                         return AlertDialog(
-//                                           backgroundColor: Theme.of(context)
-//                                               .colorScheme
-//                                               .surface,
-//                                           title: Text((business.contactName ==
-//                                                       null ||
-//                                                   business.contactName == '')
-//                                               ? 'Contact ${business.name}?'
-//                                               : 'Contact ${business.contactName}'),
-//                                           content: Text((business.contactName ==
-//                                                       null ||
-//                                                   business.contactName == '')
-//                                               ? 'Would you like to call or text ${business.name}?'
-//                                               : 'Would you like to call or text ${business.contactName}?'),
-//                                           actions: [
-//                                             TextButton(
-//                                                 child: const Text('Text'),
-//                                                 onPressed: () {
-//                                                   launchUrl(Uri.parse(
-//                                                       'sms:${business.contactPhone}'));
-//                                                   Navigator.of(context).pop();
-//                                                 }),
-//                                             TextButton(
-//                                                 child: const Text('Call'),
-//                                                 onPressed: () async {
-//                                                   launchUrl(Uri.parse(
-//                                                       'tel:${business.contactPhone}'));
-//                                                   Navigator.of(context).pop();
-//                                                 }),
-//                                           ],
-//                                         );
-//                                       });
-//                                 },
-//                               ),
-//                             if (business.contactEmail != '')
-//                               IconButton(
-//                                 icon: const Icon(Icons.email),
-//                                 onPressed: () {
-//                                   launchUrl(Uri.parse(
-//                                       'mailto:${business.contactEmail}'));
-//                                 },
-//                               ),
-//                           ],
-//                         )
-//                       : null),
-//             ],
-//           ),
-//         ),
-//       ),
-//     );
-//   }
-//
-//   Widget _getTileRow(
-//       Business business, Set<Business>? selectedBusinesses, Function callback) {
-//     if (selectedBusinesses != null) {
-//       return Row(
-//         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-//         children: [
-//           Padding(
-//             padding: const EdgeInsets.all(8.0),
-//             child: ClipRRect(
-//               borderRadius: BorderRadius.circular(6.0),
-//               child: Image.network('$apiAddress/logos/${business.id}',
-//                   height: 48, width: 48, errorBuilder: (BuildContext context,
-//                       Object exception, StackTrace? stackTrace) {
-//                 return Icon(
-//                   getIconFromBusinessType(business.type!),
-//                   size: 48,
-//                 );
-//               }),
-//             ),
-//           ),
-//           Flexible(
-//             child: Padding(
-//               padding: const EdgeInsets.all(8.0),
-//               child: Text(
-//                 business.name!,
-//                 style:
-//                     const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
-//                 maxLines: 2,
-//                 overflow: TextOverflow.ellipsis,
-//               ),
-//             ),
-//           ),
-//           Padding(
-//             padding: const EdgeInsets.only(right: 24.0),
-//             child: _checkbox(callback, selectedBusinesses),
-//           )
-//         ],
-//       );
-//     } else {
-//       return Row(
-//         children: [
-//           Padding(
-//               padding: const EdgeInsets.all(8.0),
-//               child: ClipRRect(
-//                 borderRadius: BorderRadius.circular(6.0),
-//                 child: Image.network('$apiAddress/logos/${business.id}',
-//                     height: 48, width: 48, errorBuilder: (BuildContext context,
-//                         Object exception, StackTrace? stackTrace) {
-//                   return Icon(getIconFromBusinessType(business.type!),
-//                       size: 48);
-//                 }),
-//               )),
-//           Flexible(
-//             child: Padding(
-//               padding: const EdgeInsets.all(8.0),
-//               child: Text(
-//                 business.name!,
-//                 style:
-//                     const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
-//                 maxLines: 2,
-//                 overflow: TextOverflow.ellipsis,
-//               ),
-//             ),
-//           ),
-//         ],
-//       );
-//     }
-//   }
-//
-//   Widget _businessListItem(Business business, Set<Business>? selectedBusinesses,
-//       Function callback, JobType? jobType, BusinessType? businessType) {
-//     return Card(
-//       child: ListTile(
-//         leading: ClipRRect(
-//             borderRadius: BorderRadius.circular(3.0),
-//             child: Image.network('$apiAddress/logos/${business.id}',
-//                 height: 24, width: 24, errorBuilder: (BuildContext context,
-//                     Object exception, StackTrace? stackTrace) {
-//               return Icon(getIconFromBusinessType(business.type!));
-//             })),
-//         title: Text(business.name!),
-//         subtitle: Text(business.description!,
-//             maxLines: 1, overflow: TextOverflow.ellipsis),
-//         trailing: _getCheckbox(selectedBusinesses, callback),
-//         onTap: () {
-//           Navigator.of(context).push(MaterialPageRoute(
-//               builder: (context) => BusinessDetail(
-//                     id: business.id,
-//                     name: business.name!,
-//                   )));
-//         },
-//       ),
-//     );
-//   }
-//
-//   Widget _checkbox(Function callback, Set<Business> selectedBusinesses) {
-//     return Checkbox(
-//       value: selectedBusinesses.contains(widget.business),
-//       onChanged: (value) {
-//         if (value!) {
-//           setState(() {
-//             selectedBusinesses.add(widget.business);
-//           });
-//         } else {
-//           setState(() {
-//             selectedBusinesses.remove(widget.business);
-//           });
-//         }
-//         callback();
-//       },
-//     );
-//   }
-//
-//   Widget? _getCheckbox(Set<Business>? selectedBusinesses, Function callback) {
-//     if (selectedBusinesses != null) {
-//       return _checkbox(callback, selectedBusinesses);
-//     } else {
-//       return null;
-//     }
-//   }
-// }
-
 class BusinessSearchBar extends StatefulWidget {
   final String searchTextHint;
   final Widget filterIconButton;
@@ -504,6 +22,8 @@ class BusinessSearchBar extends StatefulWidget {
 }
 
 class _BusinessSearchBarState extends State<BusinessSearchBar> {
+  TextEditingController controller = TextEditingController();
+
   @override
   Widget build(BuildContext context) {
     return SizedBox(
@@ -511,6 +31,7 @@ class _BusinessSearchBarState extends State<BusinessSearchBar> {
       height: 50,
       child: SearchBar(
           hintText: widget.searchTextHint,
+          controller: controller,
           backgroundColor: WidgetStateProperty.resolveWith((notNeeded) {
             return Theme.of(context).colorScheme.surfaceContainer;
           }),
@@ -521,7 +42,17 @@ class _BusinessSearchBarState extends State<BusinessSearchBar> {
             padding: EdgeInsets.only(left: 8.0),
             child: Icon(Icons.search),
           ),
-          trailing: [widget.filterIconButton]),
+          trailing: [
+            if (controller.text != '')
+              IconButton(
+                icon: const Icon(Icons.clear),
+                onPressed: () {
+                  controller.text = '';
+                  widget.setSearchCallback('');
+                },
+              ),
+            widget.filterIconButton
+          ]),
     );
   }
 }
@@ -624,10 +155,19 @@ class _MainSliverAppBarState extends State<MainSliverAppBar> {
   Widget build(BuildContext context) {
     return SliverAppBar(
       title: widget.widescreen
-          ? BusinessSearchBar(
+          ? Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Flexible(
+                  child: BusinessSearchBar(
                     setSearchCallback: widget.setSearch,
                     searchTextHint: widget.searchHintText,
                     filterIconButton: widget.filterIconButton,
+                  ),
+                )
+                // const PreferredSize(
+                //     preferredSize: Size(144, 0), child: SizedBox())
+              ],
             )
           : const Text('Job Link'),
       toolbarHeight: 70,
@@ -723,29 +263,6 @@ class _MainSliverAppBarState extends State<MainSliverAppBar> {
                 });
           },
         ),
-// IconButton(
-//   icon: const Icon(Icons.picture_as_pdf),
-//   onPressed: () async {
-//     if (!_isPreviousData) {
-//       ScaffoldMessenger.of(context).clearSnackBars();
-//       ScaffoldMessenger.of(context).showSnackBar(
-//         const SnackBar(
-//           width: 300,
-//           behavior: SnackBarBehavior.floating,
-//           content: Text('There is no data!'),
-//           duration: Duration(seconds: 2),
-//         ),
-//       );
-//     } else {
-//       selectedDataTypesBusiness = <DataTypeBusiness>{};
-//       Navigator.push(
-//           context,
-//           MaterialPageRoute(
-//               builder: (context) => ExportData(
-//                   groupedBusinesses: overviewBusinesses)));
-//     }
-//   },
-// ),
         Padding(
           padding: const EdgeInsets.only(right: 8.0),
           child: IconButton(
@@ -819,3 +336,74 @@ class _MainSliverAppBarState extends State<MainSliverAppBar> {
     return null;
   }
 }
+
+class ContactInformationCard extends StatelessWidget {
+  final Business business;
+
+  ContactInformationCard({super.key, required this.business});
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      child: Column(
+        children: [
+          Row(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(left: 16.0, top: 8.0),
+                child: Text(
+                  business.contactName!,
+                  textAlign: TextAlign.left,
+                  style: const TextStyle(
+                      fontSize: 20, fontWeight: FontWeight.bold),
+                ),
+              ),
+            ],
+          ),
+          if (business.contactPhone != null)
+            ListTile(
+              leading: const Icon(Icons.phone),
+              title: Text(business.contactPhone!),
+              onTap: () {
+                showDialog(
+                    context: context,
+                    builder: (BuildContext context) {
+                      return AlertDialog(
+                        backgroundColor: Theme.of(context).colorScheme.surface,
+                        title: Text('Contact ${business.contactName}'),
+                        content: Text(
+                            'Would you like to call or text ${business.contactName}?'),
+                        actions: [
+                          TextButton(
+                              child: const Text('Text'),
+                              onPressed: () {
+                                launchUrl(
+                                    Uri.parse('sms:${business.contactPhone}'));
+                                Navigator.of(context).pop();
+                              }),
+                          TextButton(
+                              child: const Text('Call'),
+                              onPressed: () async {
+                                launchUrl(
+                                    Uri.parse('tel:${business.contactPhone}'));
+                                Navigator.of(context).pop();
+                              }),
+                        ],
+                      );
+                    });
+              },
+            ),
+          if (business.contactEmail != null)
+            ListTile(
+              leading: const Icon(Icons.email),
+              title: Text(business.contactEmail!),
+              onTap: () {
+                launchUrl(Uri.parse('mailto:${business.contactEmail}'));
+              },
+            ),
+        ],
+      ),
+    );
+  }
+}

fbla_ui/pubspec.lock

@@ -308,10 +308,10 @@ packages:
     dependency: transitive
     description:
       name: path_provider_android
-      sha256: "9c96da072b421e98183f9ea7464898428e764bc0ce5567f27ec8693442e72514"
+      sha256: bca87b0165ffd7cdb9cad8edd22d18d2201e886d9a9f19b4fb3452ea7df3a72a
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.5"
+    version: "2.2.6"
   path_provider_foundation:
     dependency: transitive
     description:
@@ -348,10 +348,10 @@ packages:
     dependency: "direct main"
     description:
       name: pdf
-      sha256: "243f05342fc0bdf140eba5b069398985cdbdd3dbb1d776cf43d5ea29cc570ba6"
+      sha256: "81d5522bddc1ef5c28e8f0ee40b71708761753c163e0c93a40df56fd515ea0f0"
       url: "https://pub.dev"
     source: hosted
-    version: "3.10.8"
+    version: "3.11.0"
   pdf_widget_wrapper:
     dependency: transitive
     description:
@@ -372,10 +372,10 @@ packages:
     dependency: transitive
     description:
       name: platform
-      sha256: "12220bb4b65720483f8fa9450b4332347737cf8213dd2840d8b2c823e47243ec"
+      sha256: "9b71283fc13df574056616011fb138fd3b793ea47cc509c189a6c3fa5f8a1a65"
       url: "https://pub.dev"
     source: hosted
-    version: "3.1.4"
+    version: "3.1.5"
   plugin_platform_interface:
     dependency: transitive
     description:
@@ -396,10 +396,10 @@ packages:
     dependency: "direct main"
     description:
       name: printing
-      sha256: "1c99cab90ebcc1fff65831d264627d5b529359d563e53f33ab9b8117f2d280bc"
+      sha256: cc4b256a5a89d5345488e3318897b595867f5181b8c5ed6fc63bfa5f2044aec3
       url: "https://pub.dev"
     source: hosted
-    version: "5.12.0"
+    version: "5.13.1"
   qr:
     dependency: transitive
     description:
@@ -412,10 +412,10 @@ packages:
     dependency: "direct main"
     description:
       name: rive
-      sha256: "03bae056e67a5c98f9523c34f8ea63c15b323426a7e8d76d7ebb93066d4df6dc"
+      sha256: "0342c9cd3c83ceeee4ad9246b98d628a2e9abd9d615acf69fa81fbbcf84a36ae"
       url: "https://pub.dev"
     source: hosted
-    version: "0.13.5"
+    version: "0.13.8"
   rive_common:
     dependency: transitive
     description: